fix: bugs fixed

deco-sites · Dec 6, 2024 · 6d0acaf · 6d0acaf
1 parent a4e05db
commit 6d0acaf
Show file tree

Hide file tree

Showing 29 changed files with 139 additions and 102 deletions.
diff --git a/.deco/blocks/pages-home-c4bcbfb771e9.json b/.deco/blocks/pages-home-c4bcbfb771e9.json
@@ -14,12 +14,7 @@
           "desktop": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/unabeleza/71b461f6-3a28-4bbc-b825-23f840969c93/home-banner.png",
           "mobile": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/unabeleza/71b461f6-3a28-4bbc-b825-23f840969c93/home-banner.png",
           "alt": "Shoes",
-          "action": {
-            "title": "Skate into Adventure",
-            "subTitle": "Top-quality roller skate shoes for all levels. ",
-            "href": "/busca?busca=shoes&page=0",
-            "label": "Grab Yours Now!"
-          }
+          "action": {}
         },
         {
           "desktop": "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2177/d26304f4-355b-48d0-b649-e24b9cbf0ded",
@@ -819,7 +814,8 @@
           },
           "prices": {}
         }
-      }
+      },
+      "linkImage": "#"
     },
     {
       "__resolveType": "website/sections/Rendering/Lazy.tsx",

diff --git a/components/footer/MenuDesktopFooter.tsx b/components/footer/MenuDesktopFooter.tsx
@@ -32,7 +32,7 @@ export default function MenuDesktopFooter(
             <ul class="flex justify-evenly w-full">
               {menus?.map(({ title, items }) => (
                 <li class="flex flex-col gap-4">
-                  <h3 class="font-[PP-Hatton] text-sm font-bold">{title}</h3>
+                  <h3 class="text-sm font-bold">{title}</h3>
                   <ul class="flex flex-col gap-2 max-w-[174px]">
                     {items.map(({ title, href }) => {
                       const newTitle = title.includes("strong")
@@ -41,7 +41,7 @@ export default function MenuDesktopFooter(
                       return (
                         <li>
                           <a
-                            class="text-sm font-medium text-base-400 flex gap-[5px]"
+                            class="text-xs font-medium text-base-400 flex gap-[5px]"
                             href={href}
                             dangerouslySetInnerHTML={{ __html: newTitle }}
                           />
@@ -55,7 +55,7 @@ export default function MenuDesktopFooter(
           </div>
 
           <div class="flex flex-col flex-[1] gap-4">
-            <h3 class="font-[PP-Hatton] text-sm font-bold">
+            <h3 class="text-sm font-bold">
               {paymentMethods?.title}
             </h3>
             <ul class="grid grid-cols-5 auto-rows-auto gap-x-[6px] gap-y-[10px] w-fit">

diff --git a/components/footer/components/Developer.tsx b/components/footer/components/Developer.tsx
@@ -4,7 +4,7 @@ import { DeveloperLogo } from "../types.ts";
 export default function Developer({ econverse, wake, yav }: DeveloperLogo) {
   return (
     <div class="flex flex-col gap-[7px] justify-center">
-      <span class="font-[PP-Hatton] text-sm font-bold text-center">
+      <span class="text-sm font-bold text-center">
         Layout e desenvolvimento
       </span>
       <div class="flex justify-center gap-4">

diff --git a/components/footer/components/SocialMedia.tsx b/components/footer/components/SocialMedia.tsx
@@ -9,7 +9,7 @@ export default function SocialMedia({ social }: SocialMediaProps) {
   if (!social) return null;
   return (
     <div class="flex flex-col gap-[9.39px] mobile:justify-center">
-      <span class="font-[PP-Hatton] text-sm font-bold mobile:text-center">
+      <span class="text-sm font-bold mobile:text-center">
         Redes sociais
       </span>
       <ul class="flex gap-4 mobile:justify-center">

diff --git a/components/header/Alert.tsx b/components/header/Alert.tsx
@@ -15,7 +15,7 @@ function Alert({ alerts = [], interval = 5 }: Props) {
 
   return (
     <div id={id}>
-      <Slider class="carousel carousel-center w-screen gap-6 bg-secondary text-secondary-content text-sm/4">
+      <Slider class="carousel carousel-center w-screen gap-6 bg-[#DBB9F9] text-black text-sm/4">
         {alerts.map((alert, index) => (
           <Slider.Item index={index} class="carousel-item">
             <span

diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx
@@ -23,7 +23,7 @@ function NavItem({ item }: { item: SiteNavigationElement }) {
   });
 
   return (
-    <li class="group flex items-center hover:border-b-2 last:hover:border-b-0 border-black mb-[1px] justify-center last:bg-primary h-[29px] last:rounded-[5px] last:py-1 last:px-3">
+    <li class="group flex items-center hover:border-b-2 last:hover:border-b-0 border-black mb-[1px] justify-center last:bg-[#DBB9F9] h-[29px] last:rounded-[5px] last:py-1 last:px-3">
       <a
         href={url}
         class="group-last:font-bold group-hover:font-bold text-sm font-normal leading-[21px]"

diff --git a/components/home/ShelfWithText.tsx b/components/home/ShelfWithText.tsx
@@ -1,5 +1,5 @@
 import type { Product } from "apps/commerce/types.ts";
-
+import { useDevice } from "@deco/deco/hooks";
 import ProductSlider from "../../components/product/ProductSlider.tsx";
 import { clx } from "../../sdk/clx.ts";
 
@@ -18,6 +18,11 @@ export default function ShelfWithText(
     return null;
   }
 
+  const device = useDevice();
+  const filteredProducts = device === "desktop"
+  ? products.slice(0, 2)
+  : products;
+
   return (
     <div class={clx("flex flex-col justify-between w-full", _class)}>
       <div class="flex flex-col gap-6">
@@ -27,7 +32,7 @@ export default function ShelfWithText(
         <p class="text-sm font-normal">{text}</p>
       </div>
       <div class="mobile:py-[30px] w-full">
-        <ProductSlider products={products} itemListName={title} />
+        <ProductSlider products={filteredProducts} itemListName={title} class="desktop:hidden"/>
       </div>
     </div>
   );

diff --git a/components/product/OutOfStock.tsx b/components/product/OutOfStock.tsx
@@ -25,20 +25,22 @@ export const action = async (props: Props, req: Request, ctx: AppContext) => {
 export default function Notify({ productID }: Props) {
   return (
     <form
-      class="form-control justify-start gap-2"
+      class="form-control justify-start gap-4"
       hx-sync="this:replace"
       hx-indicator="this"
       hx-swap="none"
       hx-post={useComponent<Props>(import.meta.url, { productID })}
     >
-      <span class="text-base">Este produto está indisponivel no momento</span>
-      <span class="text-sm">Avise-me quando estiver disponivel</span>
+      <span class="text-lg text-[#363B4B] text-start font-bold font-[PP-Hatton]">Avise-me quando chegar</span>
+      <span class="mobile:text-sm text-[#363B4B] text-start">Para ser avisado da disponibilidade deste Produto, basta preencher os campos abaixo.</span>
 
-      <input placeholder="Nome" class="input input-bordered" name="name" />
-      <input placeholder="Email" class="input input-bordered" name="email" />
+      <div class="flex gap-[14px] mobile:flex-col">
+        <input placeholder="Digite seu nome" class="input rounded-[5px] grow input-bordered" name="name" />
+        <input placeholder="Digite sei e-mail" class="input rounded-[5px] grow input-bordered" name="email" />
+      </div>
 
-      <button class="btn btn-primary no-animation">
-        <span class="[.htmx-request_&]:hidden inline">Enviar</span>
+      <button class="btn border-2 border-secondary bg-white rounded-[5px] no-animation hover:bg-secondary group">
+        <span class="[.htmx-request_&]:hidden inline text-secondary font-bold group-hover:text-white">AVISE-ME</span>
         <span class="[.htmx-request_&]:inline hidden loading loading-spinner loading-xs" />
       </button>
     </form>

diff --git a/components/product/PaymentMethods.tsx b/components/product/PaymentMethods.tsx
@@ -53,7 +53,7 @@ export default function PaymentMethods({ methods, priceCurrency }: PaymentMethod
                                     defaultChecked
                                     class={clx(
                                         "tab !w-[calc((38.19vw_-_40px)_/_3)] mobile:!w-[calc((100vw_-_64px)_/_3)] h-fit !border-b checked:!border-b-2",
-                                        "checked:!border-primary font-bold text-sm mobile:text-xs checked:text-primary uppercase"
+                                        "checked:!border-secondary font-bold text-sm mobile:text-xs checked:text-secondary uppercase"
                                     )}
                                     aria-label={obj.name}
                                 />
@@ -79,7 +79,7 @@ export default function PaymentMethods({ methods, priceCurrency }: PaymentMethod
                                 role="tab"
                                 class={clx(
                                     "tab !w-[calc((38.19vw_-_40px)_/_3)] mobile:!w-[calc((100vw_-_64px)_/_3)]  h-fit !border-b checked:!border-b-2",
-                                    "checked:!border-primary font-bold text-sm mobile:text-xs checked:text-primary uppercase"
+                                    "checked:!border-secondary font-bold text-sm mobile:text-xs checked:text-secondary uppercase"
                                 )}
                                 aria-label={obj.name}
                             />

diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
@@ -135,6 +135,7 @@ function ProductCard({
               "font-bold text-xs text-black mobile:text-[10px] mobile:leading-[15px]",
               "bg-info max-w-[98px] max-h-[30px] px-[14px] py-[6px] rounded-full",
               "mobile:max-w-[86px] mobile:max-h-[27px] mobile:px-[14px] mobile:py-[6px]",
+              inStock && "opacity-0"
             )}
           >
             NOVIDADE

diff --git a/components/product/ProductInfo.tsx b/components/product/ProductInfo.tsx
@@ -32,7 +32,7 @@ function ProductInfo({ page, itemsShare }: Props) {
   const { productID, offers, isVariantOf, aggregateRating } = product;
   const title = isVariantOf?.name ?? product.name;
 
-  const priceSpecification: Method[] = offers?.offers[0].priceSpecification.map((obj) => ({...obj})) ?? [];
+  const priceSpecification: Method[] = offers?.offers[0].priceSpecification.map((obj) => ({ ...obj })) ?? [];
 
   const {
     price = 0,
@@ -114,22 +114,25 @@ function ProductInfo({ page, itemsShare }: Props) {
 
           {
             priceSpecification && (
-              <Modal title="Opções de pagamento" cta="Formas de pagamento">
-                <PaymentMethods methods={priceSpecification} priceCurrency={offers?.priceCurrency} />
-              </Modal>
+              <div class="mt-3">
+                <Modal title="Opções de pagamento" cta="Formas de pagamento">
+                  <PaymentMethods methods={priceSpecification} priceCurrency={offers?.priceCurrency} />
+                </Modal>
+              </div>
             )
           }
         </div>
 
         {/* Sku Selector */}
         {hasValidVariants && (
-          <div className="desktop:mt-4 sm:mt-8">
             <ProductSelector product={product} />
-          </div>
         )}
 
         {/* Add to Cart and Favorites button */}
-        <div class="desktop:mt-4 mobile:fixed mobile:bottom-0 mobile:left-0 mobile:w-screen mobile:z-30">
+        <div class={clx(
+          "desktop:mt-4 ",
+          availability === "https://schema.org/InStock" && "mobile:fixed mobile:bottom-0 mobile:left-0 mobile:w-screen mobile:z-30"
+        )}>
           {availability === "https://schema.org/InStock"
             ? (
               <AddQuantityToCart item={item} seller={seller} product={product} disabled={false} />

diff --git a/components/product/ProductSlider.tsx b/components/product/ProductSlider.tsx
@@ -9,17 +9,18 @@ import { useDevice } from "@deco/deco/hooks";
 interface Props {
   products: Product[];
   itemListName?: string;
+  class?: string
 }
 
-function ProductSlider({ products, itemListName }: Props) {
+function ProductSlider({ products, itemListName, class: _class }: Props) {
   const id = useId();
   const device = useDevice();
 
   return (
     <>
       <div
         id={id}
-        class="grid grid-rows-1 w-full mobile:max-w-[336px]"
+        class="grid grid-rows-1 w-full mobile:max-w-[89.6vw]"
         style={{
           gridTemplateColumns: "min-content 1fr min-content",
         }}
@@ -46,7 +47,10 @@ function ProductSlider({ products, itemListName }: Props) {
           </Slider>
         </div>
 
-        <div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 self-center p-2 relative bottom-[15%]">
+        <div class={clx(
+          "col-start-1 col-span-1 row-start-1 row-span-1 z-10 self-center p-2 relative bottom-[15%]",
+          _class
+        )}>
           <Slider.PrevButton
             class={clx(
               "flex justify-center items-center w-[50px] h-[50px] bg-white btn btn-sm btn-circle no-animation shadow-custom",
@@ -63,7 +67,10 @@ function ProductSlider({ products, itemListName }: Props) {
           </Slider.PrevButton>
         </div>
 
-        <div class="col-start-3 col-span-1 row-start-1 row-span-1 z-10 self-center p-2 relative bottom-[15%]">
+        <div class={clx(
+          "col-start-3 col-span-1 row-start-1 row-span-1 z-10 self-center p-2 relative bottom-[15%]",
+          _class
+          )}>
           <Slider.NextButton
             class={clx(
               "flex justify-center items-center w-[50px] h-[50px] bg-white btn btn-sm btn-circle no-animation shadow-custom",

diff --git a/components/product/ProductVariantSelector.tsx b/components/product/ProductVariantSelector.tsx
@@ -12,8 +12,8 @@ interface Props {
 const useStyles = (checked: boolean) => {
   return clx(
     "btn shadow-custom-2 w-12 h-12",
-    "hover:border hover:border-[#8F2AED] hover:bg-transparent",
-    checked ? "border border-[#8F2AED]" : "border-0"
+    "hover:border hover:border-secondary hover:bg-transparent",
+    checked ? "border border-secondary" : "border-0"
   );
 };
 export const Ring = ({ value, checked = false, class: _class }: {
@@ -70,7 +70,7 @@ function VariantSelector({ product }: Props) {
               <button
                 className={clx(
                   "collapse-title btn flex justify-between items-center border-2 !row-start-[last] max-w-[134px] h-[30px] top-6",
-                  "min-h-0 border-primary rounded-[5px] py-[6px] px-4 font-bold text-primary text-xs whitespace-nowrap"
+                  "min-h-0 border-secondary rounded-[5px] py-[6px] px-4 font-bold text-secondary text-xs whitespace-nowrap"
                 )}>
                 Mostrar mais <Icon id="chevron-bottom" stroke="#8F2AED" width={5} height={10} />
               </button>

diff --git a/components/product/Tabs/TabsDesktop.tsx b/components/product/Tabs/TabsDesktop.tsx
@@ -24,8 +24,8 @@ export default function TabsDesktop({ productInformations }: TabsDesktopProps) {
                             }}
                             class={clx(
                                 "tab justify-self-center !w-[--quantity-tabs] max-w-[421px] py-4 px-[10px] !max-h-full !h-[53px]",
-                                "!border-b border-[#F5F5F5] checked:!border-b-[5px] checked:!border-primary",
-                                "font-bold text-sm checked:text-primary text-black uppercase flex-1"
+                                "!border-b border-[#F5F5F5] checked:!border-b-[5px] checked:!border-secondary",
+                                "font-bold text-sm checked:text-secondary text-black uppercase flex-1"
                             )}
                         />
                         <div

diff --git a/components/search/Filters.tsx b/components/search/Filters.tsx
@@ -111,15 +111,13 @@ function Filters({ filters, url }: Props) {
 
   return (
     <div class="mobile:flex mobile:flex-col mobile:justify-between mobile:h-full">
-    <ul class="flex flex-col max-w-full mobile:mt-10 desktop:gap-6 pl-[60px] pr-8 mobile:px-5">
-      <li class="w-full">
+    <ul class="flex flex-col max-w-full mobile:mt-10 desktop:gap-6 pr-8 mobile:px-5">
         {selectedFilters.length > 0 && (
           <SelectedFilters filters={selectedFilters} />
         )}
-      </li>
       {filtred
         .map((filter) => (
-          <li class="flex flex-col gap-4 border-b border-[#F5F5F5] w-full" key={filter.label}>
+          <li class="flex flex-col gap-4 border-b border-[#F5F5F5] mobile:w-full desktop:ml-[60px]" key={filter.label}>
             <div tabIndex={0} className="collapse collapse-arrow2 mobile:p-0">
               <input type="checkbox" className="peer" />
               <div className="collapse-title text-sm font-bold uppercase mobile:py-4 mobile:pr-2 mobile:px-0">{filtersToRename[filter.label.toLocaleLowerCase()] || filter.label}</div>

diff --git a/components/search/Filters/SelectedFilters.tsx b/components/search/Filters/SelectedFilters.tsx
@@ -12,16 +12,16 @@ export default function SelectedFilters(props: SelectedFiltersProps) {
     }).flat();
 
     return (
-        <li class="hidden desktop:flex flex-col py-5 px-[17.5px] py-5 px-10 bg-[#f9f9f9]">
-            <span class="text-sm text-[#060D21] font-bold">
+        <li class="hidden desktop:flex flex-col py-5 px-[17.5px] py-5 px-10 bg-[#f9f9f9] desktop:pl-[60px] w-full">
+            <span class="text-sm text-[#060D21] font-bold uppercase">
                 Você filtrou por:
             </span>
             <ul class="flex flex-wrap gap-2.5 mt-2.5">
                 {values.map((value) => (
                     <li>
                         <a
                             href={value.url}
-                            class="text-xs font-semibold leading-[14.4px] text-black bg-primary px-2.5 py-1.5 flex items-center gap-1.5 rounded"
+                            class="text-xs font-semibold leading-[14.4px] text-black bg-[#DBB9F9] px-2.5 py-1.5 flex items-center gap-1.5 rounded"
                         >
                             {value.label}
                             <Icon

diff --git a/components/search/SearchResult.tsx b/components/search/SearchResult.tsx
@@ -40,17 +40,18 @@ export interface Props {
   searchParams?: string | null;
 }
 function NotFound({ searchbar, productShelf, searchParams }: Props) {
+  console.log("params", searchParams)
   return (
     <>
-      {searchParams
+      { searchParams
         ? (
-          <div class="w-full flex flex-col justify-center items-center">
-            <div class="w-full flex flex-col justify-center items-center py-10">
+          <div class="w-full flex flex-col gap-[30px] mobile:gap-6 justify-center items-center">
+            <div class="w-full flex flex-col gap-10 mobile:gap-6 justify-center items-center ">
               <Icon
                 id="faceIcon"
                 width="70"
                 height="69"
-                class="mt-[87px] mb-[40px]"
+                class="mt-[87px]"
               />
               <span class="font-[PP-Hatton] text-center text-[24px] mobile:text-[20px] w-[526px] mobile:w-[333px]">
                 OPS... Não encontramos nenhum resultado para:
@@ -393,7 +394,7 @@ function Result(props: SectionProps<typeof loader>) {
 }
 
 function SearchResult({ page, ...props }: SectionProps<typeof loader>) {
-  if (!page) {
+  if (!page?.pageInfo.records) {
     return <NotFound {...props} />;
   }
   return <Result {...props} page={page} />;
@@ -402,7 +403,6 @@ function SearchResult({ page, ...props }: SectionProps<typeof loader>) {
 export const loader = (props: Props, req: Request) => {
   const url = new URL(req.url);
   const searchParams = url.search ?? null;
-  console.log(searchParams)
   return {
     ...props,
     url: url.href,

diff --git a/components/search/Searchbar/Form.tsx b/components/search/Searchbar/Form.tsx
@@ -65,7 +65,7 @@ export default function Searchbar(
         <input
           id={SEARCHBAR_POPUP_ID}
           tabIndex={0}
-          class="join-item w-full text-base-400 mobile:text-black truncate h-full focus:outline-0 py-[10px] pl-5"
+          class="join-item w-full text-[#999999] mobile:text-black truncate h-full focus:outline-0 py-[10px] pl-5"
           name={NAME}
           placeholder={placeholder}
           autocomplete="off"

diff --git a/components/search/Searchbar/Suggestions.tsx b/components/search/Searchbar/Suggestions.tsx
@@ -54,7 +54,7 @@ function Suggestions(
   return (
     <div
       class={clx(
-        "fixed desktop:right-[calc(60px_+_((100vw_-_min(96rem,100vw))_/_2))] left-0 desktop:-z-10 z-50 desktop:mt-6 bg-white",
+        "fixed desktop:right-[calc(60px_+_((100vw_-_min(96rem,100vw))_/_2))] mobile:left-0 desktop:-z-10 z-50 desktop:mt-6 bg-white",
         "w-[min(54.30vw,834px)] mobile:w-screen h-[611px] mobile:h-[72.33vh] mobile:max-h-[596px] mobile:top-[172px] overflow-y-auto",
         !hasProducts && !hasTerms && "hidden",
       )}

diff --git a/components/shipping/Form.tsx b/components/shipping/Form.tsx
@@ -36,7 +36,7 @@ export default function Form({ items }: Props) {
           maxLength={8}
           size={8}
         >
-          <button type="submit" class="join-item no-animation px-4 text-primary font-semibold text-sm border border-l-0 border-[#DBDBDB]">
+          <button type="submit" class="join-item no-animation px-4 text-secondary font-semibold text-sm border border-l-0 border-[#DBDBDB]">
             <span class="[.htmx-request_&]:hidden inline">CALCULAR</span>
             <span class="[.htmx-request_&]:inline hidden loading loading-spinner loading-xs" />
           </button>