cloudcommerce 2.7.5 → 2.8.8

package/packages/storefront/config/storefront.tailwind.cjs

@@ -227,6 +227,19 @@ const genTailwindConfig = (themeOptions = {}) => {
             };
             return utilities;
           }, {}),
+          // Inspired by https://www.tailwindcss-animated.com/configurator.html
+          '.animate-once': {
+            'animation-iteration-count': '1',
+          },
+          '.animate-twice': {
+            'animation-iteration-count': '2',
+          },
+          '.animate-thrice': {
+            'animation-iteration-count': '3',
+          },
+          '.animate-infinite': {
+            'animation-iteration-count': 'infinite',
+          },
         });
         addVariant('sticky-header', 'body.StickyHeader &');
       },

package/packages/storefront/config/storefront.unocss.cjs

@@ -94,29 +94,31 @@ const genUnoCSSConfig = (_tailwindConfig) => {
     ...theme
   } = tailwindConfig.theme.extend;
   if (themeAnimation) {
-    Object.keys(themeAnimation).forEach((animation) => {
-      let keyframes = '';
-      const keyframesObj = themeKeyframes?.[animation];
-      if (keyframesObj) {
-        Object.keys(keyframesObj).forEach((point) => {
-          const css = keyframesObj[point];
-          keyframes += ` ${point} {`;
-          Object.keys(css).forEach((prop) => {
-            keyframes += ` ${prop}: ${css[prop]};`;
+    // Ref.: https://github.com/animated-unocss/animated-unocss/blob/main/src/animated.ts
+    // Copy paste keyframes: https://animate.zyob.top/
+    rules.push([
+      new RegExp(`^animate-(${Object.keys(themeAnimation).join('|')})$`),
+      ([, animation]) => {
+        let keyframes = '';
+        const keyframesObj = themeKeyframes?.[animation];
+        if (keyframesObj) {
+          Object.keys(keyframesObj).forEach((point) => {
+            const css = keyframesObj[point];
+            keyframes += ` ${point} {`;
+            Object.keys(css).forEach((prop) => {
+              keyframes += ` ${prop}: ${css[prop]};`;
+            });
+            keyframes += ' }';
           });
-          keyframes += ' }';
-        });
-      }
-      rules.push([
-        `animate-${animation}`,
-        [
+        }
+        return [
           keyframes
             ? `@keyframes ${animation} {${keyframes} }`
             : '',
           { animation: themeAnimation[animation] },
-        ],
-      ]);
-    });
+        ];
+      },
+    ]);
   }
   return defineConfig({
     preflights,

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "2.7.5",
+  "version": "2.8.8",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -44,7 +44,7 @@
     "@vite-pwa/astro": "^0.3.0",
     "@vueuse/core": "10.9.0",
     "@webcontainer/api": "^1.1.9",
-    "astro": "4.4.9",
+    "astro": "4.5.0",
     "astro-capo": "^0.0.1",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.4.5",
@@ -61,11 +61,11 @@
     "vite-plugin-pwa": "^0.19.2",
     "vue": "^3.4.21",
     "wade": "0.3.3",
-    "yaml": "^2.4.0"
+    "yaml": "^2.4.1"
   },
   "devDependencies": {
     "@cloudcommerce/eslint": "workspace:*",
     "@cloudcommerce/types": "workspace:*",
-    "@types/react": "^18.2.62"
+    "@types/react": "^18.2.64"
   }
 }

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

@@ -1,12 +1,23 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+} from 'vue';
+import { useElementVisibility, useElementHover } from '@vueuse/core';
+import { isMobile, requestIdleCallback } from '@@sf/sf-lib';
 
 export interface Props {
   href?: string | null;
   target?: string;
+  prefetch?: 'hover' | 'visible' | 'never';
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  prefetch: 'hover',
+});
+const link = ref<HTMLElement | null>(null);
 const linkTarget = computed(() => {
   if (!props.href) return undefined;
   if (props.target) return props.target;
@@ -17,10 +28,45 @@ const linkTarget = computed(() => {
   }
   return undefined;
 });
+const prefetchHref = computed(() => {
+  if (import.meta.env.SSR || !props.href || linkTarget.value) return null;
+  const pathname = props.href.replace(/^(https:\/\/[^/]+)?([^#?]+).*$/i, '$2');
+  if (pathname.startsWith('/app/') || pathname === window.location.pathname) {
+    return null;
+  }
+  return pathname;
+});
+if (prefetchHref.value) {
+  onMounted(() => {
+    const { prefetch } = props;
+    const isOnHover = prefetch === 'hover';
+    if (isMobile && isOnHover) return;
+    const isOnVisible = prefetch === 'visible';
+    const useElementEv = isOnVisible
+      ? useElementVisibility
+      : isOnHover && useElementHover;
+    if (!useElementEv) return;
+    const isActive = useElementEv(link.value);
+    const unwatch = watch(isActive, (_isActive) => {
+      if (!_isActive || !window.$prefetch) return;
+      unwatch();
+      setTimeout(() => {
+        if (isOnVisible && !isActive.value) return;
+        requestIdleCallback(() => {
+          if (!prefetchHref.value) return;
+          window.$prefetch!(prefetchHref.value);
+        });
+      }, isOnVisible ? 100 : 1);
+    }, {
+      immediate: true,
+    });
+  });
+}
 </script>
 
 <template>
   <component
+    ref="link"
     :is="href ? 'a' : 'span'"
     :href="href"
     :target="linkTarget"

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

@@ -32,7 +32,7 @@ const useProductShelf = (props: Props) => {
   if (!props.products) {
     isFetching.value = true;
     fetching = (async () => {
-      const limit = props.limit || 24;
+      const limit = props.limit || 12;
       const offset = props.page ? (props.page - 1) * limit : 0;
       let endpointQuery = `offset=${offset}&limit=${limit}`;
       if (props.sort) {
@@ -41,7 +41,7 @@ const useProductShelf = (props: Props) => {
       if (props.isRelatedProducts) {
         const { apiContext } = globalThis.$storefront;
         if (apiContext?.resource === 'products') {
-          endpointQuery = `like=${apiContext.doc._id}`;
+          endpointQuery += `like=${apiContext.doc._id}`;
           if (!title.value && title.value !== null) {
             title.value = i19relatedProducts;
           }

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

@@ -8,7 +8,7 @@ import {
   watch,
   shallowReactive,
 } from 'vue';
-import { useUrlSearchParams, watchOnce } from '@vueuse/core';
+import { useUrlSearchParams } from '@vueuse/core';
 import { isScreenLg, scrollToEl } from '@@sf/sf-lib';
 import {
   i19discount,
@@ -145,7 +145,7 @@ const useSearchShowcase = (props: Props) => {
   if (searchEngine.wasFetched.value) {
     startWatchingFetch();
   } else {
-    watchOnce(searchEngine.wasFetched, startWatchingFetch);
+    watch(searchEngine.wasFetched, startWatchingFetch, { once: true });
   }
 
   const { activeFilters, filtersCount } = useSearchActiveFilters({

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

@@ -13,7 +13,7 @@ import {
   watch,
   toRef,
 } from 'vue';
-import { useDebounceFn, watchOnce } from '@vueuse/core';
+import { useDebounceFn } from '@vueuse/core';
 import { price as getPrice, formatMoney } from '@ecomplus/utils';
 import config from '@cloudcommerce/config';
 import {
@@ -120,8 +120,11 @@ export const useShippingCalculator = (props: Props) => {
   const isFetching = ref(false);
   const fetchShippingServices = useDebounceFn((isRetry?: boolean) => {
     if (isFetching.value) {
-      watchOnce((isFetching), (_isFetching) => {
-        if (!_isFetching) fetchShippingServices();
+      const unwatch = watch((isFetching), (_isFetching) => {
+        if (!_isFetching) {
+          fetchShippingServices();
+          unwatch();
+        }
       });
       return;
     }

package/packages/storefront/src/lib/composables/use-shop-header.ts

@@ -1,7 +1,6 @@
 import type { Ref } from 'vue';
 import type { Categories } from '@cloudcommerce/api/types';
 import { ref, computed, watch } from 'vue';
-import { watchOnce } from '@vueuse/core';
 import { getSearchUrl } from '@@sf/sf-lib';
 import { totalItems } from '@@sf/state/shopping-cart';
 import useStickyHeader from '@@sf/composables/use-sticky-header';
@@ -128,9 +127,11 @@ const useShopHeader = (props: Props) => {
 
   const isSearchOpen = ref(false);
   const isSearchOpenOnce = ref(false);
-  watchOnce(isSearchOpen, () => {
-    isSearchOpenOnce.value = true;
-  });
+  if (!import.meta.env.SSR) {
+    watch(isSearchOpen, () => {
+      isSearchOpenOnce.value = true;
+    }, { once: true });
+  }
   const searchTerm = ref('');
   const isSearchPage = !import.meta.env.SSR && /^\/s\/?/.test(window.location.pathname);
   let urlSearchQ: string | null | undefined;
@@ -169,9 +170,11 @@ const useShopHeader = (props: Props) => {
   };
   const isCartOpen = ref(false);
   const isCartOpenOnce = ref(false);
-  watchOnce(isCartOpen, () => {
-    isCartOpenOnce.value = true;
-  });
+  if (!import.meta.env.SSR) {
+    watch(isCartOpen, () => {
+      isCartOpenOnce.value = true;
+    }, { once: true });
+  }
   const delayedCartItems = ref(0);
   const handleOnMounted = () => {
     watch(totalItems, (newTotalItems, prevTotalItems) => {

package/packages/storefront/src/lib/composables/use-sku-selector.ts

@@ -27,7 +27,7 @@ const useSkuSelector = (props: Props) => {
     || [],
   );
   if (!grids.length && !import.meta.env.SSR) {
-    window.addEventListener('storefront:data:data', () => {
+    window.addEventListener('storefront:data:grids', () => {
       globalThis.$storefront.data.grids?.forEach((grid) => grids.push(grid));
     }, { once: true });
   }

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

@@ -21,6 +21,11 @@ const { customCode } = await getContent('layout');
   <slot name="base-body-scripts">
     <script src="../scripts/session-utm"></script>
     <script src="../scripts/push-analytics-events"></script>
+    <script>
+      /* eslint-disable */
+      import { prefetch } from 'astro:prefetch';
+      window.$prefetch = prefetch;
+    </script>
   </slot>
   <slot name="before-body-end" />
 </BaseBody>

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

@@ -2,16 +2,9 @@
 import { pwaInfo } from 'virtual:pwa-info';
 import { img as getImg, price as getPrice } from '@ecomplus/utils';
 import { i19searchProducts } from '@@i18n';
-import ViewTransitions from '@@sf/components/ViewTransitions.astro';
-
-export interface Props {
-  hasViewTransitions?: boolean;
-}
 
 // @ts-ignore
 const isPWA = pwaInfo !== false; // config/astro/mock-pwa-info.mjs
-const hasViewTransitions = Astro.props.hasViewTransitions !== false
-  && !Astro.url.pathname.startsWith('/app/');
 const {
   storeId,
   isHomepage,
@@ -107,6 +100,9 @@ window.GIT_BRANCH = '${import.meta.env.GIT_BRANCH || ''}';
 window.$storefront = ${JSON.stringify({ settings, data: {} })};`;
 if (apiContext.error) {
   const { message, statusCode } = apiContext.error;
+  if (statusCode) {
+    Astro.response.status = statusCode;
+  }
   const url = Astro.url.pathname;
   inlineClientJS += `
 console.error(${JSON.stringify(message)});
@@ -210,8 +206,7 @@ const generator = `e-com.plus @cloudcommerce/storefront, ${Astro.generator}`;
     && <link rel="manifest" href="/manifest.webmanifest" />}
 </>}
 
-<script is:inline set:html={inlineClientJS} transition:persist />
-<script type="application/ld+json" set:html={inlineJSONLd} />
+<script is:inline set:html={inlineClientJS} />
+<script is:inline type="application/ld+json" set:html={inlineJSONLd} />
 
-{hasViewTransitions && <ViewTransitions fallback="none" />}
 {contextInlineClientJS && <script is:inline set:html={contextInlineClientJS} />}

package/packages/storefront/src/lib/scripts/push-analytics-events.ts

@@ -84,16 +84,15 @@ if (
     });
   });
 
-  let lastPageLocation = '';
+  let lastHref = '';
   const sendPageView = () => {
-    const pageLocation = window.location.toString();
-    if (pageLocation === lastPageLocation) return;
+    const href = window.location.toString();
+    if (href === lastHref) return;
     emitGtagEvent('page_view', {
       ...getPageViewParams(),
-      page_location: pageLocation,
       client_id: trackingIds.g_client_id || trackingIds.client_id,
     });
-    lastPageLocation = pageLocation;
+    lastHref = href;
   };
   sendPageView();
   window.addEventListener('storefront:apiContext', () => {

package/packages/storefront/src/lib/state/use-analytics.ts

@@ -1,6 +1,5 @@
 import type { Products, Carts, SearchItem } from '@cloudcommerce/types';
 import { watch } from 'vue';
-import { watchOnce } from '@vueuse/core';
 import { price as getPrice, name as getName } from '@ecomplus/utils';
 import { customer, isLogged } from '@@sf/state/customer-session';
 import { cartEvents } from '@@sf/state/shopping-cart';
@@ -44,8 +43,16 @@ if (!import.meta.env.SSR) {
 }
 
 export const getPageViewParams = () => {
+  let pageLocation = '';
+  if (window.location.pathname.startsWith('/~')) {
+    const urlParams = new URLSearchParams(window.location.search);
+    pageLocation = urlParams.get('url') || '';
+  }
+  if (!pageLocation) {
+    pageLocation = window.location.toString();
+  }
   return {
-    page_location: window.location.toString(),
+    page_location: pageLocation,
     language: globalThis.$storefront.settings.lang || 'pt_br',
     page_title: document.title,
     user_agent: navigator.userAgent,
@@ -222,7 +229,6 @@ export const useAnalytics = ({
 }: {
   experimentId?: string,
 } = {}) => {
-  document.addEventListener('astro:beforeload', resetPageViewPromise);
   const {
     gtag,
     GTAG_TAG_ID,
@@ -288,7 +294,7 @@ export const useAnalytics = ({
   if (isLogged.value) {
     emitGtagEvent('login', {});
   } else {
-    watchOnce(isLogged, () => emitGtagEvent('login', {}));
+    watch(isLogged, () => emitGtagEvent('login', {}), { once: true });
   }
   cartEvents.on('*', (evName, cartItem) => {
     emitGtagEvent(

package/packages/test-base/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudcommerce/test-base",
   "private": true,
   "type": "module",
-  "version": "2.7.5",
+  "version": "2.8.8",
   "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.7.5",
+  "version": "2.8.8",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {