cloudcommerce 0.9.0 → 0.10.0

package/packages/storefront/dist/server/chunks/pages/{all.b15cad2d.mjs → all.e51db7f0.mjs}

@@ -11,7 +11,7 @@ import 'magic-string';
 import 'node:stream';
 import { c as createAstro, a as createComponent, r as renderTemplate, b as addAttribute, d as renderComponent, u as unescapeHTML, F as Fragment, m as maybeRenderHead, s as spreadAttributes, e as renderSlot, f as renderHead } from '../astro.39f7f387.mjs';
 import api from '@cloudcommerce/api';
-import { reactive, computed, defineComponent, inject, useSSRContext, mergeProps, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, resolveComponent, withModifiers, Teleport, createTextVNode, toDisplayString, setBlockTracking } from 'vue';
+import { reactive, computed, shallowReactive, defineComponent, inject, useSSRContext, mergeProps, ref, watch, toRef, onMounted, onBeforeUnmount, provide, createVNode, resolveDynamicComponent, withCtx, renderSlot as renderSlot$1, withDirectives, vShow, openBlock, createBlock, createCommentVNode, Fragment as Fragment$1, renderList, resolveComponent, withModifiers, Teleport, createTextVNode, toDisplayString, setBlockTracking } from 'vue';
 import { ssrRenderAttrs, ssrRenderSlot, ssrRenderClass, ssrRenderVNode, ssrRenderComponent, ssrRenderStyle, ssrRenderList, ssrIncludeBooleanAttr, ssrRenderAttr, ssrRenderTeleport, ssrInterpolate } from 'vue/server-renderer';
 import { img, price, formatMoney, nickname, onPromotion } from '@ecomplus/utils';
 /* empty css                           */import { EventEmitter } from 'node:events';
@@ -336,9 +336,17 @@ const _getConfig = () => {
       const mergeConfig = JSON.parse(readFileSync(configFilepath), 'utf8');
       if (mergeConfig.storeId) {
         storeId = mergeConfig.storeId;
-        config.set({ storeId });
       }
-    } catch { /* */ }
+    } catch {
+      //
+    }
+    if (!storeId && false === true) {
+      storeId = 1011;
+      console.warn('> `storeId` is not set, using fallback 1011 for dev only\n');
+    }
+    if (storeId) {
+      config.set({ storeId });
+    }
   }
   const {
     lang,
@@ -389,7 +397,11 @@ const loadPageContext = async (Astro, {
   apiPrefetchEndpoints = globalThis.api_prefetch_endpoints
 } = {}) => {
   const startedAt = Date.now();
-  const urlPath = Astro.url.pathname;
+  let urlPath = Astro.url.pathname;
+  const isPreview = urlPath.startsWith("/~preview");
+  if (isPreview) {
+    urlPath = urlPath.replace("/~preview", "");
+  }
   const isHomepage = urlPath === "/";
   const config = getConfig();
   globalThis.storefront.settings = config.settings;
@@ -478,7 +490,8 @@ const loadPageContext = async (Astro, {
     apiResource,
     apiDoc,
     apiState,
-    getContent: config.cms
+    getContent: config.cms,
+    isPreview
   };
   emitter.emit("load", pageContext);
   return pageContext;
@@ -571,7 +584,8 @@ const $$BaseStateJson = createComponent(async ($$result, $$props, $$slots) => {
       currency,
       currencySymbol,
       domain,
-      settings
+      settings,
+      isPreview
     }
   } = Astro2.props;
   let inlineClientJS = `
@@ -609,6 +623,10 @@ window.storefront.context = ${JSON.stringify({
       timestamp: Date.now()
     })};`;
   }
+  if (isPreview) {
+    inlineClientJS += `
+window.isCMSPreview = true;`;
+  }
   const inlineJSONLd = JSON.stringify({
     "@context": "http://schema.org",
     "@type": "Organization",
@@ -1035,29 +1053,6 @@ const $$Base = createComponent(async ($$result, $$props, $$slots) => {
 ` })}`;
 }, "/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/layouts/Base.astro");
 
-const usePageLayout = async ({ pageContext }) => {
-  const { apiState, cms } = pageContext;
-  const {
-    header: cmsHeader,
-    service_links: cmsServiceLinks
-  } = await cms("layout");
-  const pitchBar = { slides: [] };
-  if (cmsHeader?.pitch_bar) {
-    pitchBar.slides = cmsHeader.pitch_bar;
-  }
-  const shopHeader = {
-    categories: apiState.categories || [],
-    menuCategorySlugs: cmsHeader.inline_menu_categories?.featured,
-    menuRandomCategories: cmsHeader.inline_menu_categories?.random,
-    isAlphabeticalSortSubmenu: cmsHeader.alphabetical_sort_submenu,
-    serviceLinks: cmsServiceLinks
-  };
-  return {
-    pitchBar,
-    shopHeader
-  };
-};
-
 const checkObjNotNull = (obj) => {
   return Object.values(obj).filter((val) => val).length;
 };
@@ -1137,10 +1132,24 @@ const parseShippingPhrase = (phrase) => {
   return parsePhrase(phrase, "calculate_shipping", "free_shipping_from_value");
 };
 
+const useCMSPreview = (fetchData) => {
+  const liveContent = shallowReactive({});
+  return { liveContent };
+};
+
+const parseLayoutContent = (layoutContent) => {
+  const pitchBar = { slides: [] };
+  if (layoutContent.header?.pitch_bar) {
+    pitchBar.slides = layoutContent.header.pitch_bar;
+  }
+  return pitchBar;
+};
 const usePitchBar = (props) => {
+  const { liveContent } = useCMSPreview();
   const parsedContents = computed(() => {
-    return props.slides.map(({ html }) => {
-      return parseShippingPhrase(html).value;
+    const slides = liveContent.layout ? parseLayoutContent(liveContent.layout).slides : props.slides;
+    return slides.map(({ html }) => {
+      return parseShippingPhrase(html).value.replace(/<\/?p>/g, "").replace(/&lt;(\/?d-md)&gt;/g, "<$1>");
     });
   });
   const countValidSlides = computed(() => {
@@ -1152,6 +1161,27 @@ const usePitchBar = (props) => {
   };
 };
 
+const usePageLayout = async ({ pageContext }) => {
+  const { apiState, cms } = pageContext;
+  const cmsLayout = await cms("layout");
+  const {
+    header: cmsHeader,
+    service_links: cmsServiceLinks
+  } = cmsLayout;
+  const pitchBar = parseLayoutContent(cmsLayout);
+  const shopHeader = {
+    categories: apiState.categories || [],
+    menuCategorySlugs: cmsHeader.inline_menu_categories?.featured,
+    menuRandomCategories: cmsHeader.inline_menu_categories?.random,
+    isAlphabeticalSortSubmenu: cmsHeader.alphabetical_sort_submenu,
+    serviceLinks: cmsServiceLinks
+  };
+  return {
+    pitchBar,
+    shopHeader
+  };
+};
+
 const carouselKey = Symbol("carousel");
 
 const _sfc_main$f = defineComponent({
@@ -1236,7 +1266,14 @@ const _sfc_main$e = defineComponent({
       }));
     };
     const calcNextWidth = (direction) => {
-      const nextSlideIndex = currentIndex.value + direction;
+      let nextSlideIndex = currentIndex.value + direction;
+      if (nextSlideIndex >= slidesWidth.value.length) {
+        nextSlideIndex = 0;
+        direction = -direction;
+      } else if (nextSlideIndex < 0) {
+        nextSlideIndex = slidesWidth.value.length - 1;
+        direction = -direction;
+      }
       const width = slidesWidth.value[nextSlideIndex]?.width || 0;
       if (!width) {
         return 0;
@@ -1265,18 +1302,6 @@ const _sfc_main$e = defineComponent({
       }
     };
     const changeSlide = (direction) => {
-      if (direction < 0) {
-        if (isBoundLeft.value) {
-          calcIndexCount();
-          currentIndex.value = indexCount.value - 1;
-          changeSlide(1);
-          return;
-        }
-      } else if (isBoundRight.value) {
-        currentIndex.value = 1;
-        changeSlide(-1);
-        return;
-      }
       const nextSlideWidth = calcNextWidth(direction);
       if (nextSlideWidth) {
         wrapper.value?.scrollBy({ left: nextSlideWidth, behavior: "smooth" });
@@ -2699,7 +2724,7 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
         _push2(ssrRenderComponent(_component_Fade, null, {
           default: withCtx((_, _push3, _parent3, _scopeId2) => {
             if (_push3) {
-              _push3(ssrRenderComponent($setup["MenuItems"], { class: "absolute -right-8 mt-2 w-56 rounded-md shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-base-100 focus:outline-none" }, {
+              _push3(ssrRenderComponent($setup["MenuItems"], { class: "absolute -right-8 mt-2 w-56 rounded-md shadow ring-1 ring-black/5 bg-white divide-y divide-base-100 focus:outline-none" }, {
                 default: withCtx((_2, _push4, _parent4, _scopeId3) => {
                   if (_push4) {
                     _push4(`<div class="p-3 text-base-600"${_scopeId3}>${ssrInterpolate(`${"Ol\xE1"} ${$setup.customerName || "Visitante"}`)} `);
@@ -3007,7 +3032,7 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
               }, _parent3, _scopeId2));
             } else {
               return [
-                createVNode($setup["MenuItems"], { class: "absolute -right-8 mt-2 w-56 rounded-md shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-base-100 focus:outline-none" }, {
+                createVNode($setup["MenuItems"], { class: "absolute -right-8 mt-2 w-56 rounded-md shadow ring-1 ring-black/5 bg-white divide-y divide-base-100 focus:outline-none" }, {
                   default: withCtx(() => [
                     createVNode("div", { class: "p-3 text-base-600" }, [
                       createTextVNode(toDisplayString(`${"Ol\xE1"} ${$setup.customerName || "Visitante"}`) + " ", 1),
@@ -3131,7 +3156,7 @@ function _sfc_ssrRender$3(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
           }, 1024),
           createVNode(_component_Fade, null, {
             default: withCtx(() => [
-              createVNode($setup["MenuItems"], { class: "absolute -right-8 mt-2 w-56 rounded-md shadow ring-1 ring-black ring-opacity-5 bg-white divide-y divide-base-100 focus:outline-none" }, {
+              createVNode($setup["MenuItems"], { class: "absolute -right-8 mt-2 w-56 rounded-md shadow ring-1 ring-black/5 bg-white divide-y divide-base-100 focus:outline-none" }, {
                 default: withCtx(() => [
                   createVNode("div", { class: "p-3 text-base-600" }, [
                     createTextVNode(toDisplayString(`${"Ol\xE1"} ${$setup.customerName || "Visitante"}`) + " ", 1),
@@ -3489,22 +3514,22 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(ssrRenderComponent($setup["Carousel"], { autoplay: $props.autoplay }, {
     controls: withCtx((_, _push2, _parent2, _scopeId) => {
       if (_push2) {
-        _push2(`<div style="${ssrRenderStyle($setup.parsedSlides.length > 1 ? null : { display: "none" })}" class="absolute top-1/2 -mt-8 w-screen xl:max-w-screen-xl xl:left-1/2 -ms-[640px] text-3xl leading-none text-base-400 opacity-60"${_scopeId}><div class="relative"${_scopeId}>`);
+        _push2(`<div style="${ssrRenderStyle($setup.parsedSlides.length > 1 ? null : { display: "none" })}" class="absolute z-10 bottom-5 flex justify-end items-center w-screen xl:max-w-screen-xl xl:left-1/2 -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}>`);
         _push2(ssrRenderComponent($setup["CarouselControl"], {
           direction: -1,
-          class: "p-3 rounded-full hover:bg-white/40 hover:text-primary"
+          class: "w-10 h-10 rounded-full hover:bg-primary/10"
         }, null, _parent2, _scopeId));
-        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "p-3 rounded-full hover:bg-white/40 hover:text-primary" }, null, _parent2, _scopeId));
+        _push2(ssrRenderComponent($setup["CarouselControl"], { class: "w-10 h-10 rounded-full hover:bg-primary/10" }, null, _parent2, _scopeId));
         _push2(`</div></div>`);
       } else {
         return [
-          withDirectives(createVNode("div", { class: "absolute top-1/2 -mt-8 w-screen xl:max-w-screen-xl xl:left-1/2 -ms-[640px] text-3xl leading-none text-base-400 opacity-60" }, [
-            createVNode("div", { class: "relative" }, [
+          withDirectives(createVNode("div", { class: "absolute z-10 bottom-5 flex justify-end items-center w-screen xl:max-w-screen-xl xl:left-1/2 -ms-[640px]" }, [
+            createVNode("div", { class: "relative w-20 h-10 rounded-full bg-white/50 text-primary shadow-sm ring-1 ring-black/5" }, [
               createVNode($setup["CarouselControl"], {
                 direction: -1,
-                class: "p-3 rounded-full hover:bg-white/40 hover:text-primary"
+                class: "w-10 h-10 rounded-full hover:bg-primary/10"
               }),
-              createVNode($setup["CarouselControl"], { class: "p-3 rounded-full hover:bg-white/40 hover:text-primary" })
+              createVNode($setup["CarouselControl"], { class: "w-10 h-10 rounded-full hover:bg-primary/10" })
             ])
           ], 512), [
             [vShow, $setup.parsedSlides.length > 1]
@@ -3936,7 +3961,6 @@ const $$Home = createComponent(async ($$result, $$props, $$slots) => {
   const { pageContext } = Astro2.props;
   const { heroSlider } = await useHomeMain({ pageContext });
   const heroSlides = heroSlider.slides;
-  console.log({ heroSlides });
   const products = (await api.get("products")).data.result;
   return renderTemplate`${maybeRenderHead($$result)}<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 })}`}` })}`}

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

@@ -14,7 +14,7 @@ import enableDestroy from 'server-destroy';
 import { defineComponent, computed, useSSRContext, mergeProps, h as h$1, createSSRApp } from 'vue';
 import { ssrRenderSlotInner, ssrRenderAttrs, ssrRenderSlot, renderToString } from 'vue/server-renderer';
 import { img, imgSizes, i18n, formatMoney } from '@ecomplus/utils';
-/* empty css                                  */import { _ as _export_sfc, a as _page0, b as _page1, c as _page2, d as _page3, e as _page4, f as _page5 } from './chunks/pages/all.b15cad2d.mjs';
+/* empty css                                  */import { _ as _export_sfc, a as _page0, b as _page1, c as _page2, d as _page3, e as _page4, f as _page5 } from './chunks/pages/all.e51db7f0.mjs';
 import 'mime';
 import 'cookie';
 import 'kleur/colors';
@@ -3072,10 +3072,10 @@ const _renderer1 = {
 	renderToStaticMarkup,
 };
 
-const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.16.6_astro@2.3.0_sharp@0.31.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 pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.16.6_astro@2.3.0_sharp@0.32.0/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 renderers = [Object.assign({"name":"astro:jsx","serverEntrypoint":"astro/jsx/server.js","jsxImportSource":"astro"}, { ssr: server_default }),Object.assign({"name":"@astrojs/vue","clientEntrypoint":"@astrojs/vue/client.js","serverEntrypoint":"@astrojs/vue/server.js"}, { ssr: _renderer1 }),];
 
-const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.16.6_astro@2.3.0_sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["/_astro/_...slug_.9a31c59e.css","/_astro/index.e56fc6b3.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["/_astro/_...slug_.9a31c59e.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"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":[],"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":[],"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":["/_astro/_...slug_.9a31c59e.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"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-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"pageMap":null,"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":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","~/components/PitchBar.vue":"_astro/PitchBar.1c993792.js","~/components/Prices.vue":"_astro/Prices.70885f17.js","@astrojs/vue/client.js":"_astro/client.4e825332.js","/astro/hoisted.js?q=0":"_astro/hoisted.56fa2eff.js","~/components/HeroSlider.vue":"_astro/HeroSlider.34436243.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.dc90f814.js","~/components/ShopHeader.vue":"_astro/ShopHeader.e901fad5.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.247497b8.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.e56fc6b3.css","/_astro/index.1eaf97c3.css","/_astro/server.1dabec03.css","/_astro/_...slug_.9a31c59e.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-e0d788d4.js","/_astro/Carousel.dfb3f26a.js","/_astro/HeroSlider.34436243.js","/_astro/PitchBar.1c993792.js","/_astro/Prices.70885f17.js","/_astro/ShopHeader.e901fad5.js","/_astro/_plugin-vue_export-helper.0c2b7f88.js","/_astro/client.4e825332.js","/_astro/firebase-app.247497b8.js","/_astro/format-money.f09b89ed.js","/_astro/hoisted.56fa2eff.js","/_astro/idle-callback.889bf0ea.js","/_astro/index.9018a8da.js","/_astro/modules-info.2a72e536.js","/_astro/preload-helper.101896b7.js","/_astro/runtime-dom.esm-bundler.1fd80976.js","/_astro/session-utm.ac492493.js","/_astro/workbox-window.prod.es5.dc90f814.js","/admin/config.json","/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 _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.16.6_astro@2.3.0_sharp@0.32.0/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["/_astro/_...slug_.48ea2ee1.css","/_astro/index.e56fc6b3.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["/_astro/_...slug_.48ea2ee1.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"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":[],"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":[],"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":["/_astro/_...slug_.48ea2ee1.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"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-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"pageMap":null,"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":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","~/components/PitchBar.vue":"_astro/PitchBar.8945ceb4.js","~/components/HeroSlider.vue":"_astro/HeroSlider.2c4563ee.js","~/components/Prices.vue":"_astro/Prices.bc136725.js","/astro/hoisted.js?q=0":"_astro/hoisted.56fa2eff.js","@astrojs/vue/client.js":"_astro/client.97e9e785.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/node_modules/tinacms/dist/rich-text/index.es.js":"_astro/index.es.28e34903.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/tina/__generated__/client.ts":"_astro/client.f447e2e8.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.dc90f814.js","~/components/ShopHeader.vue":"_astro/ShopHeader.5d83d6d5.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.2840bd36.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.1eaf97c3.css","/_astro/index.e56fc6b3.css","/_astro/server.1dabec03.css","/_astro/_...slug_.48ea2ee1.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-e0d788d4.js","/_astro/Carousel.06e8cee5.js","/_astro/HeroSlider.2c4563ee.js","/_astro/PitchBar.8945ceb4.js","/_astro/Prices.bc136725.js","/_astro/ShopHeader.5d83d6d5.js","/_astro/_commonjsHelpers.725317a4.js","/_astro/_plugin-vue_export-helper.d71c044e.js","/_astro/client.97e9e785.js","/_astro/client.f447e2e8.js","/_astro/firebase-app.2840bd36.js","/_astro/format-money.d54c1237.js","/_astro/hoisted.56fa2eff.js","/_astro/idle-callback.889bf0ea.js","/_astro/index.2899cbe4.js","/_astro/index.b12dff85.js","/_astro/index.es.28e34903.js","/_astro/modules-info.ea748f9d.js","/_astro/preload-helper.101896b7.js","/_astro/runtime-dom.esm-bundler.e9908a78.js","/_astro/server.browser.e1b1e312.js","/_astro/session-utm.ac492493.js","/_astro/workbox-window.prod.es5.dc90f814.js","/admin/index.html","/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","/admin/assets/Range.es-3e45690c.js","/admin/assets/SchemaReference.es-68e2a833.js","/admin/assets/brace-fold.es-f96db61f.js","/admin/assets/closebrackets.es-0488b839.js","/admin/assets/codemirror.es-15b9374a.js","/admin/assets/comment.es-d4bed417.js","/admin/assets/dialog.es-56aaee5b.js","/admin/assets/foldgutter.es-55067bee.js","/admin/assets/forEachState.es-1e367fb2.js","/admin/assets/hint.es-07ec11aa.js","/admin/assets/hint.es2-35fd7219.js","/admin/assets/index-64cd926d.css","/admin/assets/index-d5c6a1a9.js","/admin/assets/index-f1d880da.js","/admin/assets/info-addon.es-eded2c26.js","/admin/assets/info.es-93649208.js","/admin/assets/javascript.es-634a06b1.js","/admin/assets/jump-to-line.es-23d2d4a8.js","/admin/assets/jump.es-732b233e.js","/admin/assets/lint.es-240359bd.js","/admin/assets/lint.es2-df11292b.js","/admin/assets/lint.es3-aa543b52.js","/admin/assets/matchbrackets.es-f5e3ac04.js","/admin/assets/mode-indent.es-341daf63.js","/admin/assets/mode.es-c74239d3.js","/admin/assets/mode.es2-9319d2a9.js","/admin/assets/mode.es3-deb92d78.js","/admin/assets/search.es-143ba137.js","/admin/assets/searchcursor.es-6069a13e.js","/admin/assets/show-hint.es-ff4fde1d.js","/admin/assets/sublime.es-23f726a0.js","/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"]}), {
 	pageMap: pageMap,
 	renderers: renderers
 });

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -20,10 +20,13 @@
   "homepage": "https://github.com/ecomplus/cloud-commerce/tree/main/packages/storefront#readme",
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev --host",
+    "dev:cms": "tinacms dev -c \"astro dev\"",
+    "start": "tinacms build && astro dev --host",
     "build": "astro build",
     "build:static": "BUILD_OUTPUT=static astro build",
     "build:prod": "bash scripts/build-prod.sh",
+    "build:cms": "tinacms build",
+    "build:all": "concurrently \"npm run build:prod\" \"npm run build:cms\"",
     "preview": "astro preview",
     "astro": "astro",
     "prepare-monorepo": "bash scripts/prepare-monorepo.sh"
@@ -40,20 +43,25 @@
     "@headlessui/vue": "^1.7.13",
     "@iconify-json/fa6-brands": "^1.1.11",
     "@iconify-json/heroicons": "^1.1.10",
-    "@iconify-json/logos": "^1.1.24",
+    "@iconify-json/logos": "^1.1.25",
+    "@tinacms/cli": "^1.5.6",
     "@vite-pwa/astro": "^0.0.5",
-    "@vueuse/core": "10.0.2",
+    "@vueuse/core": "10.1.0",
     "astro": "2.3.0",
     "chroma-js": "^2.4.2",
+    "concurrently": "^8.0.1",
     "dotenv": "^16.0.3",
-    "firebase": "^9.19.1",
+    "firebase": "^9.20.0",
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
-    "semver": "^7.4.0",
-    "sharp": "^0.31.3",
-    "tailwindcss": "^3.3.1",
-    "unocss": "^0.51.4",
-    "vite": "^4.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "semver": "^7.5.0",
+    "sharp": "^0.32.0",
+    "tailwindcss": "^3.3.2",
+    "tinacms": "^1.4.6",
+    "unocss": "^0.51.8",
+    "vite": "^4.3.2",
     "vite-plugin-pwa": "^0.14.7",
     "vue": "^3.2.47"
   },

package/packages/storefront/scripts/prepare-monorepo.sh

@@ -2,9 +2,11 @@
 
 rm -rf content && ln -s ../../store/functions/ssr/content content
 rm -rf public && ln -s ../../store/functions/ssr/public public
+rm -rf src/content && ln -s ../../../store/functions/ssr/src/content src/content
 rm -rf src/pages && ln -s ../../../store/functions/ssr/src/pages src/pages
 rm -rf src/layouts && ln -s ../../../store/functions/ssr/src/layouts src/layouts
 rm -rf src/main && ln -s ../../../store/functions/ssr/src/main src/main
 rm -rf src/components && ln -s ../../../store/functions/ssr/src/components src/components
 rm -rf src/scripts && ln -s ../../../store/functions/ssr/src/scripts src/scripts
 rm -rf src/assets && ln -s ../../../store/functions/ssr/src/assets src/assets
+rm -rf tina && ln -s ../../store/functions/ssr/tina tina

package/packages/storefront/src/env.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="@astrojs/image/client" />
 /// <reference types="vite-plugin-pwa/client" />
 /// <reference types="vue/ref-macros" />

package/packages/storefront/src/lib/components/Carousel.vue

@@ -60,8 +60,15 @@ const calcSlidesWidth = () => {
     width: node.offsetWidth,
   }));
 };
-const calcNextWidth = (direction) => {
-  const nextSlideIndex = currentIndex.value + direction;
+const calcNextWidth = (direction: number) => {
+  let nextSlideIndex = currentIndex.value + direction;
+  if (nextSlideIndex >= slidesWidth.value.length) {
+    nextSlideIndex = 0;
+    direction = -direction;
+  } else if (nextSlideIndex < 0) {
+    nextSlideIndex = slidesWidth.value.length - 1;
+    direction = -direction;
+  }
   const width = slidesWidth.value[nextSlideIndex]?.width || 0;
   if (!width) {
     return 0;
@@ -93,18 +100,6 @@ const restartAutoplay = () => {
   }
 };
 const changeSlide = (direction: number) => {
-  if (direction < 0) {
-    if (isBoundLeft.value) {
-      calcIndexCount();
-      currentIndex.value = indexCount.value - 1;
-      changeSlide(1);
-      return;
-    }
-  } else if (isBoundRight.value) {
-    currentIndex.value = 1;
-    changeSlide(-1);
-    return;
-  }
   const nextSlideWidth = calcNextWidth(direction);
   if (nextSlideWidth) {
     wrapper.value?.scrollBy({ left: nextSlideWidth, behavior: 'smooth' });

package/packages/storefront/src/lib/components/Post.vue

@@ -0,0 +1,107 @@
+<template>
+  <main>
+    <h1>{{ data?.data?.post.title }}</h1>
+    <pre>
+        <!-- @ts-ignore -->
+        {{ JSON.stringify(data?.data?.post?.body, null, 2) }}
+      </pre>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import { client } from '../../../tina/__generated__/client'
+import type { PostQuery, Exact } from '../../../tina/__generated__/types'
+
+interface Data {
+  data: PostQuery
+  variables: Exact<{
+    relativePath: string
+  }>
+  query: string
+}
+
+function getTinaUpdates<T extends object>({
+  data,
+  query,
+  variables,
+  cb,
+}: {
+  query: string
+  variables: object
+  data: T
+  cb: (data: T) => void
+}) {
+  if (!import.meta.env.SSR) {
+    const id = btoa(JSON.stringify({ query: query }))
+    window.parent.postMessage(
+      // was getting errors in vue here. Is it OK to parse and stringify?
+      JSON.parse(JSON.stringify({ type: 'open', data, query, variables, id })),
+      window.location.origin
+    )
+    window.addEventListener('message', (event) => {
+      if (event.data.id === id) {
+        console.log('child: event received')
+        cb(event.data.data)
+      }
+    })
+  }
+}
+const closeTinaConnection = ({
+  query,
+  id,
+}: {
+  query: string
+  id?: string
+}) => {
+  if (!import.meta.env.SSR) {
+    window.parent.postMessage(
+      { type: 'close', id: id || btoa(JSON.stringify({ query: query })) },
+      window.location.origin
+    )
+  }
+}
+
+export default defineComponent<
+  {},
+  { fetchPost: () => Promise<void> },
+  { data: Data; loading: boolean }
+>({
+  name: 'Post',
+  data() {
+    return {
+      loading: false,
+      data: null as unknown as Data,
+      error: null,
+    }
+  },
+  created() {
+    // watch the params of the route to fetch the data again
+    this.fetchPost().then(() => {
+      getTinaUpdates({
+        cb: (newData) => {
+          this.$data.data = {
+            ...this.$data.data,
+            data: newData,
+          }
+        },
+        data: this.data.data,
+        query: this.data.query,
+        variables: this.data.variables,
+      })
+    })
+  },
+  unmounted() {
+    closeTinaConnection({ query: this.data.query })
+  },
+  methods: {
+    async fetchPost() {
+      this.loading = true
+      this.data = await client.queries.post({
+        relativePath: 'hello-tinacms.md',
+      })
+    },
+  },
+})
+</script>

package/packages/storefront/src/lib/composables/use-pitch-bar.ts

@@ -1,5 +1,7 @@
+import type { CmsLayout } from '@@sf/cms';
 import { computed } from 'vue';
 import { parseShippingPhrase } from '@@sf/state/modules-info';
+import { useCMSPreview } from '@@sf/state/use-cms-preview';
 
 export interface Props {
   slides: Array<{
@@ -9,10 +11,27 @@ export interface Props {
   }>;
 }
 
+const parseLayoutContent = (layoutContent: CmsLayout) => {
+  const pitchBar: Props = { slides: [] };
+  if (layoutContent.header?.pitch_bar) {
+    pitchBar.slides = layoutContent.header.pitch_bar;
+  }
+  return pitchBar;
+};
+
 const usePitchBar = (props: Props) => {
+  const { liveContent } = useCMSPreview(async (tinaClient) => {
+    return tinaClient.queries.layout({ relativePath: 'layout.json' });
+  });
   const parsedContents = computed(() => {
-    return props.slides.map(({ html }) => {
-      return parseShippingPhrase(html).value;
+    const slides = liveContent.layout
+      // @ts-ignore
+      ? parseLayoutContent(liveContent.layout).slides
+      : props.slides;
+    return slides.map(({ html }) => {
+      return parseShippingPhrase(html).value
+        .replace(/<\/?p>/g, '')
+        .replace(/&lt;(\/?d-md)&gt;/g, '<$1>');
     });
   });
   const countValidSlides = computed(() => {
@@ -25,3 +44,8 @@ const usePitchBar = (props: Props) => {
 };
 
 export default usePitchBar;
+
+export {
+  parseLayoutContent,
+  usePitchBar,
+};

package/packages/storefront/src/lib/layouts/BaseStateJson.astro

@@ -17,6 +17,7 @@ const {
     currencySymbol,
     domain,
     settings,
+    isPreview,
   },
 } = Astro.props as Props;
 
@@ -56,6 +57,10 @@ window.storefront.context = ${JSON.stringify({
   timestamp: Date.now(),
 })};`;
 }
+if (isPreview) {
+  inlineClientJS += `
+window.isCMSPreview = true;`;
+}
 
 const inlineJSONLd = JSON.stringify({
   '@context': 'http://schema.org',

package/packages/storefront/src/lib/layouts/use-page-layout.ts

@@ -1,7 +1,7 @@
 import type { PageContext } from '@@sf/ssr-context';
 import type { CmsLayout } from '@@sf/cms';
-import type { Props as PitchBarProps } from '@@sf/composables/use-pitch-bar';
 import type { Props as UseShopHeaderProps } from '@@sf/composables/use-shop-header';
+import { parseLayoutContent } from '@@sf/composables/use-pitch-bar';
 
 type ShopHeaderProps = Omit<UseShopHeaderProps, 'header'> & {
   serviceLinks?: CmsLayout['service_links'],
@@ -13,14 +13,12 @@ export interface Props {
 
 const usePageLayout = async ({ pageContext }: Props) => {
   const { apiState, cms } = pageContext;
+  const cmsLayout = await cms('layout');
   const {
     header: cmsHeader,
     service_links: cmsServiceLinks,
-  } = await cms('layout');
-  const pitchBar: PitchBarProps = { slides: [] };
-  if (cmsHeader?.pitch_bar) {
-    pitchBar.slides = cmsHeader.pitch_bar;
-  }
+  } = cmsLayout;
+  const pitchBar = parseLayoutContent(cmsLayout);
   const shopHeader: ShopHeaderProps = {
     categories: apiState.categories || [],
     menuCategorySlugs: cmsHeader.inline_menu_categories?.featured,
@@ -38,4 +36,4 @@ export default usePageLayout;
 
 export { usePageLayout };
 
-export type { PitchBarProps, ShopHeaderProps };
+export type { ShopHeaderProps };