cloudcommerce 0.2.1 → 0.2.3

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -25,11 +25,11 @@
     "prepare-monorepo": "sh scripts/prepare-monorepo.sh"
   },
   "dependencies": {
-    "@astrojs/image": "^0.12.1",
-    "@astrojs/node": "^4.0.0",
-    "@astrojs/partytown": "^1.0.2",
+    "@astrojs/image": "^0.13.0",
+    "@astrojs/node": "^5.0.1",
+    "@astrojs/partytown": "^1.0.3",
     "@astrojs/prefetch": "^0.1.1",
-    "@astrojs/vue": "^1.2.2",
+    "@astrojs/vue": "^2.0.0",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@cloudcommerce/i18n": "workspace:*",
@@ -40,18 +40,18 @@
     "@iconify-json/heroicons": "^1.1.8",
     "@iconify-json/logos": "^1.1.22",
     "@vite-pwa/astro": "^0.0.1",
-    "@vueuse/core": "^9.10.0",
-    "astro": "^1.9.2",
+    "@vueuse/core": "^9.11.1",
+    "astro": "^2.0.2",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
-    "firebase": "^9.15.0",
+    "firebase": "^9.16.0",
     "image-size": "^1.0.2",
     "lodash": "^4.17.21",
     "semver": "^7.3.8",
     "sharp": "^0.31.3",
     "tailwindcss": "^3.2.4",
     "unocss": "^0.48.4",
-    "vite": "^3.2.5",
+    "vite": "^4.0.4",
     "vite-plugin-pwa": "^0.14.1",
     "vue": "^3.2.45"
   },

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

@@ -249,6 +249,7 @@ provide(carouselKey, {
   position: absolute;
   top: 0;
   bottom: 0;
+  z-index: 1;
 }
 [data-carousel-control=previous] {
   left: 0;

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

@@ -21,7 +21,7 @@ const { changeSlide } = inject(carouselKey);
   >
     <slot>
       <i
-        class="mb-0 z-10"
+        class="m-0"
         :class="direction > 0 ? 'i-chevron-right' : 'i-chevron-left'"
       ></i>
     </slot>

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { parseShippingPhrase } from '@@sf/state/modules-info';
 import Carousel from '@@sf/components/Carousel.vue';
 import CarouselControl from '@@sf/components/CarouselControl.vue';
 
@@ -10,27 +12,42 @@ export interface Props {
   }>;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const parsedContents = computed(() => {
+  return props.slides.map(({ html }) => {
+    return parseShippingPhrase(html).value;
+  });
+});
+const countValidSlides = computed(() => {
+  return parsedContents.value.filter((html) => html).length;
+});
 </script>
 
 <template>
   <div data-pitch-bar class="bg-base-100">
     <div class="container md:w-2/3 mx-auto px-3 py-1">
-      <Carousel :autoplay="7000">
-        <li v-for="({ href, target, html }, i) in slides" :key="i">
+      <Carousel :autoplay="countValidSlides > 1 ? 7000 : null">
+        <li v-for="(slide, i) in slides" :key="i">
           <component
-            :is="href ? 'ALink' : 'span'"
-            :href="href"
-            :target="target"
-            :class="href ? 'hover:underline' : null"
+            :is="slide.href ? 'ALink' : 'span'"
+            :href="slide.href"
+            :target="slide.target"
+            :class="slide.href ? 'hover:underline' : null"
           >
-            <slot name="slide">
-              <span v-html="html" class="prose text-sm text-base-800"></span>
+            <slot name="slide" v-bind="{ slide, i, parsedContents }">
+              <span
+                v-if="parsedContents[i]"
+                v-html="parsedContents[i]"
+                class="prose text-sm text-base-800"
+              ></span>
             </slot>
           </component>
         </li>
         <template #controls>
-          <div class="text-xl leading-none text-base-400">
+          <div
+            v-show="countValidSlides > 1"
+            class="text-xl leading-none text-base-400"
+          >
             <CarouselControl
               :direction="-1"
               class="pr-2 bg-base-100 hover:text-base-700"

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

@@ -68,12 +68,12 @@ const componentVariant = useComponentVariant(props);
         <slot name="sale-post" />
       </strong>
     </slot>
-    <slot
-      v-if="cashbackValue"
-      name="cashback"
-      v-bind="{ salePrice, cashbackValue, cashbackPercentage }"
-    >
-      <Fade slide="down">
+    <Fade slide="down">
+      <slot
+        v-if="cashbackValue"
+        name="cashback"
+        v-bind="{ salePrice, cashbackValue, cashbackPercentage }"
+      >
         <div v-if="hasCashback" data-prices-cashback class="relative z-10">
           <span :data-tooltip="$t.i19get$1back
             .replace('$1', $percentage(cashbackPercentage))">
@@ -93,14 +93,14 @@ const componentVariant = useComponentVariant(props);
             </slot>
           </span>
         </div>
-      </Fade>
-    </slot>
-    <slot
-      v-if="installmentValue"
-      name="installment"
-      v-bind="{ salePrice, installmentValue, installmentsNumber, monthlyInterest }"
-    >
-      <Fade slide="down">
+      </slot>
+    </Fade>
+    <Fade slide="down">
+      <slot
+        v-if="installmentValue"
+        name="installment"
+        v-bind="{ salePrice, installmentValue, installmentsNumber, monthlyInterest }"
+      >
         <div v-if="hasPriceOptions" data-prices-installment>
           <slot name="installment-pre">
             <small v-if="isLiteral">
@@ -123,14 +123,14 @@ const componentVariant = useComponentVariant(props);
             </small>
           </slot>
         </div>
-      </Fade>
-    </slot>
-    <slot
-      v-if="priceWithDiscount < salePrice"
-      name="discount"
-      v-bind="{ salePrice, priceWithDiscount, discountLabel }"
-    >
-      <Fade slide="down">
+      </slot>
+    </Fade>
+    <Fade slide="down">
+      <slot
+        v-if="priceWithDiscount < salePrice"
+        name="discount"
+        v-bind="{ salePrice, priceWithDiscount, discountLabel }"
+      >
         <div v-if="hasPriceOptions" data-prices-discount>
           <slot name="discount-pre">
             <small v-if="!discountLabel">
@@ -149,8 +149,8 @@ const componentVariant = useComponentVariant(props);
             </small>
           </slot>
         </div>
-      </Fade>
-    </slot>
+      </slot>
+    </Fade>
   </div>
 </template>
 

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { ImgHTMLAttributes } from 'vue';
+import { ref, toRefs } from 'vue';
+
+export interface Props {
+  logo?: ImgHTMLAttributes;
+  logoAltHeading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  logoAltHeading: 'h2',
+});
+const { logo } = toRefs(props);
+const fade = ref(false);
+setTimeout(() => {
+  fade.value = true;
+}, 2000);
+</script>
+
+<template>
+  <header
+    class="header bg-opacity-90 backdrop-blur-md
+    sticky top-0 z-50 py-1 sm:py-2"
+    data-sticky-header
+  >
+    <div class="container">
+      <div class="grid grid-flow-col auto-cols-max justify-between items-center">
+        <slot name="aside">
+          <div class="header__aside md:hidden">
+            <div class="i-bars-3-bottom-left"></div>
+          </div>
+        </slot>
+        <slot name="logo" v-bind="{ logo }">
+          <a v-if="logo" href="/">
+            <component :is="(logo.alt && logoAltHeading) || 'span'" class="m-0">
+              <img v-bind="logo" />
+            </component>
+          </a>
+        </slot>
+        <div class="flex items-center">
+          <slot name="actions">
+            <slot name="nav">
+              <Fade speed="slow" slide="down">
+                <div v-if="fade" class="h-20 bg-primary w-20">
+                  Fadiiing
+                </div>
+              </Fade>
+            </slot>
+            <slot name="search" />
+            <slot name="buttons" />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>

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

@@ -20,10 +20,16 @@ const cmsCustomCode = cms('code') as CmsCode;
   <BaseStateJson pageContext={pageContext} />
   {cmsCustomCode.css && <style>{cmsCustomCode.css}</style>}
   {cmsCustomCode.html_head && <Fragment set:html={cmsCustomCode.html_head} />}
+  <slot name="base-head-scripts">
+    <script src="../scripts/modules-info-preset"></script>
+  </slot>
   <slot name="before-head-end" />
 </head>
 <BaseBody pageContext={pageContext}>
   <slot />
   {cmsCustomCode.html_body && <Fragment set:html={cmsCustomCode.html_body} />}
+  <slot name="base-body-scripts">
+    <script src="../scripts/session-utm"></script>
+  </slot>
   <slot name="before-body-end" />
 </BaseBody>

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

@@ -13,6 +13,5 @@ export interface Props {
 
 <body>
   <slot />
-  <script src="../scripts/session-utm"></script>
   <slot name="before-body-end" />
 </body>

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

@@ -3,23 +3,25 @@ import type { Categories } from '@cloudcommerce/api/types';
 import type CmsHeader from '@@sf/types/cms-header';
 import type CmsContacts from '@@sf/types/cms-contacts';
 import type { PageContext } from '@@sf/ssr-context';
-import { i19buyOnWhatsApp } from '@@i18n';
-import { getImage } from '@@sf/ssr/image';
+import Picture from '@@sf/ssr/Picture.astro';
 import PitchBar, { Props as PitchBarProps } from '@@sf/components/PitchBar.vue';
+import StickyHeader from '@@sf/components/StickyHeader.vue';
 
 export interface Props {
   pageContext: PageContext;
+  logoHeading?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | null;
 }
 
 const {
   pageContext: {
+    isHomepage,
     apiState,
     settings,
     cms,
   },
 } = Astro.props as Props;
 const header = cms('header') as CmsHeader &
-  { marketing_stripe?: { text: string, link: string } };
+  { marketing_stripe?: { text: string, link: string }, logo?: string };
 const pitchBar: PitchBarProps = { slides: [] };
 if (header.pitch_bar) {
   pitchBar.slides = header.pitch_bar;
@@ -29,10 +31,29 @@ if (header.pitch_bar) {
     html: header.marketing_stripe.text,
   }];
 }
+const logoSrc = header.logo || settings.logo;
+const LogoHeading = Astro.props.logoHeading || (isHomepage ? 'h1' : 'h2');
 ---
 
 <Fragment>
   <slot name="pitch-bar">
     {pitchBar.slides.length && <PitchBar {...pitchBar} client:idle />}
   </slot>
+  <slot name="sticky-header">
+    <StickyHeader client:load>
+      <Fragment slot="logo">
+        <slot name="logo">
+          <LogoHeading>
+            <Picture
+              src={logoSrc}
+              alt={settings.name}
+              widths={[300]}
+              sizes="150px"
+              fetchpriority="high"
+            />
+          </LogoHeading>
+        </slot>
+      </Fragment>
+    </StickyHeader>
+  </slot>
 </Fragment>

package/packages/storefront/src/lib/scripts/modules-info-preset.ts

@@ -0,0 +1,60 @@
+type ModulesInfoPreset = typeof window.storefront.modulesInfoPreset;
+
+const checkObjNotNull = (obj: { [k: string]: any }) => {
+  return Object.values(obj).filter((val) => val).length;
+};
+
+const getModulesInfoPreset = (settingsModules = globalThis.storefront.settings.modules) => {
+  const modulesInfoPreset: ModulesInfoPreset = {};
+  if (settingsModules) {
+    const settingsPayments = settingsModules.list_payments;
+    if (settingsPayments) {
+      const settingsDiscount = settingsPayments.discount_option;
+      if (settingsDiscount && checkObjNotNull(settingsDiscount)) {
+        modulesInfoPreset.list_payments = { discount_option: settingsDiscount };
+      }
+
+      const settingsInstallments = settingsPayments.installments_option;
+      if (settingsInstallments?.max_number) {
+        if (!modulesInfoPreset.list_payments) modulesInfoPreset.list_payments = {};
+        modulesInfoPreset.list_payments.installments_option = settingsInstallments as
+          { max_number: number };
+      }
+
+      const settingsPointsPrograms = settingsPayments.loyalty_points_programs || {};
+      if (!Object.keys(settingsPointsPrograms).length) {
+        const pointsProgram = { ...settingsPayments.loyalty_points_program };
+        if (pointsProgram?.id && pointsProgram.ratio) {
+          const { id } = pointsProgram;
+          delete pointsProgram.id;
+          settingsPointsPrograms[id] = pointsProgram as { ratio: number };
+        }
+      }
+      if (Object.keys(settingsPointsPrograms).length) {
+        if (!modulesInfoPreset.list_payments) modulesInfoPreset.list_payments = {};
+        modulesInfoPreset.list_payments.loyalty_points_programs = settingsPointsPrograms;
+      }
+    }
+
+    const settingsShipping = settingsModules.calculate_shipping;
+    if (settingsShipping && settingsShipping.free_shipping_from_value) {
+      modulesInfoPreset.calculate_shipping = settingsShipping;
+    }
+  }
+  return modulesInfoPreset;
+};
+
+const loadingGlobalInfoPreset: Promise<ModulesInfoPreset> = new Promise((resolve) => {
+  if (import.meta.env.SSR) {
+    global.storefront.onLoad(() => {
+      resolve(getModulesInfoPreset());
+    });
+  } else {
+    window.storefront.modulesInfoPreset = getModulesInfoPreset();
+    resolve(window.storefront.modulesInfoPreset);
+  }
+});
+
+export default loadingGlobalInfoPreset;
+
+export { getModulesInfoPreset, loadingGlobalInfoPreset };

package/packages/storefront/src/lib/ssr/Picture.astro

@@ -0,0 +1,18 @@
+---
+import { Picture } from '@astrojs/image/components';
+import { getAspectRatio } from '@@sf/ssr/image';
+
+type PictureProps = Parameters<typeof Picture>[0];
+
+export type Props = Omit<PictureProps, 'aspectRatio'> & {
+  aspectRatio?: PictureProps['aspectRatio'],
+  fetchpriority: 'high' | 'low' | 'auto',
+};
+
+const props = Astro.props as PictureProps;
+if (!props.aspectRatio && typeof props.src === 'string') {
+  props.aspectRatio = getAspectRatio(props.src);
+}
+---
+
+<Picture {...props} />

package/packages/storefront/src/lib/ssr/image.ts

@@ -15,6 +15,16 @@ const tryImageSize = (src: string) => {
   return dimensions;
 };
 
+const getAspectRatio = (src: string | { width?: number, height?: number }) => {
+  if (typeof src === 'string') {
+    src = tryImageSize(src);
+  }
+  if (src.width) {
+    return src.height ? src.width / src.height : 1;
+  }
+  return 0;
+};
+
 type TransformOptions = Omit<Parameters<typeof _getImage>[0], 'alt'> & {
   isLowResolution?: boolean,
   alt?: string,
@@ -38,7 +48,7 @@ const getImage = async (options: TransformOptions) => {
       if (!options.width) {
         options.width = width;
       }
-      options.aspectRatio = height ? width / height : 1;
+      options.aspectRatio = getAspectRatio({ width, height });
     }
   }
   const imgAttrs = await _getImage({ alt: '', ...options });
@@ -55,4 +65,4 @@ const getImage = async (options: TransformOptions) => {
 
 export default getImage;
 
-export { tryImageSize, getImage };
+export { tryImageSize, getAspectRatio, getImage };

package/packages/storefront/src/lib/ssr-context.ts

@@ -2,6 +2,7 @@ import type { AstroGlobal } from 'astro';
 import type { BaseConfig } from '@cloudcommerce/config';
 import type { CategoriesList, BrandsList } from '@cloudcommerce/api/types';
 import type CmsSettings from './types/cms-settings';
+import { EventEmitter } from 'node:events';
 import api, { ApiError, ApiEndpoint } from '@cloudcommerce/api';
 import _getConfig from '../../storefront.config.mjs';
 
@@ -21,19 +22,28 @@ type StorefrontConfig = {
     ? Array<string> : Record<string, any>,
 };
 
+const emitter = new EventEmitter();
 const getConfig: () => StorefrontConfig = _getConfig;
 
 declare global {
   // eslint-disable-next-line
   var api_prefetch_endpoints: ApiEndpoint[];
   // eslint-disable-next-line
-  var storefront: { settings: Partial<CmsSettings> };
+  var storefront: {
+    settings: Partial<CmsSettings>,
+    onLoad: (callback: (...args: any[]) => void) => void,
+  };
 }
 if (!globalThis.api_prefetch_endpoints) {
   globalThis.api_prefetch_endpoints = ['categories'];
 }
 if (!globalThis.storefront) {
-  globalThis.storefront = { settings: {} };
+  globalThis.storefront = {
+    settings: {},
+    onLoad(callback: (...args: any[]) => void) {
+      emitter.on('load', callback);
+    },
+  };
 }
 
 type ApiPrefetchEndpoints = Array<ApiEndpoint>;
@@ -56,6 +66,7 @@ const loadPageContext = async (Astro: AstroGlobal, {
 } = {}) => {
   const startedAt = Date.now();
   const urlPath = Astro.url.pathname;
+  const isHomepage = urlPath === '/';
   const { slug } = Astro.params;
   const config = getConfig();
   globalThis.storefront.settings = config.settings;
@@ -118,18 +129,21 @@ const loadPageContext = async (Astro: AstroGlobal, {
   Astro.response.headers.set('X-Load-Took', String(Date.now() - startedAt));
   if (urlPath === '/fallback') {
     setResponseCache(Astro, 3600, 86400);
-  } else if (urlPath === '/') {
+  } else if (isHomepage) {
     setResponseCache(Astro, 180, 300);
   } else {
     setResponseCache(Astro, 120, 300);
   }
-  return {
+  const pageContext = {
     ...config,
+    isHomepage,
     cmsContent,
     apiResource,
     apiDoc,
     apiState,
   };
+  emitter.emit('load', pageContext);
+  return pageContext;
 };
 
 export default loadPageContext;

package/packages/storefront/src/lib/state/modules-info.ts

@@ -3,9 +3,11 @@ import type {
   CalculateShippingResponse,
   ApplyDiscountResponse,
 } from '@cloudcommerce/types';
-import { reactive } from 'vue';
+import { reactive, computed } from 'vue';
+import { formatMoney } from '@ecomplus/utils';
+import loadingGlobalInfoPreset from '@@sf/scripts/modules-info-preset';
+import utm from '@@sf/scripts/session-utm';
 import afetch from '../../helpers/afetch';
-import utm from '../scripts/session-utm';
 
 const emptyInfo = {
   list_payments: {},
@@ -25,31 +27,28 @@ const modulesInfo = reactive<{
     available_extra_discount?: ApplyDiscountResponse['available_extra_discount'],
   },
 }>(emptyInfo);
+loadingGlobalInfoPreset.then((modulesInfoPreset) => {
+  Object.assign(modulesInfo, modulesInfoPreset);
+});
 
 if (!import.meta.env.SSR) {
   const storageKey = 'MODULES_INFO';
   const sessionJson = sessionStorage.getItem(storageKey);
-  let persistedValue;
   if (sessionJson) {
     try {
-      persistedValue = JSON.parse(sessionJson);
-      if (persistedValue.__timestamp < Date.now() - 1000 * 60 * 5) {
-        persistedValue = null;
+      const persistedValue = JSON.parse(sessionJson);
+      if (persistedValue.__timestamp >= Date.now() - 1000 * 60 * 5) {
+        delete persistedValue.__timestamp;
+        Object.assign(modulesInfo, persistedValue);
+      } else {
         sessionStorage.removeItem(storageKey);
       }
-      delete persistedValue.__timestamp;
     } catch (e) {
       sessionStorage.removeItem(storageKey);
     }
   }
 
-  if (persistedValue?.list_payments) {
-    Object.assign(modulesInfo, persistedValue);
-  } else {
-    const modulesInfoPreset = window.storefront?.modulesInfoPreset;
-    if (modulesInfoPreset) {
-      Object.assign(modulesInfo, modulesInfoPreset);
-    }
+  const fetchInfo = () => {
     const modulesToFetch: { modName: string, reqOptions?: Record<string, any> }[] = [];
     ['list_payments', 'calculate_shipping'].forEach((modName) => {
       if (!Object.keys(modulesInfo[modName]).length) {
@@ -140,7 +139,38 @@ if (!import.meta.env.SSR) {
         })
         .catch(console.error);
     });
+  };
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(fetchInfo);
+  } else {
+    setTimeout(fetchInfo, 300);
   }
 }
 
 export default modulesInfo;
+
+const parsePhrase = <T extends keyof typeof modulesInfo>(
+  phrase: string,
+  modName: T,
+  varName: string & keyof typeof modulesInfo[T],
+  formatValue: (x: any) => string = formatMoney,
+) => {
+  return computed(() => {
+    const searchString = `{{${varName}}}`;
+    const index = phrase.indexOf(searchString);
+    if (index > -1) {
+      const fieldValue = modulesInfo[modName][varName];
+      if (fieldValue) {
+        const replacement = formatValue(fieldValue);
+        return phrase.substring(0, index) + replacement
+          + phrase.substring(index + searchString.length);
+      }
+      return '';
+    }
+    return phrase;
+  });
+};
+
+export const parseShippingPhrase = (phrase: string) => {
+  return parsePhrase(phrase, 'calculate_shipping', 'free_shipping_from_value');
+};

package/packages/storefront/src/lib/types/cms-settings.d.ts

@@ -1,6 +1,7 @@
 import { CmsSettings as _CmsSettings } from '@cloudcommerce/types';
 
-type CmsSettings = _CmsSettings & typeof import('content/settings.json');
+type CmsSettings = _CmsSettings &
+  Omit<typeof import('content/settings.json'), keyof _CmsSettings>;
 
 export default CmsSettings;
 

package/packages/storefront/storefront.config.mjs

@@ -1,3 +1,5 @@
+import { readFileSync } from 'node:fs';
+import { join as joinPath } from 'node:path';
 import config from '@cloudcommerce/config';
 import getCMS from './config/storefront.cms.mjs';
 
@@ -7,14 +9,6 @@ export default () => {
     config.set({ storeId: Number(VITE_ECOM_STORE_ID) });
   }
 
-  const {
-    storeId,
-    lang,
-    countryCode,
-    currency,
-    currencySymbol,
-  } = config.get();
-
   const {
     domain,
     primaryColor,
@@ -24,6 +18,24 @@ export default () => {
   } = getCMS();
   config.set({ cmsSettings: settings });
 
+  let { storeId } = config.get();
+  if (!storeId) {
+    const configFilepath = joinPath(process.cwd(), 'config.json');
+    try {
+      const mergeConfig = JSON.parse(readFileSync(configFilepath), 'utf8');
+      if (mergeConfig.storeId) {
+        storeId = mergeConfig.storeId;
+        config.set({ storeId });
+      }
+    } catch { /* */ }
+  }
+  const {
+    lang,
+    countryCode,
+    currency,
+    currencySymbol,
+  } = config.get();
+
   return {
     storeId,
     lang,