@lookiero/checkout 9.12.0 → 9.14.0

package/dist/index.js

@@ -5,12 +5,13 @@ import { Segment } from "@lookiero/sty-psp-segment";
 import { CheckoutStatus } from "./src/domain/checkout/model/checkout";
 import { bootstrap as checkoutBootstrap } from "./src/infrastructure/delivery/bootstrap";
 import { root } from "./src/infrastructure/ui/Root";
+import { DOMAIN } from "./src/infrastructure/ui/i18n/i18n";
 import { viewFirstAvailableCheckoutByCustomerId } from "./src/projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 const bootstrap = ({ apiUrl, getAuthToken, translations, sentry, kameleoon }) => {
     const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
     const I18n = i18n({
         fetchTranslation: fetchTranslations({ translations }),
-        domain: "CheckoutI18n",
+        domain: DOMAIN,
     });
     const firstAvailableCheckoutByCustomerId = ({ customerId }) => queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId }));
     return {

package/dist/src/Expo.js

@@ -1,4 +1,6 @@
 import { registerRootComponent } from "expo";
+import { enableLegacyWebImplementation } from "react-native-gesture-handler";
 import "react-native-get-random-values";
 import { ExpoRoot } from "./ExpoRoot";
+enableLegacyWebImplementation(true);
 registerRootComponent(ExpoRoot);

package/dist/src/ExpoRoot.js

@@ -14,9 +14,10 @@ import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
 import { root } from "./infrastructure/ui/Root";
+import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { VERSION } from "./version";
-const locale = Locale.es_ES;
+const locale = Locale.en_GB;
 const subscription = "b";
 const order = {
     isFirstOrder: false,
@@ -24,7 +25,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "8107b5fe-8209-4b8f-86ef-85657cc496be",
+    customerId: "a4355713-469b-4684-bf90-3215702dfb1c",
     country: Country.ES,
     segment: Segment.WOMEN,
 };
@@ -39,7 +40,7 @@ const apiUrl = Platform.OS !== "web"
     : __DEV__
         ? "/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDg3OTAsImV4cCI6MTc0NDQ0MzcwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTEtMDgiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiNzRjYjRmNzYtM2YxNC00OTgzLTgxYTYtMmVlMmE5YTI3NWQ0IiwiaWF0IjoxNzQxNzY1MzAyfQ.VrfjWZlhuG8dhDSFTbyGyClRFGbhdx9SglkE8rEEJyE";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2ODkxMDAsImV4cCI6MTc0NjI3ODQwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMDMiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiYTQzNTU3MTMtNDY5Yi00Njg0LWJmOTAtMzIxNTcwMmRmYjFjIiwiaWF0IjoxNzQzNjg2NDAyfQ.pmqFo-4s0USFpzCnijRt78bWuBdu2Q7f4L9UtOkfAwo";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -49,7 +50,7 @@ const externalTranslationsUrl = Platform.OS !== "web"
 const translations = [
     (locale) => translationExternalEndpoint({
         translationsUrl: externalTranslationsUrl,
-        projects: [["user-area-front"], ["inventory-catalog", "feature;feature_value;Color"], ["checkout"]],
+        projects: [["checkout"]],
     })(locale),
 ];
 const useRedirect = () => ({
@@ -84,7 +85,7 @@ const { Component: Messaging, queryBus } = process.env.EXPO_PUBLIC_APP_VARIANT =
     : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
 const I18n = i18n({
     fetchTranslation: fetchTranslations({ translations }),
-    domain: "CheckoutI18n",
+    domain: DOMAIN,
 });
 const Root = root({
     Messaging,

package/dist/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { I18nMessages } from "../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../i18n/i18n";
 import { style } from "./FiveItemsDiscountBanner.style";
 const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
     const bannerText = useI18nMessage({
+        domain: DOMAIN,
         id: I18nMessages.BANNER_DISCOUNT_TEXT,
         values: {
             discount: fiveItemsDiscount.toString(),

package/dist/src/infrastructure/ui/components/atoms/price/Price.js

@@ -2,6 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../i18n/i18n";
 import { style } from "./Price.style";
 const PRICE_VARIANT = {
     default: { detail: true, level: 1 },
@@ -12,11 +13,13 @@ const PRICE_VARIANT = {
 const Price = ({ price, variant = "default", 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/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js

@@ -2,12 +2,13 @@ import React, { useCallback } from "react";
 import { TouchableOpacity } from "react-native";
 import { ALIGN, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./ButtonCheckoutQuestionItem.style";
 const ACTIVE_OPACITY = 0.6;
 const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
-    const optionText = useI18nMessage({ id: checkoutQuestion.name });
+    const optionText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
     const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
     return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, feedback === checkoutQuestion.id && style.buttonActive], testID: testID, onPress: handleOnPress },
         React.createElement(Text, { align: ALIGN.CENTER, level: 3, style: feedback === checkoutQuestion.id && style.textActive, action: true }, optionText)));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.js

@@ -2,9 +2,10 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultCheckoutQuestionItem.style";
 const HostDefaultCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
-    const titleText = useI18nMessage({ id: checkoutQuestion.name });
+    const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         React.createElement(View, { style: style.content }, children)));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.js

@@ -2,9 +2,10 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { style } from "./HostSelectCheckoutQuestionItem.style";
 const HostSelectCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
-    const titleText = useI18nMessage({ id: checkoutQuestion.name });
+    const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         React.createElement(View, { style: style.content }, children)));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo } from "react";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./TextareaCheckoutQuestionItem.style";
 const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
-    const { formatMessage } = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""), [formatMessage, checkoutQuestion.placeholder]);
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.js

@@ -1,12 +1,12 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { Text, View } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { I18nMessages } from "../../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children, }) => {
-    const { formatMessage } = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const isAllOptions = returnQuestion.translationKey === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
     return (React.createElement(React.Fragment, null,
         returnQuestionWithTranslationKey(returnQuestion) && returnQuestion.translationKey !== " " && !isAllOptions ? (React.createElement(View, { style: style.title },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.js

@@ -2,10 +2,11 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { style } from "./HostRadioGroupReturnQuestionItem.style";
 const HostRadioGroupReturnQuestionItem = ({ returnQuestion, children, testID, }) => {
-    const { formatMessage } = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: style.wrapper, testID: testID },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -2,21 +2,21 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { ButtonIcon } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
 const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, testID, }) => {
-    const { formatMessage } = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPress = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
     const feedback = useReturnQuestionFeedback();
     const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
-    const intl = useIntl();
-    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
+    const translate = useCallback((returnQuestionName) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [formatMessage]);
     const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
     const [deepestReturnQuestionWithFeedback, isLeaf] = deepestReturnQuestionWithFeedbackForReturnQuestion({
         feedback,

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.js

@@ -3,13 +3,14 @@ import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { COLOR, Text } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
+import { DOMAIN } from "../../../../../../i18n/i18n";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
 import { style } from "./HostStackReturnQuestionItem.style";
 const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const { formatMessage } = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
     const feedbackReturnQuestion = feedback
         ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.js

@@ -1,13 +1,14 @@
 import React from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
 const ModalOptionReturnQuestionItems = ({ portalHostName, returnQuestion, visible, onClose, }) => {
-    const { formatMessage } = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const title = formatMessage({ id: returnQuestion.translationKey });
     return (React.createElement(Modal, { portalHostName: portalHostName, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: style.modalContent },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js

@@ -3,11 +3,12 @@ import React, { useCallback } from "react";
 import { TouchableHighlight } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
 const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
     const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
-    const optionText = useI18nMessage({ id: returnQuestion.translationKey });
+    const optionText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
     const handleOnPress = useCallback(() => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: returnQuestion.id }), [onChange, returnQuestion.id, returnQuestionParent.id]);
     return (React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: containerUnderlayColor, onPress: handleOnPress },
         React.createElement(Text, { level: 3, style: style.text }, optionText)));

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -1,19 +1,20 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useState } from "react";
 import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
-import { useIntl } from "@lookiero/i18n-react";
+import { useI18n } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style } from "./RadioReturnQuestionItem.style";
 const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
-    const intl = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const [modalVisible, setModalVisible] = useState(false);
     const { feedback: feedbackId, onChange, clear, } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const feedback = useReturnQuestionFeedback();
-    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
+    const translate = useCallback((returnQuestionName) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [formatMessage]);
     const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
-    const optionText = intl.formatMessage({ id: returnQuestion.translationKey });
+    const optionText = formatMessage({ id: returnQuestion.translationKey });
     const hasChildren = Boolean(returnQuestion.children && returnQuestion.children.length > 0);
     const handleOnModalClose = useCallback(() => {
         // Uncomment if we want to clear current selection (and update callback's dependencies)

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.js

@@ -2,17 +2,17 @@
 import React, { useCallback } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
-import { I18nMessages } from "../../../../../i18n/i18n";
+import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
+import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 const ReturnQuestionFeedbackItem = ({ 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 translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
+    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const translate = useCallback((returnQuestionName) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [formatMessage]);
     const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
     return (React.createElement(View, { style: style.container },
         React.createElement(Text, { level: 2, style: style.title, detailBold: true }, titleText),

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -1,12 +1,13 @@
 /* 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 { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./TextareaReturnQuestionItem.style";
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
-    const { formatMessage } = useIntl();
+    const { formatMessage } = useI18n({ domain: DOMAIN });
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.js

@@ -1,12 +1,12 @@
 import React 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";
 const CheckoutHeader = ({ onBack }) => {
-    const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+    const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
     return (React.createElement(Header, { testID: "checkout-header" },
         React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: onBack }),
         React.createElement(Text, { level: 3, action: true }, title),

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.js

@@ -1,12 +1,12 @@
 import React 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";
 const ItemDetailHeader = ({ onBack }) => {
-    const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
         React.createElement(Text, { level: 3, action: true }, title),

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.js

@@ -2,14 +2,14 @@ import React, { useCallback } from "react";
 import { generatePath, useNavigate } from "react-router-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-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";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import style from "./ItemHeader.style";
 const ItemHeader = ({ 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/dist/src/infrastructure/ui/i18n/i18n.d.ts

@@ -1,3 +1,4 @@
+declare const DOMAIN = "CheckoutI18n";
 declare const COLOR_I18N_PREFIX = "catalog.color.";
 declare enum I18nMessages {
     TOAST_GENERIC_ERROR = "toast_generic_error",
@@ -55,4 +56,4 @@ declare enum I18nMessages {
     FEEDBACK_BUTTON = "feedback.button",
     CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired"
 }
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };

package/dist/src/infrastructure/ui/i18n/i18n.js

@@ -1,3 +1,4 @@
+const DOMAIN = "CheckoutI18n";
 // TODO: deprecated?
 const COLOR_I18N_PREFIX = "catalog.color.";
 var I18nMessages;
@@ -57,4 +58,4 @@ var I18nMessages;
     I18nMessages["FEEDBACK_BUTTON"] = "feedback.button";
     I18nMessages["CHECKOUT_TOAST_BOOKING_EXPIRED"] = "checkout.toast_booking_expired";
 })(I18nMessages || (I18nMessages = {}));
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };

package/dist/src/infrastructure/ui/test/render.js

@@ -1,14 +1,16 @@
 import { render } from "@testing-library/react-native";
 import { mock } from "jest-mock-extended";
 import React, { Fragment } from "react";
-import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
+import { createI18nProvider } from "@lookiero/i18n-react";
 import { LoggerProvider } from "@lookiero/sty-psp-logging";
+import { DOMAIN } from "../i18n/i18n";
 import { BasePathProvider } from "../routing/useBasePath";
+const I18nProvider = createI18nProvider({ domain: DOMAIN });
 const renderWrapper = ({ locale, messages = {}, wrapper: Wrapper = Fragment, logger = mock() }) => 
 // eslint-disable-next-line react/display-name, react/prop-types
 ({ children }) => (React.createElement(Aurora, null,
-    React.createElement(IntlProvider, { locale: locale, messages: messages, onError: () => void 0 },
+    React.createElement(I18nProvider, { locale: locale, messages: messages, onError: () => void 0 },
         React.createElement(LoggerProvider, { logger: logger },
             React.createElement(BasePathProvider, { basePath: "" },
                 React.createElement(Wrapper, null, children))))));

package/dist/src/infrastructure/ui/views/App.js

@@ -6,10 +6,11 @@ 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();
 const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
     React.createElement(PortalProvider, { rootHostName: "Checkout" },
         React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
-        React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, portalHostName: "Checkout" }),
+        React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, domain: DOMAIN, portalHostName: "Checkout" }),
         React.createElement(AuroraPortalProvider, null, children))));
 export { App };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -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";
@@ -25,8 +25,8 @@ import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 const Checkout = ({ 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 }) => setPricingHeight(height), []);

package/dist/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.js

@@ -1,9 +1,9 @@
 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();
-    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
+    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
 };
 export { DeliveryBanner };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js

@@ -11,7 +11,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 = {
     [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
     [CheckoutQuestionType.HOST_TEXTAREA]: HostDefaultCheckoutQuestionItem,
@@ -21,7 +21,7 @@ const checkoutQuestionItems = {
     [CheckoutQuestionType.BUTTON]: ButtonCheckoutQuestionItem,
 };
 const CheckoutQuestionsForm = ({ checkoutQuestions, 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]);
     const filteredCheckoutQuestions = useMemo(() => {

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -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";
 const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
@@ -12,8 +12,8 @@ const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
 };
 const CustomerDecissionBanner = ({ 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";
     return (React.createElement(View, { style: [style.container, isSmallScreen ? style.smallContainer : null] },

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -3,13 +3,19 @@ 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";
 const GetOutOfCheckoutModal = ({ 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 (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
             React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -5,14 +5,14 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { Sticky } from "@lookiero/sty-psp-ui";
 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";
 const ItemActions = ({ productVariants, currentProductVariant, country, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
     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(() => (productVariants || []).map((productVariant) => ({
         label: size({ size: productVariant.size, country }),
         value: productVariant.id,

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -5,11 +5,11 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { 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";
 const ProductVariantDescription = ({ brand, name, price, 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";
     return (React.createElement(View, { style: [style.container, isDesktopScreen ? null : style.smallContainer] },