@akinon/projectzero 2.0.32 → 2.0.33-rc.0

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

@@ -1,66 +1,53 @@
 '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 } from 'react';
+import dynamic from 'next/dynamic';
+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,23 +55,18 @@ 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 ?? '');
+
+  if (!isUnifiedCheckout && checkoutData?.redirect_url?.includes('basket')) {
     router.push(ROUTES.BASKET);
     return null;
   }
@@ -97,47 +79,30 @@ const Checkout = () => {
     );
   }
 
-  if (isResetStateLoading || isFetching || isError) {
+  if (isError) {
     return (
       <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>
     );
   }
 
-  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>
+  if (isResetStateLoading || isCheckoutLoading) {
+    return variantId === 'multi-step' ? (
+      <div className="flex flex-col items-center justify-center h-80">
+        <LoaderSpinner />
       </div>
-    </PluginModule>
-  );
+    ) : (
+      <CheckoutOnePageSkeleton />
+    );
+  }
+
+  return <CheckoutVariant options={variantOptions} />;
 };
 
 export default Checkout;

package/app-template/src/app/api/theme-settings/route.ts

@@ -1,12 +1,31 @@
 import { NextResponse } from 'next/server';
 import { getThemeSettings } from '@theme/data/server/theme';
 
+export const dynamic = 'force-dynamic';
+export const revalidate = 0;
+
 export async function GET() {
   try {
     const settings = await getThemeSettings();
-    return NextResponse.json(settings);
+    return NextResponse.json(settings, {
+      headers: {
+        'Cache-Control': 'no-store, must-revalidate',
+        'Pragma': 'no-cache'
+      }
+    });
   } catch (error) {
     console.error('Error in theme-settings API:', error);
-    return NextResponse.json({}, { status: 500 });
+    // Return empty object with 200 so checkout falls back to settings.js silently
+    // without surfacing as a 5xx in monitoring tools.
+    return NextResponse.json(
+      {},
+      {
+        status: 200,
+        headers: {
+          'Cache-Control': 'no-store, must-revalidate',
+          'Pragma': 'no-cache'
+        }
+      }
+    );
   }
 }

package/app-template/src/app/global-error.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useSentryUncaughtErrors } from '@akinon/next/hooks';
+
+export default function GlobalError({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useSentryUncaughtErrors(error);
+
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}

package/app-template/src/data/server/theme.ts

@@ -2,6 +2,11 @@ import 'server-only';
 
 import { getWidgetData } from '@akinon/next/data/server';
 
+export interface ThemeCheckoutSettings {
+  variant?: string;
+  options?: Record<string, unknown>;
+}
+
 interface ThemeSettings {
   logo?: string;
   favicon?: string;
@@ -16,31 +21,7 @@ interface ThemeSettings {
   mainMenuSticky?: boolean;
   breadcrumbSeparator?: string;
   socialNetworks?: Record<string, { url?: string; icon?: string }>;
-}
-
-interface ThemeConfigWidget {
-  attributes?: {
-    theme_name?: {
-      value?: string;
-      kwargs?: Record<string, unknown>;
-    };
-    theme_slug?: {
-      value?: string;
-      kwargs?: Record<string, unknown>;
-    };
-    theme_settings?: {
-      value?: string;
-      kwargs?: Record<string, unknown>;
-    };
-    theme_breakpoints?: {
-      value?: string;
-      kwargs?: Record<string, unknown>;
-    };
-    theme_dataSources?: {
-      value?: string;
-      kwargs?: Record<string, unknown>;
-    };
-  };
+  checkout?: ThemeCheckoutSettings;
 }
 
 /**

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

@@ -1 +1,3 @@
+export * from './use-contract';
+export * from './use-fav-button';
 export * from './use-add-product-to-basket';

package/app-template/src/plugins.js

@@ -19,6 +19,7 @@ module.exports = [
   'pz-hepsipay',
   'pz-flow-payment',
   'pz-virtual-try-on',
+  'pz-similar-products',
   'pz-cybersource-uc',
   'pz-hepsipay',
   'pz-masterpass-rest',

package/app-template/src/proxy.ts

@@ -14,7 +14,8 @@ export const config = {
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',
     '/(.+\\.)(html|htm|aspx|asp|php)',
-    '/(.*orders\\/checkout-with-token.*)'
+    '/(.*orders\\/checkout-with-token.*)',
+    '/(.*orders\\/post-checkout.*)'
   ]
 };
 

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;