@akinon/projectzero 2.0.32 → 2.0.33-beta.0

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @akinon/projectzero
 
+## 2.0.33-beta.0
+
 ## 2.0.32
 
 ## 2.0.31

package/app-template/CHANGELOG.md

@@ -1,9 +1,43 @@
 # projectzeronext
 
+## 2.0.33-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd75]
+  - @akinon/next@2.0.33-beta.0
+  - @akinon/pz-theme@2.0.33-beta.0
+  - @akinon/pz-virtual-try-on@2.0.33-beta.0
+  - @akinon/pz-akifast@2.0.33-beta.0
+  - @akinon/pz-apple-pay@2.0.33-beta.0
+  - @akinon/pz-b2b@2.0.33-beta.0
+  - @akinon/pz-basket-gift-pack@2.0.33-beta.0
+  - @akinon/pz-bkm@2.0.33-beta.0
+  - @akinon/pz-checkout-gift-pack@2.0.33-beta.0
+  - @akinon/pz-click-collect@2.0.33-beta.0
+  - @akinon/pz-credit-payment@2.0.33-beta.0
+  - @akinon/pz-cybersource-uc@2.0.33-beta.0
+  - @akinon/pz-flow-payment@2.0.33-beta.0
+  - @akinon/pz-google-pay@2.0.33-beta.0
+  - @akinon/pz-gpay@2.0.33-beta.0
+  - @akinon/pz-haso@2.0.33-beta.0
+  - @akinon/pz-hepsipay@2.0.33-beta.0
+  - @akinon/pz-masterpass@2.0.33-beta.0
+  - @akinon/pz-masterpass-rest@2.0.33-beta.0
+  - @akinon/pz-multi-basket@2.0.33-beta.0
+  - @akinon/pz-one-click-checkout@2.0.33-beta.0
+  - @akinon/pz-otp@2.0.33-beta.0
+  - @akinon/pz-pay-on-delivery@2.0.33-beta.0
+  - @akinon/pz-saved-card@2.0.33-beta.0
+  - @akinon/pz-similar-products@2.0.33-beta.0
+  - @akinon/pz-tabby-extension@2.0.33-beta.0
+  - @akinon/pz-tamara-extension@2.0.33-beta.0
+
 ## 2.0.32
 
 ### Patch Changes
 
+- 275fca44: ZERO-4429: Add settings-driven checkout variant system
 - Updated dependencies [239aa9d0]
   - @akinon/next@2.0.32
   - @akinon/pz-theme@2.0.32

package/app-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projectzeronext",
-  "version": "2.0.32",
+  "version": "2.0.33-beta.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -24,33 +24,33 @@
     "test:middleware": "jest middleware-matcher.test.ts --bail"
   },
   "dependencies": {
-    "@akinon/next": "2.0.32",
-    "@akinon/pz-akifast": "2.0.32",
-    "@akinon/pz-apple-pay": "2.0.32",
-    "@akinon/pz-b2b": "2.0.32",
-    "@akinon/pz-basket-gift-pack": "2.0.32",
-    "@akinon/pz-bkm": "2.0.32",
-    "@akinon/pz-checkout-gift-pack": "2.0.32",
-    "@akinon/pz-click-collect": "2.0.32",
-    "@akinon/pz-credit-payment": "2.0.32",
-    "@akinon/pz-cybersource-uc": "2.0.32",
-    "@akinon/pz-flow-payment": "2.0.32",
-    "@akinon/pz-google-pay": "2.0.32",
-    "@akinon/pz-gpay": "2.0.32",
-    "@akinon/pz-haso": "2.0.32",
-    "@akinon/pz-hepsipay": "2.0.32",
-    "@akinon/pz-masterpass": "2.0.32",
-    "@akinon/pz-masterpass-rest": "2.0.32",
-    "@akinon/pz-multi-basket": "2.0.32",
-    "@akinon/pz-one-click-checkout": "2.0.32",
-    "@akinon/pz-otp": "2.0.32",
-    "@akinon/pz-pay-on-delivery": "2.0.32",
-    "@akinon/pz-saved-card": "2.0.32",
-    "@akinon/pz-similar-products": "2.0.32",
-    "@akinon/pz-tabby-extension": "2.0.32",
-    "@akinon/pz-tamara-extension": "2.0.32",
-    "@akinon/pz-theme": "2.0.32",
-    "@akinon/pz-virtual-try-on": "2.0.32",
+    "@akinon/next": "2.0.33-beta.0",
+    "@akinon/pz-akifast": "2.0.33-beta.0",
+    "@akinon/pz-apple-pay": "2.0.33-beta.0",
+    "@akinon/pz-b2b": "2.0.33-beta.0",
+    "@akinon/pz-basket-gift-pack": "2.0.33-beta.0",
+    "@akinon/pz-bkm": "2.0.33-beta.0",
+    "@akinon/pz-checkout-gift-pack": "2.0.33-beta.0",
+    "@akinon/pz-click-collect": "2.0.33-beta.0",
+    "@akinon/pz-credit-payment": "2.0.33-beta.0",
+    "@akinon/pz-cybersource-uc": "2.0.33-beta.0",
+    "@akinon/pz-flow-payment": "2.0.33-beta.0",
+    "@akinon/pz-google-pay": "2.0.33-beta.0",
+    "@akinon/pz-gpay": "2.0.33-beta.0",
+    "@akinon/pz-haso": "2.0.33-beta.0",
+    "@akinon/pz-hepsipay": "2.0.33-beta.0",
+    "@akinon/pz-masterpass": "2.0.33-beta.0",
+    "@akinon/pz-masterpass-rest": "2.0.33-beta.0",
+    "@akinon/pz-multi-basket": "2.0.33-beta.0",
+    "@akinon/pz-one-click-checkout": "2.0.33-beta.0",
+    "@akinon/pz-otp": "2.0.33-beta.0",
+    "@akinon/pz-pay-on-delivery": "2.0.33-beta.0",
+    "@akinon/pz-saved-card": "2.0.33-beta.0",
+    "@akinon/pz-similar-products": "2.0.33-beta.0",
+    "@akinon/pz-tabby-extension": "2.0.33-beta.0",
+    "@akinon/pz-tamara-extension": "2.0.33-beta.0",
+    "@akinon/pz-theme": "2.0.33-beta.0",
+    "@akinon/pz-virtual-try-on": "2.0.33-beta.0",
     "@hookform/resolvers": "2.9.0",
     "@next/third-parties": "16.2.6",
     "@react-google-maps/api": "2.17.1",
@@ -74,7 +74,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "2.0.32",
+    "@akinon/eslint-plugin-projectzero": "2.0.33-beta.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/app-template/public/locales/en/checkout.json

@@ -161,5 +161,55 @@
     "processing": "Processing...",
     "pay_button": "Pay with Apple Pay",
     "payment_failed": "Payment failed"
+  },
+  "one_page": {
+    "edit": "Edit",
+    "continue_to_shipping": "Continue to shipping",
+    "continue_to_payment": "Continue to payment",
+    "contact": {
+      "title": "Contact information",
+      "guest_user": "Guest user",
+      "guest_badge": "Guest",
+      "guest_note": "You are continuing checkout as a guest."
+    },
+    "address": {
+      "title": "Delivery & billing address",
+      "shipping_label": "Delivery address",
+      "billing_label": "Billing address",
+      "use_for_billing": "Use the same address for billing",
+      "same_as_shipping": "Same as shipping",
+      "pick_different_billing": "Pick a different address if you'd like a separate billing destination."
+    },
+    "shipping": {
+      "title": "Shipping method"
+    },
+    "payment": {
+      "title": "Payment",
+      "select_method": "Please select a payment method to continue.",
+      "no_options": "No payment options are available at the moment."
+    },
+    "summary": {
+      "show_summary": "Show order summary",
+      "hide_summary": "Hide order summary",
+      "review_title": "Order details",
+      "deliver_to": "Deliver to",
+      "shipping_method": "Shipping method",
+      "payment_method": "Payment method"
+    },
+    "trust": {
+      "secure_title": "Secure checkout",
+      "secure_note": "Your payment is encrypted and processed securely. We never store your card details."
+    },
+    "basket": {
+      "title": "Your cart",
+      "empty": "Your cart is empty.",
+      "show": "Show items",
+      "hide": "Hide items",
+      "quantity": "Quantity",
+      "increase": "Increase quantity",
+      "decrease": "Decrease quantity",
+      "remove": "Remove from cart",
+      "update_error": "Could not update the cart. Please try again."
+    }
   }
 }

package/app-template/public/locales/tr/checkout.json

@@ -160,5 +160,55 @@
     "processing": "İşleniyor...",
     "pay_button": "Apple Pay ile Öde",
     "payment_failed": "Ödeme başarısız oldu"
+  },
+  "one_page": {
+    "edit": "Düzenle",
+    "continue_to_shipping": "Kargo seçimine geç",
+    "continue_to_payment": "Ödemeye geç",
+    "contact": {
+      "title": "İletişim bilgileri",
+      "guest_user": "Misafir kullanıcı",
+      "guest_badge": "Misafir",
+      "guest_note": "Alışverişe misafir olarak devam ediyorsunuz."
+    },
+    "address": {
+      "title": "Teslimat ve fatura adresi",
+      "shipping_label": "Teslimat adresi",
+      "billing_label": "Fatura adresi",
+      "use_for_billing": "Fatura adresi olarak da kullan",
+      "same_as_shipping": "Teslimat adresiyle aynı",
+      "pick_different_billing": "Faturayı farklı bir adrese istiyorsanız aşağıdan seçin."
+    },
+    "shipping": {
+      "title": "Kargo seçimi"
+    },
+    "payment": {
+      "title": "Ödeme",
+      "select_method": "Devam etmek için bir ödeme yöntemi seçin.",
+      "no_options": "Şu anda kullanılabilir bir ödeme yöntemi bulunmuyor."
+    },
+    "summary": {
+      "show_summary": "Sipariş özetini göster",
+      "hide_summary": "Sipariş özetini gizle",
+      "review_title": "Sipariş detayları",
+      "deliver_to": "Teslim adresi",
+      "shipping_method": "Kargo yöntemi",
+      "payment_method": "Ödeme yöntemi"
+    },
+    "trust": {
+      "secure_title": "Güvenli ödeme",
+      "secure_note": "Ödemeniz şifrelenir ve güvenli olarak işlenir. Kart bilgileriniz saklanmaz."
+    },
+    "basket": {
+      "title": "Sepetiniz",
+      "empty": "Sepetiniz boş.",
+      "show": "Ürünleri göster",
+      "hide": "Ürünleri gizle",
+      "quantity": "Adet",
+      "increase": "Adedi artır",
+      "decrease": "Adedi azalt",
+      "remove": "Sepetten çıkar",
+      "update_error": "Sepet güncellenemedi. Lütfen tekrar deneyin."
+    }
   }
 }

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

@@ -1,28 +1,55 @@
 'use client';
 
-import { useEffect } from 'react';
-import { ROUTES } from '@theme/routes';
+import { useEffect, useMemo } from 'react';
+import { ROUTES, ORDER_ROUTES } from '@theme/routes';
 import { useGetBasketQuery } from '@akinon/next/data/client/basket';
 import { pushCartView } from '@theme/utils/gtm';
 import { Button, LoaderSpinner, Link } from '@theme/components';
 import { BasketItem, Summary } from '@theme/views/basket';
-import { useLocalization } from '@akinon/next/hooks';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import settings from '@theme/settings';
+import { UNIFIED_VARIANTS } from '@theme/views/checkout/variants/registry';
 
 export default function Page() {
   const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
   const { t } = useLocalization();
+  const router = useRouter();
   const multiBasket = settings.plugins?.multiBasket ?? false;
 
+  const checkoutVariant = (settings as { checkout?: { variant?: string } })
+    ?.checkout?.variant;
+  const isUnifiedCheckout = useMemo(
+    () => UNIFIED_VARIANTS.has(checkoutVariant ?? ''),
+    [checkoutVariant]
+  );
+
+  const hasItems = Boolean(
+    basket?.basketitem_set && basket.basketitem_set.length > 0
+  );
+
   useEffect(() => {
-    if (isSuccess) {
+    if (isUnifiedCheckout && isSuccess && hasItems) {
+      router.replace(ORDER_ROUTES.CHECKOUT);
+    }
+  }, [isUnifiedCheckout, isSuccess, hasItems, router]);
+
+  useEffect(() => {
+    if (isSuccess && hasItems) {
       const products = basket.basketitem_set.map((basketItem) => ({
         ...basketItem.product
       }));
       pushCartView(products);
     }
-  }, [basket, isSuccess]);
+  }, [basket, isSuccess, hasItems]);
+
+  if (isUnifiedCheckout && (isLoading || (isSuccess && hasItems))) {
+    return (
+      <div className="flex w-full justify-center py-20">
+        <LoaderSpinner />
+      </div>
+    );
+  }
 
   return (
     <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
@@ -32,7 +59,7 @@ export default function Page() {
         </div>
       )}
       {isSuccess &&
-        (basket && basket.basketitem_set && basket.basketitem_set.length > 0 ? (
+        (hasItems ? (
           <>
             <div className="flex-1 xl:mr-16">
               <div className="flex items-center justify-between py-2 border-b border-gray-200 lg:py-3">

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/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;
 }
 
 /**