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

package/CHANGELOG.md

@@ -1,55 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.163-rc.0
-
-### Patch Changes
-
-- 8e040731e: ZERO-5235: let brands hang actions on order detail lines
-- c761b9fd: ZERO-5296: fall back to the storefront default language in the text block
-- 17a598da: ZERO-5296: report the storefront default language to the editor
-- 3b05a407: ZERO-5232: allow richtext settings on custom blocks
-- Updated dependencies [86187b1c2]
-- Updated dependencies [08390a87]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [4c3465ae]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [549da545]
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [d635d345]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [d860c917]
-- Updated dependencies [ac6cada1]
-- Updated dependencies [e90c0e02]
-- Updated dependencies [dc7f9ca5]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [0145dc3f]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [92086b29]
-- Updated dependencies [227b7408]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b1]
-- Updated dependencies [1595d458e]
-- Updated dependencies [dca128112]
-- Updated dependencies [9a7b0937]
-  - @akinon/next@2.0.163-rc.0
-  - @akinon/theme-contract@2.0.163-rc.0
+## 2.0.163
+
+### Patch Changes
+
+- 2c4fae70: ZERO-5305: Report product lists as GA4 lists on the commerce channel. Collection sections, product sliders and recommendation strips send `view_item_list` once seen and `select_item` with the list id, list name and the card's position; the favourites grid reports when it is seen rather than on mount; `section.seen` carries the section label and its product count. Nothing is emitted inside the editor.
+  - @akinon/next@2.0.163
+  - @akinon/theme-contract@2.0.163
 
 ## 2.0.162
 

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.163-rc.0",
+  "version": "2.0.163",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.163-rc.0",
+    "@akinon/next": "2.0.163",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.163-rc.0",
+    "@akinon/theme-contract": "2.0.163",
     "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.163-rc.0",
+    "@akinon/next": "2.0.163",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/commerce-channel-frozen.test.ts

@@ -30,11 +30,22 @@ const FROZEN_COMMERCE_CALL_SITES: Record<string, number> = {
   'blocks/auth-form-block.tsx': 3,
   'blocks/basket-items-block.tsx': 1,
   'blocks/favorite-button-block.tsx': 1,
-  'blocks/favourites-grid-block.tsx': 3,
+  // view_item_list moved to hooks/use-list-impression.ts (ZERO-5305): the
+  // grid reports when it is seen, as every other list does.
+  'blocks/favourites-grid-block.tsx': 2,
   'blocks/group-block.tsx': 1,
   'blocks/product-grid-block.tsx': 2,
   'blocks/product-recommendations-block.tsx': 1,
   'blocks/search-box-block.tsx': 1,
+  // view_item_list for the product rows that are not a listing grid — a
+  // collection carousel, a recommendations strip (ZERO-5305). An existing GA4
+  // verb, not a new moment: a storefront bridge maps it as it maps the
+  // listing grid's.
+  'hooks/use-list-impression.ts': 1,
+  // select_item for a product slider's card (ZERO-5305): the same verb the
+  // composed card's anchor reports from group-block, for the slides the
+  // slider draws itself.
+  'sections/posts-slider-section.tsx': 1,
   // One call, four page-scope actions behind it (view_item, view_cart,
   // begin_checkout, purchase) — the action is a variable there.
   'theme-placeholder-wrapper.tsx': 1

package/src/__tests__/editor-locale-bridge.test.tsx

@@ -28,7 +28,6 @@ const SETTINGS_LOCALES = [
 const mockLocalization = {
   locale: 'tr',
   locales: SETTINGS_LOCALES as Array<Record<string, unknown>>,
-  defaultLocaleValue: 'tr',
   setLocale: jest.fn()
 };
 
@@ -107,7 +106,6 @@ beforeEach(() => {
   postMessage.mockClear();
   mockLocalization.locale = 'tr';
   mockLocalization.locales = SETTINGS_LOCALES;
-  mockLocalization.defaultLocaleValue = 'tr';
   mockLocalization.setLocale = jest.fn();
   delete (window as { __iframeReadySent?: boolean }).__iframeReadySent;
 });
@@ -146,8 +144,7 @@ describe('inside the editor', () => {
             { value: 'en', label: 'English' },
             { value: 'tr', label: 'Türkçe' },
             { value: 'de', label: 'de' }
-          ],
-          defaultLocale: 'tr'
+          ]
         }
       })
     ]);
@@ -157,34 +154,6 @@ describe('inside the editor', () => {
     expect(targetOrigin).toBe(EDITOR_ORIGIN);
   });
 
-  it('posts the languages before the document reports ready', () => {
-    // The editor holds every per-language write until IFRAME_READY and takes
-    // "ready without languages" to mean they are never coming, so the order
-    // of the two frames is part of the contract.
-    render(placeholder('header'));
-
-    const types = postMessage.mock.calls.map(([message]) => message?.type);
-    expect(types).toContain('LOCALE_UPDATE');
-    expect(types).toContain('IFRAME_READY');
-    expect(types.indexOf('LOCALE_UPDATE')).toBeLessThan(
-      types.indexOf('IFRAME_READY')
-    );
-  });
-
-  it("posts the brand's default language, whichever it is", () => {
-    // The editor's per-language text controls take the plain-string form to
-    // mean this language; left to guess, the editor assumed English.
-    mockLocalization.defaultLocaleValue = 'de';
-
-    render(<EditorLocaleBridge />);
-
-    expect(localeFrames()).toEqual([
-      expect.objectContaining({
-        data: expect.objectContaining({ locale: 'tr', defaultLocale: 'de' })
-      })
-    ]);
-  });
-
   it("follows the editor's switch exactly once, with several placeholders mounted", () => {
     render(
       <>

package/src/__tests__/section-list-identity.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/'
+}));
+
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: ({ children }: { children?: React.ReactNode }) => (
+    <div>{children}</div>
+  )
+}));
+
+const wrapperProps: Array<Record<string, unknown>> = [];
+jest.mock('../sections/section-wrapper', () => ({
+  __esModule: true,
+  default: (
+    props: Record<string, unknown> & { children?: React.ReactNode }
+  ) => {
+    wrapperProps.push(props);
+    return (
+      <section data-section-id={(props.section as { id: string }).id}>
+        {props.children}
+      </section>
+    );
+  }
+}));
+
+import ThemeSection from '../theme-section';
+import { ThemeSettingsProvider } from '../theme-settings-context';
+
+/**
+ * A section with a renderer of its own (a product slider) is drawn through
+ * `SectionWrapper`, not the generic branch's <section>. ThemeSection hands the
+ * wrapper what it needs to report the section as the generic branch does
+ * (ZERO-5305): the product count, so a product row is never taken for a
+ * banner, and the rows with the list they are — the collection, named after
+ * the section's label.
+ */
+
+const ROWS = [
+  { pk: 1, base_code: 'B1', name: 'Polo', price: '1499' },
+  { pk: 2, base_code: 'B2', name: 'Shirt', price: '2499' }
+];
+
+const slider = (blocks: unknown[] = []) =>
+  ({
+    id: 'section-1',
+    type: 'flash-deals-slider',
+    name: 'section-1',
+    label: 'Picks Slider',
+    order: 3,
+    hidden: false,
+    properties: {},
+    styles: {},
+    dataSourceId: 'datasource-1',
+    dataSource: {
+      id: 'datasource-1',
+      type: 'collection',
+      details: { collection: { data: { products: ROWS } } }
+    },
+    blocks
+  } as never);
+
+const renderSection = (section: never) =>
+  render(
+    <ThemeSettingsProvider value={null}>
+      <ThemeSection
+        section={section}
+        placeholderId="home-body"
+        currentBreakpoint="desktop"
+        isDesigner={false}
+      />
+    </ThemeSettingsProvider>
+  );
+
+describe('a section drawn through SectionWrapper (ZERO-5305)', () => {
+  beforeEach(() => {
+    wrapperProps.length = 0;
+  });
+
+  it('is handed its product count and its rows as a list', () => {
+    renderSection(slider());
+
+    const props = wrapperProps[wrapperProps.length - 1];
+    expect(props.productCount).toBe(2);
+    expect(props.listProducts).toEqual(ROWS);
+    expect(props.listId).toBe('datasource-1');
+    expect(props.listName).toBe('Picks Slider');
+  });
+
+  it('lists nothing when a grid inside reports its own impressions', () => {
+    renderSection(
+      slider([
+        {
+          id: 'grid',
+          type: 'product-grid',
+          label: 'Grid',
+          properties: {},
+          styles: {},
+          order: 0,
+          hidden: false,
+          blocks: []
+        }
+      ])
+    );
+
+    const props = wrapperProps[wrapperProps.length - 1];
+    expect(props.listProducts).toBeNull();
+    expect(props.productCount).toBe(2);
+  });
+});

package/src/blocks/__tests__/favourites-grid-impression.test.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+
+import FavouritesGridBlock from '../favourites-grid-block';
+import { COMMERCE_EVENT_NAME } from '../../utils/analytics';
+import { LIST_IMPRESSION_DWELL_MS } from '../../hooks/use-list-impression';
+
+/**
+ * The favourites grid reports its favourites as a list when the grid is seen
+ * (ZERO-5305), as every other list does — not when it mounts. A grid kept on
+ * a page only for its empty state, its list laid out with `display: none`
+ * beside a favourites strip, reported the favourites a second time.
+ */
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ data: null, status: 'authenticated' })
+}));
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({ locale: 'tr', currency: 'try' })
+}));
+
+jest.mock('@akinon/next/redux/hooks', () => ({
+  __esModule: true,
+  useAppSelector: () => undefined,
+  useAppDispatch: () => jest.fn()
+}));
+
+const favourites = {
+  results: [
+    {
+      pk: 11,
+      product: {
+        pk: 101,
+        base_code: 'B101',
+        name: 'Shirt',
+        absolute_url: '/gomlek/',
+        price: '3999.90',
+        currency_type: 'try'
+      }
+    },
+    {
+      pk: 12,
+      product: {
+        pk: 102,
+        base_code: 'B102',
+        name: 'Polo',
+        absolute_url: '/polo/',
+        price: '2499.00',
+        currency_type: 'try'
+      }
+    }
+  ]
+};
+
+// Every `@akinon/next/data/client/*` subpath maps to the same mock file.
+jest.mock('@akinon/next/data/client/account', () => ({
+  __esModule: true,
+  useGetFavoritesQuery: () => ({ data: mockFavourites(), isLoading: false }),
+  useRemoveFavoriteMutation: () => [jest.fn(), { isLoading: false }],
+  useAddProductMutation: () => [jest.fn(), { isLoading: false }],
+  basketApi: { util: { invalidateTags: jest.fn() } }
+}));
+
+let current = favourites;
+const mockFavourites = () => current;
+
+class RecordingObserver {
+  static instances: RecordingObserver[] = [];
+  callback: IntersectionObserverCallback;
+  observed: Element[] = [];
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback;
+    RecordingObserver.instances.push(this);
+  }
+
+  observe(node: Element) {
+    this.observed.push(node);
+  }
+
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+
+  cross() {
+    act(() => {
+      this.callback(
+        [
+          {
+            isIntersecting: true,
+            intersectionRatio: 1,
+            target: this.observed[0]
+          } as unknown as IntersectionObserverEntry
+        ],
+        this as unknown as IntersectionObserver
+      );
+    });
+  }
+}
+
+const block = {
+  id: 'favourites-grid-1',
+  type: 'favourites-grid',
+  label: 'Favourites Grid',
+  order: 0,
+  hidden: false,
+  properties: {},
+  styles: {},
+  blocks: []
+};
+
+describe('favourites-grid list impression (ZERO-5305)', () => {
+  let received: Array<Record<string, unknown>>;
+  let originalObserver: unknown;
+  const onCommerce = (event: Event) =>
+    received.push((event as CustomEvent<Record<string, unknown>>).detail);
+  const lists = () => received.filter((d) => d.action === 'view_item_list');
+  const latest = () =>
+    RecordingObserver.instances[RecordingObserver.instances.length - 1];
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    current = favourites;
+    received = [];
+    window.addEventListener(COMMERCE_EVENT_NAME, onCommerce);
+    RecordingObserver.instances = [];
+    originalObserver = (window as unknown as Record<string, unknown>)
+      .IntersectionObserver;
+    (window as unknown as Record<string, unknown>).IntersectionObserver =
+      RecordingObserver;
+  });
+
+  afterEach(() => {
+    window.removeEventListener(COMMERCE_EVENT_NAME, onCommerce);
+    (window as unknown as Record<string, unknown>).IntersectionObserver =
+      originalObserver;
+    jest.useRealTimers();
+  });
+
+  it('reports nothing until the grid is seen, then the favourites as one list', () => {
+    const { container } = render(
+      <FavouritesGridBlock
+        block={block}
+        placeholderId="p1"
+        sectionId="s1"
+        isDesigner={false}
+      />
+    );
+
+    expect(lists()).toEqual([]);
+    expect(latest().observed[0]).toBe(
+      container.querySelector('[data-favourites-grid]')
+    );
+
+    latest().cross();
+    act(() => {
+      jest.advanceTimersByTime(LIST_IMPRESSION_DWELL_MS);
+    });
+
+    expect(lists()).toHaveLength(1);
+    expect(lists()[0]).toMatchObject({ currency: 'try' });
+    expect(lists()[0].items).toEqual([
+      expect.objectContaining({
+        id: '101',
+        name: 'Shirt',
+        index: 0,
+        listId: 'favourites',
+        listName: 'Favourites'
+      }),
+      expect.objectContaining({
+        id: '102',
+        name: 'Polo',
+        index: 1,
+        listId: 'favourites',
+        listName: 'Favourites'
+      })
+    ]);
+  });
+
+  it('reports the new list once a favourite is removed', () => {
+    const { rerender } = render(
+      <FavouritesGridBlock
+        block={block}
+        placeholderId="p1"
+        sectionId="s1"
+        isDesigner={false}
+      />
+    );
+    latest().cross();
+    act(() => {
+      jest.advanceTimersByTime(LIST_IMPRESSION_DWELL_MS);
+    });
+
+    current = { results: [favourites.results[1]] };
+    rerender(
+      <FavouritesGridBlock
+        block={block}
+        placeholderId="p1"
+        sectionId="s1"
+        isDesigner={false}
+      />
+    );
+    latest().cross();
+    act(() => {
+      jest.advanceTimersByTime(LIST_IMPRESSION_DWELL_MS);
+    });
+
+    expect(lists()).toHaveLength(2);
+    expect(lists()[1].items).toEqual([
+      expect.objectContaining({ id: '102', index: 0 })
+    ]);
+  });
+});

package/src/blocks/__tests__/group-block-list-click.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+import GroupBlock from '../group-block';
+import { ThemeItemScopeProvider } from '../product-block-utils';
+import { ThemeSectionListProvider } from '../../theme-section-data-context';
+import { COMMERCE_EVENT_NAME } from '../../utils/analytics';
+
+/**
+ * A product card's click names the list the card sits in — the section's
+ * carousel, not the product's catalogue group — and its place in it
+ * (ZERO-5305), the identity the row's view_item_list carries.
+ */
+
+const card = () =>
+  ({
+    block: {
+      id: 'card',
+      type: 'group',
+      label: 'card',
+      value: '',
+      properties: { tag: 'a', href: '#product' },
+      styles: {},
+      order: 0,
+      hidden: false,
+      blocks: []
+    },
+    placeholderId: 'home-body',
+    sectionId: 'sec_new_in',
+    isDesigner: false
+  } as any);
+
+const PRODUCT = { pk: 7, base_code: 'B7', name: 'Polo', price: '1499' };
+
+describe('a product card click (ZERO-5305)', () => {
+  let received: Array<Record<string, unknown>>;
+  const onCommerce = (event: Event) =>
+    received.push((event as CustomEvent<Record<string, unknown>>).detail);
+
+  beforeEach(() => {
+    received = [];
+    window.addEventListener(COMMERCE_EVENT_NAME, onCommerce);
+  });
+
+  afterEach(() => {
+    window.removeEventListener(COMMERCE_EVENT_NAME, onCommerce);
+  });
+
+  it('reports the section’s list and the card’s place in it', () => {
+    const { container } = render(
+      <ThemeSectionListProvider listId="collection-12" listName="New Arrivals">
+        <ThemeItemScopeProvider product={PRODUCT as never} index={3}>
+          <GroupBlock {...card()} />
+        </ThemeItemScopeProvider>
+      </ThemeSectionListProvider>
+    );
+
+    fireEvent.click(container.querySelector('a') as HTMLElement);
+
+    expect(received).toHaveLength(1);
+    expect(received[0]).toMatchObject({ action: 'select_item' });
+    expect(received[0].items).toEqual([
+      expect.objectContaining({
+        baseCode: 'B7',
+        index: 3,
+        listId: 'collection-12',
+        listName: 'New Arrivals'
+      })
+    ]);
+  });
+
+  it('still reports the product outside a section list', () => {
+    const { container } = render(
+      <ThemeItemScopeProvider product={PRODUCT as never}>
+        <GroupBlock {...card()} />
+      </ThemeItemScopeProvider>
+    );
+
+    fireEvent.click(container.querySelector('a') as HTMLElement);
+
+    expect(received[0].items).toEqual([
+      expect.not.objectContaining({ listId: expect.anything() })
+    ]);
+  });
+});

package/src/blocks/__tests__/text-block.test.tsx

@@ -2,31 +2,9 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import TextBlock from '../text-block';
 
-// The page's language and the storefront's default, as the localization
-// provider reports them. Most cases run on an English-default store showing
-// English; the fallback case moves both.
-const mockLocalization = { locale: 'en-us', defaultLocaleValue: 'en-us' };
-
-jest.mock('@akinon/next/hooks', () => ({
-  __esModule: true,
-  useLocalization: () => ({
-    t: (path: string) => path,
-    setLocale: () => {},
-    setCurrency: () => {},
-    locale: mockLocalization.locale,
-    currency: 'USD',
-    locales: [{ value: 'en-us' }, { value: 'tr-tr' }],
-    currencies: ['USD'],
-    defaultLocaleValue: mockLocalization.defaultLocaleValue,
-    defaultCurrencyCode: 'USD',
-    localeUrlStrategy: 'hide-default-locale'
-  })
-}));
-
-beforeEach(() => {
-  mockLocalization.locale = 'en-us';
-  mockLocalization.defaultLocaleValue = 'en-us';
-});
+// The mocked useLocalization (jest/__mocks__/akinon-next-hooks.js) returns
+// locale: 'en-us'. process.env.NEXT_PUBLIC_DEFAULT_LOCALE is unset in the
+// jest env, so the component's defaultLocale falls back to 'en'.
 
 const renderBlock = (value: unknown, styles?: Record<string, unknown>) => {
   const block: any = { id: 'b1', type: 'text', value, styles };
@@ -56,16 +34,10 @@ describe('TextBlock value-shape resolution', () => {
     );
   });
 
-  it("falls back to the storefront's default language when the active one is absent", () => {
-    // A Turkish-default store showing German. The entry under `en` is what
-    // the block used to show: its default was read from an env variable
-    // that falls back to English, not from the storefront (ZERO-5296).
-    mockLocalization.locale = 'de-de';
-    mockLocalization.defaultLocaleValue = 'tr-tr';
-
-    const { container } = renderBlock({ en: 'EN', 'tr-tr': 'TR' });
+  it('falls back to defaultLocale ("en") when active locale is absent', () => {
+    const { container } = renderBlock({ en: 'EN', fr: 'FR' });
     expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
-      'TR'
+      'EN'
     );
   });