cloudcommerce 0.31.2 → 0.32.0

package/packages/ssr/src/analytics-events.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from 'node:events';
+
+const analyticsEmitter = new EventEmitter();
+
+const sendAnalyticsEvents = ({ url, events }) => {
+  analyticsEmitter.emit('send', { url, events });
+  /* @TODO:
+  Parse received events in GA4 (pageview and Measure ecommerce)
+  format and dispatch to GA Measurement API, Facebook Conversions API and
+  TikTok Analytics API.
+  - Get credentials from env vars, e.g. `process.env.GA_MEASUREMENT_ID`;
+  - May receive multiple events in a unique request, and dispatch multiple
+  events in one POST if possible;
+  - Consider Google Click ID (`?gclid=`), Facebook Click ID (`?fbclid=`)
+  and maybe TikTok one from `url` query string;
+  - Send the events in parallel for all APIs with `Promise.all(sendingEvents)`;
+  - No CORS!
+  */
+};
+
+export default sendAnalyticsEvents;
+
+export { sendAnalyticsEvents, analyticsEmitter };

package/packages/ssr/src/cloudflare/swr-worker.ts

@@ -107,7 +107,7 @@ const swr = async (_rewritedReq: Request, env: Env, ctx: ExecutionContext) => {
   if (
     pathname === '/_image'
     || pathname.startsWith('/~')
-    || pathname.startsWith('/api/')
+    || pathname.startsWith('/_api/')
     || pathname.startsWith('/_feeds/')
   ) {
     return bypassEarly();

package/packages/ssr/src/firebase/serve-storefront.ts

@@ -4,6 +4,7 @@ import { join as joinPath } from 'node:path';
 import { readFile } from 'node:fs/promises';
 import logger from 'firebase-functions/logger';
 import config from '@cloudcommerce/firebase/lib/config';
+import { sendAnalyticsEvents } from '../analytics-events';
 
 declare global {
   // eslint-disable-next-line
@@ -192,6 +193,33 @@ export default async (req: Request, res: Response) => {
     return;
   }
 
+  if (req.path === '/_analytics') {
+    // @TODO: Must check to match GA4 events schema
+    const events: Array<{ name: string, [k: string]: any }> = [];
+    const { url } = req.query;
+    if (typeof url !== 'string' || !url) {
+      res.status(400);
+      res.send('`?url=` param must be set with original pageview URL');
+      return;
+    }
+    const { ev } = req.query;
+    if (Array.isArray(ev)) {
+      ev.forEach((name) => {
+        if (typeof name === 'string' && name) events.push({ name });
+      });
+    } else if (Array.isArray(req.body.events)) {
+      req.body.events.forEach((event) => events.push(event));
+    }
+    if (!events.length) {
+      res.status(400);
+      res.send('Any event from `?ev=` URL param or `{ events }` array body field');
+      return;
+    }
+    sendAnalyticsEvents({ url, events });
+    res.sendStatus(204);
+    return;
+  }
+
   res.set('X-XSS-Protection', '1; mode=block');
   const url = req.path.replace(/\.html$/, '');
 

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.31.2",
+  "version": "0.32.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -53,15 +53,15 @@
     "semver": "^7.5.4",
     "sharp": "^0.32.6",
     "tailwindcss": "^3.3.5",
-    "unocss": "^0.57.1",
+    "unocss": "^0.57.2",
     "unplugin-auto-import": "^0.16.7",
     "vite": "^4.5.0",
-    "vite-plugin-pwa": "^0.16.6",
-    "vue": "^3.3.7"
+    "vite-plugin-pwa": "^0.16.7",
+    "vue": "^3.3.8"
   },
   "devDependencies": {
     "@cloudcommerce/eslint": "workspace:*",
     "@cloudcommerce/types": "workspace:*",
-    "@vue/runtime-core": "^3.3.7"
+    "@vue/runtime-core": "^3.3.8"
   }
 }

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

@@ -1,6 +1,5 @@
 import { watch } from 'vue';
 import {
-  GET_PASSPORT_API_URI,
   session,
   isAuthenticated,
   customer,
@@ -8,12 +7,23 @@ import {
 
 // https://github.com/ecomplus/storefront/tree/master/%40ecomplus/storefront-app compat
 if (!import.meta.env.SSR) {
+  const { domain } = globalThis.$storefront.settings;
+  const apiBaseUri = `https://ecomplus.io/v2/:${window.ECOM_STORE_ID}/`;
+  // @ts-ignore
+  window.ECOMCLIENT_API_STORE = apiBaseUri;
+  // @ts-ignore
+  window.ECOMCLIENT_API_STORE_CACHE = apiBaseUri;
+  // @ts-ignore
+  window.ECOMCLIENT_API_PASSPORT = apiBaseUri;
+  // @ts-ignore
+  window.ECOMCLIENT_API_SEARCH = `${apiBaseUri}/search/_els/`;
+  // @ts-ignore
+  window.ECOMCLIENT_API_MODULES = `https://${domain}/_api/modules/`;
+
   const onLoad = () => {
     const { ecomPassport } = window as Record<string, any>;
     watch(isAuthenticated, async () => {
       if (isAuthenticated.value) {
-        // @ts-ignore
-        window.ECOMCLIENT_API_PASSPORT = GET_PASSPORT_API_URI();
         ecomPassport.setSession({
           auth: {
             ...session.auth,
@@ -38,7 +48,7 @@ if (!import.meta.env.SSR) {
   };
 
   const appScript = document.createElement('script');
-  appScript.src = 'https://cdn.jsdelivr.net/npm/@ecomplus/storefront-app@2.0.0-beta.186/dist/lib/js/app.js';
+  appScript.src = 'https://cdn.jsdelivr.net/npm/@ecomplus/storefront-app@2.0.0-beta.187/dist/lib/js/app.js';
   appScript.onload = onLoad;
   document.body.appendChild(appScript);
 }

package/packages/storefront/src/lib/state/customer-session.ts

@@ -8,11 +8,6 @@ import useStorage from '@@sf/state/use-storage';
 
 export const EMAIL_STORAGE_KEY = 'emailForSignIn';
 
-export const GET_PASSPORT_API_URI = () => {
-  const { domain } = globalThis.$storefront.settings;
-  return `https://${domain}/_api/passport/`;
-};
-
 const storageKey = 'ecomSession';
 const emptySession = {
   customer: {
@@ -68,8 +63,9 @@ const authenticate = async () => {
     throwNoAuth('Can\'t get Firebase user ID token');
     return;
   }
+  const { domain } = globalThis.$storefront.settings;
   try {
-    const resAuth = await fetch(`${GET_PASSPORT_API_URI()}token`, {
+    const resAuth = await fetch(`https://${domain}/_api/passport/token`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

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

@@ -67,7 +67,8 @@ if (!import.meta.env.SSR) {
     }
 
     modulesToFetch.forEach(({ modName, reqOptions }) => {
-      afetch(`/_api/modules/${modName}`, reqOptions)
+      const { domain } = globalThis.$storefront.settings;
+      afetch(`https://${domain}/_api/modules/${modName}`, reqOptions)
         .then(async (response) => {
           if (response.ok) {
             const modInfo = {};

package/packages/test-base/package.json

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