@lookiero/checkout 10.1.0 → 11.0.0

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

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

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

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

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

@@ -1,134 +0,0 @@
-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 });
-    });
-  });
-});