@lookiero/checkout 10.0.0-beta.2 → 10.0.0-beta.3

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 = "10.0.0-beta.2";
+export declare const VERSION = "10.0.0-beta.3";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "10.0.0-beta.2";
+export const VERSION = "10.0.0-beta.3";

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 }),
-    contextId: "CheckoutI18n",
+    domain: DOMAIN,
   });
 
   const firstAvailableCheckoutByCustomerId: FirstAvailableCheckoutByCustomerIdFunction = ({ customerId }) =>

package/jest.config.js

@@ -1,9 +1,9 @@
-const jestReactNativeConfig = require("@lookiero/sty-psp-jest-config/jest.config.react-native.js");
+const jestReactNativeConfig = require("@lookiero/sty-psp-jest-config/jest.config.expo.js");
 
 module.exports = {
   ...jestReactNativeConfig,
-  setupFiles: ["../../node_modules/react-native-gesture-handler/jestSetup.js"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  setupFiles: ["../../node_modules/react-native-gesture-handler/jestSetup.js"],
   moduleNameMapper: {
     ...(jestReactNativeConfig.moduleNameMapper || {}),
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "10.0.0-beta.2",
+  "version": "10.0.0-beta.3",
   "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.2",
+    "@lookiero/sty-psp-i18n": "^0.4",
     "@lookiero/sty-psp-locale": "^0.4",
     "@lookiero/sty-psp-logging": "^0.5",
-    "@lookiero/sty-psp-notifications": "^0.6",
+    "@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",
@@ -46,7 +46,7 @@
     "@cypress/webpack-preprocessor": "^6.0.2",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
-    "@lookiero/payments-front": "7.0.0-ideal-integration-2025.3.14.100051",
+    "@lookiero/payments-front": "7.0.0-alpha.2",
     "@lookiero/sty-psp-jest-config": "*",
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
@@ -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,9 +73,9 @@
     "@lookiero/aurora-fonts": ">=2",
     "@lookiero/aurora-iconfont": ">=3",
     "@lookiero/event": "^0.3",
-    "@lookiero/i18n": ">=0.9",
-    "@lookiero/i18n-react": ">=0.9",
-    "@lookiero/payments-front": "7.0.0-ideal-integration-2025.3.14.100051",
+    "@lookiero/i18n": ">=2",
+    "@lookiero/i18n-react": ">=2",
+    "@lookiero/payments-front": "7.0.0-alpha.2",
     "apollo-boost": "0.4.4",
     "expo": ">=51",
     "expo-font": ">=12",

package/src/ExpoRoot.tsx

@@ -18,6 +18,7 @@ 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 { OrderProjection } from "./projection/order/order";
@@ -67,7 +68,7 @@ const translations: EndpointFunction[] = [
   (locale) =>
     translationExternalEndpoint({
       translationsUrl: externalTranslationsUrl,
-      projects: [["user-area-front"], ["inventory-catalog", "feature;feature_value;Color"], ["checkout"]],
+      projects: [["checkout"]],
     })(locale),
 ];
 
@@ -109,7 +110,7 @@ const { Component: Messaging, queryBus } =
     : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
 const I18n = i18n({
   fetchTranslation: fetchTranslations({ translations }),
-  contextId: "CheckoutI18n",
+  domain: DOMAIN,
 });
 const Root = root({
   Messaging,

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.ts

@@ -1,10 +1,11 @@
 import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
 
-// TODO: get the font family from Aurora
+const { fontMap } = theme();
 
 const style = StyleSheet.create({
   textBold: {
-    fontFamily: "AreaNormal-Extrabold",
+    fontFamily: fontMap.Action,
   },
 });
 

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/fiveItemsDiscountBanner/__snapshots__/FiveItemsDiscountBanner.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`FiveItemsDiscountBanner component matches the snapshot 1`] = `
                   "paddingBottom": 0,
                   "paddingLeft": 0,
                   "paddingRight": 0,
-                  "paddingTop": 5,
+                  "paddingTop": 4,
                 },
               ]
             }

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/atoms/price/__snapshots__/Price.test.tsx.snap

@@ -51,7 +51,7 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 4,
+            "paddingTop": 0,
           },
         ]
       }
@@ -81,7 +81,7 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
               "paddingBottom": 0,
               "paddingLeft": 0,
               "paddingRight": 0,
-              "paddingTop": 4,
+              "paddingTop": 0,
               "textDecorationLine": "line-through",
             },
           ]
@@ -146,7 +146,7 @@ exports[`Price atom matches the snapshot for a non-discounted price: non-discoun
             "paddingBottom": 0,
             "paddingLeft": 0,
             "paddingRight": 0,
-            "paddingTop": 4,
+            "paddingTop": 0,
           },
         ]
       }

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.ts

@@ -1,16 +1,37 @@
-import { StyleSheet, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBorderActionSecondary, borderWidth2, borderStyle } = theme();
+const {
+  colorBorderActionSecondary,
+  colorBgActionPrimaryActive,
+  colorTextActionPrimary,
+  borderWidth2,
+  borderRadiusFull,
+  space6,
+  space16,
+} = theme();
+
+const HEIGHT = space16;
 
 const style = StyleSheet.create({
   button: {
+    alignContent: "center",
     borderColor: colorBorderActionSecondary,
-    borderStyle: borderStyle,
+    borderRadius: borderRadiusFull,
     borderWidth: borderWidth2,
     flex: 1,
+    height: HEIGHT,
+    justifyContent: "center",
     marginHorizontal: 12,
-  } as ViewStyle,
+    paddingLeft: space6,
+    paddingRight: space6,
+  },
+  buttonActive: {
+    backgroundColor: colorBgActionPrimaryActive,
+  },
+  textActive: {
+    color: colorTextActionPrimary,
+  },
 });
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,10 +1,14 @@
 import React, { useCallback } from "react";
-import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
+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";
 
+const ACTIVE_OPACITY = 0.6;
+
 const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   checkoutQuestionParentId,
@@ -12,22 +16,24 @@ 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],
   );
 
   return (
-    <Button
+    <TouchableOpacity
       accessibilityLabel={testID}
-      style={style.button}
+      activeOpacity={ACTIVE_OPACITY}
+      style={[style.button, feedback === checkoutQuestion.id && style.buttonActive]}
       testID={testID}
-      variant={feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY}
       onPress={handleOnPress}
     >
-      {optionText}
-    </Button>
+      <Text align={ALIGN.CENTER} level={3} style={feedback === checkoutQuestion.id && style.textActive} action>
+        {optionText}
+      </Text>
+    </TouchableOpacity>
   );
 };
 

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.style.ts

@@ -11,7 +11,6 @@ const style = StyleSheet.create({
     ...Platform.select({
       android: {
         paddingTop: space2,
-        height: "auto",
       },
     }),
   },

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],
@@ -32,6 +33,7 @@ const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
           placeholder={placeholderText}
           style={style}
           testID={testID}
+          textAlignVertical="top"
           value={feedback}
           multiline
           onBlur={onBlur}

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);