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

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/basket-section.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState } from 'react';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { checkoutApi } from '@akinon/next/data/client/checkout';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { BasketItem } from '@theme/views/basket';
+import { Icon, Link, Button, LoaderSpinner } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import settings from '@theme/settings';
+
+const BasketSection = () => {
+  const { t } = useLocalization();
+  const dispatch = useAppDispatch();
+  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
+  const [collapsed, setCollapsed] = useState(false);
+
+  const multiBasket =
+    (settings as { plugins?: { multiBasket?: boolean } })?.plugins
+      ?.multiBasket ?? false;
+
+  const totalQuantity = basket?.total_quantity ?? 0;
+  const totalAmount = basket?.total_amount ?? '0';
+  const initialSnapshotRef = useRef<{
+    qty: number;
+    amount: string;
+  } | null>(null);
+
+  useEffect(() => {
+    if (!isSuccess) return;
+    if (initialSnapshotRef.current === null) {
+      initialSnapshotRef.current = { qty: totalQuantity, amount: totalAmount };
+      return;
+    }
+    const prev = initialSnapshotRef.current;
+    if (prev.qty !== totalQuantity || prev.amount !== totalAmount) {
+      initialSnapshotRef.current = { qty: totalQuantity, amount: totalAmount };
+      dispatch(checkoutApi.util.invalidateTags(['Checkout']));
+    }
+  }, [isSuccess, totalQuantity, totalAmount, dispatch]);
+
+  if (isLoading) {
+    return (
+      <section
+        className="mb-5 rounded-2xl bg-white py-10 shadow-[0_2px_8px_-4px_rgba(0,0,0,0.06)] ring-1 ring-black/[0.04]"
+        data-testid="basket-section-loading"
+      >
+        <div className="flex justify-center">
+          <LoaderSpinner />
+        </div>
+      </section>
+    );
+  }
+
+  if (
+    isSuccess &&
+    (!basket?.basketitem_set || basket.basketitem_set.length === 0)
+  ) {
+    return (
+      <section
+        className="mb-5 rounded-2xl border-2 border-dashed border-gray-200 bg-white px-6 py-12 text-center"
+        data-testid="basket-section-empty"
+      >
+        <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-100">
+          <Icon
+            name="basket"
+            size={24}
+            className="fill-gray-500"
+            aria-hidden="true"
+          />
+        </div>
+        <h2 className="mb-2 text-lg font-semibold text-black-800">
+          {t('basket.empty.title')}
+        </h2>
+        <p className="mb-5 text-sm text-gray-600">
+          {t('basket.empty.content_first')}
+        </p>
+        <Link href={ROUTES.HOME} passHref>
+          <Button
+            appearance="filled"
+            className="px-6"
+            data-testid="basket-section-empty-cta"
+          >
+            {t('basket.empty.button')}
+          </Button>
+        </Link>
+      </section>
+    );
+  }
+
+  if (!basket) return null;
+
+  const itemCount = basket.basketitem_set.length;
+
+  return (
+    <section
+      className="mb-5 overflow-hidden rounded-2xl bg-white shadow-[0_2px_8px_-4px_rgba(0,0,0,0.06)] ring-1 ring-black/[0.04]"
+      data-testid="basket-section"
+    >
+      <header className="flex items-center justify-between gap-3 px-6 py-5 sm:px-7">
+        <div className="flex items-baseline gap-3">
+          <h2 className="text-base font-semibold leading-tight text-black-800 sm:text-lg">
+            {t('checkout.one_page.basket.title')}
+          </h2>
+          <span className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
+            {itemCount} {t('checkout.summary.items')}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={() => setCollapsed((prev) => !prev)}
+          aria-expanded={!collapsed}
+          aria-controls="basket-section-content"
+          className="rounded-lg px-3 py-1.5 text-xs font-medium text-gray-700 transition-all hover:bg-gray-100 hover:text-black-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary"
+          data-testid="basket-section-toggle"
+        >
+          {collapsed
+            ? t('checkout.one_page.basket.show')
+            : t('checkout.one_page.basket.hide')}
+        </button>
+      </header>
+
+      {!collapsed && (
+        <div
+          id="basket-section-content"
+          className="max-h-[28rem] overflow-y-auto border-t border-gray-100 px-6 sm:px-7"
+        >
+          <ul>
+            {multiBasket ? (
+              <PluginModule
+                component={Component.MultiBasket}
+                props={{ BasketItem }}
+              />
+            ) : (
+              basket.basketitem_set.map((basketItem, index) => (
+                <BasketItem
+                  basketItem={basketItem}
+                  namespace={basket.namespace}
+                  key={`${basketItem.id}-${index}`}
+                />
+              ))
+            )}
+          </ul>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default BasketSection;

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

@@ -0,0 +1,135 @@
+'use client';
+
+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';
+import PaymentSection from '../one-page/sections/payment-section';
+import OnePageSummary from '../one-page/one-page-summary';
+import MobileSummarySheet from '../one-page/mobile-summary-sheet';
+import TrustBadges from '../one-page/trust-badges';
+import {
+  useSectionState,
+  type SectionId
+} from '../one-page/hooks/use-section-state';
+import { useCheckoutFunnelGtm } from '../one-page/hooks/use-checkout-funnel-gtm';
+import BasketSection from './basket-section';
+import type { CheckoutVariantProps } from '../types';
+
+const BasketAndCheckout = ({ options }: CheckoutVariantProps) => {
+  const autoAdvance = options?.autoAdvance ?? true;
+  const stickyMobileCta = options?.stickyMobileCta ?? true;
+  const enableEditMode = options?.enableEditMode ?? true;
+  const showOrderReview = options?.showOrderReview ?? true;
+  const showTrustBadges = options?.showTrustBadges ?? true;
+  const gtmEnabled = options?.gtmEnabled ?? true;
+  const compactMode = options?.compactMode ?? false;
+
+  const { sections, activeSection, openSection } = useSectionState({
+    autoAdvance
+  });
+  useCheckoutFunnelGtm(activeSection, { enabled: gtmEnabled });
+
+  const sectionStatus = useCallback(
+    (id: SectionId) =>
+      sections.find((section) => section.id === id)?.status ?? 'locked',
+    [sections]
+  );
+
+  const goTo = useCallback(
+    (id: SectionId) => () => openSection(id),
+    [openSection]
+  );
+
+  return (
+    <PluginModule component={Component.MasterpassProvider}>
+      <PluginModule component={Component.MasterpassDeleteConfirmationModal} />
+      <PluginModule component={Component.MasterpassOtpModal} />
+      <PluginModule component={Component.MasterpassLinkModal} />
+
+      <div
+        className={clsx(
+          'min-h-screen bg-[#fafafa]',
+          compactMode ? 'pb-12 md:pb-8' : 'pb-20 md:pb-16'
+        )}
+        data-variant="basket-and-checkout"
+        data-compact={compactMode || undefined}
+      >
+        <div
+          className={clsx(
+            'container w-full px-4 md:px-6 lg:px-8',
+            compactMode ? 'pt-4' : 'pt-6 md:pt-10'
+          )}
+        >
+          <div
+            className={clsx(
+              'flex flex-col lg:flex-row lg:items-start',
+              compactMode ? 'gap-4 lg:gap-6' : 'gap-6 lg:gap-8'
+            )}
+          >
+            <div
+              className="w-full lg:w-2/3"
+              data-testid="basket-and-checkout-sections"
+            >
+              <BasketSection />
+
+              <ContactSection
+                status={sectionStatus('contact')}
+                onEdit={goTo('contact')}
+              />
+              <AddressSection
+                status={sectionStatus('address')}
+                onEdit={goTo('address')}
+                onComplete={goTo('shipping')}
+                editable={enableEditMode}
+              />
+              <ShippingSection
+                status={sectionStatus('shipping')}
+                onEdit={goTo('shipping')}
+                onComplete={goTo('payment')}
+                editable={enableEditMode}
+              />
+              <PaymentSection
+                status={sectionStatus('payment')}
+                onEdit={goTo('payment')}
+              />
+
+              {showTrustBadges && <TrustBadges />}
+            </div>
+
+            <aside
+              className="hidden w-full lg:block lg:w-1/3"
+              data-testid="basket-and-checkout-summary"
+            >
+              <div className="sticky top-6">
+                <CheckoutPiece piece="summary">
+                  <OnePageSummary
+                    onEditSection={openSection}
+                    showReview={showOrderReview}
+                  />
+                </CheckoutPiece>
+              </div>
+            </aside>
+          </div>
+        </div>
+
+        {stickyMobileCta && (
+          <div
+            className="fixed inset-x-0 bottom-0 z-30 lg:hidden"
+            data-testid="basket-and-checkout-mobile-cta"
+          >
+            <MobileSummarySheet
+              onEditSection={openSection}
+              showReview={showOrderReview}
+            />
+          </div>
+        )}
+      </div>
+    </PluginModule>
+  );
+};
+
+export default BasketAndCheckout;

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+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';
+import PaymentStep from '@theme/views/checkout/steps/payment';
+import { pushAddPaymentInfo, pushAddShippingInfo } from '@theme/utils/gtm';
+import type { CheckoutVariantProps } from '../types';
+
+const MultiStepCheckout = (_props: CheckoutVariantProps) => {
+  const { steps, preOrder } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+  const dispatch = useAppDispatch();
+  const initialStepChanged = useRef<boolean>(false);
+
+  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]);
+
+  useEffect(() => {
+    if (!preOrder?.basket?.basketitem_set) return;
+    const products = preOrder.basket.basketitem_set.map((item) => ({
+      ...item.product
+    }));
+    if (steps.current === CheckoutStep.Shipping) {
+      pushAddShippingInfo(products);
+    }
+    if (steps.current === CheckoutStep.Payment) {
+      pushAddPaymentInfo(products, String(preOrder?.payment_option?.name));
+    }
+  }, [steps.current, preOrder?.payment_option?.name]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  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">
+        <CheckoutPiece piece="steps">
+          <CheckoutStepList />
+        </CheckoutPiece>
+
+        <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">
+            <CheckoutPiece piece="summary">
+              <Summary />
+            </CheckoutPiece>
+          </div>
+        </div>
+      </div>
+    </PluginModule>
+  );
+};
+
+export default MultiStepCheckout;