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

package/CHANGELOG.md

@@ -1,58 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.167-rc.0
-
-### Patch Changes
-
-- e3c2bab2: ZERO-5521: restore the text block's useValueLocale import and the /api/auth no-store header rule that the automatic RC sync dropped
-- 8e040731e: ZERO-5235: let brands hang actions on order detail lines
-- c761b9fd4: ZERO-5296: fall back to the storefront default language in the text block
-- 17a598dae: ZERO-5296: report the storefront default language to the editor
-- 3b05a407d: 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 [ac6cada1c]
-- 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 [e3c2bab2]
-- 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]
-- Updated dependencies [8853822c]
-  - @akinon/next@2.0.167-rc.0
-  - @akinon/theme-contract@2.0.167-rc.0
+## 2.0.167
+
+### Patch Changes
+
+- e0fc41c3: ZERO-5511: Native empty state for the order-list block. A child group marked with role `order-list-empty` is drawn in place of the whole block (title included) once a signed-in shopper turns out to have no orders, so the heading, the explanation, the call-to-action links and product suggestions are authored in the panel instead of being switched on with custom CSS. `previewEmptyState` draws it on the canvas (editor only). The empty message (`emptyLabel`) and the `data-order-list-state="empty"` wrapper stay as they were, and the storefront now shows them for an empty list even when a row layout is set.
+  - @akinon/next@2.0.167
+  - @akinon/theme-contract@2.0.167
 
 ## 2.0.166
 

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.167-rc.0",
+  "version": "2.0.167",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.167-rc.0",
+    "@akinon/next": "2.0.167",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.167-rc.0",
+    "@akinon/theme-contract": "2.0.167",
     "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.167-rc.0",
+    "@akinon/next": "2.0.167",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.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/blocks/__tests__/order-list-empty-state.test.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import OrderListBlock from '../order-list-block';
+
+const state: {
+  status: string;
+  query: { data?: unknown; isLoading: boolean };
+  hasTemplate: boolean;
+} = {
+  status: 'authenticated',
+  query: { data: { count: 0, results: [] }, isLoading: false },
+  hasTemplate: false
+};
+
+jest.mock('../item-template', () => ({
+  __esModule: true,
+  hasItemTemplate: () => state.hasTemplate,
+  // Like the real list on the storefront: nothing to repeat, nothing drawn.
+  ItemTemplateList: ({ items }: { items: unknown[] }) =>
+    items.length > 0 ? <li data-testid="template-row" /> : null
+}));
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="theme-block" data-block-id={block.id} />
+  )
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ data: null, status: state.status })
+}));
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({ locale: 'tr', currency: 'try' })
+}));
+
+jest.mock('@akinon/next/data/client/account', () => ({
+  __esModule: true,
+  useGetOrdersQuery: () => state.query
+}));
+
+const ORDER = {
+  id: 42,
+  number: 'ORD-42',
+  amount: '100.00',
+  created_date: '2026-09-01T10:00:00Z',
+  status: { value: '550', label: 'Delivered' },
+  orderitem_set: []
+};
+
+const emptyLayout = (overrides: Record<string, unknown> = {}) => ({
+  id: 'empty-layout',
+  type: 'group',
+  properties: { role: { desktop: 'order-list-empty' } },
+  styles: {},
+  blocks: [],
+  ...overrides
+});
+
+const block = (
+  properties: Record<string, unknown> = {},
+  blocks: unknown[] = [emptyLayout()]
+) =>
+  ({
+    id: 'order-list-1',
+    type: 'order-list',
+    properties: {
+      showTitle: { desktop: true },
+      title: { desktop: 'My orders' },
+      ...properties
+    },
+    styles: {},
+    blocks
+  } as never);
+
+const renderBlock = (
+  props: Record<string, unknown> = {},
+  isDesigner = false,
+  blocks?: unknown[]
+) =>
+  render(
+    <OrderListBlock
+      block={block(props, blocks)}
+      placeholderId="p1"
+      sectionId="s1"
+      isDesigner={isDesigner}
+    />
+  );
+
+beforeEach(() => {
+  state.status = 'authenticated';
+  state.query = { data: { count: 0, results: [] }, isLoading: false };
+  state.hasTemplate = false;
+});
+
+describe('order list empty state', () => {
+  it('draws the empty-orders layout in place of the block for a shopper without orders', () => {
+    const { container } = renderBlock();
+
+    expect(screen.getByTestId('theme-block')).toHaveAttribute(
+      'data-block-id',
+      'empty-layout'
+    );
+    expect(
+      container.querySelector('[data-order-list-state="empty"]')
+    ).not.toBeNull();
+    // The layout carries its own heading; the block title gives way.
+    expect(container.textContent).not.toContain('My orders');
+  });
+
+  it('keeps the list when the shopper has orders', () => {
+    state.query = { data: { count: 1, results: [ORDER] }, isLoading: false };
+    const { container } = renderBlock();
+
+    expect(screen.queryByTestId('theme-block')).toBeNull();
+    expect(container.querySelector('[data-order-list-item]')).not.toBeNull();
+  });
+
+  it('claims nothing while the orders are loading or for a guest', () => {
+    state.query = { data: undefined, isLoading: true };
+    renderBlock();
+    expect(screen.queryByTestId('theme-block')).toBeNull();
+
+    state.status = 'unauthenticated';
+    state.query = { data: undefined, isLoading: false };
+    renderBlock();
+    expect(screen.queryByTestId('theme-block')).toBeNull();
+  });
+
+  it('leaves a hidden layout off the storefront and falls back to the empty message', () => {
+    const { container } = renderBlock(
+      { emptyLabel: { desktop: 'No orders yet' } },
+      false,
+      [emptyLayout({ hidden: true })]
+    );
+
+    expect(screen.queryByTestId('theme-block')).toBeNull();
+    expect(
+      container.querySelector('[data-order-list-state="empty"]')?.textContent
+    ).toBe('No orders yet');
+  });
+
+  it('shows the empty message on the storefront even when a row layout is set', () => {
+    state.hasTemplate = true;
+    const { container } = renderBlock(
+      { emptyLabel: { desktop: 'No orders yet' } },
+      false,
+      []
+    );
+
+    expect(container.querySelector('[data-order-list]')?.tagName).toBe('DIV');
+    expect(
+      container.querySelector('[data-order-list-state="empty"]')?.textContent
+    ).toBe('No orders yet');
+  });
+
+  it('draws the empty-orders layout on the storefront even when a row layout is set', () => {
+    state.hasTemplate = true;
+    renderBlock();
+
+    expect(screen.getByTestId('theme-block')).toHaveAttribute(
+      'data-block-id',
+      'empty-layout'
+    );
+  });
+
+  it('previews the layout on the canvas only when asked, even with orders', () => {
+    state.query = { data: { count: 1, results: [ORDER] }, isLoading: false };
+
+    renderBlock({}, true);
+    expect(screen.queryByTestId('theme-block')).toBeNull();
+
+    renderBlock({ previewEmptyState: { desktop: true } }, true);
+    expect(screen.getByTestId('theme-block')).toHaveAttribute(
+      'data-block-id',
+      'empty-layout'
+    );
+  });
+
+  it('never lets the preview toggle empty a live list', () => {
+    state.query = { data: { count: 1, results: [ORDER] }, isLoading: false };
+    renderBlock({ previewEmptyState: { desktop: true } }, false);
+
+    expect(screen.queryByTestId('theme-block')).toBeNull();
+  });
+
+  it('keeps sample rows on the canvas when a row layout is there to design', () => {
+    state.hasTemplate = true;
+    renderBlock({}, true);
+
+    expect(screen.queryByTestId('theme-block')).toBeNull();
+  });
+});

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'
     );
   });
 

package/src/blocks/order-detail-block.tsx

@@ -13,7 +13,6 @@ import {
   ITEM_TEMPLATE_ROLE,
   ItemTemplateList
 } from './item-template';
-import { renderOrderLineActions } from './order-line-actions';
 import { BlockRendererProps } from './block-renderer-registry';
 import type { Block } from '../theme-block';
 import {
@@ -30,7 +29,7 @@ import {
   useOrderActionRules
 } from '../utils/order-action-rules';
 
-type OrderItemLike = {
+interface OrderItemLike {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -52,7 +51,7 @@ type OrderItemLike = {
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-};
+}
 
 interface AddressLike {
   first_name?: string;
@@ -431,7 +430,7 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * currencyText, currencyPosition.
  * Parts: detail, header, number, date, header-total, status,
  * invoice-link, cancel-link, return-link, list, item, image, name, quantity,
- * color, size, item-status, item-tracking, item-return-code, item-actions,
+ * color, size, item-status, item-tracking, item-return-code,
  * item-return-method, item-return-carrier, item-pickup-date, price, shipment,
  * delivery, tracking, addresses, address, address-label, totals, total-row,
  * total-label, total-value, grand-total, payment-info, payment-info-label.
@@ -1132,21 +1131,6 @@ const OrderDetailBlock = ({
                 showPickupDate && returnDetails.pickupDate
                   ? formatPickupDate(returnDetails.pickupDate, locale)
                   : '';
-              const lineActions = renderOrderLineActions({
-                order,
-                line,
-                isDesigner
-              });
-              const showLineMeta =
-                showShipmentStatus &&
-                Boolean(
-                  item.status?.label ||
-                    trackingValue ||
-                    returnCodeValue ||
-                    returnMethodValue ||
-                    returnCarrierValue ||
-                    pickupDateValue
-                );
 
               return (
                 <li
@@ -1262,100 +1246,98 @@ const OrderDetailBlock = ({
                       </div>
                     </div>
 
-                    {(showLineMeta || lineActions) && (
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'column',
-                          alignItems: isMobile ? 'flex-start' : 'flex-end',
-                          textAlign: isMobile ? 'left' : 'right',
-                          gap: '4px',
-                          flex: isMobile ? '1 1 100%' : '0 0 auto'
-                        }}
-                      >
-                        {lineActions && (
-                          <div
-                            data-order-detail-item-actions=""
-                            {...partAttrs('item-actions')}
-                          >
-                            {lineActions}
-                          </div>
-                        )}
-                        {showLineMeta && item.status?.label && (
-                          <span
-                            data-order-detail-item-status=""
-                            data-order-status-value={item.status.value}
-                            {...partAttrs('item-status')}
-                            style={{ display: 'inline-block' }}
-                          >
-                            {item.status.label}
-                          </span>
-                        )}
-                        {/* Label and value in their own spans, so a
-                            composition can colour them apart. */}
-                        {showLineMeta && returnMethodValue && (
-                          <span
-                            data-order-detail-item-return-method=""
-                            {...partAttrs('item-return-method')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnMethodLabel}</span>{' '}
-                            <span data-value="">{returnMethodValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && returnCarrierValue && (
-                          <span
-                            data-order-detail-item-return-carrier=""
-                            {...partAttrs('item-return-carrier')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnCarrierLabel}</span>{' '}
-                            <span data-value="">{returnCarrierValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && pickupDateValue && (
-                          <span
-                            data-order-detail-item-pickup-date=""
-                            {...partAttrs('item-pickup-date')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{pickupDateLabel}</span>{' '}
-                            <span data-value="">{pickupDateValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && trackingValue && (
-                          <span
-                            data-order-detail-item-tracking=""
-                            {...partAttrs('item-tracking')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {lineTrackingLabel}{' '}
-                            {item.tracking_url ? (
-                              <a
-                                href={isDesigner ? '#' : item.tracking_url}
-                                onClick={guard}
-                                target={isDesigner ? undefined : '_blank'}
-                                rel="noreferrer"
-                                style={{ color: 'inherit' }}
-                              >
-                                {item.tracking_number || item.tracking_url}
-                              </a>
-                            ) : (
-                              trackingValue
-                            )}
-                          </span>
-                        )}
-                        {showLineMeta && returnCodeValue && (
-                          <span
-                            data-order-detail-item-return-code=""
-                            {...partAttrs('item-return-code')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {returnCodeLabel} {returnCodeValue}
-                          </span>
-                        )}
-                      </div>
-                    )}
+                    {showShipmentStatus &&
+                      (item.status?.label ||
+                        trackingValue ||
+                        returnCodeValue ||
+                        returnMethodValue ||
+                        returnCarrierValue ||
+                        pickupDateValue) && (
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: isMobile ? 'flex-start' : 'flex-end',
+                            textAlign: isMobile ? 'left' : 'right',
+                            gap: '4px',
+                            flex: isMobile ? '1 1 100%' : '0 0 auto'
+                          }}
+                        >
+                          {item.status?.label && (
+                            <span
+                              data-order-detail-item-status=""
+                              data-order-status-value={item.status.value}
+                              {...partAttrs('item-status')}
+                              style={{ display: 'inline-block' }}
+                            >
+                              {item.status.label}
+                            </span>
+                          )}
+                          {/* Label and value in their own spans, so a
+                              composition can colour them apart. */}
+                          {returnMethodValue && (
+                            <span
+                              data-order-detail-item-return-method=""
+                              {...partAttrs('item-return-method')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnMethodLabel}</span>{' '}
+                              <span data-value="">{returnMethodValue}</span>
+                            </span>
+                          )}
+                          {returnCarrierValue && (
+                            <span
+                              data-order-detail-item-return-carrier=""
+                              {...partAttrs('item-return-carrier')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnCarrierLabel}</span>{' '}
+                              <span data-value="">{returnCarrierValue}</span>
+                            </span>
+                          )}
+                          {pickupDateValue && (
+                            <span
+                              data-order-detail-item-pickup-date=""
+                              {...partAttrs('item-pickup-date')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{pickupDateLabel}</span>{' '}
+                              <span data-value="">{pickupDateValue}</span>
+                            </span>
+                          )}
+                          {trackingValue && (
+                            <span
+                              data-order-detail-item-tracking=""
+                              {...partAttrs('item-tracking')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {lineTrackingLabel}{' '}
+                              {item.tracking_url ? (
+                                <a
+                                  href={isDesigner ? '#' : item.tracking_url}
+                                  onClick={guard}
+                                  target={isDesigner ? undefined : '_blank'}
+                                  rel="noreferrer"
+                                  style={{ color: 'inherit' }}
+                                >
+                                  {item.tracking_number || item.tracking_url}
+                                </a>
+                              ) : (
+                                trackingValue
+                              )}
+                            </span>
+                          )}
+                          {returnCodeValue && (
+                            <span
+                              data-order-detail-item-return-code=""
+                              {...partAttrs('item-return-code')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {returnCodeLabel} {returnCodeValue}
+                            </span>
+                          )}
+                        </div>
+                      )}
                   </div>
                 </li>
               );