@akinon/projectzero 2.0.43-rc.0 → 2.0.44

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>

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>