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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.163-beta.0
+## 2.0.163
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.163-beta.0
-  - @akinon/theme-contract@2.0.163-beta.0
+- 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-beta.0",
+  "version": "2.0.163",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.163-beta.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-beta.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-beta.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__/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/favourites-grid-block.tsx

@@ -25,6 +25,7 @@ import {
   readItemsCurrency
 } from '../utils/analytics';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { useListImpression } from '../hooks/use-list-impression';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 
@@ -283,25 +284,21 @@ const FavouritesGridBlock = ({
 
   // GA4 view_item_list (ZERO-4869), once per distinct wishlist content: the
   // favourites grid IS the list impression on this screen. Keyed by row keys
-  // so a remove refires with the new list, a mere re-render does not. A ref,
-  // not a global — each visit mounts a fresh grid and must report again.
+  // so a remove refires with the new list, a mere re-render does not. Sent
+  // when the grid is seen, as every other list is (ZERO-5305): a grid kept
+  // only for its empty state, its list laid out with `display: none` next to
+  // a favourites strip, used to report the favourites a second time.
   const rowsKey = rows.map((row) => row.key).join(',');
-  const pushedListKey = React.useRef<string | null>(null);
-  React.useEffect(() => {
-    if (isDesigner || rows.length === 0) return;
-    if (pushedListKey.current === rowsKey) return;
-    pushedListKey.current = rowsKey;
-    emitCommerceEvent('view_item_list', {
-      currency: localeCurrency,
-      items: rows.map((row) =>
-        buildCommerceItem(row as Record<string, unknown>, {
-          listId: 'favourites',
-          listName: 'Favourites'
-        })
-      )
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowsKey, isDesigner]);
+  const listRef = React.useRef<HTMLDivElement>(null);
+  useListImpression({
+    ref: listRef,
+    products: rows as Array<Record<string, unknown>>,
+    listId: 'favourites',
+    listName: 'Favourites',
+    enabled: !isDesigner,
+    refreshKey: rowsKey,
+    currency: localeCurrency
+  });
 
   // A designer who marked a child as the card layout gets that layout repeated
   // per saved product; otherwise the built-in card renders unchanged.
@@ -402,6 +399,7 @@ const FavouritesGridBlock = ({
 
   return (
     <div
+      ref={listRef}
       data-favourites-grid=""
       data-favourites-grid-id={gridId}
       aria-busy={isBusy}

package/src/blocks/group-block.tsx

@@ -17,6 +17,7 @@ import { DesignerPlaceholder, useThemeItemScope } from './product-block-utils';
 import { renderComposedChildren } from './render-composed-children';
 import { CardListSlider, readListGap } from '../components/card-list-slider';
 import { CardListViews } from '../components/card-list-views';
+import { useThemeSectionList } from '../theme-section-data-context';
 
 /**
  * Composed anchors to the storefront's own routes navigate client-side. A
@@ -59,17 +60,28 @@ const GroupBlock = ({
   const Tag = tag as keyof React.JSX.IntrinsicElements;
   const href = tag === 'a' ? block.properties?.href : undefined;
   const itemScope = useThemeItemScope();
+  const sectionList = useThemeSectionList();
 
   // GA4 select_item (ZERO-4869): a composed anchor inside a repeated product
   // row IS the product card's click. The row scope carries the product, so no
-  // per-card wiring is needed — and outside a row this stays silent.
+  // per-card wiring is needed — and outside a row this stays silent. The card
+  // reports the list it sits in — the section's — and its place in it
+  // (ZERO-5305), the same identity the row's view_item_list carries.
   const handleAnchorAnalytics = () => {
     if (isDesigner) return;
     const scopedProduct = itemScope?.product;
     if (!scopedProduct) return;
     emitCommerceEvent('select_item', {
       currency: readItemsCurrency(scopedProduct as Record<string, unknown>),
-      items: [buildCommerceItem(scopedProduct as Record<string, unknown>)]
+      items: [
+        buildCommerceItem(scopedProduct as Record<string, unknown>, {
+          ...(typeof itemScope?.index === 'number'
+            ? { index: itemScope.index }
+            : null),
+          ...(sectionList?.listId ? { listId: sectionList.listId } : null),
+          ...(sectionList?.listName ? { listName: sectionList.listName } : null)
+        })
+      ]
     });
   };
 

package/src/blocks/item-template.tsx

@@ -158,6 +158,7 @@ export const ItemTemplateList = ({
                 product={
                   scoped ?? (isDesigner ? DESIGNER_SAMPLE_PRODUCT : null)
                 }
+                index={index}
               >
                 {row}
               </ThemeItemScopeProvider>

package/src/blocks/product-block-utils.tsx

@@ -99,6 +99,8 @@ export interface ThemeProduct {
  */
 interface ThemeItemScopeValue {
   product: ThemeProduct | null;
+  /** The row's place in its list (0-based), when the repeat knows it. */
+  index?: number;
 }
 
 const ThemeItemScopeContext = React.createContext<ThemeItemScopeValue | null>(
@@ -107,12 +109,14 @@ const ThemeItemScopeContext = React.createContext<ThemeItemScopeValue | null>(
 
 export const ThemeItemScopeProvider = ({
   product,
+  index,
   children
 }: {
   product: ThemeProduct | null;
+  index?: number;
   children: React.ReactNode;
 }) => {
-  const value = React.useMemo(() => ({ product }), [product]);
+  const value = React.useMemo(() => ({ product, index }), [product, index]);
 
   return (
     <ThemeItemScopeContext.Provider value={value}>