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

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

@@ -1,10 +1,13 @@
 import { fireEvent } from "@testing-library/react-native";
-import React from "react";
+import React, { ReactNode } from "react";
+import { View } from "react-native";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { OrderProjection } from "../../../../projection/order/order";
+import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { pricing } from "../../../projection/pricing/pricing.mock";
@@ -14,7 +17,9 @@ import { Routes } from "../../routing/routes";
 import { render } from "../../test/render";
 import { Checkout } from "./Checkout";
 
+const getAuthToken = () => Promise.resolve("token");
 const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const basePath = "/checkout";
 const country = Country.ES;
 const segment = Segment.WOMEN;
 const mockCheckout = checkout({
@@ -26,46 +31,29 @@ const mockCheckout = checkout({
     { status: CheckoutItemStatus.REPLACED },
   ],
 });
+const order: OrderProjection = {
+  orderNumber: 12345,
+  isFirstOrder: false,
+  coupon: null,
+};
+const subscription: SubscriptionProjection = "o";
 const mockUseRedirect = jest.fn(() => ({ returnUrl: "https://web2.dev.aws.lookiero.es/user/" }));
 
-jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+const mockOnSuccess = jest.fn();
+const mockCheckoutFlow = jest.fn();
+const paymentFlowTestId = "payment-flow";
+const mockPaymentFlowComponent: ReactNode = <View testID={paymentFlowTestId}>PaymentFlow</View>;
+jest.mock("../../hooks/useCheckoutFlow", () => ({
+  useCheckoutFlow: () => [mockCheckoutFlow, QueryStatus.SUCCESS, mockPaymentFlowComponent],
 }));
 
+jest.mock("../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ customer: { customerId, country, segment }, basePath }),
+}));
+// eslint-disable-next-line @typescript-eslint/naming-convention
+jest.mock("./components/paymentInstrument/PaymentInstrument", () => ({ PaymentInstrument: () => null }));
 jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
 jest.mock("../../../projection/pricing/react/useViewPricingByCheckoutId");
-jest.mock("../../hooks/usePaymentInstrumentEvents");
-
-const mockStartLegacyBoxCheckout = jest.fn();
-jest.mock("@lookiero/payments-front", () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { useImperativeHandle, forwardRef } = require("react");
-
-  return {
-    CheckoutStatus: {
-      REJECTED: "REJECTED",
-      ERROR: "ERROR",
-      FULFILLED: "FULFILLED",
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/naming-convention, react/display-name
-    PaymentFlow: forwardRef((params, ref) => {
-      useImperativeHandle(ref, () => ({
-        startLegacyBoxCheckout: mockStartLegacyBoxCheckout,
-      }));
-
-      return null;
-    }),
-    PaymentMethod: {
-      ["GOOGLE_PAY"]: "google_pay",
-    },
-    Section: {
-      ["BOX_CHECKOUT"]: "box-checkout",
-    },
-    PaymentInstrumentSelect: jest.fn(() => <></>),
-  };
-});
 
 const mockTrackPressContinue = jest.fn();
 jest.mock("../../../tracking/useTrackPressContinue", () => ({
@@ -84,13 +72,25 @@ jest.mock("react-router-native", () => ({
   useNavigate: () => mockUseNavigate,
 }));
 
+beforeEach(() => {
+  mockCheckoutFlow.mockClear();
+  mockTrackPressContinue.mockClear();
+  mockTrackPressBack.mockClear();
+});
+
 describe("Checkout view", () => {
   it("renders correctly", async () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
-
     const { findByText, getAllByTestId, getByText, getByTestId } = render(
-      <Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />,
+      <Checkout
+        getAuthToken={getAuthToken}
+        layout={DummyLayout}
+        order={order}
+        subscription={subscription}
+        useRedirect={mockUseRedirect}
+        onCheckoutFlowSuccess={mockOnSuccess}
+      />,
     );
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
@@ -111,15 +111,17 @@ describe("Checkout view", () => {
     expect(getByText(I18nMessages.SUMMARY_FEE)).toBeTruthy();
     expect(getByText("-€10.00")).toBeTruthy();
 
+    expect(getByTestId(paymentFlowTestId)).toBeTruthy();
+
     expect(getByText(I18nMessages.CHECKOUT_PAY_BUTTON)).toBeTruthy();
     fireEvent.press(getByText(I18nMessages.CHECKOUT_PAY_BUTTON));
     expect(mockTrackPressContinue).toHaveBeenCalled();
-    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
+    expect(mockCheckoutFlow).toHaveBeenCalled();
 
     expect(getByTestId("checkout-header")).toBeTruthy();
     fireEvent.press(getByTestId("arrow-left-button-icon"));
     expect(mockTrackPressBack).toHaveBeenCalled();
-    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.SUMMARY}`);
+    expect(mockUseNavigate).toHaveBeenCalledWith(`${basePath}/${Routes.SUMMARY}`);
   });
 
   it("does not render a delivery banner", async () => {
@@ -135,7 +137,16 @@ describe("Checkout view", () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
 
-    const { findByText, queryByText } = render(<Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />);
+    const { findByText, queryByText } = render(
+      <Checkout
+        getAuthToken={getAuthToken}
+        layout={DummyLayout}
+        order={order}
+        subscription={subscription}
+        useRedirect={mockUseRedirect}
+        onCheckoutFlowSuccess={mockOnSuccess}
+      />,
+    );
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
 

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

@@ -19,7 +19,7 @@ import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
 import { useCheckoutFlow } from "../../hooks/useCheckoutFlow";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { I18nMessages } from "../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
@@ -48,8 +48,8 @@ const Checkout: FC<CheckoutProps> = ({
     customer: { customerId, country, segment },
     basePath,
   } = 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/checkout/components/deliveryBanner/__snapshots__/DeliveryBanner.test.tsx.snap

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

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/banner/__snapshots__/CustomerDecissionBanner.test.tsx.snap

@@ -89,7 +89,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a KEPT check
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 5,
+                    "paddingTop": 4,
                   },
                 ]
               }
@@ -258,7 +258,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a REPLACED c
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 5,
+                    "paddingTop": 4,
                   },
                 ]
               }
@@ -427,7 +427,7 @@ exports[`CustomerDecissionBanner component matches the snapshot for a RETURNED c
                     "paddingBottom": 0,
                     "paddingLeft": 0,
                     "paddingRight": 0,
-                    "paddingTop": 5,
+                    "paddingTop": 4,
                   },
                 ]
               }

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

@@ -217,7 +217,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                       "paddingBottom": 0,
                       "paddingLeft": 0,
                       "paddingRight": 0,
-                      "paddingTop": 2,
+                      "paddingTop": 0,
                       "width": "100%",
                     },
                   ]
@@ -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": 2,
-                          "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": 2,
-                          "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(
     () =>