cloudcommerce 0.33.0 → 0.33.2

package/packages/apps/pagarme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/app-pagarme",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce app to integrate Pagar.me",
   "main": "lib/pagarme.js",
   "exports": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.5.0",
     "pagarme": "^4.33.1",

package/packages/apps/pagarme-v5/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/app-pagarme-v5",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce app to integrate Pagar.me API v5 with recurring payments",
   "main": "lib/index.js",
   "exports": {
@@ -27,9 +27,9 @@
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.5",
-    "axios": "^1.5.1",
+    "axios": "^1.6.2",
     "firebase-admin": "^11.11.0",
-    "firebase-functions": "^4.4.1"
+    "firebase-functions": "^4.5.0"
   },
   "devDependencies": {
     "@cloudcommerce/test-base": "workspace:*",

package/packages/apps/paghiper/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/app-paghiper",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce app to integrate PagHiper",
   "main": "lib/paghiper.js",
   "exports": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.5.0"
   },

package/packages/apps/pix/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/app-pix",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce app to integrate Pix API (Bacen)",
   "main": "lib/pix.js",
   "exports": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.5.0"
   },

package/packages/apps/tiny-erp/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/app-tiny-erp",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce app for Tiny ERP",
   "main": "lib/tiny-erp.js",
   "repository": {
@@ -22,7 +22,7 @@
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.5",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.5.0",
     "form-data": "4.0.0"

package/packages/apps/webhooks/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/app-webhooks",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce app for general order webhooks",
   "main": "lib/index.js",
   "repository": {
@@ -21,7 +21,7 @@
   "dependencies": {
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/firebase": "workspace:*",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.5.0"
   },

package/packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/cli",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce CLI tools",
   "bin": {
     "cloudcommerce": "./bin/run.mjs"

package/packages/config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/config",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce base config",
   "main": "lib/config.js",
   "exports": {

package/packages/emails/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/emails",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce email sender",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -23,13 +23,13 @@
   },
   "dependencies": {
     "@cloudcommerce/firebase": "workspace:*",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "ejs": "^3.1.9",
     "nodemailer": "^6.9.7"
   },
   "devDependencies": {
     "@cloudcommerce/types": "workspace:*",
-    "@types/ejs": "^3.1.4",
-    "@types/nodemailer": "^6.4.13"
+    "@types/ejs": "^3.1.5",
+    "@types/nodemailer": "^6.4.14"
   }
 }

package/packages/eslint/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/eslint",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce ESLint config",
   "main": "lib/index.js",
   "repository": {
@@ -19,9 +19,9 @@
     "build": "echo '@ecomplus/eslint'"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "eslint": "^8.53.0",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-tailwindcss": "3.13.0",

package/packages/events/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/events",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce app events",
   "main": "lib/index.js",
   "exports": {

package/packages/feeds/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/feeds",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce catalog feeds",
   "main": "lib/index.js",
   "exports": {

package/packages/firebase/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/firebase",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce on Firebase",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
-    "@google-cloud/pubsub": "^4.0.6",
+    "@google-cloud/pubsub": "^4.0.7",
     "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.5.0",
     "source-map-support": "^0.5.21"

package/packages/i18n/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/i18n",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce i18n",
   "main": "lib/all.js",
   "exports": {

package/packages/modules/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/modules",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce modules API",
   "main": "lib/index.cjs",
   "exports": {
@@ -47,7 +47,7 @@
     "@ecomplus/utils": "1.5.0-rc.5",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
-    "axios": "^1.6.0",
+    "axios": "^1.6.2",
     "firebase-admin": "^11.11.0",
     "firebase-functions": "^4.5.0",
     "source-map-support": "^0.5.21"

package/packages/passport/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/passport",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce customers authentication (passport) API",
   "main": "lib/index.js",
   "exports": {

package/packages/ssr/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/ssr",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce storefront SSR",
   "main": "lib/index.js",
   "exports": {
@@ -30,7 +30,7 @@
     "@cloudcommerce/firebase": "workspace:*",
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.5",
-    "@vueuse/core": "10.5.0",
+    "@vueuse/core": "10.6.1",
     "astro": "2.10.15",
     "astro-capo": "^0.0.1",
     "firebase-admin": "^11.11.0",

package/packages/storefront/client.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="./src/vue-globals" />
 /// <reference types="./.auto-imports" />
+/// <reference types="gtag.js" />
 
 type DocCleanupFields = 'body_html'
   | 'body_text'
@@ -29,3 +30,5 @@ interface Window {
   };
   $isCmsPreview?: boolean;
 }
+
+declare module 'gtag.js';

package/packages/storefront/config/astro/context-directive.mjs

@@ -23,9 +23,9 @@ export default (load, opts) => {
   if (window._firstLoadContextId === id && window._emitedContextId === id) {
     console.log('[ctx] first load');
     next();
-    setTimeout(() => {
+    document.addEventListener('astro:beforeload', () => {
       delete window._firstLoadContextId;
-    }, 49);
+    }, { once: true });
     return;
   }
   window.addEventListener('storefront:apiContext', next, { once: true });

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -39,23 +39,25 @@
     "@fastify/deepmerge": "^1.3.0",
     "@iconify-json/fa6-brands": "^1.1.13",
     "@iconify-json/heroicons": "^1.1.13",
-    "@iconify-json/logos": "^1.1.37",
-    "@vite-pwa/astro": "^0.1.4",
-    "@vueuse/core": "10.5.0",
+    "@iconify-json/logos": "^1.1.38",
+    "@types/gtag.js": "^0.0.18",
+    "@vite-pwa/astro": "^0.1.5",
+    "@vueuse/core": "10.6.1",
     "astro": "2.10.15",
     "astro-capo": "^0.0.1",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.3.1",
-    "firebase": "^10.5.2",
+    "firebase": "^10.6.0",
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
+    "mitt": "^3.0.1",
     "semver": "^7.5.4",
     "sharp": "^0.32.6",
     "tailwindcss": "^3.3.5",
-    "unocss": "^0.57.2",
+    "unocss": "^0.57.6",
     "unplugin-auto-import": "^0.16.7",
     "vite": "^4.5.0",
-    "vite-plugin-pwa": "^0.16.7",
+    "vite-plugin-pwa": "^0.17.0",
     "vue": "^3.3.8"
   },
   "devDependencies": {

package/packages/storefront/src/analytics/event-to-fbq.ts

@@ -0,0 +1,82 @@
+import type { GtagEventMessage } from '@@sf/state/use-analytics';
+
+const pageContentState = {
+  waiting: Promise.resolve(),
+  params: {
+    content_ids: [] as string[],
+    content_name: '',
+  },
+};
+
+const parseGtagItem = (
+  item: Exclude<Gtag.EventParams['items'], undefined>[0],
+  currency = 'BRL',
+  isCartEvent = false,
+) => {
+  const params: Record<string, any> = {
+    currency,
+    content_category: item.item_category,
+    content_name: item.item_name,
+    value: item.price,
+    content_type: 'product',
+  };
+  if (isCartEvent) {
+    params.contents = [{
+      id: item.item_id,
+      quantity: item.quantity,
+    }];
+  } else {
+    params.content_ids = [item.item_id];
+  }
+  return params;
+};
+
+// https://developers.facebook.com/docs/meta-pixel/reference#standard-events
+export const parseGtagToFbq = async ({ event }: GtagEventMessage) => {
+  if (event.name === 'page_view') {
+    pageContentState.waiting = new Promise((resolve) => {
+      setTimeout(resolve, 110);
+    });
+    pageContentState.params.content_name = event.params.page_title;
+    return [{ name: 'PageView' }];
+  }
+  const { items, currency } = event.params;
+  if (event.name === 'view_item' && items) {
+    const firstItem = items[0];
+    if (firstItem) {
+      if (firstItem.item_list_id === 'product-page') {
+        return [{
+          name: 'ViewContent',
+          params: parseGtagItem(firstItem, currency),
+        }];
+      }
+      items.forEach(({ item_id: id }) => {
+        pageContentState.params.content_ids.push(id as string);
+      });
+      if (pageContentState.params.content_ids.length > items.length) {
+        return [{ name: null }];
+      }
+      await pageContentState.waiting;
+      return [{
+        name: 'ViewContent',
+        params: {
+          ...pageContentState.params,
+          content_type: 'product',
+        },
+      }];
+    }
+  }
+  if ((event.name === 'add_to_cart' || event.name === 'remove_from_cart') && items) {
+    const isAdd = event.name === 'add_to_cart';
+    return items.map((item) => ({
+      name: 'AddToCart',
+      params: parseGtagItem({
+        ...item,
+        quantity: isAdd ? (item.quantity || 1) : -(item.quantity || 1),
+      }, currency, true),
+    }));
+  }
+  return [{ name: null }];
+};
+
+export default parseGtagToFbq;

package/packages/storefront/src/analytics/event-to-ttq.ts

@@ -0,0 +1,15 @@
+import type { GtagEventMessage } from '@@sf/state/use-analytics';
+
+export const parseGtagToTtq = (event: GtagEventMessage['event']) => {
+  let name = '';
+  const params: Record<string, any> = {};
+  switch (event.name) {
+    case 'page_view':
+      name = 'PageView';
+      break;
+    default:
+  }
+  return { name, params };
+};
+
+export default parseGtagToTtq;

package/packages/storefront/src/helpers/afetch.ts

@@ -1,6 +1,12 @@
 type FetchParams = Parameters<typeof fetch>;
+type RequestInit = Exclude<FetchParams[1], undefined>;
+type BodyInit = RequestInit['body'] | Record<string, any> | Array<any>;
 
-const afetch = (url: FetchParams[0], init?: FetchParams[1], timeout = 10000) => {
+const afetch = (
+  url: FetchParams[0],
+  init?: Omit<RequestInit, 'body'> & { body?: BodyInit },
+  timeout = 10000,
+) => {
   let abortController: AbortController | undefined;
   let timer: NodeJS.Timeout | undefined;
   if (timeout) {
@@ -9,16 +15,22 @@ const afetch = (url: FetchParams[0], init?: FetchParams[1], timeout = 10000) =>
       (abortController as AbortController).abort();
     }, timeout);
   }
-  if (init?.body && typeof init.body === 'object') {
-    init.body = JSON.stringify(init.body);
-    init.headers = {
-      ...init.headers,
-      'Content-Type': 'application/json',
-      'Content-Length': init.body.length.toString(),
-    };
+  let body: RequestInit['body'];
+  if (init?.body) {
+    if (typeof init.body === 'object') {
+      body = JSON.stringify(init.body);
+      init.headers = {
+        ...init.headers,
+        'Content-Type': 'application/json',
+        'Content-Length': body.length.toString(),
+      };
+    } else {
+      body = init.body;
+    }
   }
   const promise = fetch(url, {
     ...init,
+    body,
     signal: abortController?.signal,
   });
   promise.finally(() => {

package/packages/storefront/src/helpers/sf-utils.ts

@@ -10,3 +10,18 @@ export const requestIdleCallback = (fn: (...args: any[]) => any, fallbackMs = 30
     setTimeout(fn, fallbackMs);
   }
 };
+
+export const slugify = (str: string) => {
+  return str
+    .toLowerCase()
+    .trim()
+    .replace(/[ÁáÃãÂâÀà]/g, 'a')
+    .replace(/[Éé]/g, 'e')
+    .replace(/[Íí]/g, 'i')
+    .replace(/[ÓóÔô]/g, 'o')
+    .replace(/[Úú]/g, 'u')
+    .replace(/[Çç]/g, 'c')
+    .replace(/[\W\r\n]/gm, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/(^-)|(-$)/g, '');
+};

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

@@ -127,24 +127,29 @@ const changeSlide = (step: number, isPageScroll: boolean = true) => {
   if (slideSizes.value.length < 2) {
     return;
   }
-  if (isPageScroll && (step === 1 || step === -1)) {
-    let pageStep = 0;
-    let pageStepSize = 0;
-    for (let i = activeIndex.value; i < slideSizes.value.length; i++) {
-      const { size } = slideSizes.value[i] || {};
-      if (size) {
-        pageStep += 1;
-        pageStepSize += size;
-        if (pageStepSize >= wrapperVisibleSize.value) {
-          break;
+  let nextOffset = -1;
+  if (currentPos.value + wrapperVisibleSize.value >= wrapperScrollSize.value) {
+    nextOffset = 0;
+  } else {
+    if (isPageScroll && (step === 1 || step === -1)) {
+      let pageStep = 0;
+      let pageStepSize = 0;
+      for (let i = activeIndex.value; i < slideSizes.value.length; i++) {
+        const { size } = slideSizes.value[i] || {};
+        if (size) {
+          pageStep += 1;
+          pageStepSize += size;
+          if (pageStepSize + size * 0.75 >= wrapperVisibleSize.value) {
+            break;
+          }
         }
       }
+      if (pageStep) {
+        step = step > 0 ? pageStep : -pageStep;
+      }
     }
-    if (pageStep) {
-      step = step > 0 ? pageStep : -pageStep;
-    }
+    nextOffset = calcNextOffset(step);
   }
-  const nextOffset = calcNextOffset(step);
   wrapper.value?.scrollTo({
     [isX ? 'left' : 'top']: nextOffset,
     behavior: 'smooth',

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

@@ -8,6 +8,8 @@ import {
   inStock as checkInStock,
   onPromotion as checkOnPromotion,
 } from '@ecomplus/utils';
+import { slugify } from '@@sf/sf-lib';
+import { emitGtagEvent, getGtagItem } from '@@sf/state/use-analytics';
 
 type PictureSize = { url: string; alt?: string; size?: string };
 
@@ -16,6 +18,8 @@ export type ProductItem = Products | SearchItem;
 export type Props = {
   product?: ProductItem;
   productId?: Products['_id'];
+  listName?: string;
+  listId?: string;
 } & ({ product: ProductItem } | { productId: Products['_id'] });
 
 const useProductCard = <T extends ProductItem | undefined = undefined>(props: Props) => {
@@ -82,6 +86,14 @@ const useProductCard = <T extends ProductItem | undefined = undefined>(props: Pr
     if ((product as SearchItem).has_variations) return true;
     return Boolean(product.variations?.length);
   });
+  emitGtagEvent('view_item', {
+    value: isActive.value ? product.price : 0,
+    items: [{
+      ...getGtagItem(product),
+      item_list_name: props.listName,
+      item_list_id: props.listId || (props.listName && slugify(props.listName)),
+    }],
+  });
 
   return {
     isFetching,

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

@@ -20,6 +20,7 @@ const { customCode } = await getContent('layout');
   {customCode?.htmlBody && <Fragment set:html={customCode.htmlBody} />}
   <slot name="base-body-scripts">
     <script src="../scripts/session-utm"></script>
+    <script src="../scripts/push-analytics-events"></script>
   </slot>
   <slot name="before-body-end" />
 </BaseBody>

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

@@ -38,8 +38,15 @@ if (fetchingApiContext) {
 
 const apiDoc = apiContext.doc;
 const state: Record<string, any> = apiDoc || cmsContent || {};
-const title = state.meta_title || state.name || state.title || settings.name;
-const description = state.meta_description || state.short_description || settings.description;
+const title = state.meta_title ||
+  state.metaTitle ||
+  (state.name && `${state.name} | ${settings.name}`) ||
+  (state.title && `${state.title} | ${settings.name}`) ||
+  settings.name;
+const description = state.meta_description ||
+  state.metaDescription ||
+  state.short_description ||
+  settings.description;
 const favicon = settings.icon ? getIconUrl(32) : '/favicon.ico';
 const shortcutIcon = settings.icon ? getIconUrl(192) : null;
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site || `https://${domain}`);