@lookiero/checkout 10.0.1 → 11.0.0

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

@@ -0,0 +1,203 @@
+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 } 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 [submitCheckout, submitCheckoutStatus] = useSubmitCheckout({
+    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 onPaymentSuccess = useCallback(async () => {
+    setStartLegacyBoxCheckoutStatus("success");
+
+    await submitCheckout();
+
+    createNotification({
+      bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+      level: NotificationLevel.SUCCESS,
+    });
+
+    trackCheckout();
+    onSuccess();
+  }, [createNotification, onSuccess, submitCheckout, trackCheckout]);
+  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" ||
+      submitCheckoutStatus === CommandStatus.LOADING
+    ) {
+      return "loading";
+    }
+
+    if (
+      blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
+      startLegacyBoxCheckoutStatus === "success" &&
+      submitCheckoutStatus === CommandStatus.SUCCESS
+    ) {
+      return "success";
+    }
+
+    if (
+      blockCheckoutBookingStatus === CommandStatus.ERROR ||
+      startLegacyBoxCheckoutStatus === "error" ||
+      submitCheckoutStatus === CommandStatus.ERROR ||
+      checkoutBookingExpired
+    ) {
+      return "error";
+    }
+
+    return "idle";
+  }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutStatus, checkoutBookingExpired]);
+
+  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/i18n/i18n.ts

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

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

@@ -158,17 +158,6 @@ describe("CheckoutMiddleware component", () => {
     expect(onNotAccessible).toHaveBeenCalled();
   });
 
-  it("payment route should not be directly accessible", async () => {
-    const checkoutMock = checkout({ items: [{ status: CheckoutItemStatus.INITIAL }] });
-    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
-    (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
-
-    const onNotAccessible = jest.fn();
-    renderCheckoutMiddleware({ path: `${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, onNotAccessible });
-
-    expect(onNotAccessible).toHaveBeenCalled();
-  });
-
   it("should redirect to 'feedback' if checkout's status is SUBMITTED", async () => {
     const checkoutMock = checkout({
       status: CheckoutStatus.SUBMITTED,

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

@@ -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

@@ -7,13 +7,12 @@ 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 { 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";
@@ -25,8 +24,8 @@ import { Routes } from "./routes";
 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;
@@ -34,7 +33,7 @@ interface RoutingProps {
   readonly tradename: Tradename;
   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;
@@ -53,7 +52,7 @@ const Routing: FC<RoutingProps> = ({
   getAuthToken,
   onI18nError,
   onNotAccessible,
-  onCheckoutSubmitted,
+  onCheckoutFlowSuccess,
   useRedirect,
   useRoutes = reactRouterUseRoutes,
 }) => {
@@ -114,26 +113,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",
 }

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

@@ -1,8 +1,7 @@
-import { PortalProvider } from "@gorhom/portal";
+import { PortalHost } 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";
@@ -16,17 +15,10 @@ interface AppProps {
 
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
-    <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>
+    <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+    <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
+    <PortalHost name="Checkout" />
+    {children}
   </SafeAreaProvider>
 );
 

package/src/infrastructure/ui/views/checkout/Checkout.style.ts

@@ -30,6 +30,9 @@ const style = StyleSheet.create({
   paymentSelector: {
     marginTop: space6,
   },
+  paymentSelectorNL: {
+    marginBottom: space6,
+  },
   princingWrapper: {
     padding: space6,
   },

package/src/infrastructure/ui/views/checkout/Checkout.test.tsx

@@ -1,10 +1,13 @@
 import { fireEvent } from "@testing-library/react-native";
-import React from "react";
+import React, { ReactNode } from "react";
+import { View } from "react-native";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { OrderProjection } from "../../../../projection/order/order";
+import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { pricing } from "../../../projection/pricing/pricing.mock";
@@ -14,7 +17,9 @@ import { Routes } from "../../routing/routes";
 import { render } from "../../test/render";
 import { Checkout } from "./Checkout";
 
+const getAuthToken = () => Promise.resolve("token");
 const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const basePath = "/checkout";
 const country = Country.ES;
 const segment = Segment.WOMEN;
 const mockCheckout = checkout({
@@ -26,49 +31,29 @@ const mockCheckout = checkout({
     { status: CheckoutItemStatus.REPLACED },
   ],
 });
+const order: OrderProjection = {
+  orderNumber: 12345,
+  isFirstOrder: false,
+  coupon: null,
+};
+const subscription: SubscriptionProjection = "o";
 const mockUseRedirect = jest.fn(() => ({ returnUrl: "https://web2.dev.aws.lookiero.es/user/" }));
 
-jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({
-    customer: { customerId, country, segment },
-    basePath: "",
-  }),
+const mockOnSuccess = jest.fn();
+const mockCheckoutFlow = jest.fn();
+const paymentFlowTestId = "payment-flow";
+const mockPaymentFlowComponent: ReactNode = <View testID={paymentFlowTestId}>PaymentFlow</View>;
+jest.mock("../../hooks/useCheckoutFlow", () => ({
+  useCheckoutFlow: () => [mockCheckoutFlow, QueryStatus.SUCCESS, mockPaymentFlowComponent],
 }));
 
+jest.mock("../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ customer: { customerId, country, segment }, basePath }),
+}));
+// eslint-disable-next-line @typescript-eslint/naming-convention
+jest.mock("./components/paymentInstrument/PaymentInstrument", () => ({ PaymentInstrument: () => null }));
 jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
 jest.mock("../../../projection/pricing/react/useViewPricingByCheckoutId");
-jest.mock("../../hooks/usePaymentInstrumentEvents");
-
-const mockStartLegacyBoxCheckout = jest.fn();
-jest.mock("@lookiero/payments-front", () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { useImperativeHandle, forwardRef } = require("react");
-
-  return {
-    CheckoutStatus: {
-      REJECTED: "REJECTED",
-      ERROR: "ERROR",
-      FULFILLED: "FULFILLED",
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/naming-convention, react/display-name
-    PaymentFlow: forwardRef((params, ref) => {
-      useImperativeHandle(ref, () => ({
-        startLegacyBoxCheckout: mockStartLegacyBoxCheckout,
-      }));
-
-      return null;
-    }),
-    PaymentMethod: {
-      ["GOOGLE_PAY"]: "google_pay",
-    },
-    Section: {
-      ["BOX_CHECKOUT"]: "box-checkout",
-    },
-    PaymentInstrumentSelect: jest.fn(() => <></>),
-  };
-});
 
 const mockTrackPressContinue = jest.fn();
 jest.mock("../../../tracking/useTrackPressContinue", () => ({
@@ -87,13 +72,25 @@ jest.mock("react-router-native", () => ({
   useNavigate: () => mockUseNavigate,
 }));
 
+beforeEach(() => {
+  mockCheckoutFlow.mockClear();
+  mockTrackPressContinue.mockClear();
+  mockTrackPressBack.mockClear();
+});
+
 describe("Checkout view", () => {
   it("renders correctly", async () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
-
     const { findByText, getAllByTestId, getByText, getByTestId } = render(
-      <Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />,
+      <Checkout
+        getAuthToken={getAuthToken}
+        layout={DummyLayout}
+        order={order}
+        subscription={subscription}
+        useRedirect={mockUseRedirect}
+        onCheckoutFlowSuccess={mockOnSuccess}
+      />,
     );
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
@@ -114,15 +111,17 @@ describe("Checkout view", () => {
     expect(getByText(I18nMessages.SUMMARY_FEE)).toBeTruthy();
     expect(getByText("-€10.00")).toBeTruthy();
 
+    expect(getByTestId(paymentFlowTestId)).toBeTruthy();
+
     expect(getByText(I18nMessages.CHECKOUT_PAY_BUTTON)).toBeTruthy();
     fireEvent.press(getByText(I18nMessages.CHECKOUT_PAY_BUTTON));
     expect(mockTrackPressContinue).toHaveBeenCalled();
-    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
+    expect(mockCheckoutFlow).toHaveBeenCalled();
 
     expect(getByTestId("checkout-header")).toBeTruthy();
     fireEvent.press(getByTestId("arrow-left-button-icon"));
     expect(mockTrackPressBack).toHaveBeenCalled();
-    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.SUMMARY}`);
+    expect(mockUseNavigate).toHaveBeenCalledWith(`${basePath}/${Routes.SUMMARY}`);
   });
 
   it("does not render a delivery banner", async () => {
@@ -138,7 +137,16 @@ describe("Checkout view", () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
 
-    const { findByText, queryByText } = render(<Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />);
+    const { findByText, queryByText } = render(
+      <Checkout
+        getAuthToken={getAuthToken}
+        layout={DummyLayout}
+        order={order}
+        subscription={subscription}
+        useRedirect={mockUseRedirect}
+        onCheckoutFlowSuccess={mockOnSuccess}
+      />,
+    );
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();