@lookiero/checkout 0.1.1

package/src/infrastructure/projection/storageUiSettingByKeyView.ts

@@ -0,0 +1,35 @@
+import { UiSettingByKeyView, UiSettingProjection } from "../../projection/uiSetting/viewUiSettingByKey";
+import { ReadFunction } from "../persistence/storage";
+import { UiSettingDto } from "../persistence/uiSettingData";
+
+interface ToUiSettingProjectionFunction {
+  (uiSettingDto: UiSettingDto): UiSettingProjection;
+}
+
+const toUiSettingProjection: ToUiSettingProjectionFunction = (uiSettingDto) => ({
+  id: uiSettingDto.id,
+  key: uiSettingDto.key,
+  value: uiSettingDto.value,
+});
+
+interface StorageUiSettingByKeyView extends UiSettingByKeyView {}
+
+interface StorageUiSettingByKeyViewFunctionArgs {
+  readonly read: ReadFunction<UiSettingDto>;
+}
+
+interface StorageUiSettingByKeyViewFunction {
+  (args: StorageUiSettingByKeyViewFunctionArgs): StorageUiSettingByKeyView;
+}
+
+export const storageUiSettingByKeyView: StorageUiSettingByKeyViewFunction =
+  ({ read }) =>
+  async ({ key }) => {
+    try {
+      const uiSettingDto = await read(key);
+
+      return uiSettingDto ? toUiSettingProjection(uiSettingDto) : undefined;
+    } catch (ignored) {
+      throw new Error("Could not fetch the uiSetting");
+    }
+  };

package/src/infrastructure/ui/Root.tsx

@@ -0,0 +1,53 @@
+import { inMemoryFetchTranslation } from "@lookiero/i18n";
+import { ReactIntl } from "@lookiero/i18n-react";
+import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
+import { FC, useCallback } from "react";
+import { Platform } from "react-native";
+import { Spinner } from "./components/atoms/spiner/Spinner";
+import { Router } from "./routing/router/Router";
+import { Routing } from "./routing/Routing";
+
+const translationData: Record<string, Record<string, string>> = {
+  en: { intro: "Intro view's title" },
+  es: { intro: "Título de la vista Intro" },
+};
+const fetchTranslation = inMemoryFetchTranslation({ translationData });
+
+interface RootFunctionArgs {
+  readonly Messaging: MessagingRoot;
+}
+
+interface RootFunction {
+  (args: RootFunctionArgs): FC<RootProps>;
+}
+
+interface RootProps {
+  readonly locale?: string;
+  readonly customerId: string | undefined;
+  readonly onNotAccessible: () => void;
+}
+
+const root: RootFunction =
+  ({ Messaging }) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ locale = "en", customerId, onNotAccessible }) => {
+    const handleOnI18nError = useCallback(() => void 0, []);
+
+    return (
+      <ReactIntl.I18n
+        locale={locale}
+        fetchTranslation={fetchTranslation}
+        loader={<Spinner />}
+        onError={handleOnI18nError}
+        contextId="CheckoutI18n"
+      >
+        <Messaging includeReactQueryDevTools={Platform.OS === "web"}>
+          <Router>
+            <Routing customerId={customerId} onNotAccessible={onNotAccessible} />
+          </Router>
+        </Messaging>
+      </ReactIntl.I18n>
+    );
+  };
+
+export { RootProps, root };

package/src/infrastructure/ui/components/atoms/spiner/Spinner.style.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+
+const style = StyleSheet.create({
+  container: {
+    display: "flex",
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export { style };

package/src/infrastructure/ui/components/atoms/spiner/Spinner.tsx

@@ -0,0 +1,35 @@
+import { FC } from "react";
+import { View } from "react-native";
+import { style } from "./Spinner.style";
+
+const Spinner: FC = () => (
+  <View style={style.container}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="30px"
+      height="30px"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+    >
+      <circle cx="50" cy="50" r="32" stroke="#000000" strokeWidth="6" strokeLinecap="round" fill="none">
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          repeatCount="indefinite"
+          dur="1.5384615384615383s"
+          values="0 50 50;180 50 50;720 50 50"
+          keyTimes="0;0.5;1"
+        ></animateTransform>
+        <animate
+          attributeName="stroke-dasharray"
+          repeatCount="indefinite"
+          dur="1.5384615384615383s"
+          values="42.22300526424682 158.83892456549995;176.93449825017714 24.127431579569617;42.22300526424682 158.83892456549995"
+          keyTimes="0;0.5;1"
+        ></animate>
+      </circle>
+    </svg>
+  </View>
+);
+
+export { Spinner };

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

@@ -0,0 +1,70 @@
+import { render, RenderResult } from "@testing-library/react-native";
+import { Text } from "react-native";
+import { MemoryRouter, Route, Routes } from "react-router-native";
+import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/react/useViewIsCheckoutAccessibleByCustomerId";
+import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
+
+jest.mock("../../projection/react/useViewIsCheckoutAccessibleByCustomerId", () => ({
+  useViewIsCheckoutAccessibleByCustomerId: jest.fn(),
+}));
+
+const customerId = "29790d24-b139-4ab8-b618-d796d101e974";
+const checkoutRouteText = "checkout-route-component";
+const loaderText = "loader-component";
+
+interface RenderCheckoutAccessibilityMiddlewareArgs {
+  readonly onNotAccessible?: () => void;
+}
+
+interface RenderCheckoutAccessibilityMiddlewareFunction {
+  (args?: RenderCheckoutAccessibilityMiddlewareArgs): RenderResult;
+}
+
+const renderCheckoutAccessibilityMiddleware: RenderCheckoutAccessibilityMiddlewareFunction = ({
+  onNotAccessible = () => void 0,
+} = {}) =>
+  render(
+    <MemoryRouter initialEntries={["/"]}>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <CheckoutAccessibilityMiddleware
+              customerId={customerId}
+              onNotAccessible={onNotAccessible}
+              loader={<Text>{loaderText}</Text>}
+            />
+          }
+        >
+          <Route path="/" element={<Text>{checkoutRouteText}</Text>} />
+        </Route>
+      </Routes>
+    </MemoryRouter>,
+  );
+
+describe("CheckoutAccessibilityMiddleware component", () => {
+  it("renders a loader while processing viewIsCheckoutAccessibleByCustomerId use-case", async () => {
+    (useViewIsCheckoutAccessibleByCustomerId as jest.Mock).mockReturnValue([undefined, "loading"]);
+    const { findByText } = renderCheckoutAccessibilityMiddleware();
+    const loader = await findByText(loaderText);
+
+    expect(loader).toBeTruthy();
+  });
+
+  it("renders its Outlet's content if it is accessible", async () => {
+    (useViewIsCheckoutAccessibleByCustomerId as jest.Mock).mockReturnValue([true, "success"]);
+    const { findByText } = renderCheckoutAccessibilityMiddleware();
+    const checkoutContent = await findByText(checkoutRouteText);
+
+    expect(checkoutContent).toBeTruthy();
+  });
+
+  it("calls onNotAccessible callback if it is not accessible", async () => {
+    (useViewIsCheckoutAccessibleByCustomerId as jest.Mock).mockReturnValue([false, "success"]);
+    const onNotAccessibleFn = jest.fn();
+    const { toJSON } = renderCheckoutAccessibilityMiddleware({ onNotAccessible: onNotAccessibleFn });
+
+    expect(toJSON()).toBeNull();
+    expect(onNotAccessibleFn).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,31 @@
+import { FC, useEffect, useRef } from "react";
+import { Outlet } from "react-router-native";
+import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/react/useViewIsCheckoutAccessibleByCustomerId";
+import { Spinner } from "../components/atoms/spiner/Spinner";
+
+interface CheckoutAccessibilityMiddlewareProps {
+  readonly customerId: string | undefined;
+  readonly onNotAccessible: () => void;
+  readonly loader?: JSX.Element;
+}
+
+const CheckoutAccessibilityMiddleware: FC<CheckoutAccessibilityMiddlewareProps> = ({
+  customerId,
+  onNotAccessible,
+  loader = <Spinner />,
+}) => {
+  const [accessible] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
+
+  const onNotAccessibleRef = useRef(onNotAccessible);
+  onNotAccessibleRef.current = onNotAccessible;
+
+  useEffect(() => {
+    if (accessible === false) {
+      onNotAccessibleRef.current();
+    }
+  }, [accessible, onNotAccessible]);
+
+  return accessible === undefined ? loader : accessible ? <Outlet /> : null;
+};
+
+export { CheckoutAccessibilityMiddleware };

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

@@ -0,0 +1,100 @@
+import { render, RenderResult } from "@testing-library/react-native";
+import { Text } from "react-native";
+import { generatePath, MemoryRouter, Route, Routes } from "react-router-native";
+import { v4 as uuid } from "uuid";
+import { CheckoutItemStatus } from "../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+import { startedCheckoutWithItems } from "../../delivery/_mock/checkout.mock";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsCheckoutIntroVisible } from "../../projection/react/useViewIsCheckoutIntroVisible";
+import { CheckoutMiddleware } from "./CheckoutMiddleware";
+
+import { Routes as CheckoutRoutes } from "./routes";
+
+jest.mock("../../projection/react/useViewIsCheckoutIntroVisible", () => ({
+  useViewIsCheckoutIntroVisible: jest.fn(),
+}));
+jest.mock("../../projection/react/useViewFirstAvailableCheckoutByCustomerId", () => ({
+  useViewFirstAvailableCheckoutByCustomerId: jest.fn(),
+}));
+
+const customerId = "29790d24-b139-4ab8-b618-d796d101e974";
+const loaderText = "loader-component";
+const introRouteText = "intro-route-component";
+const itemRouteText = "item-route-component";
+const summaryRouteText = "summary-route-component";
+
+interface RenderCheckoutMiddlewareArgs {
+  readonly route: string;
+}
+
+interface RenderCheckoutMiddlewareFunction {
+  (args: RenderCheckoutMiddlewareArgs): RenderResult;
+}
+
+const renderCheckoutMiddleware: RenderCheckoutMiddlewareFunction = ({ route }) =>
+  render(
+    <MemoryRouter initialEntries={[route]}>
+      <Routes>
+        <Route
+          path={CheckoutRoutes.CHECKOUT}
+          element={<CheckoutMiddleware customerId={customerId} loader={<Text>{loaderText}</Text>} />}
+        >
+          <Route path={CheckoutRoutes.INTRO} element={<Text>{introRouteText}</Text>} />
+          <Route path={CheckoutRoutes.ITEM} element={<Text>{itemRouteText}</Text>} />
+          <Route path={CheckoutRoutes.SUMMARY} element={<Text>{summaryRouteText}</Text>} />
+        </Route>
+      </Routes>
+    </MemoryRouter>,
+  );
+
+const routes: string[] = [
+  CheckoutRoutes.CHECKOUT,
+  CheckoutRoutes.INTRO,
+  generatePath(CheckoutRoutes.ITEM, { id: uuid() }),
+  CheckoutRoutes.SUMMARY,
+];
+
+describe("CheckoutMiddleware component", () => {
+  test.each(routes)("renders a loader while processing dependant use-cases in route: %s", async (route) => {
+    (useViewIsCheckoutIntroVisible as jest.Mock).mockReturnValue([undefined, "loading"]);
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([undefined, "loading"]);
+
+    const { findByText } = renderCheckoutMiddleware({ route });
+    const loader = await findByText(loaderText);
+
+    expect(loader).toBeTruthy();
+  });
+
+  test.each(routes)("renders the intro view if it should be visible with initial route: %s", async (route) => {
+    const checkoutMock = startedCheckoutWithItems({ status: [CheckoutItemStatus.INITIAL, CheckoutItemStatus.INITIAL] });
+    (useViewIsCheckoutIntroVisible as jest.Mock).mockReturnValue([true, "success"]);
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, "success"]);
+
+    const { findByText } = renderCheckoutMiddleware({ route });
+    const intro = await findByText(introRouteText);
+
+    expect(intro).toBeTruthy();
+  });
+
+  test.each(routes)("renders the item view if it should be visible with initial route: %s", async (route) => {
+    const checkoutMock = startedCheckoutWithItems({ status: [CheckoutItemStatus.KEPT, CheckoutItemStatus.INITIAL] });
+    (useViewIsCheckoutIntroVisible as jest.Mock).mockReturnValue([false, "success"]);
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, "success"]);
+
+    const { findByText } = renderCheckoutMiddleware({ route });
+    const item = await findByText(itemRouteText);
+
+    expect(item).toBeTruthy();
+  });
+
+  test.each(routes)("renders the summary view if it should be visible with initial route: %s", async (route) => {
+    const checkoutMock = startedCheckoutWithItems({ status: [CheckoutItemStatus.KEPT, CheckoutItemStatus.RETURNED] });
+    (useViewIsCheckoutIntroVisible as jest.Mock).mockReturnValue([false, "success"]);
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, "success"]);
+
+    const { findByText } = renderCheckoutMiddleware({ route });
+    const summary = await findByText(summaryRouteText);
+
+    expect(summary).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,52 @@
+import { QueryStatus } from "@lookiero/messaging-react";
+import { FC } from "react";
+import { generatePath, Navigate, Outlet, useMatch } from "react-router";
+import {
+  CheckoutItemProjection,
+  CheckoutItemStatus,
+} from "../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsCheckoutIntroVisible } from "../../projection/react/useViewIsCheckoutIntroVisible";
+import { Spinner } from "../components/atoms/spiner/Spinner";
+import { Routes } from "./routes";
+
+interface CheckoutMiddlewareProps {
+  readonly customerId: string;
+  readonly loader?: JSX.Element;
+}
+
+const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({ customerId, loader = <Spinner /> }) => {
+  const [isIntroVisible, isIntroVisibleStatus] = useViewIsCheckoutIntroVisible();
+  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const firstItemWithoutCustomerDecision: CheckoutItemProjection | undefined = checkout?.items.find((item) =>
+    [CheckoutItemStatus.EXPIRED, CheckoutItemStatus.INITIAL].includes(item.status),
+  );
+
+  const isIntroRoute = useMatch(Routes.INTRO);
+  const isItemRoute = useMatch(Routes.ITEM);
+  const isSummaryRoute = useMatch(Routes.SUMMARY);
+
+  const dependenciesLoaded = isIntroVisibleStatus === QueryStatus.SUCCESS && checkoutStatus === QueryStatus.SUCCESS;
+
+  if (!dependenciesLoaded) {
+    return loader;
+  }
+
+  if (isIntroVisible) {
+    if (!isIntroRoute) {
+      return <Navigate replace to={Routes.INTRO} />;
+    }
+  } else {
+    if (firstItemWithoutCustomerDecision && !isItemRoute) {
+      return <Navigate replace to={generatePath(Routes.ITEM, { id: firstItemWithoutCustomerDecision.id })} />;
+    }
+
+    if (firstItemWithoutCustomerDecision === undefined && !isSummaryRoute) {
+      return <Navigate replace to={Routes.SUMMARY} />;
+    }
+  }
+
+  return <Outlet />;
+};
+
+export { CheckoutMiddleware };

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

@@ -0,0 +1,64 @@
+import { FC, lazy, Suspense } from "react";
+import { Navigate, useRoutes } from "react-router-native";
+import { Spinner } from "../components/atoms/spiner/Spinner";
+import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
+import { CheckoutMiddleware } from "./CheckoutMiddleware";
+import { Routes } from "./routes";
+
+const Intro = lazy(() => import("../views/intro/Intro").then((module) => ({ default: module.Intro })));
+const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
+const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
+
+interface RoutingProps {
+  readonly customerId: string | undefined;
+  readonly onNotAccessible: () => void;
+}
+
+const Routing: FC<RoutingProps> = ({ customerId, onNotAccessible }) => {
+  const routes = useRoutes([
+    {
+      path: Routes.CHECKOUT,
+      element: <CheckoutAccessibilityMiddleware customerId={customerId} onNotAccessible={onNotAccessible} />,
+      children: [
+        {
+          path: Routes.CHECKOUT,
+          element: <CheckoutMiddleware customerId={customerId as string} />,
+          children: [
+            {
+              path: Routes.INTRO,
+              element: (
+                <Suspense fallback={<Spinner />}>
+                  <Intro />
+                </Suspense>
+              ),
+            },
+            {
+              path: Routes.ITEM,
+              element: (
+                <Suspense fallback={<Spinner />}>
+                  <Item />
+                </Suspense>
+              ),
+            },
+            {
+              path: Routes.SUMMARY,
+              element: (
+                <Suspense fallback={<Spinner />}>
+                  <Summary />
+                </Suspense>
+              ),
+            },
+          ],
+        },
+      ],
+    },
+    {
+      path: "*",
+      element: <Navigate replace to={Routes.CHECKOUT} />,
+    },
+  ]);
+
+  return routes;
+};
+
+export { 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,6 @@
+export enum Routes {
+  CHECKOUT = "/checkout",
+  INTRO = "/checkout/intro",
+  ITEM = "/checkout/item/:id",
+  SUMMARY = "/checkout/summary",
+}

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

@@ -0,0 +1,47 @@
+import { Aurora } from "@lookiero/aurora-next/build/components/primitives/Aurora/Aurora";
+import { FC, Fragment, ReactElement } from "react";
+import { render, RenderAPI } from "@testing-library/react-native";
+import { IntlProvider } from "react-intl";
+import { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
+import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
+
+interface Viewport {
+  readonly height: number;
+  readonly width: number;
+}
+
+const defaultViewport: Viewport = { width: 1200, height: 800 };
+
+interface RenderArgs {
+  readonly locale?: string;
+  readonly viewport?: Viewport;
+  readonly messages?: TranslationMessages;
+  readonly messaging?: MessagingRoot;
+}
+
+interface RenderWrapperFunction {
+  (args: RenderArgs): FC<{ children: ReactElement }>;
+}
+
+const renderWrapper: RenderWrapperFunction =
+  ({ locale, viewport, messages = {}, messaging: Messaging = Fragment }) =>
+  // eslint-disable-next-line react/display-name, react/prop-types
+  ({ children }) =>
+    (
+      <Aurora forceViewport={viewport}>
+        <IntlProvider messages={messages} locale={locale as string} onError={() => void 0}>
+          <Messaging>{children}</Messaging>
+        </IntlProvider>
+      </Aurora>
+    );
+
+interface RenderWithProvidersFunction {
+  (ui: ReactElement, args?: RenderArgs): RenderAPI;
+}
+
+const renderWithProviders: RenderWithProvidersFunction = (
+  ui: ReactElement,
+  { locale, viewport, messages, messaging } = { locale: "en", viewport: defaultViewport },
+): RenderAPI => render(ui, { wrapper: renderWrapper({ locale, viewport, messages, messaging }) });
+
+export { renderWithProviders as render };

package/src/infrastructure/ui/views/intro/Intro.test.tsx

@@ -0,0 +1,15 @@
+import { screen } from "@testing-library/react-native";
+import { render } from "../../test/render";
+import { Intro } from "./Intro";
+
+const messages = { intro: "Intro text" };
+
+describe("Intro component", () => {
+  it("renders Intro component", async () => {
+    render(<Intro />, { messages });
+
+    const text = await screen.findByText(messages.intro);
+
+    expect(text).toBeTruthy();
+  });
+});

package/src/infrastructure/ui/views/intro/Intro.tsx

@@ -0,0 +1,27 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { ReactIntl } from "@lookiero/i18n-react";
+import { FC } from "react";
+import { StyleSheet, View } from "react-native";
+
+const Intro: FC = () => {
+  const introText = ReactIntl.useI18nMessage({ id: "intro" });
+
+  return (
+    <View style={styles.container}>
+      <Text heading={true} level={3}>
+        {introText}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export { Intro };

package/src/infrastructure/ui/views/item/Item.tsx

@@ -0,0 +1,31 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { ReactIntl } from "@lookiero/i18n-react";
+import { FC } from "react";
+import { StyleSheet, View } from "react-native";
+import { useParams } from "react-router-native";
+
+const Item: FC = () => {
+  const { id } = useParams();
+
+  const itemText = ReactIntl.useI18nMessage({ id: "item" });
+
+  return (
+    <View style={styles.container}>
+      <Text heading={true} level={3}>
+        {itemText}
+      </Text>
+      <Text level={2}>{id}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export { Item };

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -0,0 +1,27 @@
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { ReactIntl } from "@lookiero/i18n-react";
+import { FC } from "react";
+import { StyleSheet, View } from "react-native";
+
+const Summary: FC = () => {
+  const summaryText = ReactIntl.useI18nMessage({ id: "summary" });
+
+  return (
+    <View style={styles.container}>
+      <Text heading={true} level={3}>
+        {summaryText}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+export { Summary };

package/src/projection/bookedSizeReplaceableProductVariants/viewBookedSizeReplaceableProductVariantsForCheckoutItem.test.ts

@@ -0,0 +1,40 @@
+import { QueryBus } from "@lookiero/messaging";
+import { mock } from "jest-mock-extended";
+import {
+  BookedSizeReplaceableProductVariantsProjection,
+  viewBookedSizeReplaceableProductVariantsForCheckoutItem,
+  viewBookedSizeReplaceableProductVariantsForCheckoutItemHandler,
+} from "./viewBookedSizeReplaceableProductVariantsForCheckoutItem";
+
+const checkoutItemId = "6f720954-8039-4bed-9596-34fc5a02131b";
+const bookedSizeReplaceableProductVariants: BookedSizeReplaceableProductVariantsProjection = {
+  booking: "b00e2c2d-7d9c-4808-88a4-e1c845ae6889",
+  productVariants: [
+    {
+      id: "383fab95-56eb-4639-bb18-530ab792b4d3",
+      size: {
+        id: "4f8a26b8-8d2d-4012-b49a-7d2820095598",
+        europe: { size: "36", format: "36" },
+        lookiero: { size: "S", format: "S" },
+        uk: { size: "8", format: "8" },
+        it: { size: "M", format: "M" },
+      },
+    },
+  ],
+};
+const queryBus = mock<QueryBus>();
+
+describe("viewBookedSizeReplaceableProductVariantsForCheckoutItem", () => {
+  it("returns booked size replaceable product variants for checkout item", async () => {
+    const query = viewBookedSizeReplaceableProductVariantsForCheckoutItem({ checkoutItemId });
+    const view = jest.fn(() => Promise.resolve(bookedSizeReplaceableProductVariants));
+
+    const bookedSizeReplaceableProductVariantsResult =
+      await viewBookedSizeReplaceableProductVariantsForCheckoutItemHandler({
+        view,
+        queryBus,
+      })(query);
+
+    expect(bookedSizeReplaceableProductVariantsResult).toBe(bookedSizeReplaceableProductVariants);
+  });
+});