@lookiero/checkout 9.12.0-beta.0 → 9.13.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,15 @@
 import { render, RenderAPI } from "@testing-library/react-native";
 import { mock } from "jest-mock-extended";
 import React, { FC, Fragment, ReactElement } from "react";
-import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
+import { createI18nProvider } from "@lookiero/i18n-react";
 import { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
 import { Logger, LoggerProvider } from "@lookiero/sty-psp-logging";
+import { DOMAIN } from "../i18n/i18n";
 import { BasePathProvider } from "../routing/useBasePath";
 
+const I18nProvider = createI18nProvider({ domain: DOMAIN });
+
 interface RenderArgs {
   readonly locale?: string;
   readonly messages?: TranslationMessages;
@@ -24,13 +27,13 @@ const renderWrapper: RenderWrapperFunction =
   // eslint-disable-next-line react/display-name, react/prop-types
   ({ children }) => (
     <Aurora>
-      <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
+      <I18nProvider locale={locale as string} messages={messages} onError={() => void 0}>
         <LoggerProvider logger={logger}>
           <BasePathProvider basePath="">
             <Wrapper>{children}</Wrapper>
           </BasePathProvider>
         </LoggerProvider>
-      </IntlProvider>
+      </I18nProvider>
     </Aurora>
   );
 

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -270,20 +270,13 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           "right": 0,
                           "top": 0,
                         },
-                        "alignContent": "center",
                         "alignSelf": "flex-start",
-                        "backgroundColor": "#0C0A0A",
-                        "borderRadius": 9999,
                         "container": {
                           "overflow": "hidden",
                         },
                         "flex": 0,
                         "height": 64,
-                        "justifyContent": "center",
                         "overflow": "hidden",
-                        "paddingLeft": 24,
-                        "paddingRight": 24,
-                        "position": "relative",
                         "pressed": {
                           "bottom": 0,
                           "left": 0,
@@ -299,57 +292,98 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                   ]
                 }
               >
-                <View
-                  collapsable={false}
-                  pointerEvents="none"
-                  style={
-                    {
-                      "backgroundColor": "#716A6B",
-                      "height": "300%",
-                      "left": 0,
-                      "opacity": 0.7,
-                      "position": "absolute",
-                      "top": 0,
-                      "width": "0%",
-                    }
+                <ViewManagerAdapter_ExpoLinearGradient
+                  colors={
+                    [
+                      4278979082,
+                      4278979082,
+                    ]
+                  }
+                  endPoint={
+                    [
+                      1,
+                      0,
+                    ]
+                  }
+                  startPoint={
+                    [
+                      0,
+                      1,
+                    ]
                   }
-                />
-                <View
                   style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
+                        "alignContent": "center",
+                        "height": 64,
                         "justifyContent": "center",
+                        "overflow": "hidden",
+                        "paddingLeft": 24,
+                        "paddingRight": 24,
+                        "position": "relative",
+                      },
+                      {},
+                      undefined,
+                      undefined,
+                      false,
+                      {
+                        "borderRadius": 9999,
                       },
                     ]
                   }
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <View
+                    collapsable={false}
+                    pointerEvents="none"
+                    style={
+                      {
+                        "backgroundColor": "#716A6B",
+                        "height": "300%",
+                        "left": 0,
+                        "opacity": 0.7,
+                        "position": "absolute",
+                        "top": 0,
+                        "width": "0%",
+                      }
+                    }
+                  />
+                  <View
                     style={
                       [
                         {
-                          "color": "#0C0A0A",
-                          "fontFamily": "AreaNormal-Extrabold",
-                          "fontSize": 15,
-                          "letterSpacing": -0.2,
-                          "lineHeight": 20,
-                          "paddingBottom": 0,
-                          "paddingLeft": 0,
-                          "paddingRight": 0,
-                          "paddingTop": 0,
-                          "textAlign": "center",
-                          "textTransform": "uppercase",
-                          "width": "100%",
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "justifyContent": "center",
                         },
                       ]
                     }
                   >
-                    get_out_of_checkout_modal.dismiss_button
-                  </Text>
-                </View>
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#0C0A0A",
+                            "fontFamily": "AreaNormal-Extrabold",
+                            "fontSize": 15,
+                            "letterSpacing": -0.2,
+                            "lineHeight": 20,
+                            "paddingBottom": 0,
+                            "paddingLeft": 0,
+                            "paddingRight": 0,
+                            "paddingTop": 0,
+                            "textAlign": "center",
+                            "textTransform": "uppercase",
+                            "width": "100%",
+                          },
+                        ]
+                      }
+                    >
+                      get_out_of_checkout_modal.dismiss_button
+                    </Text>
+                  </View>
+                </ViewManagerAdapter_ExpoLinearGradient>
               </View>
               <View
                 accessibilityRole="button"
@@ -396,24 +430,14 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                           "right": 0,
                           "top": 0,
                         },
-                        "alignContent": "center",
                         "alignSelf": "flex-start",
-                        "backgroundColor": "#FFFFFF",
-                        "borderColor": "#0C0A0A",
-                        "borderRadius": 9999,
-                        "borderStyle": "solid",
-                        "borderWidth": 2,
                         "container": {
                           "overflow": "hidden",
                         },
                         "flex": 0,
                         "height": 64,
-                        "justifyContent": "center",
                         "marginTop": 32,
                         "overflow": "hidden",
-                        "paddingLeft": 24,
-                        "paddingRight": 24,
-                        "position": "relative",
                         "pressed": {
                           "bottom": 0,
                           "left": 0,
@@ -429,57 +453,105 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                   ]
                 }
               >
-                <View
-                  collapsable={false}
-                  pointerEvents="none"
-                  style={
-                    {
-                      "backgroundColor": "#B7B3B3",
-                      "height": "300%",
-                      "left": 0,
-                      "opacity": 0.7,
-                      "position": "absolute",
-                      "top": 0,
-                      "width": "0%",
-                    }
+                <ViewManagerAdapter_ExpoLinearGradient
+                  colors={
+                    [
+                      4294967295,
+                      4294967295,
+                    ]
+                  }
+                  endPoint={
+                    [
+                      1,
+                      0,
+                    ]
+                  }
+                  startPoint={
+                    [
+                      0,
+                      1,
+                    ]
                   }
-                />
-                <View
                   style={
                     [
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
+                        "alignContent": "center",
+                        "height": 64,
                         "justifyContent": "center",
+                        "overflow": "hidden",
+                        "paddingLeft": 24,
+                        "paddingRight": 24,
+                        "position": "relative",
+                      },
+                      {
+                        "borderColor": "#0C0A0A",
+                        "borderStyle": "solid",
+                        "borderWidth": 2,
+                        "height": 64,
+                        "paddingLeft": 24,
+                        "paddingRight": 24,
+                      },
+                      undefined,
+                      undefined,
+                      false,
+                      {
+                        "borderRadius": 9999,
                       },
                     ]
                   }
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <View
+                    collapsable={false}
+                    pointerEvents="none"
+                    style={
+                      {
+                        "backgroundColor": "#B7B3B3",
+                        "height": "300%",
+                        "left": 0,
+                        "opacity": 0.7,
+                        "position": "absolute",
+                        "top": 0,
+                        "width": "0%",
+                      }
+                    }
+                  />
+                  <View
                     style={
                       [
                         {
-                          "color": "#0C0A0A",
-                          "fontFamily": "AreaNormal-Extrabold",
-                          "fontSize": 15,
-                          "letterSpacing": -0.2,
-                          "lineHeight": 20,
-                          "paddingBottom": 0,
-                          "paddingLeft": 0,
-                          "paddingRight": 0,
-                          "paddingTop": 0,
-                          "textAlign": "center",
-                          "textTransform": "uppercase",
-                          "width": "100%",
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "justifyContent": "center",
                         },
                       ]
                     }
                   >
-                    get_out_of_checkout_modal.confirm_button
-                  </Text>
-                </View>
+                    <Text
+                      allowFontScaling={false}
+                      selectable={false}
+                      style={
+                        [
+                          {
+                            "color": "#0C0A0A",
+                            "fontFamily": "AreaNormal-Extrabold",
+                            "fontSize": 15,
+                            "letterSpacing": -0.2,
+                            "lineHeight": 20,
+                            "paddingBottom": 0,
+                            "paddingLeft": 0,
+                            "paddingRight": 0,
+                            "paddingTop": 0,
+                            "textAlign": "center",
+                            "textTransform": "uppercase",
+                            "width": "100%",
+                          },
+                        ]
+                      }
+                    >
+                      get_out_of_checkout_modal.confirm_button
+                    </Text>
+                  </View>
+                </ViewManagerAdapter_ExpoLinearGradient>
               </View>
             </View>
           </View>

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

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