@akinon/pz-theme 2.0.152-rc.3 → 2.0.153-beta.0

package/src/blocks/stock-alert-pick.ts

@@ -0,0 +1,106 @@
+'use client';
+
+import { useEffect, useSyncExternalStore } from 'react';
+import { usePathname } from 'next/navigation';
+
+/**
+ * The sold-out option a shopper picked to be told about, handed from the
+ * variant selector to the add-to-cart button (ZERO-5233).
+ *
+ * Commerce makes every in-stock option its own product URL, so picking one is
+ * a navigation and the button simply reads the new page's product. A sold-out
+ * option has no page to go to (its url redirects away), so "the shopper picked
+ * L, which is gone" has to live somewhere both blocks can see without a
+ * navigation: here. The two blocks sit in different sections of a composition
+ * with no common parent of their own, which is why this is a module store
+ * rather than a context.
+ *
+ * Every pick names the page product it was made on and is only ever read back
+ * against that same product. It is also dropped on every navigation (see
+ * `useStockAlertPick`), so going to another colour and coming back with the
+ * browser's back button never brings an old pick back.
+ *
+ * It survives one thing on purpose: a guest sent to sign in. The way back
+ * carries the pick in `STOCK_ALERT_PICK_PARAM`, and the variant selector picks
+ * that option again when the page opens (ZERO-5233).
+ */
+
+/** The query key the picked sold-out option's product id travels under. */
+export const STOCK_ALERT_PICK_PARAM = 'stock_alert';
+
+export interface StockAlertPick {
+  /** The page product the pick was made on. */
+  pagePk: number;
+  /** The sold-out option's own product — what the alert is registered for. */
+  productPk: number;
+  optionLabel: string;
+  attributeKey: string;
+}
+
+let current: StockAlertPick | null = null;
+const listeners = new Set<() => void>();
+
+const notify = () => listeners.forEach((listener) => listener());
+
+export const setStockAlertPick = (pick: StockAlertPick | null): void => {
+  if (
+    current === pick ||
+    (current &&
+      pick &&
+      current.pagePk === pick.pagePk &&
+      current.productPk === pick.productPk &&
+      current.attributeKey === pick.attributeKey)
+  ) {
+    return;
+  }
+
+  current = pick;
+  notify();
+};
+
+export const getStockAlertPick = (): StockAlertPick | null => current;
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+
+  return () => {
+    listeners.delete(listener);
+  };
+};
+
+// The server never has a pick: it cannot know what a shopper clicked.
+const getServerSnapshot = (): StockAlertPick | null => null;
+
+/**
+ * The path the store last saw. Module-level rather than a ref, because a
+ * navigation can remount every block that reads the pick: a ref would start
+ * over on the new page and never see the change.
+ */
+let lastPathname: string | null = null;
+
+/** The live pick for `pagePk`, or null when there is none for this page. */
+export const useStockAlertPick = (pagePk: number): StockAlertPick | null => {
+  const pathname = usePathname();
+
+  // A pick belongs to the page it was made on: any navigation drops it.
+  useEffect(() => {
+    if (lastPathname !== null && lastPathname !== pathname) {
+      setStockAlertPick(null);
+    }
+    lastPathname = pathname;
+  }, [pathname]);
+
+  const pick = useSyncExternalStore(
+    subscribe,
+    getStockAlertPick,
+    getServerSnapshot
+  );
+
+  return pick && pick.pagePk === pagePk ? pick : null;
+};
+
+export const __resetStockAlertPickForTests = () => {
+  current = null;
+  lastPathname = null;
+  listeners.clear();
+};

package/src/blocks/variant-selector-block.tsx

@@ -17,10 +17,17 @@ import {
   getVariantOptionColor,
   getVariantOptionImage,
   getVariantOptionStock,
+  isOptionOfProductSelection,
   pickProductField,
   readToggle,
   useThemeProduct
 } from './product-block-utils';
+import {
+  STOCK_ALERT_PICK_PARAM,
+  getStockAlertPick,
+  setStockAlertPick,
+  useStockAlertPick
+} from './stock-alert-pick';
 
 const getOptionUrl = (option: ThemeVariantOption): string =>
   String(option?.product?.absolute_url || '').trim();
@@ -210,7 +217,10 @@ const collapseOptions = <T,>(
  *
  * A sold-out option is a dead end by default and stays one unless a brand turns
  * `stockAlert` on: then it becomes a real control that opens a back-in-stock
- * form bound to THAT option's own product id.
+ * form bound to THAT option's own product id. With `stockAlertPresentation`
+ * set to `add-to-cart` it opens nothing: the option becomes a pick that the
+ * page's Add to Cart block (with its own `stockAlert` on) turns into its
+ * "notify me" button for that option.
  *
  * Parts: group, label, selected-value, dropdown, option-list, option, swatch,
  * view-all, strike, low-stock, alert-backdrop, alert-panel, alert-title,
@@ -394,10 +404,16 @@ const VariantSelectorBlock = ({
 
   // Every word a shopper reads is the brand's, never ours: these markets
   // attach legal text to collecting an email and only the brand knows it.
+  // `add-to-cart` draws no form at all: a sold-out option becomes a pick the
+  // page's Add to Cart button turns into its own "notify me" (ZERO-5233).
+  const alertPresentationValue = alertProp('stockAlertPresentation', 'inline');
   const alertPresentation =
-    alertProp('stockAlertPresentation', 'inline') === 'modal'
-      ? 'modal'
+    alertPresentationValue === 'modal' ||
+    alertPresentationValue === 'add-to-cart'
+      ? alertPresentationValue
       : 'inline';
+  const pagePk = Number(pickProductField(product, 'pk'));
+  const stockAlertPick = useStockAlertPick(pagePk);
   const alertTriggerLabel = alertProp(
     'stockAlertTriggerLabel',
     'Notify me when back in stock'
@@ -532,6 +548,58 @@ const VariantSelectorBlock = ({
   const groups = (Array.isArray(rawGroups) ? rawGroups : []).filter(
     (group) => Array.isArray(group?.options) && group.options.length > 0
   );
+  const handsAlertToButton =
+    stockAlertEnabled && alertPresentation === 'add-to-cart';
+
+  /**
+   * A guest sent to sign in from "notify me" comes back with the sold-out
+   * option they had picked in the url, so the button is back on THAT size and
+   * one more press registers it. The key is taken out of the address again so
+   * a reload or a shared link does not pick it a second time.
+   */
+  React.useEffect(() => {
+    if (isDesigner || !handsAlertToButton || typeof window === 'undefined') {
+      return;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const wanted = Number(params.get(STOCK_ALERT_PICK_PARAM));
+
+    if (!Number.isFinite(wanted) || wanted <= 0) return;
+
+    const leaf = groups[groups.length - 1];
+    const options = leaf?.options || [];
+    const ownSize = (entry: ThemeVariantOption) =>
+      isOptionOfProductSelection(entry, product, groups);
+    const option = options.find(
+      (entry) => getOptionProductPk(entry) === wanted && isOptionSoldOut(entry)
+    );
+
+    if (
+      option &&
+      !getStockAlertPick() &&
+      options.some((entry) => !isOptionSoldOut(entry) && ownSize(entry))
+    ) {
+      setStockAlertPick({
+        pagePk,
+        productPk: wanted,
+        optionLabel: String(option.label || option.value || ''),
+        attributeKey: String(leaf?.attribute_key || '')
+      });
+    }
+
+    params.delete(STOCK_ALERT_PICK_PARAM);
+    const query = params.toString();
+    window.history.replaceState(
+      window.history.state,
+      '',
+      `${window.location.pathname}${query ? `?${query}` : ''}${
+        window.location.hash
+      }`
+    );
+    // Once per page: the url is read when the page opens, not on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pagePk, handsAlertToButton, isDesigner]);
 
   if (groups.length === 0) {
     return isDesigner ? (
@@ -818,9 +886,35 @@ const VariantSelectorBlock = ({
     >
       {groups.map((group, groupIndex) => {
         const options = group.options || [];
-        const selectedOption = options.find(
-          (option) => option?.is_selected === true
-        );
+        // A sold-out option the shopper picked for the button's alert stands
+        // in for the group's selection until they pick something else.
+        const pickedKey =
+          stockAlertEnabled &&
+          alertPresentation === 'add-to-cart' &&
+          stockAlertPick?.attributeKey === String(group.attribute_key || '')
+            ? stockAlertPick.productPk
+            : null;
+        const isPickedOption = (option: ThemeVariantOption) =>
+          pickedKey !== null && getOptionProductPk(option) === pickedKey;
+        // Only the LEAF group (the sizes of the colour on the page) hands a
+        // pick to the button, and only while one of them is still in stock:
+        // that is the same question the button asks before it offers the
+        // alert, so the two can never disagree.
+        const isLeafGroup = groupIndex === groups.length - 1;
+        // Commerce fills a colour's missing sizes with other colours' ones;
+        // only the colour's own sizes say whether it has any left.
+        const isOwnOption = (option: ThemeVariantOption) =>
+          isOptionOfProductSelection(option, product, groups);
+        const groupHasStock =
+          isLeafGroup &&
+          options.some(
+            (option) => !isOptionSoldOut(option) && isOwnOption(option)
+          );
+        const selectedOption =
+          options.find(isPickedOption) ||
+          (pickedKey === null
+            ? options.find((option) => option?.is_selected === true)
+            : undefined);
         // The <select> is controlled by URL, so an empty value needs a real
         // matching option or React drops the selection on every render.
         const selectedUrl = selectedOption ? getOptionUrl(selectedOption) : '';
@@ -877,7 +971,7 @@ const VariantSelectorBlock = ({
           const label = String(option?.label || option?.value || '');
           const url = getOptionUrl(option);
           const disabled = isOptionDisabled(option);
-          const selected = option?.is_selected === true;
+          const selected = option === selectedOption;
           const struck = disabled && disabledStyle === 'line-through';
           const showStrike = disabled && disabledStyle === 'diagonal';
           // A number commerce actually sent, above zero (zero is sold out, not
@@ -1049,7 +1143,63 @@ const VariantSelectorBlock = ({
               isOptionSoldOut(option) &&
               optionPk !== null;
 
-            if (alertable) {
+            // With every option of the group gone the button says sold out,
+            // so a pick would offer an alert the button will not register.
+            // A sold-out size commerce filled from another colour is pickable
+            // too, and its alert goes to the product commerce sent for it —
+            // what gant_zero did (`data-notice`), at GANT's request.
+            if (
+              alertable &&
+              alertPresentation === 'add-to-cart' &&
+              groupHasStock
+            ) {
+              const groupAttributeKey = String(group.attribute_key || '');
+
+              return (
+                <button
+                  key={String(option?.value || optionIndex)}
+                  type="button"
+                  data-variant-option={selected ? 'picked' : 'disabled'}
+                  {...named}
+                  // `selected` as well as `disabled`, so the brand's selected
+                  // underline lands on the picked size while its sold-out
+                  // strike stays drawn.
+                  {...partAttrs('option', { disabled: true, selected })}
+                  aria-label={[label, alertTriggerLabel]
+                    .filter(Boolean)
+                    .join(' — ')}
+                  title={alertTriggerLabel || label}
+                  aria-pressed={selected}
+                  onClick={() => {
+                    if (isDesigner) return;
+
+                    // A second press hands the button back to the page's own
+                    // product rather than leaving no way to undo the pick.
+                    setStockAlertPick(
+                      selected
+                        ? null
+                        : {
+                            pagePk,
+                            productPk: optionPk,
+                            optionLabel: label,
+                            attributeKey: groupAttributeKey
+                          }
+                    );
+                  }}
+                  style={{
+                    ...optionStyle,
+                    background: 'transparent',
+                    font: 'inherit',
+                    textAlign: 'center',
+                    cursor: 'pointer'
+                  }}
+                >
+                  {content}
+                </button>
+              );
+            }
+
+            if (alertable && alertPresentation !== 'add-to-cart') {
               const optionKey = `${groupKey}::${String(
                 option?.value || optionIndex
               )}`;
@@ -1133,7 +1283,15 @@ const VariantSelectorBlock = ({
               {...named}
               {...partAttrs('option', { selected })}
               onClick={(event) => {
-                if (isDesigner) event.preventDefault();
+                if (isDesigner) {
+                  event.preventDefault();
+                  return;
+                }
+
+                // Picking a size that IS in stock ends the sold-out pick, even
+                // the one already on the page — its link goes nowhere new, so
+                // no navigation would drop the pick for it.
+                if (stockAlertPick) setStockAlertPick(null);
               }}
               style={optionStyle}
             >

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

@@ -41,7 +41,7 @@ const orderPayload = {
   orderitem_set: [
     {
       price: '649.95',
-      status: { value: '500', label: 'Shipped' },
+      status: { label: 'Shipped' },
       product: {
         name: 'Spring Sneaker',
         image: '/i.jpg',
@@ -63,19 +63,6 @@ describe('buildOrderPageContext', () => {
     expect(context.order.currency).toBe('TRY');
     expect(context.order.items).toHaveLength(1);
     expect(context.order.items[0].title).toBe('Spring Sneaker');
-    expect(context.order.items[0].status).toBe('Shipped');
-    expect(context.order.items[0].statusValue).toBe('500');
-  });
-
-  it('stringifies a numeric order item status code', () => {
-    const context = buildOrderPageContext({
-      order: {
-        ...orderPayload,
-        orderitem_set: [{ status: { value: 550, label: 'Delivered' } }]
-      }
-    });
-
-    expect(context.order.items[0].statusValue).toBe('550');
   });
 
   it('does not publish the identity fields the raw payload carries', () => {

package/src/chrome/page-context.ts

@@ -59,9 +59,6 @@ const toRecord = (value: unknown): UnknownRecord =>
 const toStringValue = (value: unknown, fallback = ''): string =>
   typeof value === 'string' ? value : fallback;
 
-const toCodeValue = (value: unknown): string =>
-  typeof value === 'number' ? String(value) : toStringValue(value);
-
 const humanizeSlug = (value: string) =>
   value
     .split('-')
@@ -482,7 +479,6 @@ export const buildOrderPageContext = ({
       unitPrice: toStringValue(item.price),
       quantity: 1,
       status: toStringValue(toRecord(item.status).label),
-      statusValue: toCodeValue(toRecord(item.status).value),
       currency
     };
   });

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/overlays/overlay-surface.tsx

@@ -325,6 +325,12 @@ export interface OverlayCloseButtonProps {
   textSide?: 'before' | 'after';
   /** Legacy marker attribute, e.g. `{ 'data-size-guide-close': '' }`. */
   markerAttrs?: Record<string, string>;
+  /**
+   * Drawn instead of the built-in cross — a brand's own icon, e.g. the icon
+   * font glyph its other drawers close with. Absent draws the cross exactly
+   * as before, so `panel-legacy-golden.json` cannot move.
+   */
+  icon?: React.ReactNode;
 }
 
 /** px unless the author wrote a length. */
@@ -349,7 +355,8 @@ export const OverlayCloseButton = ({
   elevate,
   text,
   textSide,
-  markerAttrs
+  markerAttrs,
+  icon
 }: OverlayCloseButtonProps) => (
   <button
     type="button"
@@ -394,17 +401,19 @@ export const OverlayCloseButton = ({
         : null)
     }}
   >
-    <svg
-      width={size === undefined ? '18' : asCssLength(size, '18px')}
-      height={size === undefined ? '18' : asCssLength(size, '18px')}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-    >
-      <path d="M6 6l12 12M18 6L6 18" />
-    </svg>
+    {icon ?? (
+      <svg
+        width={size === undefined ? '18' : asCssLength(size, '18px')}
+        height={size === undefined ? '18' : asCssLength(size, '18px')}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      >
+        <path d="M6 6l12 12M18 6L6 18" />
+      </svg>
+    )}
     {text ? <span {...partAttrs('close-text')}>{text}</span> : null}
   </button>
 );

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