@lookiero/checkout 10.0.1 → 11.0.0

package/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.ts

@@ -23,7 +23,7 @@ const DEFAULT_QUERY_OPTIONS: QueryOptions = {
 };
 
 interface UseViewPricingByCheckoutIdFunctionArgs {
-  readonly checkoutId: string;
+  readonly checkoutId: string | undefined;
   readonly queryOptions?: QueryOptions;
 }
 
@@ -36,7 +36,7 @@ const useViewPricingByCheckoutId: UseViewPricingByCheckoutIdFunction = ({
   queryOptions = DEFAULT_QUERY_OPTIONS,
 }) =>
   useQuery({
-    query: viewPricingByCheckoutId({ checkoutId }),
+    query: viewPricingByCheckoutId({ checkoutId: checkoutId as string }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
     options: {
@@ -44,6 +44,7 @@ const useViewPricingByCheckoutId: UseViewPricingByCheckoutIdFunction = ({
       staleTime: Infinity,
       retry: false,
       refetchOnWindowFocus: false,
+      enabled: Boolean(checkoutId),
     },
   });
 

package/src/infrastructure/tracking/tracking.ts

@@ -2,7 +2,7 @@ import { BaseTrackingEvent, TrackingEventCategory } from "@lookiero/sty-psp-trac
 import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
 import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
-import { Subscription } from "../../projection/subscription/subscription";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 
 const PROJECT = "checkout";
 
@@ -121,7 +121,7 @@ interface CheckoutTrackingEvent
       readonly actionField: {
         readonly items: number;
         readonly currencyCode: Currency;
-        readonly subscription: Subscription;
+        readonly subscription: SubscriptionProjection;
         readonly coupon: string | null;
         readonly orderId: number;
         readonly value: number;

package/src/infrastructure/tracking/useTrackCheckout.test.tsx

@@ -2,9 +2,15 @@ import { renderHook } from "@testing-library/react-native";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
+import { CheckoutStatus } from "../../domain/checkout/model/checkout";
+import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
+import { CheckoutProjection } from "../../projection/checkout/checkout";
+import { OrderProjection } from "../../projection/order/order";
+import { PricingProjection } from "../../projection/pricing/pricing";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
+import { checkout as checkoutMock } from "../projection/checkout/checkout.mock";
 import { CheckoutTrackingEvent, TrackingEventName, TrackingEventCategory } from "./tracking";
-import { TrackingPage } from "./tracking";
 import { useTrackCheckout as sut } from "./useTrackCheckout";
 
 const mockEmitUserEvent = jest.fn();
@@ -12,6 +18,34 @@ jest.mock("@lookiero/sty-psp-tracking");
 
 const country = Country.ES;
 const segment = Segment.WOMEN;
+const userId = "80c38da1-7091-483d-a2ad-8f1642211e80";
+const order: OrderProjection = {
+  coupon: null,
+  isFirstOrder: false,
+  orderNumber: 3691625,
+};
+const checkoutItemsReturned = 1;
+const checkoutItemsKept = 2;
+const checkoutItemsReplaced = 2;
+const checkout: CheckoutProjection = checkoutMock({
+  id: "c513ebc8-df68-4f47-b899-8ec0ced84ca8",
+  status: CheckoutStatus.STARTED,
+  items: [
+    ...new Array(checkoutItemsReturned).fill(1).map(() => ({ status: CheckoutItemStatus.RETURNED })),
+    ...new Array(checkoutItemsKept).fill(1).map(() => ({ status: CheckoutItemStatus.KEPT })),
+    ...new Array(checkoutItemsReplaced).fill(1).map(() => ({
+      status: CheckoutItemStatus.REPLACED,
+      replacedFor: { id: "26184353-c4bd-467a-bfd5-c9f688956058" },
+    })),
+  ],
+});
+const pricing: PricingProjection = {
+  pendingToPay: {
+    amount: 16691,
+    currency: Currency.EUR,
+  },
+} as PricingProjection;
+const subscription: SubscriptionProjection = "b";
 
 const event: CheckoutTrackingEvent = {
   event: TrackingEventName.CHECKOUT,
@@ -19,19 +53,19 @@ const event: CheckoutTrackingEvent = {
   section: "checkout_checkout",
   store: country,
   segment,
-  checkoutId: "c513ebc8-df68-4f47-b899-8ec0ced84ca8",
-  userId: "80c38da1-7091-483d-a2ad-8f1642211e80",
-  sizeChanges: 0,
-  isFirstOrder: false,
+  checkoutId: checkout.id,
+  userId,
+  sizeChanges: checkoutItemsReplaced,
+  isFirstOrder: order.isFirstOrder,
   ecommerce: {
     checkout: {
       actionField: {
-        items: 5,
-        currencyCode: Currency.EUR,
-        subscription: "b",
-        coupon: null,
-        orderId: 3691625,
-        value: 166.91,
+        items: checkoutItemsKept + checkoutItemsReplaced,
+        currencyCode: pricing.pendingToPay.currency,
+        subscription,
+        coupon: order.coupon,
+        orderId: order.orderNumber,
+        value: pricing.pendingToPay.amount / 100,
       },
     },
   },
@@ -43,24 +77,17 @@ describe("useTrackCheckout custom hook", () => {
 
     const { result } = renderHook(() =>
       sut({
-        page: TrackingPage.CHECKOUT,
+        order,
+        checkout,
+        pricing,
+        subscription,
+        userId,
         country,
         segment,
-        checkoutId: "c513ebc8-df68-4f47-b899-8ec0ced84ca8",
       }),
     );
 
-    result.current({
-      totalCheckoutItemsKept: 5,
-      pendingToPay: 166.91,
-      coupon: null,
-      currencyCode: Currency.EUR,
-      isFirstOrder: false,
-      orderNumber: 3691625,
-      totalReplacedFor: 0,
-      subscription: "b",
-      userId: "80c38da1-7091-483d-a2ad-8f1642211e80",
-    });
+    result.current();
 
     expect(mockEmitUserEvent).toHaveBeenCalledWith(event);
   });

package/src/infrastructure/tracking/useTrackCheckout.ts

@@ -1,84 +1,94 @@
 import { useCallback } from "react";
+import invariant from "tiny-invariant";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
+import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
-import { Subscription } from "../../projection/subscription/subscription";
+import { CheckoutProjection } from "../../projection/checkout/checkout";
+import { OrderProjection } from "../../projection/order/order";
+import { PricingProjection } from "../../projection/pricing/pricing";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 import { PROJECT, TrackingPage } from "./tracking";
 import { CheckoutTrackingEvent, TrackingEventName, TrackingEventCategory } from "./tracking";
 
-interface TrackCheckoutFunctionArgs {
-  readonly userId: string;
-  readonly totalReplacedFor: number;
-  readonly isFirstOrder: boolean;
-  readonly totalCheckoutItemsKept: number;
-  readonly currencyCode: Currency;
-  readonly subscription: Subscription;
-  readonly coupon: string | null;
-  readonly orderNumber: number;
-  readonly pendingToPay: number;
-}
 interface TrackCheckoutFunction {
-  (args: TrackCheckoutFunctionArgs): void;
+  (): void;
 }
 
 interface UseTrackCheckoutFunctionArgs {
-  readonly page: TrackingPage;
+  readonly order: OrderProjection;
+  readonly checkout: CheckoutProjection | undefined;
+  readonly pricing: PricingProjection | undefined;
+  readonly subscription: SubscriptionProjection;
+  readonly userId: string;
   readonly country: Country;
-  readonly checkoutId: string | undefined;
   readonly segment: Segment;
 }
+
 interface UseTrackCheckoutFunction {
   (args: UseTrackCheckoutFunctionArgs): TrackCheckoutFunction;
 }
 
-const useTrackCheckout: UseTrackCheckoutFunction = ({ page, country, checkoutId, segment }) => {
+const useTrackCheckout: UseTrackCheckoutFunction = ({
+  order,
+  checkout,
+  pricing,
+  subscription,
+  segment,
+  country,
+  userId,
+}) => {
   const emitUserEvent = useEmitUserEvent<CheckoutTrackingEvent>();
+  const { coupon, isFirstOrder, orderNumber } = order;
 
-  const trackCheckout: TrackCheckoutFunction = useCallback(
-    ({
-      coupon,
-      currencyCode,
-      isFirstOrder,
-      orderNumber,
-      pendingToPay,
-      subscription,
-      totalCheckoutItemsKept,
-      totalReplacedFor,
-      userId,
-    }) => {
-      if (!checkoutId) {
-        return;
-      }
+  const trackCheckout: TrackCheckoutFunction = useCallback(() => {
+    invariant(checkout, "Checkout must be defined to track checkout");
+
+    const checkoutItemsKept = checkout.items.filter(
+      (checkoutItem) =>
+        checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED,
+    );
+    const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
 
-      const checkoutTrackingEvent: CheckoutTrackingEvent = {
-        event: TrackingEventName.CHECKOUT,
-        eventCategory: TrackingEventCategory.ECOMMERCE,
-        section: `${PROJECT}_${page}`,
-        store: country,
-        segment,
-        checkoutId,
-        userId,
-        sizeChanges: totalReplacedFor,
-        isFirstOrder,
-        ecommerce: {
-          checkout: {
-            actionField: {
-              items: totalCheckoutItemsKept,
-              currencyCode,
-              subscription,
-              coupon,
-              orderId: orderNumber,
-              value: pendingToPay,
-            },
+    const checkoutTrackingEvent: CheckoutTrackingEvent = {
+      event: TrackingEventName.CHECKOUT,
+      eventCategory: TrackingEventCategory.ECOMMERCE,
+      section: `${PROJECT}_${TrackingPage.CHECKOUT}`,
+      store: country,
+      segment,
+      checkoutId: checkout.id,
+      userId,
+      sizeChanges: totalReplacedFor,
+      isFirstOrder,
+      ecommerce: {
+        checkout: {
+          actionField: {
+            items: checkoutItemsKept.length || 0,
+            currencyCode: pricing?.pendingToPay.currency as Currency,
+            subscription,
+            coupon,
+            orderId: orderNumber,
+            value: (pricing?.pendingToPay.amount as number) / 100,
           },
         },
-      };
+      },
+    };
 
-      emitUserEvent(checkoutTrackingEvent);
-    },
-    [checkoutId, country, emitUserEvent, page, segment],
-  );
+    emitUserEvent(checkoutTrackingEvent);
+  }, [
+    checkout,
+    country,
+    coupon,
+    emitUserEvent,
+    isFirstOrder,
+    orderNumber,
+    pricing?.pendingToPay.amount,
+    pricing?.pendingToPay.currency,
+    segment,
+    subscription,
+    userId,
+  ]);
 
   return trackCheckout;
 };

package/src/infrastructure/ui/Root.tsx

@@ -10,8 +10,8 @@ import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLogger
 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 { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
@@ -32,14 +32,14 @@ interface RootFunction {
 
 interface RootProps {
   readonly basePath: string;
-  readonly locale?: Locale;
+  readonly locale: Locale;
   readonly customer: Customer;
-  readonly order: Order | undefined;
-  readonly subscription: Subscription | undefined;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
   readonly layout: Layout;
   readonly tradename: Tradename;
   readonly onNotAccessible: () => void;
-  readonly onCheckoutSubmitted?: () => void;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly useRedirect: () => Record<string, string>;
   readonly useRoutes?: typeof reactRouterUseRoutes;
 }
@@ -59,14 +59,14 @@ const root: RootFunction = ({
   // eslint-disable-next-line react/display-name, react/prop-types
   const Root = ({
     basePath,
-    locale = Locale.en_GB,
+    locale,
     customer,
     order,
     subscription,
     layout,
     tradename,
     onNotAccessible,
-    onCheckoutSubmitted,
+    onCheckoutFlowSuccess,
     useRedirect,
     useRoutes = reactRouterUseRoutes,
   }: RootProps) => {
@@ -88,7 +88,7 @@ const root: RootFunction = ({
             tradename={tradename}
             useRedirect={useRedirect}
             useRoutes={useRoutes}
-            onCheckoutSubmitted={onCheckoutSubmitted}
+            onCheckoutFlowSuccess={onCheckoutFlowSuccess}
             onI18nError={development ? undefined : handleOnI18nError}
             onNotAccessible={onNotAccessible}
           />

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

@@ -33,6 +33,7 @@ interface ItemHeaderProps {
   readonly onNext?: OnNextItemFunction;
   readonly onPrevious?: OnPreviousItemFunction;
 }
+
 const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) => {
   const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
   const itemIndex = items.indexOf(item);

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();
+    });
+  });
+});