@lookiero/checkout 9.14.0 → 10.0.0-beta.0

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import { style } from "./CheckoutHeader.style";
@@ -11,7 +11,7 @@ interface CheckoutHeaderProps {
 }
 
 const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
-  const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+  const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
 
   return (
     <Header testID="checkout-header">

package/src/infrastructure/ui/components/templates/header/checkoutHeader/__snapshots__/CheckoutHeader.test.tsx.snap

@@ -183,7 +183,7 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 0,
+            "paddingTop": 2,
           },
         ]
       }

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import { style } from "./ItemDetailHeader.style";
@@ -10,7 +10,7 @@ interface ItemDetailHeaderProps {
   readonly onBack: () => void;
 }
 const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
-  const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
+  const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
 
   return (
     <Header testID="item-detail-header">

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/__snapshots__/ItemDetailHeader.test.tsx.snap

@@ -72,7 +72,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 0,
+            "paddingTop": 2,
           },
         ]
       }

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.tsx

@@ -4,9 +4,9 @@ import { generatePath, useNavigate } from "react-router-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
-import { useBasePath } from "../../../../routing/useBasePath";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import style from "./ItemHeader.style";
@@ -33,12 +33,13 @@ interface ItemHeaderProps {
   readonly onNext?: OnNextItemFunction;
   readonly onPrevious?: OnPreviousItemFunction;
 }
+
 const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) => {
-  const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
+  const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
   const itemIndex = items.indexOf(item);
   const isFirstItem = itemIndex === 0;
   const isLastItem = itemIndex === items.length - 1;
-  const basePath = useBasePath();
+  const { basePath } = useStaticInfo();
   const navigate = useNavigate();
 
   const navigateToPreviousItem = useCallback(() => {

package/src/infrastructure/ui/components/templates/header/itemHeader/__snapshots__/ItemHeader.test.tsx.snap

@@ -183,7 +183,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 0,
+            "paddingTop": 2,
           },
         ]
       }

package/src/infrastructure/ui/hooks/{useSubmitCheckout.test.ts → useCheckoutFlow.test.ts}

@@ -11,7 +11,7 @@ import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout
 import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
 import { paymentFlowPayload as mockPaymentFlowPayload } from "../../projection/payment/paymentFlowPayload.mock";
 import { useQueryBus } from "./useQueryBus";
-import { useSubmitCheckout as sut } from "./useSubmitCheckout";
+import { useSubmitCheckout as sut } from "./useCheckoutFlow";
 
 const checkoutId = "9c450400-0cd7-44a4-b0e3-e0002a9bf8df";
 const checkoutBookingId = "07c996bb-a0b4-45f9-ae21-6bb9c784d12b";

package/src/infrastructure/ui/hooks/useCheckoutFlow.tsx

@@ -0,0 +1,212 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { PaymentFlow, PaymentFlowRef, PaymentPayload, Section } from "@lookiero/payments-front";
+import { LegacyBoxCheckoutStrategyPayload } from "@lookiero/payments-front/build/components/PaymentFlow/internals/strategies/LegacyBoxCheckoutStrategy";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { CheckoutProjection } from "../../../projection/checkout/checkout";
+import {
+  ViewCheckoutBookingById,
+  viewCheckoutBookingById,
+  ViewCheckoutBookingByIdResult,
+} from "../../../projection/checkoutBooking/viewCheckoutBookingById";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
+import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../projection/pricing/react/useViewPricingByCheckoutId";
+import { useTrackCheckout } from "../../tracking/useTrackCheckout";
+import { I18nMessages } from "../i18n/i18n";
+import { Routes } from "../routing/routes";
+import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
+import { useQueryBus } from "./useQueryBus";
+import { useStaticInfo } from "./useStaticInfo";
+
+type CheckoutFlowStatus = "idle" | "loading" | "success" | "error";
+
+interface CheckoutFlowFunction {
+  (): Promise<void>;
+}
+
+type CheckoutFlowReturn = [
+  checkoutFlow: CheckoutFlowFunction,
+  checkoutFlowStatus: CheckoutFlowStatus,
+  paymentFlow: ReactNode,
+];
+
+interface UseCheckoutFlowArgs {
+  readonly checkout: CheckoutProjection | undefined;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
+  readonly getAuthToken: () => Promise<string>;
+  readonly onSuccess: () => void;
+}
+
+interface UseCheckoutFlowFunction {
+  (args: UseCheckoutFlowArgs): CheckoutFlowReturn;
+}
+
+const useCheckoutFlow: UseCheckoutFlowFunction = ({
+  checkout: checkoutProjection,
+  order: orderProjection,
+  subscription: subscriptionProjection,
+  getAuthToken,
+  onSuccess,
+}) => {
+  const logger = useLogger();
+  const queryBus = useQueryBus();
+  const {
+    customer: { customerId, country, segment, name, email },
+    basePath,
+  } = useStaticInfo();
+  const paymentFlowRef = useRef<PaymentFlowRef>(null);
+  const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+    checkoutId: checkoutProjection?.id as string,
+  });
+  const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id as string });
+  const [pricing] = useViewPricingByCheckoutId({
+    checkoutId: checkoutProjection?.id,
+    queryOptions: { refetchOnMount: true },
+  });
+  const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({
+    checkoutId: checkoutProjection?.id,
+    logger,
+  });
+  const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({
+    checkoutBookingId: checkoutProjection?.checkoutBookingId,
+    logger,
+  });
+  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+  const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
+  const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState<CheckoutFlowStatus>("idle");
+  const [authToken, setAuthToken] = useState<string>();
+  useEffect(() => {
+    const loadAuthToken = async () => setAuthToken(await getAuthToken());
+    loadAuthToken();
+  }, [getAuthToken]);
+  const trackCheckout = useTrackCheckout({
+    checkout: checkoutProjection,
+    order: orderProjection,
+    pricing,
+    subscription: subscriptionProjection,
+    userId: customerId,
+    country,
+    segment,
+  });
+
+  const checkoutFlow: CheckoutFlowFunction = useCallback(async () => {
+    try {
+      sizeChangeEnabled && (await blockCheckoutBooking());
+    } catch (error) {
+      return;
+    }
+
+    if (checkoutProjection?.checkoutBookingId) {
+      const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
+        viewCheckoutBookingById({ checkoutBookingId: checkoutProjection?.checkoutBookingId }),
+      );
+
+      if (checkoutBooking?.isExpired) {
+        setCheckoutBookingExpired(true);
+        return;
+      }
+    }
+
+    setStartLegacyBoxCheckoutStatus("loading");
+
+    paymentFlowRef.current?.startLegacyBoxCheckout({
+      ...paymentFlowPayload,
+      userInformation: { email, name },
+      returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+    } as unknown as LegacyBoxCheckoutStrategyPayload);
+  }, [
+    checkoutProjection?.checkoutBookingId,
+    paymentFlowPayload,
+    email,
+    name,
+    basePath,
+    sizeChangeEnabled,
+    blockCheckoutBooking,
+    queryBus,
+  ]);
+  const handleOnCheckoutFlowSuccess = useCallback(() => {
+    trackCheckout();
+    onSuccess();
+  }, [onSuccess, trackCheckout]);
+
+  const onPaymentSuccess = useCallback(async () => {
+    setStartLegacyBoxCheckoutStatus("success");
+
+    await submitCheckoutCommand();
+
+    createNotification({
+      bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+      level: NotificationLevel.SUCCESS,
+    });
+  }, [createNotification, submitCheckoutCommand]);
+  const onPaymentError = useCallback(
+    (payload: PaymentPayload) => {
+      setStartLegacyBoxCheckoutStatus("error");
+
+      createNotification({
+        bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+        level: NotificationLevel.ERROR,
+      });
+    },
+    [createNotification],
+  );
+  usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
+
+  const checkoutFlowStatus: CheckoutFlowStatus = useMemo(() => {
+    if (
+      blockCheckoutBookingStatus === CommandStatus.LOADING ||
+      startLegacyBoxCheckoutStatus === "loading" ||
+      submitCheckoutCommandStatus === CommandStatus.LOADING
+    ) {
+      return "loading";
+    }
+
+    if (
+      blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
+      startLegacyBoxCheckoutStatus === "success" &&
+      submitCheckoutCommandStatus === CommandStatus.SUCCESS
+    ) {
+      return "success";
+    }
+
+    if (
+      blockCheckoutBookingStatus === CommandStatus.ERROR ||
+      startLegacyBoxCheckoutStatus === "error" ||
+      submitCheckoutCommandStatus === CommandStatus.ERROR ||
+      checkoutBookingExpired
+    ) {
+      return "error";
+    }
+
+    return "idle";
+  }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, checkoutBookingExpired]);
+
+  useEffect(() => {
+    if (checkoutFlowStatus !== "success") {
+      return;
+    }
+
+    handleOnCheckoutFlowSuccess();
+  }, [handleOnCheckoutFlowSuccess, checkoutFlowStatus]);
+
+  const paymentFlow = useMemo(
+    () => (authToken ? <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} /> : null),
+    [authToken],
+  );
+
+  return useMemo(
+    () => [checkoutFlow, checkoutFlowStatus, paymentFlow],
+    [checkoutFlow, paymentFlow, checkoutFlowStatus],
+  );
+};
+
+export type { CheckoutFlowStatus };
+export { useCheckoutFlow };

package/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.ts

@@ -1,75 +1,33 @@
-import { useCallback, useEffect } from "react";
-import { useEvent } from "@lookiero/event";
-import { Logger } from "@lookiero/sty-psp-logging";
-import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { I18nMessages } from "../i18n/i18n";
-
-const PAYMENT_ERROR = "ERROR";
-const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
-
-interface Message {
-  readonly id: string;
-}
-interface OnSuccessFunctionArgs {
-  readonly message: Message;
-}
-interface OnSuccessFunction {
-  (args: OnSuccessFunctionArgs): void;
-}
-
-interface Toaster {
-  readonly id: string;
-}
-interface Error {
-  readonly toaster?: Toaster;
-}
-interface OnErrorFunctionArgs {
-  readonly error: Error;
-}
-interface OnErrorFunction {
-  (args: OnErrorFunctionArgs): void;
-}
+import { useEffect } from "react";
+import { PaymentPayload, Section, usePaymentStatusManager } from "@lookiero/payments-front";
 
 interface UsePaymentInstrumentEventsFunctionArgs {
-  readonly logger: Logger;
+  readonly onSuccess: (payload: PaymentPayload) => void;
+  readonly onError: (payload: PaymentPayload) => void;
 }
 
 interface UsePaymentInstrumentEventsFunction {
   (args: UsePaymentInstrumentEventsFunctionArgs): void;
 }
 
-const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ logger }) => {
-  const { subscribe, unsubscribe } = useEvent();
+const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ onSuccess, onError }) => {
+  const refreshStatus = usePaymentStatusManager(Section.BOX_CHECKOUT);
 
-  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+  useEffect(() => {
+    const { isLoading, consumePayload } = refreshStatus;
 
-  const onSuccess: OnSuccessFunction = useCallback(
-    ({ message }) => createNotification({ bodyI18nKey: message.id, level: NotificationLevel.SUCCESS }),
-    [createNotification],
-  );
+    if (isLoading) {
+      return;
+    }
 
-  const onError: OnErrorFunction = useCallback(
-    ({ error }) => {
-      if (error.toaster) {
-        createNotification({
-          bodyI18nKey: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-          level: NotificationLevel.ERROR,
-        });
+    consumePayload((payload) => {
+      if (payload.success) {
+        onSuccess(payload);
+      } else {
+        onError(payload);
       }
-    },
-    [createNotification],
-  );
-
-  useEffect(() => {
-    subscribe({ event: PAYMENT_ERROR }, onError);
-    subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
-
-    return () => {
-      unsubscribe({ event: PAYMENT_ERROR }, onError);
-      unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
-    };
-  }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
+    });
+  }, [onError, onSuccess, refreshStatus]);
 };
 
 export { usePaymentInstrumentEvents };

package/src/infrastructure/ui/hooks/useStaticInfo.tsx

@@ -6,6 +6,7 @@ import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 interface StaticInfo {
   readonly kameleoon: KameleoonEnvironment;
   readonly customer: Customer;
+  readonly basePath: string;
 }
 
 const StaticInfoContext = createContext<StaticInfo>(null as unknown as StaticInfo);
@@ -14,10 +15,11 @@ interface StaticInfoProviderProps {
   readonly children: ReactNode;
   readonly kameleoon: KameleoonEnvironment;
   readonly customer: Customer;
+  readonly basePath: string;
 }
 
-const StaticInfoProvider: FC<StaticInfoProviderProps> = ({ children, kameleoon, customer }) => {
-  const value = useMemo(() => ({ kameleoon, customer }), [customer, kameleoon]);
+const StaticInfoProvider: FC<StaticInfoProviderProps> = ({ children, kameleoon, customer, basePath }) => {
+  const value = useMemo(() => ({ kameleoon, customer, basePath }), [customer, kameleoon, basePath]);
 
   return <StaticInfoContext.Provider value={value}>{children}</StaticInfoContext.Provider>;
 };

package/src/infrastructure/ui/i18n/i18n.ts

@@ -1,5 +1,3 @@
-const DOMAIN = "CheckoutI18n";
-
 // TODO: deprecated?
 const COLOR_I18N_PREFIX = "catalog.color.";
 
@@ -50,6 +48,7 @@ enum I18nMessages {
   CHECKOUT_TITLE = "checkout.title",
   CHECKOUT_PAY_BUTTON = "checkout.pay_button",
   CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
+  CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
   CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
   CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
   CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",
@@ -60,4 +59,4 @@ enum I18nMessages {
   CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired",
 }
 
-export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };
+export { I18nMessages, COLOR_I18N_PREFIX };

package/src/infrastructure/ui/routing/CheckoutMiddleware.test.tsx

@@ -12,9 +12,9 @@ import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutI
 import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
 import { checkout } from "../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { StaticInfoProvider } from "../hooks/useStaticInfo";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
-import { BasePathProvider } from "./useBasePath";
 
 jest.mock("../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId", () => ({
   useViewFirstAvailableCheckoutByCustomerId: jest.fn(),
@@ -91,7 +91,7 @@ const renderCheckoutMiddleware = ({
       {
         path: "/*",
         element: (
-          <BasePathProvider basePath="">
+          <StaticInfoProvider basePath="" customer={} kameleoon={}>
             <CheckoutMiddleware
               customerId={customerId}
               loader={<Text>{loaderText}</Text>}
@@ -99,7 +99,7 @@ const renderCheckoutMiddleware = ({
             >
               <Text>{checkoutChildrenText}</Text>
             </CheckoutMiddleware>
-          </BasePathProvider>
+          </StaticInfoProvider>
         ),
       },
     ],

package/src/infrastructure/ui/routing/CheckoutMiddleware.tsx

@@ -8,8 +8,8 @@ import { CheckoutItemProjection } from "../../../projection/checkoutItem/checkou
 import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useStaticInfo } from "../hooks/useStaticInfo";
 import { Routes } from "./routes";
-import { useBasePath } from "./useBasePath";
 
 interface CheckoutMiddlewareProps {
   readonly customerId: string;
@@ -25,7 +25,7 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
   children,
 }) => {
   const logger = useLogger();
-  const basePath = useBasePath();
+  const { basePath } = useStaticInfo();
   const navigate = useNavigate();
   const navigateRef = useRef(navigate);
   navigateRef.current = navigate;
@@ -48,12 +48,6 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
   const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
   const feedbackRouteMatchRef = useRef(feedbackRouteMatch);
   feedbackRouteMatchRef.current = feedbackRouteMatch;
-  const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
-  const checkoutPaymentRouteMatchRef = useRef(checkoutPaymentRouteMatch);
-  checkoutPaymentRouteMatchRef.current = checkoutPaymentRouteMatch;
-
-  const checkoutShown = useRef(false);
-  checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
 
   const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const checkoutItemsRef = useRef<CheckoutItemProjection[]>();
@@ -99,8 +93,7 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
           summaryRouteMatchRef.current ||
           summaryTabsRouteMatchRef.current ||
           itemDetailRouteMatchRef.current ||
-          checkoutRouteMatchRef.current ||
-          checkoutPaymentRouteMatchRef.current
+          checkoutRouteMatchRef.current
         )
       ) {
         navigateRef.current(`${basePath}/${Routes.SUMMARY}`, { replace: true });
@@ -127,13 +120,6 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
     return null;
   }
 
-  /* Prevent direct payment access */
-  if (checkoutPaymentRouteMatch && !checkoutShown.current) {
-    onNotAccessible();
-
-    return null;
-  }
-
   return children;
 };
 

package/src/infrastructure/ui/routing/Routing.tsx

@@ -6,13 +6,12 @@ import { Kameleoon } from "@lookiero/sty-psp-ab-testing";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { Layout } from "@lookiero/sty-psp-ui";
 import { Customer } from "../../../projection/customer/customer";
-import { Order } from "../../../projection/order/order";
-import { Subscription } from "../../../projection/subscription/subscription";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 import { StaticInfoProvider } from "../hooks/useStaticInfo";
 import { App } from "../views/App";
 import { Checkout } from "../views/checkout/Checkout";
-import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
 import { Feedback } from "../views/feedback/Feedback";
 import { Item } from "../views/item/Item";
 import { Return } from "../views/return/Return";
@@ -20,20 +19,19 @@ import { Summary } from "../views/summary/Summary";
 import { SummaryTabs } from "../views/summaryTabs/SummaryTabs";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
-import { BasePathProvider } from "./useBasePath";
 
 interface RoutingProps {
   readonly basePath?: string;
   readonly customer: Customer;
-  readonly order: Order | undefined;
-  readonly subscription: Subscription | undefined;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
   readonly locale: Locale;
   readonly I18n: I18n;
   readonly kameleoon: KameleoonEnvironment;
   readonly layout: Layout;
   readonly getAuthToken: () => Promise<string>;
   readonly onNotAccessible: () => void;
-  readonly onCheckoutSubmitted?: () => void;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly onI18nError?: (err: Error) => void;
   readonly useRedirect: () => Record<string, string>;
   readonly useRoutes: typeof reactRouterUseRoutes;
@@ -51,7 +49,7 @@ const Routing: FC<RoutingProps> = ({
   getAuthToken,
   onI18nError,
   onNotAccessible,
-  onCheckoutSubmitted,
+  onCheckoutFlowSuccess,
   useRedirect,
   useRoutes = reactRouterUseRoutes,
 }) => {
@@ -59,19 +57,17 @@ const Routing: FC<RoutingProps> = ({
     {
       path: "",
       element: (
-        <BasePathProvider basePath={basePath}>
-          <StaticInfoProvider customer={customer} kameleoon={kameleoon}>
-            <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
-              <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
-                <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>
-                  <App>
-                    <Outlet />
-                  </App>
-                </CheckoutMiddleware>
-              </Kameleoon>
-            </I18n>
-          </StaticInfoProvider>
-        </BasePathProvider>
+        <StaticInfoProvider basePath={basePath} customer={customer} kameleoon={kameleoon}>
+          <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
+            <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
+              <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>
+                <App>
+                  <Outlet />
+                </App>
+              </CheckoutMiddleware>
+            </Kameleoon>
+          </I18n>
+        </StaticInfoProvider>
       ),
       children: [
         {
@@ -114,26 +110,16 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.CHECKOUT,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Checkout layout={layout} useRedirect={useRedirect}>
-                <Outlet />
-              </Checkout>
+              <Checkout
+                getAuthToken={getAuthToken}
+                layout={layout}
+                order={order}
+                subscription={subscription}
+                useRedirect={useRedirect}
+                onCheckoutFlowSuccess={onCheckoutFlowSuccess}
+              />
             </Suspense>
           ),
-          children: [
-            {
-              path: Routes.CHECKOUT_PAYMENT,
-              element: (
-                <CheckoutPaymentModal
-                  coupon={order?.coupon || null}
-                  getAuthToken={getAuthToken}
-                  isFirstOrder={order?.isFirstOrder as boolean}
-                  orderNumber={order?.orderNumber as number}
-                  subscription={subscription as Subscription}
-                  onCheckoutSubmitted={onCheckoutSubmitted}
-                />
-              ),
-            },
-          ],
         },
         {
           path: Routes.FEEDBACK,

package/src/infrastructure/ui/routing/routes.ts

@@ -5,7 +5,6 @@ export enum Routes {
   SUMMARY = "summary",
   SUMMARY_TABS = "tabs/:tab",
   CHECKOUT = "checkout",
-  CHECKOUT_PAYMENT = "payment",
   FEEDBACK = "feedback",
   RETURN = "return/:id",
 }