feat (PDP): Product Description added

deco-sites · May 9, 2024 · d8aba9d · d8aba9d
1 parent e96ac61
commit d8aba9d
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 34 deletions.
diff --git a/components/product/ProductDescription.tsx b/components/product/ProductDescription.tsx
@@ -0,0 +1,54 @@
+import { ProductDetailsPage } from "apps/commerce/types.ts";
+
+export interface Props {
+  page: ProductDetailsPage | null;
+}
+
+export default function ProductDescription({ page }: Props) {
+  if (!page || !page.product) return null;
+
+  const { description: productDescription, isVariantOf } = page.product;
+
+  const description = productDescription || isVariantOf?.description || "";
+
+  return (
+    <div
+      id="descricao"
+      class="flex items-center justify-center w-full h-full py-8 lg:py-10 border-b-4 border-[#E4E4E4]"
+    >
+      <div class="w-full container flex flex-col gap-8">
+        <h2 class="text-2xl text-black-neutral">
+          Descrição do <b>Produto</b>
+        </h2>
+
+        <div class="flex flex-col gap-8 px-6">
+          <div class="flex flex-col gap-7">
+            <h3 class="text-black-neutral">
+              <b>Descrição</b>
+            </h3>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: description.replace(/\r?\n/g, "<br />"),
+              }}
+            />
+          </div>
+
+          <div class="flex flex-col gap-7">
+            <h3 class="text-black-neutral">
+              <b>Características</b>
+            </h3>
+
+            {isVariantOf?.additionalProperty?.filter((item) =>
+              item.name !== "sellerId"
+            )?.map((property) => (
+              <div class="even:bg-[#EEEEEE] odd:bg-white-normal grid grid-cols-2 w-full text-sm leading-6 px-4">
+                <span class="text-[#444] font-bold">{property.name}</span>
+                <span>{property.value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/product/ProductInfo.tsx b/components/product/ProductInfo.tsx
@@ -50,7 +50,6 @@ function ProductInfo({ page, layout }: Props) {
     isVariantOf,
     additionalProperty = [],
   } = product;
-  const description = product.description || isVariantOf?.description;
   const {
     price = 0,
     listPrice,
@@ -98,7 +97,11 @@ function ProductInfo({ page, layout }: Props) {
                 {gtin}
               </span>
             )}
-            <a href="#" class="underline text-[#AD212B] text-sm">Litmann</a>
+            {product.brand && (
+              <a href="#" class="underline text-[#AD212B] text-sm">
+                {product.brand?.name}
+              </a>
+            )}
           </div>
 
           <div class="flex items-center gap-0.5 text-yellow-400">
@@ -110,19 +113,9 @@ function ProductInfo({ page, layout }: Props) {
 
       {/* Description card */}
       <div class="mt-4 sm:mt-6">
-        <span class="text-sm">
-          {description && (
-            <details>
-              <summary class="cursor-pointer">Descrição</summary>
-              <div
-                class="ml-2 mt-2"
-                dangerouslySetInnerHTML={{
-                  __html: description.replace(/\r?\n/g, "<br />"),
-                }}
-              />
-            </details>
-          )}
-        </span>
+        <a href="#descricao" class="text-sm underline text-red-light">
+          Ver descrição completa
+        </a>
       </div>
 
       {/* Sku Selector */}

diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
@@ -85,7 +85,7 @@ function ProductShelf({
             "px-0 md:px-5 container",
           )}
         >
-          <Slider class="carousel carousel-center justify-center sm:gap-1 lg:gap-4 row-start-2 row-end-5">
+          <Slider class="carousel carousel-center sm:gap-1 lg:gap-4 row-start-2 row-end-5">
             {products?.map((product, index) => (
               <Slider.Item
                 index={index}

diff --git a/manifest.gen.ts b/manifest.gen.ts
@@ -55,15 +55,16 @@ import * as $$$$$$45 from "./sections/Product/ImageGalleryFrontBack.tsx";
 import * as $$$$$$46 from "./sections/Product/ImageGallerySlider.tsx";
 import * as $$$$$$47 from "./sections/Product/NotFound.tsx";
 import * as $$$$$$48 from "./sections/Product/NotFoundChallenge.tsx";
-import * as $$$$$$49 from "./sections/Product/ProductInfo.tsx";
-import * as $$$$$$50 from "./sections/Product/ProductShelf.tsx";
-import * as $$$$$$51 from "./sections/Product/ProductShelfTabbed.tsx";
-import * as $$$$$$52 from "./sections/Product/SearchResult.tsx";
-import * as $$$$$$53 from "./sections/Product/ShelfWithImage.tsx";
-import * as $$$$$$54 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$55 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$56 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$57 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$49 from "./sections/Product/ProductDescription.tsx";
+import * as $$$$$$50 from "./sections/Product/ProductInfo.tsx";
+import * as $$$$$$51 from "./sections/Product/ProductShelf.tsx";
+import * as $$$$$$52 from "./sections/Product/ProductShelfTabbed.tsx";
+import * as $$$$$$53 from "./sections/Product/SearchResult.tsx";
+import * as $$$$$$54 from "./sections/Product/ShelfWithImage.tsx";
+import * as $$$$$$55 from "./sections/Product/Wishlist.tsx";
+import * as $$$$$$56 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$57 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$58 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -124,15 +125,16 @@ const manifest = {
     "deco-sites/maconequiio/sections/Product/ImageGallerySlider.tsx": $$$$$$46,
     "deco-sites/maconequiio/sections/Product/NotFound.tsx": $$$$$$47,
     "deco-sites/maconequiio/sections/Product/NotFoundChallenge.tsx": $$$$$$48,
-    "deco-sites/maconequiio/sections/Product/ProductInfo.tsx": $$$$$$49,
-    "deco-sites/maconequiio/sections/Product/ProductShelf.tsx": $$$$$$50,
-    "deco-sites/maconequiio/sections/Product/ProductShelfTabbed.tsx": $$$$$$51,
-    "deco-sites/maconequiio/sections/Product/SearchResult.tsx": $$$$$$52,
-    "deco-sites/maconequiio/sections/Product/ShelfWithImage.tsx": $$$$$$53,
-    "deco-sites/maconequiio/sections/Product/Wishlist.tsx": $$$$$$54,
-    "deco-sites/maconequiio/sections/Social/InstagramPosts.tsx": $$$$$$55,
-    "deco-sites/maconequiio/sections/Social/WhatsApp.tsx": $$$$$$56,
-    "deco-sites/maconequiio/sections/Theme/Theme.tsx": $$$$$$57,
+    "deco-sites/maconequiio/sections/Product/ProductDescription.tsx": $$$$$$49,
+    "deco-sites/maconequiio/sections/Product/ProductInfo.tsx": $$$$$$50,
+    "deco-sites/maconequiio/sections/Product/ProductShelf.tsx": $$$$$$51,
+    "deco-sites/maconequiio/sections/Product/ProductShelfTabbed.tsx": $$$$$$52,
+    "deco-sites/maconequiio/sections/Product/SearchResult.tsx": $$$$$$53,
+    "deco-sites/maconequiio/sections/Product/ShelfWithImage.tsx": $$$$$$54,
+    "deco-sites/maconequiio/sections/Product/Wishlist.tsx": $$$$$$55,
+    "deco-sites/maconequiio/sections/Social/InstagramPosts.tsx": $$$$$$56,
+    "deco-sites/maconequiio/sections/Social/WhatsApp.tsx": $$$$$$57,
+    "deco-sites/maconequiio/sections/Theme/Theme.tsx": $$$$$$58,
   },
   "apps": {
     "deco-sites/maconequiio/apps/decohub.ts": $$$$$$$$$$$0,

diff --git a/sections/Product/ProductDescription.tsx b/sections/Product/ProductDescription.tsx
@@ -0,0 +1,12 @@
+export { default } from "../../components/product/ProductDescription.tsx";
+
+export function LoadingFallback() {
+  return (
+    <div
+      style={{ height: "710px" }}
+      class="w-full flex justify-center items-center"
+    >
+      <span class="loading loading-spinner" />
+    </div>
+  );
+}
diff --git a/tailwind.css b/tailwind.css
@@ -10,6 +10,10 @@
     scrool-behavior: smooth;
   }
 
+  :target {
+    scroll-margin-top: 120px;
+  }
+
   mark {
     @apply bg-accent text-accent-content;
   }