cloudcommerce 0.18.2 → 0.19.0

package/packages/storefront/dist/server/chunks/pages/{index.astro.fb8fe537.mjs → index.astro.753ff02c.mjs}

@@ -1,8 +1,8 @@
-import { c as createAstro, a as createComponent, r as renderTemplate, d as renderComponent, m as maybeRenderHead, b as addAttribute, u as unescapeHTML, F as Fragment$1 } from '../astro.2df8d1c5.mjs';
-import { b as $$Picture, p as parseShippingPhrase, _ as _export_sfc, C as Carousel, c as CarouselControl, d as availableExtraDiscount, e as installmentsOption, f as discountOption, g as loyaltyPointsPrograms, l as loadRouteContext, $ as $$PageHeader, a as $$Base } from './_...slug_.astro.906634b2.mjs';
-import api from '@cloudcommerce/api';
-import { computed, useSSRContext, defineComponent, mergeProps, withCtx, createVNode, withDirectives, vShow, resolveDynamicComponent, createTextVNode, toDisplayString, openBlock, createBlock, Fragment, renderList, renderSlot, createCommentVNode, ref, shallowReactive, resolveComponent, withAsyncContext } from 'vue';
+import { c as createAstro, a as createComponent, r as renderTemplate, d as renderComponent, m as maybeRenderHead, b as addAttribute, u as unescapeHTML, F as Fragment$1 } from '../astro.45d3047f.mjs';
+import { b as $$Picture, p as parseShippingPhrase, _ as _export_sfc, C as Carousel, c as CarouselControl, d as availableExtraDiscount, e as installmentsOption, f as discountOption, g as loyaltyPointsPrograms, h as addProductToCart, l as loadRouteContext, $ as $$PageHeader, a as $$Base } from './_...slug_.astro.b5433bcf.mjs';
+import { computed, useSSRContext, defineComponent, mergeProps, withCtx, createVNode, withDirectives, vShow, resolveDynamicComponent, createTextVNode, toDisplayString, openBlock, createBlock, Fragment, renderList, renderSlot, createCommentVNode, ref, shallowReactive, resolveComponent, withModifiers, withAsyncContext } from 'vue';
 import { ssrRenderAttrs, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrRenderAttr, ssrRenderSlot, ssrRenderVNode, ssrInterpolate } from 'vue/server-renderer';
+import api from '@cloudcommerce/api';
 import { inStock, price, name, img, onPromotion } from '@ecomplus/utils';
 import { useElementHover, watchOnce } from '@vueuse/core';
 
@@ -43,9 +43,9 @@ const usePageHero = async ({ routeContext }) => {
 };
 
 const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
-const $$HeroPicture = createComponent(async ($$result, $$props, $$slots) => {
+const $$Banner = createComponent(async ($$result, $$props, $$slots) => {
   const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
-  Astro2.self = $$HeroPicture;
+  Astro2.self = $$Banner;
   const {
     img,
     alt,
@@ -53,7 +53,9 @@ const $$HeroPicture = createComponent(async ($$result, $$props, $$slots) => {
     title,
     subtitle,
     buttonText,
-    index
+    index,
+    class: className = "max-w-screen-2xl",
+    mobileClass = "max-w-screen-sm"
   } = Astro2.props;
   const hasHeader = title || subtitle || buttonText;
   let { widths, mobileWidths } = Astro2.props;
@@ -70,9 +72,9 @@ const $$HeroPicture = createComponent(async ($$result, $$props, $$slots) => {
   if (!mobileWidths?.length) {
     mobileWidths = [720, 856];
   }
-  return renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": img, "alt": alt || "", "widths": widths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `${mobileImg ? "hidden md:block" : ""} max-w-screen-2xl mx-auto` })}
-${mobileImg && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": mobileImg, "alt": alt || "", "widths": mobileWidths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": "md:hidden max-w-screen-sm mx-auto" })}`}`;
-}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/HeroPicture.astro");
+  return renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": img, "alt": alt || "", "widths": widths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `${mobileImg ? "hidden md:block " : ""}mx-auto ${className}` })}
+${mobileImg && renderTemplate`${renderComponent($$result, "Picture", $$Picture, { "src": mobileImg, "alt": alt || "", "widths": mobileWidths, "fetchpriority": index === 0 ? "high" : "low", "loading": index === 0 ? "eager" : "lazy", "class": `md:hidden mx-auto ${mobileClass}` })}`}`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/Banner.astro");
 
 const useHeroSlider = (props) => {
   const parsedSlides = computed(() => {
@@ -108,7 +110,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   _push(`<section${ssrRenderAttrs(mergeProps({ class: "relative mx-auto" }, _attrs))}>`);
-  _push(ssrRenderComponent($setup["Carousel"], { autoplay: $props.autoplay }, {
+  _push(ssrRenderComponent($setup["Carousel"], {
+    autoplay: $props.autoplay,
+    class: "secondary [&>*]:items-center"
+  }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
         _push2(`<div style="${ssrRenderStyle($setup.parsedSlides.length > 1 ? null : { display: "none" })}" class="absolute z-10 bottom-5 flex justify-end items-center w-screen right-5 xl:right-auto xl:max-w-screen-xl xl:left-1/2 xl:-ms-[640px]"${_scopeId}><div class="relative w-20 h-10 rounded-full bg-white/50 text-primary shadow-sm ring-1 ring-black/5"${_scopeId}>`);
@@ -170,7 +175,7 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
       if (_push2) {
         _push2(`<!--[-->`);
         ssrRenderList($setup.parsedSlides, (slide, i) => {
-          _push2(`<li class="shrink-0 basis-full h-full secondary"${_scopeId}><div class="${ssrRenderClass([slide.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null, "w-screen max-w-screen-2xl mx-auto overflow-x-hidden"])}"${_scopeId}><a${ssrRenderAttr("href", slide.href)} class="${ssrRenderClass(slide.hasHeader ? "basis-1/2 grow-0 md:order-last" : null)}"${_scopeId}>`);
+          _push2(`<li class="shrink-0 basis-full"${_scopeId}><div class="${ssrRenderClass([slide.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null, "w-screen max-w-screen-2xl mx-auto overflow-x-hidden"])}"${_scopeId}><a${ssrRenderAttr("href", slide.href)} class="${ssrRenderClass(slide.hasHeader ? "basis-1/2 grow-0 md:order-last" : null)}"${_scopeId}>`);
           ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push2, _parent2, _scopeId);
           _push2(`</a>`);
           if (slide.hasHeader) {
@@ -209,7 +214,7 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           (openBlock(true), createBlock(Fragment, null, renderList($setup.parsedSlides, (slide, i) => {
             return openBlock(), createBlock("li", {
               key: i,
-              class: "shrink-0 basis-full h-full secondary"
+              class: "shrink-0 basis-full"
             }, [
               createVNode("div", {
                 class: ["w-screen max-w-screen-2xl mx-auto overflow-x-hidden", slide.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null]
@@ -405,11 +410,12 @@ const useProductCard = (props) => {
   const isFetching = ref(false);
   let fetching = null;
   const fetchError = ref(null);
+  const { productId } = props;
   const product = shallowReactive({
     ...props.product,
+    _id: props.product?._id || productId,
     price: price(props.product || {})
   });
-  const { productId } = props;
   if (!props.product && productId) {
     isFetching.value = true;
     fetching = (async () => {
@@ -442,13 +448,6 @@ const useProductCard = (props) => {
         if (img$1)
           _images.push(img$1);
       });
-    } else {
-      const { picture } = product;
-      if (picture) {
-        const img$1 = img(picture);
-        if (img$1)
-          _images.push(img$1);
-      }
     }
     return _images;
   });
@@ -465,6 +464,11 @@ const useProductCard = (props) => {
     }
     return 0;
   });
+  const hasVariations = computed(() => {
+    if (product.has_variations)
+      return true;
+    return Boolean(product.variations?.length);
+  });
   return {
     isFetching,
     fetching,
@@ -475,7 +479,8 @@ const useProductCard = (props) => {
     images,
     isInStock,
     isActive,
-    discountPercentage
+    discountPercentage,
+    hasVariations
   };
 };
 
@@ -697,7 +702,7 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
     default: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
         if ($setup.cashbackValue && $props.hasCashback) {
-          _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage)))}${_scopeId}><i class="i-cashback mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money($setup.cashbackValue))}</span><small${_scopeId}> cashback</small></span></div>`);
+          _push2(`<div class="relative z-10"${_scopeId}><span${ssrRenderAttr("data-tooltip", "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage)))}${_scopeId}><i class="i-arrow-uturn-left mr-1"${_scopeId}></i><span class="font-medium"${_scopeId}>${ssrInterpolate(_ctx.$money($setup.cashbackValue))}</span><small${_scopeId}> cashback</small></span></div>`);
         } else {
           _push2(`<!---->`);
         }
@@ -710,7 +715,7 @@ function _sfc_ssrRender$2(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             createVNode("span", {
               "data-tooltip": "Receba $1 de volta".replace("$1", _ctx.$percentage($setup.cashbackPercentage))
             }, [
-              createVNode("i", { class: "i-cashback mr-1" }),
+              createVNode("i", { class: "i-arrow-uturn-left mr-1" }),
               createVNode("span", { class: "font-medium" }, toDisplayString(_ctx.$money($setup.cashbackValue)), 1),
               createVNode("small", null, " cashback")
             ], 8, ["data-tooltip"])
@@ -816,7 +821,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       product,
       title,
       link,
-      images
+      images,
+      isInStock,
+      isActive,
+      discountPercentage,
+      hasVariations
     } = useProductCard({
       product: props.product,
       productId: props.productId
@@ -827,7 +836,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     watchOnce(isHovered, () => {
       wasHoveredOnce.value = true;
     });
-    const __returned__ = { props, product, title, link, images, card, isHovered, wasHoveredOnce, Prices };
+    const __returned__ = { props, product, title, link, images, isInStock, isActive, discountPercentage, hasVariations, card, isHovered, wasHoveredOnce, get addProductToCart() {
+      return addProductToCart;
+    }, Prices };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -866,9 +877,18 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         } else {
           _push2(`<div class="w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"${_scopeId}></div>`);
         }
-        _push2(`</div></div><div class="flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10"${_scopeId}>`);
+        _push2(`</div></div>`);
+        if ($setup.discountPercentage) {
+          _push2(`<span class="uno-bm03rg"${_scopeId}> -<strong${_scopeId}>${ssrInterpolate($setup.discountPercentage)}</strong>% </span>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`<div class="relative flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10"${_scopeId}>`);
         ssrRenderVNode(_push2, createVNode(resolveDynamicComponent($props.headingTag), {
-          class: ["ui-link text-base-700 no-underline line-clamp-2", $setup.link ? "group-hover:underline group-hover:text-primary" : null]
+          class: ["ui-link no-underline line-clamp-2", [
+            $setup.isActive ? "text-base-700" : "text-base-500",
+            $setup.link ? "group-hover:underline group-hover:text-primary" : null
+          ]]
         }, {
           default: withCtx((_2, _push3, _parent3, _scopeId2) => {
             if (_push3) {
@@ -882,8 +902,20 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           _: 1
         }), _parent2, _scopeId);
         _push2(`<div class="pt-2"${_scopeId}>`);
-        _push2(ssrRenderComponent($setup["Prices"], { product: $setup.product }, null, _parent2, _scopeId));
-        _push2(`</div></div>`);
+        if ($setup.isActive) {
+          _push2(`<div${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["Prices"], { product: $setup.product }, null, _parent2, _scopeId));
+          _push2(`</div>`);
+        } else {
+          _push2(`<span class="ui-badge bg-warning-100 text-warning-700"${_scopeId}>${ssrInterpolate(!$setup.isInStock ? "Sem estoque" : "Inativo")}</span>`);
+        }
+        _push2(`</div>`);
+        if ($setup.isActive && !$setup.hasVariations) {
+          _push2(`<button class="ui-btn-sm ui-btn-primary absolute -top-6 left-0 w-full rounded-none opacity-0 group-hover:opacity-100 transition -z-10 group-hover:z-10"${_scopeId}><i class="i-plus-20-solid mr-0.5"${_scopeId}></i> ${ssrInterpolate("Adicionar ao carrinho")}</button>`);
+        } else {
+          _push2(`<!---->`);
+        }
+        _push2(`</div>`);
       } else {
         return [
           createVNode("div", { class: "aspect-square p-2 motion-safe:group-hover:scale-110 transition-transform" }, [
@@ -906,9 +938,20 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               }))
             ])
           ]),
-          createVNode("div", { class: "flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10" }, [
+          $setup.discountPercentage ? (openBlock(), createBlock("span", {
+            key: 0,
+            class: "uno-bm03rg"
+          }, [
+            createTextVNode(" -"),
+            createVNode("strong", null, toDisplayString($setup.discountPercentage), 1),
+            createTextVNode("% ")
+          ])) : createCommentVNode("", true),
+          createVNode("div", { class: "relative flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10" }, [
             (openBlock(), createBlock(resolveDynamicComponent($props.headingTag), {
-              class: ["ui-link text-base-700 no-underline line-clamp-2", $setup.link ? "group-hover:underline group-hover:text-primary" : null]
+              class: ["ui-link no-underline line-clamp-2", [
+                $setup.isActive ? "text-base-700" : "text-base-500",
+                $setup.link ? "group-hover:underline group-hover:text-primary" : null
+              ]]
             }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString($setup.title), 1)
@@ -916,8 +959,21 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               _: 1
             }, 8, ["class"])),
             createVNode("div", { class: "pt-2" }, [
-              createVNode($setup["Prices"], { product: $setup.product }, null, 8, ["product"])
-            ])
+              $setup.isActive ? (openBlock(), createBlock("div", { key: 0 }, [
+                createVNode($setup["Prices"], { product: $setup.product }, null, 8, ["product"])
+              ])) : (openBlock(), createBlock("span", {
+                key: 1,
+                class: "ui-badge bg-warning-100 text-warning-700"
+              }, toDisplayString(!$setup.isInStock ? "Sem estoque" : "Inativo"), 1))
+            ]),
+            $setup.isActive && !$setup.hasVariations ? (openBlock(), createBlock("button", {
+              key: 0,
+              class: "ui-btn-sm ui-btn-primary absolute -top-6 left-0 w-full rounded-none opacity-0 group-hover:opacity-100 transition -z-10 group-hover:z-10",
+              onClick: withModifiers(($event) => $setup.addProductToCart($setup.product), ["prevent"])
+            }, [
+              createVNode("i", { class: "i-plus-20-solid mr-0.5" }),
+              createTextVNode(" " + toDisplayString("Adicionar ao carrinho"))
+            ], 8, ["onClick"])) : createCommentVNode("", true)
           ])
         ];
       }
@@ -1073,51 +1129,9 @@ const $$Home = createComponent(async ($$result, $$props, $$slots) => {
   const { routeContext } = Astro2.locals;
   const { heroSlider } = await usePageHero({ routeContext });
   const heroSlides = heroSlider.slides;
-  const products = (await api.get("products")).data.result;
   return renderTemplate`${maybeRenderHead()}<main>
-  ${heroSlider.slides.length && renderTemplate`${renderComponent($$result, "HeroSlider", HeroSlider, { ...heroSlider, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/HeroSlider.vue", "client:component-export": "default" }, { "picture-0": ($$result2) => renderTemplate`${heroSlides[0] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-0", ...heroSlides[0], "index": 0 })}`}`, "picture-1": ($$result2) => renderTemplate`${heroSlides[1] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-1", ...heroSlides[1], "index": 1 })}`}`, "picture-2": ($$result2) => renderTemplate`${heroSlides[2] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-2", ...heroSlides[2], "index": 2 })}`}`, "picture-3": ($$result2) => renderTemplate`${heroSlides[3] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-3", ...heroSlides[3], "index": 3 })}`}`, "picture-4": ($$result2) => renderTemplate`${heroSlides[4] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-4", ...heroSlides[4], "index": 4 })}`}`, "picture-5": ($$result2) => renderTemplate`${heroSlides[5] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-5", ...heroSlides[5], "index": 5 })}`}`, "picture-6": ($$result2) => renderTemplate`${heroSlides[6] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-6", ...heroSlides[6], "index": 6 })}`}`, "picture-7": ($$result2) => renderTemplate`${heroSlides[7] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-7", ...heroSlides[7], "index": 7 })}`}`, "picture-8": ($$result2) => renderTemplate`${heroSlides[8] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-8", ...heroSlides[8], "index": 8 })}`}`, "picture-9": ($$result2) => renderTemplate`${heroSlides[9] && renderTemplate`${renderComponent($$result2, "HeroPicture", $$HeroPicture, { "slot": "picture-9", ...heroSlides[9], "index": 9 })}`}` })}`}
+  ${heroSlider.slides.length && renderTemplate`${renderComponent($$result, "HeroSlider", HeroSlider, { ...heroSlider, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/HeroSlider.vue", "client:component-export": "default" }, { "picture-0": ($$result2) => renderTemplate`${heroSlides[0] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-0", ...heroSlides[0], "index": 0 })}`}`, "picture-1": ($$result2) => renderTemplate`${heroSlides[1] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-1", ...heroSlides[1], "index": 1 })}`}`, "picture-2": ($$result2) => renderTemplate`${heroSlides[2] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-2", ...heroSlides[2], "index": 2 })}`}`, "picture-3": ($$result2) => renderTemplate`${heroSlides[3] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-3", ...heroSlides[3], "index": 3 })}`}`, "picture-4": ($$result2) => renderTemplate`${heroSlides[4] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-4", ...heroSlides[4], "index": 4 })}`}`, "picture-5": ($$result2) => renderTemplate`${heroSlides[5] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-5", ...heroSlides[5], "index": 5 })}`}`, "picture-6": ($$result2) => renderTemplate`${heroSlides[6] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-6", ...heroSlides[6], "index": 6 })}`}`, "picture-7": ($$result2) => renderTemplate`${heroSlides[7] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-7", ...heroSlides[7], "index": 7 })}`}`, "picture-8": ($$result2) => renderTemplate`${heroSlides[8] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-8", ...heroSlides[8], "index": 8 })}`}`, "picture-9": ($$result2) => renderTemplate`${heroSlides[9] && renderTemplate`${renderComponent($$result2, "Banner", $$Banner, { "slot": "picture-9", ...heroSlides[9], "index": 9 })}`}` })}`}
   ${renderComponent($$result, "Sections", $$Sections, {})}
-
-  <h1>Welcome to <span class="text-primary">Astro</span></h1>
-  <ul role="list" class="mt-3 fs-20">
-    ${products.map((product) => renderTemplate`<li>
-      <a${addAttribute(`/${product.slug}`, "href")}>${product.sku}</a>
-    </li>`)}
-  </ul>
-  <div class="prose">
-    <h1>Oi</h1>
-    <p>Olá <a href="/">link</a></p>
-    <ul>
-      <li>So here is the first item in this list.</li>
-      <li>In this example we're keeping the items short.</li>
-      <li>Later, we'll use longer, more complex list items.</li>
-    </ul>
-    <details>
-      <summary role="button">Accordion 1</summary>
-      <p>…</p>
-    </details>
-  </div>
-  <div>
-    <h1>Oi</h1>
-    <p>Olá <a href="/">link</a></p>
-    <details>
-      <summary role="button">Accordion 1</summary>
-      <p>…</p>
-    </details>
-  </div>
-  <div class="mt-2">
-    <div>
-      <label class="block">
-        <span class="text-gray-700">Email address</span>
-        <input type="email" class="mt-1 block w-full" placeholder="john@example.com">
-      </label>
-      <label class="inline-flex items-center">
-        <input type="checkbox" checked>
-        <span class="ml-2 font-brand">Email me news and special offers</span>
-      </label>
-    </div>
-  </div>
-  ${renderComponent($$result, "Prices", Prices, { "price": 10, "client:load": true, "client:component-hydration": "load", "client:component-path": "~/components/Prices.vue", "client:component-export": "default" })}
 </main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Home.astro");
 

package/packages/storefront/dist/server/entry.mjs

@@ -3,7 +3,7 @@ import { webcrypto } from 'node:crypto';
 import { ByteLengthQueuingStrategy, CountQueuingStrategy, ReadableByteStreamController, ReadableStream, ReadableStreamBYOBReader, ReadableStreamBYOBRequest, ReadableStreamDefaultController, ReadableStreamDefaultReader, TransformStream, WritableStream, WritableStreamDefaultController, WritableStreamDefaultWriter } from 'node:stream/web';
 import { File, FormData, Headers, Request, Response, fetch } from 'undici';
 import { setTimeout as setTimeout$1, clearTimeout as clearTimeout$1 } from 'node:timers';
-import { N as NodeApp, g as deserializeManifest } from './chunks/astro.2df8d1c5.mjs';
+import { N as NodeApp, g as deserializeManifest } from './chunks/astro.45d3047f.mjs';
 import { Readable } from 'stream';
 import https from 'https';
 import path from 'path';
@@ -24,7 +24,7 @@ import 'string-width';
 import 'vue';
 import 'vue/server-renderer';
 import '@ecomplus/utils';
-import './chunks/pages/_...slug_.astro.906634b2.mjs';
+import './chunks/pages/_...slug_.astro.b5433bcf.mjs';
 import 'node:fs/promises';
 import 'node:path';
 import 'node:url';
@@ -2824,13 +2824,13 @@ const adapter = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   start
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const _page0  = () => import('./chunks/endpoint@_@js.36a1cfa7.mjs');
-const _page1  = () => import('./chunks/index@_@astro.1ea814dc.mjs');
-const _page2  = () => import('./chunks/fallback@_@astro.6af59549.mjs');
-const _page3  = () => import('./chunks/index@_@astro.846e70bb.mjs');
-const _page4  = () => import('./chunks/account@_@astro.9bc80fb8.mjs');
-const _page5  = () => import('./chunks/_...4cff750f.mjs');const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.8.0_sharp@0.32.1/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5]]);
-const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.8.0_sharp@0.32.1/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.9d9d7ac4.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.b19aabfc.css"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.9d9d7ac4.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.b19aabfc.css"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.9d9d7ac4.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.b19aabfc.css"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-demo.web.app","base":"/","compressHTML":false,"markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"componentMetadata":[["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro",{"propagation":"none","containsHead":true}]],"renderers":[],"clientDirectives":[["idle","(()=>{var i=t=>{let e=async()=>{await(await t())()};\"requestIdleCallback\"in window?window.requestIdleCallback(e):setTimeout(e,200)};(self.Astro||(self.Astro={})).idle=i;window.dispatchEvent(new Event(\"astro:idle\"));})();"],["load","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();"],["media","(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener(\"change\",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event(\"astro:media\"));})();"],["only","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();"],["visible","(()=>{var r=(i,c,n)=>{let s=async()=>{await(await i())()},t=new IntersectionObserver(e=>{for(let o of e)if(o.isIntersecting){t.disconnect(),s();break}});for(let e of n.children)t.observe(e)};(self.Astro||(self.Astro={})).visible=r;window.dispatchEvent(new Event(\"astro:visible\"));})();"]],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","\u0000@astro-renderers":"renderers.mjs","\u0000empty-middleware":"_empty-middleware.mjs","/src/pages/app/account.astro":"chunks/pages/account.astro.f630663e.mjs","/src/pages/fallback.astro":"chunks/pages/fallback.astro.0a073a86.mjs","\u0000@astro-page:../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.8.0_sharp@0.32.1/node_modules/@astrojs/image/dist/endpoint@_@js":"chunks/endpoint@_@js.36a1cfa7.mjs","\u0000@astro-page:src/pages/index@_@astro":"chunks/index@_@astro.1ea814dc.mjs","\u0000@astro-page:src/pages/fallback@_@astro":"chunks/fallback@_@astro.6af59549.mjs","\u0000@astro-page:src/pages/app/index@_@astro":"chunks/index@_@astro.846e70bb.mjs","\u0000@astro-page:src/pages/app/account@_@astro":"chunks/account@_@astro.9bc80fb8.mjs","\u0000@astro-page:src/pages/[...slug]@_@astro":"chunks/_...4cff750f.mjs","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.a7b12eab.js","/astro/hoisted.js?q=0":"_astro/hoisted.9d9d7ac4.js","~/components/PitchBar.vue":"_astro/PitchBar.75d2999f.js","~/components/HeroSlider.vue":"_astro/HeroSlider.359c76cc.js","@astrojs/vue/client.js":"_astro/client.24201f93.js","~/components/ProductShelf.vue":"_astro/ProductShelf.83c66e3e.js","~/components/Prices.vue":"_astro/Prices.bd0d3474.js","~/components/ShopHeader.vue":"_astro/ShopHeader.a06de422.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.84207480.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/_...slug_.b19aabfc.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-5e0bf4e4.js","/_astro/Carousel.533b4b19.js","/_astro/HeroSlider.359c76cc.js","/_astro/PitchBar.75d2999f.js","/_astro/Prices.bd0d3474.js","/_astro/ProductShelf.83c66e3e.js","/_astro/ShopHeader.a06de422.js","/_astro/_plugin-vue_export-helper.4e6dc3af.js","/_astro/api.7f62c1ff.js","/_astro/client.24201f93.js","/_astro/firebase-app.84207480.js","/_astro/hoisted.9d9d7ac4.js","/_astro/img.22ad29ec.js","/_astro/index.ddc27a3a.js","/_astro/modules-info.d6bd555b.js","/_astro/preload-helper.cf010ec4.js","/_astro/runtime-dom.esm-bundler.578d6e91.js","/_astro/session-utm.744b0db3.js","/_astro/workbox-window.prod.es5.a7b12eab.js","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner1.png","/img/uploads/banner2.png","/img/uploads/banner2.webp","/img/uploads/ecom-icon.png","/img/uploads/favicon.png","/img/uploads/headless.png","/img/uploads/headphone.png","/img/uploads/headphone.webp","/img/uploads/logo.png","/img/uploads/og-image.png","/img/uploads/passion.png","/img/uploads/passion.webp","/img/uploads/pwa-reliable.png","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.png","/img/uploads/rect89.webp","/img/uploads/ssl-safe.png"]}), {
+const _page0  = () => import('./chunks/endpoint@_@js.59bf44fe.mjs');
+const _page1  = () => import('./chunks/index@_@astro.d93b7b12.mjs');
+const _page2  = () => import('./chunks/fallback@_@astro.c8a88451.mjs');
+const _page3  = () => import('./chunks/index@_@astro.d808b7a7.mjs');
+const _page4  = () => import('./chunks/account@_@astro.691bc27d.mjs');
+const _page5  = () => import('./chunks/_...38dc610a.mjs');const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.8.3_sharp@0.32.3/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5]]);
+const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.8.3_sharp@0.32.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.9d9d7ac4.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.c58d7d89.css"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.9d9d7ac4.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.c58d7d89.css"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"styles":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[{"type":"external","value":"/_astro/hoisted.9d9d7ac4.js"}],"styles":[{"type":"external","src":"/_astro/_...slug_.c58d7d89.css"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-demo.web.app","base":"/","compressHTML":false,"markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"componentMetadata":[["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro",{"propagation":"none","containsHead":true}]],"renderers":[],"clientDirectives":[["idle","(()=>{var i=t=>{let e=async()=>{await(await t())()};\"requestIdleCallback\"in window?window.requestIdleCallback(e):setTimeout(e,200)};(self.Astro||(self.Astro={})).idle=i;window.dispatchEvent(new Event(\"astro:idle\"));})();"],["load","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event(\"astro:load\"));})();"],["media","(()=>{var s=(i,t)=>{let a=async()=>{await(await i())()};if(t.value){let e=matchMedia(t.value);e.matches?a():e.addEventListener(\"change\",a,{once:!0})}};(self.Astro||(self.Astro={})).media=s;window.dispatchEvent(new Event(\"astro:media\"));})();"],["only","(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event(\"astro:only\"));})();"],["visible","(()=>{var r=(i,c,n)=>{let s=async()=>{await(await i())()},t=new IntersectionObserver(e=>{for(let o of e)if(o.isIntersecting){t.disconnect(),s();break}});for(let e of n.children)t.observe(e)};(self.Astro||(self.Astro={})).visible=r;window.dispatchEvent(new Event(\"astro:visible\"));})();"]],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","\u0000@astro-renderers":"renderers.mjs","\u0000empty-middleware":"_empty-middleware.mjs","/src/pages/app/account.astro":"chunks/pages/account.astro.f07cf19e.mjs","/src/pages/fallback.astro":"chunks/pages/fallback.astro.09db7801.mjs","\u0000@astro-page:../../node_modules/.pnpm/@astrojs+image@0.17.2_astro@2.8.3_sharp@0.32.3/node_modules/@astrojs/image/dist/endpoint@_@js":"chunks/endpoint@_@js.59bf44fe.mjs","\u0000@astro-page:src/pages/index@_@astro":"chunks/index@_@astro.d93b7b12.mjs","\u0000@astro-page:src/pages/fallback@_@astro":"chunks/fallback@_@astro.c8a88451.mjs","\u0000@astro-page:src/pages/app/index@_@astro":"chunks/index@_@astro.d808b7a7.mjs","\u0000@astro-page:src/pages/app/account@_@astro":"chunks/account@_@astro.691bc27d.mjs","\u0000@astro-page:src/pages/[...slug]@_@astro":"chunks/_...38dc610a.mjs","~/components/HeroSlider.vue":"_astro/HeroSlider.b2622951.js","~/components/PitchBar.vue":"_astro/PitchBar.ed85833a.js","/astro/hoisted.js?q=0":"_astro/hoisted.9d9d7ac4.js","@astrojs/vue/client.js":"_astro/client.8035a95a.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.a7b12eab.js","~/components/ProductShelf.vue":"_astro/ProductShelf.f63b3dc2.js","~/components/ShopHeader.vue":"_astro/ShopHeader.61f52cad.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.84207480.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/_...slug_.c58d7d89.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-5e0bf4e4.js","/_astro/Carousel.62c97a79.js","/_astro/HeroSlider.b2622951.js","/_astro/PitchBar.ed85833a.js","/_astro/ProductShelf.f63b3dc2.js","/_astro/ShopHeader.61f52cad.js","/_astro/_plugin-vue_export-helper.4cb7dd76.js","/_astro/api.4984c5be.js","/_astro/client.8035a95a.js","/_astro/firebase-app.84207480.js","/_astro/hoisted.9d9d7ac4.js","/_astro/img.abbe849f.js","/_astro/index.b93f3d06.js","/_astro/preload-helper.cf010ec4.js","/_astro/session-utm.744b0db3.js","/_astro/workbox-window.prod.es5.a7b12eab.js","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner2.webp","/img/uploads/ecom-icon.png","/img/uploads/headphone.webp","/img/uploads/logo.png","/img/uploads/og-image.png","/img/uploads/passion.webp","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.webp"]}), {
 	pageMap,
 	renderers,
 });

package/packages/storefront/dist/server/renderers.mjs

@@ -1,8 +1,8 @@
-import { h as server_default } from './chunks/astro.2df8d1c5.mjs';
+import { h as server_default } from './chunks/astro.45d3047f.mjs';
 import { useSSRContext, defineComponent, computed, mergeProps, h, createSSRApp } from 'vue';
 import { ssrRenderSlotInner, ssrRenderAttrs, ssrRenderSlot, renderToString } from 'vue/server-renderer';
 import { img, imgSizes, i18n, formatMoney } from '@ecomplus/utils';
-import { _ as _export_sfc } from './chunks/pages/_...slug_.astro.906634b2.mjs';
+import { _ as _export_sfc } from './chunks/pages/_...slug_.astro.b5433bcf.mjs';
 import 'path-to-regexp';
 import 'cookie';
 import '@astrojs/internal-helpers/path';

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -43,17 +43,17 @@
     "@iconify-json/logos": "^1.1.33",
     "@vite-pwa/astro": "^0.1.1",
     "@vueuse/core": "10.2.1",
-    "astro": "2.8.0",
+    "astro": "2.8.3",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.3.1",
     "firebase": "^9.23.0",
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
     "semver": "^7.5.4",
-    "sharp": "^0.32.1",
-    "tailwindcss": "^3.3.2",
+    "sharp": "^0.32.3",
+    "tailwindcss": "^3.3.3",
     "unocss": "^0.53.5",
-    "vite": "^4.4.2",
+    "vite": "^4.4.4",
     "vite-plugin-pwa": "^0.16.4",
     "vue": "^3.3.4"
   },

package/packages/storefront/src/images/get-built-picture.ts

@@ -127,6 +127,7 @@ export async function getBuiltPicture(params: GetPictureParams): Promise<GetPict
   const sources = await Promise.all(allFormats.map((format) => getSource(format)));
   return {
     sources,
+    // @ts-ignore
     image,
   };
 }

package/packages/storefront/src/images/use-ssr-picture.ts

@@ -3,6 +3,10 @@ import type {
   GetPictureParams,
   GetPictureResult,
 } from '@astrojs/image/dist/lib/get-picture';
+import type {
+  GetPictureParams as GetBuiltPictureParams,
+  GetPictureResult as GetBuiltPictureResult,
+} from './get-built-picture';
 
 export type PictureProps = Omit<PictureComponentRemoteImageProps, 'aspectRatio' | 'sizes'> & {
   sizes?: string;
@@ -26,7 +30,8 @@ const getAspectRatio = (src: string | ImageSize, tryImageSize: TryImageSize) =>
 
 export type UsePictureParams = PictureProps & {
   tryImageSize: TryImageSize;
-  getPicture: (params: GetPictureParams) => Promise<GetPictureResult>;
+  getPicture: ((params: GetPictureParams) => Promise<GetPictureResult>)
+    | ((params: GetBuiltPictureParams) => Promise<GetBuiltPictureResult>);
 };
 
 const useSSRPicture = async (params: UsePictureParams) => {
@@ -48,7 +53,7 @@ const useSSRPicture = async (params: UsePictureParams) => {
     ...attrs
   } = params;
 
-  let aspectRatio: number;
+  let aspectRatio: number | undefined;
   if (propAspectRatio) {
     if (typeof propAspectRatio === 'number') {
       aspectRatio = propAspectRatio;
@@ -67,7 +72,7 @@ const useSSRPicture = async (params: UsePictureParams) => {
   let sizes: string = propSizes || '';
   if (!sizes && attrs.class) {
     const classNames = attrs.class.split(' ');
-    let nextSize: string;
+    let nextSize: string | undefined;
     const breakpoints = {
       sm: 640,
       md: 768,
@@ -75,10 +80,10 @@ const useSSRPicture = async (params: UsePictureParams) => {
       xl: 1280,
       '2xl': 1536,
     };
-    [
-      [''],
+    ([
+      ['', 0],
       ...Object.entries(breakpoints),
-    ].forEach(([breakpoint, minWidth]: [string, number | undefined]) => {
+    ] as Array<[string, number]>).forEach(([breakpoint, minWidth]) => {
       const classRegex = breakpoint
         ? new RegExp(`^${breakpoint}:max-w-(\\[\\w+\\]|screen-\\w+)$`)
         : /^max-w-(\[\w+\]|screen-\w+)$/;

package/packages/storefront/src/lib/components/{HeroPicture.astro → Banner.astro}

@@ -1,11 +1,13 @@
 ---
-import type { HeroSliderProps } from '@@sf/layouts/sections/use-hero-section';
+import type { HeroSliderProps } from '@@sf/layouts/main/use-page-hero';
 import Picture from '@@sf/components/Picture.astro';
 
 export type Props = HeroSliderProps['slides'][0] & {
   index: number;
   widths?: number[];
+  class?: string;
   mobileWidths?: number[];
+  mobileClass?: string;
 };
 
 const {
@@ -16,9 +18,11 @@ const {
   subtitle,
   buttonText,
   index,
+  class: className = 'max-w-screen-2xl',
+  mobileClass = 'max-w-screen-sm',
 } = Astro.props as Props;
 const hasHeader = title || subtitle || buttonText;
-let { widths, mobileWidths }= Astro.props;
+let { widths, mobileWidths } = Astro.props;
 if (!widths?.length) {
   if (mobileImg) {
     widths = [1536, 2048];
@@ -40,7 +44,7 @@ if (!mobileWidths?.length) {
   widths={widths}
   fetchpriority={index === 0 ? 'high' : 'low'}
   loading={index === 0 ? 'eager' : 'lazy'}
-  class={`${(mobileImg ? 'hidden md:block' : '')} max-w-screen-2xl mx-auto`}
+  class={`${(mobileImg ? 'hidden md:block ' : '')}mx-auto ${className}`}
 />
 {mobileImg &&
   <Picture
@@ -49,6 +53,6 @@ if (!mobileWidths?.length) {
     widths={mobileWidths}
     fetchpriority={index === 0 ? 'high' : 'low'}
     loading={index === 0 ? 'eager' : 'lazy'}
-    class="md:hidden max-w-screen-sm mx-auto"
+    class={`md:hidden mx-auto ${mobileClass}`}
   />
 }

package/packages/storefront/src/lib/composables/use-product-card.ts

@@ -1,4 +1,4 @@
-import type { Products, Carts, SearchItem } from '@cloudcommerce/types';
+import type { Products, SearchItem } from '@cloudcommerce/types';
 import { ref, computed, shallowReactive } from 'vue';
 import api from '@cloudcommerce/api';
 import {
@@ -9,10 +9,9 @@ import {
   onPromotion as checkOnPromotion,
 } from '@ecomplus/utils';
 
-type CartItem = Carts['items'][0];
 type PictureSize = { url: string; alt?: string; size?: string };
 
-export type ProductItem = Products | SearchItem | CartItem;
+export type ProductItem = Products | SearchItem;
 
 export type Props = {
   product?: ProductItem;
@@ -23,12 +22,13 @@ const useProductCard = <T extends ProductItem | undefined = undefined>(props: Pr
   const isFetching = ref(false);
   let fetching: Promise<void> | null = null;
   const fetchError = ref<Error | null>(null);
+  const { productId } = props;
   const product = shallowReactive<(T extends undefined ? Partial<SearchItem> : T)
-    & { price: number }>({
+    & { _id: Products['_id'], price: number }>({
       ...(props.product as Exclude<T, undefined>),
+      _id: (props.product?._id || productId) as Products['_id'],
       price: getPrice(props.product || {}),
     });
-  const { productId } = props;
   if (!props.product && productId) {
     isFetching.value = true;
     fetching = (async () => {
@@ -61,12 +61,6 @@ const useProductCard = <T extends ProductItem | undefined = undefined>(props: Pr
         const img = getImg(picture);
         if (img) _images.push(img);
       }));
-    } else {
-      const { picture } = (product as CartItem);
-      if (picture) {
-        const img = getImg(picture);
-        if (img) _images.push(img);
-      }
     }
     return _images;
   });
@@ -84,6 +78,10 @@ const useProductCard = <T extends ProductItem | undefined = undefined>(props: Pr
     }
     return 0;
   });
+  const hasVariations = computed(() => {
+    if ((product as SearchItem).has_variations) return true;
+    return Boolean(product.variations?.length);
+  });
 
   return {
     isFetching,
@@ -96,6 +94,7 @@ const useProductCard = <T extends ProductItem | undefined = undefined>(props: Pr
     isInStock,
     isActive,
     discountPercentage,
+    hasVariations,
   };
 };