@lookiero/checkout 10.0.0-beta.3 → 10.0.0

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

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

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

@@ -1,13 +1,10 @@
 import { fireEvent } from "@testing-library/react-native";
-import React, { ReactNode } from "react";
-import { View } from "react-native";
+import React from "react";
 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";
@@ -17,9 +14,7 @@ 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({
@@ -31,29 +26,49 @@ 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/" }));
 
-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 }),
+  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", () => ({
@@ -72,25 +87,13 @@ 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
-        getAuthToken={getAuthToken}
-        layout={DummyLayout}
-        order={order}
-        subscription={subscription}
-        useRedirect={mockUseRedirect}
-        onCheckoutFlowSuccess={mockOnSuccess}
-      />,
+      <Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />,
     );
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
@@ -111,17 +114,15 @@ 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(mockCheckoutFlow).toHaveBeenCalled();
+    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
 
     expect(getByTestId("checkout-header")).toBeTruthy();
     fireEvent.press(getByTestId("arrow-left-button-icon"));
     expect(mockTrackPressBack).toHaveBeenCalled();
-    expect(mockUseNavigate).toHaveBeenCalledWith(`${basePath}/${Routes.SUMMARY}`);
+    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.SUMMARY}`);
   });
 
   it("does not render a delivery banner", async () => {
@@ -137,16 +138,7 @@ describe("Checkout view", () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
 
-    const { findByText, queryByText } = render(
-      <Checkout
-        getAuthToken={getAuthToken}
-        layout={DummyLayout}
-        order={order}
-        subscription={subscription}
-        useRedirect={mockUseRedirect}
-        onCheckoutFlowSuccess={mockOnSuccess}
-      />,
-    );
+    const { findByText, queryByText } = render(<Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />);
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
 

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

@@ -1,14 +1,11 @@
-import React, { FC, useCallback, useMemo, useState } from "react";
+import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { Country } from "@lookiero/sty-psp-locale";
 import { Layout as UiLayout, Sticky } 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 { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
@@ -17,7 +14,6 @@ import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
-import { useCheckoutFlow } from "../../hooks/useCheckoutFlow";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
@@ -28,22 +24,12 @@ import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 
 interface CheckoutProps {
+  readonly children?: ReactNode;
   readonly layout: UiLayout;
-  readonly order: OrderProjection;
-  readonly subscription: SubscriptionProjection;
-  readonly getAuthToken: () => Promise<string>;
-  readonly onCheckoutFlowSuccess: () => void;
   readonly useRedirect: () => Record<string, string>;
 }
 
-const Checkout: FC<CheckoutProps> = ({
-  layout: Layout,
-  order,
-  subscription,
-  getAuthToken,
-  useRedirect,
-  onCheckoutFlowSuccess,
-}) => {
+const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect }) => {
   const {
     customer: { customerId, country, segment },
     basePath,
@@ -57,14 +43,6 @@ const Checkout: FC<CheckoutProps> = ({
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
 
-  const [checkoutFlow, checkoutFlowStatus, paymentFlowComponent] = useCheckoutFlow({
-    checkout,
-    order,
-    subscription,
-    getAuthToken,
-    onSuccess: onCheckoutFlowSuccess,
-  });
-
   useTrackPageView({
     page: TrackingPage.CHECKOUT,
     country,
@@ -73,16 +51,17 @@ const Checkout: FC<CheckoutProps> = ({
   });
 
   const navigate = useNavigate();
+
   const trackPressContinue = useTrackPressContinue({
     page: TrackingPage.CHECKOUT,
     country,
     segment,
     checkoutId: checkout?.id,
   });
-  const handleOnSubmit = useCallback(async () => {
+  const handleOnSubmit = useCallback(() => {
     trackPressContinue();
-    await checkoutFlow();
-  }, [checkoutFlow, trackPressContinue]);
+    navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
+  }, [basePath, navigate, trackPressContinue]);
 
   const checkoutItemsKept = useMemo(
     () =>
@@ -136,12 +115,6 @@ const Checkout: FC<CheckoutProps> = ({
         >
           <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
             <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
-              {country === Country.NL && (
-                <View style={style.paymentSelectorNL}>
-                  <PaymentInstrument useRedirect={useRedirect} />
-                </View>
-              )}
-
               <Text level={3} style={style.title} heading>
                 {titleText}
               </Text>
@@ -165,11 +138,9 @@ const Checkout: FC<CheckoutProps> = ({
                 </View>
               ))}
 
-              {country !== Country.NL && (
-                <View style={style.paymentSelector}>
-                  <PaymentInstrument useRedirect={useRedirect} />
-                </View>
-              )}
+              <View style={style.paymentSelector}>
+                <PaymentInstrument useRedirect={useRedirect} />
+              </View>
             </View>
           </Box>
 
@@ -179,11 +150,7 @@ const Checkout: FC<CheckoutProps> = ({
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
                 {screen.L ? (
-                  <Button
-                    busy={checkoutFlowStatus === "loading"}
-                    testID="confirm-checkout-button"
-                    onPress={handleOnSubmit}
-                  >
+                  <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
                     {submitButtonText}
                   </Button>
                 ) : null}
@@ -196,19 +163,14 @@ const Checkout: FC<CheckoutProps> = ({
       {pricing && !screen.L ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
-            <Button
-              busy={checkoutFlowStatus === "loading"}
-              testID="confirm-checkout-button"
-              small
-              onPress={handleOnSubmit}
-            >
+            <Button testID="confirm-checkout-button" small onPress={handleOnSubmit}>
               {submitButtonText}
             </Button>
           </Body>
         </Sticky>
       ) : null}
 
-      {paymentFlowComponent}
+      {children}
     </Layout>
   );
 };

package/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.test.tsx

@@ -0,0 +1,134 @@
+import { waitFor } from "@testing-library/react-native";
+import React from "react";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { checkout } from "../../../../../projection/checkout/checkout.mock";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { paymentFlowPayload as mockPaymentFlowPayload } from "../../../../../projection/payment/paymentFlowPayload.mock";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { pricing } from "../../../../../projection/pricing/pricing.mock";
+import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
+import { Routes } from "../../../../routing/routes";
+import { render } from "../../../../test/render";
+import { CheckoutPaymentModal } from "./CheckoutPaymentModal";
+
+const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const country = Country.ES;
+const segment = Segment.WOMEN;
+const orderNumber = 3691625;
+const isFirstOrder = false;
+const getAuthToken = () => Promise.resolve("token");
+const mockCheckout = checkout({
+  items: [
+    { status: CheckoutItemStatus.RETURNED },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.REPLACED },
+  ],
+});
+const mockPricing = pricing();
+
+jest.mock("../../../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({
+    customer: { customerId, country, segment },
+    basePath: "",
+  }),
+}));
+
+jest.mock("../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
+jest.mock("../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId");
+jest.mock("../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId");
+jest.mock("../../../../../projection/pricing/react/useViewPricingByCheckoutId");
+jest.mock("../../../../hooks/useSubmitCheckout");
+jest.mock("../../../../../tracking/useTrackCheckout");
+
+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 mockUseNavigate = jest.fn();
+jest.mock("react-router-native", () => ({
+  ...jest.requireActual("react-router-native"),
+  useNavigate: () => mockUseNavigate,
+}));
+
+describe("CheckoutPaymentModal component", () => {
+  it("renders correctly", async () => {
+    const mockSubmitCheckout = jest.fn();
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
+    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
+    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, "success"]);
+
+    await waitFor(() => {
+      render(
+        <CheckoutPaymentModal
+          coupon={null}
+          getAuthToken={getAuthToken}
+          isFirstOrder={isFirstOrder}
+          orderNumber={orderNumber}
+          subscription="b"
+        />,
+      );
+      expect(mockSubmitCheckout).toHaveBeenCalled();
+    });
+  });
+
+  it("navigates back to /checkout when checkout-flow fails", async () => {
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
+    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
+    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockImplementation(({ onError }) => {
+      const submitCheckout = () => onError();
+
+      return [submitCheckout, "error"];
+    });
+
+    await waitFor(() => {
+      render(
+        <CheckoutPaymentModal
+          coupon={null}
+          getAuthToken={getAuthToken}
+          isFirstOrder={isFirstOrder}
+          orderNumber={orderNumber}
+          subscription="b"
+        />,
+      );
+      expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}`, { replace: true });
+    });
+  });
+});

package/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.tsx

@@ -0,0 +1,124 @@
+import React, { FC, useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-native";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { PaymentFlow, PaymentFlowRef } from "@lookiero/payments-front";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { Currency } from "../../../../../../domain/checkoutItem/model/currency";
+import { Subscription } from "../../../../../../projection/subscription/subscription";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../../../tracking/tracking";
+import { useTrackCheckout } from "../../../../../tracking/useTrackCheckout";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
+import { Routes } from "../../../../routing/routes";
+
+interface CheckoutPaymentModalProps {
+  readonly coupon: string | null;
+  readonly orderNumber: number;
+  readonly isFirstOrder: boolean;
+  readonly subscription: Subscription;
+  readonly getAuthToken: () => Promise<string>;
+  readonly onCheckoutSubmitted?: () => void;
+}
+
+const CheckoutPaymentModal: FC<CheckoutPaymentModalProps> = ({
+  coupon,
+  isFirstOrder,
+  subscription,
+  orderNumber,
+  getAuthToken,
+  onCheckoutSubmitted,
+}) => {
+  const paymentFlowRef = useRef<PaymentFlowRef>(null);
+  const logger = useLogger();
+  const {
+    customer: { customerId, country, segment },
+    basePath,
+  } = useStaticInfo();
+
+  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+    checkoutId: checkout?.id as string,
+  });
+  const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id as string });
+  const [pricing] = useViewPricingByCheckoutId({
+    checkoutId: checkout?.id as string,
+    queryOptions: { refetchOnMount: true },
+  });
+
+  const [authToken, setAuthToken] = useState<string>();
+  useEffect(() => {
+    const loadAuthToken = async () => setAuthToken(await getAuthToken());
+    loadAuthToken();
+  }, [getAuthToken]);
+
+  const navigate = useNavigate();
+  const trackCheckout = useTrackCheckout({
+    page: TrackingPage.CHECKOUT,
+    checkoutId: checkout?.id as string,
+    country,
+    segment,
+  });
+
+  const handleOnSubmitCheckoutError = useCallback(
+    () => navigate(`${basePath}/${Routes.CHECKOUT}`, { replace: true }),
+    [basePath, navigate],
+  );
+  const handleOnSubmitCheckoutSuccess = useCallback(() => {
+    const checkoutItemsKept = checkout?.items.filter(
+      (checkoutItem) =>
+        checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED,
+    );
+    const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
+
+    trackCheckout({
+      totalCheckoutItemsKept: checkoutItemsKept?.length || 0,
+      pendingToPay: (pricing?.pendingToPay.amount as number) / 100,
+      coupon,
+      currencyCode: pricing?.pendingToPay.currency as Currency,
+      isFirstOrder,
+      orderNumber,
+      totalReplacedFor,
+      subscription,
+      userId: customerId,
+    });
+    onCheckoutSubmitted?.();
+  }, [
+    checkout?.items,
+    coupon,
+    customerId,
+    isFirstOrder,
+    onCheckoutSubmitted,
+    orderNumber,
+    pricing?.pendingToPay.amount,
+    pricing?.pendingToPay.currency,
+    subscription,
+    trackCheckout,
+  ]);
+  const [submitCheckout] = useSubmitCheckout({
+    checkoutId: checkout?.id as string,
+    checkoutBookingId: checkout?.checkoutBookingId as string,
+    paymentFlowRef,
+    onError: handleOnSubmitCheckoutError,
+    onSuccess: handleOnSubmitCheckoutSuccess,
+    logger,
+  });
+  useEffect(() => {
+    if (paymentFlowPayload && sizeChangeEnabled !== undefined && pricing !== undefined) {
+      submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
+    }
+  }, [paymentFlowPayload, pricing, sizeChangeEnabled, submitCheckout]);
+
+  const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+  const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
+
+  if (!dependenciesLoaded) return null;
+
+  return <PaymentFlow ref={paymentFlowRef} token={authToken} />;
+};
+
+export { CheckoutPaymentModal };

package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx

@@ -1,24 +1,24 @@
-import React, { FC } from "react";
+import React, { FC, useRef } from "react";
 import { PaymentInstrumentSelect, Section } from "@lookiero/payments-front";
-import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
 
 interface PaymentInstrumentProps {
   readonly useRedirect: () => Record<string, string>;
 }
 const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
+  const paymentInstrumentSelectRef = useRef(null);
   const { returnUrl } = useRedirect();
-  const { customer } = useStaticInfo();
+  const logger = useLogger();
+
+  usePaymentInstrumentEvents({ logger });
 
   return (
     <PaymentInstrumentSelect
+      ref={paymentInstrumentSelectRef}
       beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
       hasError={false}
       section={Section.BOX_CHECKOUT}
-      userInformation={{
-        email: customer.email,
-        name: customer.name,
-      }}
-      showSingleUsePaymentMethods
     />
   );
 };

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.test.tsx

@@ -52,6 +52,12 @@ jest.mock("../../../../../tracking/useTrackReturnItem", () => ({
   useTrackReturnItem: () => mockReturnItem,
 }));
 
+jest.mock("../../../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({
+    basePath: "",
+  }),
+}));
+
 describe("Return", () => {
   test("renders correctly", async () => {
     (useListReturnQuestionsByCheckoutItemId as jest.Mock).mockReturnValue([mockReturnQuestions, QueryStatus.SUCCESS]);

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -29,6 +29,7 @@ interface SummaryProps {
 const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
   const {
     customer: { customerId, country, segment },
+    basePath,
   } = useStaticInfo();
   const [pricingCollapsed, setPricingCollapsed] = useState(true);
   const [pricingHeight, setPricingHeight] = useState(0);
@@ -42,7 +43,6 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
   const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
 
   const navigate = useNavigate();
-  const { basePath } = useStaticInfo();
 
   const match = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
   const tab = match?.params.tab;

package/src/infrastructure/ui/views/summaryTabs/SummaryTabs.test.tsx

@@ -21,7 +21,10 @@ const checkoutMock = checkout({
 });
 
 jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+  useStaticInfo: () => ({
+    customer: { customerId, country, segment },
+    basePath: "",
+  }),
 }));
 
 const mockUseNavigate = jest.fn();

package/src/projection/customer/customer.ts

@@ -5,8 +5,6 @@ interface Customer {
   readonly customerId: string;
   readonly country: Country;
   readonly segment: Segment;
-  readonly name: string;
-  readonly email: string;
 }
 
 export type { Customer };

package/src/projection/order/order.ts

@@ -4,4 +4,4 @@ interface Order {
   readonly coupon: string | null;
 }
 
-export type { Order as OrderProjection };
+export type { Order };

package/src/projection/subscription/subscription.ts

@@ -1,3 +1,3 @@
 type Subscription = "o" | "m" | "b" | "q";
 
-export type { Subscription as SubscriptionProjection };
+export type { Subscription };