Merge branch 'main' into feat/minicart-free-shipping-bar

deco-sites · May 9, 2023 · 84ccb1b · 84ccb1b
2 parents 272735a + 13fd11b
commit 84ccb1b
Show file tree

Hide file tree

Showing 23 changed files with 9,578 additions and 4,081 deletions.
diff --git a/.gitignore b/.gitignore
@@ -70,4 +70,7 @@ dist/
 server/
 
 # Deno.lock
-deno.lock
+deno.lock
+
+# db files
+.config.json
diff --git a/components/header/Alert.tsx b/components/header/Alert.tsx
@@ -1,5 +1,5 @@
-import SliderControllerJS from "deco-sites/fashion/islands/SliderJS.tsx";
-import { Slider } from "deco-sites/fashion/components/ui/Slider.tsx";
+import Slider from "deco-sites/fashion/components/ui/Slider.tsx";
+import SliderJS from "deco-sites/fashion/islands/SliderJS.tsx";
 import { useId } from "preact/hooks";
 
 export interface Props {
@@ -16,15 +16,17 @@ function Alert({ alerts = [], interval = 5 }: Props) {
 
   return (
     <div id={id}>
-      <Slider class="bg-secondary gap-6 scrollbar-none">
-        {alerts.map((alert) => (
-          <span class="text-sm text-secondary-content flex justify-center items-center w-screen h-[38px]">
-            {alert}
-          </span>
+      <Slider class="carousel carousel-center bg-secondary gap-6 scrollbar-none">
+        {alerts.map((alert, index) => (
+          <Slider.Item index={index} class="carousel-item">
+            <span class="text-sm text-secondary-content flex justify-center items-center w-screen h-[38px]">
+              {alert}
+            </span>
+          </Slider.Item>
         ))}
       </Slider>
 
-      <SliderControllerJS rootId={id} interval={interval && interval * 1e3} />
+      <SliderJS rootId={id} interval={interval && interval * 1e3} />
     </div>
   );
 }

diff --git a/components/header/Buttons.tsx b/components/header/Buttons.tsx
@@ -1,7 +1,7 @@
 import Icon from "deco-sites/fashion/components/ui/Icon.tsx";
 import Button from "deco-sites/fashion/components/ui/Button.tsx";
 import { useUI } from "deco-sites/fashion/sdk/useUI.ts";
-import { useCart } from "deco-sites/std/commerce/vtex/hooks/useCart.ts";
+import { useCart } from "deco-sites/std/packs/vtex/hooks/useCart.ts";
 import { AnalyticsEvent } from "deco-sites/std/commerce/types.ts";
 
 declare global {

diff --git a/components/minicart/Cart.tsx b/components/minicart/Cart.tsx
@@ -1,4 +1,4 @@
-import { useCart } from "deco-sites/std/commerce/vtex/hooks/useCart.ts";
+import { useCart } from "deco-sites/std/packs/vtex/hooks/useCart.ts";
 import { formatPrice } from "deco-sites/fashion/sdk/format.ts";
 import Button from "deco-sites/fashion/components/ui/Button.tsx";
 import { AnalyticsEvent } from "deco-sites/std/commerce/types.ts";

diff --git a/components/minicart/CartItem.tsx b/components/minicart/CartItem.tsx
@@ -2,7 +2,7 @@ import Image from "deco-sites/std/components/Image.tsx";
 import Icon from "deco-sites/fashion/components/ui/Icon.tsx";
 import Button from "deco-sites/fashion/components/ui/Button.tsx";
 import QuantitySelector from "deco-sites/fashion/components/ui/QuantitySelector.tsx";
-import { useCart } from "deco-sites/std/commerce/vtex/hooks/useCart.ts";
+import { useCart } from "deco-sites/std/packs/vtex/hooks/useCart.ts";
 import { formatPrice } from "deco-sites/fashion/sdk/format.ts";
 import { AnalyticsEvent } from "deco-sites/std/commerce/types.ts";
 

diff --git a/components/minicart/Coupon.tsx b/components/minicart/Coupon.tsx
@@ -1,6 +1,6 @@
 import { useRef } from "preact/hooks";
 import { useSignal } from "@preact/signals";
-import { useCart } from "deco-sites/std/commerce/vtex/hooks/useCart.ts";
+import { useCart } from "deco-sites/std/packs/vtex/hooks/useCart.ts";
 import Button from "deco-sites/fashion/components/ui/Button.tsx";
 
 function Coupon() {

diff --git a/components/product/ProductCard.tsx b/components/product/ProductCard.tsx
@@ -17,6 +17,11 @@ interface Props {
   itemListName?: string;
 }
 
+const relative = (url: string) => {
+  const link = new URL(url);
+  return `${link.pathname}${link.search}`;
+};
+
 function ProductCard({ product, preload, itemListName }: Props) {
   const {
     url,
@@ -49,7 +54,7 @@ function ProductCard({ product, preload, itemListName }: Props) {
 
   return (
     <div
-      class="card card-compact card-bordered border-transparent hover:border-base-200 group"
+      class="card card-compact card-bordered border-transparent hover:border-base-200 group w-full"
       data-deco="view-product"
       id={`product-card-${productID}`}
       {...sendEventOnClick(clickEvent)}
@@ -58,7 +63,11 @@ function ProductCard({ product, preload, itemListName }: Props) {
         <div class="absolute top-0 right-0">
           <WishlistIcon productGroupID={productGroupID} productID={productID} />
         </div>
-        <a href={url} aria-label="view product" class="contents">
+        <a
+          href={url && relative(url)}
+          aria-label="view product"
+          class="contents"
+        >
           <Image
             src={front.url!}
             alt={front.alternateName}

diff --git a/components/product/ProductDetails.tsx b/components/product/ProductDetails.tsx
@@ -5,10 +5,7 @@ import Breadcrumb from "deco-sites/fashion/components/ui/Breadcrumb.tsx";
 import Button from "deco-sites/fashion/components/ui/Button.tsx";
 import Icon from "deco-sites/fashion/components/ui/Icon.tsx";
 import Image from "deco-sites/std/components/Image.tsx";
-import {
-  Slider,
-  SliderDots,
-} from "deco-sites/fashion/components/ui/Slider.tsx";
+import Slider from "deco-sites/fashion/components/ui/Slider.tsx";
 import SliderJS from "deco-sites/fashion/components/ui/SliderJS.tsx";
 import { useOffer } from "deco-sites/fashion/sdk/useOffer.ts";
 import { formatPrice } from "deco-sites/fashion/sdk/format.ts";
@@ -179,44 +176,39 @@ function Details({
       <>
         <div
           id={id}
-          class={`grid grid-cols-1 gap-4 sm:grid-cols-[max-content_40vw_40vw] sm:grid-rows-1 sm:justify-center sm:max-h-[calc(${
-            (HEIGHT / WIDTH).toFixed(2)
-          }*40vw)]`}
+          class="grid grid-cols-1 gap-4 sm:grid-cols-[max-content_40vw_40vw] sm:grid-rows-1 sm:justify-center"
         >
           {/* Image Slider */}
           <div class="relative sm:col-start-2 sm:col-span-1 sm:row-start-1">
-            <Slider class="gap-6">
+            <Slider class="carousel gap-6">
               {images.map((img, index) => (
-                <Image
-                  class="snap-center min-w-[100vw] sm:min-w-[40vw]"
-                  sizes="(max-width: 640px) 100vw, 40vw"
-                  style={{ aspectRatio: ASPECT_RATIO }}
-                  src={img.url!}
-                  alt={img.alternateName}
-                  width={WIDTH}
-                  height={HEIGHT}
-                  // Preload LCP image for better web vitals
-                  preload={index === 0}
-                  loading={index === 0 ? "eager" : "lazy"}
-                />
+                <Slider.Item
+                  index={index}
+                  class="carousel-item min-w-[100vw] sm:min-w-[40vw]"
+                >
+                  <Image
+                    class="w-full"
+                    sizes="(max-width: 640px) 100vw, 40vw"
+                    style={{ aspectRatio: ASPECT_RATIO }}
+                    src={img.url!}
+                    alt={img.alternateName}
+                    width={WIDTH}
+                    height={HEIGHT}
+                    // Preload LCP image for better web vitals
+                    preload={index === 0}
+                    loading={index === 0 ? "eager" : "lazy"}
+                  />
+                </Slider.Item>
               ))}
             </Slider>
 
-            <Button
-              class="absolute left-2 top-1/2 btn-circle btn-outline"
-              data-slide="prev"
-              aria-label="Previous"
-            >
+            <Slider.PrevButton class="absolute left-2 top-1/2 btn btn-circle btn-outline">
               <Icon size={20} id="ChevronLeft" strokeWidth={3} />
-            </Button>
+            </Slider.PrevButton>
 
-            <Button
-              class="absolute right-2 top-1/2 btn-circle btn-outline"
-              data-slide="next"
-              aria-label="Next"
-            >
+            <Slider.NextButton class="absolute right-2 top-1/2 btn btn-circle btn-outline">
               <Icon size={20} id="ChevronRight" strokeWidth={3} />
-            </Button>
+            </Slider.NextButton>
 
             <div class="absolute top-2 right-2 bg-base-100 rounded-full">
               <ProductImageZoom
@@ -228,18 +220,22 @@ function Details({
           </div>
 
           {/* Dots */}
-          <SliderDots class="gap-2 sm:justify-start overflow-auto px-4 sm:px-0 flex-col sm:col-start-1 sm:col-span-1 sm:row-start-1">
-            {images.map((img, _) => (
-              <Image
-                style={{ aspectRatio: ASPECT_RATIO }}
-                class="group-disabled:border-base-300 border rounded min-w-[63px] sm:min-w-[100px]"
-                width={63}
-                height={87.5}
-                src={img.url!}
-                alt={img.alternateName}
-              />
+          <ul class="flex gap-2 sm:justify-start overflow-auto px-4 sm:px-0 sm:flex-col sm:col-start-1 sm:col-span-1 sm:row-start-1">
+            {images.map((img, index) => (
+              <li class="min-w-[63px] sm:min-w-[100px]">
+                <Slider.Dot index={index}>
+                  <Image
+                    style={{ aspectRatio: ASPECT_RATIO }}
+                    class="group-disabled:border-base-300 border rounded "
+                    width={63}
+                    height={87.5}
+                    src={img.url!}
+                    alt={img.alternateName}
+                  />
+                </Slider.Dot>
+              </li>
             ))}
-          </SliderDots>
+          </ul>
 
           {/* Product Info */}
           <div class="px-4 sm:pr-0 sm:pl-6 sm:col-start-3 sm:col-span-1 sm:row-start-1">
@@ -260,22 +256,23 @@ function Details({
   return (
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-[50vw_25vw] sm:grid-rows-1 sm:justify-center">
       {/* Image slider */}
-      <Slider class="gap-6">
+      <ul class="carousel carousel-center gap-6">
         {[images[0], images[1] ?? images[0]].map((img, index) => (
-          <Image
-            class="snap-center min-w-[100vw] sm:min-w-[24vw]"
-            sizes="(max-width: 640px) 100vw, 24vw"
-            style={{ aspectRatio: ASPECT_RATIO }}
-            src={img.url!}
-            alt={img.alternateName}
-            width={WIDTH}
-            height={HEIGHT}
-            // Preload LCP image for better web vitals
-            preload={index === 0}
-            loading={index === 0 ? "eager" : "lazy"}
-          />
+          <li class="carousel-item min-w-[100vw] sm:min-w-[24vw]">
+            <Image
+              sizes="(max-width: 640px) 100vw, 24vw"
+              style={{ aspectRatio: ASPECT_RATIO }}
+              src={img.url!}
+              alt={img.alternateName}
+              width={WIDTH}
+              height={HEIGHT}
+              // Preload LCP image for better web vitals
+              preload={index === 0}
+              loading={index === 0 ? "eager" : "lazy"}
+            />
+          </li>
         ))}
-      </Slider>
+      </ul>
 
       {/* Product Info */}
       <div class="px-4 sm:pr-0 sm:pl-6">

diff --git a/components/product/ProductImageZoom.tsx b/components/product/ProductImageZoom.tsx
@@ -3,8 +3,8 @@ import Image from "deco-sites/std/components/Image.tsx";
 import Button from "deco-sites/fashion/components/ui/Button.tsx";
 import Icon from "deco-sites/fashion/components/ui/Icon.tsx";
 import Modal from "deco-sites/fashion/components/ui/Modal.tsx";
-import { Slider } from "deco-sites/fashion/components/ui/Slider.tsx";
 import SliderJS from "deco-sites/fashion/islands/SliderJS.tsx";
+import Slider from "deco-sites/fashion/components/ui/Slider.tsx";
 import type { ImageObject } from "deco-sites/std/commerce/types.ts";
 
 interface Props {
@@ -13,6 +13,8 @@ interface Props {
   height: number;
 }
 
+const id = "product-zoom";
+
 function ProductImageZoom({ images, width, height }: Props) {
   const open = useSignal(false);
 
@@ -37,38 +39,29 @@ function ProductImageZoom({ images, width, height }: Props) {
           open.value = false;
         }}
       >
-        <div class="relative" id="product-zoom">
-          <Slider class="max-w-[100vw] overflow-y-auto">
-            {images.map((image) => (
-              <Image
-                style={{
-                  aspectRatio: `${width} / ${height}`,
-                  minWidth: `100vw`,
-                }}
-                src={image.url!}
-                alt={image.alternateName}
-                width={width}
-                height={height}
-              />
+        <div class="relative" id={id}>
+          <Slider class="carousel w-screen overflow-y-auto">
+            {images.map((image, index) => (
+              <Slider.Item index={index} class="carousel-item w-full">
+                <Image
+                  style={{ aspectRatio: `${width} / ${height}` }}
+                  src={image.url!}
+                  alt={image.alternateName}
+                  width={width}
+                  height={height}
+                />
+              </Slider.Item>
             ))}
           </Slider>
 
-          <Button
-            class="btn-circle btn-outline absolute left-8 top-[50vh]"
-            data-slide="prev"
-            aria-label="Previous"
-          >
+          <Slider.PrevButton class="btn btn-circle btn-outline absolute left-8 top-[50vh]">
             <Icon size={20} id="ChevronLeft" strokeWidth={3} />
-          </Button>
-          <Button
-            class="btn-circle btn-outline absolute right-8 top-[50vh]"
-            data-slide="next"
-            aria-label="Next"
-          >
+          </Slider.PrevButton>
+          <Slider.NextButton class="btn btn-circle btn-outline absolute right-8 top-[50vh]">
             <Icon size={20} id="ChevronRight" strokeWidth={3} />
-          </Button>
+          </Slider.NextButton>
         </div>
-        <SliderJS rootId="product-zoom" />
+        <SliderJS rootId={id} />
       </Modal>
     </>
   );