cloudcommerce 0.33.2 → 0.33.4

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

@@ -9,6 +9,7 @@ import {
 } from '@@sf/state/use-analytics';
 import afetch from '../../helpers/afetch';
 import parseGtagToFbq from '../../analytics/event-to-fbq';
+import parseGtagToTtq from '../../analytics/event-to-ttq';
 
 type AnalyticsEvent = {
   type: 'gtag' | 'fbq' | 'ttq',
@@ -40,10 +41,12 @@ if (!import.meta.env.SSR) {
       gtag,
       dataLayer,
       fbq,
+      ttq,
     } = window as {
       gtag?: Gtag.Gtag,
       dataLayer?: Array<any>,
       fbq?: (action: string, value: string, payload?: any) => any,
+      ttq?: { page: () => any, track: (value: string, payload?: any) => any },
     };
     if (typeof gtag === 'function') {
       gtag('event', name, params);
@@ -60,6 +63,18 @@ if (!import.meta.env.SSR) {
         fbq('track', fbqEvent.name, fbqEvent.params);
       }
     });
+    const ttqEvents = await parseGtagToTtq(evMessage);
+    ttqEvents.forEach((ttqEvent) => {
+      if (!ttqEvent.name) return;
+      sendServerEvent({ type: 'ttk', ...ttqEvent });
+      if (typeof ttq?.page === 'function') {
+        if (ttqEvent.name === 'PageView') {
+          ttq.page();
+        } else {
+          ttq.track(ttqEvent.name, ttqEvent.params);
+        }
+      }
+    });
   });
 
   let lastPageLocation = '';

package/packages/storefront/src/lib/scripts/vbeta-app.ts

@@ -1,11 +1,182 @@
+import type { Orders, Customers } from '@cloudcommerce/api/types';
 import { watch } from 'vue';
+import { phone as getPhone } from '@ecomplus/utils';
 import {
   session,
   isAuthenticated,
   customer,
+  customerName,
 } from '@@sf/state/customer-session';
+import { shoppingCart } from '@@sf/state/shopping-cart';
+import { emitGtagEvent, getGtagItem } from '@@sf/state/use-analytics';
 import utm from '@@sf/scripts/session-utm';
 
+const watchAppRoutes = () => {
+  const router = (window as any).storefrontApp?.router;
+  if (router) {
+    const getCouponApplied = () => {
+      return sessionStorage.getItem('st_discount_coupon') || undefined;
+    };
+    const fixMoneyValue = (value: number) => {
+      return Math.round(value * 100) / 100;
+    };
+
+    const emittedCheckoutSteps: Array<
+      'view_cart' | 'begin_checkout' |
+      'add_payment_info' | 'add_shipping_info'
+    > = [];
+    const emitCheckout = (
+      evName: typeof emittedCheckoutSteps[0],
+      params?: Gtag.EventParams,
+    ) => {
+      if (emittedCheckoutSteps.includes(evName)) return;
+      emittedCheckoutSteps.push(evName);
+      if (!params) {
+        params = {
+          value: fixMoneyValue(shoppingCart.value.subtotal),
+          items: shoppingCart.value.items.map(getGtagItem),
+        };
+      }
+      if (evName !== 'view_cart') {
+        params.coupon = getCouponApplied();
+        if (!emittedCheckoutSteps.includes('begin_checkout')) {
+          emitCheckout('begin_checkout');
+        }
+      }
+      emitGtagEvent(evName, params);
+    };
+
+    let isPurchaseSent = false;
+    const emitPurchase = (orderId: string, orderJson?: string) => {
+      if (!isPurchaseSent) {
+        if (localStorage.getItem('gtag.orderIdSent') !== orderId) {
+          let order: Orders | undefined;
+          if (orderJson) {
+            try {
+              order = JSON.parse(orderJson);
+            } catch {
+              //
+            }
+          }
+          const { amount } = (order || (window as any).storefrontApp) as {
+            amount?: Orders['amount'],
+          };
+          const params: Gtag.EventParams = {
+            transaction_id: orderId,
+            value: fixMoneyValue(amount?.total || shoppingCart.value.subtotal),
+            items: shoppingCart.value.items.map(getGtagItem),
+            coupon: order
+              ? order.extra_discount?.discount_coupon
+              : getCouponApplied(),
+          };
+          if (amount) {
+            if (amount.freight !== undefined) {
+              params.shipping = fixMoneyValue(amount.freight);
+            }
+            if (amount.tax !== undefined) {
+              params.tax = fixMoneyValue(amount.tax);
+            }
+          }
+          let purchaseTimeout = 1;
+          const { dataLayer, __sendGTMExtraPurchaseData } = (window as any);
+          if (dataLayer && __sendGTMExtraPurchaseData) {
+            const extraPurchaseData: Record<string, any> = {};
+            let shippingAddr: Exclude<Customers['addresses'], undefined>[0] | undefined;
+            if (customer) {
+              extraPurchaseData.customerDisplayName = customerName.value;
+              let customerFullName = customer.value.name;
+              if (!customerFullName?.given_name) {
+                try {
+                  const storedCustomer = sessionStorage.getItem('ecomCustomerAccount');
+                  if (storedCustomer) {
+                    const sessionCustomer = JSON.parse(storedCustomer);
+                    if (typeof sessionCustomer === 'object' && sessionCustomer) {
+                      customerFullName = sessionCustomer.name;
+                    }
+                  }
+                } catch {
+                  //
+                }
+              }
+              if (customerFullName) {
+                extraPurchaseData.customerGivenName = customerFullName.given_name;
+                extraPurchaseData.customerFamilyName = customerFullName.family_name;
+              }
+              extraPurchaseData.customerEmail = customer.value.main_email;
+              extraPurchaseData.customerPhone = getPhone(customer.value);
+              shippingAddr = customer.value.addresses?.[0];
+            }
+            try {
+              const storedAddr = sessionStorage.getItem('ecomCustomerAddress');
+              if (storedAddr) {
+                const sessionShippingAddr = JSON.parse(storedAddr);
+                if (typeof shippingAddr === 'object' && shippingAddr) {
+                  Object.assign(shippingAddr, sessionShippingAddr);
+                } else {
+                  shippingAddr = sessionShippingAddr;
+                }
+              }
+            } catch {
+              //
+            }
+            if (shippingAddr && shippingAddr.zip) {
+              extraPurchaseData.shippingAddrZip = shippingAddr.zip;
+              extraPurchaseData.shippingAddrStreet = shippingAddr.street;
+              extraPurchaseData.shippingAddrNumber = shippingAddr.number;
+              if (shippingAddr.street && shippingAddr.number) {
+                extraPurchaseData.shippingAddrStreet += `, ${shippingAddr.number}`;
+              }
+              extraPurchaseData.shippingAddrCity = shippingAddr.city;
+              extraPurchaseData.shippingAddrProvinceCode = shippingAddr.province_code;
+            }
+            dataLayer.push({
+              event: 'purchaseExtraData',
+              ...extraPurchaseData,
+            });
+            purchaseTimeout = 100;
+          }
+          setTimeout(() => emitGtagEvent('purchase', params), purchaseTimeout);
+          localStorage.setItem('gtag.orderIdSent', orderId);
+        }
+        isPurchaseSent = true;
+      }
+    };
+
+    let emitPurchaseTimer: NodeJS.Timeout | undefined;
+    const parseRouteToGtag = ({ name, params }) => {
+      switch (name) {
+        case 'cart':
+          emitCheckout('view_cart');
+          break;
+        case 'checkout':
+          if (!params.step) {
+            emitCheckout('begin_checkout');
+          } else if (Number(params.step) === 1) {
+            emitCheckout('add_shipping_info');
+          } else if (Number(params.step) === 2) {
+            emitCheckout('add_payment_info');
+          }
+          break;
+        case 'confirmation':
+          clearTimeout(emitPurchaseTimer);
+          if (params.json) {
+            emitPurchase(params.id, decodeURIComponent(params.json));
+          } else {
+            emitPurchaseTimer = setTimeout(() => {
+              emitPurchase(params.id);
+            }, 1500);
+          }
+          break;
+        default:
+      }
+    };
+    if (router.currentRoute) {
+      parseRouteToGtag(router.currentRoute);
+    }
+    router.afterEach(parseRouteToGtag);
+  }
+};
+
 // https://github.com/ecomplus/storefront/tree/master/%40ecomplus/storefront-app compat
 if (!import.meta.env.SSR) {
   if (Object.keys(utm).length) {
@@ -49,6 +220,7 @@ if (!import.meta.env.SSR) {
     }, {
       immediate: true,
     });
+    setTimeout(watchAppRoutes, 400);
   };
 
   const appScript = document.createElement('script');

package/packages/storefront/src/lib/state/shopping-cart.ts

@@ -1,5 +1,6 @@
 import type { Products, CartSet, SearchItem } from '@cloudcommerce/api/types';
-import { computed, watch } from 'vue';
+import { computed } from 'vue';
+import { watchDebounced } from '@vueuse/core';
 import mitt from 'mitt';
 import useStorage from '@@sf/state/use-storage';
 import addItem from '@@sf/state/shopping-cart/add-cart-item';
@@ -107,7 +108,7 @@ type CartEvent = {
 const cartEmitter = mitt<CartEvent>();
 const cloneItems = () => shoppingCart.value.items.map((item) => ({ ...item }));
 let oldItems = cloneItems();
-watch(shoppingCart, ({ items }) => {
+watchDebounced(shoppingCart, ({ items }) => {
   ['addCartItem' as const, 'removeCartItem' as const].forEach((evName) => {
     const isAdd = evName === 'addCartItem';
     const baseItems = isAdd ? items : oldItems;
@@ -115,16 +116,17 @@ watch(shoppingCart, ({ items }) => {
     baseItems.forEach((baseItem) => {
       if (!baseItem.quantity) return;
       const compareItem = compareItems.find(({ _id }) => _id === baseItem._id);
-      if (compareItem && baseItem.quantity > compareItem.quantity) {
+      const compareQnt = compareItem?.quantity || 0;
+      if (baseItem.quantity > compareQnt) {
         cartEmitter.emit(evName, {
           ...baseItem,
-          quantity: baseItem.quantity - (compareItem?.quantity || 0),
+          quantity: baseItem.quantity - compareQnt,
         });
       }
     });
   });
   oldItems = cloneItems();
-});
+}, { debounce: 200 });
 
 export const cartEvents = {
   on: cartEmitter.on,

package/packages/test-base/package.json

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