@lookiero/checkout 5.3.0 → 6.0.0-beta.1

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

@@ -0,0 +1,46 @@
+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 { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
+import { Logger, LoggerProvider } from "@lookiero/sty-psp-logging";
+import { BasePathProvider } from "../routing/useBasePath";
+
+interface RenderArgs {
+  readonly locale?: string;
+  readonly messages?: TranslationMessages;
+  readonly logger?: Logger;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly wrapper?: FC<any>;
+}
+
+interface RenderWrapperFunction {
+  (args: RenderArgs): FC<{ children: ReactElement }>;
+}
+
+const renderWrapper: RenderWrapperFunction =
+  ({ locale, messages = {}, wrapper: Wrapper = Fragment, logger = mock<Logger>() }) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ children }) => (
+    <Aurora>
+      <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
+        <LoggerProvider logger={logger}>
+          <BasePathProvider basePath="">
+            <Wrapper>{children}</Wrapper>
+          </BasePathProvider>
+        </LoggerProvider>
+      </IntlProvider>
+    </Aurora>
+  );
+
+interface RenderWithProvidersFunction {
+  (ui: ReactElement, args?: RenderArgs): RenderAPI;
+}
+
+const renderWithProviders: RenderWithProvidersFunction = (
+  ui: ReactElement,
+  { locale, messages, wrapper } = { locale: "en" },
+): RenderAPI => render(ui, { wrapper: renderWrapper({ locale, messages, wrapper }) });
+
+export { renderWithProviders as render };

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

@@ -0,0 +1,32 @@
+import { PortalProvider } from "@gorhom/portal";
+import React, { FC } from "react";
+import { StatusBar } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
+import { Notifications } from "@lookiero/sty-psp-notifications";
+import { theme } from "@lookiero/sty-psp-ui";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+
+const { colorBgBase } = theme();
+
+interface AppProps {
+  readonly children: JSX.Element;
+}
+
+const App: FC<AppProps> = ({ children }) => (
+  <SafeAreaProvider>
+    <PortalProvider>
+      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} />
+      {/*
+        We are using the Aurora's PortalProvider at this level for notifications to work properly.
+
+        PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
+        notifications would be displayed in a layer below Portal's one (not visible).
+      */}
+      <AuroraPortalProvider>{children}</AuroraPortalProvider>
+    </PortalProvider>
+  </SafeAreaProvider>
+);
+
+export { App };

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

@@ -0,0 +1,66 @@
+import { StyleSheet, Platform } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space8, space12, space16 } = theme();
+
+const style = StyleSheet.create({
+  contentWrapper: {
+    backgroundColor: colorBgBase,
+    flexGrow: 0,
+    padding: space6,
+  },
+  deliveryBannerContainer: {
+    marginBottom: space6,
+  },
+  desktopContentWrapper: {
+    borderRadius: borderRadius4,
+  },
+  desktopLayoutSpacing: {
+    paddingVertical: space12,
+  },
+  desktopListSpacing: {
+    paddingRight: space16,
+  },
+  desktopResume: {
+    borderRadius: borderRadius4,
+  },
+  header: {
+    backgroundColor: colorBgBase,
+    height: HEADER_HEIGHT,
+  },
+  mobileInfo: {
+    paddingHorizontal: space6,
+    paddingTop: space6,
+  },
+  paymentSelector: {
+    marginBottom: space4,
+  },
+  pricingContainer: {
+    paddingHorizontal: space6,
+    paddingVertical: space8,
+  },
+  princingWrapper: {
+    padding: space6,
+  },
+  resume: {
+    overflow: "hidden",
+    backgroundColor: colorBgBase,
+    ...Platform.select({
+      web: {
+        position: "sticky",
+        top: space12,
+        alignSelf: "flex-start",
+      },
+    }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } as any,
+  scrollView: {
+    backgroundColor: colorBgPrimaryLight,
+  },
+  title: {
+    marginVertical: space4,
+  },
+});
+
+export { style };

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

@@ -0,0 +1,144 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Country } from "../../../../projection/shared/country";
+import { checkout } from "../../../projection/checkout/checkout.mock";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { pricing } from "../../../projection/pricing/pricing.mock";
+import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
+import { render } from "../../test/render";
+import { Checkout } from "./Checkout";
+
+const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const country = Country.ES;
+const segment = Segment.WOMEN;
+const mockCheckout = checkout({
+  items: [
+    { status: CheckoutItemStatus.RETURNED },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.REPLACED },
+  ],
+});
+const mockUseRedirect = jest.fn(() => ({ returnUrl: "https://web2.dev.aws.lookiero.es/user/" }));
+
+jest.mock("../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+}));
+
+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", () => ({
+  useTrackPressContinue: () => mockTrackPressContinue,
+}));
+
+const mockTrackPressBack = jest.fn();
+jest.mock("../../../tracking/useTrackPressBack", () => ({
+  useTrackPressBack: () => mockTrackPressBack,
+}));
+
+const mockUseNavigate = jest.fn();
+jest.mock("react-router-native", () => ({
+  ...jest.requireActual("react-router-native"),
+  useLocation: () => jest.fn(),
+  useNavigate: () => mockUseNavigate,
+}));
+
+describe("Checkout view", () => {
+  it("renders correctly", async () => {
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
+
+    const { findByText, getAllByTestId, getByText, getByTestId } = render(
+      <Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />,
+    );
+
+    expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
+
+    expect(getByTestId("delivery-banner")).toBeTruthy();
+
+    expect(getAllByTestId("checkout-items-kept")).toHaveLength(4);
+
+    expect(getByText(`${I18nMessages.SUMMARY_SUBTOTAL} ${I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT}`)).toBeTruthy();
+    expect(getByText("€218.01")).toBeTruthy();
+
+    expect(getByText(I18nMessages.SUMMARY_DISCOUNT)).toBeTruthy();
+    expect(getByText("-€25.00")).toBeTruthy();
+
+    expect(getByText(I18nMessages.SUMMARY_CREDIT)).toBeTruthy();
+    expect(getByText("-€20.00")).toBeTruthy();
+
+    expect(getByText(I18nMessages.SUMMARY_FEE)).toBeTruthy();
+    expect(getByText("-€10.00")).toBeTruthy();
+
+    expect(getByText(I18nMessages.SUMMARY_SUBMIT_BUTTON)).toBeTruthy();
+    fireEvent.press(getByText(I18nMessages.SUMMARY_SUBMIT_BUTTON));
+    expect(mockTrackPressContinue).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(`/${Routes.SUMMARY}`);
+  });
+
+  it("does not render a delivery banner", async () => {
+    const mockCheckout = checkout({
+      items: [
+        { status: CheckoutItemStatus.RETURNED },
+        { status: CheckoutItemStatus.KEPT },
+        { status: CheckoutItemStatus.KEPT },
+        { status: CheckoutItemStatus.KEPT },
+        { status: CheckoutItemStatus.RETURNED },
+      ],
+    });
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
+
+    const { findByText, queryByText } = render(<Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />);
+
+    expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
+
+    expect(queryByText(I18nMessages.CHECKOUT_DELIVERY_BANNER)).not.toBeTruthy();
+  });
+});

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

@@ -0,0 +1,162 @@
+import React, { FC, ReactNode, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { useNavigate } from "react-router-native";
+import { Box, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { useTrackPageView } from "../../../tracking/useTrackPageView";
+import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
+import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
+import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
+import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
+import { useStaticInfo } from "../../hooks/useStaticInfo";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
+import { Pricing } from "../summary/components/pricing/Pricing";
+import { style } from "./Checkout.style";
+import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
+import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
+
+interface CheckoutProps {
+  readonly children?: ReactNode;
+  readonly layout: LocalLayout;
+  readonly useRedirect: () => Record<string, string>;
+}
+
+const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirect }) => {
+  const {
+    customer: { customerId, country, segment },
+  } = useStaticInfo();
+  const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
+  const { screen } = useDevice();
+
+  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
+
+  useTrackPageView({
+    page: TrackingPage.CHECKOUT,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+
+  const navigate = useNavigate();
+  const basePath = useBasePath();
+
+  const trackPressContinue = useTrackPressContinue({
+    page: TrackingPage.CHECKOUT,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnSubmit = useCallback(() => {
+    trackPressContinue();
+    navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
+  }, [basePath, navigate, trackPressContinue]);
+
+  const checkoutItemsKept = useMemo(
+    () =>
+      checkout?.items.filter(
+        (checkoutItem) =>
+          checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED,
+      ),
+    [checkout?.items],
+  );
+
+  const hasReplacedCheckoutItem = useMemo(
+    () => checkout?.items.some((checkoutItem) => checkoutItem.status === CheckoutItemStatus.REPLACED),
+    [checkout?.items],
+  );
+
+  const trackPressBack = useTrackPressBack({
+    page: TrackingPage.CHECKOUT,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnBack = useCallback(() => {
+    trackPressBack();
+    navigate(`${basePath}/${Routes.SUMMARY}`);
+  }, [basePath, navigate, trackPressBack]);
+
+  const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+  const dependenciesLoaded =
+    (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) &&
+    dependenciesLoadedStatuses.includes(pricingStatus);
+
+  if (!dependenciesLoaded) {
+    return <Spinner />;
+  }
+
+  return (
+    <LocalLayout
+      header={<CheckoutHeader onBack={handleOnBack} />}
+      style={{
+        header: style.header,
+        scrollView: style.scrollView,
+      }}
+    >
+      {hasReplacedCheckoutItem && <DeliveryBanner />}
+      <Layout fullWidth={!screen.L} style={screen.L && style.desktopLayoutSpacing}>
+        <Box size={{ L: "2/3" }} style={screen.L ? style.desktopListSpacing : undefined}>
+          <View style={[style.contentWrapper, screen.L ? style.contentWrapper : undefined]}>
+            <View style={style.paymentSelector}>
+              <PaymentInstrument useRedirect={useRedirect} />
+            </View>
+
+            <Text level={3} style={style.title} heading>
+              {titleText}
+            </Text>
+
+            {checkoutItemsKept?.map((checkoutItem) => (
+              <View key={checkoutItem.id} testID="checkout-items-kept">
+                <ProductVariant
+                  brand={checkoutItem.productVariant.brand}
+                  color={checkoutItem.productVariant.color}
+                  country={country}
+                  media={checkoutItem.productVariant.media}
+                  name={checkoutItem.productVariant.name}
+                  price={checkoutItem.price}
+                  status={checkoutItem.status}
+                  size={
+                    checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
+                      ? checkoutItem.replacedFor.size
+                      : checkoutItem.productVariant.size
+                  }
+                />
+              </View>
+            ))}
+          </View>
+        </Box>
+
+        <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : undefined]}>
+          {pricing ? (
+            <View style={style.princingWrapper}>
+              <Pricing
+                balanceDiscount={pricing.balanceDiscount}
+                collapsible={false}
+                discount={pricing.discount}
+                discountPercentage={pricing.discountPercentage}
+                pendingToPay={pricing.pendingToPay}
+                service={pricing.service}
+                subtotal={pricing.subtotal}
+                totalCheckoutItemsKept={checkoutItemsKept?.length || 0}
+                onSubmit={handleOnSubmit}
+              />
+            </View>
+          ) : null}
+        </Box>
+      </Layout>
+
+      {children}
+    </LocalLayout>
+  );
+};
+
+export { Checkout };

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

@@ -0,0 +1,131 @@
+import { waitFor } from "@testing-library/react-native";
+import React from "react";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { Country } from "../../../../../../projection/shared/country";
+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 } }),
+}));
+
+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 });
+    });
+  });
+});