@lookiero/checkout 5.3.0-beta.2 → 6.0.0-beta.0

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

@@ -0,0 +1,239 @@
+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 { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
+import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { paymentFlowPayload as mockPaymentFlowPayload } from "../../projection/payment/paymentFlowPayload.mock";
+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("../../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(),
+      },
+    };
+
+    (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(),
+      },
+    };
+
+    (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(),
+      },
+    };
+
+    (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(),
+        },
+      };
+
+      (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(),
+      },
+    };
+
+    (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();
+    });
+  });
+});

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

@@ -0,0 +1,119 @@
+import { RefObject, useCallback, useMemo, useState } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { PaymentFlowRef } from "@lookiero/payments-front";
+import { LegacyBoxCheckout } from "@lookiero/payments-front/build/components/PaymentFlow/internals/strategies/LegacyBoxCheckoutStrategy";
+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 { 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";
+
+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 [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
+  const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
+  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+
+  const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState<Status>("idle");
+
+  const submitCheckout: SubmitCheckoutFunction = useCallback(
+    async ({ paymentFlowPayload, sizeChangeEnabled }) => {
+      try {
+        sizeChangeEnabled && (await blockCheckoutBooking());
+      } catch (error) {
+        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");
+            }
+          }
+        },
+      );
+    },
+    [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
+    ) {
+      onError();
+      return "error";
+    }
+
+    return "idle";
+  }, [blockCheckoutBookingStatus, submitCheckoutCommandStatus, onError, startLegacyBoxCheckoutStatus]);
+
+  return [submitCheckout, status];
+};
+
+export type { Status, SubmitCheckoutFunction };
+export { useSubmitCheckout };

package/src/infrastructure/ui/i18n/fetchTranslations.test.ts

@@ -0,0 +1,29 @@
+import { EndpointFunction } from "@lookiero/i18n";
+import { fetchTranslations } from "./fetchTranslations";
+import { translationEndpoint } from "./translationEndpoint";
+
+const translations: EndpointFunction[] = [
+  (locale) => translationEndpoint({ translationsUrl: "", translationsApiKey: "" })(locale),
+  (locale) => translationEndpoint({ translationsUrl: "", translationsApiKey: "" })(locale),
+];
+const locale = "es";
+
+const mockFetchFetchTranslation = jest.fn();
+jest.mock("@lookiero/i18n", () => ({
+  fetchFetchTranslation: jest.fn(() => mockFetchFetchTranslation),
+}));
+
+describe("fetchTranslations", () => {
+  test("does fetch translations with the expected response", async () => {
+    mockFetchFetchTranslation
+      .mockResolvedValueOnce({ test: "test" })
+      .mockResolvedValueOnce({ another_test: "another_test" });
+
+    const results = await fetchTranslations({ translations })({ locale });
+
+    expect(results).toStrictEqual({
+      test: "test",
+      another_test: "another_test",
+    });
+  });
+});

package/src/infrastructure/ui/i18n/fetchTranslations.ts

@@ -0,0 +1,27 @@
+import { EndpointFunction, fetchFetchTranslation, FetchTranslationFuction } from "@lookiero/i18n";
+
+interface FetchTranslationsFuntionArgs {
+  readonly translations: EndpointFunction[];
+}
+
+interface FetchTranslationsFuntion {
+  (args: FetchTranslationsFuntionArgs): FetchTranslationFuction;
+}
+
+const fetchTranslations: FetchTranslationsFuntion =
+  ({ translations }) =>
+  async ({ locale }) => {
+    const translationsMessages = await Promise.all(
+      translations.map((endpoint) => fetchFetchTranslation({ endpoint })({ locale })),
+    );
+
+    return translationsMessages.reduce(
+      (acc, translationMessages) => ({
+        ...acc,
+        ...translationMessages,
+      }),
+      {},
+    );
+  };
+
+export { fetchTranslations };

package/src/infrastructure/ui/i18n/i18n.ts

@@ -0,0 +1,61 @@
+// TODO: deprecated?
+const COLOR_I18N_PREFIX = "catalog.color.";
+
+enum I18nMessages {
+  TOAST_GENERIC_ERROR = "toast_generic_error",
+  ITEM_SIZE = "item.size",
+  ITEM_UNIQUE = "item.unique",
+  ITEM_KEEP_BUTTON = "item.keep_button",
+  ITEM_RETURN_BUTTON = "item.return_button",
+  ITEM_CHANGE_SIZE_BUTTON = "item.change_size_button",
+  ITEM_BANNER_CUSTOMER_KEPT_DECISSION = "item.banner_customer_kept_decission",
+  ITEM_BANNER_CUSTOMER_REPLACED_DECISSION = "item.banner_customer_replaced_decission",
+  ITEM_BANNER_CUSTOMER_RETURNED_DECISSION = "item.banner_customer_returned_decission",
+  ITEM_BANNER_BUTTON = "item.banner_button",
+  SIZE_CHANGE_MODAL_TITLE = "size_change_modal.title",
+  SIZE_CHANGE_MODAL_DESCRIPTION = "size_change_modal.description",
+  SIZE_CHANGE_MODAL_BUTTON = "size_change_modal.button",
+  SIZE_WITHOUT_STOCK_MODAL_TITLE = "size_without_stock_modal.title",
+  SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION = "size_without_stock_modal.description",
+  SIZE_WITHOUT_STOCK_MODAL_BUTTON = "size_without_stock_modal.button",
+  GET_OUT_OF_CHECKOUT_MODAL_TITLE = "get_out_of_checkout_modal.title",
+  GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION = "get_out_of_checkout_modal.description",
+  GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON = "get_out_of_checkout_modal.dismiss_button",
+  GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON = "get_out_of_checkout_modal.confirm_button",
+  FEEDBACK_TITLE = "return_questions_feedback.feedback.title",
+  FEEDBACK_UNANSWERED = "return_questions_feedback.feedback.unanswered",
+  RETURN_QUESTIONS_TITLE = "return_questions.title",
+  RETURN_QUESTIONS_DESCRIPTION = "return_questions.description",
+  RETURN_QUESTIONS_SUBMIT_BUTTON = "return_questions.submit_button",
+  RETURN_QUESTION_MAIN_ALL_OPINION = "return_question.main.all.opinion",
+  RETURN_QUESTION_TOAST_SUCCESS = "return_question.thankyou",
+  SUMMARY_TITLE = "summary.title",
+  SUMMARY_DESCRIPTION = "summary.description",
+  BANNER_DISCOUNT_TEXT = "summary.banner.text",
+  SUMMARY_KEEP_TAB = "summary.keep_tab",
+  SUMMARY_RETURN_TAB = "summary.return_tab",
+  SUMMARY_KEEP_EMPTY = "summary.keep_empty",
+  SUMMARY_RETURN_EMPTY = "summary.return_empty",
+  SUMMARY_TOTAL = "summary.total",
+  SUMMARY_SUBTOTAL = "summary.subtotal",
+  SUMMARY_SUBMIT_BUTTON = "summary.submit_button",
+  SUMMARY_FREE = "summary.free",
+  SUMMARY_DISCOUNT = "summary.discount",
+  SUMMARY_TOTAL_ITEMS_KEPT = "summary.total_items_kept",
+  SUMMARY_CREDIT = "summary.credit",
+  SUMMARY_FEE = "summary.fee",
+  PRODUCT_VARIANT_SIZE_CHANGE = "product_variant.size_change",
+  CHECKOUT_TITLE = "checkout.title",
+  CHECKOUT_PAY_BUTTON = "checkout.pay_button",
+  CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
+  CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
+  CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
+  CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",
+  CHECKOUT_DELIVERY_BANNER = "checkout.delivery_banner",
+  HEADER_CHECKOUT_TITLE = "header.checkout_title",
+  HEADER_COMPLETE_CHECKOUT_TITLE = "header.complete_checkout_title",
+  FEEDBACK_BUTTON = "feedback.button",
+  CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired",
+}
+
+export { I18nMessages, COLOR_I18N_PREFIX };

package/src/infrastructure/ui/i18n/translationEndpoint.test.ts

@@ -0,0 +1,13 @@
+import { translationEndpoint } from "./translationEndpoint";
+
+const translationsUrl = "https://translation_url.com";
+const translationsApiKey = "NZpj4kL_BRo0ugLDTgV34s9ZVlopBFyM";
+const locale = "es";
+
+describe("translationEndpoint", () => {
+  test("create translation endpoint with the expected response", async () => {
+    expect(translationEndpoint({ translationsUrl, translationsApiKey })(locale)).toStrictEqual(
+      "https://translation_url.com/es?key=NZpj4kL_BRo0ugLDTgV34s9ZVlopBFyM&no-folding=true",
+    );
+  });
+});

package/src/infrastructure/ui/i18n/translationEndpoint.ts

@@ -0,0 +1,50 @@
+import { EndpointFunction } from "@lookiero/i18n";
+import { Country } from "../../../projection/shared/country";
+import { Locale } from "../../../projection/shared/locale";
+
+interface TranslationEndpointFunctionArgs {
+  readonly translationsUrl: string;
+  readonly translationsApiKey: string;
+}
+interface TranslationEndpointFunction {
+  (args: TranslationEndpointFunctionArgs): EndpointFunction;
+}
+
+const translationEndpoint: TranslationEndpointFunction =
+  ({ translationsUrl, translationsApiKey }) =>
+  (locale) =>
+    `${translationsUrl}/${locale}?key=${translationsApiKey}&no-folding=true`;
+
+type Project = "user-area-front" | "inventory-catalog" | "checkout";
+
+const COUNTRY: Record<Locale, Country> = {
+  [Locale.ES]: Country.ES,
+  [Locale.FR]: Country.FR,
+  [Locale.EN]: Country.GB,
+  [Locale.IT]: Country.IT,
+  [Locale.PT]: Country.PT,
+  [Locale.DE]: Country.DE,
+  [Locale.AT]: Country.AT,
+  [Locale.NL]: Country.NL,
+  [Locale.SE]: Country.SE,
+};
+
+interface TranslationExternalEndpointFunctionArgs {
+  readonly translationsUrl: string;
+  readonly projects: [project: Project, filter?: string][];
+}
+interface TranslationExternalEndpointFunction {
+  (args: TranslationExternalEndpointFunctionArgs): EndpointFunction;
+}
+
+const translationExternalEndpoint: TranslationExternalEndpointFunction =
+  ({ translationsUrl, projects }) =>
+  (locale) => {
+    const projectsQueryParam = projects
+      .map(([project, filter]) => `projectFilter=${project}${filter ? `:${filter}` : ""}`)
+      .join("&");
+
+    return `${translationsUrl}/${locale}/${COUNTRY[locale as Locale]}?${projectsQueryParam}`;
+  };
+
+export { translationEndpoint, translationExternalEndpoint };

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

@@ -0,0 +1,74 @@
+import { render, RenderResult } from "@testing-library/react-native";
+import React from "react";
+import { Text } from "react-native";
+import { MemoryRouter, Outlet, Route, Routes } from "react-router-native";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
+import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
+
+jest.mock("../../projection/checkout/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}
+              loader={<Text>{loaderText}</Text>}
+              onNotAccessible={onNotAccessible}
+            >
+              <Outlet />
+            </CheckoutAccessibilityMiddleware>
+          }
+        >
+          <Route element={<Text>{checkoutRouteText}</Text>} path="/" />
+        </Route>
+      </Routes>
+    </MemoryRouter>,
+  );
+
+describe("CheckoutAccessibilityMiddleware component", () => {
+  it("renders a loader while processing viewIsCheckoutAccessibleByCustomerId use-case", async () => {
+    (useViewIsCheckoutAccessibleByCustomerId as jest.Mock).mockReturnValue([undefined, QueryStatus.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, QueryStatus.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, QueryStatus.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,39 @@
+import React, { FC, useEffect, useRef } from "react";
+import { Spinner } from "@lookiero/aurora";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
+
+interface CheckoutAccessibilityMiddlewareProps {
+  readonly customerId: string | undefined;
+  readonly onNotAccessible: () => void;
+  readonly loader?: JSX.Element;
+  readonly children: JSX.Element;
+}
+
+const CheckoutAccessibilityMiddleware: FC<CheckoutAccessibilityMiddlewareProps> = ({
+  customerId,
+  onNotAccessible,
+  loader = <Spinner />,
+  children,
+}) => {
+  const [accessible, status] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
+
+  const onNotAccessibleRef = useRef(onNotAccessible);
+  onNotAccessibleRef.current = onNotAccessible;
+
+  const notAccessible = accessible === false || status === QueryStatus.ERROR;
+
+  useEffect(() => {
+    if (notAccessible) {
+      onNotAccessibleRef.current();
+    }
+  }, [notAccessible]);
+
+  return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
+    ? loader
+    : accessible
+      ? children
+      : null;
+};
+
+export { CheckoutAccessibilityMiddleware };