@akinon/projectzero 1.126.20-v1-rc.17 → 1.126.20

package/app-template/src/app/[pz]/auth/(login)/layout.tsx

@@ -0,0 +1,37 @@
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+
+/**
+ * The login screen is handed to the theme editor here rather than in page.tsx,
+ * because the slot is an async server component and the page is a client one.
+ * With no composition published the slot renders the page untouched.
+ *
+ * The slot lives in a `(login)` route group so the composition covers exactly
+ * this screen: `auth/oauth-login` is a provider callback, and a login body
+ * mounted one level up would replace it too.
+ *
+ * No `pageContext`: an auth screen fetches no commerce data, and the blocks a
+ * designer rebuilds it from (`auth-form`, `register-form`, `oauth-buttons`)
+ * read the session client-side.
+ *
+ * Login and register stay on this ONE screen. Whether they read as tabs or as
+ * two forms side by side is composed here (the starter templates ship both
+ * shapes), so no second route is involved.
+ */
+export default function LoginLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    // `contents` on both wrappers keeps the slot chain layout-transparent, so
+    // an uncomposed login page keeps its own box model even where a brand's
+    // <main> is a flex or grid container.
+    <ChromeSlot
+      slug={PLACEHOLDER_SLUGS.auth}
+      fallback={children}
+      className="contents"
+      fallbackClassName="contents"
+    />
+  );
+}

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

@@ -0,0 +1,25 @@
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { LiveBasketPageContext } from '@akinon/pz-theme/src/chrome/live-basket-page-context';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+import { ROUTES } from '@theme/routes';
+
+/**
+ * The basket body is handed to the theme editor here rather than in page.tsx,
+ * because the slot is an async server component and the page is a client one.
+ * With no composition published the slot renders the page untouched.
+ *
+ * The provider sits above the slot so the composition binds the shopper's live
+ * basket: the basket is session-scoped and has no server data module, so a
+ * server-built context would be a snapshot that never moves.
+ */
+export default function BasketLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LiveBasketPageContext path={ROUTES.BASKET}>
+      <ChromeSlot slug={PLACEHOLDER_SLUGS.basket} fallback={children} />
+    </LiveBasketPageContext>
+  );
+}

package/app-template/src/app/[pz]/client-root.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import './configure-page-context';
+
 export default function ClientRoot({
   children
 }: {

package/app-template/src/app/[pz]/configure-page-context.ts

@@ -0,0 +1,17 @@
+import { configurePageContextRoutes } from '@akinon/pz-theme/src/chrome/page-context';
+import { ROUTES, ORDER_ROUTES, ACCOUNT_ROUTES } from '@theme/routes';
+
+/**
+ * The packaged page-context builders default to `/basket`; this storefront
+ * routes it at `/baskets/basket`. Without this the published context would
+ * carry a basket path no link block could follow.
+ *
+ * Imported from BOTH the server layout and the client root: the routes live in
+ * module state, and the client bundle gets its own copy of that module.
+ */
+configurePageContextRoutes({
+  home: ROUTES.HOME,
+  basket: ROUTES.BASKET,
+  checkout: ORDER_ROUTES.CHECKOUT,
+  account: ACCOUNT_ROUTES.ACCOUNT
+});

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

@@ -16,6 +16,12 @@ import { PREVIEW_PZ_SEGMENT } from '@akinon/next/utils/preview';
 import { isDraftRender } from '@akinon/next/utils/preview-render';
 import { parsePzParams } from '@akinon/next/utils/pz-segments';
 import settings from '@theme/settings';
+import RouteHandler from '@theme/components/route-handler';
+import { PreviewAuthStateReporter } from '@akinon/pz-theme/src/chrome/preview-auth-state';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import ThemeModals from '@akinon/pz-theme/src/overlays/theme-modals';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+import './configure-page-context';
 
 export const viewport: Viewport = {
   width: 'device-width',
@@ -75,18 +81,31 @@ async function RootLayout({
         )}
         <PzRoot translations={translations} locale={locale.value}>
           <ClientRoot>
-            <div className="overflow-x-hidden">
+            <div className="overflow-x-clip">
               <MobileAppToggler>
-                <Header />
+                <ChromeSlot
+                  slug={PLACEHOLDER_SLUGS.header}
+                  fallback={<Header />}
+                />
               </MobileAppToggler>
               <main>
                 {children}
+                <RouteHandler />
+                <PreviewAuthStateReporter />
                 <RootModal />
               </main>
               <MobileAppToggler>
-                <Footer />
+                <ChromeSlot
+                  slug={PLACEHOLDER_SLUGS.footer}
+                  fallback={<Footer />}
+                />
               </MobileAppToggler>
             </div>
+            {/* Outside the clipping wrapper above: a composed modal is a fixed
+                layer over the whole page, and it belongs to the layout rather
+                than to any one route because its trigger may be in the header
+                on a page it never appears on. */}
+            <ThemeModals />
           </ClientRoot>
         </PzRoot>
       </body>

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+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 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
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <LiveCheckoutPageContext>
+      <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,66 +1,55 @@
 'use client';
 
-import { CheckoutStepList, Summary } from '@theme/views/checkout';
-import PaymentStep from '@theme/views/checkout/steps/payment';
-import ShippingStep from '@theme/views/checkout/steps/shipping';
-import { useEffect, useMemo, useRef } from 'react';
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+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 {
-  resetCheckoutState,
-  setCurrentStep
-} from '@akinon/next/redux/reducers/checkout';
-import { RootState } from '@theme/redux/store';
-import { ROUTES } from '@theme/routes';
-import { useFetchCheckoutQuery, useResetCheckoutStateQuery } from '@akinon/next/data/client/checkout';
-import { Button, LoaderSpinner } from '@theme/components';
-import { pushAddPaymentInfo, pushAddShippingInfo } from '@theme/utils/gtm';
-import { CheckoutStep } from '@akinon/next/types';
+  useFetchCheckoutQuery,
+  useResetCheckoutStateQuery
+} from '@akinon/next/data/client/checkout';
 import { useRouter, useLocalization } from '@akinon/next/hooks';
-import dynamic from 'next/dynamic';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { Button, LoaderSpinner } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import settings from '@theme/settings';
+import {
+  getCheckoutVariant,
+  UNIFIED_VARIANTS
+} from '@theme/views/checkout/variants/registry';
+import { CheckoutOnePageSkeleton } from '@theme/views/checkout/variants/one-page/skeletons';
+import { useResolvedCheckoutConfig } from '@theme/views/checkout/variants/use-resolved-config';
 
 const Checkout = () => {
   const { t } = useLocalization();
-  const { steps, preOrder } = useAppSelector(
-    (state: RootState) => state.checkout
-  );
+  const router = useRouter();
+  const dispatch = useAppDispatch();
 
-  const { data: indexData, isLoading: isResetStateLoading } = useResetCheckoutStateQuery(null);
+  const { data: indexData, isLoading: isResetStateLoading } =
+    useResetCheckoutStateQuery(null);
 
   const {
     data: checkoutData,
-    isFetching,
+    isLoading: isCheckoutLoading,
     isError,
-    isSuccess,
     refetch: refetchCheckout
   } = useFetchCheckoutQuery(null, {
     refetchOnMountOrArgChange: true,
     skip: isResetStateLoading || !indexData
   });
-  const initialStepChanged = useRef<boolean>(false);
-  const router = useRouter();
-  const dispatch = useAppDispatch();
+
+  const { variantId, options: variantOptions } = useResolvedCheckoutConfig();
 
   const CheckoutAuth = useMemo(
-    () =>
-      dynamic(() => {
-        return import('@theme/views/checkout/auth');
-      }),
+    () => dynamic(() => import('@theme/views/checkout/auth')),
     []
   );
 
-  useEffect(() => {
-    if (steps.shipping.completed && !initialStepChanged.current) {
-      dispatch(setCurrentStep(CheckoutStep.Payment));
-      initialStepChanged.current = true;
-    }
-  }, [steps.shipping.completed]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (preOrder && !preOrder.shipping_option) {
-      initialStepChanged.current = true;
-    }
-  }, [preOrder]);
+  const CheckoutVariant = useMemo(
+    () => getCheckoutVariant(variantId),
+    [variantId]
+  );
 
   useEffect(() => {
     return () => {
@@ -68,76 +57,65 @@ const Checkout = () => {
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
-    if (isSuccess) {
-      const products = checkoutData?.pre_order?.basket?.basketitem_set.map(
-        (basketItem) => ({
-          ...basketItem.product
-        })
-      );
-      if (steps.current === 'shipping') {
-        pushAddShippingInfo(products);
-      }
-      if (steps.current === 'payment') {
-        pushAddPaymentInfo(products, String(preOrder?.payment_option?.name));
-      }
-    }
-  }, [isSuccess, steps, checkoutData, preOrder?.payment_option?.name]);
-
-  if (checkoutData?.redirect_url?.includes('basket')) {
+  // In unified mode the basket lives inside the checkout page and the basket
+  // page auto-redirects here while it has items — following the backend's
+  // basket redirect would bounce between the two pages forever. Check the
+  // settings.js baseline as well, since the basket page redirects based on it
+  // even when the async theme-settings override resolves to another variant.
+  const baselineVariant = (settings as { checkout?: { variant?: string } })
+    ?.checkout?.variant;
+  const isUnifiedCheckout =
+    UNIFIED_VARIANTS.has(variantId) ||
+    UNIFIED_VARIANTS.has(baselineVariant ?? '');
+
+  // 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 (isResetStateLoading || isFetching || isError) {
-    return (
+  } else if (isError) {
+    body = (
       <div className="flex flex-col items-center justify-center h-80">
-        {isResetStateLoading || isFetching ? (
-          <LoaderSpinner />
-        ) : (
-          <>
-            <div>{t('checkout.error.title')}</div>
-            <div className="mt-5">
-              <Button onClick={refetchCheckout}>
-                {t('checkout.error.button')}
-              </Button>
-            </div>
-          </>
-        )}
+        <div>{t('checkout.error.title')}</div>
+        <div className="mt-5">
+          <Button onClick={refetchCheckout}>
+            {t('checkout.error.button')}
+          </Button>
+        </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} />;
   }
 
-  return (
-    <PluginModule component={Component.MasterpassProvider}>
-      <PluginModule component={Component.MasterpassDeleteConfirmationModal} />
-      <PluginModule component={Component.MasterpassOtpModal} />
-      <PluginModule component={Component.MasterpassLinkModal} />
-
-      <div className="container flex flex-col flex-wrap w-full px-4 md:px-0">
-        <CheckoutStepList />
-
-        <div className="w-full flex flex-wrap">
-          <div className="w-full h-fit-content lg:w-2/3">
-            {steps.current === CheckoutStep.Shipping && <ShippingStep />}
-            {steps.current === CheckoutStep.Payment && <PaymentStep />}
-          </div>
-
-          <div className="w-full h-fit-content mt-6 lg:w-1/3 lg:pl-8 lg:mt-0">
-            <Summary />
-          </div>
-        </div>
-      </div>
-    </PluginModule>
-  );
+  return <CheckoutPiece piece="flow">{body}</CheckoutPiece>;
 };
 
 export default Checkout;

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

@@ -1,5 +1,27 @@
 import React from 'react';
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+import { LiveOrderSuccessPageContext } from '@akinon/pz-theme/src/chrome/live-order-page-context';
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>;
+/**
+ * The order-success body is composable and binds the shopper's own order.
+ * There is no server order fetcher, so the context comes from the client
+ * provider — which also keeps the order out of any cached shell.
+ */
+export default function Layout({
+  children,
+  params
+}: {
+  children: React.ReactNode;
+  params: { token: string };
+}) {
+  const { token } = params;
+
+  return (
+    <div>
+      <LiveOrderSuccessPageContext token={token}>
+        <ChromeSlot slug={PLACEHOLDER_SLUGS.orderSuccess} fallback={children} />
+      </LiveOrderSuccessPageContext>
+    </div>
+  );
 }

package/app-template/src/app/[pz]/users/password/reset/layout.tsx

@@ -0,0 +1,21 @@
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+
+/**
+ * The forgot-password body, handed over the same way as the login screen: the
+ * slot is an async server component and the page is a client one. This route
+ * holds a single page, so it needs no route group to keep the composition off
+ * a sibling screen.
+ *
+ * Brands that route it at `/auth/forgot-password` instead resolve to the same
+ * placeholder, so one composition serves both spellings.
+ */
+export default function ForgotPasswordLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ChromeSlot slug={PLACEHOLDER_SLUGS.forgotPassword} fallback={children} />
+  );
+}

package/app-template/src/app/[pz]/users/reset/[[...id]]/layout.tsx

@@ -0,0 +1,30 @@
+import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
+import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
+
+/**
+ * The screen the reset MAIL lands on, handed to the editor the same way its
+ * two neighbours already are: the slot is an async server component and the
+ * page is a client one, so the handover lives in the layout.
+ *
+ * A different page from the one that ASKS for the mail — that is
+ * `users/password/reset` — and the last auth screen a brand could not compose:
+ * `reset-password-body` was a slug the editor offered and nothing mounted, so a
+ * designer could build the screen, publish it, and the shopper coming out of
+ * their inbox still met the hand-written page.
+ *
+ * The token stays in the URL either way: this route's catch-all carries it, and
+ * `reset-password-block` reads it back out of the segments (a token containing
+ * slashes is joined, which a single segment would get wrong).
+ *
+ * With no composition published the slot renders the page untouched, so this
+ * changes nothing until a brand composes the screen.
+ */
+export default function ResetPasswordLayout({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ChromeSlot slug={PLACEHOLDER_SLUGS.resetPassword} fallback={children} />
+  );
+}

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"
@@ -19,7 +38,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         {children && <span className="ml-2">{children}</span>}
       </div>
       {error && (
-        <span className="mt-1 text-sm text-error">{error.message}</span>
+        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
       )}
     </label>
   );

package/app-template/src/components/route-handler.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useEffect } from 'react';
+import {
+  usePathname,
+  useSearchParams,
+  useSelectedLayoutSegment
+} from 'next/navigation';
+
+import { postToEditor } from '@akinon/pz-theme/src/editor-bridge';
+const RouteHandler = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const layoutSegment = useSelectedLayoutSegment();
+
+  useEffect(() => {
+    postToEditor({
+      type: 'ROUTE_CHANGE_COMPLETE',
+      url: `${pathname}?${searchParams}`,
+      layoutSegment: layoutSegment === null ? 'home' : layoutSegment
+    });
+  }, [pathname, searchParams]);
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const anchor = target.closest('a[href]');
+
+      if (anchor) {
+        const isMenuToggle =
+          anchor.getAttribute('data-is-menu-toggle') === 'true';
+        if (!isMenuToggle) {
+          postToEditor({
+            type: 'ROUTE_CHANGE_START',
+            url: anchor.getAttribute('href')
+          });
+        }
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  return null;
+};
+
+export default RouteHandler;

package/app-template/src/routes/index.ts

@@ -1,17 +1,17 @@
-enum GENERAL_ROUTES {
+export enum GENERAL_ROUTES {
   HOME = '/',
   BASKET = '/baskets/basket',
   LIST = '/list'
 }
 
-enum AUTH_ROUTES {
+export enum AUTH_ROUTES {
   AUTH = '/users/auth',
   FORGOT_PASSWORD = '/users/password/reset',
   EMAIL_SET_PRIMARY = '/users/email-set-primary/.+',
   CONFIRM_EMAIL = '/users/registration/account-confirm-email/.+'
 }
 
-enum ACCOUNT_ROUTES {
+export enum ACCOUNT_ROUTES {
   ACCOUNT = '/account',
   ACCOUNT_ADDRESS = '/account/address',
   ACCOUNT_CHANGE_EMAIL = '/account/change-email',
@@ -25,17 +25,17 @@ enum ACCOUNT_ROUTES {
   ANONYMOUS_TRACKING = '/anonymous-tracking'
 }
 
-enum ORDER_ROUTES {
+export enum ORDER_ROUTES {
   CHECKOUT = '/orders/checkout',
   CHECKOUT_COMPLETED = '/orders/completed',
   PAYMENT_GATEWAY_HASO = '/payment-gateway/haso'
 }
 
-enum FLATPAGE_ROUTES {
+export enum FLATPAGE_ROUTES {
   CONTACT_US = '/contact-us'
 }
 
-enum PRODUCT_ROUTES {}
+export enum PRODUCT_ROUTES {}
 
 export const ROUTES = {
   ...GENERAL_ROUTES,