feat: Wap Components

apps/site.ts

@@ -1,9 +1,10 @@
 import commerce, { Props as CommerceProps } from "apps/commerce/mod.ts";
-import { color as shopify } from "apps/shopify/mod.ts";
+import { color as wap } from "apps/wap/mod.ts";
 import { color as vnda } from "apps/vnda/mod.ts";
 import { color as vtex } from "apps/vtex/mod.ts";
 import { color as wake } from "apps/wake/mod.ts";
 import { color as linx } from "apps/linx/mod.ts";
+import { color as shopify } from "apps/shopify/mod.ts";
 import { color as nuvemshop } from "apps/nuvemshop/mod.ts";
 import { Section } from "deco/blocks/section.ts";
 import type { App as A, AppContext as AC } from "deco/mod.ts";
@@ -25,6 +26,7 @@ export type Platform =
   | "vnda"
   | "shopify"
   | "wake"
+  | "wap"
   | "linx"
   | "nuvemshop"
   | "custom";
@@ -44,6 +46,8 @@ const color = (platform: string) => {
       return wake;
     case "shopify":
       return shopify;
+    case "wap":
+      return wap;
     case "linx":
       return linx;
     case "nuvemshop":
@@ -66,8 +70,7 @@ export default function Site(
   if (firstRun) {
     firstRun = false;
     console.info(
-      ` 🐁 ${rgb24("Storefront", color("deco"))} | ${
-        rgb24(_platform, color(_platform))
+      ` 🐁 ${rgb24("Storefront", color("deco"))} | ${rgb24(_platform, color(_platform))
       } \n`,
     );
   }

components/header/Buttons/Cart/wap.tsx

@@ -0,0 +1,20 @@
+import { itemToAnalyticsItem, useCart } from "apps/wap/hooks/useCart.ts";
+import Button from "./common.tsx";
+
+function CartButton() {
+  const { loading, cart } = useCart();
+  const { subtotal, itens } = cart.value ?? {};
+
+  return (
+    <Button
+      currency="BRL"
+      loading={loading.value}
+      total={subtotal?.valor ?? 0}
+      items={(itens ?? []).map((item, index) =>
+        itemToAnalyticsItem({ ...item! }, index)
+      )}
+    />
+  );
+}
+
+export default CartButton;

components/header/Navbar.tsx

@@ -6,6 +6,7 @@ import CartButtonShopify from "$store/islands/Header/Cart/shopify.tsx";
 import CartButtonVDNA from "$store/islands/Header/Cart/vnda.tsx";
 import CartButtonVTEX from "$store/islands/Header/Cart/vtex.tsx";
 import CartButtonWake from "$store/islands/Header/Cart/wake.tsx";
+import CartButtonWap from "$store/islands/Header/Cart/wap.tsx";
 import CartButtonNuvemshop from "$store/islands/Header/Cart/nuvemshop.tsx";
 import Searchbar from "$store/islands/Header/Searchbar.tsx";
 import { usePlatform } from "$store/sdk/usePlatform.tsx";
@@ -15,6 +16,7 @@ import NavItem from "./NavItem.tsx";
 import { navbarHeight } from "./constants.ts";
 import { Buttons, Logo } from "$store/components/header/Header.tsx";
 
+
 // Make it sure to render it on the server only. DO NOT render it on an island
 function Navbar(
   { items, searchbar, logo, buttons, logoPosition = "left", device }: {
@@ -60,11 +62,13 @@ function Navbar(
           {platform === "linx" && <CartButtonLinx />}
           {platform === "shopify" && <CartButtonShopify />}
           {platform === "nuvemshop" && <CartButtonNuvemshop />}
+          {platform === "wap" && <CartButtonWap />}
         </div>
       </div>
     );
   }
 
+
   // Desktop header
   return (
     <div class="hidden sm:grid sm:grid-cols-3 items-center border-b border-base-200 w-full px-6">
@@ -125,6 +129,7 @@ function Navbar(
               class="flex btn btn-circle btn-sm btn-ghost gap-1"
               aria-label="Wishlist"
             >
+
               <Icon id="Heart" size={24} strokeWidth={0.4} />
             </button>
             WISHLIST
@@ -138,6 +143,7 @@ function Navbar(
             {platform === "linx" && <CartButtonLinx />}
             {platform === "shopify" && <CartButtonShopify />}
             {platform === "nuvemshop" && <CartButtonNuvemshop />}
+            {platform === "wap" && <CartButtonWap />}
           </div>
         )}
       </div>

components/minicart/Cart.tsx

@@ -8,6 +8,7 @@ const CartWake = lazy(() => import("./wake/Cart.tsx"));
 const CartLinx = lazy(() => import("./linx/Cart.tsx"));
 const CartShopify = lazy(() => import("./shopify/Cart.tsx"));
 const CartNuvemshop = lazy(() => import("./nuvemshop/Cart.tsx"));
+const CartWap = lazy(() => import("./wap/Cart.tsx"));
 
 export interface Props {
   platform: ReturnType<typeof usePlatform>;
@@ -26,6 +27,10 @@ function Cart({ platform }: Props) {
     return <CartWake />;
   }
 
+  if (platform === "wap") {
+    return <CartWap />;
+  }
+
   if (platform === "linx") {
     return <CartLinx />;
   }

components/minicart/wap/Cart.tsx

@@ -0,0 +1,59 @@
+import { itemToAnalyticsItem, useCart } from "apps/wap/hooks/useCart.ts";
+import BaseCart from "../common/Cart.tsx";
+
+function Cart() {
+  const { cart, loading, updateItem, updateCoupon, removeItem } = useCart();
+  const items = cart.value?.itens ?? [];
+
+  const total = cart.value?.subtotal?.valor ?? 0;
+  const subtotal = cart.value?.subtotal?.valor ?? 0;
+  const locale = "pt-BR";
+  const currency = "BRL";
+  const coupon = cart.value?.coupon ?? undefined;
+
+  return (
+    <BaseCart
+      items={items.map((item) => ({
+        image: { src: item!.imagem!, alt: "product image" },
+        quantity: item!.quantidade!,
+        name: item!.nome!,
+        price: { sale: item!.precos.precoPor!, list: item!.precos.precoDe! },
+      }))}
+      total={total}
+      subtotal={subtotal}
+      discounts={0}
+      locale={locale}
+      currency={currency} 
+      loading={loading.value}
+      freeShippingTarget={1000}
+      coupon={coupon}
+      checkoutHref={`/checkout/carrinho/`}
+      onAddCoupon={(code) => updateCoupon({ hashCupom: code })}
+      onUpdateQuantity={(quantidade: number, index: number) =>
+        quantidade === 0
+          ? removeItem({
+              tipo: "produto",
+              idProduto: items[index]?.hash.idProduto,
+              idAtributoSimples: items[index]?.hash.idAtributoSimples,
+              idUnidadeVenda: items[index]?.hash.idUnidadeVenda,
+              idArmazem: items[index]?.hash.idArmazem,
+            })
+          : updateItem({
+              tipo: "produto",
+              quantidade,
+              idProduto: items[index]?.hash.idProduto,
+              idAtributoSimples: items[index]?.hash.idAtributoSimples,
+              idUnidadeVenda: items[index]?.hash.idUnidadeVenda,
+              idArmazem: items[index]?.hash.idArmazem,
+            })
+      }
+      itemToAnalyticsItem={(index) => {
+        const item = items[index];
+
+        return item && itemToAnalyticsItem(item, index);
+      }}
+    />
+  );
+}
+
+export default Cart;

components/product/AddToCartButton/wap.tsx

@@ -0,0 +1,33 @@
+import { useCart } from "apps/wap/hooks/useCart.ts";
+import Button, { Props as BtnProps } from "./common.tsx";
+
+export interface Props extends Omit<BtnProps, "onAddItem"> {
+  productID: string;
+  idAtributoSimples: number;
+}
+
+function AddToCartButton({
+  productID,
+  eventParams,
+  idAtributoSimples = 0,
+}: Props) {
+  const { addItems } = useCart();
+
+  const onAddItem = () =>
+    addItems({
+      tipo: "produto",
+      itens: [
+        {
+          idProduto: Number(productID),
+          quantidade: 1,
+          idAtributoSimples,
+          idUnidadeVenda: 0,
+          idArmazem: 0,
+        },
+      ],
+    });
+
+  return <Button onAddItem={onAddItem} eventParams={eventParams} />;
+}
+
+export default AddToCartButton;

components/product/ProductInfo.tsx

@@ -5,11 +5,13 @@ import AddToCartButtonShopify from "$store/islands/AddToCartButton/shopify.tsx";
 import AddToCartButtonVNDA from "$store/islands/AddToCartButton/vnda.tsx";
 import AddToCartButtonVTEX from "$store/islands/AddToCartButton/vtex.tsx";
 import AddToCartButtonWake from "$store/islands/AddToCartButton/wake.tsx";
+import AddToCartButtonWap from "$store/islands/AddToCartButton/wap.tsx";
 import AddToCartButtonNuvemshop from "$store/islands/AddToCartButton/nuvemshop.tsx";
 import OutOfStock from "$store/islands/OutOfStock.tsx";
 import ShippingSimulation from "$store/islands/ShippingSimulation.tsx";
 import WishlistButtonVtex from "../../islands/WishlistButton/vtex.tsx";
 import WishlistButtonWake from "../../islands/WishlistButton/wake.tsx";
+import WishlistButtonWap from "../../islands/WishlistButton/wap.tsx";
 import { formatPrice } from "$store/sdk/format.ts";
 import { useId } from "$store/sdk/useId.ts";
 import { useOffer } from "$store/sdk/useOffer.ts";
@@ -69,6 +71,10 @@ function ProductInfo({ page, layout }: Props) {
     listPrice,
   });
 
+  const attributoSimples = product.additionalProperty?.find(
+    (p) => p.valueReference === "ATRIBUTO SIMPLES"
+  );
+
   return (
     <div class="flex flex-col" id={id}>
       <Breadcrumb itemListElement={breadcrumb.itemListElement} />
@@ -107,66 +113,80 @@ function ProductInfo({ page, layout }: Props) {
       </div>
       {/* Add to Cart and Favorites button */}
       <div class="mt-4 sm:mt-10 flex flex-col gap-2">
-        {availability === "https://schema.org/InStock"
-          ? (
-            <>
-              {platform === "vtex" && (
-                <>
-                  <AddToCartButtonVTEX
-                    eventParams={{ items: [eventItem] }}
-                    productID={productID}
-                    seller={seller}
-                  />
-                  <WishlistButtonVtex
-                    variant="full"
-                    productID={productID}
-                    productGroupID={productGroupID}
-                  />
-                </>
-              )}
-              {platform === "wake" && (
-                <>
-                  <AddToCartButtonWake
-                    eventParams={{ items: [eventItem] }}
-                    productID={productID}
-                  />
-                  <WishlistButtonWake
-                    variant="full"
-                    productID={productID}
-                    productGroupID={productGroupID}
-                  />
-                </>
-              )}
-              {platform === "linx" && (
-                <AddToCartButtonLinx
+        {availability === "https://schema.org/InStock" ? (
+          <>
+            {platform === "vtex" && (
+              <>
+                <AddToCartButtonVTEX
                   eventParams={{ items: [eventItem] }}
                   productID={productID}
+                  seller={seller}
+                />
+                <WishlistButtonVtex
+                  variant="full"
+                  productID={productID}
                   productGroupID={productGroupID}
                 />
-              )}
-              {platform === "vnda" && (
-                <AddToCartButtonVNDA
+              </>
+            )}
+            {platform === "wake" && (
+              <>
+                <AddToCartButtonWake
                   eventParams={{ items: [eventItem] }}
                   productID={productID}
-                  additionalProperty={additionalProperty}
                 />
-              )}
-              {platform === "shopify" && (
-                <AddToCartButtonShopify
+                <WishlistButtonWake
+                  variant="full"
+                  productID={productID}
+                  productGroupID={productGroupID}
+                />
+              </>
+            )}
+            {platform === "wap" && (
+              <>
+                <AddToCartButtonWap
                   eventParams={{ items: [eventItem] }}
                   productID={productID}
+                  idAtributoSimples={Number(attributoSimples?.propertyID || 0)}
                 />
-              )}
-              {platform === "nuvemshop" && (
-                <AddToCartButtonNuvemshop
+                <WishlistButtonWap
+                  variant="full"
+                  productID={productID}
                   productGroupID={productGroupID}
-                  eventParams={{ items: [eventItem] }}
-                  additionalProperty={additionalProperty}
                 />
-              )}
-            </>
-          )
-          : <OutOfStock productID={productID} />}
+              </>
+            )}
+            {platform === "linx" && (
+              <AddToCartButtonLinx
+                eventParams={{ items: [eventItem] }}
+                productID={productID}
+                productGroupID={productGroupID}
+              />
+            )}
+            {platform === "vnda" && (
+              <AddToCartButtonVNDA
+                eventParams={{ items: [eventItem] }}
+                productID={productID}
+                additionalProperty={additionalProperty}
+              />
+            )}
+            {platform === "shopify" && (
+              <AddToCartButtonShopify
+                eventParams={{ items: [eventItem] }}
+                productID={productID}
+              />
+            )}
+            {platform === "nuvemshop" && (
+              <AddToCartButtonNuvemshop
+                productGroupID={productGroupID}
+                eventParams={{ items: [eventItem] }}
+                additionalProperty={additionalProperty}
+              />
+            )}
+          </>
+        ) : (
+          <OutOfStock productID={productID} />
+        )}
       </div>
       {/* Shipping Simulation */}
       <div class="mt-8">