@lookiero/checkout 9.12.0 → 9.13.0

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.tsx

@@ -2,24 +2,24 @@
 import React, { useCallback } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
+import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { I18nMessages } from "../../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 
 const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
-  const titleText = useI18nMessage({ id: returnQuestion.translationKey });
-  const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
+  const unansweredText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_UNANSWERED });
 
   const returnQuestionFeedback = useReturnQuestionFeedback();
 
-  const intl = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const translate = useCallback(
-    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [intl],
+    (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
+    [formatMessage],
   );
   const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(
     " / ",

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./TextareaReturnQuestionItem.style";
@@ -13,7 +14,7 @@ const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA
   returnQuestionParent,
   testID,
 }) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
 
   const placeholderText = useMemo(
     () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import { style } from "./CheckoutHeader.style";
@@ -11,7 +11,7 @@ interface CheckoutHeaderProps {
 }
 
 const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
-  const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+  const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
 
   return (
     <Header testID="checkout-header">

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import { style } from "./ItemDetailHeader.style";
@@ -10,7 +10,7 @@ interface ItemDetailHeaderProps {
   readonly onBack: () => void;
 }
 const ItemDetailHeader: FC<ItemDetailHeaderProps> = ({ onBack }) => {
-  const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+  const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
 
   return (
     <Header testID="item-detail-header">

package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.tsx

@@ -4,7 +4,7 @@ import { generatePath, useNavigate } from "react-router-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { useBasePath } from "../../../../routing/useBasePath";
 import { Header } from "../Header";
@@ -34,7 +34,7 @@ interface ItemHeaderProps {
   readonly onPrevious?: OnPreviousItemFunction;
 }
 const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) => {
-  const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+  const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
   const itemIndex = items.indexOf(item);
   const isFirstItem = itemIndex === 0;
   const isLastItem = itemIndex === items.length - 1;

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

@@ -1,3 +1,5 @@
+const DOMAIN = "CheckoutI18n";
+
 // TODO: deprecated?
 const COLOR_I18N_PREFIX = "catalog.color.";
 
@@ -58,4 +60,4 @@ enum I18nMessages {
   CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired",
 }
 
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };

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

@@ -1,12 +1,15 @@
 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 { createI18nProvider } from "@lookiero/i18n-react";
 import { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
 import { Logger, LoggerProvider } from "@lookiero/sty-psp-logging";
+import { DOMAIN } from "../i18n/i18n";
 import { BasePathProvider } from "../routing/useBasePath";
 
+const I18nProvider = createI18nProvider({ domain: DOMAIN });
+
 interface RenderArgs {
   readonly locale?: string;
   readonly messages?: TranslationMessages;
@@ -24,13 +27,13 @@ const renderWrapper: RenderWrapperFunction =
   // eslint-disable-next-line react/display-name, react/prop-types
   ({ children }) => (
     <Aurora>
-      <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
+      <I18nProvider locale={locale as string} messages={messages} onError={() => void 0}>
         <LoggerProvider logger={logger}>
           <BasePathProvider basePath="">
             <Wrapper>{children}</Wrapper>
           </BasePathProvider>
         </LoggerProvider>
-      </IntlProvider>
+      </I18nProvider>
     </Aurora>
   );
 

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

@@ -6,6 +6,7 @@ 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";
+import { DOMAIN } from "../i18n/i18n";
 
 const { colorBgBase } = theme();
 
@@ -17,7 +18,7 @@ const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
     <PortalProvider rootHostName="Checkout">
       <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-      <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
       {/*
         We are using the Aurora's PortalProvider at this level for notifications to work properly.
 

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

@@ -15,7 +15,7 @@ import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { I18nMessages } from "../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
@@ -34,8 +34,8 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
-  const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
-  const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
+  const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
   const { screen } = useDevice();
   const [pricingHeight, setPricingHeight] = useState(0);
   const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 
 const DeliveryBanner = () => {
   const { screen } = useDevice();
@@ -10,7 +10,7 @@ const DeliveryBanner = () => {
     <InfoBox
       contentAlign={screen.L ? ALIGN.CENTER : undefined}
       testID="delivery-banner"
-      text={useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER })}
+      text={useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER })}
       type={INFOBOX_TYPE.SQUARED}
     />
   );

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.tsx

@@ -18,7 +18,7 @@ import { HostDefaultCheckoutQuestionItem } from "../../../../components/organism
 import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem";
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 
 const checkoutQuestionItems: CheckoutQuestionItems = {
   [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
@@ -39,7 +39,7 @@ const CheckoutQuestionsForm: FC<CheckoutQuestionsFormProps> = ({
   submitButtonDisabled,
   onSubmit,
 }) => {
-  const buttonText = useI18nMessage({ id: I18nMessages.FEEDBACK_BUTTON });
+  const buttonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_BUTTON });
 
   const feedback = useCheckoutQuestionFeedback();
   const handlePress = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.tsx

@@ -4,7 +4,7 @@ import { InfoBox, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CustomerDecissionBanner.style";
 
 type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
@@ -20,8 +20,8 @@ interface CustomerDecissionBannerProps {
   readonly onPress: () => void;
 }
 const CustomerDecissionBanner: FC<CustomerDecissionBannerProps> = ({ checkoutItemStatus, onPress }) => {
-  const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
-  const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
+  const decissionText = useI18nMessage({ domain: DOMAIN, id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
+  const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
   const screenSize = useScreenSize();
   const isSmallScreen = screenSize === "S";
 

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
 
 interface GetOutOfCheckoutModalProps {
@@ -12,10 +12,16 @@ interface GetOutOfCheckoutModalProps {
   readonly onConfirm: () => void;
 }
 const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDismiss, onConfirm }) => {
-  const titleText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
-  const descriptionText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
-  const dismissButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON });
-  const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
+  const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
+  const dismissButtonText = useI18nMessage({
+    domain: DOMAIN,
+    id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON,
+  });
+  const confirmButtonText = useI18nMessage({
+    domain: DOMAIN,
+    id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON,
+  });
 
   return (
     <Modal portalHostName="Checkout" visible={visible} onClose={onDismiss}>

package/src/infrastructure/ui/views/item/components/itemActions/ItemActions.tsx

@@ -7,7 +7,7 @@ import { Sticky } from "@lookiero/sty-psp-ui";
 import { ProductVariantProjection } from "../../../../../../projection/bookedProductsVariants/bookedProductsVariants";
 import { size } from "../../../../../../projection/size/size";
 import { Body } from "../../../../components/layouts/body/Body";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { SelectModal } from "../selectModal/SelectModal";
 import { style } from "./ItemActions.style";
 
@@ -33,9 +33,9 @@ const ItemActions: FC<ItemActionsProps> = ({
 }) => {
   const [modalVisible, setModalVisible] = useState(false);
 
-  const changeSizeButtonText = useI18nMessage({ id: I18nMessages.ITEM_CHANGE_SIZE_BUTTON });
-  const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
-  const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
+  const changeSizeButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_CHANGE_SIZE_BUTTON });
+  const keepButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_KEEP_BUTTON });
+  const returnButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_RETURN_BUTTON });
 
   const sizeSelectorOptions = useMemo(
     () =>

package/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.tsx

@@ -7,7 +7,7 @@ import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { PriceProjection } from "../../../../../../projection/price/price";
 import { SizeProjection, size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./ProductVariantDescription.style";
 
 interface ProductVariantDescriptionProps {
@@ -24,8 +24,8 @@ const ProductVariantDescription: FC<ProductVariantDescriptionProps> = ({
   size: sizeProjection,
   country,
 }) => {
-  const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
-  const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+  const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
+  const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
   const screenDevice = useScreenSize();
   const isDesktopScreen = screenDevice !== "S";
 

package/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.tsx

@@ -11,7 +11,7 @@ import {
 } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
 import { HostDefaultReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem";
 import { ReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./ReturnQuestionsFeedback.style";
 
 const returnQuestionItems: ReturnQuestionItems = {
@@ -29,7 +29,7 @@ interface ReturnQuestionsFeedbackProps {
 }
 
 const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps> = ({ returnQuestions, onEditFeedback }) => {
-  const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_TITLE });
 
   return (
     <View>

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.tsx

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./SizeWithoutStockModal.style";
 
 interface SizeWithoutStockModalProps {
@@ -11,9 +11,9 @@ interface SizeWithoutStockModalProps {
   readonly onDismiss: () => void;
 }
 const SizeWithoutStockModal: FC<SizeWithoutStockModalProps> = ({ visible, onDismiss }) => {
-  const titleText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
-  const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
-  const buttonText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
+  const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
+  const buttonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
 
   return (
     <Modal portalHostName="Checkout" visible={visible} showCloseButton onClose={onDismiss}>

package/src/infrastructure/ui/views/return/components/price/Price.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
 import { PriceProjection } from "../../../../../../projection/price/price";
+import { DOMAIN } from "../../../../i18n/i18n";
 import { style } from "./Price.style";
 
 interface PriceProps {
@@ -12,11 +13,13 @@ interface PriceProps {
 const Price: FC<PriceProps> = ({ price, withPercentage = false }) => {
   const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
   const productPrice = useI18nNumber({
+    domain: DOMAIN,
     value: price.amount / 100,
     style: "currency",
     currency: price.currency,
   });
   const productDiscountedPrice = useI18nNumber({
+    domain: DOMAIN,
     value: (price.discountedPrice?.amount || 0) / 100,
     style: "currency",
     currency: price.currency,

package/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.tsx

@@ -7,7 +7,7 @@ import { Column, Row } from "@lookiero/sty-psp-ui";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { size } from "../../../../../../projection/size/size";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Price } from "../price/Price";
 import { IMAGE_SIZE, style } from "./ProductVariantPreview.style";
 
@@ -20,8 +20,8 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
   const cdnImageUrl = useMediaImage();
   const { screen } = useDevice();
 
-  const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
-  const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+  const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
+  const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
 
   const {
     productVariant: { media, brand, name, size: sizeProjection },

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -32,7 +32,7 @@ import { HostStackReturnQuestionItem } from "../../../../components/organisms/re
 import { RadioReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem";
 import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
 import { ItemDetailHeader } from "../../../../components/templates/header/itemDetailHeader/ItemDetailHeader";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { useBasePath } from "../../../../routing/useBasePath";
 import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
@@ -70,9 +70,9 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
 
   const { screen } = useDevice();
 
-  const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
-  const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
-  const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_TITLE });
+  const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
+  const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
 
   const feedback = useReturnQuestionFeedback();
   const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({

package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx

@@ -10,7 +10,7 @@ import { PriceProjection } from "../../../../../../projection/price/price";
 import { size, SizeProjection } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
-import { COLOR_I18N_PREFIX, I18nMessages } from "../../../../i18n/i18n";
+import { COLOR_I18N_PREFIX, DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { IMAGE_WIDTH, style } from "./ProductVariant.style";
 
 interface ProductVariantStyle {
@@ -41,9 +41,9 @@ const ProductVariant: FC<ProductVariantProps> = ({
   style: customStyle,
   onPress,
 }) => {
-  const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
-  const colorLabel = useI18nMessage({ id: color.name, prefix: COLOR_I18N_PREFIX });
-  const sizeChangeText = useI18nMessage({ id: I18nMessages.PRODUCT_VARIANT_SIZE_CHANGE });
+  const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
+  const colorLabel = useI18nMessage({ domain: DOMAIN, id: color.name, prefix: COLOR_I18N_PREFIX });
+  const sizeChangeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.PRODUCT_VARIANT_SIZE_CHANGE });
 
   const cdnImageUrl = useMediaImage();
 

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

@@ -16,7 +16,7 @@ import { useTrackPressPricing } from "../../../tracking/useTrackPressPricing";
 import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { Body } from "../../components/layouts/body/Body";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { I18nMessages } from "../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
@@ -33,9 +33,9 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
   } = useStaticInfo();
   const [pricingCollapsed, setPricingCollapsed] = useState(true);
   const [pricingHeight, setPricingHeight] = useState(0);
-  const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
-  const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
-  const submitButtonText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TITLE });
+  const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_DESCRIPTION });
+  const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
   const { screen } = useDevice();
 
   const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.tsx

@@ -5,7 +5,7 @@ import { Button, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 import { Price } from "../../../../components/atoms/price/Price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Pricing } from "../pricing/Pricing";
 import { style } from "./CollapsiblePricing.style";
 
@@ -29,8 +29,9 @@ const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
 }) => {
   const { pendingToPay } = pricing;
 
-  const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
+  const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
   const totalCheckoutItemsKeptText = useI18nMessage({
+    domain: DOMAIN,
     id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
     values: { items: totalCheckoutItemsKept.toString() },
   });

package/src/infrastructure/ui/views/summary/components/pricing/Pricing.tsx

@@ -4,7 +4,7 @@ import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 import { Price } from "../../../../components/atoms/price/Price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./Pricing.style";
 
 interface RowProps {
@@ -30,19 +30,21 @@ interface PricingProps {
 const Pricing: FC<PricingProps> = ({ pricing, totalCheckoutItemsKept }) => {
   const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
 
-  const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
+  const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
   const totalCheckoutItemsKeptText = useI18nMessage({
+    domain: DOMAIN,
     id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
     values: { items: totalCheckoutItemsKept.toString() },
   });
-  const subtotalText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBTOTAL });
-  const freeText = useI18nMessage({ id: I18nMessages.SUMMARY_FREE });
+  const subtotalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBTOTAL });
+  const freeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FREE });
   const discountText = useI18nMessage({
+    domain: DOMAIN,
     id: I18nMessages.SUMMARY_DISCOUNT,
     values: { discount: discountPercentage?.toString() },
   });
-  const creditText = useI18nMessage({ id: I18nMessages.SUMMARY_CREDIT });
-  const feeText = useI18nMessage({ id: I18nMessages.SUMMARY_FEE });
+  const creditText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_CREDIT });
+  const feeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FEE });
 
   return (
     <View>

package/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.tsx

@@ -10,7 +10,7 @@ import {
   CheckoutItemProjection,
 } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { PriceProjection } from "../../../../../../projection/price/price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant, ProductVariantStyle } from "../../../shared/components/productVariant/ProductVariant";
 import { style } from "./CheckoutItemsTabs.style";
 
@@ -65,11 +65,11 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
   onChanged,
 }) => {
   const { screen } = useDevice();
-  const keepTabText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_TAB });
-  const returnTabText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_TAB });
+  const keepTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_TAB });
+  const returnTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_TAB });
 
-  const keepEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_EMPTY });
-  const returnEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_EMPTY });
+  const keepEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_EMPTY });
+  const returnEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_EMPTY });
 
   const handleOnPressItem = useCallback((checkoutItemId: string) => onPressItem(checkoutItemId), [onPressItem]);