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

package/CHANGELOG.md

@@ -1,12 +1,13 @@
 # @akinon/pz-theme
 
-## 2.0.39-beta.0
+## 2.0.39
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.39-beta.0
-  - @akinon/theme-contract@2.0.39-beta.0
+- 115c5602: ZERO-4723: Resolve page-scoped commerce data bindings on every page type
+- Updated dependencies [115c5602]
+  - @akinon/theme-contract@2.0.39
+  - @akinon/next@2.0.39
 
 ## 2.0.38
 

package/package.json

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

package/src/__tests__/page-context-section-binding.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import ThemeSection from '../theme-section';
+import { ThemeSettingsProvider } from '../theme-settings-context';
+
+/**
+ * The unit tests around `resolveBlockBindings` call the resolver directly, so
+ * they cannot see the gate that decides whether a section runs the binding pass
+ * at all. That gate is what made a correct binding resolve to nothing: it
+ * demanded either a section literally typed `custom` or a hand-created
+ * page-context data source, neither of which a designer produces by dropping a
+ * text block onto the basket page.
+ */
+
+const basketPageContext = {
+  page: { type: 'basket', title: 'Basket', path: '/basket' },
+  basket: {
+    isEmpty: false,
+    itemCount: 1,
+    totalQuantity: 2,
+    totalAmount: '1299.90',
+    currency: 'TRY',
+    items: [{ title: 'Spring Sneaker', currency: 'TRY' }]
+  }
+};
+
+const sectionWithBoundTotal = (overrides: Record<string, unknown> = {}) =>
+  ({
+    id: 'section-1',
+    type: 'default',
+    label: 'Basket header',
+    order: 0,
+    hidden: false,
+    styles: {},
+    properties: {},
+    blocks: [
+      {
+        id: 'text-1',
+        type: 'text',
+        label: 'Total',
+        value: 'Authored fallback',
+        properties: { dataBinding: 'basket.totalAmount' },
+        styles: {},
+        order: 0,
+        hidden: false
+      }
+    ],
+    ...overrides
+  } as never);
+
+const renderSection = (section: never, pageContext: unknown) =>
+  render(
+    <ThemeSettingsProvider value={null}>
+      <ThemeSection
+        section={section}
+        placeholderId="basket-page-body"
+        currentBreakpoint="desktop"
+        isDesigner={false}
+        pageContext={pageContext as never}
+      />
+    </ThemeSettingsProvider>
+  );
+
+describe('a section on a page that publishes commerce data', () => {
+  it('resolves the binding with no data source configured', () => {
+    const { container } = renderSection(
+      sectionWithBoundTotal(),
+      basketPageContext
+    );
+
+    expect(container.textContent).toContain('1,299.90 TL');
+    expect(container.textContent).not.toContain('Authored fallback');
+  });
+
+  it('keeps the authored value when the page publishes nothing', () => {
+    const { container } = renderSection(sectionWithBoundTotal(), null);
+
+    expect(container.textContent).toContain('Authored fallback');
+  });
+
+  it('still resolves for a section that declares a page-context source', () => {
+    // The path that already worked must keep working.
+    const { container } = renderSection(
+      sectionWithBoundTotal({
+        dataSource: { type: 'page-context', details: {} }
+      }),
+      basketPageContext
+    );
+
+    expect(container.textContent).toContain('1,299.90 TL');
+  });
+
+  it('falls back to the storefront currency when the basket has none', () => {
+    const { container } = renderSection(sectionWithBoundTotal(), {
+      ...basketPageContext,
+      basket: { ...basketPageContext.basket, currency: '', items: [] }
+    });
+
+    // The storefront mock reports en-us / USD, which is also what proves the
+    // locale reaches the formatter rather than the tr-TR module default.
+    expect(container.textContent).toContain('1,299.90 USD');
+  });
+});

package/src/chrome/__tests__/live-basket-page-context.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { useThemePageContext } from '../../theme-page-context';
+import { resolveBlockBindings } from '../../utils/iterator-utils';
+
+const useGetBasketQuery = jest.fn();
+
+jest.mock('@akinon/next/data/client/basket', () => ({
+  useGetBasketQuery: (...args: unknown[]) => useGetBasketQuery(...args)
+}));
+
+// Imported after the mock so the provider picks it up.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const {
+  LiveBasketPageContext
+} = require('../live-basket-page-context') as typeof import('../live-basket-page-context');
+
+/** Stands in for a composed text block bound to the basket total. */
+const BoundTotal = () => {
+  const pageContext = useThemePageContext();
+  const block = resolveBlockBindings({
+    block: {
+      id: 'total',
+      type: 'text',
+      label: 'Total',
+      value: 'Fallback',
+      properties: { dataBinding: 'basket.totalAmount' },
+      styles: {},
+      order: 0,
+      hidden: false
+    } as never,
+    pageContext
+  });
+
+  return <span data-testid="total">{String(block.value)}</span>;
+};
+
+const basketWith = (total: string, quantity: number) => ({
+  pk: 1,
+  total_amount: total,
+  total_quantity: quantity,
+  total_product_amount: total,
+  total_discount_amount: '0.00',
+  voucher_code: null,
+  discounts: [],
+  basketitem_set: [
+    {
+      pk: 10,
+      quantity,
+      total_amount: total,
+      unit_price: '649.95',
+      price: '649.95',
+      currency_type: 'TRY',
+      product: { name: 'Spring Sneaker', absolute_url: '/p/1' }
+    }
+  ]
+});
+
+describe('LiveBasketPageContext', () => {
+  beforeEach(() => useGetBasketQuery.mockReset());
+
+  it('keeps the authored value until the basket query answers', () => {
+    useGetBasketQuery.mockReturnValue({ data: undefined });
+
+    render(
+      <LiveBasketPageContext>
+        <BoundTotal />
+      </LiveBasketPageContext>
+    );
+
+    // Server and first client render must agree — the provider publishes null
+    // rather than a hollow context, so nothing is masked and nothing pops.
+    expect(screen.getByTestId('total')).toHaveTextContent('Fallback');
+  });
+
+  it('publishes the live total, formatted as money', () => {
+    useGetBasketQuery.mockReturnValue({ data: basketWith('1299.90', 2) });
+
+    render(
+      <LiveBasketPageContext>
+        <BoundTotal />
+      </LiveBasketPageContext>
+    );
+
+    expect(screen.getByTestId('total')).toHaveTextContent('1.299,90 TL');
+  });
+
+  it('moves the bound total when the shopper changes quantity', () => {
+    useGetBasketQuery.mockReturnValue({ data: basketWith('1299.90', 2) });
+
+    const { rerender } = render(
+      <LiveBasketPageContext>
+        <BoundTotal />
+      </LiveBasketPageContext>
+    );
+    expect(screen.getByTestId('total')).toHaveTextContent('1.299,90 TL');
+
+    // What the RTK cache write after a quantity mutation looks like from here.
+    useGetBasketQuery.mockReturnValue({ data: basketWith('1949.85', 3) });
+    rerender(
+      <LiveBasketPageContext>
+        <BoundTotal />
+      </LiveBasketPageContext>
+    );
+
+    expect(screen.getByTestId('total')).toHaveTextContent('1.949,85 TL');
+  });
+});

package/src/chrome/__tests__/page-context-builders.test.ts

@@ -0,0 +1,156 @@
+import {
+  buildOrderPageContext,
+  buildCheckoutPageContext,
+  buildFlatPageContext
+} from '../page-context';
+import { createPageContextDiscovery } from '../../utils/page-context-discovery';
+import { resolveBlockBindings } from '../../utils/iterator-utils';
+
+const textBlock = (dataBinding: string, value = 'Fallback') =>
+  ({
+    id: 'b',
+    type: 'text',
+    label: 'b',
+    value,
+    properties: { dataBinding },
+    styles: {},
+    order: 0,
+    hidden: false
+  } as never);
+
+const orderPayload = {
+  id: 42,
+  number: 'ORD-42',
+  amount: '1299.90',
+  shipping_amount: '29.90',
+  created_date: '2026-07-30T10:00:00Z',
+  user_email: 'shopper@example.com',
+  currency: { value: 'TRY' },
+  status: { label: 'Shipped' },
+  shipping_address: {
+    first_name: 'Ada',
+    last_name: 'Lovelace',
+    line: 'Street 1',
+    district: 'Kadikoy',
+    city: 'Istanbul',
+    country: 'Turkey',
+    // Present on the real payload and deliberately not published.
+    identity_number: '11111111111',
+    phone: '5550000000'
+  },
+  orderitem_set: [
+    {
+      price: '649.95',
+      status: { label: 'Shipped' },
+      product: {
+        name: 'Spring Sneaker',
+        image: '/i.jpg',
+        absolute_url: '/p/1'
+      }
+    }
+  ],
+  discountitem_set: [{ name: 'Welcome', amount: '100.00' }]
+};
+
+describe('buildOrderPageContext', () => {
+  it('publishes the fields a receipt needs, under money-shaped names', () => {
+    const context = buildOrderPageContext({ order: orderPayload });
+
+    expect(context.page.type).toBe('order-success');
+    expect(context.order.number).toBe('ORD-42');
+    expect(context.order.totalAmount).toBe('1299.90');
+    expect(context.order.shippingAmount).toBe('29.90');
+    expect(context.order.currency).toBe('TRY');
+    expect(context.order.items).toHaveLength(1);
+    expect(context.order.items[0].title).toBe('Spring Sneaker');
+  });
+
+  it('does not publish the identity fields the raw payload carries', () => {
+    const context = buildOrderPageContext({ order: orderPayload });
+    const serialized = JSON.stringify(context);
+
+    expect(serialized).not.toContain('11111111111');
+    expect(serialized).not.toContain('5550000000');
+    expect(serialized).not.toContain('identity_number');
+  });
+
+  it('formats a bound order total as money', () => {
+    const result = resolveBlockBindings({
+      block: textBlock('order.totalAmount'),
+      pageContext: buildOrderPageContext({ order: orderPayload })
+    });
+
+    expect(result.value).toBe('1.299,90 TL');
+  });
+
+  it('labels its fields for the editor picker', () => {
+    const discovery = createPageContextDiscovery(
+      buildOrderPageContext({ order: orderPayload })
+    );
+    const byPath = Object.fromEntries(
+      discovery.entries.map((entry) => [entry.path, entry])
+    );
+
+    expect(discovery.roots).toEqual(expect.arrayContaining(['page', 'order']));
+    expect(byPath['order.totalAmount'].semantic).toBe('money');
+    expect(byPath['order.createdDate'].semantic).toBe('date');
+    expect(byPath['order.items'].semantic).toBe('list');
+    expect(byPath['order.items[].image'].semantic).toBe('image');
+  });
+
+  it('survives an order that has not loaded yet', () => {
+    const context = buildOrderPageContext({ order: null });
+
+    expect(context.order.number).toBe('');
+    expect(context.order.items).toEqual([]);
+  });
+});
+
+describe('buildCheckoutPageContext', () => {
+  const basket = {
+    pk: 1,
+    total_amount: '1299.90',
+    total_quantity: 2,
+    basketitem_set: [{ currency_type: 'TRY', product: { name: 'Sneaker' } }]
+  } as never;
+
+  it('republishes the basket root so a basket composition keeps working', () => {
+    const context = buildCheckoutPageContext({ basket });
+
+    expect(context.page.type).toBe('checkout');
+    expect(context.basket.totalAmount).toBe('1299.90');
+    expect(context.basket.currency).toBe('TRY');
+  });
+
+  it('adds the figures that exist only on the pre-order', () => {
+    const context = buildCheckoutPageContext({
+      basket,
+      preOrder: {
+        amount: '1329.80',
+        shipping_amount: '29.90',
+        unpaid_amount: '0.00',
+        shipping_option: { pk: 3, name: 'Express' },
+        currency: { value: 'TRY' }
+      }
+    });
+
+    expect(context.checkout.shippingAmount).toBe('29.90');
+    expect(context.checkout.shippingOption).toBe('Express');
+    expect(context.checkout.hasShippingOption).toBe(true);
+  });
+});
+
+describe('buildFlatPageContext', () => {
+  it('publishes a title and a slug to bind', () => {
+    const context = buildFlatPageContext({
+      title: 'Delivery',
+      slug: 'delivery',
+      content: '<p>hi</p>',
+      absolute_url: '/delivery'
+    });
+
+    expect(context.page.type).toBe('flat-page');
+    expect(context.flatPage.title).toBe('Delivery');
+    expect(context.flatPage.url).toBe('/delivery');
+  });
+});

package/src/chrome/live-basket-page-context.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+
+import { ThemePageContextProvider } from '../theme-page-context';
+import { buildBasketPageContext } from './page-context';
+
+/**
+ * Publishes the shopper's live basket as the page context for the slot below.
+ *
+ * The basket is session-scoped and has no server data module, so the context a
+ * server-rendered slot can build is a snapshot at best — it would freeze the
+ * moment a quantity changed. Subscribing the same RTK Query entry the basket
+ * blocks already use keeps a bound `basket.totalAmount` in step with the
+ * built-in summary beside it, and the render tree gets the same normalised
+ * field names either way because the same builder produces both.
+ *
+ * Wraps the slot rather than living inside it: ThemePlaceholderWrapper merges
+ * an inherited context OVER the one passed as a prop, so this wins as soon as
+ * the query resolves.
+ */
+export const LiveBasketPageContext = ({
+  path,
+  children
+}: PropsWithChildren<{ path?: string }>) => {
+  const { data: basket } = useGetBasketQuery(undefined as never);
+
+  // Null until the query answers. The merge upstream is a shallow top-level
+  // spread, so a hollow context here would mask the server-rendered one and
+  // blank the total for one paint.
+  const value = basket ? buildBasketPageContext({ basket, path }) : null;
+
+  return (
+    <ThemePageContextProvider value={value}>
+      {children}
+    </ThemePageContextProvider>
+  );
+};

package/src/chrome/live-checkout-page-context.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { useFetchCheckoutQuery } from '@akinon/next/data/client/checkout';
+
+import { ThemePageContextProvider } from '../theme-page-context';
+import { buildCheckoutPageContext } from './page-context';
+
+/**
+ * The zones above and below the checkout flow.
+ *
+ * Publishes the basket root unchanged next to a `checkout` root, so a
+ * composition authored on the basket page keeps resolving here and the
+ * shipping/total figures that live only on the pre-order become bindable.
+ *
+ * The flow itself stays code-owned — this provider gives the zones data, it
+ * does not hand the payment steps over.
+ */
+export const LiveCheckoutPageContext = ({
+  path,
+  children
+}: PropsWithChildren<{ path?: string }>) => {
+  const { data: basket } = useGetBasketQuery(undefined as never);
+  const { data: checkout } = useFetchCheckoutQuery(undefined as never);
+
+  const preOrder = (
+    checkout as unknown as { pre_order?: Record<string, unknown> } | undefined
+  )?.pre_order;
+
+  // Null until at least one of the two answers, so the server-published
+  // context is not masked by a hollow one.
+  const value =
+    basket || preOrder
+      ? buildCheckoutPageContext({ basket, preOrder, path })
+      : null;
+
+  return (
+    <ThemePageContextProvider value={value}>{children}</ThemePageContextProvider>
+  );
+};

package/src/chrome/live-order-page-context.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import { useGetOrderQuery } from '@akinon/next/data/client/account';
+import { useFetchCheckoutResultQuery } from '@akinon/next/data/client/checkout';
+
+import { ThemePageContextProvider } from '../theme-page-context';
+import { buildOrderPageContext } from './page-context';
+
+/**
+ * The shopper's order, published to the slot below.
+ *
+ * Orders have no server data module, so this is the only way a composed block
+ * on the success page or the account order detail can bind order data. Both
+ * screens publish the SAME `order` root, so a composition authored on one
+ * resolves on the other.
+ *
+ * Personal data: this never crosses the server boundary as a prop, which is
+ * what keeps an order out of a cached shell — see the projection in
+ * buildOrderPageContext.
+ */
+
+const publish = (
+  order: unknown,
+  path: string | undefined,
+  pageType: string,
+  title: string,
+  children: React.ReactNode
+) => (
+  <ThemePageContextProvider
+    // Null until the query answers: the merge upstream is a shallow top-level
+    // spread, so a hollow context would mask whatever the server published.
+    value={order ? buildOrderPageContext({ order: order as never, path, pageType, title }) : null}
+  >
+    {children}
+  </ThemePageContextProvider>
+);
+
+/** Order success — the order is read back by the checkout result token. */
+export const LiveOrderSuccessPageContext = ({
+  token,
+  path,
+  children
+}: PropsWithChildren<{ token: string; path?: string }>) => {
+  const { data } = useFetchCheckoutResultQuery(token, { skip: !token });
+
+  return publish(
+    (data as { order?: unknown } | undefined)?.order,
+    path,
+    'order-success',
+    'Order Success',
+    children
+  );
+};
+
+/** Account order detail — same root, fetched by order id. */
+export const LiveAccountOrderPageContext = ({
+  orderId,
+  path,
+  children
+}: PropsWithChildren<{ orderId: string; path?: string }>) => {
+  const { data } = useGetOrderQuery(orderId, { skip: !orderId });
+
+  return publish(data, path, 'order-detail', 'Order Detail', children);
+};