@lookiero/checkout 10.0.0-beta.4 → 10.0.0

package/src/infrastructure/ui/hooks/useSubmitCheckout.test.ts

@@ -0,0 +1,297 @@
+import { act, renderHook, waitFor } from "@testing-library/react-native";
+import { mock } from "jest-mock-extended";
+import { RefObject } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { PaymentFlowRef } from "@lookiero/payments-front";
+import { ChargeStatus } from "@lookiero/payments-front/build/infrastructure/CheckoutAPI";
+import { Logger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { CheckoutBookingProjection } from "../../../projection/checkoutBooking/checkoutBooking";
+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";
+
+const checkoutId = "9c450400-0cd7-44a4-b0e3-e0002a9bf8df";
+const checkoutBookingId = "07c996bb-a0b4-45f9-ae21-6bb9c784d12b";
+const errorChargeStatuses = Object.values(ChargeStatus).filter((status) => status !== ChargeStatus.EXECUTED);
+
+const logger = mock<Logger>();
+
+jest.mock("@lookiero/sty-psp-notifications");
+jest.mock("./useQueryBus");
+jest.mock("../../domain/checkout/react/useSubmitCheckout");
+jest.mock("../../domain/checkoutBooking/react/useBlockCheckoutBooking");
+
+describe("useSubmitCheckout custom hook", () => {
+  test("returns success as the status right after calling 'submitCheckout'", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnError = jest.fn();
+    const mockOnSuccess = jest.fn();
+    const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
+      current: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
+          callback({ status: ChargeStatus.EXECUTED, final: true });
+        }),
+        startCheckout: jest.fn(),
+      },
+    };
+
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
+    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
+    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
+
+    const { result } = renderHook(() =>
+      sut({
+        checkoutId,
+        checkoutBookingId,
+        paymentFlowRef: mockPaymentFlowRef,
+        onError: mockOnError,
+        onSuccess: mockOnSuccess,
+        logger,
+      }),
+    );
+
+    await act(async () => {
+      const [submitCheckout] = result.current;
+      await submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: true });
+    });
+
+    await waitFor(() => {
+      const [, status] = result.current;
+
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockCreateToastNotification).not.toHaveBeenCalled();
+      expect(mockSubmitCheckout).toHaveBeenCalled();
+
+      expect(status).toBe("success");
+      expect(mockOnSuccess).toHaveBeenCalled();
+      expect(mockOnError).not.toHaveBeenCalled();
+    });
+  });
+
+  test("does not call blockCheckoutBooking if sizeChange is not enabled after calling 'submitCheckout'", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnError = jest.fn();
+    const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
+      current: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
+          callback({ status: ChargeStatus.EXECUTED, final: true });
+        }),
+        startCheckout: jest.fn(),
+      },
+    };
+
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
+    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
+    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
+
+    const { result } = renderHook(() =>
+      sut({ checkoutId, checkoutBookingId, paymentFlowRef: mockPaymentFlowRef, onError: mockOnError, logger }),
+    );
+
+    await act(async () => {
+      const [submitCheckout] = result.current;
+      await submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: false });
+    });
+
+    await waitFor(() => {
+      const [, status] = result.current;
+
+      expect(mockBlockCheckoutBooking).not.toHaveBeenCalled();
+      expect(mockCreateToastNotification).not.toHaveBeenCalled();
+      expect(mockSubmitCheckout).toHaveBeenCalled();
+
+      expect(status).toBe("success");
+      expect(mockOnError).not.toHaveBeenCalled();
+    });
+  });
+
+  test("returns blockCheckoutBooking error as the status right after calling 'submitCheckout'", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnError = jest.fn();
+    const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
+      current: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
+          callback({ status: ChargeStatus.EXECUTED, final: true });
+        }),
+        startCheckout: jest.fn(),
+      },
+    };
+
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
+    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.ERROR]);
+    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.IDLE]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.IDLE]);
+
+    const { result } = renderHook(() =>
+      sut({ checkoutId, checkoutBookingId, paymentFlowRef: mockPaymentFlowRef, onError: mockOnError, logger }),
+    );
+
+    await act(async () => {
+      const [submitCheckout] = result.current;
+      await submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: true });
+    });
+
+    await waitFor(() => {
+      const [, status] = result.current;
+
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockCreateToastNotification).not.toHaveBeenCalled();
+      expect(status).toBe("error");
+      expect(mockOnError).toHaveBeenCalled();
+    });
+  });
+
+  test.each(errorChargeStatuses)(
+    "shows an 'error' notification when the checkout-flow fails (status %s)",
+    async (chargeStatus) => {
+      const mockBlockCheckoutBooking = jest.fn();
+      const mockSubmitCheckout = jest.fn();
+      const mockCreateToastNotification = jest.fn();
+      const mockOnError = jest.fn();
+      const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
+        current: {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
+            callback({ status: chargeStatus, toaster: { id: `${chargeStatus}_toaster_id` }, final: true });
+          }),
+          startCheckout: jest.fn(),
+        },
+      };
+
+      (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
+      (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
+      (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
+      (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.IDLE]);
+
+      const { result } = renderHook(() =>
+        sut({ checkoutId, checkoutBookingId, paymentFlowRef: mockPaymentFlowRef, onError: mockOnError, logger }),
+      );
+
+      await act(async () => {
+        const [submitCheckout] = result.current;
+        await submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: true });
+      });
+
+      await waitFor(() => {
+        const [, status] = result.current;
+
+        expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+        expect(mockCreateToastNotification).toHaveBeenCalledWith(
+          expect.objectContaining({
+            level: NotificationLevel.ERROR,
+            bodyI18nKey: `${chargeStatus}_toaster_id`,
+          }),
+        );
+        expect(mockSubmitCheckout).not.toHaveBeenCalled();
+
+        expect(status).toBe("error");
+        expect(mockOnError).toHaveBeenCalled();
+      });
+    },
+  );
+
+  test("returns submitCheckout error as the status right after calling 'submitCheckout'", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnError = jest.fn();
+    const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
+      current: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
+          callback({ status: ChargeStatus.EXECUTED, final: true });
+        }),
+        startCheckout: jest.fn(),
+      },
+    };
+
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
+    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.ERROR]);
+    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
+
+    const { result } = renderHook(() =>
+      sut({ checkoutId, checkoutBookingId, paymentFlowRef: mockPaymentFlowRef, onError: mockOnError, logger }),
+    );
+
+    await act(async () => {
+      const [submitCheckout] = result.current;
+      submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: true });
+    });
+
+    await waitFor(() => {
+      const [, status] = result.current;
+
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockCreateToastNotification).not.toHaveBeenCalled();
+      expect(mockSubmitCheckout).toHaveBeenCalled();
+
+      expect(status).toBe("error");
+      expect(mockOnError).toHaveBeenCalled();
+    });
+  });
+
+  test("returns submitCheckout error as the status right after calling 'submitCheckout' if CheckoutBooking isExpired", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnError = jest.fn();
+    const mockOnSuccess = jest.fn();
+    const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
+      current: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
+          callback({ status: ChargeStatus.EXECUTED, final: true });
+        }),
+        startCheckout: jest.fn(),
+      },
+    };
+
+    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: true }) as CheckoutBookingProjection);
+    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
+    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
+
+    const { result } = renderHook(() =>
+      sut({
+        checkoutId,
+        checkoutBookingId,
+        paymentFlowRef: mockPaymentFlowRef,
+        onError: mockOnError,
+        onSuccess: mockOnSuccess,
+        logger,
+      }),
+    );
+
+    await act(async () => {
+      const [submitCheckout] = result.current;
+      await submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: true });
+    });
+
+    await waitFor(() => {
+      const [, status] = result.current;
+
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockCreateToastNotification).not.toHaveBeenCalled();
+      expect(mockSubmitCheckout).not.toHaveBeenCalled();
+
+      expect(status).toBe("error");
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+      expect(mockOnError).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -0,0 +1,169 @@
+import { RefObject, useCallback, useMemo, useState } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { PaymentFlowRef } from "@lookiero/payments-front";
+import { Logger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import {
+  ViewCheckoutBookingById,
+  viewCheckoutBookingById,
+  ViewCheckoutBookingByIdResult,
+} from "../../../projection/checkoutBooking/viewCheckoutBookingById";
+import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
+import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { I18nMessages } from "../i18n/i18n";
+import { useQueryBus } from "./useQueryBus";
+
+enum ChargeStatus {
+  EXECUTED = "EXECUTED",
+  REQUIRES_ACTION = "REQUIRES_ACTION",
+  REQUIRED_ACTION_CANCELLED = "REQUIRED_ACTION_CANCELLED",
+  REJECTED = "REJECTED",
+  CANCELLED = "CANCELLED",
+  TO_CONFIRM = "TO_CONFIRM",
+  ERROR = "ERROR",
+  UNKNOWN = "UNKNOWN",
+}
+interface LegacyBoxCheckout {
+  readonly status: ChargeStatus;
+  readonly toaster: {
+    id: string;
+  } | null;
+  readonly final: boolean;
+  readonly id?: string;
+  readonly translation?: string;
+}
+
+type Status = "idle" | "loading" | "success" | "error";
+
+interface SubmitCheckoutFunctionArgs {
+  readonly paymentFlowPayload: PaymentFlowPayloadProjection;
+  readonly sizeChangeEnabled: boolean;
+}
+
+interface SubmitCheckoutFunction {
+  (args: SubmitCheckoutFunctionArgs): Promise<void>;
+}
+
+type UseSubmitCheckoutResult = [submitCheckout: SubmitCheckoutFunction, status: Status];
+
+interface UseSubmitCheckoutFunctionArgs {
+  readonly checkoutId: string;
+  readonly checkoutBookingId: string;
+  readonly paymentFlowRef: RefObject<PaymentFlowRef>;
+  readonly onError: () => void;
+  readonly onSuccess?: () => void;
+  readonly logger: Logger;
+}
+
+interface UseSubmitCheckoutFunction {
+  (args: UseSubmitCheckoutFunctionArgs): UseSubmitCheckoutResult;
+}
+
+const useSubmitCheckout: UseSubmitCheckoutFunction = ({
+  checkoutId,
+  checkoutBookingId,
+  paymentFlowRef,
+  onError,
+  onSuccess,
+  logger,
+}) => {
+  const queryBus = useQueryBus();
+  const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
+  const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
+  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+  const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
+
+  const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState<Status>("idle");
+
+  const submitCheckout: SubmitCheckoutFunction = useCallback(
+    async ({ paymentFlowPayload, sizeChangeEnabled }) => {
+      try {
+        sizeChangeEnabled && (await blockCheckoutBooking());
+      } catch (error) {
+        return;
+      }
+
+      const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
+        viewCheckoutBookingById({ checkoutBookingId }),
+      );
+
+      if (checkoutBooking?.isExpired) {
+        setCheckoutBookingExpired(true);
+        return;
+      }
+
+      paymentFlowRef.current?.startLegacyBoxCheckout(
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        paymentFlowPayload,
+        async ({ status, toaster, final }: LegacyBoxCheckout) => {
+          setStartLegacyBoxCheckoutStatus("loading");
+
+          if (final) {
+            if (status === ChargeStatus.EXECUTED) {
+              setStartLegacyBoxCheckoutStatus("success");
+              await submitCheckoutCommand();
+              onSuccess?.();
+            } else {
+              createNotification({
+                level: NotificationLevel.ERROR,
+                bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+              });
+              setStartLegacyBoxCheckoutStatus("error");
+            }
+          }
+        },
+      );
+    },
+    [
+      queryBus,
+      checkoutBookingId,
+      paymentFlowRef,
+      blockCheckoutBooking,
+      submitCheckoutCommand,
+      onSuccess,
+      createNotification,
+    ],
+  );
+
+  const status: Status = 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
+    ) {
+      onError();
+      return "error";
+    }
+
+    return "idle";
+  }, [
+    blockCheckoutBookingStatus,
+    startLegacyBoxCheckoutStatus,
+    submitCheckoutCommandStatus,
+    checkoutBookingExpired,
+    onError,
+  ]);
+
+  return [submitCheckout, status];
+};
+
+export type { Status, SubmitCheckoutFunction };
+export { useSubmitCheckout };

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

@@ -50,7 +50,6 @@ 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",

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

@@ -7,8 +7,11 @@ import { generatePath } from "react-router-native";
 import { createMemoryRouter, RouterProvider } from "react-router-native";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Logger } from "@lookiero/sty-psp-logging";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
 import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { Customer } from "../../../projection/customer/customer";
+import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
 import { checkout } from "../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -91,7 +94,12 @@ const renderCheckoutMiddleware = ({
       {
         path: "/*",
         element: (
-          <StaticInfoProvider basePath="" customer={} kameleoon={}>
+          <StaticInfoProvider
+            basePath=""
+            customer={{} as Customer}
+            kameleoon={{} as KameleoonEnvironment}
+            tradename={Tradename.LOOKIERO}
+          >
             <CheckoutMiddleware
               customerId={customerId}
               loader={<Text>{loaderText}</Text>}

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

@@ -48,6 +48,12 @@ 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[]>();
@@ -93,7 +99,8 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
           summaryRouteMatchRef.current ||
           summaryTabsRouteMatchRef.current ||
           itemDetailRouteMatchRef.current ||
-          checkoutRouteMatchRef.current
+          checkoutRouteMatchRef.current ||
+          checkoutPaymentRouteMatchRef.current
         )
       ) {
         navigateRef.current(`${basePath}/${Routes.SUMMARY}`, { replace: true });
@@ -120,6 +127,13 @@ 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

@@ -5,13 +5,15 @@ import { I18n } from "@lookiero/i18n-react";
 import { Kameleoon } from "@lookiero/sty-psp-ab-testing";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { Layout } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../../projection/customer/customer";
-import { OrderProjection } from "../../../projection/order/order";
-import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+import { Order } from "../../../projection/order/order";
+import { Subscription } 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";
@@ -23,15 +25,16 @@ import { Routes } from "./routes";
 interface RoutingProps {
   readonly basePath?: string;
   readonly customer: Customer;
-  readonly order: OrderProjection;
-  readonly subscription: SubscriptionProjection;
+  readonly order: Order | undefined;
+  readonly subscription: Subscription | undefined;
   readonly locale: Locale;
   readonly I18n: I18n;
   readonly kameleoon: KameleoonEnvironment;
   readonly layout: Layout;
+  readonly tradename: Tradename;
   readonly getAuthToken: () => Promise<string>;
   readonly onNotAccessible: () => void;
-  readonly onCheckoutFlowSuccess: () => void;
+  readonly onCheckoutSubmitted?: () => void;
   readonly onI18nError?: (err: Error) => void;
   readonly useRedirect: () => Record<string, string>;
   readonly useRoutes: typeof reactRouterUseRoutes;
@@ -46,10 +49,11 @@ const Routing: FC<RoutingProps> = ({
   I18n,
   kameleoon,
   layout,
+  tradename,
   getAuthToken,
   onI18nError,
   onNotAccessible,
-  onCheckoutFlowSuccess,
+  onCheckoutSubmitted,
   useRedirect,
   useRoutes = reactRouterUseRoutes,
 }) => {
@@ -57,7 +61,7 @@ const Routing: FC<RoutingProps> = ({
     {
       path: "",
       element: (
-        <StaticInfoProvider basePath={basePath} customer={customer} kameleoon={kameleoon}>
+        <StaticInfoProvider basePath={basePath} customer={customer} kameleoon={kameleoon} tradename={tradename}>
           <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
             <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
               <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>
@@ -110,16 +114,26 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.CHECKOUT,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Checkout
-                getAuthToken={getAuthToken}
-                layout={layout}
-                order={order}
-                subscription={subscription}
-                useRedirect={useRedirect}
-                onCheckoutFlowSuccess={onCheckoutFlowSuccess}
-              />
+              <Checkout layout={layout} useRedirect={useRedirect}>
+                <Outlet />
+              </Checkout>
             </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,6 +5,7 @@ export enum Routes {
   SUMMARY = "summary",
   SUMMARY_TABS = "tabs/:tab",
   CHECKOUT = "checkout",
+  CHECKOUT_PAYMENT = "payment",
   FEEDBACK = "feedback",
   RETURN = "return/:id",
 }

package/src/infrastructure/ui/views/App.tsx

@@ -1,7 +1,8 @@
-import { PortalHost } from "@gorhom/portal";
+import { PortalProvider } from "@gorhom/portal";
 import React, { FC } from "react";
 import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
 import { Notifications } from "@lookiero/sty-psp-notifications";
 import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
@@ -15,10 +16,17 @@ interface AppProps {
 
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
-    <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-    <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
-    <PortalHost name="Checkout" />
-    {children}
+    <PortalProvider rootHostName="Checkout">
+      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
+      {/*
+        We are using the Aurora's PortalProvider at this level for notifications to work properly.
+
+        PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
+        notifications would be displayed in a layer below Portal's one (not visible).
+      */}
+      <AuroraPortalProvider>{children}</AuroraPortalProvider>
+    </PortalProvider>
   </SafeAreaProvider>
 );