@akinon/projectzero 2.0.32 → 2.0.33-beta.0

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

@@ -0,0 +1,149 @@
+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,132 @@
+'use client';
+
+import { useCallback } from 'react';
+import clsx from 'clsx';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+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">
+                <OnePageSummary
+                  onEditSection={openSection}
+                  showReview={showOrderReview}
+                />
+              </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,73 @@
+'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 { 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">
+        <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>
+  );
+};
+
+export default MultiStepCheckout;

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
+  };
+};