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

package/src/blocks/add-to-cart-block.tsx

@@ -1,8 +1,10 @@
 'use client';
 
 import React, { useEffect, useRef, useState } from 'react';
+import { useSession } from 'next-auth/react';
 import { useAddProductMutation } from '@akinon/next/data/client/product';
 import { basketApi } from '@akinon/next/data/client/basket';
+import { useAddStockAlertMutation } from '@akinon/next/data/client/wishlist';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
 import {
@@ -12,6 +14,13 @@ import {
 } from '../utils/analytics';
 import { useHostModalCloser } from '../overlays/modal-host-context';
 import { useBlockAction } from '../hooks/use-block-action';
+import { useLocalizeHref } from '../hooks/use-localize-href';
+import { useOverlay } from '../hooks/use-overlay';
+import {
+  CentredModalSurface,
+  LayeredOverlaySurface,
+  OverlayCloseButton
+} from '../overlays/overlay-surface';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -19,10 +28,16 @@ import {
   ThemeVariantGroup,
   getVariantOptionStock,
   isProductInStock,
+  isOptionOfProductSelection,
+  isVariantOptionSoldOut,
   pickProductField,
   readToggle,
   useThemeProduct
 } from './product-block-utils';
+import {
+  STOCK_ALERT_PICK_PARAM,
+  useStockAlertPick
+} from './stock-alert-pick';
 
 const DEFAULT_FEEDBACK_TIMEOUT = 2000;
 
@@ -90,10 +105,26 @@ const readAvailableStock = (product: ThemeProduct | null): number | null => {
  * basket modal") runs after a SUCCESSFUL add rather than on the click: a
  * failed add, the quantity stepper and the designer canvas never run it.
  *
- * Parts: button, label, icon, row, quantity, quantity-button, quantity-input.
+ * With `stockAlert` on, a sold-out product — or a sold-out option the shopper
+ * picked in a variant selector set to hand its alert over here — turns the
+ * button into "notify me when it is back" (ZERO-5233), as long as some other
+ * option of it (another size of the same colour) is still in stock; with
+ * none left it stays on the disabled out-of-stock label. A signed-in shopper
+ * is registered with one press and told so in a dialog or drawer that names
+ * their email; a guest is sent to sign in with the page as the way back,
+ * because commerce only registers alerts for an account.
+ *
+ * Parts: button, label, icon, row, quantity, quantity-button, quantity-input,
+ * title, alert-panel, alert-description, alert-error.
  * Properties: label, addingLabel, addedLabel, errorLabel, outOfStockLabel,
  * fullWidth, quantity, showIcon, icon, iconSize, iconGap, iconPosition,
- * hideWhenOutOfStock,
+ * hideWhenOutOfStock, stockAlert, stockAlertLabel, stockAlertLoginHref,
+ * stockAlertReturnParam, stockAlertPresentation, stockAlertPanelSide,
+ * stockAlertWidth, stockAlertSheetHeight, stockAlertBackdropColor,
+ * stockAlertBackdropOpacity, stockAlertTitle, stockAlertMessage,
+ * stockAlertMessageNoEmail, stockAlertErrorMessage, stockAlertCloseIcon,
+ * stockAlertCloseIconSize,
+ * stockAlertCloseLabel,
  * feedbackDuration, showQuantitySelector, quantityMin, quantityMax,
  * quantityStep, quantityPosition, decreaseLabel, increaseLabel,
  * decreaseAriaLabel, increaseAriaLabel.
@@ -106,6 +137,13 @@ const AddToCartBlock = ({
   const product = useThemeProduct();
   const dispatch = useAppDispatch();
   const [addProduct, { isLoading }] = useAddProductMutation();
+  const [addStockAlert, { isLoading: isAlertSubmitting }] =
+    useAddStockAlertMutation();
+  const { data: session, status: sessionStatus } = useSession();
+  const localize = useLocalizeHref();
+  // Products this page already registered an alert for, so a second press
+  // reads as done instead of posting a duplicate commerce will refuse.
+  const [alertedPks, setAlertedPks] = useState<number[]>([]);
   const [feedback, setFeedback] = useState<'idle' | 'added' | 'error'>('idle');
   // null = the shopper has not touched the stepper, so the amount follows the
   // authored quantity even after the author changes it in the panel.
@@ -255,6 +293,115 @@ const AddToCartBlock = ({
 
   const productPk = Number(pickProductField(product, 'pk'));
   const hasProduct = Number.isFinite(productPk) && productPk > 0;
+  const stockAlertPick = useStockAlertPick(productPk);
+
+  // Off by default: a composition nobody edited keeps its disabled
+  // out-of-stock button exactly as it renders today.
+  const stockAlertEnabled = readToggle(
+    block.properties?.stockAlert,
+    currentBreakpoint,
+    false
+  );
+  const stockAlertLabel = prop('stockAlertLabel', 'Notify me when available');
+  const stockAlertLoginHref = prop('stockAlertLoginHref', '/auth');
+  // `callbackUrl` is what the brands' login views read back, and pz-theme's own
+  // composed login forms read it too (`auth-destination`).
+  const stockAlertReturnParam = prop(
+    'stockAlertReturnParam',
+    'callbackUrl'
+  ).trim();
+  // The same three a Panel offers, per breakpoint, so the confirmation can be
+  // the brand's own drawer on desktop and its bottom sheet on mobile.
+  const stockAlertPresentationValue = prop('stockAlertPresentation', 'modal');
+  const stockAlertPresentation =
+    stockAlertPresentationValue === 'drawer' ||
+    stockAlertPresentationValue === 'sheet'
+      ? stockAlertPresentationValue
+      : 'modal';
+  const stockAlertSheetHeightValue = Number(
+    getResponsiveValue(
+      block.properties?.stockAlertSheetHeight,
+      currentBreakpoint,
+      60
+    )
+  );
+  const stockAlertSheetHeight =
+    Number.isFinite(stockAlertSheetHeightValue) &&
+    stockAlertSheetHeightValue > 0
+      ? Math.min(stockAlertSheetHeightValue, 100)
+      : 60;
+  const stockAlertBackdropColor = prop('stockAlertBackdropColor', '').trim();
+  // In percent, as the Panel's own backdrop opacity is.
+  const stockAlertBackdropOpacityValue = Number(
+    getResponsiveValue(
+      block.properties?.stockAlertBackdropOpacity,
+      currentBreakpoint,
+      50
+    )
+  );
+  const stockAlertBackdropOpacity = Number.isFinite(
+    stockAlertBackdropOpacityValue
+  )
+    ? Math.min(100, Math.max(0, stockAlertBackdropOpacityValue))
+    : 50;
+  const stockAlertPanelSide =
+    prop('stockAlertPanelSide', 'right') === 'left' ? 'left' : 'right';
+  const stockAlertWidthValue = Number(
+    getResponsiveValue(block.properties?.stockAlertWidth, currentBreakpoint, 480)
+  );
+  const stockAlertWidth =
+    Number.isFinite(stockAlertWidthValue) && stockAlertWidthValue > 0
+      ? stockAlertWidthValue
+      : 480;
+  const stockAlertTitle = prop('stockAlertTitle', 'Notify me when available');
+  const stockAlertMessage = prop(
+    'stockAlertMessage',
+    'We will email {email} as soon as this product is back in stock.'
+  );
+  // An account opened with a phone number has no email to name.
+  const stockAlertMessageNoEmail = prop(
+    'stockAlertMessageNoEmail',
+    'We will let you know as soon as this product is back in stock.'
+  );
+  const stockAlertErrorMessage = prop(
+    'stockAlertErrorMessage',
+    'We could not register your alert. Please try again.'
+  );
+  const stockAlertCloseLabel = prop('stockAlertCloseLabel', 'Close');
+  // An icon-font class (e.g. `pz-icon-close`), so the × can be the very glyph
+  // the brand's own drawers close with. Only class-name characters pass: the
+  // value is merchant input on its way to `className`.
+  const stockAlertCloseIcon = prop('stockAlertCloseIcon', '')
+    .trim()
+    .replace(/[^a-zA-Z0-9_\- ]/g, '');
+  const stockAlertCloseIconSizeValue = Number(
+    getResponsiveValue(
+      block.properties?.stockAlertCloseIconSize,
+      currentBreakpoint,
+      12
+    )
+  );
+  const stockAlertCloseIconSize =
+    Number.isFinite(stockAlertCloseIconSizeValue) &&
+    stockAlertCloseIconSizeValue > 0
+      ? stockAlertCloseIconSizeValue
+      : 12;
+
+  // What the dialog is saying, or null while it is closed.
+  const [alertDialog, setAlertDialog] = useState<'success' | 'error' | null>(
+    null
+  );
+  const alertButtonRef = useRef<HTMLButtonElement | null>(null);
+  const closeAlertDialog = () => setAlertDialog(null);
+  // Escape, the scroll lock, the focus trap and `aria-modal` all come from the
+  // shared primitive, as they do for every other overlay in the package.
+  const alertOverlay = useOverlay<HTMLDivElement>({
+    open: stockAlertEnabled && alertDialog !== null,
+    onClose: closeAlertDialog,
+    isDesigner,
+    modal: true,
+    returnFocusRef: alertButtonRef
+  });
 
   if (!hasProduct) {
     return isDesigner ? (
@@ -265,7 +412,258 @@ const AddToCartBlock = ({
     ) : null;
   }
 
+  const scheduleReset = () => {
+    if (feedbackTimer.current) clearTimeout(feedbackTimer.current);
+    feedbackTimer.current = setTimeout(
+      () => setFeedback('idle'),
+      feedbackDuration
+    );
+  };
+
   const inStock = isProductInStock(product);
+  const variantGroups = pickProductField<ThemeVariantGroup[]>(
+    product,
+    'variants'
+  );
+  const optionGroups = (Array.isArray(variantGroups) ? variantGroups : []).filter(
+    (group) => Array.isArray(group?.options) && group.options.length > 0
+  );
+  /**
+   * Whether anything of the picked colour (or whatever the outer attributes
+   * are) can still be bought. The LAST group is the leaf one — its options are
+   * the sizes of the colour on the page — so "every size of this colour is
+   * gone" is that group having no option left in stock. Then there is nothing
+   * to wait for and the button says sold out (ZERO-5233).
+   */
+  const leafGroup = optionGroups[optionGroups.length - 1];
+  // Only the colour's OWN sizes count: commerce fills the row with other
+  // colours' sizes, in stock, when this colour has none.
+  const hasStockedOption = Boolean(
+    leafGroup?.options?.some(
+      (option) =>
+        !isVariantOptionSoldOut(option) &&
+        isOptionOfProductSelection(option, product, optionGroups)
+    )
+  );
+
+  /**
+   * What a "notify me" press would register: the sold-out option the shopper
+   * picked, otherwise the page's own product once it is sold out — but only
+   * while some other option of it is still in stock.
+   */
+  const alertTargetPk =
+    !stockAlertEnabled || !hasStockedOption
+      ? null
+      : stockAlertPick
+      ? stockAlertPick.productPk
+      : !inStock
+      ? productPk
+      : null;
+
+  if (alertTargetPk !== null) {
+    const alerted = alertedPks.includes(alertTargetPk);
+    const sessionEmail = String(
+      (session as { user?: { email?: string } } | null)?.user?.email || ''
+    );
+
+    const sendToSignIn = () => {
+      const href = localize(stockAlertLoginHref);
+      // The way back names the sold-out size too, so the shopper lands on
+      // "notify me" for THAT size rather than on the page's own product.
+      const backParams = new URLSearchParams(window.location.search);
+      if (stockAlertPick) {
+        backParams.set(STOCK_ALERT_PICK_PARAM, String(stockAlertPick.productPk));
+      }
+      const backQuery = backParams.toString();
+      const back = `${window.location.pathname}${
+        backQuery ? `?${backQuery}` : ''
+      }`;
+      const target = stockAlertReturnParam
+        ? `${href}${href.includes('?') ? '&' : '?'}${encodeURIComponent(
+            stockAlertReturnParam
+          )}=${encodeURIComponent(back)}`
+        : href;
+
+      window.location.assign(target);
+    };
+
+    const handleAlertClick = async (
+      event: React.MouseEvent<HTMLButtonElement>
+    ) => {
+      event.preventDefault();
+
+      // The designer is never a shopper: no alert, no redirect.
+      if (isDesigner || isAlertSubmitting) return;
+
+      // Commerce registers alerts against an account only, so a guest signs
+      // in first and is handed back to this very page.
+      if (sessionStatus !== 'authenticated') {
+        sendToSignIn();
+        return;
+      }
+
+      // Already on the list: say so again rather than post a duplicate.
+      if (alerted) {
+        setAlertDialog('success');
+        return;
+      }
+
+      try {
+        await addStockAlert({
+          productPk: alertTargetPk,
+          email: sessionEmail
+        }).unwrap();
+        setAlertedPks((pks) => [...pks, alertTargetPk]);
+        setAlertDialog('success');
+      } catch (error) {
+        // A session that lapsed since the page loaded is still a guest.
+        if ((error as { status?: number } | null)?.status === 401) {
+          sendToSignIn();
+          return;
+        }
+
+        // Said out loud: a shopper who believes they are on a waiting list
+        // and is not is worse off than one who was told nothing.
+        setAlertDialog('error');
+      }
+    };
+
+    const fillMessage = (template: string) =>
+      template.replace(/\{(email|product|option)\}/g, (match, key: string) =>
+        key === 'email'
+          ? sessionEmail
+          : key === 'product'
+          ? String(pickProductField<string>(product, 'title') || '')
+          : key === 'option'
+          ? stockAlertPick?.optionLabel || ''
+          : match
+      );
+
+    // Drawn the way a Panel draws its drawer — the title and the close are
+    // the panel's own first children (`title`, `close`) and the message is the
+    // body — so whatever a brand styled for its drawers styles this one too.
+    // No second close button: the × and the backdrop close it, as they do
+    // every other drawer.
+    const dialogContent = (
+      <div data-add-to-cart-alert="" {...partAttrs('alert-panel')}>
+        {alertDialog === 'error' ? (
+          <p {...partAttrs('alert-error')} role="alert" style={{ margin: 0 }}>
+            {fillMessage(stockAlertErrorMessage)}
+          </p>
+        ) : (
+          <p
+            {...partAttrs('alert-description')}
+            role="status"
+            style={{ margin: 0 }}
+          >
+            {fillMessage(
+              sessionEmail ? stockAlertMessage : stockAlertMessageNoEmail
+            )}
+          </p>
+        )}
+      </div>
+    );
+    const dialogHeader = (
+      <>
+        <OverlayCloseButton
+          label={stockAlertCloseLabel || 'Close'}
+          onClick={closeAlertDialog}
+          icon={
+            stockAlertCloseIcon ? (
+              <i
+                className={`flex ${stockAlertCloseIcon}`}
+                aria-hidden="true"
+                style={{ fontSize: `${stockAlertCloseIconSize}px` }}
+              />
+            ) : undefined
+          }
+        />
+        {stockAlertTitle && (
+          <div
+            {...partAttrs('title')}
+            style={{ marginBottom: '12px', fontWeight: 600 }}
+          >
+            {stockAlertTitle}
+          </div>
+        )}
+      </>
+    );
+    const surfaceProps = {
+      overlayProps: alertOverlay.overlayProps,
+      ariaLabel: stockAlertTitle,
+      closeOnOverlay: true,
+      onDismiss: closeAlertDialog,
+      width: stockAlertWidth,
+      backdropColor: stockAlertBackdropColor || undefined,
+      backdropOpacity: stockAlertBackdropOpacity,
+      header: dialogHeader,
+      markers: { root: { 'data-add-to-cart-alert-root': '' } }
+    };
+
+    return (
+      <>
+        <button
+          ref={alertButtonRef}
+          type="button"
+          data-add-to-cart=""
+          data-add-to-cart-state={
+            isAlertSubmitting
+              ? 'busy'
+              : alerted
+              ? 'stock-alert-sent'
+              : 'stock-alert'
+          }
+          {...partAttrs('button', {
+            unavailable: true,
+            loading: isAlertSubmitting,
+            disabled: isAlertSubmitting
+          })}
+          disabled={isAlertSubmitting}
+          aria-busy={isAlertSubmitting}
+          aria-haspopup="dialog"
+          onClick={handleAlertClick}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: fullWidth ? '100%' : 'auto',
+            padding: 0,
+            margin: 0,
+            border: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            textAlign: 'center',
+            cursor: isAlertSubmitting ? 'default' : 'pointer',
+            opacity: isAlertSubmitting ? 0.7 : 1,
+            transition: 'opacity 150ms ease'
+          }}
+        >
+          <span data-add-to-cart-label="" {...partAttrs('label')}>
+            {stockAlertLabel}
+          </span>
+        </button>
+
+        {stockAlertEnabled &&
+          alertDialog !== null &&
+          (stockAlertPresentation === 'modal' ? (
+            <CentredModalSurface {...surfaceProps}>
+              {dialogContent}
+            </CentredModalSurface>
+          ) : (
+            <LayeredOverlaySurface
+              {...surfaceProps}
+              presentation={stockAlertPresentation}
+              showBackdrop
+              panelSide={stockAlertPanelSide}
+              sheetHeight={stockAlertSheetHeight}
+            >
+              {dialogContent}
+            </LayeredOverlaySurface>
+          ))}
+      </>
+    );
+  }
 
   // Brands that would rather show nothing than a dead button get the block
   // removed outright; the author still sees it in the designer.
@@ -290,14 +688,6 @@ const AddToCartBlock = ({
     ? errorLabel
     : label;
 
-  const scheduleReset = () => {
-    if (feedbackTimer.current) clearTimeout(feedbackTimer.current);
-    feedbackTimer.current = setTimeout(
-      () => setFeedback('idle'),
-      feedbackDuration
-    );
-  };
-
   const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
     // A product card is often one big link with this button inside it. The
     // button has no default of its own (`type="button"`), so cancelling the

package/src/blocks/item-template.tsx

@@ -15,7 +15,6 @@ import {
   resolveItemProduct
 } from './item-template-utils';
 import { ThemeItemScopeProvider } from './product-block-utils';
-import { ThemeRowScopeProvider } from './row-scope';
 
 export {
   findItemTemplate,
@@ -121,15 +120,20 @@ export const ItemTemplateList = ({
   const scopesProducts = publishesProductItems(block.type);
   // The same slice the iterator applied, so clone N is handed the row it
   // was built from rather than row N.
-  const slicedRows = sliceIteratorItems(block, rows).items;
+  const scopedRows = scopesProducts
+    ? sliceIteratorItems(block, rows).items
+    : rows;
 
   return (
     <>
       {clones.map((clone, index) => {
         const key = clone.id || `${template.id}-item-${index}`;
-        const rowData = slicedRows[index] ?? {};
         const row = (
           <ThemeBlock
+            // Keyed here so the non-scoped branch is the element it always
+            // was: wrapping it in anything, even a fragment, would change the
+            // element type at this position and remount every existing row.
+            key={key}
             block={clone}
             placeholderId={placeholderId}
             sectionId={sectionId}
@@ -139,32 +143,22 @@ export const ItemTemplateList = ({
             currentBreakpoint={currentBreakpoint}
           />
         );
-        const scoped = scopesProducts
-          ? resolveItemProduct(block.type, rowData)
-          : null;
 
-        // Context only — the providers render no element, so the markup a
-        // published row produces is unchanged. Every list opens the row
-        // scope; only product lists open the product scope on top of it.
+        if (!scopesProducts) return row;
+
+        const scoped = resolveItemProduct(block.type, scopedRows[index]);
+
+        // Context only — the provider renders no element, so the markup a
+        // published row produces is unchanged.
         return (
-          <ThemeRowScopeProvider
+          <ThemeItemScopeProvider
             key={key}
-            listType={block.type}
-            row={rowData}
-            index={index}
+            product={
+              scoped ?? (isDesigner ? DESIGNER_SAMPLE_PRODUCT : null)
+            }
           >
-            {scopesProducts ? (
-              <ThemeItemScopeProvider
-                product={
-                  scoped ?? (isDesigner ? DESIGNER_SAMPLE_PRODUCT : null)
-                }
-              >
-                {row}
-              </ThemeItemScopeProvider>
-            ) : (
-              row
-            )}
-          </ThemeRowScopeProvider>
+            {row}
+          </ThemeItemScopeProvider>
         );
       })}
     </>

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

@@ -13,14 +13,7 @@ import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 interface OrderItemLike {
-  id?: number;
-  status?: { value?: string | number; label?: string };
-  product?: {
-    image?: string;
-    name?: string;
-    sku?: string;
-    base_code?: string;
-  } | null;
+  product?: { image?: string; name?: string } | null;
 }
 
 interface OrderLike {
@@ -255,23 +248,7 @@ const OrderListBlock = ({
         maxImages
     ),
     url: hrefFor(order),
-    href: hrefFor(order),
-    createdDate: order.created_date || '',
-    items: (Array.isArray(order.orderitem_set) ? order.orderitem_set : []).map(
-      (item, itemIndex) => ({
-        id: item?.id ?? itemIndex,
-        name: item?.product?.name || '',
-        image: item?.product?.image || '',
-        status: item?.status?.label || '',
-        statusValue: String(item?.status?.value ?? ''),
-        product: {
-          sku: item?.product?.sku || '',
-          base_code: item?.product?.base_code || '',
-          name: item?.product?.name || '',
-          image: item?.product?.image || ''
-        }
-      })
-    )
+    href: hrefFor(order)
   }));
 
   // A designer who marked a child as the row layout gets that layout repeated

package/src/blocks/product-block-utils.tsx

@@ -458,6 +458,46 @@ export const isVariantOptionSoldOut = (
   option?.is_selectable === false ||
   getVariantOptionStock(option) === 0;
 
+/**
+ * Whether a LEAF option (a size) belongs to the same outer selection (the
+ * colour) as the product on the page (ZERO-5233).
+ *
+ * Commerce does not keep the leaf row to the page's colour. A size the colour
+ * does not have is filled with that size of ANOTHER colour — and on a colour
+ * that is sold out altogether, every size is: the yellow page lists S as the
+ * green one and M as the brown one, in stock. Asking "does this colour have a
+ * size left" of that row as sent answers yes for a colour that has none, so
+ * that question is asked of the colour's own sizes only.
+ *
+ * Compared on the outer groups' attribute keys: the page product carries its
+ * own values (`attributesKeyed`, or the raw `attributes` map) and every option
+ * its product's. A value missing on either side cannot be compared and counts
+ * as a match, so a payload without attributes behaves exactly as before.
+ */
+export const isOptionOfProductSelection = (
+  option: ThemeVariantOption | null | undefined,
+  product: ThemeProduct | null,
+  groups: ThemeVariantGroup[]
+): boolean => {
+  const keyed = toRecord(pickProductField(product, 'attributesKeyed'));
+  const raw = pickProductField(product, 'attributes');
+  const own =
+    Object.keys(keyed).length > 0
+      ? keyed
+      : raw && typeof raw === 'object' && !Array.isArray(raw)
+      ? toRecord(raw)
+      : {};
+  const theirs = toRecord(option?.product?.attributes);
+
+  return groups.slice(0, -1).every((group) => {
+    const key = String(group?.attribute_key || '');
+    const mine = toText(own[key]);
+    const other = toText(theirs[key]);
+
+    return !key || !mine || !other || mine === other;
+  });
+};
+
 const isColorKey = (key: string): boolean => {
   const normalized = key.toLowerCase();