@akinon/projectzero 2.0.43 → 2.0.44

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -5,6 +5,7 @@ import { RootState } from '@theme/redux/store';
 import { useSetAddressesMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutAddressType } from '@akinon/next/types';
 import { Checkbox, Icon, Modal } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import AddressBox from './address-box';
 import { useAddAddressMutation } from '@akinon/next/data/client/address';
 import { AddressForm } from '@theme/views/account/address-form';
@@ -102,7 +103,7 @@ const Addresses = () => {
         .map((addressType) => (
           <div key={addressType.label}>
             <div className="flex items-center justify-between border-b border-gray-400 px-8 py-4">
-              <h2 className="text-2xl">
+              <h2 className="text-2xl" {...partAttrs('section-title')}>
                 {addressType.text} {t('checkout.address.address')}
               </h2>
 

package/app-template/src/views/checkout/steps/shipping/index.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { useAppSelector } from '@akinon/next/redux/hooks';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { RootState } from '@theme/redux/store';
 import Addresses from './addresses';
 import ShippingOptions from './shipping-options';
@@ -17,6 +18,7 @@ const ShippingStep = () => {
           'pointer-events-none opacity-30': isShippingStepBusy
         }
       )}
+      {...partAttrs('section')}
     >
       <Addresses />
       <ShippingOptions />

package/app-template/src/views/checkout/steps/shipping/shipping-options.tsx

@@ -11,6 +11,7 @@ import {
   useSetDataSourceShippingOptionsMutation
 } from '@akinon/next/data/client/checkout';
 import { Price, Button, Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
 
@@ -267,6 +268,7 @@ const ShippingOptions: React.FC = () => {
             disabled={!steps.shipping.completed}
             onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
             data-testid="checkout-shipping-save"
+            {...partAttrs('continue-button')}
           >
             {t('checkout.address.shipping.button')}
           </Button>

package/app-template/src/views/checkout/summary.tsx

@@ -2,6 +2,7 @@ import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { RootState } from '@theme/redux/store';
 import { Price, Link } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
@@ -40,9 +41,18 @@ export const Summary = () => {
         }}
       />
       <StoreCredits />
-      <div className="flex flex-col w-full border border-solid border-gray-400">
-        <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
-          <span className="text-black-800 text-xl font-light sm:text-2xl">
+      <div
+        className="flex flex-col w-full border border-solid border-gray-400"
+        {...partAttrs('summary')}
+      >
+        <div
+          className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15"
+          {...partAttrs('summary-header')}
+        >
+          <span
+            className="text-black-800 text-xl font-light sm:text-2xl"
+            {...partAttrs('summary-title')}
+          >
             {t('checkout.summary.title')}
           </span>
           <span className="text-gray-950 text-xs">
@@ -55,6 +65,7 @@ export const Summary = () => {
             <div
               key={`summary-basketitem-${index}`}
               className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
+              {...partAttrs('summary-item')}
             >
               <Link
                 href={'#'}
@@ -104,42 +115,68 @@ export const Summary = () => {
           ))}
         </div>
         <div className="pt-3">
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>
+          <div
+            className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+            {...partAttrs('summary-row')}
+          >
+            <span {...partAttrs('summary-row-label')}>
               {t('checkout.summary.subtotal')} (
               {preOrder.basket.basketitem_set.length}{' '}
               {t('checkout.summary.items')})
             </span>
-            <span>
+            <span {...partAttrs('summary-row-value')}>
               <Price value={preOrder?.basket?.total_amount} />
             </span>
           </div>
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>{t('checkout.summary.shipping')}</span>
-            <span>
+          <div
+            className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+            {...partAttrs('summary-row')}
+          >
+            <span {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.shipping')}
+            </span>
+            <span {...partAttrs('summary-row-value')}>
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
           {parseFloat(preOrder?.loyalty_money) > 0 && (
-            <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-              <span>{t('checkout.summary.loyalty_money_total')}</span>
-              <span>
+            <div
+              className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+              {...partAttrs('summary-row')}
+            >
+              <span {...partAttrs('summary-row-label')}>
+                {t('checkout.summary.loyalty_money_total')}
+              </span>
+              <span {...partAttrs('summary-row-value')}>
                 <Price value={preOrder?.loyalty_money} />
               </span>
             </div>
           )}
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>{t('checkout.summary.discounts_total')}</span>
-            <span>
+          <div
+            className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5"
+            {...partAttrs('summary-row')}
+          >
+            <span {...partAttrs('summary-row-label')}>
+              {t('checkout.summary.discounts_total')}
+            </span>
+            <span {...partAttrs('summary-row-value')}>
               <Price
                 value={preOrder?.basket?.total_discount_amount}
                 useNegative
               />
             </span>
           </div>
-          <div className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3">
-            <span className="font-light">{t('checkout.summary.total')}</span>
-            <span className="min-w-max pl-4">
+          <div
+            className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3"
+            {...partAttrs('summary-total')}
+          >
+            <span className="font-light" {...partAttrs('summary-total-label')}>
+              {t('checkout.summary.total')}
+            </span>
+            <span
+              className="min-w-max pl-4"
+              {...partAttrs('summary-total-value')}
+            >
               <Price value={preOrder?.unpaid_amount} />
             </span>
           </div>
@@ -154,6 +191,7 @@ export const Summary = () => {
             <div
               className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
               onClick={() => dispatch(setCurrentStep(CheckoutStep.Shipping))}
+              {...partAttrs('summary-edit')}
             >
               {t('checkout.summary.change')}
             </div>

package/app-template/src/views/checkout/variants/__tests__/registry.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { getCheckoutVariant, isKnownVariant } from '../registry';
+
+jest.mock('../multi-step', () => ({
+  __esModule: true,
+  default: () => <div data-testid="variant-multi-step" />
+}));
+
+jest.mock('../one-page', () => ({
+  __esModule: true,
+  default: () => <div data-testid="variant-one-page" />
+}));
+
+jest.mock('../basket-and-checkout', () => ({
+  __esModule: true,
+  default: () => <div data-testid="variant-basket-and-checkout" />
+}));
+
+/**
+ * The variant registry is the last hop before the checkout flow renders, and
+ * the value it receives is untrusted: it comes from settings.js, from the
+ * backend theme-settings widget, or (now) from a composition. A lookup that
+ * accepts inherited Object members would answer "known" for 'constructor' and
+ * then hand `dynamic()` something that is not a loader — the flow would never
+ * render and ordering would be impossible (I2). Every corpus entry must still
+ * end at a real variant component.
+ */
+const UNTRUSTED_CORPUS: unknown[] = [
+  'toString',
+  'constructor',
+  'valueOf',
+  'hasOwnProperty',
+  '__proto__',
+  '',
+  undefined,
+  42,
+  'multi-step',
+  'one-page'
+];
+
+describe('isKnownVariant', () => {
+  it('accepts only own keys of the loader map', () => {
+    expect(isKnownVariant('multi-step')).toBe(true);
+    expect(isKnownVariant('one-page')).toBe(true);
+    expect(isKnownVariant('accordion')).toBe(true);
+    expect(isKnownVariant('basket-and-checkout')).toBe(true);
+  });
+
+  it.each(
+    UNTRUSTED_CORPUS.filter(
+      (value) => value !== 'multi-step' && value !== 'one-page'
+    )
+  )('rejects %p', (value) => {
+    expect(isKnownVariant(value)).toBe(false);
+  });
+});
+
+describe('getCheckoutVariant', () => {
+  it.each(UNTRUSTED_CORPUS)('renders a real variant for %p', async (value) => {
+    const Variant = getCheckoutVariant(value as never);
+
+    render(<Variant />);
+
+    const expected =
+      value === 'one-page' ? 'variant-one-page' : 'variant-multi-step';
+
+    expect(await screen.findByTestId(expected)).toBeInTheDocument();
+  });
+
+  it('maps every known variant id to its component', async () => {
+    const Accordion = getCheckoutVariant('accordion');
+    render(<Accordion />);
+    // 'accordion' is an alias of the one-page layout.
+    expect(await screen.findByTestId('variant-one-page')).toBeInTheDocument();
+
+    const Unified = getCheckoutVariant('basket-and-checkout');
+    render(<Unified />);
+    expect(
+      await screen.findByTestId('variant-basket-and-checkout')
+    ).toBeInTheDocument();
+  });
+});

package/app-template/src/views/checkout/variants/__tests__/use-resolved-config.test.tsx

@@ -0,0 +1,208 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import {
+  registerCheckoutOutlet,
+  resetCheckoutPiecesForTests
+} from '@akinon/pz-theme/src/chrome/checkout-pieces';
+import settingsModule from '../../../../settings';
+import { useResolvedCheckoutConfig } from '../use-resolved-config';
+
+// Same module the hook imports as `@theme/settings` — jest keys mocks by
+// resolved path, and the `@theme/*` alias is not resolvable from a test file.
+// Mocking it keeps the suite off the real storefront settings (and its
+// runtime-only requires) while letting each case state its own baseline.
+jest.mock('../../../../settings', () => ({
+  __esModule: true,
+  default: {}
+}));
+
+const mockSettings = settingsModule as { checkout?: Record<string, unknown> };
+
+const themeSettingsResponse = (body: unknown) => {
+  (global.fetch as jest.Mock).mockResolvedValue({
+    ok: true,
+    json: async () => body
+  });
+};
+
+const registerFlowOutlet = (flowVariant?: unknown, id = 'outlet-1') => {
+  registerCheckoutOutlet('flow', {
+    id,
+    node: document.createElement('div'),
+    flowVariant: flowVariant as never
+  });
+};
+
+/**
+ * Three layers resolve the checkout layout — settings.js, the backend
+ * theme-settings widget, and the composition's flow outlet — and the order
+ * matters in both directions: a composition must be able to say "this page is
+ * the one-page checkout", and nothing may be able to say "no checkout at all".
+ * These tests pin the precedence, the closed mapping (an unrecognised
+ * preference always falls through to the inherited variant), and the live
+ * latch that keeps a shopper's flow from swapping mid-session.
+ */
+describe('useResolvedCheckoutConfig', () => {
+  beforeEach(() => {
+    resetCheckoutPiecesForTests();
+    delete mockSettings.checkout;
+    delete window.__themeEditorDesigner;
+    global.fetch = jest
+      .fn()
+      .mockResolvedValue({ ok: true, json: async () => ({}) });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('falls back to the step-by-step flow when nothing is configured', async () => {
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    expect(result.current.variantId).toBe('multi-step');
+    expect(result.current.options).toEqual({});
+    await act(async () => undefined);
+  });
+
+  it('uses the settings.js baseline when the backend has no override', async () => {
+    mockSettings.checkout = {
+      variant: 'one-page',
+      options: { showTrustBadges: false }
+    };
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    expect(result.current.variantId).toBe('one-page');
+    expect(result.current.options).toEqual({ showTrustBadges: false });
+    await act(async () => undefined);
+  });
+
+  it('lets the theme-settings response override settings.js', async () => {
+    mockSettings.checkout = { variant: 'multi-step' };
+    themeSettingsResponse({ checkout: { variant: 'one-page' } });
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    await waitFor(() => expect(result.current.variantId).toBe('one-page'));
+  });
+
+  it('coerces options from both layers, dropping unknown and mistyped keys', async () => {
+    mockSettings.checkout = {
+      options: { autoAdvance: false, compactMode: true }
+    };
+    themeSettingsResponse({
+      checkout: {
+        options: { compactMode: 'yes', gtmEnabled: false, madeUpKey: 'x' }
+      }
+    });
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    await waitFor(() =>
+      expect(result.current.options).toEqual({
+        autoAdvance: false,
+        compactMode: true,
+        gtmEnabled: false
+      })
+    );
+  });
+
+  it('lets a composed flow outlet beat settings.js and the backend', async () => {
+    mockSettings.checkout = { variant: 'multi-step' };
+    themeSettingsResponse({ checkout: { variant: 'multi-step' } });
+    registerFlowOutlet('one-page');
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    expect(result.current.variantId).toBe('one-page');
+    // The later theme-settings arrival must not displace the latched layout.
+    await act(async () => undefined);
+    expect(result.current.variantId).toBe('one-page');
+  });
+
+  it('maps step-by-step to the multi-step variant', async () => {
+    mockSettings.checkout = { variant: 'one-page' };
+    registerFlowOutlet('step-by-step');
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    expect(result.current.variantId).toBe('multi-step');
+    await act(async () => undefined);
+  });
+
+  it.each([
+    'accordion',
+    'basket-and-checkout',
+    'constructor',
+    'toString',
+    '',
+    42,
+    null
+  ])(
+    'falls through to the inherited variant for the preference %p',
+    async (preference) => {
+      mockSettings.checkout = { variant: 'one-page' };
+      registerFlowOutlet(preference);
+
+      const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+      expect(result.current.variantId).toBe('one-page');
+      await act(async () => undefined);
+    }
+  );
+
+  it('never lets a composition add options of its own', async () => {
+    mockSettings.checkout = { options: { stickyMobileCta: false } };
+    registerFlowOutlet('one-page');
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    expect(result.current.options).toEqual({ stickyMobileCta: false });
+    await act(async () => undefined);
+  });
+
+  it('ignores an outlet that registers after the first commit', async () => {
+    mockSettings.checkout = { variant: 'multi-step' };
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    expect(result.current.variantId).toBe('multi-step');
+
+    act(() => registerFlowOutlet('one-page'));
+
+    expect(result.current.variantId).toBe('multi-step');
+    await act(async () => undefined);
+  });
+
+  it('follows the live claim on the designer canvas', async () => {
+    window.__themeEditorDesigner = true;
+    mockSettings.checkout = { variant: 'multi-step' };
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    expect(result.current.variantId).toBe('multi-step');
+
+    act(() => registerFlowOutlet('one-page'));
+
+    expect(result.current.variantId).toBe('one-page');
+    await act(async () => undefined);
+  });
+
+  it('resolves exactly like the two-layer storefront when nothing registers', async () => {
+    mockSettings.checkout = {
+      variant: 'multi-step',
+      options: { showOrderReview: false }
+    };
+    themeSettingsResponse({
+      checkout: { variant: 'one-page', options: { enableEditMode: false } }
+    });
+
+    const { result } = renderHook(() => useResolvedCheckoutConfig());
+
+    await waitFor(() =>
+      expect(result.current).toEqual({
+        variantId: 'one-page',
+        options: { showOrderReview: false, enableEditMode: false }
+      })
+    );
+  });
+});

package/app-template/src/views/checkout/variants/basket-and-checkout/index.tsx

@@ -3,6 +3,7 @@
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { CheckoutPiece } from '@akinon/pz-theme/src/chrome/checkout-piece';
 import ContactSection from '../one-page/sections/contact-section';
 import AddressSection from '../one-page/sections/address-section';
 import ShippingSection from '../one-page/sections/shipping-section';
@@ -104,10 +105,12 @@ const BasketAndCheckout = ({ options }: CheckoutVariantProps) => {
               data-testid="basket-and-checkout-summary"
             >
               <div className="sticky top-6">
-                <OnePageSummary
-                  onEditSection={openSection}
-                  showReview={showOrderReview}
-                />
+                <CheckoutPiece piece="summary">
+                  <OnePageSummary
+                    onEditSection={openSection}
+                    showReview={showOrderReview}
+                  />
+                </CheckoutPiece>
               </div>
             </aside>
           </div>

package/app-template/src/views/checkout/variants/multi-step/index.tsx

@@ -6,6 +6,7 @@ import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { CheckoutStep } from '@akinon/next/types';
 import { RootState } from '@theme/redux/store';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { CheckoutPiece } from '@akinon/pz-theme/src/chrome/checkout-piece';
 import { CheckoutStepList } from '@theme/views/checkout/step-list';
 import { Summary } from '@theme/views/checkout/summary';
 import ShippingStep from '@theme/views/checkout/steps/shipping';
@@ -53,7 +54,9 @@ const MultiStepCheckout = (_props: CheckoutVariantProps) => {
       <PluginModule component={Component.MasterpassLinkModal} />
 
       <div className="container flex flex-col flex-wrap w-full px-4 md:px-0">
-        <CheckoutStepList />
+        <CheckoutPiece piece="steps">
+          <CheckoutStepList />
+        </CheckoutPiece>
 
         <div className="w-full flex flex-wrap">
           <div className="w-full h-fit-content lg:w-2/3">
@@ -62,7 +65,9 @@ const MultiStepCheckout = (_props: CheckoutVariantProps) => {
           </div>
 
           <div className="w-full h-fit-content mt-6 lg:w-1/3 lg:pl-8 lg:mt-0">
-            <Summary />
+            <CheckoutPiece piece="summary">
+              <Summary />
+            </CheckoutPiece>
           </div>
         </div>
       </div>

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

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useRef, useId } from 'react';
 import clsx from 'clsx';
 import { useLocalization } from '@akinon/next/hooks';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { Icon } from '@theme/components';
 
 export type SectionStatus = 'locked' | 'active' | 'completed';
@@ -61,6 +62,11 @@ export const AccordionSection = ({
       data-testid={dataTestId}
       data-status={status}
       aria-labelledby={headerId}
+      {...partAttrs('section', {
+        open: isOpen,
+        completed: isCompleted,
+        disabled: isLocked
+      })}
     >
       <header
         id={headerId}
@@ -68,6 +74,11 @@ export const AccordionSection = ({
           'flex items-center justify-between gap-3 px-6 py-5 sm:px-7',
           isOpen && 'border-b border-gray-100'
         )}
+        {...partAttrs('section-header', {
+          open: isOpen,
+          completed: isCompleted,
+          disabled: isLocked
+        })}
       >
         <div className="flex items-center gap-3.5">
           <span
@@ -78,6 +89,11 @@ export const AccordionSection = ({
               isLocked && 'bg-gray-100 text-gray-400'
             )}
             aria-hidden="true"
+            {...partAttrs('section-number', {
+              open: isOpen,
+              completed: isCompleted,
+              disabled: isLocked
+            })}
           >
             {isCompleted ? (
               <Icon name="check" size={14} className="fill-white" />
@@ -90,6 +106,11 @@ export const AccordionSection = ({
               'text-lg font-semibold leading-tight tracking-tight',
               isOpen || isCompleted ? 'text-black-800' : 'text-gray-500'
             )}
+            {...partAttrs('section-title', {
+              open: isOpen,
+              completed: isCompleted,
+              disabled: isLocked
+            })}
           >
             {title}
           </h2>
@@ -107,6 +128,7 @@ export const AccordionSection = ({
             )}
             data-testid={`${dataTestId}-edit`}
             aria-label={`${t('checkout.one_page.edit')} ${title}`}
+            {...partAttrs('edit-button')}
           >
             <span>{t('checkout.one_page.edit')}</span>
           </button>

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

@@ -3,6 +3,7 @@
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { CheckoutPiece } from '@akinon/pz-theme/src/chrome/checkout-piece';
 import ContactSection from './sections/contact-section';
 import AddressSection from './sections/address-section';
 import ShippingSection from './sections/shipping-section';
@@ -97,10 +98,12 @@ const OnePageCheckout = ({ options }: CheckoutVariantProps) => {
               data-testid="one-page-summary"
             >
               <div className="sticky top-6">
-                <OnePageSummary
-                  onEditSection={openSection}
-                  showReview={showOrderReview}
-                />
+                <CheckoutPiece piece="summary">
+                  <OnePageSummary
+                    onEditSection={openSection}
+                    showReview={showOrderReview}
+                  />
+                </CheckoutPiece>
               </div>
             </aside>
           </div>