@akinon/projectzero 2.0.43 → 2.0.44

package/CHANGELOG.md

@@ -1,7 +1,17 @@
 # @akinon/projectzero
 
+## 2.0.44
+
+### Patch Changes
+
+- 867e7873: ZERO-4731: Ship the composable checkout wiring in the CLI scaffold. 2.0.43 published the renderer half before the scaffold port merged, so a generated project still referenced the removed checkout summary placeholder and could not type-check.
+
 ## 2.0.43
 
+### Patch Changes
+
+- c44604f6a: ZERO-4731: Wire the composable checkout into the CLI scaffold's checkout route
+
 ## 2.0.42
 
 ## 2.0.41

package/app-template/CHANGELOG.md

@@ -1,10 +1,42 @@
 # projectzeronext
 
+## 2.0.44
+
+### Patch Changes
+
+- @akinon/next@2.0.44
+- @akinon/pz-akifast@2.0.44
+- @akinon/pz-apple-pay@2.0.44
+- @akinon/pz-b2b@2.0.44
+- @akinon/pz-basket-gift-pack@2.0.44
+- @akinon/pz-bkm@2.0.44
+- @akinon/pz-checkout-gift-pack@2.0.44
+- @akinon/pz-click-collect@2.0.44
+- @akinon/pz-credit-payment@2.0.44
+- @akinon/pz-cybersource-uc@2.0.44
+- @akinon/pz-flow-payment@2.0.44
+- @akinon/pz-google-pay@2.0.44
+- @akinon/pz-gpay@2.0.44
+- @akinon/pz-haso@2.0.44
+- @akinon/pz-hepsipay@2.0.44
+- @akinon/pz-masterpass@2.0.44
+- @akinon/pz-masterpass-rest@2.0.44
+- @akinon/pz-multi-basket@2.0.44
+- @akinon/pz-one-click-checkout@2.0.44
+- @akinon/pz-otp@2.0.44
+- @akinon/pz-pay-on-delivery@2.0.44
+- @akinon/pz-saved-card@2.0.44
+- @akinon/pz-similar-products@2.0.44
+- @akinon/pz-tabby-extension@2.0.44
+- @akinon/pz-tamara-extension@2.0.44
+- @akinon/pz-theme@2.0.44
+- @akinon/pz-virtual-try-on@2.0.44
+
 ## 2.0.43
 
 ### Patch Changes
 
-- Updated dependencies [0e384d73]
+- Updated dependencies [0e384d73c]
   - @akinon/pz-theme@2.0.43
   - @akinon/next@2.0.43
   - @akinon/pz-akifast@2.0.43

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.43",
+  "version": "2.0.44",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,33 +24,33 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.43",
-    "@akinon/pz-akifast": "2.0.43",
-    "@akinon/pz-apple-pay": "2.0.43",
-    "@akinon/pz-b2b": "2.0.43",
-    "@akinon/pz-basket-gift-pack": "2.0.43",
-    "@akinon/pz-bkm": "2.0.43",
-    "@akinon/pz-checkout-gift-pack": "2.0.43",
-    "@akinon/pz-click-collect": "2.0.43",
-    "@akinon/pz-credit-payment": "2.0.43",
-    "@akinon/pz-cybersource-uc": "2.0.43",
-    "@akinon/pz-flow-payment": "2.0.43",
-    "@akinon/pz-google-pay": "2.0.43",
-    "@akinon/pz-gpay": "2.0.43",
-    "@akinon/pz-haso": "2.0.43",
-    "@akinon/pz-hepsipay": "2.0.43",
-    "@akinon/pz-masterpass": "2.0.43",
-    "@akinon/pz-masterpass-rest": "2.0.43",
-    "@akinon/pz-multi-basket": "2.0.43",
-    "@akinon/pz-one-click-checkout": "2.0.43",
-    "@akinon/pz-otp": "2.0.43",
-    "@akinon/pz-pay-on-delivery": "2.0.43",
-    "@akinon/pz-saved-card": "2.0.43",
-    "@akinon/pz-similar-products": "2.0.43",
-    "@akinon/pz-tabby-extension": "2.0.43",
-    "@akinon/pz-tamara-extension": "2.0.43",
-    "@akinon/pz-theme": "2.0.43",
-    "@akinon/pz-virtual-try-on": "2.0.43",
+    "@akinon/next": "2.0.44",
+    "@akinon/pz-akifast": "2.0.44",
+    "@akinon/pz-apple-pay": "2.0.44",
+    "@akinon/pz-b2b": "2.0.44",
+    "@akinon/pz-basket-gift-pack": "2.0.44",
+    "@akinon/pz-bkm": "2.0.44",
+    "@akinon/pz-checkout-gift-pack": "2.0.44",
+    "@akinon/pz-click-collect": "2.0.44",
+    "@akinon/pz-credit-payment": "2.0.44",
+    "@akinon/pz-cybersource-uc": "2.0.44",
+    "@akinon/pz-flow-payment": "2.0.44",
+    "@akinon/pz-google-pay": "2.0.44",
+    "@akinon/pz-gpay": "2.0.44",
+    "@akinon/pz-haso": "2.0.44",
+    "@akinon/pz-hepsipay": "2.0.44",
+    "@akinon/pz-masterpass": "2.0.44",
+    "@akinon/pz-masterpass-rest": "2.0.44",
+    "@akinon/pz-multi-basket": "2.0.44",
+    "@akinon/pz-one-click-checkout": "2.0.44",
+    "@akinon/pz-otp": "2.0.44",
+    "@akinon/pz-pay-on-delivery": "2.0.44",
+    "@akinon/pz-saved-card": "2.0.44",
+    "@akinon/pz-similar-products": "2.0.44",
+    "@akinon/pz-tabby-extension": "2.0.44",
+    "@akinon/pz-tamara-extension": "2.0.44",
+    "@akinon/pz-theme": "2.0.44",
+    "@akinon/pz-virtual-try-on": "2.0.44",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.2.6",
     "@react-google-maps/api": "2.17.1",
@@ -74,7 +74,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.43",
+    "@akinon/eslint-plugin-projectzero": "2.0.44",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/src/app/[pz]/orders/checkout/layout.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
 import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
-import { CodeOwnedRegion } from '@akinon/pz-theme/src/chrome/code-owned-region';
+import ComposableRegion from '@akinon/pz-theme/src/chrome/composable-region';
 import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
 import { LiveCheckoutPageContext } from '@akinon/pz-theme/src/chrome/live-checkout-page-context';
+import { CheckoutPiecesProvider } from '@akinon/pz-theme/src/chrome/checkout-pieces-provider';
 
 /**
- * Checkout is code-owned: only the zones around the flow — above it, the
- * summary extras band under it and the band below — are composable, so no
- * slot takes `fallback={children}` — a published composition must never be
- * able to replace the payment steps.
+ * Checkout internals are sealed, checkout placement is composable. The body
+ * slot's composition positions the real flow, steps and summary through
+ * checkout outlet blocks; the flow itself always renders — in an outlet when
+ * one claims it, in its default place below otherwise. No slot takes the
+ * flow as its fallback: a composition may move the payment steps, never
+ * replace them. Ordering is load-bearing: the body slot mounts BEFORE
+ * `children`, so outlet targets register before the flow's first paint.
+ *
+ * The body's takeover is offered on the flow itself, by the region wrapping
+ * it: the designer hovers the real checkout content and gets the same
+ * affordance every other page has, instead of a dashed band above content
+ * that answers a hover with nothing. Starting a composition that way is why
+ * the body slot's own band is suppressed — one slug, one CTA.
  */
 export default function CheckoutLayout({
   children
@@ -17,12 +27,21 @@ export default function CheckoutLayout({
 }) {
   return (
     <LiveCheckoutPageContext>
-      <ChromeSlot slug={PLACEHOLDER_SLUGS.checkoutTop} />
-      {/* The explainer answers the designer who hovers the flow looking for
-          an edit affordance: there is none here on purpose. */}
-      <CodeOwnedRegion label="checkout flow">{children}</CodeOwnedRegion>
-      <ChromeSlot slug={PLACEHOLDER_SLUGS.checkoutSummary} />
-      <ChromeSlot slug={PLACEHOLDER_SLUGS.checkoutBottom} />
+      <CheckoutPiecesProvider>
+        <ChromeSlot slug={PLACEHOLDER_SLUGS.checkoutTop} />
+        <ChromeSlot
+          slug={PLACEHOLDER_SLUGS.checkoutBody}
+          emptyZoneBand={false}
+        />
+        <ComposableRegion
+          slug={PLACEHOLDER_SLUGS.checkoutBody}
+          label="The checkout flow stays code-owned — take this area over to arrange where the flow, steps and summary render"
+          composedNote="The checkout flow renders here until a checkout flow outlet places it — it stays code-owned and inert on the canvas"
+        >
+          {children}
+        </ComposableRegion>
+        <ChromeSlot slug={PLACEHOLDER_SLUGS.checkoutBottom} />
+      </CheckoutPiecesProvider>
     </LiveCheckoutPageContext>
   );
 }

package/app-template/src/app/[pz]/orders/checkout/page.tsx

@@ -1,7 +1,9 @@
 'use client';
 
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, type ReactNode } from 'react';
 import dynamic from 'next/dynamic';
+import { CheckoutPiece } from '@akinon/pz-theme/src/chrome/checkout-piece';
+import { isThemeEditorDesigner } from '@akinon/pz-theme/src/chrome/checkout-pieces';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { resetCheckoutState } from '@akinon/next/redux/reducers/checkout';
 import {
@@ -66,21 +68,31 @@ const Checkout = () => {
     UNIFIED_VARIANTS.has(variantId) ||
     UNIFIED_VARIANTS.has(baselineVariant ?? '');
 
-  if (!isUnifiedCheckout && checkoutData?.redirect_url?.includes('basket')) {
+  // The designer canvas edits the checkout page itself — an empty test basket
+  // must never navigate the iframe to the basket page, or the composition
+  // being authored disappears mid-edit. Live keeps the redirect untouched.
+  if (
+    !isUnifiedCheckout &&
+    checkoutData?.redirect_url?.includes('basket') &&
+    !isThemeEditorDesigner()
+  ) {
     router.push(ROUTES.BASKET);
     return null;
   }
 
+  // One stable CheckoutPiece instance hosts every gate below: the latch runs
+  // once, and the loading-to-variant transition is a child swap under the same
+  // (possibly portaled) position — no remounts mid-session.
+  let body: ReactNode;
+
   if (checkoutData?.template_name === 'orders/index.html') {
-    return (
+    body = (
       <section className="container px-4 my-7 md:mt-20 lg:px-0 lg:mx-auto">
         <CheckoutAuth />
       </section>
     );
-  }
-
-  if (isError) {
-    return (
+  } else if (isError) {
+    body = (
       <div className="flex flex-col items-center justify-center h-80">
         <div>{t('checkout.error.title')}</div>
         <div className="mt-5">
@@ -90,19 +102,20 @@ const Checkout = () => {
         </div>
       </div>
     );
+  } else if (isResetStateLoading || isCheckoutLoading) {
+    body =
+      variantId === 'multi-step' ? (
+        <div className="flex flex-col items-center justify-center h-80">
+          <LoaderSpinner />
+        </div>
+      ) : (
+        <CheckoutOnePageSkeleton />
+      );
+  } else {
+    body = <CheckoutVariant options={variantOptions} />;
   }
 
-  if (isResetStateLoading || isCheckoutLoading) {
-    return variantId === 'multi-step' ? (
-      <div className="flex flex-col items-center justify-center h-80">
-        <LoaderSpinner />
-      </div>
-    ) : (
-      <CheckoutOnePageSkeleton />
-    );
-  }
-
-  return <CheckoutVariant options={variantOptions} />;
+  return <CheckoutPiece piece="flow">{body}</CheckoutPiece>;
 };
 
 export default Checkout;

package/app-template/src/components/checkbox.tsx

@@ -3,10 +3,29 @@ import { CheckboxProps } from '@theme/components/types';
 import { twMerge } from 'tailwind-merge';
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, checked = false, error, ...rest } = props;
+  // Part styling names the ROW, not the native box: when a caller stamps a
+  // checkbox (see `partAttrs`), the attributes ride the label wrapper so the
+  // whole line — box, text, links, spacing — is restylable, and the input
+  // keeps every other prop it has today. No caller that omits them is
+  // affected: both values are simply undefined and React drops them.
+  const {
+    children,
+    checked = false,
+    error,
+    'data-part': partName,
+    'data-state': partState,
+    ...rest
+  } = props as CheckboxProps & {
+    'data-part'?: string;
+    'data-state'?: string;
+  };
 
   return (
-    <label className={twMerge('flex flex-col text-xs', props.className)}>
+    <label
+      className={twMerge('flex flex-col text-xs', props.className)}
+      data-part={partName}
+      data-state={partState}
+    >
       <div className="flex items-center">
         <input
           data-testid="checkbox"

package/app-template/src/views/checkout/__tests__/part-style-reachability.test.ts

@@ -0,0 +1,121 @@
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Part styling only works by INHERITANCE, and inheritance loses to any
+ * declaration on the element itself.
+ *
+ * A checkout part rule lands on the element the part is stamped on:
+ *
+ *   [data-block-id="…"] [data-part="payment-option"] { color: #fff !important }
+ *
+ * If the text inside that element sits in a child that declares its own
+ * `text-…` colour, size or weight, the inherited value never reaches it —
+ * `!important` does not help, because the child is not competing for the same
+ * declaration, it simply has one of its own. Every typography control the
+ * panel offers for that part is then a silent no-op: the designer sets Text
+ * Color to white, nothing moves, and there is no error to explain it.
+ *
+ * That is exactly how a starter template painted a near-black selected
+ * payment card behind a near-black method name (contrast ≈ 1:1), and how
+ * "Font Weight" on the grand total row did nothing.
+ *
+ * The rule this file locks: on these elements the typography lives on the
+ * STAMPED element, and a child either carries none of its own or is a part in
+ * its own right. Where two children genuinely differ (a totals row's label and
+ * its amount), each gets its own part instead of the row pretending to control
+ * both.
+ */
+
+const checkoutDir = path.resolve(__dirname, '..');
+
+const read = (relative: string): string =>
+  fs.readFileSync(path.join(checkoutDir, relative), 'utf8');
+
+/** Utilities that would out-declare an inherited part rule. */
+const TYPOGRAPHY_UTILITY =
+  /\btext-(?:xs|sm|base|lg|xl|\d?xl|black-\d+|gray-\d+|primary-\d+|secondary)\b|\bfont-(?:light|normal|medium|semibold|bold)\b/;
+
+describe('one-page payment cards keep their typography on the stamped button', () => {
+  const source = read('variants/one-page/payment-options-grid.tsx');
+
+  it('declares the text styles on the button that carries the part', () => {
+    const button = source.slice(
+      source.indexOf('<button'),
+      source.indexOf('<Icon')
+    );
+
+    expect(button).toContain("partAttrs('payment-option'");
+    expect(button).toMatch(/text-sm font-medium leading-tight/);
+    expect(button).toMatch(/text-black-800/);
+    expect(button).toMatch(/text-gray-700/);
+  });
+
+  it('leaves the method name span with layout classes only', () => {
+    expect(source).toContain('<span className="flex-1">{option.name}</span>');
+  });
+
+  it('never re-colours the icon with fill utilities', () => {
+    // `Icon` renders an icon FONT, so `fill-*` coloured nothing at all; the
+    // glyph follows `color`, which now comes from the button.
+    expect(source).not.toMatch(/\bfill-(?:black|gray)-\d+\b/);
+  });
+});
+
+describe('multi-step payment options keep their typography on the stamped element', () => {
+  const source = read('steps/payment/payment-option-buttons.tsx');
+
+  it('puts the mobile row styles on the label that carries the part', () => {
+    const label = source.slice(
+      source.indexOf('<label'),
+      source.indexOf('</label>')
+    );
+
+    expect(label).toContain("partAttrs('payment-option'");
+    expect(label).toMatch(/text-primary-800 font-light text-lg/);
+  });
+
+  it('leaves the method name span with layout classes only', () => {
+    expect(source).toContain('<span className="flex">{option.name}</span>');
+  });
+});
+
+describe('summary rows expose their label and amount as parts', () => {
+  it.each([
+    ['variants/one-page/one-page-summary.tsx'],
+    ['summary.tsx']
+  ])('%s stamps both cells of every totals row and the grand total', file => {
+    const source = read(file);
+
+    for (const part of [
+      'summary-row-label',
+      'summary-row-value',
+      'summary-total-label',
+      'summary-total-value'
+    ]) {
+      expect(source).toContain(`partAttrs('${part}')`);
+    }
+  });
+
+  it('gives the one-page grand total row a baseline its label can inherit', () => {
+    const source = read('variants/one-page/one-page-summary.tsx');
+    const total = source.slice(
+      source.indexOf("partAttrs('summary-total')") - 400,
+      source.indexOf("partAttrs('summary-total-value')")
+    );
+
+    // The row owns the label's treatment; the label span declares nothing.
+    expect(total).toMatch(/text-sm font-medium uppercase/);
+    expect(total).toContain(
+      "<span {...partAttrs('summary-total-label')}>"
+    );
+  });
+
+  it('keeps a stamped cell free to declare its own look', () => {
+    // The amount is allowed to differ — it answers to summary-*-value.
+    const source = read('variants/one-page/one-page-summary.tsx');
+
+    expect(source).toMatch(TYPOGRAPHY_UTILITY);
+    expect(source).toContain("partAttrs('summary-total-value')");
+  });
+});

package/app-template/src/views/checkout/step-button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { Icon } from '@theme/components';
 import clsx from 'clsx';
 import { CheckoutStep } from '@akinon/next/types';
@@ -40,6 +41,7 @@ export const CheckoutStepButton = ({
         { 'mr-6': completed }
       )}
       onClick={handleClick}
+      {...partAttrs('step', { selected, completed, disabled })}
     >
       <span
         className={clsx(
@@ -50,10 +52,18 @@ export const CheckoutStepButton = ({
           { 'text-black': selected }
         )}
       >
-        <span className="order-1 flex-1 md:mr-1 md:order-none md:flex-none">
+        <span
+          className="order-1 flex-1 md:mr-1 md:order-none md:flex-none"
+          {...partAttrs('step-number', { selected, completed })}
+        >
           {number} {number && `.`}
         </span>
-        <span className="order-3 uppercase md:order-none">{label}</span>
+        <span
+          className="order-3 uppercase md:order-none"
+          {...partAttrs('step-label', { selected, completed })}
+        >
+          {label}
+        </span>
         <Icon
           name="check"
           size={12}
@@ -62,6 +72,7 @@ export const CheckoutStepButton = ({
             { 'opacity-0 scale-x-0': !completed },
             { 'opacity-100 scale-x-100': completed }
           )}
+          {...partAttrs('step-icon')}
         />
       </span>
     </button>

package/app-template/src/views/checkout/step-list.tsx

@@ -1,4 +1,5 @@
 import { useAppSelector } from '@akinon/next/redux/hooks';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { RootState } from '@theme/redux/store';
 import { Icon } from '@theme/components';
 import { CheckoutStepButton } from './step-button';
@@ -19,7 +20,10 @@ export const CheckoutStepList = () => {
   );
 
   return (
-    <div className="w-full flex items-center justify-center py-5 md:pl-1 md:justify-start md:py-8 lg:py-11">
+    <div
+      className="w-full flex items-center justify-center py-5 md:pl-1 md:justify-start md:py-8 lg:py-11"
+      {...partAttrs('steps')}
+    >
       <CheckoutStepButton
         number="1"
         label={t('checkout.step.shipping')}

package/app-template/src/views/checkout/steps/payment/agreements.tsx

@@ -1,6 +1,7 @@
 import useContract from '../../../../hooks/use-contract';
 import { Controller } from 'react-hook-form';
 import { Checkbox } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { useLocalization } from '@akinon/next/hooks';
 import { Trans } from '@akinon/next/components/trans';
 
@@ -22,7 +23,14 @@ const CheckoutAgreements = ({ control, fieldId, error }) => {
         control={control}
         defaultValue={false}
         render={({ field }) => (
-          <Checkbox {...field} error={error} data-testid="checkout-agreement">
+          // The stamp addresses the agreement ROW (Checkbox routes it to its
+          // label wrapper): LOOK only — the consent itself is untouchable.
+          <Checkbox
+            {...field}
+            error={error}
+            data-testid="checkout-agreement"
+            {...partAttrs('agreement')}
+          >
             <Trans
               i18nKey="checkout.agreement.content"
               components={{

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

@@ -1,6 +1,7 @@
 import SelectedPaymentOptionView from '@akinon/next/components/selected-payment-option-view';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { CheckoutPaymentOption } from '@akinon/next/types';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import clsx from 'clsx';
 import { RootState } from '@theme/redux/store';
 import PaymentOptionButtons from './payment-option-buttons';
@@ -17,11 +18,18 @@ const PaymentStep = () => {
       className={clsx('flex flex-wrap w-full', {
         'pointer-events-none opacity-30': isPaymentStepBusy
       })}
+      {...partAttrs('section')}
     >
-      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto">
+      <div
+        className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto"
+        {...partAttrs('payment-options')}
+      >
         <PaymentOptionButtons />
       </div>
-      <div className="w-full border border-solid border-gray-400 bg-white">
+      <div
+        className="w-full border border-solid border-gray-400 bg-white"
+        {...partAttrs('payment-panel')}
+      >
         <SelectedPaymentOptionView />
       </div>
     </div>

package/app-template/src/views/checkout/steps/payment/options/credit-card/index.tsx

@@ -18,6 +18,7 @@ import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
 import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { PaymentOption } from '@akinon/next/types';
 
 const creditCardFormSchema = (
@@ -409,6 +410,7 @@ const CheckoutCreditCard = () => {
               type="submit"
               disabled={isButtonDisabled}
               data-testid="checkout-credit-card-place-order"
+              {...partAttrs('place-order-button')}
             >
               <span>{t('checkout.payment.credit_card.form.button')}</span>
               <Icon

package/app-template/src/views/checkout/steps/payment/options/funds-transfer.tsx

@@ -8,6 +8,7 @@ import {
   useSetFundsTransferOptionMutation
 } from '@akinon/next/data/client/checkout';
 import { Button, Icon, Price, Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import * as yup from 'yup';
 import CheckoutAgreements from '../agreements';
 import PaymentHeader from '../payment-header';
@@ -176,6 +177,7 @@ const CheckoutFundsTransfer = () => {
             type="submit"
             disabled={isButtonDisabled}
             data-testid="checkout-bank-account-place-order"
+            {...partAttrs('place-order-button')}
           >
             <span> {t('checkout.payment.fund_transfer.button')}</span>
             <Icon

package/app-template/src/views/checkout/steps/payment/payment-header.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 
 export type PaymentHeaderProps = {
   title: string;
@@ -7,7 +8,10 @@ export type PaymentHeaderProps = {
 const PaymentHeader = ({ title }: PaymentHeaderProps) => {
   return (
     <div className="flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15">
-      <span className="text-black-800 text-lg font-medium sm:text-2xl">
+      <span
+        className="text-black-800 text-lg font-medium sm:text-2xl"
+        {...partAttrs('section-title')}
+      >
         {title}
       </span>
     </div>

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -4,6 +4,7 @@ import { RootState } from '@theme/redux/store';
 import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutPaymentOption } from '@akinon/next/types';
 import { Radio } from '@theme/components';
+import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
 import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
 import { useMemo } from 'react';
 
@@ -42,10 +43,20 @@ const PaymentOptionButtons = () => {
     <>
       <div className="w-full space-y-4 px-4 flex flex-col mb-8 md:hidden">
         {displayedPaymentOptions.map((option) => (
+          // The mobile radio row's typography sits on the <label> — the
+          // element the payment-option part is stamped on — so an inherited
+          // part rule actually reaches the method name. Declared on the inner
+          // span (as it was) every typography control in the panel was dead
+          // here while working on the desktop tab below, which made a
+          // template's white-on-dark selected state readable on desktop and
+          // black-on-black on every phone.
           <label
             key={`payment-option-${option.pk}`}
-            className="border px-4 py-3 mt-3 flex h-12"
+            className="border px-4 py-3 mt-3 flex h-12 text-primary-800 font-light text-lg"
             onClick={scrollToTop}
+            {...partAttrs('payment-option', {
+              selected: preOrder?.payment_option?.pk === option.pk
+            })}
           >
             <Radio
               type="radio"
@@ -55,9 +66,7 @@ const PaymentOptionButtons = () => {
               onChange={() => onClickHandler(option)}
               className="mr-2 mt-1"
             />
-            <span className="flex text-primary-800 font-light text-lg">
-              {option.name}
-            </span>
+            <span className="flex">{option.name}</span>
           </label>
         ))}
       </div>
@@ -77,6 +86,9 @@ const PaymentOptionButtons = () => {
               }
             )}
             data-testid={`checkout-payment-tab-${option.pk}`}
+            {...partAttrs('payment-option', {
+              selected: preOrder?.payment_option?.pk === option.pk
+            })}
           >
             {option.name}
           </button>