cloudcommerce 0.19.0 → 0.20.0

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

@@ -1,51 +1,205 @@
 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 { 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.bde9380b.mjs';
+import { ref, shallowReactive, computed, useSSRContext, defineComponent, mergeProps, createVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, withDirectives, vShow, openBlock, createBlock, Fragment, renderList, resolveComponent, createCommentVNode, withModifiers, withAsyncContext } from 'vue';
 import api from '@cloudcommerce/api';
 import { inStock, price, name, img, onPromotion } from '@ecomplus/utils';
+import { ssrRenderAttrs, ssrRenderVNode, ssrRenderSlot, ssrInterpolate, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrRenderClass, ssrRenderAttr } from 'vue/server-renderer';
 import { useElementHover, watchOnce } from '@vueuse/core';
 
+const useProductShelf = (props) => {
+  const title = ref(props.title || "");
+  const titleLink = ref(props.titleLink || "");
+  const isFetching = ref(false);
+  let fetching = null;
+  const fetchError = ref(null);
+  const products = shallowReactive(props.products || []);
+  if (!props.products) {
+    isFetching.value = true;
+    fetching = (async () => {
+      let searchQuery = props.searchQuery || "";
+      let collection;
+      if (props.collectionId) {
+        try {
+          const { data } = await api.get(`collections/${props.collectionId}`);
+          collection = data;
+        } catch (err) {
+          console.error(err);
+          fetchError.value = err;
+        }
+        const productIds = collection?.products;
+        if (Array.isArray(productIds) && productIds.length) {
+          searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
+        }
+        if (!title.value && title.value !== null && collection?.name) {
+          title.value = collection?.name;
+        }
+      }
+      const limit = props.limit || 24;
+      const offset = props.page ? (props.page - 1) * limit : 0;
+      let endpointQuery = `offset=${offset}&limit=${limit}`;
+      if (props.sort) {
+        endpointQuery += `&sort=${props.sort}`;
+      }
+      endpointQuery += searchQuery;
+      try {
+        const { data } = await api.get(`search/v1?${endpointQuery}`);
+        if (props.isShuffle) {
+          let m = data.result.filter((item) => {
+            return item.available && inStock(item);
+          }).length;
+          let t;
+          let i;
+          while (m) {
+            i = Math.floor(Math.random() * m--);
+            t = data.result[m];
+            data.result[m] = data.result[i];
+            data.result[i] = t;
+          }
+        }
+        data.result.forEach((item) => products.push(item));
+      } catch (err) {
+        console.error(err);
+        fetchError.value = err;
+      }
+      isFetching.value = false;
+    })();
+  }
+  return {
+    title,
+    titleLink,
+    isFetching,
+    fetching,
+    fetchError,
+    products
+  };
+};
+
+const now = Date.now();
+const parseBanners = (banners) => {
+  const validBanners = [];
+  banners.forEach(({
+    img,
+    start,
+    end,
+    mobile_img: mobileImg,
+    button_link: buttonLink,
+    button_text: buttonText,
+    ...rest
+  }) => {
+    if (start && new Date(start).getTime() < now)
+      return;
+    if (end && new Date(end).getTime() > now)
+      return;
+    validBanners.push({
+      ...rest,
+      img,
+      mobileImg,
+      buttonLink,
+      buttonText
+    });
+  });
+  return validBanners;
+};
 const usePageHero = async ({ routeContext }) => {
   const { cmsContent } = routeContext;
   const heroSlider = { slides: [] };
   const heroContent = cmsContent?.hero;
   if (heroContent) {
     heroSlider.autoplay = heroContent.autoplay;
-    const now = Date.now();
-    heroContent.slides?.forEach(({
-      img,
-      start,
-      end,
-      mobile_img: mobileImg,
-      button_link: buttonLink,
-      button_text: buttonText,
-      ...rest
-    }) => {
-      if (!img)
-        return;
-      if (start && new Date(start).getTime() < now)
-        return;
-      if (end && new Date(end).getTime() > now)
+    if (heroContent.slides) {
+      heroSlider.slides = parseBanners(heroContent.slides);
+    }
+  }
+  return { heroSlider };
+};
+const usePageSections = async ({ routeContext }) => {
+  const sectionsContent = routeContext.cmsContent?.sections;
+  const sections = [];
+  if (sectionsContent) {
+    await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }, index) => {
+      if (type === "product-shelf") {
+        const {
+          collection_id: collectionIdAndInfo,
+          headless: isHeadless,
+          shuffle: isShuffle,
+          ...rest
+        } = sectionContent;
+        let { sort, title } = sectionContent;
+        switch (sort) {
+          case "offers":
+            sort = "-price_discount";
+            break;
+          case "news":
+            sort = "-_id";
+            break;
+          case "lowest_price":
+            sort = "price";
+            break;
+          case "highest_price":
+            sort = "-price";
+            break;
+        }
+        let collectionId = null;
+        let searchQuery;
+        let titleLink;
+        if (collectionIdAndInfo) {
+          const [_id, resource, name, path] = collectionIdAndInfo.split(":");
+          collectionId = _id;
+          if (resource === "categories") {
+            searchQuery = `&categories._id=${_id}`;
+          } else if (resource === "brands") {
+            searchQuery = `&brands._id=${_id}`;
+          }
+          if (!title && title !== null && name) {
+            title = name;
+          }
+          titleLink = path;
+        }
+        const props = {
+          ...rest,
+          collectionId,
+          searchQuery,
+          sort,
+          title: isHeadless ? null : title,
+          titleLink,
+          isShuffle
+        };
+        const { fetching, products } = useProductShelf(props);
+        await fetching;
+        sections[index] = {
+          type,
+          props: {
+            ...rest,
+            collectionId,
+            searchQuery,
+            sort,
+            title: isHeadless ? null : title,
+            titleLink,
+            isShuffle,
+            products
+          }
+        };
         return;
-      heroSlider.slides.push({
-        ...rest,
-        img,
-        mobileImg,
-        buttonLink,
-        buttonText
-      });
-    });
+      }
+      if (type === "banners-grid") {
+        sections[index] = {
+          type,
+          props: {
+            banners: parseBanners(sectionContent.banners || [])
+          }
+        };
+      }
+    }));
   }
   return {
-    heroSlider
+    sections
   };
 };
 
-const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
-const $$Banner = createComponent(async ($$result, $$props, $$slots) => {
-  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
-  Astro2.self = $$Banner;
+const $$Astro$5 = createAstro("https://ecom2-demo.web.app");
+const $$BannerPictures = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$5, $$props, $$slots);
+  Astro2.self = $$BannerPictures;
   const {
     img,
     alt,
@@ -72,19 +226,37 @@ const $$Banner = 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 " : ""}mx-auto ${className}` })}
+  return renderTemplate`${img && 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");
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/components/BannerPictures.astro");
+
+const useBanner = (props) => {
+  const parsedTitle = computed(() => {
+    return props.title ? parseShippingPhrase(props.title).value : "";
+  });
+  const parsedSubtitle = computed(() => {
+    return props.subtitle ? parseShippingPhrase(props.subtitle).value : "";
+  });
+  const parsedButtonText = computed(() => {
+    return props.buttonText ? parseShippingPhrase(props.buttonText).value : "";
+  });
+  const hasHeader = computed(() => {
+    return Boolean(parsedTitle.value || parsedSubtitle.value || parsedButtonText.value);
+  });
+  return {
+    parsedTitle,
+    parsedSubtitle,
+    parsedButtonText,
+    hasHeader
+  };
+};
 
 const useHeroSlider = (props) => {
   const parsedSlides = computed(() => {
     return props.slides.map((slide) => {
-      const title = slide.title ? parseShippingPhrase(slide.title).value : "";
-      const subtitle = slide.subtitle ? parseShippingPhrase(slide.subtitle).value : "";
-      const buttonText = slide.buttonText ? parseShippingPhrase(slide.buttonText).value : "";
       return {
         ...slide,
-        hasHeader: Boolean(title || subtitle || buttonText)
+        ...useBanner(slide)
       };
     });
   });
@@ -93,6 +265,108 @@ const useHeroSlider = (props) => {
   };
 };
 
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "Banner",
+  props: {
+    img: {},
+    alt: {},
+    mobileImg: {},
+    href: {},
+    title: {},
+    subtitle: {},
+    buttonLink: {},
+    buttonText: {},
+    headingTag: { default: "h3" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const {
+      hasHeader,
+      parsedTitle,
+      parsedSubtitle,
+      parsedButtonText
+    } = useBanner(props);
+    const __returned__ = { props, hasHeader, parsedTitle, parsedSubtitle, parsedButtonText };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+function _sfc_ssrRender$4(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<div${ssrRenderAttrs(mergeProps({
+    class: ["mx-auto overflow-x-hidden", $setup.hasHeader ? "grid grid-cols-1 md:grid-cols-2 items-center" : null]
+  }, _attrs))}>`);
+  ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.href ? "a-link" : "span"), {
+    href: $props.href,
+    class: $setup.hasHeader ? "basis-1/2 grow-0 md:order-last" : null
+  }, {
+    default: withCtx((_, _push2, _parent2, _scopeId) => {
+      if (_push2) {
+        ssrRenderSlot(_ctx.$slots, "picture", {}, null, _push2, _parent2, _scopeId);
+      } else {
+        return [
+          renderSlot(_ctx.$slots, "picture")
+        ];
+      }
+    }),
+    _: 3
+  }), _parent);
+  if ($setup.hasHeader) {
+    _push(`<div class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0">`);
+    if ($setup.parsedTitle) {
+      ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.headingTag), { class: "ui-title mt-1" }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedTitle)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedTitle), 1)
+            ];
+          }
+        }),
+        _: 1
+      }), _parent);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedSubtitle) {
+      _push(`<p class="text-lg mt-4 md:mt-6">${ssrInterpolate($setup.parsedSubtitle)}</p>`);
+    } else {
+      _push(`<!---->`);
+    }
+    if ($setup.parsedButtonText) {
+      ssrRenderVNode(_push, createVNode(resolveDynamicComponent($props.buttonLink ? "a-link" : "span"), {
+        href: $props.buttonLink,
+        class: "ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`${ssrInterpolate($setup.parsedButtonText)}`);
+          } else {
+            return [
+              createTextVNode(toDisplayString($setup.parsedButtonText), 1)
+            ];
+          }
+        }),
+        _: 1
+      }), _parent);
+    } else {
+      _push(`<!---->`);
+    }
+    _push(`</div>`);
+  } else {
+    _push(`<!---->`);
+  }
+  _push(`</div>`);
+}
+const _sfc_setup$4 = _sfc_main$4.setup;
+_sfc_main$4.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/components/Banner.vue");
+  return _sfc_setup$4 ? _sfc_setup$4(props, ctx) : void 0;
+};
+const Banner = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["ssrRender", _sfc_ssrRender$4]]);
+
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "HeroSlider",
   props: {
@@ -103,7 +377,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     __expose();
     const props = __props;
     const { parsedSlides } = useHeroSlider(props);
-    const __returned__ = { props, parsedSlides, Carousel, CarouselControl };
+    const __returned__ = { props, parsedSlides, Carousel, CarouselControl, Banner };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -175,38 +449,20 @@ 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"${_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) {
-            _push2(`<div class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0"${_scopeId}>`);
-            ssrRenderVNode(_push2, createVNode(resolveDynamicComponent(i === 0 ? "h2" : "h3"), { class: "ui-title mt-1" }, {
-              default: withCtx((_2, _push3, _parent3, _scopeId2) => {
-                if (_push3) {
-                  _push3(`${ssrInterpolate(slide.title)}`);
-                } else {
-                  return [
-                    createTextVNode(toDisplayString(slide.title), 1)
-                  ];
-                }
-              }),
-              _: 2
-            }), _parent2, _scopeId);
-            if (slide.subtitle) {
-              _push2(`<p class="text-lg mt-4 md:mt-6"${_scopeId}>${ssrInterpolate(slide.subtitle)}</p>`);
-            } else {
-              _push2(`<!---->`);
-            }
-            if (slide.buttonText) {
-              _push2(`<a${ssrRenderAttr("href", slide.buttonLink)} class="ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"${_scopeId}>${ssrInterpolate(slide.buttonText)}</a>`);
-            } else {
-              _push2(`<!---->`);
-            }
-            _push2(`</div>`);
-          } else {
-            _push2(`<!---->`);
-          }
-          _push2(`</div></li>`);
+          _push2(`<li class="shrink-0 basis-full"${_scopeId}>`);
+          _push2(ssrRenderComponent($setup["Banner"], mergeProps({ ...slide, headingTag: i === 0 ? "h2" : "h3" }, { class: "w-screen max-w-screen-2xl" }), {
+            picture: withCtx((_2, _push3, _parent3, _scopeId2) => {
+              if (_push3) {
+                ssrRenderSlot(_ctx.$slots, `picture-${i}`, {}, null, _push3, _parent3, _scopeId2);
+              } else {
+                return [
+                  renderSlot(_ctx.$slots, `picture-${i}`)
+                ];
+              }
+            }),
+            _: 2
+          }, _parent2, _scopeId));
+          _push2(`</li>`);
         });
         _push2(`<!--]-->`);
       } else {
@@ -216,36 +472,12 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               key: i,
               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]
-              }, [
-                createVNode("a", {
-                  href: slide.href,
-                  class: slide.hasHeader ? "basis-1/2 grow-0 md:order-last" : null
-                }, [
+              createVNode($setup["Banner"], mergeProps({ ...slide, headingTag: i === 0 ? "h2" : "h3" }, { class: "w-screen max-w-screen-2xl" }), {
+                picture: withCtx(() => [
                   renderSlot(_ctx.$slots, `picture-${i}`)
-                ], 10, ["href"]),
-                slide.hasHeader ? (openBlock(), createBlock("div", {
-                  key: 0,
-                  class: "basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0"
-                }, [
-                  (openBlock(), createBlock(resolveDynamicComponent(i === 0 ? "h2" : "h3"), { class: "ui-title mt-1" }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(slide.title), 1)
-                    ]),
-                    _: 2
-                  }, 1024)),
-                  slide.subtitle ? (openBlock(), createBlock("p", {
-                    key: 0,
-                    class: "text-lg mt-4 md:mt-6"
-                  }, toDisplayString(slide.subtitle), 1)) : createCommentVNode("", true),
-                  slide.buttonText ? (openBlock(), createBlock("a", {
-                    key: 1,
-                    href: slide.buttonLink,
-                    class: "ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
-                  }, toDisplayString(slide.buttonText), 9, ["href"])) : createCommentVNode("", true)
-                ])) : createCommentVNode("", true)
-              ], 2)
+                ]),
+                _: 2
+              }, 1040)
             ]);
           }), 128))
         ];
@@ -263,148 +495,19 @@ _sfc_main$3.setup = (props, ctx) => {
 };
 const HeroSlider = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["ssrRender", _sfc_ssrRender$3]]);
 
-const useProductShelf = (props) => {
-  const title = ref(props.title || "");
-  const titleLink = ref(props.titleLink || "");
-  const isFetching = ref(false);
-  let fetching = null;
-  const fetchError = ref(null);
-  const products = shallowReactive(props.products || []);
-  if (!props.products) {
-    isFetching.value = true;
-    fetching = (async () => {
-      let searchQuery = props.searchQuery || "";
-      let collection;
-      if (props.collectionId) {
-        try {
-          const { data } = await api.get(`collections/${props.collectionId}`);
-          collection = data;
-        } catch (err) {
-          console.error(err);
-          fetchError.value = err;
-        }
-        const productIds = collection?.products;
-        if (Array.isArray(productIds) && productIds.length) {
-          searchQuery += `&_id=${productIds.slice(0, 60).join(",")}`;
-        }
-        if (!title.value && title.value !== null && collection?.name) {
-          title.value = collection?.name;
-        }
-      }
-      const limit = props.limit || 24;
-      const offset = props.page ? (props.page - 1) * limit : 0;
-      let endpointQuery = `offset=${offset}&limit=${limit}`;
-      if (props.sort) {
-        endpointQuery += `&sort=${props.sort}`;
-      }
-      endpointQuery += searchQuery;
-      try {
-        const { data } = await api.get(`search/v1?${endpointQuery}`);
-        if (props.isShuffle) {
-          let m = data.result.filter((item) => {
-            return item.available && inStock(item);
-          }).length;
-          let t;
-          let i;
-          while (m) {
-            i = Math.floor(Math.random() * m--);
-            t = data.result[m];
-            data.result[m] = data.result[i];
-            data.result[i] = t;
-          }
-        }
-        data.result.forEach((item) => products.push(item));
-      } catch (err) {
-        console.error(err);
-        fetchError.value = err;
-      }
-      isFetching.value = false;
-    })();
-  }
-  return {
-    title,
-    titleLink,
-    isFetching,
-    fetching,
-    fetchError,
-    products
-  };
-};
-
-const usePageSections = async ({ routeContext }) => {
-  const sectionsContent = routeContext.cmsContent?.sections;
-  const sections = [];
-  if (sectionsContent) {
-    await Promise.all(sectionsContent.map(async ({ type, ...sectionContent }) => {
-      if (type === "product-shelf") {
-        const {
-          collection_id: collectionIdAndInfo,
-          headless: isHeadless,
-          shuffle: isShuffle,
-          ...rest
-        } = sectionContent;
-        let { sort, title } = sectionContent;
-        switch (sort) {
-          case "offers":
-            sort = "-price_discount";
-            break;
-          case "news":
-            sort = "-_id";
-            break;
-          case "lowest_price":
-            sort = "price";
-            break;
-          case "highest_price":
-            sort = "-price";
-            break;
-        }
-        let collectionId = null;
-        let searchQuery;
-        let titleLink;
-        if (collectionIdAndInfo) {
-          const [_id, resource, name, path] = collectionIdAndInfo.split(":");
-          collectionId = _id;
-          if (resource === "categories") {
-            searchQuery = `&categories._id=${_id}`;
-          } else if (resource === "brands") {
-            searchQuery = `&brands._id=${_id}`;
-          }
-          if (!title && title !== null && name) {
-            title = name;
-          }
-          titleLink = path;
-        }
-        const props = {
-          ...rest,
-          collectionId,
-          searchQuery,
-          sort,
-          title: isHeadless ? null : title,
-          titleLink,
-          isShuffle
-        };
-        const { fetching, products } = useProductShelf(props);
-        await fetching;
-        sections.push({
-          type,
-          props: {
-            ...rest,
-            collectionId,
-            searchQuery,
-            sort,
-            title: isHeadless ? null : title,
-            titleLink,
-            isShuffle,
-            products
-          }
-        });
-      }
-    }));
-  }
-  return {
-    sections
-  };
-};
+const $$Astro$4 = createAstro("https://ecom2-demo.web.app");
+const $$BannersGrid = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro$4, $$props, $$slots);
+  Astro2.self = $$BannersGrid;
+  const { banners } = Astro2.props;
+  return renderTemplate`${maybeRenderHead()}<section class="ui-section">
+  <ul class="flex flex-wrap lg:flex-nowrap gap-4">
+    ${banners.map((banner) => renderTemplate`<li class="lg:flex-1 [&_img]:w-full [&_img]:object-cover">
+        ${renderComponent($$result, "Banner", Banner, { ...banner }, { "picture": ($$result2) => renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { ...banner, "slot": "picture" })}` })}
+      </li>`)}
+  </ul>
+</section>`;
+}, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/components/BannersGrid.astro");
 
 const useProductCard = (props) => {
   const isFetching = ref(false);
@@ -911,7 +1014,7 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         }
         _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>`);
+          _push2(`<button class="uno-3suct9 ui-btn-sm ui-btn-primary"${_scopeId}><i class="i-plus-20-solid mr-0.5"${_scopeId}></i> ${ssrInterpolate("Adicionar ao carrinho")}</button>`);
         } else {
           _push2(`<!---->`);
         }
@@ -968,7 +1071,7 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
             ]),
             $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",
+              class: "uno-3suct9 ui-btn-sm ui-btn-primary",
               onClick: withModifiers(($event) => $setup.addProductToCart($setup.product), ["prevent"])
             }, [
               createVNode("i", { class: "i-plus-20-solid mr-0.5" }),
@@ -1023,11 +1126,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
   const _component_ALink = resolveComponent("ALink");
-  _push(`<section${ssrRenderAttrs(mergeProps({ class: "container mx-auto" }, _attrs))}>`);
+  _push(`<section${ssrRenderAttrs(mergeProps({ class: "ui-section" }, _attrs))}>`);
   if ($setup.title) {
-    _push(`<h2>`);
+    _push(`<div class="max-w-prose mx-auto text-center mb-2"><h2 class="ui-text-brand text-3xl">`);
     if ($setup.titleLink) {
-      _push(ssrRenderComponent(_component_ALink, { href: $setup.titleLink }, {
+      _push(ssrRenderComponent(_component_ALink, {
+        href: $setup.titleLink,
+        class: "ui-link"
+      }, {
         default: withCtx((_, _push2, _parent2, _scopeId) => {
           if (_push2) {
             _push2(`${ssrInterpolate($setup.title)}`);
@@ -1040,30 +1146,30 @@ function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $op
         _: 1
       }, _parent));
     } else {
-      _push(`<!--[-->${ssrInterpolate($setup.title)}<!--]-->`);
+      _push(`<span class="text-base-700">${ssrInterpolate($setup.title)}</span>`);
     }
-    _push(`</h2>`);
+    _push(`</h2></div>`);
   } else {
     _push(`<!---->`);
   }
   _push(ssrRenderComponent($setup["Carousel"], { class: "group/shelf" }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
-        _push2(`<div style="${ssrRenderStyle($setup.products.length > 2 ? null : { display: "none" })}" class="text-3xl lg:text-xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"${_scopeId}>`);
+        _push2(`<div style="${ssrRenderStyle($setup.products.length > 2 ? null : { display: "none" })}" class="text-3xl lg:text-2xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"${_scopeId}>`);
         _push2(ssrRenderComponent($setup["CarouselControl"], {
-          class: "!top-1/2 lg:-left-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
+          class: "!top-1/2 !-left-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
           "is-prev": ""
         }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "!top-1/2 lg:-right-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "!top-1/2 !-right-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" }, null, _parent2, _scopeId));
         _push2(`</div>`);
       } else {
         return [
-          withDirectives(createVNode("div", { class: "text-3xl lg:text-xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity" }, [
+          withDirectives(createVNode("div", { class: "text-3xl lg:text-2xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity" }, [
             createVNode($setup["CarouselControl"], {
-              class: "!top-1/2 lg:-left-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
+              class: "!top-1/2 !-left-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5",
               "is-prev": ""
             }),
-            createVNode($setup["CarouselControl"], { class: "!top-1/2 lg:-right-2 w-10 h-10 bg-transparent lg:bg-white/80 lg:hover:bg-primary/10 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" })
+            createVNode($setup["CarouselControl"], { class: "!top-1/2 !-right-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5" })
           ], 512), [
             [vShow, $setup.products.length > 2]
           ])
@@ -1115,6 +1221,8 @@ const $$Sections = createComponent(async ($$result, $$props, $$slots) => {
     switch (type) {
       case "product-shelf":
         return renderTemplate`${renderComponent($$result, "ProductShelf", ProductShelf, { ...props, "client:visible": true, "client:component-hydration": "visible", "client:component-path": "~/components/ProductShelf.vue", "client:component-export": "default" })}`;
+      case "banners-grid":
+        return renderTemplate`${renderComponent($$result, "BannersGrid", $$BannersGrid, { ...props })}`;
       default:
         return renderTemplate`<div${addAttribute(type, "data-section")}></div>`;
     }
@@ -1130,7 +1238,7 @@ const $$Home = createComponent(async ($$result, $$props, $$slots) => {
   const { heroSlider } = await usePageHero({ routeContext });
   const heroSlides = heroSlider.slides;
   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, "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 })}`}` })}`}
+  ${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, "BannerPictures", $$BannerPictures, { "slot": "picture-0", ...heroSlides[0], "index": 0 })}`}`, "picture-1": ($$result2) => renderTemplate`${heroSlides[1] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-1", ...heroSlides[1], "index": 1 })}`}`, "picture-2": ($$result2) => renderTemplate`${heroSlides[2] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-2", ...heroSlides[2], "index": 2 })}`}`, "picture-3": ($$result2) => renderTemplate`${heroSlides[3] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-3", ...heroSlides[3], "index": 3 })}`}`, "picture-4": ($$result2) => renderTemplate`${heroSlides[4] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-4", ...heroSlides[4], "index": 4 })}`}`, "picture-5": ($$result2) => renderTemplate`${heroSlides[5] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-5", ...heroSlides[5], "index": 5 })}`}`, "picture-6": ($$result2) => renderTemplate`${heroSlides[6] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-6", ...heroSlides[6], "index": 6 })}`}`, "picture-7": ($$result2) => renderTemplate`${heroSlides[7] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-7", ...heroSlides[7], "index": 7 })}`}`, "picture-8": ($$result2) => renderTemplate`${heroSlides[8] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-8", ...heroSlides[8], "index": 8 })}`}`, "picture-9": ($$result2) => renderTemplate`${heroSlides[9] && renderTemplate`${renderComponent($$result2, "BannerPictures", $$BannerPictures, { "slot": "picture-9", ...heroSlides[9], "index": 9 })}`}` })}`}
   ${renderComponent($$result, "Sections", $$Sections, {})}
 </main>`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/main/Home.astro");