feat (PDP): security info added and product variation fixed

components/product/ProductInfo.tsx

@@ -19,6 +19,7 @@ import { usePlatform } from "$store/sdk/usePlatform.tsx";
 import { ProductDetailsPage } from "apps/commerce/types.ts";
 import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalyticsItem.ts";
 import ProductSelector from "./ProductVariantSelector.tsx";
+import Icon from "deco-sites/maconequiio/components/ui/Icon.tsx";
 
 interface Props {
   page: ProductDetailsPage | null;
@@ -125,9 +126,7 @@ function ProductInfo({ page, layout }: Props) {
       </div>
 
       {/* Sku Selector */}
-      <div class="mt-4 sm:mt-6">
-        <ProductSelector product={product} />
-      </div>
+      <ProductSelector product={product} />
 
       {/* Prices */}
       <div class="flex flex-row items-center justify-between mt-4 w-full gap-x-2 xl:max-w-sm">
@@ -230,6 +229,46 @@ function ProductInfo({ page, layout }: Props) {
           : <OutOfStock productID={productID} />}
       </div>
 
+      {/* Security */}
+      <div class="flex flex-col gap-5 mt-5 text-sm">
+        <div class="flex flex-col gap-1">
+          <div class="flex gap-0.5">
+            <Icon id="Truck" size={20} class="text-green" />
+            <span class="text-green font-medium">Entrega expressa</span>
+          </div>
+          <p>
+            Você pode retirar mais rápido nas{" "}
+            <span class="underline text-red cursor-pointer">
+              seguintes lojas
+            </span>
+          </p>
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center gap-2">
+            <Icon id="Guard" width={14} height={16} class="text-green" />
+            <p>
+              <b>Compra 100% segura</b> - PCI Certified Vtex
+            </p>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <Icon id="Check" width={15} height={10} />
+            <p>
+              <b>Loja Confiável</b> nota dos clientes 4,5/5
+            </p>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <Icon id="Check" width={15} height={10} />
+            <p>
+              <b>Devolução gratuita</b>{" "}
+              sem complicações em até 7 dias após o recebimento
+            </p>
+          </div>
+        </div>
+      </div>
+
       {/* Shipping Simulation */}
       <div class="mt-8">
         {platform === "vtex" && (

components/product/ProductVariantSelector.tsx

@@ -12,34 +12,39 @@ function VariantSelector({ product }: Props) {
   const hasVariant = isVariantOf?.hasVariant ?? [];
   const possibilities = useVariantPossibilities(hasVariant, product);
 
+  if (!possibilities || Object.keys(possibilities).length === 0) return null;
+
   return (
-    <ul class="flex flex-col gap-4">
-      {Object.keys(possibilities).map((name) => (
-        <li class="flex flex-col gap-2">
-          <span class="text-sm">{name}</span>
-          <ul class="flex flex-row gap-3">
-            {Object.entries(possibilities[name]).map(([value, link]) => {
-              const relativeUrl = relative(url);
-              const relativeLink = relative(link);
-              return (
-                <li>
-                  <button f-partial={relativeLink} f-client-nav>
-                    <Avatar
-                      content={value}
-                      variant={relativeLink === relativeUrl
-                        ? "active"
-                        : relativeLink
-                        ? "default"
-                        : "disabled"}
-                    />
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </li>
-      ))}
-    </ul>
+    <div class="flex flex-col mt-4 sm:mt-6">
+      <h2 class="text-sm font-medium text-black-neutral">Cores disponíveis</h2>
+      <ul class="flex flex-col gap-4">
+        {Object.keys(possibilities).map((name) => (
+          <li class="flex flex-col gap-2">
+            <span class="text-sm">{name}</span>
+            <ul class="flex flex-row gap-3">
+              {Object.entries(possibilities[name]).map(([value, link]) => {
+                const relativeUrl = relative(url);
+                const relativeLink = relative(link);
+                return (
+                  <li>
+                    <button f-partial={relativeLink} f-client-nav>
+                      <Avatar
+                        content={value}
+                        variant={relativeLink === relativeUrl
+                          ? "active"
+                          : relativeLink
+                          ? "default"
+                          : "disabled"}
+                      />
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
 

components/ui/Icon.tsx

@@ -17,6 +17,8 @@ export type AvailableIcons =
   | "Facebook"
   | "FilterList"
   | "Heart"
+  | "Guard"
+  | "Check"
   | "Instagram"
   | "Linkedin"
   | "Minus"