@akinon/pz-theme 2.0.164 → 2.0.165-rc.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @akinon/pz-theme
 
+## 2.0.165-rc.0
+
+### Patch Changes
+
+- 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 [ac6cada1]
+- 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 [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.165-rc.0
+  - @akinon/theme-contract@2.0.165-rc.0
+
 ## 2.0.164
 
 ### Patch Changes

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.164",
+  "version": "2.0.165-rc.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.164",
+    "@akinon/next": "2.0.165-rc.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.164",
+    "@akinon/theme-contract": "2.0.165-rc.0",
     "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.164",
+    "@akinon/next": "2.0.165-rc.0",
     "@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,6 +28,7 @@ const SETTINGS_LOCALES = [
 const mockLocalization = {
   locale: 'tr',
   locales: SETTINGS_LOCALES as Array<Record<string, unknown>>,
+  defaultLocaleValue: 'tr',
   setLocale: jest.fn()
 };
 
@@ -106,6 +107,7 @@ beforeEach(() => {
   postMessage.mockClear();
   mockLocalization.locale = 'tr';
   mockLocalization.locales = SETTINGS_LOCALES;
+  mockLocalization.defaultLocaleValue = 'tr';
   mockLocalization.setLocale = jest.fn();
   delete (window as { __iframeReadySent?: boolean }).__iframeReadySent;
 });
@@ -144,7 +146,8 @@ describe('inside the editor', () => {
             { value: 'en', label: 'English' },
             { value: 'tr', label: 'Türkçe' },
             { value: 'de', label: 'de' }
-          ]
+          ],
+          defaultLocale: 'tr'
         }
       })
     ]);
@@ -154,6 +157,34 @@ 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-line-actions.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  registerOrderLineActions,
+  renderOrderLineActions
+} from '../order-line-actions';
+
+const context = {
+  order: { id: 7, number: '20920397829', created_date: '2026-10-01' },
+  line: {
+    key: '1',
+    name: 'Product',
+    image: '',
+    href: '',
+    price: '100',
+    total: 100,
+    quantity: 1,
+    item: { id: 1, status: { value: '550', label: 'Delivered' } }
+  },
+  isDesigner: false
+};
+
+describe('order line actions registry', () => {
+  it('renders nothing until a brand registers', () => {
+    expect(renderOrderLineActions(context)).toBeNull();
+  });
+
+  it('hands the line and order to the registered renderer', () => {
+    const renderer = jest.fn(() => <span>action</span>);
+    const unregister = registerOrderLineActions(renderer);
+
+    expect(renderOrderLineActions(context)).toEqual(<span>action</span>);
+    expect(renderer).toHaveBeenCalledWith(context);
+
+    unregister();
+    expect(renderOrderLineActions(context)).toBeNull();
+  });
+
+  it('swallows a throwing renderer so a brand bug cannot break the line', () => {
+    const unregister = registerOrderLineActions(() => {
+      throw new Error('boom');
+    });
+
+    expect(renderOrderLineActions(context)).toBeNull();
+    unregister();
+  });
+
+  it('only forgets the renderer it was asked to forget', () => {
+    const first = registerOrderLineActions(() => 'first');
+    registerOrderLineActions(() => 'second');
+
+    first();
+    expect(renderOrderLineActions(context)).toBe('second');
+  });
+});

package/src/blocks/__tests__/text-block.test.tsx

@@ -2,9 +2,31 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import TextBlock from '../text-block';
 
-// 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'.
+// 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';
+});
 
 const renderBlock = (value: unknown, styles?: Record<string, unknown>) => {
   const block: any = { id: 'b1', type: 'text', value, styles };
@@ -34,10 +56,16 @@ describe('TextBlock value-shape resolution', () => {
     );
   });
 
-  it('falls back to defaultLocale ("en") when active locale is absent', () => {
-    const { container } = renderBlock({ en: 'EN', fr: 'FR' });
+  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' });
     expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
-      'EN'
+      'TR'
     );
   });
 

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

@@ -9,6 +9,7 @@ import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
 import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { renderOrderLineActions } from './order-line-actions';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -24,7 +25,7 @@ import {
   useOrderActionRules
 } from '../utils/order-action-rules';
 
-interface OrderItemLike {
+type OrderItemLike = {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -43,7 +44,7 @@ interface OrderItemLike {
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-}
+};
 
 interface AddressLike {
   first_name?: string;
@@ -408,7 +409,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,
+ * color, size, item-status, item-tracking, item-return-code, item-actions,
  * 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.
@@ -955,6 +956,21 @@ 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
@@ -1070,98 +1086,100 @@ const OrderDetailBlock = ({
                       </div>
                     </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>
-                      )}
+                    {(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>
+                    )}
                   </div>
                 </li>
               );

package/src/blocks/order-line-actions.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import type { GroupedOrderLine, OrderLineLike } from './product-block-utils';
+
+export interface OrderLineActionsOrder {
+  id?: number;
+  number?: string;
+  created_date?: string;
+}
+
+export type OrderLineActionsItem = OrderLineLike & {
+  status?: { value?: string; label?: string };
+  [key: string]: unknown;
+};
+
+export interface OrderLineActionsContext {
+  order: OrderLineActionsOrder;
+  line: GroupedOrderLine<OrderLineActionsItem>;
+  isDesigner: boolean;
+}
+
+export type OrderLineActionsRenderer = (
+  context: OrderLineActionsContext
+) => ReactNode;
+
+let renderer: OrderLineActionsRenderer | null = null;
+
+export const registerOrderLineActions = (
+  fn: OrderLineActionsRenderer
+): (() => void) => {
+  renderer = fn;
+  return () => {
+    if (renderer === fn) renderer = null;
+  };
+};
+
+export const renderOrderLineActions = (
+  context: OrderLineActionsContext
+): ReactNode => {
+  if (!renderer) return null;
+  try {
+    return renderer(context) ?? null;
+  } catch {
+    return null;
+  }
+};

package/src/blocks/text-block.tsx

@@ -19,7 +19,7 @@ const TextBlock = ({
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
   const localize = useLocalizeHref();
-  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
+  const { defaultLocale } = useValueLocale();
   const themeSettings = useThemeSettingsContext();
 
   const getLocalizedContent = (): string => {
@@ -35,7 +35,10 @@ const TextBlock = ({
 
     if (typeof value === 'object' && value !== null) {
       return (
-        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
+        value[locale] ||
+        (defaultLocale && value[defaultLocale]) ||
+        Object.values(value)[0] ||
+        ''
       );
     }