Skip to content

Commit

Permalink
feat: Wap Components (#144)
Browse files Browse the repository at this point in the history
  • Loading branch information
IncognitaDev authored Mar 7, 2024
1 parent 67a403e commit 85e4d38
Show file tree
Hide file tree
Showing 14 changed files with 285 additions and 65 deletions.
9 changes: 6 additions & 3 deletions apps/site.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -25,6 +26,7 @@ export type Platform =
| "vnda"
| "shopify"
| "wake"
| "wap"
| "linx"
| "nuvemshop"
| "custom";
Expand All @@ -44,6 +46,8 @@ const color = (platform: string) => {
return wake;
case "shopify":
return shopify;
case "wap":
return wap;
case "linx":
return linx;
case "nuvemshop":
Expand All @@ -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`,
);
}
Expand Down
20 changes: 20 additions & 0 deletions components/header/Buttons/Cart/wap.tsx
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 6 additions & 0 deletions components/header/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 }: {
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand All @@ -138,6 +143,7 @@ function Navbar(
{platform === "linx" && <CartButtonLinx />}
{platform === "shopify" && <CartButtonShopify />}
{platform === "nuvemshop" && <CartButtonNuvemshop />}
{platform === "wap" && <CartButtonWap />}
</div>
)}
</div>
Expand Down
5 changes: 5 additions & 0 deletions components/minicart/Cart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -26,6 +27,10 @@ function Cart({ platform }: Props) {
return <CartWake />;
}

if (platform === "wap") {
return <CartWap />;
}

if (platform === "linx") {
return <CartLinx />;
}
Expand Down
59 changes: 59 additions & 0 deletions components/minicart/wap/Cart.tsx
Original file line number Diff line number Diff line change
@@ -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;
33 changes: 33 additions & 0 deletions components/product/AddToCartButton/wap.tsx
Original file line number Diff line number Diff line change
@@ -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;
116 changes: 68 additions & 48 deletions components/product/ProductInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -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">
Expand Down
Loading

0 comments on commit 85e4d38

Please sign in to comment.