@akinon/pz-theme 2.0.154-rc.6 → 2.0.154

package/src/chrome/placeholder-slugs.ts

@@ -29,6 +29,10 @@ export const PLACEHOLDER_SLUGS = {
   accountDashboard: 'account-dashboard-body',
   accountOrders: 'account-orders-body',
   accountOrderDetail: 'account-order-detail-body',
+  // The easy-return / cancellation screen under one order. It used to resolve
+  // to the detail slug and stay code-owned; its own slug lets a brand compose
+  // it without the detail composition swallowing it.
+  accountOrderCancellation: 'account-order-cancellation-body',
   accountAddresses: 'account-address-body',
   accountProfile: 'account-profile-body',
   accountChangePassword: 'account-change-password-body',

package/src/chrome/route-slug.ts

@@ -19,9 +19,12 @@ export type RouteSlugRule = [RegExp, string];
  * resolves to the order detail body and not to the order list.
  */
 const DEFAULT_RULES: RouteSlugRule[] = [
-  // Account — deepest first. The detail rule also matches deeper order
-  // screens (e.g. cancellation); the reference app only mounts the slot on
-  // the detail screen itself, so those stay code-owned.
+  // Account — deepest first. The cancellation screen under an order has its
+  // own body; the detail rule still matches any other deeper order screen.
+  [
+    /^\/(account|users)\/orders\/[^/]+\/cancellation(\/|$)/,
+    PLACEHOLDER_SLUGS.accountOrderCancellation
+  ],
   [
     /^\/(account|users)\/orders\/[^/]+/,
     PLACEHOLDER_SLUGS.accountOrderDetail
@@ -130,6 +133,7 @@ const PAGE_MOUNTED_SLUGS = new Set<string>([
   PLACEHOLDER_SLUGS.accountDashboard,
   PLACEHOLDER_SLUGS.accountOrders,
   PLACEHOLDER_SLUGS.accountOrderDetail,
+  PLACEHOLDER_SLUGS.accountOrderCancellation,
   PLACEHOLDER_SLUGS.accountAddresses,
   PLACEHOLDER_SLUGS.accountProfile,
   PLACEHOLDER_SLUGS.accountChangePassword,

package/src/custom/README.md

@@ -303,26 +303,6 @@ attached". The editor's **Use preview** toggle turns it off while the editor
 stays open, so the canvas behaves like the live site: whatever you held open
 closes and links navigate again.
 
-## Reading the row a block is placed in
-
-A block dropped into a list's row layout (the child a designer marked as the
-row template of an order list, a product grid, an address list, …) renders once
-per row. The product lists open the product scope `useThemeProduct()` reads;
-every list also opens a row scope that carries the row itself:
-
-```ts
-import { useThemeRowScope } from '@akinon/pz-theme/src/blocks/row-scope';
-
-const scope = useThemeRowScope();
-```
-
-Inside a row it returns `{ listType, row, index }`, for example
-`listType: 'order-list'` with the order's `number` and `items` on `row`; anywhere
-else it returns `null`. `row` is the same record the row's bindings resolve
-against, so whatever a text block can bind to (`item.number`), code can read.
-Import it from that deep path for the same reason as `useThemePageContext`: the
-package root is not importable from a client module.
-
 ## Reporting what happened
 
 A custom unit can report a moment — a strip was seen, a lookbook was opened, a

package/src/utils/custom-css.ts

@@ -77,9 +77,42 @@ const splitTopLevelRules = (css: string): string[] => {
   return rules.map(rule => rule.trim()).filter(Boolean);
 };
 
+/**
+ * Splits a selector list on its top-level commas only. A comma inside
+ * `:has()`, `:is()`, `:not()`, `:where()`, an attribute selector or a string
+ * belongs to that one selector — splitting there scoped the second half of
+ * `:has(a, b)` as if it were a selector of its own, so it never matched.
+ */
+const splitSelectorList = (selectors: string): string[] => {
+  const parts: string[] = [];
+  let depth = 0;
+  let quote: string | null = null;
+  let start = 0;
+
+  for (let i = 0; i < selectors.length; i++) {
+    const char = selectors[i];
+
+    if (quote) {
+      if (char === '\\') i += 1;
+      else if (char === quote) quote = null;
+      continue;
+    }
+
+    if (char === '"' || char === "'") quote = char;
+    else if (char === '(' || char === '[') depth += 1;
+    else if (char === ')' || char === ']') depth = Math.max(0, depth - 1);
+    else if (char === ',' && depth === 0) {
+      parts.push(selectors.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(selectors.slice(start));
+
+  return parts;
+};
+
 const scopeSelectorList = (selectors: string, scope: string): string =>
-  selectors
-    .split(',')
+  splitSelectorList(selectors)
     .map(selector => selector.trim())
     .filter(Boolean)
     .map(selector =>

package/src/__tests__/row-scope.test.tsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ItemTemplateList } from '../blocks/item-template';
-import { useThemeProduct } from '../blocks/product-block-utils';
-import { useThemeRowScope } from '../blocks/row-scope';
-import blockRendererRegistry from '../blocks/block-renderer-registry';
-import { resetCustomCatalog } from '../custom/catalog';
-import { resetCustomCollection } from '../custom/collect';
-import { isCustomThemeType, registerCustomBlocks } from '../custom';
-import type { Block } from '../theme-block';
-
-const READER = 'custom:acme:row-reader';
-
-function RowReader() {
-  const scope = useThemeRowScope();
-  const product = useThemeProduct();
-
-  return (
-    <span
-      data-testid="reader"
-      data-list={scope?.listType ?? ''}
-      data-index={scope?.index ?? ''}
-      data-number={String(scope?.row.number ?? '')}
-      data-product={String(product?.pk ?? '')}
-    />
-  );
-}
-
-const template = (): Block =>
-  ({
-    id: 'tpl',
-    type: 'group',
-    label: 'Row',
-    order: 0,
-    hidden: false,
-    value: '',
-    properties: { role: { desktop: 'item-template' } },
-    styles: {},
-    blocks: [
-      {
-        id: 'tpl-reader',
-        type: READER,
-        label: 'Reader',
-        order: 0,
-        hidden: false,
-        value: '',
-        properties: {},
-        styles: {},
-        blocks: []
-      }
-    ]
-  } as Block);
-
-const list = (type: string): Block =>
-  ({
-    id: 'list',
-    type,
-    label: 'List',
-    order: 0,
-    hidden: false,
-    value: '',
-    properties: {},
-    styles: {},
-    blocks: [template()]
-  } as Block);
-
-const renderRows = (type: string, items: Record<string, unknown>[]) =>
-  render(
-    <ItemTemplateList
-      block={list(type)}
-      items={items}
-      placeholderId="p1"
-      sectionId="s1"
-    />
-  );
-
-beforeAll(() => {
-  registerCustomBlocks('acme', { 'row-reader': RowReader });
-});
-
-afterAll(() => {
-  const map = (
-    blockRendererRegistry as unknown as { renderers: Map<string, unknown> }
-  ).renderers;
-  Array.from(map.keys())
-    .filter(isCustomThemeType)
-    .forEach((key) => map.delete(key));
-  resetCustomCatalog();
-  resetCustomCollection();
-});
-
-describe('the row scope', () => {
-  it('hands every repeated row to the blocks inside it, on any list', () => {
-    renderRows('order-list', [{ number: 'ORD-1' }, { number: 'ORD-2' }]);
-
-    const readers = screen.getAllByTestId('reader');
-    expect(readers).toHaveLength(2);
-    expect(readers[0]).toHaveAttribute('data-list', 'order-list');
-    expect(readers[0]).toHaveAttribute('data-index', '0');
-    expect(readers[0]).toHaveAttribute('data-number', 'ORD-1');
-    expect(readers[1]).toHaveAttribute('data-number', 'ORD-2');
-    expect(readers[0]).toHaveAttribute('data-product', '');
-  });
-
-  it('keeps the product scope on product lists next to the row scope', () => {
-    renderRows('product-grid', [{ pk: 7, name: 'Sneaker' }]);
-
-    const reader = screen.getByTestId('reader');
-    expect(reader).toHaveAttribute('data-list', 'product-grid');
-    expect(reader).toHaveAttribute('data-product', '7');
-  });
-
-  it('is closed outside a repeated row', () => {
-    render(<RowReader />);
-
-    expect(screen.getByTestId('reader')).toHaveAttribute('data-list', '');
-  });
-});

package/src/blocks/__tests__/order-line-actions.test.tsx

@@ -1,54 +0,0 @@
-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__/order-list-rows.test.tsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import OrderListBlock from '../order-list-block';
-
-const captured: { items: Record<string, unknown>[] } = { items: [] };
-
-jest.mock('../item-template', () => ({
-  __esModule: true,
-  hasItemTemplate: () => true,
-  ItemTemplateList: ({ items }: { items: Record<string, unknown>[] }) => {
-    captured.items = items;
-    return <div data-testid="item-template-list" />;
-  }
-}));
-
-jest.mock('next-auth/react', () => ({
-  useSession: () => ({ data: null, status: 'authenticated' })
-}));
-
-jest.mock('@akinon/next/hooks', () => ({
-  __esModule: true,
-  useLocalization: () => ({ locale: 'tr', currency: 'try' })
-}));
-
-jest.mock('@akinon/next/redux/hooks', () => ({
-  __esModule: true,
-  useAppSelector: () => undefined,
-  useAppDispatch: () => jest.fn()
-}));
-
-jest.mock('@akinon/next/data/client/account', () => ({
-  __esModule: true,
-  useGetOrdersQuery: () => ({
-    data: {
-      count: 1,
-      results: [
-        {
-          id: 42,
-          number: 'ORD-42',
-          amount: '100.00',
-          created_date: '2026-09-01T10:00:00Z',
-          status: { value: '550', label: 'Delivered' },
-          orderitem_set: [
-            {
-              id: 7,
-              status: { value: 550, label: 'Delivered' },
-              product: {
-                sku: 'SKU-1',
-                base_code: 'BASE-1',
-                name: 'Sneaker',
-                image: '/s.jpg'
-              }
-            },
-            {
-              status: { value: '400', label: 'Approved' },
-              product: { name: 'Boot' }
-            }
-          ]
-        }
-      ]
-    },
-    isLoading: false
-  })
-}));
-
-describe('order list rows', () => {
-  it('publishes the order items with their product codes and status code', () => {
-    render(
-      <OrderListBlock
-        block={{
-          id: 'order-list-1',
-          type: 'order-list',
-          properties: {},
-          styles: {},
-          blocks: []
-        }}
-        placeholderId="p1"
-        sectionId="s1"
-      />
-    );
-
-    expect(captured.items).toHaveLength(1);
-    expect(captured.items[0]).toMatchObject({
-      id: 42,
-      number: 'ORD-42',
-      createdDate: '2026-09-01T10:00:00Z'
-    });
-    expect(captured.items[0].items).toEqual([
-      {
-        id: 7,
-        name: 'Sneaker',
-        image: '/s.jpg',
-        status: 'Delivered',
-        statusValue: '550',
-        product: {
-          sku: 'SKU-1',
-          base_code: 'BASE-1',
-          name: 'Sneaker',
-          image: '/s.jpg'
-        }
-      },
-      {
-        id: 1,
-        name: 'Boot',
-        image: '',
-        status: 'Approved',
-        statusValue: '400',
-        product: { sku: '', base_code: '', name: 'Boot', image: '' }
-      }
-    ]);
-  });
-});

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

@@ -1,45 +0,0 @@
-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/row-scope.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export interface ThemeRowScopeValue {
-  listType: string;
-  row: Record<string, unknown>;
-  index: number;
-}
-
-const ThemeRowScopeContext = React.createContext<ThemeRowScopeValue | null>(
-  null
-);
-
-export const ThemeRowScopeProvider = ({
-  listType,
-  row,
-  index,
-  children
-}: ThemeRowScopeValue & { children: React.ReactNode }) => {
-  const value = React.useMemo(
-    () => ({ listType, row, index }),
-    [listType, row, index]
-  );
-
-  return (
-    <ThemeRowScopeContext.Provider value={value}>
-      {children}
-    </ThemeRowScopeContext.Provider>
-  );
-};
-
-/** Non-null while a repeated row of any list renders; null everywhere else. */
-export const useThemeRowScope = (): ThemeRowScopeValue | null =>
-  React.useContext(ThemeRowScopeContext);