@akinon/pz-theme 2.0.129-rc.0 → 2.0.129

package/CHANGELOG.md

@@ -1,40 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.129-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c2]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b1]
-- Updated dependencies [1595d458]
-- Updated dependencies [dca12811]
-  - @akinon/next@2.0.129-rc.0
-  - @akinon/theme-contract@2.0.129-rc.0
+## 2.0.129
+
+### Patch Changes
+
+- 68666c4: ZERO-5159: Stop commerce events firing while the theme editor is attached
+  - @akinon/next@2.0.129
+  - @akinon/theme-contract@2.0.129
 
 ## 2.0.128
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.129-rc.0",
+  "version": "2.0.129",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.129-rc.0",
+    "@akinon/next": "2.0.129",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.129-rc.0",
+    "@akinon/theme-contract": "2.0.129",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.129-rc.0",
+    "@akinon/next": "2.0.129",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/utils/__tests__/analytics.test.ts

@@ -8,6 +8,7 @@ import {
 
 declare global {
   interface Window {
+    __themeEditorDesigner?: boolean;
     // Must match the augmentation in ../analytics, and the core package's.
     // eslint-disable-next-line @typescript-eslint/ban-types
     dataLayer?: Object[];
@@ -266,3 +267,75 @@ describe('default GA4 dataLayer bridge', () => {
     expect(window.dataLayer).toEqual([]);
   });
 });
+
+describe('the editor gate (ZERO-5159)', () => {
+  let received: Array<Record<string, unknown>>;
+  let listener: (event: Event) => void;
+
+  beforeEach(() => {
+    received = [];
+    listener = (event) => received.push((event as CustomEvent).detail);
+    window.addEventListener(COMMERCE_EVENT_NAME, listener);
+  });
+
+  afterEach(() => {
+    window.removeEventListener(COMMERCE_EVENT_NAME, listener);
+    delete window.__themeEditorDesigner;
+  });
+
+  it('reports nothing while the theme editor is attached', () => {
+    window.__themeEditorDesigner = true;
+
+    emitCommerceEvent('add_to_cart', {
+      items: [buildCommerceItem({ pk: 1, name: 'A' })]
+    });
+
+    expect(received).toEqual([]);
+  });
+
+  it('covers the page-scope moments too, not just the block ones', () => {
+    // view_item / view_cart / begin_checkout / purchase all reach the wire
+    // through this same emitter.
+    window.__themeEditorDesigner = true;
+
+    emitCommerceEvent('purchase', {
+      transactionId: 'ORDER-1',
+      value: 199,
+      items: [buildCommerceItem({ pk: 1, name: 'A' })]
+    });
+
+    expect(received).toEqual([]);
+  });
+
+  it('is the raw editor flag, so browse mode is silent as well', () => {
+    // A block is handed `isDesigner && !isBrowseMode`; in browse mode that
+    // prop is false while the editor is still attached, which is the state
+    // this gate exists for. Nothing here consults that prop.
+    window.__themeEditorDesigner = true;
+
+    emitCommerceEvent('select_item', {
+      items: [buildCommerceItem({ pk: 7, name: 'Shirt' })]
+    });
+
+    expect(received).toEqual([]);
+  });
+
+  it('keeps reporting when no editor is attached', () => {
+    window.__themeEditorDesigner = false;
+
+    emitCommerceEvent('search', { searchTerm: 'elbise' });
+
+    expect(received).toEqual([{ action: 'search', searchTerm: 'elbise' }]);
+  });
+
+  it('keeps reporting on a storefront that is merely framed', () => {
+    // Framing is not evidence of the editor: payment providers and
+    // marketplace previews frame a production storefront, and those events
+    // belong to real shoppers.
+    delete window.__themeEditorDesigner;
+
+    emitCommerceEvent('search', { searchTerm: 'ceket' });
+
+    expect(received).toHaveLength(1);
+  });
+});

package/src/utils/analytics.ts

@@ -146,8 +146,7 @@ export const buildCommerceItem = (
 
   const baseCode = toText(source.base_code);
   const sku = toText(source.sku);
-  const id =
-    baseCode ?? sku ?? toText(source.productPk) ?? toText(source.pk);
+  const id = baseCode ?? sku ?? toText(source.productPk) ?? toText(source.pk);
   const name = toText(source.name) ?? toText(source.title);
 
   if (!id && !name) return null;
@@ -160,9 +159,7 @@ export const buildCommerceItem = (
     parseAmount(source.retailPriceAmount) ??
     parseAmount(source.retail_price) ??
     parseAmount(source.retailPrice) ??
-    parseAmount(
-      (source.active_price as Record<string, unknown>)?.retail_price
-    );
+    parseAmount((source.active_price as Record<string, unknown>)?.retail_price);
   const attributes = readItemAttributes(source);
 
   return {
@@ -184,6 +181,31 @@ export const readItemsCurrency = (
 ): string | undefined =>
   toText(source?.currency_type) ?? toText(source?.currency) ?? toText(fallback);
 
+/**
+ * True while the theme editor is attached — edit mode AND browse mode.
+ *
+ * Read inline rather than imported, the way `overlays/theme-modal-mount.tsx`,
+ * `blocks/video-block.tsx`, `chrome/checkout-piece.tsx` and
+ * `placeholder-registry.ts` read the same flag: this module is reachable from
+ * both graphs and must keep its single import.
+ *
+ * THE RAW FLAG, not the `isDesigner` a block receives. A block is handed
+ * `isDesigner && !isBrowseMode`, so the moment a designer switches to browse
+ * mode that prop goes false while the editor is still attached — and every
+ * block-level emit below fired for real, indistinguishable from a shopper's.
+ * The gate belongs here rather than at the fifteen call sites: it cannot be
+ * forgotten by the sixteenth, and it needs no change to what `isDesigner`
+ * means for sections and blocks, which is what browse mode is built on.
+ *
+ * Framing is deliberately not part of it. A production storefront is
+ * legitimately inside an iframe — payment providers, marketplace previews —
+ * and those shoppers' events are real.
+ */
+const isThemeEditorAttached = (): boolean =>
+  typeof window !== 'undefined' &&
+  (window as { __themeEditorDesigner?: boolean }).__themeEditorDesigner ===
+    true;
+
 /**
  * Emit one commerce moment. `items` may carry nulls from the builder; they are
  * dropped, and an action whose items ALL dropped is not emitted.
@@ -202,6 +224,9 @@ export const emitCommerceEvent = (
 ): void => {
   if (typeof window === 'undefined') return;
 
+  // Nothing reported from inside the editor, browse mode included.
+  if (isThemeEditorAttached()) return;
+
   try {
     const { items, value, currency, ...rest } = detail;
     const presentItems = items?.filter(