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

package/CHANGELOG.md

@@ -1,40 +1,13 @@
 # @akinon/pz-theme
 
-## 2.0.110-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 [1595d45]
-- Updated dependencies [dca1281]
-  - @akinon/next@2.0.110-rc.0
-  - @akinon/theme-contract@2.0.110-rc.0
+## 2.0.110
+
+### Patch Changes
+
+- b4e3e64: ZERO-5084: Show a collection section's live rows on the theme editor canvas once its pick is saved
+- Updated dependencies [b4e3e64]
+  - @akinon/theme-contract@2.0.110
+  - @akinon/next@2.0.110
 
 ## 2.0.109
 

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

package/src/__tests__/designer-live-rows.test.tsx

@@ -0,0 +1,498 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+import { __resetBrowseModeForTests } from '../browse-mode';
+import { defineCustomBlock, registerCustomBlocks } from '../custom';
+import { useThemeSectionData } from '../theme-section-data-context';
+import { __resetEditorBridgeForTests } from '../editor-bridge';
+import ThemePlaceholderWrapper from '../theme-placeholder-wrapper';
+
+/**
+ * ZERO-5084 — the editor canvas has to show the rows the storefront shows.
+ *
+ * A collection-backed section carries the SNAPSHOT captured when the merchant
+ * picked the collection (`collection.products`) and the section widget's LIVE
+ * answer (`collection.data`, written by the server loader). The canvas used to
+ * rank the snapshot first, so it drifted from the site as soon as the
+ * collection's contents changed (seen on zsa-zsa-zsu: the editor kept showing
+ * the six products picked months ago while the site showed today's).
+ *
+ * The one case where the snapshot is right is an UNSAVED pick: until it is
+ * published, the widget is still bound to the previous collection and its live
+ * answer is the wrong rows. The editor says which picks are saved with
+ * `dataSourceSaved` on each section of LOAD_THEME / UPDATE_THEME.
+ */
+
+// The shared mock returns the path as-is; the real helper is what decides
+// whether the canvas's request can be answered from a cache.
+jest.mock('@akinon/next/utils', () => {
+  const actual = jest.requireActual('@akinon/next/utils');
+  return {
+    ...actual,
+    buildClientRequestUrl: (path: string, options?: { cache?: boolean }) => {
+      let url = `/api/client${path}`;
+      if (options?.cache === false) {
+        url += `${url.includes('?') ? '&' : '?'}t=${Date.now()}`;
+      }
+      return url;
+    }
+  };
+});
+
+/**
+ * Two readers draw the rows below: the section's iterator (iterator-utils)
+ * and a block that reads the section's own rows through useThemeSectionData
+ * (theme-section), which is what the product-recommendations block does with
+ * source 'section'. Both have to agree with the storefront.
+ */
+function SectionRows() {
+  const data = useThemeSectionData();
+  return (
+    <p data-testid="section-rows">
+      {`rows:${(data?.items || []).map((item) => String(item.name)).join(',')}`}
+    </p>
+  );
+}
+registerCustomBlocks('livecheck', {
+  'section-rows': defineCustomBlock(SectionRows)
+});
+
+const EDITOR_ORIGIN = 'http://localhost:5174';
+const SLOT = 'home-body';
+const SECTION = 'rmd8i';
+const SOURCE_ID = 'datasource-ksy1x';
+
+const row = (pk: number, name: string) => ({
+  pk,
+  name,
+  price: '100.00',
+  absolute_url: `/p-${pk}/`
+});
+
+/** What the merchant picked in the Source panel, months ago. */
+const SNAPSHOT = [row(48, 'Solid Sari Carsaf'), row(71, 'Mino Sari Havlu')];
+/** What the section widget answers today, and what the storefront renders. */
+const LIVE = [row(4157, 'Rajpath Kirlent'), row(4957, 'Como Sezlong')];
+/** The widget's answer after a publish re-pointed it at another collection. */
+const REPOINTED_LIVE = [row(5446, 'Pera Pareo')];
+/** The snapshot of a pick made in this session. */
+const NEW_PICK = [row(900, 'New Pick One')];
+
+const collectionSource = (
+  collection: Record<string, unknown>,
+  id = SOURCE_ID
+) => ({
+  id,
+  name: 'Homepage picks',
+  type: 'collection',
+  details: { collection }
+});
+
+const TEMPLATE_BLOCKS = [
+  {
+    id: 'rows',
+    type: 'group',
+    label: 'Rows',
+    order: 0,
+    hidden: false,
+    isIterator: true,
+    iteratorDataPath: 'products',
+    properties: { tag: 'div', iteratorDataPath: 'products', iteratorCount: 2 },
+    styles: {},
+    blocks: [
+      {
+        id: 'name',
+        type: 'text',
+        label: 'Name',
+        order: 0,
+        hidden: false,
+        value: '',
+        properties: { dataBinding: 'item.name' },
+        styles: {},
+        blocks: []
+      }
+    ]
+  },
+  {
+    id: 'section-rows',
+    type: 'custom:livecheck:section-rows',
+    label: 'Section rows',
+    order: 1,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: []
+  }
+];
+
+const section = (dataSource: unknown, extra: Record<string, unknown> = {}) =>
+  ({
+    id: SECTION,
+    type: 'generic-section',
+    name: 'Product strip',
+    label: 'Product strip',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: TEMPLATE_BLOCKS,
+    dataSourceId: SOURCE_ID,
+    dataSource,
+    ...extra
+  }) as any;
+
+/** The theme-config record, as the server and the editor both hold it. */
+const PUBLISHED = { pk: 1, productLimit: 6, products: SNAPSHOT };
+
+/** The section as the server loader resolved it: live rows written in. */
+const serverSection = () =>
+  section(collectionSource({ ...PUBLISHED, data: { products: LIVE } }));
+
+const frameDocument = () => {
+  Object.defineProperty(window, 'top', {
+    configurable: true,
+    value: { name: 'designer' }
+  });
+  Object.defineProperty(window, 'parent', {
+    configurable: true,
+    value: { postMessage: jest.fn() }
+  });
+};
+
+const unframeDocument = () => {
+  Object.defineProperty(window, 'top', { configurable: true, value: window });
+  Object.defineProperty(window, 'parent', {
+    configurable: true,
+    value: window
+  });
+};
+
+const postFromEditor = (type: string, data: unknown) =>
+  act(() => {
+    fireEvent(
+      window,
+      new MessageEvent('message', {
+        origin: EDITOR_ORIGIN,
+        data: { type, data }
+      })
+    );
+  });
+
+const turnDesignerOn = () => postFromEditor('SET_THEME_EDITOR_COOKIE', true);
+
+/** LOAD_THEME / UPDATE_THEME carrying one section and one data source. */
+const sendTheme = (
+  collection: Record<string, unknown>,
+  sectionExtra: Record<string, unknown> = {},
+  type: 'LOAD_THEME' | 'UPDATE_THEME' = 'LOAD_THEME'
+) =>
+  postFromEditor(type, {
+    theme: {
+      dataSources: [collectionSource(collection)],
+      placeholders: [
+        {
+          id: SLOT,
+          slug: SLOT,
+          sections: [section(undefined, sectionExtra)].map(
+            ({ dataSource: _unused, ...wire }) => wire
+          )
+        }
+      ]
+    }
+  });
+
+const shows = (names: string[]) => {
+  names.forEach((name) => expect(screen.getByText(name)).toBeInTheDocument());
+  expect(screen.getByTestId('section-rows').textContent).toBe(
+    `rows:${names.join(',')}`
+  );
+};
+const hides = (names: string[]) =>
+  names.forEach((name) => expect(screen.queryByText(name)).toBeNull());
+const namesOf = (rows: { name: string }[]) => rows.map((r) => r.name);
+
+type Deferred = {
+  resolve: (value: unknown) => void;
+  promise: Promise<unknown>;
+};
+const deferred = (): Deferred => {
+  let resolve!: (value: unknown) => void;
+  const promise = new Promise((r) => {
+    resolve = r;
+  });
+  return { resolve, promise };
+};
+
+const jsonResponse = (body: unknown, status = 200) => ({
+  ok: status >= 200 && status < 300,
+  status,
+  json: async () => body
+});
+
+/** Lets pending fetch promise chains settle inside act. */
+const flush = async () => {
+  await act(async () => {
+    for (let i = 0; i < 5; i += 1) await Promise.resolve();
+  });
+};
+
+const fetchMock = jest.fn();
+
+const renderWrapper = (initialSections = [serverSection()]) =>
+  render(
+    <ThemePlaceholderWrapper
+      slug={SLOT}
+      initialSections={initialSections}
+      initialPlaceholderId={SLOT}
+      isDesignMode={false}
+      dataSources={[collectionSource(PUBLISHED)]}
+    />
+  );
+
+beforeEach(() => {
+  __resetBrowseModeForTests();
+  __resetEditorBridgeForTests();
+  delete (window as { __themeEditorDesigner?: boolean }).__themeEditorDesigner;
+  delete (window as { __iframeReadySent?: boolean }).__iframeReadySent;
+  fetchMock.mockReset();
+  (global as unknown as { fetch: unknown }).fetch = fetchMock;
+});
+
+describe('the editor canvas', () => {
+  beforeEach(frameDocument);
+
+  it('keeps the server rows while the editor has not said anything yet', () => {
+    renderWrapper();
+    turnDesignerOn();
+
+    // Nothing says a pick is unsaved yet, and these are the storefront's rows.
+    shows(namesOf(LIVE));
+    hides(namesOf(SNAPSHOT));
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('shows the snapshot to an editor that predates dataSourceSaved', () => {
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(PUBLISHED);
+
+    // Today's behaviour, unchanged: no flag means "not known to be saved".
+    shows(namesOf(SNAPSHOT));
+    hides(namesOf(LIVE));
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('shows the server rows for a saved, unchanged pick without a request', () => {
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(PUBLISHED, { dataSourceSaved: true });
+
+    shows(namesOf(LIVE));
+    hides(namesOf(SNAPSHOT));
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('keeps the snapshot of an unsaved pick even though the server wrote rows', () => {
+    renderWrapper();
+    turnDesignerOn();
+    // Re-pointed in the Source panel, not published: the widget still answers
+    // for the old collection, so its rows would be the wrong ones.
+    sendTheme({ pk: 2, productLimit: 6, products: NEW_PICK });
+
+    shows(namesOf(NEW_PICK));
+    hides(namesOf(LIVE));
+    hides(namesOf(SNAPSHOT));
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it('fetches the rows of a pick published in this session, snapshot until then', async () => {
+    const answer = deferred();
+    fetchMock.mockReturnValueOnce(answer.promise);
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme({ pk: 2, productLimit: 6, products: NEW_PICK });
+    shows(namesOf(NEW_PICK));
+
+    // Published: the editor now reports the new binding as saved. The server
+    // rows belong to the previous binding and must not come back.
+    sendTheme(
+      { pk: 2, productLimit: 6, products: NEW_PICK },
+      { dataSourceSaved: true },
+      'UPDATE_THEME'
+    );
+    shows(namesOf(NEW_PICK));
+    hides(namesOf(LIVE));
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock.mock.calls[0][0]).toMatch(
+      new RegExp(`^/api/client/widgets/${SECTION}/\\?t=\\d+$`)
+    );
+
+    answer.resolve(jsonResponse({ products: REPOINTED_LIVE }));
+    await flush();
+
+    shows(namesOf(REPOINTED_LIVE));
+    hides(namesOf(NEW_PICK));
+
+    // Once per section and binding: later updates reuse the rows.
+    sendTheme(
+      { pk: 2, productLimit: 6, products: NEW_PICK },
+      { dataSourceSaved: true },
+      'UPDATE_THEME'
+    );
+    await flush();
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    shows(namesOf(REPOINTED_LIVE));
+  });
+
+  it('asks the collection widget first when the source carries its slug', async () => {
+    fetchMock
+      .mockResolvedValueOnce(jsonResponse({ detail: 'Not found.' }, 404))
+      .mockResolvedValueOnce(jsonResponse({ products: REPOINTED_LIVE }));
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(
+      { pk: 2, slug: 'summer', productLimit: 6, products: NEW_PICK },
+      { dataSourceSaved: true }
+    );
+    await flush();
+
+    expect(fetchMock.mock.calls.map(([url]) => url.split('?')[0])).toEqual([
+      '/api/client/widgets/summer/',
+      '/api/client/product_collection_widgets/summer/'
+    ]);
+    shows(namesOf(REPOINTED_LIVE));
+  });
+
+  it('keeps the snapshot when the widget answers without products', async () => {
+    fetchMock.mockResolvedValueOnce(
+      jsonResponse({ slug: SECTION, attributes: {}, products: [] })
+    );
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(
+      { pk: 2, productLimit: 6, products: NEW_PICK },
+      { dataSourceSaved: true }
+    );
+    await flush();
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    shows(namesOf(NEW_PICK));
+    hides(namesOf(LIVE));
+  });
+
+  it('never attaches a late answer to a binding the section has left', async () => {
+    const lateAnswer = deferred();
+    fetchMock
+      .mockReturnValueOnce(lateAnswer.promise)
+      .mockResolvedValueOnce(
+        jsonResponse({ products: [row(7, 'Third Pick Live')] })
+      );
+
+    renderWrapper();
+    turnDesignerOn();
+    sendTheme(
+      { pk: 2, productLimit: 6, products: NEW_PICK },
+      { dataSourceSaved: true }
+    );
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    // Re-pointed again before the answer came back, not published yet.
+    const THIRD_PICK = [row(700, 'Third Pick Snapshot')];
+    sendTheme(
+      { pk: 3, productLimit: 6, products: THIRD_PICK },
+      {},
+      'UPDATE_THEME'
+    );
+
+    lateAnswer.resolve(jsonResponse({ products: REPOINTED_LIVE }));
+    await flush();
+
+    shows(namesOf(THIRD_PICK));
+    hides(namesOf(REPOINTED_LIVE));
+
+    // And once that pick is published, its own rows are asked for.
+    sendTheme(
+      { pk: 3, productLimit: 6, products: THIRD_PICK },
+      { dataSourceSaved: true },
+      'UPDATE_THEME'
+    );
+    await flush();
+
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    shows(['Third Pick Live']);
+    hides(namesOf(REPOINTED_LIVE));
+  });
+
+  it('treats a product-limit change like a new pick', () => {
+    renderWrapper();
+    turnDesignerOn();
+    // Same collection, different limit: publishing changes product_limit, so
+    // the server rows (answered for limit 6) are not this binding's rows.
+    fetchMock.mockReturnValue(new Promise(() => undefined));
+    sendTheme(
+      { pk: 1, productLimit: 2, products: SNAPSHOT },
+      { dataSourceSaved: true }
+    );
+
+    shows(namesOf(SNAPSHOT));
+    hides(namesOf(LIVE));
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('the storefront', () => {
+  beforeEach(unframeDocument);
+
+  it('renders the server rows and asks for nothing', () => {
+    const view = renderWrapper();
+
+    shows(namesOf(LIVE));
+    hides(namesOf(SNAPSHOT));
+    expect(fetchMock).not.toHaveBeenCalled();
+
+    // Same markup as a section rendered straight from the server's answer.
+    const direct = render(
+      <ThemePlaceholderWrapper
+        slug="direct"
+        initialSections={[serverSection()]}
+        initialPlaceholderId="direct"
+        isDesignMode={false}
+      />
+    );
+    expect(
+      view.container.querySelector(`[data-placeholder="${SLOT}"]`)?.innerHTML
+    ).toBe(
+      direct.container.querySelector('[data-placeholder="direct"]')?.innerHTML
+    );
+  });
+
+  it('ignores a theme frame from an untrusted origin', () => {
+    renderWrapper();
+    act(() => {
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          origin: 'https://evil.example',
+          data: {
+            type: 'LOAD_THEME',
+            data: {
+              theme: {
+                dataSources: [collectionSource(PUBLISHED)],
+                placeholders: [
+                  { id: SLOT, slug: SLOT, sections: [section(undefined)] }
+                ]
+              }
+            }
+          }
+        })
+      );
+    });
+
+    shows(namesOf(LIVE));
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});