@lookiero/checkout 9.12.0 → 9.13.0

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -3,12 +3,12 @@ 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";
 const SizeWithoutStockModal = ({ 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 (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, showCloseButton: true, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
             React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),

package/dist/src/infrastructure/ui/views/return/components/price/Price.js

@@ -2,15 +2,18 @@ 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 = ({ 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/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.js

@@ -5,14 +5,14 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { Column, Row } from "@lookiero/sty-psp-ui";
 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";
 const ProductVariantPreview = ({ 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 }, price, } = item;
     const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
     return (React.createElement(View, { style: [style.wrapper, !screen.S && style.mobileWrapper], testID: "product-variant-preview" },

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -24,7 +24,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";
@@ -43,9 +43,9 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     const basePath = useBasePath();
     const logger = useLogger();
     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({
         checkoutItemId: checkoutItem.id,

package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.js

@@ -7,12 +7,12 @@ import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/
 import { size } 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";
 const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color, status, country, 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();
     return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
         React.createElement(View, { style: style.row },

package/dist/src/infrastructure/ui/views/summary/Summary.js

@@ -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";
@@ -25,9 +25,9 @@ const Summary = ({ layout: Layout, children }) => {
     const { customer: { customerId, country, segment }, } = 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 });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.js

@@ -4,13 +4,14 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-na
 import { Button, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 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";
 const CollapsiblePricing = ({ pricing, totalCheckoutItemsKept, collapsible = true, collapsed = false, submitButtonText, onPress = () => void 0, onSubmit, }) => {
     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/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -3,26 +3,28 @@ import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Price } from "../../../../components/atoms/price/Price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./Pricing.style";
 const Row = ({ action = false, text, level = 3, children }) => (React.createElement(View, { style: style.row },
     React.createElement(Text, { action: action, level: level }, text),
     children));
 const Pricing = ({ 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 (React.createElement(View, null,
         React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
             React.createElement(Price, { price: subtotal, variant: "subtotal" })),

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -4,17 +4,17 @@ import { Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Tabs } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant } from "../../../shared/components/productVariant/ProductVariant";
 import { style } from "./CheckoutItemsTabs.style";
 const CheckoutItem = ({ checkoutItemStatus, checkoutItemProductVariant, checkoutItemPrice, country, testID, style: customStyle, onPress, }) => (React.createElement(View, { testID: testID },
     React.createElement(ProductVariant, { brand: checkoutItemProductVariant.brand, color: checkoutItemProductVariant.color, country: country, media: checkoutItemProductVariant.media, name: checkoutItemProductVariant.name, price: checkoutItemPrice, size: checkoutItemProductVariant.size, status: checkoutItemStatus, style: customStyle, onPress: onPress })));
 const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned, country, onPressItem, onChanged, }) => {
     const { screen } = useDevice();
-    const keepTabText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_TAB });
-    const returnTabText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_TAB });
-    const keepEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_EMPTY });
-    const returnEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_EMPTY });
+    const keepTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_TAB });
+    const returnTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_TAB });
+    const keepEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_EMPTY });
+    const returnEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_EMPTY });
     const handleOnPressItem = useCallback((checkoutItemId) => onPressItem(checkoutItemId), [onPressItem]);
     const data = useMemo(() => [{ id: "0" }, { id: "1" }], []);
     const renderItem = useCallback(({ index }) => index === 0 ? (checkoutItemsKept.length === 0 ? (React.createElement(Text, { style: style.emptyText }, keepEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, country: country, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.12.0";
+export declare const VERSION = "9.13.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.12.0";
+export const VERSION = "9.13.0";

package/index.ts

@@ -9,6 +9,7 @@ import { CheckoutStatus } from "./src/domain/checkout/model/checkout";
 import { KameleoonEnvironment } from "./src/infrastructure/ab-testing/kameleoonEnvironment";
 import { bootstrap as checkoutBootstrap } from "./src/infrastructure/delivery/bootstrap";
 import { root, RootProps } from "./src/infrastructure/ui/Root";
+import { DOMAIN } from "./src/infrastructure/ui/i18n/i18n";
 import { CheckoutProjection } from "./src/projection/checkout/checkout";
 import { viewFirstAvailableCheckoutByCustomerId } from "./src/projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { Customer } from "./src/projection/customer/customer";
@@ -44,7 +45,7 @@ const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, translations, sent
   const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
   const I18n = i18n({
     fetchTranslation: fetchTranslations({ translations }),
-    domain: "CheckoutI18n",
+    domain: DOMAIN,
   });
 
   const firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction = ({ customerId }) =>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.12.0",
+  "version": "9.13.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -24,10 +24,10 @@
     "@lookiero/sty-psp-ab-testing": "^0.3",
     "@lookiero/sty-psp-expo-config": "^0.2",
     "@lookiero/sty-psp-http": "^2.0",
-    "@lookiero/sty-psp-i18n": "^0.3",
+    "@lookiero/sty-psp-i18n": "^0.4",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^0.7",
+    "@lookiero/sty-psp-notifications": "^0.8",
     "@lookiero/sty-psp-react-native": "^0.3",
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
@@ -61,7 +61,6 @@
     "expo-crypto": "~13.0.2",
     "jest-mock-extended": ">=3",
     "jest-when": ">=3",
-    "react-intl": "^6.5.1",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-get-random-values": "~1.11.0",
     "react-native-reanimated": "~3.10.1",
@@ -74,8 +73,8 @@
     "@lookiero/aurora-fonts": ">=2",
     "@lookiero/aurora-iconfont": ">=3",
     "@lookiero/event": "^0.3",
-    "@lookiero/i18n": ">=1",
-    "@lookiero/i18n-react": ">=1",
+    "@lookiero/i18n": ">=2",
+    "@lookiero/i18n-react": ">=2",
     "@lookiero/payments-front": "6.0.3",
     "apollo-boost": "0.4.4",
     "expo": ">=51",

package/src/ExpoRoot.tsx

@@ -17,13 +17,14 @@ import { KameleoonEnvironment } from "./infrastructure/ab-testing/kameleoonEnvir
 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 { Customer } from "./projection/customer/customer";
 import { Order } from "./projection/order/order";
 import { Subscription } from "./projection/subscription/subscription";
 import { VERSION } from "./version";
 
-const locale: Locale = Locale.es_ES;
+const locale: Locale = Locale.en_GB;
 const subscription: Subscription = "b";
 const order: Order = {
   isFirstOrder: false,
@@ -32,7 +33,7 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "8107b5fe-8209-4b8f-86ef-85657cc496be",
+  customerId: "cc6dcaf3-9ec6-4b1e-bfbb-1ac404c6c162",
   country: Country.ES,
   segment: Segment.WOMEN,
 };
@@ -64,7 +65,7 @@ const translations: EndpointFunction[] = [
   (locale) =>
     translationExternalEndpoint({
       translationsUrl: externalTranslationsUrl,
-      projects: [["user-area-front"], ["inventory-catalog", "feature;feature_value;Color"], ["checkout"]],
+      projects: [["checkout"]],
     })(locale),
 ];
 
@@ -105,7 +106,7 @@ const { Component: Messaging, queryBus } =
     : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
 const I18n = i18n({
   fetchTranslation: fetchTranslations({ translations }),
-  domain: "CheckoutI18n",
+  domain: DOMAIN,
 });
 const Root = root({
   Messaging,

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.tsx

@@ -1,7 +1,7 @@
 import React, { FC } 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";
 
 interface FiveItemsDiscountBannerProps {
@@ -9,10 +9,11 @@ interface FiveItemsDiscountBannerProps {
 }
 const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps> = ({ fiveItemsDiscount }) => {
   const bannerText = useI18nMessage({
+    domain: DOMAIN,
     id: I18nMessages.BANNER_DISCOUNT_TEXT,
     values: {
       discount: fiveItemsDiscount.toString(),
-      b: (chunks) => (
+      b: (chunks: string[]) => (
         <Text as="span" display={DISPLAY.INLINE} level={2} style={style.textBold}>
           {chunks}
         </Text>

package/src/infrastructure/ui/components/atoms/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";
 
 type PriceVariant = "default" | "detail" | "subtotal" | "total";
@@ -29,11 +30,13 @@ interface PriceProps {
 const Price: FC<PriceProps> = ({ 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/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -2,6 +2,7 @@ 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 { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./ButtonCheckoutQuestionItem.style";
@@ -15,7 +16,7 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
 }: CheckoutQuestionItemProps) => {
   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],

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.tsx

@@ -2,6 +2,7 @@ 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 { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./HostDefaultCheckoutQuestionItem.style";
 
@@ -9,7 +10,7 @@ const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   children,
 }: CheckoutQuestionItemProps) => {
-  const titleText = useI18nMessage({ id: checkoutQuestion.name });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
 
   return (
     <>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.tsx

@@ -2,6 +2,7 @@ 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 { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./HostSelectCheckoutQuestionItem.style";
 
@@ -9,7 +10,7 @@ const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   children,
 }: CheckoutQuestionItemProps) => {
-  const titleText = useI18nMessage({ id: checkoutQuestion.name });
+  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
 
   return (
     <>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.tsx

@@ -1,6 +1,7 @@
 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 { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./TextareaCheckoutQuestionItem.style";
@@ -10,7 +11,7 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestionParentId,
   testID,
 }: CheckoutQuestionItemProps) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const placeholderText = useMemo(
     () => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""),
     [formatMessage, checkoutQuestion.placeholder],

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.tsx

@@ -1,10 +1,10 @@
 /* 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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { I18nMessages } from "../../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 
@@ -12,7 +12,7 @@ const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_
   returnQuestion,
   children,
 }) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const isAllOptions = returnQuestion.translationKey === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
 
   return (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.tsx

@@ -2,8 +2,9 @@
 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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./HostRadioGroupReturnQuestionItem.style";
 
@@ -12,7 +13,7 @@ const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HO
   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],

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.tsx

@@ -2,9 +2,10 @@
 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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import {
   useReturnQuestionFeedback,
   useReturnQuestionFeedbackForReturnQuestion,
@@ -22,7 +23,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
   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],
@@ -34,10 +35,9 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_S
 
   const feedback = useReturnQuestionFeedback();
   const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
-  const intl = useIntl();
   const translate = useCallback(
-    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [intl],
+    (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
+    [formatMessage],
   );
   const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
 

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

@@ -3,9 +3,10 @@ import React, { useCallback, useMemo } from "react";
 import { LayoutChangeEvent, 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 { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
+import { DOMAIN } from "../../../../../../i18n/i18n";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../../ReturnQuestionItem";
@@ -16,7 +17,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
   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/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.tsx

@@ -1,10 +1,11 @@
 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 { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
 import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
 
@@ -22,7 +23,7 @@ const ModalOptionReturnQuestionItems = ({
   visible,
   onClose,
 }: ModalOptionReturnQuestionItemsProps) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const title = formatMessage({ id: returnQuestion.translationKey });
 
   return (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.tsx

@@ -4,6 +4,7 @@ import { TouchableHighlight, ViewStyle } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
@@ -15,7 +16,7 @@ const OptionReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> =
 }) => {
   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],

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.tsx

@@ -1,8 +1,9 @@
 /* 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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
 import {
   useReturnQuestionFeedback,
   useReturnQuestionFeedbackForReturnQuestion,
@@ -21,7 +22,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   testID,
   portalHostName,
 }) => {
-  const intl = useIntl();
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const [modalVisible, setModalVisible] = useState(false);
   const {
     feedback: feedbackId,
@@ -30,12 +31,12 @@ const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = (
   } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
   const feedback = useReturnQuestionFeedback();
   const translate = useCallback(
-    (returnQuestionName: string) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
-    [intl],
+    (returnQuestionName: string) => 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);