cloudcommerce 2.5.1 → 2.6.1

package/packages/storefront/src/lib/components/globals/Skeleton.vue

@@ -4,10 +4,13 @@ import { computed } from 'vue';
 export interface Props {
   isBold?: boolean;
   isLarge?: boolean;
+  numRows?: number;
 }
 
-const props = defineProps<Props>();
-const rowClassName = 'bg-gray-200 rounded-md dark:bg-gray-700';
+const props = withDefaults(defineProps<Props>(), {
+  numRows: 6,
+});
+const rowClassName = 'bg-base-200 rounded-md';
 const firstRowClassName = computed(() => {
   return `${rowClassName} ${(props.isBold ? 'h-8 mb-6' : 'h-2.5 mb-4')}`;
 });
@@ -19,11 +22,26 @@ const nextRowsClassName = computed(() => {
 <template>
   <div role="status" class="animate-pulse" :class="isLarge ? 'max-w-4xl' : 'max-w-sm'">
     <div :class="[firstRowClassName, isLarge ? 'w-96' : 'w-48']"></div>
-    <div :class="[nextRowsClassName, isLarge ? 'max-w-[680px]' : 'max-w-[340px]']"></div>
-    <div :class="nextRowsClassName"></div>
-    <div :class="[nextRowsClassName, isLarge ? 'max-w-[660px]' : 'max-w-[330px]']"></div>
-    <div :class="[nextRowsClassName, isLarge ? 'max-w-[600px]' : 'max-w-[300px]']"></div>
-    <div :class="[nextRowsClassName, isLarge ? 'max-w-[720px]' : 'max-w-[360px]']"></div>
+    <div
+      v-if="numRows > 1"
+      :class="[nextRowsClassName, isLarge ? 'max-w-[680px]' : 'max-w-[340px]']"
+    ></div>
+    <div
+      v-if="numRows > 2"
+      :class="nextRowsClassName"
+    ></div>
+    <div
+      v-if="numRows > 3"
+      :class="[nextRowsClassName, isLarge ? 'max-w-[660px]' : 'max-w-[330px]']"
+    ></div>
+    <div
+      v-if="numRows > 4"
+      :class="[nextRowsClassName, isLarge ? 'max-w-[600px]' : 'max-w-[300px]']"
+    ></div>
+    <div
+      v-for="n in (numRows - 5)" :key="n"
+      :class="[nextRowsClassName, isLarge ? 'max-w-[720px]' : 'max-w-[360px]']"
+    ></div>
     <span class="sr-only">Loading...</span>
   </div>
 </template>

package/packages/storefront/src/lib/composables/use-search-modal.ts

@@ -1,4 +1,5 @@
 import type { Categories } from '@cloudcommerce/api/types';
+import type { SearchEngineInstance } from '@@sf/state/search-engine';
 import { ref, watch, toRef } from 'vue';
 import Wade from 'wade';
 import { clearAccents } from '@@sf/sf-lib';
@@ -8,6 +9,7 @@ export interface Props {
   term: string;
   fetchDebounce?: number;
   productsLimit?: number;
+  searchEngine?: SearchEngineInstance;
 }
 
 const wadeDocs: Array<{
@@ -39,7 +41,7 @@ if (wadeDocs.length) {
 }
 
 export const useSearchModal = (props: Props) => {
-  const searchEngine = new SearchEngine({
+  const searchEngine = props.searchEngine || new SearchEngine({
     debounce: props.fetchDebounce || 300,
   });
   searchEngine.pageSize.value = props.productsLimit || 12;

package/packages/storefront/src/lib/composables/use-search-showcase.ts

@@ -30,6 +30,7 @@ export interface Props {
   ssrError?: string | null;
   canUseUrlParams?: boolean;
   showcase?: Ref<HTMLElement | null>;
+  searchEngine?: SearchEngineInstance;
 }
 
 const useSearchShowcase = (props: Props) => {
@@ -43,7 +44,7 @@ const useSearchShowcase = (props: Props) => {
     }
   }
   const products = shallowReactive<SearchItem[]>(props.products || []);
-  const searchEngine = new SearchEngine({ debounce: 50 });
+  const searchEngine = props.searchEngine || new SearchEngine({ debounce: 50 });
   if (term === undefined && !import.meta.env.SSR) {
     term = new URLSearchParams(window.location.search).get('q') || null;
   }

package/packages/storefront/src/lib/composables/use-shipping-calculator.ts

@@ -14,24 +14,34 @@ import {
   toRef,
 } from 'vue';
 import { useDebounceFn, watchOnce } from '@vueuse/core';
-import { price as getPrice } from '@ecomplus/utils';
+import { price as getPrice, formatMoney } from '@ecomplus/utils';
 import config from '@cloudcommerce/config';
+import {
+  i19days,
+  i19free,
+  i19freeShipping,
+  i19pickUpToday,
+  i19receiveToday,
+  i19untilTomorrow,
+  i19upTo,
+  i19workingDays,
+} from '@@i18n';
 import { fetchModule } from '@@sf/state/modules-info';
 
 export type ShippedItem = Exclude<CalculateShippingParams['items'], undefined>[0];
 
 export type ShippingService = CalculateShippingResponse['shipping_services'][0];
 
-type CartOrProductItem = Carts['items'][0] | (Partial<Products> & {
-  product_id: string & { length: 24 },
-  price: number,
-  quantity: number,
-});
+type CartOrProductItem = Carts['items'][0]
+  | (Partial<Products>
+    & { price: number, quantity: number }
+    & ({ product_id: string & { length: 24 } } | { _id: string & { length: 24 } })
+  );
 
 export interface Props {
-  zipInput?: Ref<HTMLInputElement | null>;
-  zipCode?: string;
-  canSelectService?: boolean;
+  zipCode?: Ref<string>;
+  canAutoSubmit?: boolean;
+  // canSelectService?: boolean;
   countryCode?: string;
   shippedItems?: (ShippedItem | CartOrProductItem)[];
   shippingResult?: ModuleApiResult<'calculate_shipping'>['result'];
@@ -62,6 +72,9 @@ const sortApps = (results: any, order: number[]) => {
   });
 };
 const reduceItemBody = (itemOrProduct: Record<string, any>) => {
+  if (!itemOrProduct.product_id) {
+    itemOrProduct.product_id = itemOrProduct._id;
+  }
   const shippedItem = {};
   const fields: (keyof ShippedItem)[] = [
     'product_id',
@@ -86,12 +99,11 @@ const reduceItemBody = (itemOrProduct: Record<string, any>) => {
 };
 
 export const useShippingCalculator = (props: Props) => {
-  const localZipCode = ref(props.zipCode);
-  const zipCode = ref<string | null>(null);
-  if (!localZipCode.value && localStorage) {
+  const zipCode = props.zipCode || ref('');
+  if (!zipCode.value && localStorage) {
     const storedZip = localStorage.getItem(ZIP_STORAGE_KEY);
     if (storedZip) {
-      localZipCode.value = storedZip;
+      zipCode.value = storedZip;
     }
   }
   const countryCode = props.countryCode || config.get().countryCode;
@@ -117,7 +129,7 @@ export const useShippingCalculator = (props: Props) => {
       ...props.baseParams,
       to: {
         ...props.baseParams?.to,
-        zip: localZipCode.value!,
+        zip: zipCode.value,
       },
     };
     if (shippedItems.value.length) {
@@ -125,6 +137,17 @@ export const useShippingCalculator = (props: Props) => {
       body.subtotal = amountSubtotal.value;
     }
     isFetching.value = true;
+    if (import.meta.env.DEV) {
+      // eslint-disable-next-line
+      return import('../../__fixtures__/calculate_shipping.json')
+        .then(({ default: data }) => {
+          setTimeout(() => {
+            isFetching.value = false;
+            // eslint-disable-next-line no-use-before-define
+            parseShippingResult(data.result as any, isRetry);
+          }, 1500);
+        });
+    }
     fetchModule('calculate_shipping', {
       method: 'POST',
       params: {
@@ -133,6 +156,7 @@ export const useShippingCalculator = (props: Props) => {
       body,
     })
       .then(async (response) => {
+        if (response.status === 501) return;
         const data = await response.json();
         // eslint-disable-next-line no-use-before-define
         parseShippingResult(data.result, isRetry);
@@ -220,43 +244,74 @@ export const useShippingCalculator = (props: Props) => {
   };
 
   const submitZipCode = () => {
-    const _zipCode = localZipCode.value;
+    const _zipCode = zipCode.value;
     if (countryCode === 'BR') {
       if (_zipCode?.replace(/\D/g, '').length !== 8) return;
     } else if (!_zipCode) {
       return;
     }
-    zipCode.value = _zipCode;
     if (localStorage) {
-      localStorage.setItem(ZIP_STORAGE_KEY, zipCode.value);
+      localStorage.setItem(ZIP_STORAGE_KEY, _zipCode);
     }
     fetchShippingServices();
   };
-  watch(localZipCode, submitZipCode, {
+  watch(zipCode, (value) => {
+    if (value.length) {
+      if (countryCode === 'BR') {
+        const fmt = value.replace(/\D/g, '');
+        if (fmt.length > 5) {
+          zipCode.value = fmt.substring(0, 5) + '-' + fmt.substring(5, 8);
+          if (props.canAutoSubmit) submitZipCode();
+        }
+      } else {
+        zipCode.value = value.substring(0, 30);
+      }
+    }
+  }, {
     immediate: !props.shippingResult,
   });
   watch(toRef(props, 'shippingResult'), (shippingResult) => {
     if (!shippingResult?.length) return;
-    if (localZipCode.value) zipCode.value = localZipCode.value;
     parseShippingResult(shippingResult);
   }, {
     immediate: true,
   });
-  const zipInput = props.zipInput?.value;
-  if (zipInput) {
-    zipInput.addEventListener('input', (ev) => {
-      const value = (ev.target as HTMLInputElement).value;
-      if (value.length) {
-        if (countryCode === 'BR') {
-          const fmt = value.replace(/\D/g, '').padEnd(8, '_');
-          zipInput.innerHTML = fmt.substring(0, 5) + '-' + fmt.substring(5, 8);
-        } else {
-          zipInput.innerHTML = value.substring(0, 30);
+
+  const productionDeadline = computed(() => {
+    let maxDeadline = 0;
+    _shippedItems.value?.forEach((item: Partial<Products>) => {
+      if (item.quantity && item.production_time) {
+        const { days, cumulative } = item.production_time;
+        const itemDeadline = cumulative ? days * item.quantity : days;
+        if (itemDeadline > maxDeadline) {
+          maxDeadline = itemDeadline;
         }
       }
-      localZipCode.value = value;
     });
-  }
+    return maxDeadline;
+  });
+  const getShippingDeadline = (shipping: ShippingService['shipping_line']) => {
+    const isWorkingDays = Boolean(shipping.posting_deadline?.working_days
+      || shipping.delivery_time?.working_days);
+    let days = shipping.posting_deadline?.days || 0;
+    if (shipping.delivery_time) {
+      days += shipping.delivery_time.days;
+    }
+    days += productionDeadline.value;
+    if (days > 1) {
+      return `${i19upTo} ${days} `
+        + (isWorkingDays ? i19workingDays : i19days).toLowerCase();
+    }
+    if (days === 1) return i19untilTomorrow;
+    return shipping.pick_up ? i19pickUpToday : i19receiveToday;
+  };
+  const getShippingPrice = (shipping: ShippingService['shipping_line']) => {
+    const freight = typeof shipping.total_price === 'number'
+      ? shipping.total_price
+      : shipping.price;
+    if (freight) return formatMoney(freight);
+    return shipping.pick_up ? i19free : i19freeShipping;
+  };
 
   return {
     zipCode,
@@ -264,9 +319,13 @@ export const useShippingCalculator = (props: Props) => {
     amountSubtotal,
     submitZipCode,
     fetchShippingServices,
+    isFetching,
     freeFromValue,
     shippingServices,
     parseShippingResult,
+    productionDeadline,
+    getShippingDeadline,
+    getShippingPrice,
   };
 };
 

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

@@ -168,6 +168,7 @@ const inlineJSONLd = JSON.stringify({
   url: `https://${domain}/`,
   logo: `https://${domain}${settings.logo}`,
 });
+const generator = `e-com.plus @cloudcommerce/storefront, ${Astro.generator}`;
 ---
 
 <meta charset="UTF-8">
@@ -179,7 +180,7 @@ const inlineJSONLd = JSON.stringify({
 {title && <title>{title}</title>}
 {description && <meta name="description" content={description}>}
 <meta name="author" content={settings.name}>
-<meta name="generator" content={Astro.generator} />
+<meta name="generator" content={generator}>
 <link rel="canonical" href={canonicalUrl} />
 {shortcutIcon && <link rel="apple-touch-icon" href={shortcutIcon} />}
 <meta name="apple-mobile-web-app-capable" content="yes">

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

@@ -12,6 +12,7 @@ export interface Props {
   routeContext: RouteContext;
   handleCustomSection?: (type: `${string}:${string}`, content: Record<string, any>) =>
     Promise<{ props: Record<string, any> }>;
+  searchEngine?: UseSearchShowcaseProps['searchEngine'];
 }
 
 type PageContentHero = Exclude<PageContent['hero'], undefined>;
@@ -48,7 +49,7 @@ type CustomSection = { type: `${string}:${string}`, props: any };
 type ProductDetailsProps = { hasDescription?: boolean, hasSpecifications?: boolean };
 
 export const usePageSections = async <T extends CustomSection = CustomSection>
-({ routeContext, handleCustomSection }: Props) => {
+({ routeContext, handleCustomSection, searchEngine }: Props) => {
   const { cmsContent } = routeContext;
   let sectionsContent = cmsContent?.sections;
   if (
@@ -181,11 +182,14 @@ export const usePageSections = async <T extends CustomSection = CustomSection>
           props.term = routeContext.searchPageTerm || null;
         }
         if (props.term !== undefined || props.fixedParams) {
-          const { searchEngine, fetching } = useSearchShowcase(props);
+          const {
+            searchEngine: resultSearchEngine,
+            fetching,
+          } = useSearchShowcase({ ...props, searchEngine });
           await fetching;
-          props.products = searchEngine.products;
-          props.resultMeta = searchEngine.meta;
-          props.ssrError = searchEngine.fetchError.value?.message;
+          props.products = resultSearchEngine.products;
+          props.resultMeta = resultSearchEngine.meta;
+          props.ssrError = resultSearchEngine.fetchError.value?.message;
         }
         sections[index] = { type, props };
         return;

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

@@ -296,6 +296,15 @@ const loadRouteContext = async (
   } else {
     setResponseCache(Astro, 120, 180);
   }
+  if (
+    Astro.url.searchParams.get('webcontainer') !== null
+    || urlPath.startsWith('/admin/ide')
+  ) {
+    // https://webcontainers.io/guides/quickstart#cross-origin-isolation
+    Astro.response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
+    Astro.response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
+    Astro.response.headers.set('Cross-Origin-Resource-Policy', 'cross-origin');
+  }
   const routeContext = {
     ...config,
     isHomepage,

package/packages/storefront/src/lib/state/search-engine.ts

@@ -68,6 +68,8 @@ export const search = async ({
   return response;
 };
 
+type SearchOptions = Parameters<typeof search>[0];
+
 export class SearchEngine {
   fields?: readonly string[];
   term = ref<string | null>(null);
@@ -76,6 +78,7 @@ export class SearchEngine {
   params = reactive<Exclude<ApiConfig['params'], string | undefined>>({});
   pageSize = ref(24);
   pageNumber = ref(1);
+  #middlewares: Array<(opt: SearchOptions) => void> = [];
   #isFetching = ref(false);
   isFetching = computed(() => this.#isFetching.value);
   #wasFetched = ref(false);
@@ -130,18 +133,22 @@ export class SearchEngine {
       });
     }
     let response: Awaited<ReturnType<typeof search>> | null | undefined;
+    const searchOptions = {
+      term: this.term.value,
+      params: {
+        ...this.params,
+        limit,
+        offset,
+        count: this.isWithCount.value || undefined,
+        buckets: this.isWithBuckets.value || undefined,
+      },
+      fields: this.fields,
+    };
     try {
-      response = await this.#search({
-        term: this.term.value,
-        params: {
-          ...this.params,
-          limit,
-          offset,
-          count: this.isWithCount.value || undefined,
-          buckets: this.isWithBuckets.value || undefined,
-        },
-        fields: this.fields,
-      });
+      for (let i = 0; i < this.#middlewares.length; i++) {
+        this.#middlewares[i](searchOptions);
+      }
+      response = await this.#search(searchOptions);
     } catch (err: any) {
       if (this.#fulfillFetching) {
         this.#fetchError.value = err;
@@ -162,6 +169,9 @@ export class SearchEngine {
     }
   }
 
+  addMiddleware(cb: (options: SearchOptions) => void) {
+    this.#middlewares.push(cb);
+  }
   setResult(data: Partial<SearchResult<'v1'>>) {
     if (data.meta) {
       Object.assign(this.meta, data.meta);

package/packages/test-base/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudcommerce/test-base",
   "private": true,
   "type": "module",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "description": "E-Com Plus Cloud Commerce basic setup for testing",
   "main": "lib/index.js",
   "repository": {

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {