@akinon/projectzero 2.0.43 → 2.0.44

package/app-template/src/views/checkout/variants/one-page/one-page-summary.tsx

@@ -2,6 +2,7 @@ import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useLocalization } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { Price, Link } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { Image } from '@akinon/next/components/image';
 import { StoreCredits } from '@theme/views/checkout/steps/payment/options/store-credit';
 import type { RootState } from '@theme/redux/store';
@@ -37,9 +38,18 @@ const OnePageSummary = ({
       />
       <StoreCredits />
 
-      <section className="overflow-hidden rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]">
-        <header className="flex items-baseline justify-between px-6 py-5">
-          <span className="text-lg font-semibold tracking-tight text-black-800">
+      <section
+        className="overflow-hidden rounded-2xl bg-white shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]"
+        {...partAttrs('summary')}
+      >
+        <header
+          className="flex items-baseline justify-between px-6 py-5"
+          {...partAttrs('summary-header')}
+        >
+          <span
+            className="text-lg font-semibold tracking-tight text-black-800"
+            {...partAttrs('summary-title')}
+          >
             {t('checkout.summary.title')}
           </span>
           <span className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
@@ -52,6 +62,7 @@ const OnePageSummary = ({
             <li
               key={`one-page-summary-item-${index}`}
               className="flex gap-3 px-6 py-4"
+              {...partAttrs('summary-item')}
             >
               <Link
                 href={item.product.absolute_url || '#'}
@@ -100,30 +111,67 @@ const OnePageSummary = ({
         </ul>
 
         <dl className="space-y-2.5 border-t border-gray-100 px-6 py-5 text-sm text-gray-600">
-          <div className="flex items-center justify-between">
-            <dt>{t('checkout.summary.subtotal')}</dt>
-            <dd className="font-medium tabular-nums text-black-800">
+          <div
+            className="flex items-center justify-between"
+            {...partAttrs('summary-row')}
+          >
+            <dt {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.subtotal')}
+            </dt>
+            {/*
+              The amount declares its own weight and colour, so a rule on the
+              row can never reach it by inheritance — it gets its own part
+              instead of leaving the row's Text Color a dead control.
+            */}
+            <dd
+              className="font-medium tabular-nums text-black-800"
+              {...partAttrs('summary-row-value')}
+            >
               <Price value={preOrder.basket.total_amount} />
             </dd>
           </div>
-          <div className="flex items-center justify-between">
-            <dt>{t('checkout.summary.shipping')}</dt>
-            <dd className="font-medium tabular-nums text-black-800">
+          <div
+            className="flex items-center justify-between"
+            {...partAttrs('summary-row')}
+          >
+            <dt {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.shipping')}
+            </dt>
+            <dd
+              className="font-medium tabular-nums text-black-800"
+              {...partAttrs('summary-row-value')}
+            >
               <Price value={preOrder.shipping_amount} />
             </dd>
           </div>
           {parseFloat(preOrder.loyalty_money || '0') > 0 && (
-            <div className="flex items-center justify-between">
-              <dt>{t('checkout.summary.loyalty_money_total')}</dt>
-              <dd className="font-medium tabular-nums text-black-800">
+            <div
+              className="flex items-center justify-between"
+              {...partAttrs('summary-row')}
+            >
+              <dt {...partAttrs('summary-row-label')}>
+                {t('checkout.summary.loyalty_money_total')}
+              </dt>
+              <dd
+                className="font-medium tabular-nums text-black-800"
+                {...partAttrs('summary-row-value')}
+              >
                 <Price value={preOrder.loyalty_money} />
               </dd>
             </div>
           )}
           {parseFloat(preOrder.basket.total_discount_amount || '0') > 0 && (
-            <div className="flex items-center justify-between">
-              <dt>{t('checkout.summary.discounts_total')}</dt>
-              <dd className="font-medium tabular-nums text-black-800">
+            <div
+              className="flex items-center justify-between"
+              {...partAttrs('summary-row')}
+            >
+              <dt {...partAttrs('summary-row-label')}>
+                {t('checkout.summary.discounts_total')}
+              </dt>
+              <dd
+                className="font-medium tabular-nums text-black-800"
+                {...partAttrs('summary-row-value')}
+              >
                 <Price
                   value={preOrder.basket.total_discount_amount}
                   useNegative
@@ -133,11 +181,22 @@ const OnePageSummary = ({
           )}
         </dl>
 
-        <div className="flex items-baseline justify-between border-t border-gray-100 px-6 py-5">
-          <span className="text-sm font-medium uppercase tracking-wider text-gray-700">
+        {/*
+          The row carries the baseline typography that used to live on the
+          label span, so the row's own controls have something to change; the
+          amount keeps its distinct treatment and answers to its own part.
+        */}
+        <div
+          className="flex items-baseline justify-between border-t border-gray-100 px-6 py-5 text-sm font-medium uppercase tracking-wider text-gray-700"
+          {...partAttrs('summary-total')}
+        >
+          <span {...partAttrs('summary-total-label')}>
             {t('checkout.summary.total')}
           </span>
-          <span className="text-2xl font-bold tracking-tight text-black-800 tabular-nums">
+          <span
+            className="text-2xl font-bold tracking-tight text-black-800 tabular-nums"
+            {...partAttrs('summary-total-value')}
+          >
             <Price value={preOrder.unpaid_amount} />
           </span>
         </div>
@@ -175,6 +234,7 @@ const OnePageSummary = ({
                     onClick={() => onEditSection('address')}
                     className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
                     data-testid="one-page-summary-edit-address"
+                    {...partAttrs('summary-edit')}
                   >
                     {t('checkout.one_page.edit')}
                   </button>
@@ -201,6 +261,7 @@ const OnePageSummary = ({
                     onClick={() => onEditSection('shipping')}
                     className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
                     data-testid="one-page-summary-edit-shipping"
+                    {...partAttrs('summary-edit')}
                   >
                     {t('checkout.one_page.edit')}
                   </button>
@@ -222,6 +283,7 @@ const OnePageSummary = ({
                     onClick={() => onEditSection('payment')}
                     className="rounded-md px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-black-800"
                     data-testid="one-page-summary-edit-payment"
+                    {...partAttrs('summary-edit')}
                   >
                     {t('checkout.one_page.edit')}
                   </button>

package/app-template/src/views/checkout/variants/one-page/payment-options-grid.tsx

@@ -4,6 +4,7 @@ import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
 import { useLocalization } from '@akinon/next/hooks';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { Icon } from '@theme/components';
 import type { RootState } from '@theme/redux/store';
 import type { CheckoutPaymentOption } from '@akinon/next/types';
@@ -138,6 +139,7 @@ const PaymentOptionsGrid = () => {
       role="radiogroup"
       aria-label={t('checkout.one_page.payment.title')}
       onKeyDown={handleKeyDown}
+      {...partAttrs('payment-options')}
     >
       {visibleOptions.map((option, index) => {
         const selected = preOrder?.payment_option?.pk === option.pk;
@@ -152,45 +154,55 @@ const PaymentOptionsGrid = () => {
             className={clsx(
               'group relative flex min-h-[5rem] items-center gap-3',
               'rounded-xl border px-4 py-3 text-left',
+              // Typography and colour sit on the button — the element the
+              // payment-option part is stamped on — instead of on the label
+              // span. A part rule can only reach the label by inheritance, and
+              // a utility class declared on the span outranks an inherited
+              // value however !important the rule is, so every Text Color /
+              // Font Size / Font Weight control in the panel was a silent
+              // no-op while these lived one level down.
+              'text-sm font-medium leading-tight',
               'transition-all duration-200 ease-out',
               'focus:outline-none focus-visible:ring-2 focus-visible:ring-black-800 focus-visible:ring-offset-2',
               selected
-                ? 'border-black-800 bg-black-800/[0.03] shadow-[inset_0_0_0_1px_rgb(31,31,31)]'
-                : 'border-gray-200 bg-white hover:border-gray-400'
+                ? 'border-black-800 bg-black-800/[0.03] text-black-800 shadow-[inset_0_0_0_1px_rgb(31,31,31)]'
+                : 'border-gray-200 bg-white text-gray-700 hover:border-gray-400'
             )}
             data-testid={`one-page-payment-card-${option.pk}`}
             data-payment-type={option.payment_type}
+            {...partAttrs('payment-option', { selected })}
           >
+            {/*
+              `Icon` renders an icon FONT (<i class="pz-icon-…">), so the
+              `fill-*` utilities that used to sit here never coloured
+              anything — fill only applies to SVG. The glyph takes its colour
+              from `color`, which now comes from the button, so the icon
+              follows both the selected state and the panel's Text Color.
+            */}
             <Icon
               name={getOptionIcon(option)}
               size={20}
-              className={clsx(
-                'flex-shrink-0 transition-colors',
-                selected ? 'fill-black-800' : 'fill-gray-600'
-              )}
+              className="flex-shrink-0 transition-colors"
               aria-hidden="true"
+              {...partAttrs('payment-option-icon')}
             />
+            <span className="flex-1">{option.name}</span>
+            {/*
+              A ring of `currentColor` with a transparent centre: the marker
+              follows whatever colour the composition sets on the button and
+              the middle shows the card's own background, so it stays legible
+              on any palette. The geometry is what the filled circle plus its
+              6px inner dot drew before.
+            */}
             <span
               className={clsx(
-                'flex-1 text-sm font-medium leading-tight',
-                selected ? 'text-black-800' : 'text-gray-700'
-              )}
-            >
-              {option.name}
-            </span>
-            <span
-              className={clsx(
-                'flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full border-2 transition-all',
+                'flex h-4 w-4 flex-shrink-0 rounded-full transition-all',
                 selected
-                  ? 'border-black-800 bg-black-800'
-                  : 'border-gray-300 bg-white group-hover:border-gray-400'
+                  ? 'border-[5px] border-current'
+                  : 'border-2 border-gray-300 group-hover:border-gray-400'
               )}
               aria-hidden="true"
-            >
-              {selected && (
-                <span className="block h-1.5 w-1.5 rounded-full bg-white" />
-              )}
-            </span>
+            />
           </button>
         );
       })}

package/app-template/src/views/checkout/variants/one-page/sections/address-section.tsx

@@ -4,6 +4,7 @@ import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useSetAddressesMutation } from '@akinon/next/data/client/checkout';
 import { useAddAddressMutation } from '@akinon/next/data/client/address';
 import { Button, Checkbox, Icon, Modal, Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { AddressForm } from '@theme/views/account/address-form';
 import { useLocalization } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
@@ -295,6 +296,7 @@ const AddressSection = ({
               }
               onClick={onComplete}
               data-testid="one-page-address-continue"
+              {...partAttrs('continue-button')}
             >
               {t('checkout.one_page.continue_to_shipping')}
             </Button>

package/app-template/src/views/checkout/variants/one-page/sections/payment-section.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useLocalization } from '@akinon/next/hooks';
 import SelectedPaymentOptionView from '@akinon/next/components/selected-payment-option-view';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import type { RootState } from '@theme/redux/store';
 import AccordionSection, { SectionStatus } from '../accordion-section';
 import PaymentOptionsGrid from '../payment-options-grid';
@@ -51,6 +52,7 @@ const PaymentSection = ({ status, onEdit }: PaymentSectionProps) => {
           <div
             className="border-t border-gray-200"
             data-testid="one-page-selected-payment"
+            {...partAttrs('payment-panel')}
           >
             <SelectedPaymentOptionView />
           </div>

package/app-template/src/views/checkout/variants/one-page/sections/shipping-section.tsx

@@ -9,6 +9,7 @@ import {
 import { setSelectedShippingOptions } from '@akinon/next/redux/reducers/checkout';
 import { useLocalization } from '@akinon/next/hooks';
 import { Button, Price, Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import type { RootState } from '@theme/redux/store';
 import AccordionSection, { SectionStatus } from '../accordion-section';
 import { ShippingOptionsSkeleton } from '../skeletons/shipping-skeleton';
@@ -284,6 +285,7 @@ const ShippingSection = ({
               <Button
                 onClick={onComplete}
                 data-testid="one-page-shipping-continue"
+                {...partAttrs('continue-button')}
               >
                 {t('checkout.one_page.continue_to_payment')}
               </Button>

package/app-template/src/views/checkout/variants/registry.ts

@@ -23,10 +23,21 @@ export const UNIFIED_VARIANTS: ReadonlySet<string> = new Set([
 ]);
 
 export const getCheckoutVariant = (variant: CheckoutVariantId | undefined) => {
-  const loader = variantLoaders[variant ?? 'multi-step'] ?? variantLoaders['multi-step'];
+  // Own-key lookup only (see `isKnownVariant`): an inherited member would
+  // resolve to a truthy non-loader and `dynamic()` would never render a flow.
+  const loader = isKnownVariant(variant)
+    ? variantLoaders[variant]
+    : variantLoaders['multi-step'];
 
   return dynamic(loader, { ssr: false });
 };
 
+/**
+ * `in` also answers true for inherited Object.prototype members ('toString',
+ * 'constructor', '__proto__', …), which would let a saved setting name a
+ * "known" variant with no loader — `getCheckoutVariant` would then hand
+ * `dynamic()` a non-function and the flow would be lost. Own keys only.
+ */
 export const isKnownVariant = (value: unknown): value is CheckoutVariantId =>
-  typeof value === 'string' && value in variantLoaders;
+  typeof value === 'string' &&
+  Object.prototype.hasOwnProperty.call(variantLoaders, value);

package/app-template/src/views/checkout/variants/use-resolved-config.ts

@@ -1,7 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore
+} from 'react';
 import settings from '@theme/settings';
+import {
+  getCheckoutFlowVariantOverride,
+  isThemeEditorDesigner,
+  noFlowVariantOnServer,
+  subscribeCheckoutPieces,
+  type CheckoutFlowVariantPreference
+} from '@akinon/pz-theme/src/chrome/checkout-pieces';
 import { isKnownVariant } from './registry';
 import type { CheckoutVariantId, CheckoutVariantOptions } from './types';
 
@@ -17,6 +30,21 @@ interface RawCheckoutConfig {
 
 const FALLBACK_VARIANT: CheckoutVariantId = 'multi-step';
 
+/**
+ * The only two layouts a composition may steer to, mapped to variant ids. A
+ * closed record on purpose: an unknown preference resolves to `undefined` here
+ * and the storefront's configured variant survives — and the unified
+ * basket-and-checkout family stays unreachable from a composition, so the
+ * basket-to-checkout redirect pair can never be broken by a page edit.
+ */
+const COMPOSITION_VARIANT_MAP: Record<
+  CheckoutFlowVariantPreference,
+  CheckoutVariantId
+> = {
+  'one-page': 'one-page',
+  'step-by-step': 'multi-step'
+};
+
 const coerceOptions = (
   raw: Record<string, unknown> | undefined
 ): CheckoutVariantOptions => {
@@ -56,17 +84,30 @@ const mergeOverride = (
 };
 
 /**
- * Resolves checkout config from two layers (each optional):
+ * Resolves checkout config from three layers (each optional):
  *
  *   1. settings.js (sync, always available — baseline / fallback)
  *   2. /api/theme-settings (backend theme-config widget — persistent override)
+ *   3. the composition's checkout flow outlet (`flowVariant`) — highest
  *
  * Layer 2 falls back silently if backend is unreachable or no config is saved.
  * The editor is OPTIONAL — when no theme-config is saved, the storefront keeps
  * using its built-in settings.js.
+ *
+ * Layer 3 only ever names a LAYOUT, never options, and only through the
+ * closed `COMPOSITION_VARIANT_MAP`. It is read ONCE, in a layout effect, so a
+ * composed checkout resolves its variant before first paint (the outlet's own
+ * registration layout effect runs in an earlier sibling subtree of the same
+ * hydration commit) and never flips mid-session — a late registration, or the
+ * theme-settings response landing afterwards, can no longer swap the flow out
+ * from under a shopper. On the designer canvas the live value is followed
+ * instead, so a `Checkout Type` edit previews immediately.
+ *
+ * With no outlet registered, nothing overrides: the resolution is exactly the
+ * two-layer result the storefront had before the bridge existed.
  */
 export const useResolvedCheckoutConfig = (): ResolvedCheckoutConfig => {
-  const [config, setConfig] = useState<ResolvedCheckoutConfig>(readBaseFromSettings);
+  const [merged, setMerged] = useState<ResolvedCheckoutConfig>(readBaseFromSettings);
 
   useEffect(() => {
     let cancelled = false;
@@ -75,7 +116,7 @@ export const useResolvedCheckoutConfig = (): ResolvedCheckoutConfig => {
       .then((data: { checkout?: RawCheckoutConfig } | null) => {
         if (cancelled) return;
         if (!data?.checkout) return;
-        setConfig(() => mergeOverride(readBaseFromSettings(), data.checkout));
+        setMerged(() => mergeOverride(readBaseFromSettings(), data.checkout));
       })
       .catch(() => {
         // Silent: backend not reachable or widget missing — keep settings.js baseline
@@ -85,5 +126,36 @@ export const useResolvedCheckoutConfig = (): ResolvedCheckoutConfig => {
     };
   }, []);
 
-  return config;
+  const liveOverride = useSyncExternalStore(
+    subscribeCheckoutPieces,
+    getCheckoutFlowVariantOverride,
+    noFlowVariantOnServer
+  );
+
+  const [latchedOverride, setLatchedOverride] =
+    useState<CheckoutFlowVariantPreference | null>(null);
+
+  useLayoutEffect(() => {
+    setLatchedOverride(getCheckoutFlowVariantOverride());
+  }, []);
+
+  // The designer flag rides a postMessage and can arrive after mount; every
+  // claim change notifies the pieces store, which re-runs this render, so the
+  // canvas picks it up before an outlet edit could matter.
+  const composition = isThemeEditorDesigner() ? liveOverride : latchedOverride;
+  // Own-key lookup: an inherited member ('constructor', 'toString', …) would
+  // otherwise resolve to a truthy non-variant and lose the flow entirely.
+  const compositionVariant =
+    composition &&
+    Object.prototype.hasOwnProperty.call(COMPOSITION_VARIANT_MAP, composition)
+      ? COMPOSITION_VARIANT_MAP[composition]
+      : undefined;
+
+  return useMemo(
+    () =>
+      compositionVariant
+        ? { ...merged, variantId: compositionVariant }
+        : merged,
+    [merged, compositionVariant]
+  );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.43",
+  "version": "2.0.44",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {