@lookiero/checkout 5.3.0 → 6.0.0-beta.0

package/src/infrastructure/ui/routing/CheckoutMiddleware.test.tsx

@@ -0,0 +1,285 @@
+import { Router } from "@remix-run/router";
+import { render, RenderResult } from "@testing-library/react-native";
+import { mock } from "jest-mock-extended";
+import React from "react";
+import { Text } from "react-native";
+import { generatePath } from "react-router-native";
+import { createMemoryRouter, RouterProvider } from "react-router-native";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { Logger } from "@lookiero/sty-psp-logging";
+import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
+import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
+import { checkout } from "../../projection/checkout/checkout.mock";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { CheckoutMiddleware } from "./CheckoutMiddleware";
+import { Routes } from "./routes";
+import { BasePathProvider } from "./useBasePath";
+
+jest.mock("../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId", () => ({
+  useViewFirstAvailableCheckoutByCustomerId: jest.fn(),
+}));
+jest.mock("../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId", () => ({
+  useViewIsSizeChangeEnabledByCheckoutId: jest.fn(),
+}));
+const mockStartCheckout = jest.fn();
+jest.mock("../../domain/checkout/react/useStartCheckout");
+const mockLogger = mock<Logger>();
+jest.mock("@lookiero/sty-psp-logging", () => ({
+  useLogger: () => mockLogger,
+}));
+
+const NOT_FINAL_STATUSES: CheckoutStatus[] = [
+  CheckoutStatus.AVAILABLE,
+  CheckoutStatus.STARTED,
+  CheckoutStatus.NOTIFIED,
+];
+
+const summaryRedirectInitialPaths = [
+  Routes.HOME,
+  generatePath(Routes.ITEM, { id: "a5422445-0e62-4b11-8a3f-1bb5469ee154" }),
+  Routes.FEEDBACK,
+];
+const summaryRedirectScenarios = NOT_FINAL_STATUSES.reduce(
+  (acc, status) => [...acc, ...summaryRedirectInitialPaths.map((route) => [status, route] as [CheckoutStatus, string])],
+  [] as [CheckoutStatus, string][],
+);
+const summaryNotRedirectInitialPaths = [
+  Routes.SUMMARY,
+  generatePath(Routes.ITEM_DETAIL, { id: "a5422445-0e62-4b11-8a3f-1bb5469ee154" }),
+  Routes.CHECKOUT,
+];
+const summaryNotRedirectScenarios = NOT_FINAL_STATUSES.reduce(
+  (acc, status) => [
+    ...acc,
+    ...summaryNotRedirectInitialPaths.map((route) => [status, route] as [CheckoutStatus, string]),
+  ],
+  [] as [CheckoutStatus, string][],
+);
+
+const itemRedirectInitialPaths = [
+  Routes.HOME,
+  generatePath(Routes.ITEM, { id: "a5422445-0e62-4b11-8a3f-1bb5469ee154" }),
+  Routes.FEEDBACK,
+  Routes.SUMMARY,
+  generatePath(Routes.ITEM_DETAIL, { id: "a5422445-0e62-4b11-8a3f-1bb5469ee154" }),
+  Routes.CHECKOUT,
+];
+const itemRedirectScenarios = NOT_FINAL_STATUSES.reduce(
+  (acc, status) => [...acc, ...itemRedirectInitialPaths.map((route) => [status, route] as [CheckoutStatus, string])],
+  [] as [CheckoutStatus, string][],
+);
+
+const customerId = "29790d24-b139-4ab8-b618-d796d101e974";
+const loaderText = "loader-component";
+const checkoutChildrenText = "children-component";
+
+type RenderCheckoutMiddlewareParameters = {
+  readonly path: string;
+  readonly onNotAccessible?: () => void;
+};
+const renderCheckoutMiddleware = ({
+  path,
+  onNotAccessible = () => void 0,
+}: RenderCheckoutMiddlewareParameters): {
+  result: RenderResult;
+  router: Router;
+  rootNode: typeof RouterProvider;
+} => {
+  const router = createMemoryRouter(
+    [
+      {
+        path: "/*",
+        element: (
+          <BasePathProvider basePath="">
+            <CheckoutMiddleware
+              customerId={customerId}
+              loader={<Text>{loaderText}</Text>}
+              onNotAccessible={onNotAccessible}
+            >
+              <Text>{checkoutChildrenText}</Text>
+            </CheckoutMiddleware>
+          </BasePathProvider>
+        ),
+      },
+    ],
+    {
+      initialEntries: [`/${path}`],
+    },
+  );
+
+  return {
+    result: render(<RouterProvider router={router} />),
+    router,
+    rootNode: RouterProvider,
+  };
+};
+
+beforeEach(() => {
+  mockStartCheckout.mockClear();
+});
+
+describe("CheckoutMiddleware component", () => {
+  it("renders a loader while processing dependant use-cases", async () => {
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([undefined, QueryStatus.LOADING]);
+    (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+    const { result } = renderCheckoutMiddleware({ path: Routes.HOME });
+    const loader = await result.findByText(loaderText);
+
+    expect(loader).toBeTruthy();
+  });
+
+  it("startCheckout should be called", async () => {
+    const checkoutMock = checkout({ items: [{ status: CheckoutItemStatus.INITIAL }] });
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+    (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+    renderCheckoutMiddleware({ path: Routes.HOME });
+
+    expect(mockStartCheckout).toHaveBeenCalled();
+  });
+
+  it("payment route should not be directly accessible", async () => {
+    const checkoutMock = checkout({ items: [{ status: CheckoutItemStatus.INITIAL }] });
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+    (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+    const onNotAccessible = jest.fn();
+    renderCheckoutMiddleware({ path: `${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, onNotAccessible });
+
+    expect(onNotAccessible).toHaveBeenCalled();
+  });
+
+  it("should redirect to 'feedback' if checkout's status is SUBMITTED", async () => {
+    const checkoutMock = checkout({
+      status: CheckoutStatus.SUBMITTED,
+      items: [
+        { status: CheckoutItemStatus.KEPT },
+        { status: CheckoutItemStatus.KEPT },
+        { status: CheckoutItemStatus.KEPT },
+        { status: CheckoutItemStatus.KEPT },
+        { status: CheckoutItemStatus.KEPT },
+      ],
+    });
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+    (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+    const { router } = renderCheckoutMiddleware({ path: Routes.HOME });
+
+    expect(router.state.location.pathname).toBe(`/${Routes.FEEDBACK}`);
+  });
+
+  test.each(summaryRedirectScenarios)(
+    "should redirect to 'summary' if checkout's status is %s and there is no itemWithoutCustomerDecision with initial path %s",
+    async (status, path) => {
+      const checkoutMock = checkout({
+        status: status as CheckoutStatus,
+        items: [
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+        ],
+      });
+      (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+      (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+      const { router } = renderCheckoutMiddleware({ path });
+
+      expect(router.state.location.pathname).toBe(`/${Routes.SUMMARY}`);
+    },
+  );
+
+  test.each(summaryNotRedirectScenarios)(
+    "should NOT redirect to 'item' if checkout's status is %s and there is no itemWithoutCustomerDecision with initial path %s",
+    async (status, path) => {
+      const checkoutMock = checkout({
+        status,
+        items: [
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+          { status: CheckoutItemStatus.KEPT },
+        ],
+      });
+      (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+      (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+      const { router } = renderCheckoutMiddleware({ path });
+
+      expect(router.state.location.pathname).toBe(`/${path}`);
+    },
+  );
+
+  test.each(itemRedirectScenarios)(
+    "should redirect to 'item' if checkout's status is %s and there is any itemWithoutCustomerDecision with initial route %s",
+    async (status, path) => {
+      const checkoutMock = checkout({
+        status,
+        items: [
+          { id: "a5422445-0e62-4b11-8a3f-1bb5469ee154", status: CheckoutItemStatus.KEPT },
+          { id: "cfc76463-621a-485a-b152-c5a9c4dc43d9", status: CheckoutItemStatus.INITIAL },
+          { id: "a9a4fa26-fcc2-4efa-a6a8-fa29ea07b128", status: CheckoutItemStatus.INITIAL },
+          { id: "8af02b73-0b0a-46a0-a3a8-d9710815c739", status: CheckoutItemStatus.KEPT },
+          { id: "8890e00b-d4ed-4220-ae13-52cd88ae8ed5", status: CheckoutItemStatus.KEPT },
+        ],
+      });
+      (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+      (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+      const { router } = renderCheckoutMiddleware({ path });
+
+      expect(router.state.location.pathname).toBe(
+        `/${generatePath(Routes.ITEM, { id: "cfc76463-621a-485a-b152-c5a9c4dc43d9" })}`,
+      );
+    },
+  );
+
+  test.each(NOT_FINAL_STATUSES)(
+    "should redirect to the recently-reset 'item' if checkout's status is %s",
+    async (status) => {
+      const checkoutMock = checkout({
+        status,
+        items: [
+          { id: "a5422445-0e62-4b11-8a3f-1bb5469ee154", status: CheckoutItemStatus.KEPT },
+          { id: "cfc76463-621a-485a-b152-c5a9c4dc43d9", status: CheckoutItemStatus.INITIAL },
+          { id: "a9a4fa26-fcc2-4efa-a6a8-fa29ea07b128", status: CheckoutItemStatus.KEPT },
+          { id: "8af02b73-0b0a-46a0-a3a8-d9710815c739", status: CheckoutItemStatus.KEPT },
+          { id: "8890e00b-d4ed-4220-ae13-52cd88ae8ed5", status: CheckoutItemStatus.KEPT },
+        ],
+      });
+      (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+      (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
+
+      const { router, result } = renderCheckoutMiddleware({ path: Routes.ITEM_DETAIL });
+
+      expect(router.state.location.pathname).toBe(
+        `/${generatePath(Routes.ITEM, { id: "cfc76463-621a-485a-b152-c5a9c4dc43d9" })}`,
+      );
+
+      const updatedCheckoutMock = checkout({
+        status,
+        items: [
+          { id: "a5422445-0e62-4b11-8a3f-1bb5469ee154", status: CheckoutItemStatus.KEPT },
+          { id: "cfc76463-621a-485a-b152-c5a9c4dc43d9", status: CheckoutItemStatus.INITIAL },
+          { id: "a9a4fa26-fcc2-4efa-a6a8-fa29ea07b128", status: CheckoutItemStatus.KEPT },
+          { id: "8af02b73-0b0a-46a0-a3a8-d9710815c739", status: CheckoutItemStatus.KEPT },
+          { id: "8890e00b-d4ed-4220-ae13-52cd88ae8ed5", status: CheckoutItemStatus.INITIAL },
+        ],
+      });
+      (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([
+        updatedCheckoutMock,
+        QueryStatus.SUCCESS,
+      ]);
+
+      result.rerender(<RouterProvider router={router} />);
+
+      expect(router.state.location.pathname).toBe(
+        `/${generatePath(Routes.ITEM, { id: "8890e00b-d4ed-4220-ae13-52cd88ae8ed5" })}`,
+      );
+    },
+  );
+});

package/src/infrastructure/ui/routing/CheckoutMiddleware.tsx

@@ -0,0 +1,134 @@
+import React, { FC, useEffect, useRef } from "react";
+import { generatePath, useMatch, useNavigate } from "react-router-native";
+import { Spinner } from "@lookiero/aurora";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { CheckoutStatus } from "../../../domain/checkout/model/checkout";
+import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
+import { CheckoutItemProjection } from "../../../projection/checkoutItem/checkoutItem";
+import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { Routes } from "./routes";
+import { useBasePath } from "./useBasePath";
+
+interface CheckoutMiddlewareProps {
+  readonly customerId: string;
+  readonly onNotAccessible: () => void;
+  readonly loader?: JSX.Element;
+  readonly children: JSX.Element;
+}
+
+const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
+  customerId,
+  onNotAccessible,
+  loader = <Spinner />,
+  children,
+}) => {
+  const logger = useLogger();
+  const basePath = useBasePath();
+  const navigate = useNavigate();
+  const navigateRef = useRef(navigate);
+  navigateRef.current = navigate;
+
+  const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
+  const itemRouteMatchRef = useRef(itemRouteMatch);
+  itemRouteMatchRef.current = itemRouteMatch;
+  const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
+  const itemDetailRouteMatchRef = useRef(itemDetailRouteMatch);
+  itemDetailRouteMatchRef.current = itemDetailRouteMatch;
+  const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
+  const summaryRouteMatchRef = useRef(summaryRouteMatch);
+  summaryRouteMatchRef.current = summaryRouteMatch;
+  const summaryTabsRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
+  const summaryTabsRouteMatchRef = useRef(summaryTabsRouteMatch);
+  summaryTabsRouteMatchRef.current = summaryTabsRouteMatch;
+  const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
+  const checkoutRouteMatchRef = useRef(checkoutRouteMatch);
+  checkoutRouteMatchRef.current = checkoutRouteMatch;
+  const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
+  const feedbackRouteMatchRef = useRef(feedbackRouteMatch);
+  feedbackRouteMatchRef.current = feedbackRouteMatch;
+  const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
+  const checkoutPaymentRouteMatchRef = useRef(checkoutPaymentRouteMatch);
+  checkoutPaymentRouteMatchRef.current = checkoutPaymentRouteMatch;
+
+  const checkoutShown = useRef(false);
+  checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
+
+  const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const checkoutItemsRef = useRef<CheckoutItemProjection[]>();
+
+  /* This hook is mounted at this level, although not being used directly, for optimization (regarding cache) */
+  useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
+
+  const [startCheckout] = useStartCheckout({ checkoutId: checkout?.id, logger });
+  useEffect(() => {
+    if (checkout?.id) {
+      startCheckout();
+    }
+  }, [checkout?.id, startCheckout]);
+
+  useEffect(() => {
+    /* Navigate to the feedback if checkout is submitted */
+    if (checkout?.status === CheckoutStatus.SUBMITTED && !feedbackRouteMatchRef.current) {
+      navigateRef.current(`${basePath}/${Routes.FEEDBACK}`, { replace: true });
+    } else if (
+      [CheckoutStatus.AVAILABLE, CheckoutStatus.STARTED, CheckoutStatus.NOTIFIED].includes(
+        checkout?.status as CheckoutStatus,
+      )
+    ) {
+      /**
+       * If the customer has just reset an item's decission, navigate to that item.
+       * Otherwise, navigate to the first item without customer decission.
+       */
+      const itemWithoutCustomerDecision =
+        checkout?.items.find(
+          (item) =>
+            item.status === CheckoutItemStatus.INITIAL &&
+            checkoutItemsRef.current?.find(
+              (previousItem) => previousItem.id === item.id && previousItem.status !== CheckoutItemStatus.INITIAL,
+            ),
+        ) || checkout?.items.find((item) => item.status === CheckoutItemStatus.INITIAL);
+
+      checkoutItemsRef.current = checkout?.items;
+
+      /* Navigate to the summary if required */
+      if (
+        itemWithoutCustomerDecision === undefined &&
+        !(
+          summaryRouteMatchRef.current ||
+          summaryTabsRouteMatchRef.current ||
+          itemDetailRouteMatchRef.current ||
+          checkoutRouteMatchRef.current ||
+          checkoutPaymentRouteMatchRef.current
+        )
+      ) {
+        navigateRef.current(`${basePath}/${Routes.SUMMARY}`, { replace: true });
+      }
+
+      if (
+        itemWithoutCustomerDecision &&
+        !(itemRouteMatchRef.current && itemRouteMatchRef.current.params.id === itemWithoutCustomerDecision.id)
+      ) {
+        navigateRef.current(generatePath(`${basePath}/${Routes.ITEM}`, { id: itemWithoutCustomerDecision.id }), {
+          replace: true,
+        });
+      }
+    }
+  }, [basePath, checkout?.status, checkout?.items]);
+
+  if (!checkout) {
+    return loader;
+  }
+
+  /* Prevent direct payment access */
+  if (checkoutPaymentRouteMatch && !checkoutShown.current) {
+    onNotAccessible();
+
+    return null;
+  }
+
+  return children;
+};
+
+export { CheckoutMiddleware };

package/src/infrastructure/ui/routing/Routing.tsx

@@ -0,0 +1,178 @@
+import React, { FC, lazy, memo, Suspense } from "react";
+import { Navigate, Outlet, useRoutes as reactRouterUseRoutes } from "react-router-native";
+import { Spinner } from "@lookiero/aurora";
+import { I18n } from "@lookiero/i18n-react";
+import { Kameleoon } from "@lookiero/sty-psp-ab-testing";
+import { Customer } from "../../../projection/shared/customer";
+import { Order } from "../../../projection/shared/order";
+import { Subscription } from "../../../projection/shared/subscription";
+import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
+import { Layout } from "../components/layouts/layout/Layout";
+import { NewFeedbackExperimentProvider } from "../hooks/useNewFeedbackExperiment";
+import { StaticInfoProvider } from "../hooks/useStaticInfo";
+import { App } from "../views/App";
+import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
+import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
+import { CheckoutMiddleware } from "./CheckoutMiddleware";
+import { Routes } from "./routes";
+import { BasePathProvider } from "./useBasePath";
+
+const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
+const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
+const SummaryTabs = lazy(() =>
+  import("../views/summaryTabs/SummaryTabs").then((module) => ({ default: module.SummaryTabs })),
+);
+const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
+const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
+const Return = lazy(() => import("../views/return/Return").then((module) => ({ default: module.Return })));
+
+interface RoutingProps {
+  readonly basePath?: string;
+  readonly customer: Customer;
+  readonly order: Order | undefined;
+  readonly subscription: Subscription | undefined;
+  readonly locale: string;
+  readonly I18n: I18n;
+  readonly kameleoon: KameleoonEnvironment;
+  readonly layout: Layout;
+  readonly getAuthToken: () => Promise<string>;
+  readonly onNotAccessible: () => void;
+  readonly onCheckoutSubmitted?: () => void;
+  readonly onI18nError?: (err: Error) => void;
+  readonly useRedirect: () => Record<string, string>;
+  readonly useRoutes: typeof reactRouterUseRoutes;
+}
+
+const Routing: FC<RoutingProps> = ({
+  basePath = "",
+  customer,
+  order,
+  subscription,
+  locale,
+  I18n,
+  kameleoon,
+  layout,
+  getAuthToken,
+  onI18nError,
+  onNotAccessible,
+  onCheckoutSubmitted,
+  useRedirect,
+  useRoutes = reactRouterUseRoutes,
+}) => {
+  return useRoutes([
+    {
+      path: "",
+      element: (
+        <BasePathProvider basePath={basePath}>
+          <CheckoutAccessibilityMiddleware customerId={customer?.customerId} onNotAccessible={onNotAccessible}>
+            <StaticInfoProvider customer={customer} kameleoon={kameleoon}>
+              <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
+                <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
+                  <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>
+                    <NewFeedbackExperimentProvider>
+                      <App>
+                        <Outlet />
+                      </App>
+                    </NewFeedbackExperimentProvider>
+                  </CheckoutMiddleware>
+                </Kameleoon>
+              </I18n>
+            </StaticInfoProvider>
+          </CheckoutAccessibilityMiddleware>
+        </BasePathProvider>
+      ),
+      children: [
+        {
+          path: Routes.ITEM,
+          element: (
+            <Suspense fallback={<Spinner />}>
+              <Item layout={layout} />
+            </Suspense>
+          ),
+        },
+        {
+          path: Routes.ITEM_DETAIL,
+          element: (
+            <Suspense fallback={<Spinner />}>
+              <Item layout={layout} />
+            </Suspense>
+          ),
+        },
+        {
+          path: Routes.SUMMARY,
+          element: (
+            <Suspense fallback={<Spinner />}>
+              <Summary layout={layout}>
+                <Outlet />
+              </Summary>
+            </Suspense>
+          ),
+          children: [
+            {
+              path: Routes.SUMMARY_TABS,
+              element: (
+                <Suspense fallback={<Spinner />}>
+                  <SummaryTabs />
+                </Suspense>
+              ),
+            },
+          ],
+        },
+        {
+          path: Routes.CHECKOUT,
+          element: (
+            <Suspense fallback={<Spinner />}>
+              <Checkout layout={layout} useRedirect={useRedirect}>
+                <Outlet />
+              </Checkout>
+            </Suspense>
+          ),
+          children: [
+            {
+              path: Routes.CHECKOUT_PAYMENT,
+              element: (
+                <CheckoutPaymentModal
+                  coupon={order?.coupon || null}
+                  getAuthToken={getAuthToken}
+                  isFirstOrder={order?.isFirstOrder as boolean}
+                  orderNumber={order?.orderNumber as number}
+                  subscription={subscription as Subscription}
+                  onCheckoutSubmitted={onCheckoutSubmitted}
+                />
+              ),
+            },
+          ],
+        },
+        {
+          path: Routes.FEEDBACK,
+          element: (
+            <Suspense fallback={<Spinner />}>
+              <Feedback layout={layout} />
+            </Suspense>
+          ),
+        },
+        {
+          path: Routes.RETURN,
+          element: (
+            <Suspense fallback={<Spinner />}>
+              <Return layout={layout} />
+            </Suspense>
+          ),
+        },
+        {
+          path: "*",
+          element: <Navigate to={`${Routes.HOME}`} replace />,
+        },
+      ],
+    },
+  ]);
+};
+
+/**
+ * Provided useRoutes is not stable (when integrated with Sentry) as it's rendering a different component tree.
+ *
+ * https://github.com/getsentry/sentry-javascript/blob/master/packages/react/src/reactrouterv6.tsx#L221
+ * (SentryRoutes is a new component after each re-render)
+ */
+const MemoizedRouting = memo(Routing);
+export { MemoizedRouting as Routing };

package/src/infrastructure/ui/routing/router/Router.native.ts

@@ -0,0 +1 @@
+export { NativeRouter as Router } from "react-router-native";

package/src/infrastructure/ui/routing/router/Router.ts

@@ -0,0 +1 @@
+export { BrowserRouter as Router } from "react-router-dom";

package/src/infrastructure/ui/routing/routes.ts

@@ -0,0 +1,11 @@
+export enum Routes {
+  HOME = "",
+  ITEM_DETAIL = "item/:id/detail",
+  ITEM = "item/:id",
+  SUMMARY = "summary",
+  SUMMARY_TABS = "tabs/:tab",
+  CHECKOUT = "checkout",
+  CHECKOUT_PAYMENT = "payment",
+  FEEDBACK = "feedback",
+  RETURN = "return/:id",
+}

package/src/infrastructure/ui/routing/useBasePath.test.tsx

@@ -0,0 +1,19 @@
+import { renderHook, waitFor } from "@testing-library/react-native";
+import React, { FC } from "react";
+import { BasePathProvider, useBasePath as sut } from "./useBasePath";
+
+const basePath = "/checkout";
+
+interface WrapperProps {
+  readonly children: JSX.Element;
+}
+
+const Wrapper: FC<WrapperProps> = ({ children }) => <BasePathProvider basePath={basePath}>{children}</BasePathProvider>;
+
+describe("useBasePath hook", () => {
+  it("returns the BasePathProvider provided basePath", async () => {
+    const { result } = renderHook(() => sut(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current).toStrictEqual(basePath));
+  });
+});

package/src/infrastructure/ui/routing/useBasePath.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, FC, useContext } from "react";
+import invariant from "tiny-invariant";
+
+const BasePathContext = createContext<string>(null as unknown as string);
+
+interface BasePathProviderProps {
+  readonly children: JSX.Element;
+  readonly basePath: string;
+}
+
+export const BasePathProvider: FC<BasePathProviderProps> = ({ basePath, children }) => (
+  <BasePathContext.Provider value={basePath}>{children}</BasePathContext.Provider>
+);
+
+export const useBasePath = () => {
+  const basePath = useContext(BasePathContext);
+
+  invariant(
+    basePath !== null,
+    "Your are trying to use the useBasePath hook without wrapping your app with the <BasePathProvider>.",
+  );
+
+  return basePath;
+};

package/src/infrastructure/ui/settings/UISettings.ts

@@ -0,0 +1,3 @@
+enum UISettings {}
+
+export { UISettings };

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

@@ -0,0 +1,17 @@
+import React, { FC, Fragment, ReactElement } from "react";
+
+interface CreateWrapperFunctionArgs {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly wrapper?: FC<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  readonly initialProps?: Record<string, any>;
+}
+interface CreateWrapperFunction {
+  (args: CreateWrapperFunctionArgs): FC<{ children: ReactElement }>;
+}
+const createWrapper: CreateWrapperFunction =
+  ({ wrapper: Wrapper = Fragment, initialProps = {} }) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ children }) => <Wrapper {...initialProps}>{children}</Wrapper>;
+
+export { createWrapper };