@lookiero/checkout 10.0.0-beta.2 → 10.0.0-beta.4

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useState } from "react";
 import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import {
   useReturnQuestionFeedback,
   useReturnQuestionFeedbackForReturnQuestion,
@@ -21,7 +22,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   testID,
   portalHostName,
 }) => {
-  const intl = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const [modalVisible, setModalVisible] = useState(false);
   const {
     feedback: feedbackId,
@@ -30,12 +31,12 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
   const feedback = useReturnQuestionFeedback();
   const translate = useCallback(
-    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [intl],
+    (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
+    [formatMessage],
   );
 
   const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
-  const optionText = intl.formatMessage({ id: returnQuestion.translationKey });
+  const optionText = formatMessage({ id: returnQuestion.translationKey });
 
   const hasChildren = Boolean(returnQuestion.children && returnQuestion.children.length > 0);
 

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.tsx

@@ -2,24 +2,24 @@
 import React, { useCallback } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
+import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { I18nMessages } from "../../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 
 const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
-  const titleText = useI18nMessage({ id: returnQuestion.translationKey });
-  const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
+  const unansweredText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_UNANSWERED });
 
   const returnQuestionFeedback = useReturnQuestionFeedback();
 
-  const intl = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const translate = useCallback(
-    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [intl],
+    (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
+    [formatMessage],
   );
   const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(
     " / ",

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.ts

@@ -11,7 +11,6 @@ const style = StyleSheet.create({
     ...Platform.select({
       android: {
         paddingTop: space2,
-        height: "auto",
       },
     }),
   },

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./TextareaReturnQuestionItem.style";
@@ -13,7 +14,7 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
   returnQuestionParent,
   testID,
 }) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
 
   const placeholderText = useMemo(
     () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
@@ -37,6 +38,7 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
             placeholder={placeholderText}
             style={style}
             testID={testID}
+            textAlignVertical="top"
             value={feedback}
             multiline
             onBlur={onBlur}

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 { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, 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({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+  const title = useI18nMessage({ domain: DOMAIN, 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": 2,
+            "paddingTop": 0,
           },
         ]
       }

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 { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, 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({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+  const title = useI18nMessage({ domain: DOMAIN, 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": 2,
+            "paddingTop": 0,
           },
         ]
       }

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

@@ -5,7 +5,7 @@ import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
@@ -35,7 +35,7 @@ interface ItemHeaderProps {
 }
 
 const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) => {
-  const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+  const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
   const itemIndex = items.indexOf(item);
   const isFirstItem = itemIndex === 0;
   const isLastItem = itemIndex === items.length - 1;

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": 2,
+            "paddingTop": 0,
           },
         ]
       }

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

@@ -0,0 +1,302 @@
+import { act, render, renderHook, waitFor } from "@testing-library/react-native";
+import React from "react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { CheckoutBookingProjection } from "../../../projection/checkoutBooking/checkoutBooking";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
+import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { checkout } from "../../projection/checkout/checkout.mock";
+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 { I18nMessages } from "../i18n/i18n";
+import { Routes } from "../routing/routes";
+import { useCheckoutFlow as sut } from "./useCheckoutFlow";
+import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
+import { useQueryBus } from "./useQueryBus";
+
+const getAuthToken = () => Promise.resolve("token");
+const mockCheckout = checkout({
+  items: [
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.RETURNED },
+  ],
+});
+const order: OrderProjection = {
+  orderNumber: 12345,
+  isFirstOrder: false,
+  coupon: null,
+};
+const mockPricing = pricing();
+const subscription: SubscriptionProjection = "o";
+const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const basePath = "/checkout";
+const country = Country.ES;
+const email = "email@example.com";
+const name = "Adèle Léonce Émilie";
+const segment = Segment.WOMEN;
+jest.mock("./useStaticInfo", () => ({
+  useStaticInfo: () => ({ customer: { customerId, country, segment, name, email }, basePath }),
+}));
+
+// const errorChargeStatuses = Object.values(ChargeStatus).filter((status) => status !== ChargeStatus.EXECUTED);
+const mockStartLegacyBoxCheckout = jest.fn();
+jest.mock("@lookiero/payments-front", () => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { useImperativeHandle, forwardRef } = require("react");
+
+  return {
+    // 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;
+    }),
+    Section: {
+      ["BOX_CHECKOUT"]: "box-checkout",
+    },
+  };
+});
+
+jest.mock("@lookiero/sty-psp-logging", () => ({
+  useLogger: () => jest.fn(),
+}));
+
+jest.mock("@lookiero/sty-psp-notifications");
+jest.mock("./useQueryBus");
+jest.mock("../../domain/checkout/react/useSubmitCheckout");
+jest.mock("../../domain/checkoutBooking/react/useBlockCheckoutBooking");
+jest.mock("../../domain/checkout/react/useSubmitCheckout");
+jest.mock("../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId");
+jest.mock("../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId");
+jest.mock("../../projection/pricing/react/useViewPricingByCheckoutId");
+jest.mock("./usePaymentInstrumentEvents");
+
+beforeEach(() => {
+  mockStartLegacyBoxCheckout.mockClear();
+});
+
+describe("useCheckoutFlow custom hook", () => {
+  test("successfully executes 'checkoutFlow'", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnSuccess = 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]);
+    (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"]);
+    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onSuccess }) => {
+      setTimeout(() => onSuccess(), 1000);
+    });
+
+    const { result } = renderHook(() =>
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+    );
+
+    let checkoutFlow: () => void, status, paymentFlowComponent;
+
+    await waitFor(() => {
+      [checkoutFlow, , paymentFlowComponent] = result.current;
+
+      expect(paymentFlowComponent).not.toBeNull();
+    });
+
+    render(<>{paymentFlowComponent}</>);
+
+    await act(async () => {
+      await checkoutFlow();
+    });
+
+    await waitFor(() => {
+      [, status] = result.current;
+
+      expect(status).toBe("success");
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockStartLegacyBoxCheckout).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ...mockPaymentFlowPayload,
+          userInformation: { email, name },
+          returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+        }),
+      );
+      expect(mockSubmitCheckout).toHaveBeenCalled();
+      expect(mockCreateToastNotification).toHaveBeenCalledWith({
+        bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+        level: NotificationLevel.SUCCESS,
+      });
+      expect(mockOnSuccess).toHaveBeenCalled();
+    });
+  });
+
+  test("does not call blockCheckoutBooking if sizeChange is not enabled", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnSuccess = 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]);
+    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
+    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([false, QueryStatus.SUCCESS]);
+    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
+    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, "success"]);
+    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onSuccess }) => {
+      setTimeout(() => onSuccess(), 1000);
+    });
+
+    const { result } = renderHook(() =>
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+    );
+
+    let checkoutFlow: () => void, status, paymentFlowComponent;
+
+    await waitFor(() => {
+      [checkoutFlow, , paymentFlowComponent] = result.current;
+
+      expect(paymentFlowComponent).not.toBeNull();
+    });
+
+    render(<>{paymentFlowComponent}</>);
+
+    await act(async () => {
+      await checkoutFlow();
+    });
+
+    await waitFor(() => {
+      [, status] = result.current;
+
+      expect(status).toBe("success");
+      expect(mockBlockCheckoutBooking).not.toHaveBeenCalled();
+      expect(mockStartLegacyBoxCheckout).toHaveBeenCalledWith(
+        expect.objectContaining({
+          ...mockPaymentFlowPayload,
+          userInformation: { email, name },
+          returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+        }),
+      );
+      expect(mockSubmitCheckout).toHaveBeenCalled();
+      expect(mockCreateToastNotification).toHaveBeenCalledWith({
+        bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+        level: NotificationLevel.SUCCESS,
+      });
+      expect(mockOnSuccess).toHaveBeenCalled();
+    });
+  });
+
+  test("breaks execution and returns error as the status when blockCheckoutBooking fails", async () => {
+    const mockBlockCheckoutBooking = jest.fn().mockRejectedValue("error");
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnSuccess = 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.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"]);
+    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onSuccess }) => {
+      setTimeout(() => onSuccess(), 1000);
+    });
+
+    const { result } = renderHook(() =>
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+    );
+
+    let checkoutFlow: () => void, status, paymentFlowComponent;
+
+    await waitFor(() => {
+      [checkoutFlow, , paymentFlowComponent] = result.current;
+
+      expect(paymentFlowComponent).not.toBeNull();
+    });
+
+    render(<>{paymentFlowComponent}</>);
+
+    await act(async () => {
+      await checkoutFlow();
+    });
+
+    await waitFor(() => {
+      [, status] = result.current;
+
+      expect(status).toBe("error");
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockStartLegacyBoxCheckout).not.toHaveBeenCalled();
+      expect(mockSubmitCheckout).not.toHaveBeenCalled();
+      expect(mockCreateToastNotification).not.toHaveBeenCalled();
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+    });
+  });
+
+  test("shows a notification and returns error as the status when payment fails", async () => {
+    const mockBlockCheckoutBooking = jest.fn();
+    const mockSubmitCheckout = jest.fn();
+    const mockCreateToastNotification = jest.fn();
+    const mockOnSuccess = 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]);
+    (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"]);
+    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onError }) => {
+      setTimeout(() => onError({ metadata: null }), 1000);
+    });
+
+    const { result } = renderHook(() =>
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+    );
+
+    let checkoutFlow: () => void, status, paymentFlowComponent;
+
+    await waitFor(() => {
+      [checkoutFlow, , paymentFlowComponent] = result.current;
+
+      expect(paymentFlowComponent).not.toBeNull();
+    });
+
+    render(<>{paymentFlowComponent}</>);
+
+    await act(async () => {
+      await checkoutFlow();
+    });
+
+    await waitFor(() => {
+      [, status] = result.current;
+
+      expect(status).toBe("error");
+      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
+      expect(mockStartLegacyBoxCheckout).toHaveBeenCalled();
+      expect(mockSubmitCheckout).not.toHaveBeenCalled();
+      expect(mockCreateToastNotification).toHaveBeenCalledWith({
+        bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+        level: NotificationLevel.ERROR,
+      });
+      expect(mockOnSuccess).not.toHaveBeenCalled();
+    });
+  });
+});

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

@@ -13,7 +13,7 @@ import {
 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 { 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";
@@ -71,7 +71,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
     checkoutId: checkoutProjection?.id,
     queryOptions: { refetchOnMount: true },
   });
-  const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({
+  const [submitCheckout, submitCheckoutStatus] = useSubmitCheckout({
     checkoutId: checkoutProjection?.id,
     logger,
   });
@@ -120,7 +120,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
     paymentFlowRef.current?.startLegacyBoxCheckout({
       ...paymentFlowPayload,
       userInformation: { email, name },
-      returnUrl: `${basePath}/${Routes.CHECKOUT}?foo=bar`,
+      returnUrl: `${basePath}/${Routes.CHECKOUT}`,
     } as unknown as LegacyBoxCheckoutStrategyPayload);
   }, [
     checkoutProjection?.checkoutBookingId,
@@ -136,7 +136,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
   const onPaymentSuccess = useCallback(async () => {
     setStartLegacyBoxCheckoutStatus("success");
 
-    await submitCheckoutCommand();
+    await submitCheckout();
 
     createNotification({
       bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
@@ -145,7 +145,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
 
     trackCheckout();
     onSuccess();
-  }, [createNotification, onSuccess, submitCheckoutCommand, trackCheckout]);
+  }, [createNotification, onSuccess, submitCheckout, trackCheckout]);
   const onPaymentError = useCallback(
     (payload: PaymentPayload) => {
       setStartLegacyBoxCheckoutStatus("error");
@@ -163,7 +163,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
     if (
       blockCheckoutBookingStatus === CommandStatus.LOADING ||
       startLegacyBoxCheckoutStatus === "loading" ||
-      submitCheckoutCommandStatus === CommandStatus.LOADING
+      submitCheckoutStatus === CommandStatus.LOADING
     ) {
       return "loading";
     }
@@ -171,7 +171,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
     if (
       blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
       startLegacyBoxCheckoutStatus === "success" &&
-      submitCheckoutCommandStatus === CommandStatus.SUCCESS
+      submitCheckoutStatus === CommandStatus.SUCCESS
     ) {
       return "success";
     }
@@ -179,14 +179,14 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
     if (
       blockCheckoutBookingStatus === CommandStatus.ERROR ||
       startLegacyBoxCheckoutStatus === "error" ||
-      submitCheckoutCommandStatus === CommandStatus.ERROR ||
+      submitCheckoutStatus === CommandStatus.ERROR ||
       checkoutBookingExpired
     ) {
       return "error";
     }
 
     return "idle";
-  }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, checkoutBookingExpired]);
+  }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutStatus, checkoutBookingExpired]);
 
   const paymentFlow = useMemo(
     () => (authToken ? <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} /> : null),

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

@@ -1,3 +1,5 @@
+const DOMAIN = "CheckoutI18n";
+
 // TODO: deprecated?
 const COLOR_I18N_PREFIX = "catalog.color.";
 
@@ -59,4 +61,4 @@ enum I18nMessages {
   CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired",
 }
 
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };

package/src/infrastructure/ui/test/render.tsx

@@ -1,10 +1,13 @@
 import { render, RenderAPI } from "@testing-library/react-native";
 import { mock } from "jest-mock-extended";
 import React, { FC, Fragment, ReactElement } from "react";
-import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
+import { createI18nProvider } from "@lookiero/i18n-react";
 import { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
 import { Logger, LoggerProvider } from "@lookiero/sty-psp-logging";
+import { DOMAIN } from "../i18n/i18n";
+
+const I18nProvider = createI18nProvider({ domain: DOMAIN });
 
 interface RenderArgs {
   readonly locale?: string;
@@ -23,11 +26,11 @@ const renderWrapper: RenderWrapperFunction =
   // eslint-disable-next-line react/display-name, react/prop-types
   ({ children }) => (
     <Aurora>
-      <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
+      <I18nProvider locale={locale as string} messages={messages} onError={() => void 0}>
         <LoggerProvider logger={logger}>
           <Wrapper>{children}</Wrapper>
         </LoggerProvider>
-      </IntlProvider>
+      </I18nProvider>
     </Aurora>
   );
 

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

@@ -5,6 +5,7 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Notifications } from "@lookiero/sty-psp-notifications";
 import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { DOMAIN } from "../i18n/i18n";
 
 const { colorBgBase } = theme();
 
@@ -15,7 +16,7 @@ interface AppProps {
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
     <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-    <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
+    <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
     <PortalHost name="Checkout" />
     {children}
   </SafeAreaProvider>