@akinon/projectzero 2.0.32 → 2.0.33-rc.0

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

@@ -0,0 +1,140 @@
+import { ReactNode, useEffect, useRef, useId } from 'react';
+import clsx from 'clsx';
+import { useLocalization } from '@akinon/next/hooks';
+import { Icon } from '@theme/components';
+
+export type SectionStatus = 'locked' | 'active' | 'completed';
+
+interface AccordionSectionProps {
+  step: number;
+  title: string;
+  status: SectionStatus;
+  summary?: ReactNode;
+  onEdit?: () => void;
+  editable?: boolean;
+  children: ReactNode;
+  dataTestId?: string;
+  padded?: boolean;
+}
+
+export const AccordionSection = ({
+  step,
+  title,
+  status,
+  summary,
+  onEdit,
+  editable = true,
+  children,
+  dataTestId,
+  padded = true
+}: AccordionSectionProps) => {
+  const { t } = useLocalization();
+  const isOpen = status === 'active';
+  const isCompleted = status === 'completed';
+  const isLocked = status === 'locked';
+
+  const contentRef = useRef<HTMLDivElement>(null);
+  const headerId = useId();
+  const panelId = useId();
+  const wasOpenRef = useRef(isOpen);
+
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current && contentRef.current) {
+      const firstFocusable = contentRef.current.querySelector<HTMLElement>(
+        'input:not([disabled]), button:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      firstFocusable?.focus({ preventScroll: true });
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
+
+  return (
+    <section
+      className={clsx(
+        'mb-4 overflow-hidden rounded-2xl bg-white last:mb-0',
+        'transition-all duration-300 ease-out',
+        isOpen
+          ? 'shadow-[0_12px_40px_-16px_rgba(0,0,0,0.16)] ring-1 ring-black-800/10'
+          : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]',
+        isLocked && 'opacity-50'
+      )}
+      data-testid={dataTestId}
+      data-status={status}
+      aria-labelledby={headerId}
+    >
+      <header
+        id={headerId}
+        className={clsx(
+          'flex items-center justify-between gap-3 px-6 py-5 sm:px-7',
+          isOpen && 'border-b border-gray-100'
+        )}
+      >
+        <div className="flex items-center gap-3.5">
+          <span
+            className={clsx(
+              'flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-all',
+              isOpen && 'bg-black-800 text-white',
+              isCompleted && !isOpen && 'bg-black-800 text-white',
+              isLocked && 'bg-gray-100 text-gray-400'
+            )}
+            aria-hidden="true"
+          >
+            {isCompleted ? (
+              <Icon name="check" size={14} className="fill-white" />
+            ) : (
+              step
+            )}
+          </span>
+          <h2
+            className={clsx(
+              'text-lg font-semibold leading-tight tracking-tight',
+              isOpen || isCompleted ? 'text-black-800' : 'text-gray-500'
+            )}
+          >
+            {title}
+          </h2>
+        </div>
+
+        {isCompleted && editable && onEdit && (
+          <button
+            type="button"
+            onClick={onEdit}
+            className={clsx(
+              'group flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium',
+              'text-gray-700 transition-all duration-150',
+              'hover:bg-gray-100 hover:text-black-800',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-black-800 focus-visible:ring-offset-1'
+            )}
+            data-testid={`${dataTestId}-edit`}
+            aria-label={`${t('checkout.one_page.edit')} ${title}`}
+          >
+            <span>{t('checkout.one_page.edit')}</span>
+          </button>
+        )}
+      </header>
+
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={headerId}
+        hidden={!isOpen}
+        className={clsx(
+          'transition-opacity duration-300 ease-out',
+          isOpen ? 'opacity-100' : 'opacity-0'
+        )}
+      >
+        <div ref={contentRef} className={padded ? 'px-6 py-6 sm:px-7' : undefined}>
+          {children}
+        </div>
+      </div>
+
+      {isCompleted && summary && (
+        <div className="border-t border-gray-100 px-6 py-4 text-sm text-gray-700 sm:px-7">
+          {summary}
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default AccordionSection;

package/app-template/src/views/checkout/variants/one-page/hooks/use-checkout-funnel-gtm.ts

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import type { RootState } from '@theme/redux/store';
+import {
+  pushAddShippingInfo,
+  pushAddPaymentInfo,
+  pushEventGA4
+} from '@theme/utils/gtm';
+import type { SectionId } from './use-section-state';
+
+const SECTION_EVENT: Record<SectionId, string> = {
+  contact: 'one_page_contact_complete',
+  address: 'one_page_address_complete',
+  shipping: 'one_page_shipping_complete',
+  payment: 'one_page_payment_open'
+};
+
+interface UseCheckoutFunnelGtmOptions {
+  enabled?: boolean;
+}
+
+export const useCheckoutFunnelGtm = (
+  activeSection: SectionId,
+  { enabled = true }: UseCheckoutFunnelGtmOptions = {}
+) => {
+  const preOrder = useAppSelector(
+    (state: RootState) => state.checkout.preOrder
+  );
+
+  const fired = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!enabled) return;
+    if (!preOrder?.basket?.basketitem_set) return;
+
+    // GTM dataLayer may not be initialised (no GTM tag, ad blocker, etc.).
+    // Any failure must NEVER crash the checkout flow — wrap in try/catch.
+    try {
+      const products = preOrder.basket.basketitem_set.map((item) => ({
+        ...item.product
+      }));
+
+      if (activeSection === 'shipping' && !fired.current.has('shipping')) {
+        pushAddShippingInfo(products);
+        fired.current.add('shipping');
+      }
+      if (activeSection === 'payment' && !fired.current.has('payment')) {
+        pushAddPaymentInfo(products, String(preOrder?.payment_option?.name));
+        fired.current.add('payment');
+      }
+
+      pushEventGA4(SECTION_EVENT[activeSection], {
+        section: activeSection,
+        items_count: products.length
+      });
+    } catch (error) {
+      console.warn('Checkout funnel GTM error (suppressed):', error);
+    }
+  }, [activeSection, enabled, preOrder?.payment_option?.name]); // eslint-disable-line react-hooks/exhaustive-deps
+};

package/app-template/src/views/checkout/variants/one-page/hooks/use-section-state.ts

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useSession } from 'next-auth/react';
+import type { RootState } from '@theme/redux/store';
+import type { SectionStatus } from '../accordion-section';
+
+export type SectionId = 'contact' | 'address' | 'shipping' | 'payment';
+
+export interface SectionState {
+  id: SectionId;
+  status: SectionStatus;
+  isComplete: boolean;
+}
+
+interface UseSectionStateOptions {
+  autoAdvance?: boolean;
+}
+
+export const useSectionState = ({ autoAdvance = true }: UseSectionStateOptions = {}) => {
+  const { data: session } = useSession();
+  const preOrder = useAppSelector(
+    (state: RootState) => state.checkout.preOrder
+  );
+
+  const isAuthenticated = Boolean(session?.user);
+  const contactComplete = isAuthenticated || Boolean(preOrder?.is_guest);
+  const addressComplete = Boolean(
+    preOrder?.shipping_address?.pk && preOrder?.billing_address?.pk
+  );
+  const shippingComplete = Boolean(preOrder?.shipping_option?.pk);
+
+  const completion = useMemo(
+    () => ({
+      contact: contactComplete,
+      address: addressComplete,
+      shipping: shippingComplete,
+      payment: false
+    }),
+    [contactComplete, addressComplete, shippingComplete]
+  );
+
+  const firstIncomplete = useMemo<SectionId>(() => {
+    if (!completion.contact) return 'contact';
+    if (!completion.address) return 'address';
+    if (!completion.shipping) return 'shipping';
+    return 'payment';
+  }, [completion]);
+
+  const [activeSection, setActiveSection] = useState<SectionId>(firstIncomplete);
+  const [touchedSections, setTouchedSections] = useState<Set<SectionId>>(
+    () => new Set()
+  );
+
+  useEffect(() => {
+    if (!autoAdvance) return;
+    if (touchedSections.has(activeSection)) return;
+    if (firstIncomplete !== activeSection) {
+      setActiveSection(firstIncomplete);
+    }
+  }, [firstIncomplete, autoAdvance, activeSection, touchedSections]);
+
+  const openSection = useCallback((id: SectionId) => {
+    setActiveSection(id);
+    setTouchedSections((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+  }, []);
+
+  const sections = useMemo<SectionState[]>(() => {
+    const order: SectionId[] = ['contact', 'address', 'shipping', 'payment'];
+    return order.map((id) => {
+      const isComplete = completion[id];
+      let status: SectionStatus;
+      if (id === activeSection) {
+        status = 'active';
+      } else if (isComplete) {
+        status = 'completed';
+      } else {
+        const indexCurrent = order.indexOf(activeSection);
+        const indexThis = order.indexOf(id);
+        status = indexThis < indexCurrent ? 'completed' : 'locked';
+      }
+      return { id, status, isComplete };
+    });
+  }, [completion, activeSection]);
+
+  const allComplete = completion.contact && completion.address && completion.shipping;
+
+  return {
+    sections,
+    activeSection,
+    openSection,
+    allComplete,
+    completion,
+    isAuthenticated
+  };
+};

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

@@ -0,0 +1,125 @@
+'use client';
+
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import ContactSection from './sections/contact-section';
+import AddressSection from './sections/address-section';
+import ShippingSection from './sections/shipping-section';
+import PaymentSection from './sections/payment-section';
+import OnePageSummary from './one-page-summary';
+import MobileSummarySheet from './mobile-summary-sheet';
+import TrustBadges from './trust-badges';
+import { useSectionState, type SectionId } from './hooks/use-section-state';
+import { useCheckoutFunnelGtm } from './hooks/use-checkout-funnel-gtm';
+import type { CheckoutVariantProps } from '../types';
+
+const OnePageCheckout = ({ 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-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="one-page-sections"
+            >
+              <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="one-page-summary"
+            >
+              <div className="sticky top-6">
+                <OnePageSummary
+                  onEditSection={openSection}
+                  showReview={showOrderReview}
+                />
+              </div>
+            </aside>
+          </div>
+        </div>
+
+        {stickyMobileCta && (
+          <div
+            className="fixed inset-x-0 bottom-0 z-30 lg:hidden"
+            data-testid="one-page-mobile-cta"
+          >
+            <MobileSummarySheet
+              onEditSection={openSection}
+              showReview={showOrderReview}
+            />
+          </div>
+        )}
+      </div>
+    </PluginModule>
+  );
+};
+
+export default OnePageCheckout;

package/app-template/src/views/checkout/variants/one-page/mobile-summary-sheet.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import { Price, Icon } from '@theme/components';
+import type { RootState } from '@theme/redux/store';
+import OnePageSummary from './one-page-summary';
+import type { SectionId } from './hooks/use-section-state';
+
+interface MobileSummarySheetProps {
+  onEditSection: (section: SectionId) => void;
+  showReview?: boolean;
+}
+
+const MobileSummarySheet = ({
+  onEditSection,
+  showReview = true
+}: MobileSummarySheetProps) => {
+  const { t } = useLocalization();
+  const [isOpen, setIsOpen] = useState(false);
+  const preOrder = useAppSelector(
+    (state: RootState) => state.checkout.preOrder
+  );
+
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setIsOpen(false);
+    };
+    document.addEventListener('keydown', onKey);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isOpen]);
+
+  if (!preOrder) return null;
+  const paymentName = preOrder.payment_option?.name;
+
+  return (
+    <>
+      {isOpen && (
+        <button
+          type="button"
+          aria-label={t('checkout.one_page.summary.hide_summary')}
+          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden"
+          onClick={() => setIsOpen(false)}
+          data-testid="one-page-mobile-summary-backdrop"
+        />
+      )}
+
+      <div className="relative z-50">
+        <button
+          type="button"
+          onClick={() => setIsOpen((prev) => !prev)}
+          aria-expanded={isOpen}
+          aria-controls="mobile-summary-content"
+          className="flex w-full items-center justify-between gap-3 border-t border-gray-200 bg-white px-5 py-4 shadow-[0_-8px_24px_-12px_rgba(0,0,0,0.12)] focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary"
+          data-testid="one-page-mobile-summary-toggle"
+        >
+          <span className="flex flex-col items-start gap-1">
+            <span className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-wider text-gray-600">
+              <Icon name="basket" size={12} aria-hidden="true" />
+              {isOpen
+                ? t('checkout.one_page.summary.hide_summary')
+                : t('checkout.one_page.summary.show_summary')}
+              <Icon
+                name="chevron-end"
+                size={10}
+                aria-hidden="true"
+                className={clsx('transition-transform duration-200', {
+                  'rotate-90': isOpen,
+                  '-rotate-90': !isOpen
+                })}
+              />
+            </span>
+            {paymentName && (
+              <span className="text-xs font-medium text-black-800">
+                {paymentName}
+              </span>
+            )}
+          </span>
+          <span className="text-xl font-bold tabular-nums text-black-800">
+            <Price value={preOrder.unpaid_amount} />
+          </span>
+        </button>
+
+        {isOpen && (
+          <div
+            id="mobile-summary-content"
+            role="dialog"
+            aria-modal="true"
+            aria-label={t('checkout.summary.title')}
+            className="max-h-[75vh] overflow-y-auto border-t border-gray-200 bg-[#fafafa] px-4 py-5"
+          >
+            <OnePageSummary
+              onEditSection={onEditSection}
+              showReview={showReview}
+            />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default MobileSummarySheet;