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

package/CHANGELOG.md

@@ -1,40 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.108-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.108-rc.0
-  - @akinon/theme-contract@2.0.108-rc.0
+## 2.0.108
+
+### Patch Changes
+
+- 6ec2ef3: ZERO-5080: Render collection-backed section products server-side instead of the editor's frozen snapshot
+  - @akinon/next@2.0.108
+  - @akinon/theme-contract@2.0.108
 
 ## 2.0.107
 

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

package/src/__tests__/section-live-rows.test.ts

@@ -0,0 +1,248 @@
+/**
+ * A section bound to a collection has to render its products on the SERVER.
+ *
+ * It did not: `details.collection.data` was only written when the data source
+ * carried an editor-persisted `collection.slug`, and the editor never persists
+ * one -- so every brand fell through to `details.collection.products`, the
+ * snapshot frozen when the collection was picked. On a force-static page that
+ * snapshot is what every shopper, crawler and no-JS visit gets: rows with no
+ * `absolute_url` (every card linking to `#`) at whatever price the catalogue
+ * showed that day, swapped out visibly once the client refetched.
+ *
+ * The live rows were already in hand the whole time: the loader fetches each
+ * section's own widget for its block values, and for a collection-backed
+ * section that answer carries the bound collection's live products.
+ */
+jest.mock('server-only', () => ({}), { virtual: true });
+
+const getWidgetData = jest.fn();
+const getWidgetSchemaData = jest.fn();
+const getCollectionWidgetData = jest.fn();
+const getPreviewSnapshot = jest.fn(async () => null as unknown);
+
+jest.mock('@akinon/next/data/server', () => ({
+  getWidgetData: (...args: unknown[]) => getWidgetData(...args),
+  getWidgetSchemaData: (...args: unknown[]) => getWidgetSchemaData(...args),
+  getCollectionWidgetData: (...args: unknown[]) =>
+    getCollectionWidgetData(...args),
+  getPreviewSnapshot: (...args: unknown[]) =>
+    (getPreviewSnapshot as (...a: unknown[]) => unknown)(...args)
+}));
+
+jest.mock(
+  '@akinon/next/utils/app-fetch',
+  () => ({ __esModule: true, default: jest.fn() }),
+  { virtual: true }
+);
+
+jest.mock(
+  '@akinon/next/utils/server-variables',
+  () => ({ ServerVariables: { locale: 'tr', currency: 'try' } }),
+  { virtual: true }
+);
+
+import { loadPlaceholderSections } from '../load-placeholder-sections';
+
+const SLOT = 'homepage';
+const SECTION = 'rmd8i';
+const SOURCE_ID = 'ds-1';
+
+/** What the backend returns for a section bound to a live collection. */
+const LIVE_ROWS = [
+  { pk: 1, name: 'Live one', absolute_url: '/live-one/', price: '199.99' },
+  { pk: 2, name: 'Live two', absolute_url: '/live-two/', price: '299.99' }
+];
+
+/** What the editor saved when the designer picked the collection: no links. */
+const SNAPSHOT_ROWS = [
+  { pk: 9, name: 'Frozen one', price: '4999.99' },
+  { pk: 8, name: 'Frozen two', price: '4999.99' }
+];
+
+const placeholderWidget = () => ({
+  slug: SLOT,
+  attributes: {
+    theme_editor_placeholder: {
+      value: JSON.stringify([{ section_slug: SECTION, order: 0 }])
+    }
+  }
+});
+
+const themeConfigWidget = (dataSources: unknown[]) => ({
+  slug: 'theme-config',
+  attributes: { theme_dataSources: { value: JSON.stringify(dataSources) } }
+});
+
+const collectionSource = (collection: Record<string, unknown>) => ({
+  id: SOURCE_ID,
+  name: 'Picked collection',
+  type: 'collection',
+  details: { collection }
+});
+
+/**
+ * Drives the live path: the placeholder lists one section, the section widget
+ * answers with `sectionWidget`, and theme-config carries `dataSources`.
+ */
+const load = async (options: {
+  dataSources: unknown[];
+  sectionWidget: unknown;
+  /** Answer for the collection's own widget slug, when the source has one. */
+  collectionWidget?: unknown;
+  dataSourceId?: string | null;
+}) => {
+  const { dataSources, sectionWidget, collectionWidget = null } = options;
+  const dataSourceId =
+    options.dataSourceId === undefined ? SOURCE_ID : options.dataSourceId;
+
+  getWidgetData.mockImplementation(async ({ slug }: { slug: string }) => {
+    if (slug === SLOT) return placeholderWidget();
+    if (slug === 'theme-config') return themeConfigWidget(dataSources);
+    if (slug === SECTION) return sectionWidget;
+    return collectionWidget;
+  });
+
+  getWidgetSchemaData.mockResolvedValue({
+    schema: {
+      [SECTION]: {
+        metadata: {
+          name: 'Product slider',
+          ...(dataSourceId ? { dataSourceId } : {}),
+          blocks: []
+        }
+      }
+    }
+  });
+
+  const loaded = await loadPlaceholderSections(SLOT);
+  return loaded?.sections[0];
+};
+
+beforeEach(() => {
+  getWidgetData.mockReset();
+  getWidgetSchemaData.mockReset().mockResolvedValue(null);
+  getCollectionWidgetData.mockReset().mockResolvedValue(null);
+  getPreviewSnapshot.mockReset().mockResolvedValue(null);
+});
+
+describe('collection-backed sections on the server', () => {
+  it('renders the live rows the section widget already carries', async () => {
+    const section = await load({
+      dataSources: [collectionSource({ id: 'c-1', products: SNAPSHOT_ROWS })],
+      sectionWidget: { slug: SECTION, attributes: {}, products: LIVE_ROWS }
+    });
+
+    // `data` is what the storefront reads first, and it holds the whole widget
+    // answer -- the shape the collection-slug path has always written.
+    expect(section?.dataSource.details.collection.data).toEqual({
+      slug: SECTION,
+      attributes: {},
+      products: LIVE_ROWS
+    });
+  });
+
+  it('leaves the editor snapshot in place beside the live rows', async () => {
+    const section = await load({
+      dataSources: [collectionSource({ id: 'c-1', products: SNAPSHOT_ROWS })],
+      sectionWidget: { products: LIVE_ROWS }
+    });
+
+    // The designer reads `products` first, so the editor keeps showing the
+    // collection exactly as it was picked.
+    expect(section?.dataSource.details.collection.products).toEqual(
+      SNAPSHOT_ROWS
+    );
+  });
+
+  it('does not overwrite a snapshot when the answer carries no products', async () => {
+    const section = await load({
+      dataSources: [collectionSource({ id: 'c-1', products: SNAPSHOT_ROWS })],
+      sectionWidget: { slug: SECTION, attributes: { title: 'Picks' } }
+    });
+
+    expect(section?.dataSource.details.collection.data).toBeUndefined();
+    expect(section?.dataSource.details.collection.products).toEqual(
+      SNAPSHOT_ROWS
+    );
+  });
+
+  it('does not overwrite a snapshot with an empty product list', async () => {
+    const section = await load({
+      dataSources: [collectionSource({ id: 'c-1', products: SNAPSHOT_ROWS })],
+      sectionWidget: { slug: SECTION, products: [] }
+    });
+
+    expect(section?.dataSource.details.collection.data).toBeUndefined();
+    expect(section?.dataSource.details.collection.products).toEqual(
+      SNAPSHOT_ROWS
+    );
+  });
+
+  it('keeps the collection-slug refetch in charge when it fires', async () => {
+    const refetched = { products: [{ pk: 3, absolute_url: '/from-slug/' }] };
+
+    const section = await load({
+      dataSources: [
+        collectionSource({
+          id: 'c-1',
+          slug: 'collection-widget',
+          products: SNAPSHOT_ROWS
+        })
+      ],
+      sectionWidget: { products: LIVE_ROWS },
+      collectionWidget: refetched
+    });
+
+    expect(section?.dataSource.details.collection.data).toEqual(refetched);
+  });
+
+  it('falls back to the section answer when the slug refetch comes back empty', async () => {
+    const section = await load({
+      dataSources: [
+        collectionSource({ id: 'c-1', slug: 'gone', products: SNAPSHOT_ROWS })
+      ],
+      sectionWidget: { products: LIVE_ROWS },
+      collectionWidget: null
+    });
+
+    expect(section?.dataSource.details.collection.data).toEqual({
+      products: LIVE_ROWS
+    });
+  });
+
+  it('keeps an already-resolved collection rather than replacing it', async () => {
+    const resolved = { products: [{ pk: 4, absolute_url: '/already/' }] };
+
+    const section = await load({
+      dataSources: [
+        collectionSource({ id: 'c-1', data: resolved, products: SNAPSHOT_ROWS })
+      ],
+      sectionWidget: { products: LIVE_ROWS }
+    });
+
+    expect(section?.dataSource.details.collection.data).toEqual(resolved);
+  });
+
+  it('leaves a section with no data source untouched', async () => {
+    const section = await load({
+      dataSources: [],
+      sectionWidget: { slug: SECTION, attributes: {}, products: LIVE_ROWS },
+      dataSourceId: null
+    });
+
+    expect(section?.dataSourceId).toBeUndefined();
+    expect(section?.dataSource).toBeUndefined();
+  });
+
+  it('leaves a non-collection data source untouched', async () => {
+    const section = await load({
+      dataSources: [
+        { id: SOURCE_ID, type: 'static', details: { static: { data: [] } } }
+      ],
+      sectionWidget: { products: LIVE_ROWS }
+    });
+
+    expect(section?.dataSource.details.collection).toBeUndefined();
+    expect(section?.dataSource.details.static).toEqual({ data: [] });
+  });
+});

package/src/load-placeholder-sections.ts

@@ -62,15 +62,44 @@ const getWidgetSchemaData = async <T,>(args: {
   return directFetch<T>(`/widgets/${args.widgetSlug}/schema/`);
 };
 
+/** Writes a fetched answer into the field the renderers read as "live rows". */
+const withCollectionData = (dataSource: any, collectionData: unknown): any => ({
+  ...dataSource,
+  details: {
+    ...dataSource.details,
+    collection: {
+      ...dataSource.details.collection,
+      data: collectionData
+    }
+  }
+});
+
+/**
+ * A widget answer counts as live rows only when it actually carries a
+ * non-empty `products` array: a section with no data source attached answers
+ * without the key at all, and an empty list must never replace the editor's
+ * snapshot with nothing to render.
+ */
+const carriesProducts = (widgetData: unknown): boolean =>
+  !!widgetData &&
+  typeof widgetData === 'object' &&
+  Array.isArray((widgetData as { products?: unknown }).products) &&
+  (widgetData as { products: unknown[] }).products.length > 0;
+
 /**
  * Resolves a section's data source reference into the object the renderer
  * expects, fetching collection data for collection-backed sources. Shared by
  * the live render path and the preview-snapshot path so the two cannot drift.
+ *
+ * `sectionWidgetData` is the section's OWN widget answer, which the live path
+ * has already fetched for its block values. See the fallback below for why it
+ * is handed over rather than fetched again.
  */
 async function resolveSectionDataSource(
   dataSourceId: string | undefined,
   dataSources: ThemeConfig['dataSources'],
-  sectionSlug: string
+  sectionSlug: string,
+  sectionWidgetData?: unknown
 ): Promise<any | undefined> {
   if (!dataSourceId) {
     return undefined;
@@ -90,47 +119,60 @@ async function resolveSectionDataSource(
     return dataSource;
   }
 
-  // Only fetch collection data if we have a valid widget slug
-  // (not the section's own slug which contains config, not products)
+  // The editor may persist the collection's own widget slug alongside the
+  // source. When it does, that widget is the authority and is refetched here.
   const collectionSlug = dataSource.details.collection?.slug;
-  if (!collectionSlug) {
-    // The saved products from the editor (details.collection.products)
-    // will be used as fallback
-    return dataSource;
-  }
-
-  try {
-    let collectionData = await getWidgetData<{
-      [key: string]: unknown;
-    }>({
-      slug: collectionSlug
-    });
 
-    if (!collectionData) {
-      collectionData = await getCollectionWidgetData<{
+  if (collectionSlug) {
+    try {
+      let collectionData = await getWidgetData<{
         [key: string]: unknown;
       }>({
         slug: collectionSlug
       });
-    }
 
-    if (collectionData) {
-      return {
-        ...dataSource,
-        details: {
-          ...dataSource.details,
-          collection: {
-            ...dataSource.details.collection,
-            data: collectionData
-          }
-        }
-      };
+      if (!collectionData) {
+        collectionData = await getCollectionWidgetData<{
+          [key: string]: unknown;
+        }>({
+          slug: collectionSlug
+        });
+      }
+
+      if (collectionData) {
+        return withCollectionData(dataSource, collectionData);
+      }
+    } catch (error) {
+      console.error(
+        `Error fetching widget data for section ${sectionSlug}:`,
+        error
+      );
     }
-  } catch (error) {
-    console.error(
-      `Error fetching widget data for section ${sectionSlug}:`,
-      error
-    );
+  }
+
+  /**
+   * No slug, or the refetch came back empty. The section's own widget answer
+   * is the second authority: for a collection-backed section the backend
+   * returns the bound collection's LIVE rows on it, `absolute_url` and current
+   * prices included — and the live path has that answer in hand already.
+   *
+   * It used to be thrown away, so the server rendered the editor's saved
+   * `products` instead: the snapshot frozen when the designer picked the
+   * collection. Dead `href="#"` links and yesterday's prices in the served
+   * HTML, then a visible swap once the client refetched. Sources saved before
+   * the editor began persisting `collection.slug` carry none, so this is the
+   * path they take.
+   *
+   * Only ever fills an ABSENT `data` — a source that already resolved keeps
+   * what it resolved to, and the editor reads `products` first either way, so
+   * the designer still sees the collection exactly as it was picked.
+   */
+  if (
+    dataSource.details.collection &&
+    !dataSource.details.collection.data &&
+    carriesProducts(sectionWidgetData)
+  ) {
+    return withCollectionData(dataSource, sectionWidgetData);
   }
 
   return dataSource;
@@ -366,7 +408,8 @@ export async function loadPlaceholderSections(
           const dataSourceWithData = await resolveSectionDataSource(
             dataSourceId,
             dataSources,
-            sectionSlug
+            sectionSlug,
+            sectionData
           );
 
           const section: Section = {