@lookiero/checkout 8.14.0-beta.3 → 8.14.0

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

@@ -1,19 +1,21 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback } from "react";
 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 { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
 
-const OptionReturnQuestionItem: ReturnQuestionItem = ({
+const OptionReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = ({
   returnQuestion,
   returnQuestionParent,
   testID,
-}: ReturnQuestionItemProps) => {
+}) => {
   const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
 
-  const optionText = useI18nMessage({ id: returnQuestion.name });
+  const optionText = useI18nMessage({ 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,6 +1,8 @@
+/* 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 { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import {
   useReturnQuestionFeedback,
   useReturnQuestionFeedbackForReturnQuestion,
@@ -9,16 +11,16 @@ import {
   deepestReturnQuestionWithFeedbackForReturnQuestion,
   feedbackForReturnQuestion,
 } from "../../util/returnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style } from "./RadioReturnQuestionItem.style";
 
-const RadioReturnQuestionItem: ReturnQuestionItem = ({
+const RadioReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.OPTION> = ({
   returnQuestion,
   returnQuestionParent,
   testID,
   portalHostName,
-}: ReturnQuestionItemProps) => {
+}) => {
   const intl = useIntl();
   const [modalVisible, setModalVisible] = useState(false);
   const {
@@ -33,7 +35,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
   );
 
   const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
-  const optionText = intl.formatMessage({ id: returnQuestion.name });
+  const optionText = intl.formatMessage({ id: returnQuestion.translationKey });
 
   const hasChildren = Boolean(returnQuestion.children && returnQuestion.children.length > 0);
 

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

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { feedback as mockFeedback } from "../../../../../../projection/feedback/feedback.mock";
 import { I18nMessages } from "../../../../../i18n/i18n";
 import { render } from "../../../../../test/render";
@@ -12,40 +10,34 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
   useReturnQuestionFeedback: () => mockFeedback,
 }));
 
-const returnQuestion: ReturnQuestionProjection = {
+const returnQuestion: ReturnQuestionProjection<ReturnQuestionType.HOST_DEFAULT> = {
   id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
-  name: "size_title",
-  placeholder: "",
-  type: ReturnQuestionType.HOST_STACK,
+  translationKey: "size_title",
+  type: ReturnQuestionType.HOST_DEFAULT,
   children: [
     {
       id: "9251dc2c-d76a-484d-9299-346929af932f",
-      name: "size_large",
-      placeholder: "",
+      translationKey: "size_large",
       type: ReturnQuestionType.OPTION,
       children: [
         {
           id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
-          name: "",
-          placeholder: "",
-          type: ReturnQuestionType.HOST_STACK,
+          translationKey: "",
+          type: ReturnQuestionType.HOST_DEFAULT,
           children: [
             {
               id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
-              name: "size_overall",
-              placeholder: "",
+              translationKey: "size_overall",
               type: ReturnQuestionType.OPTION,
             },
             {
               id: "85e84a77-461c-41e6-8544-95b5294d0b80",
-              name: "size_trousers_too_long",
-              placeholder: "",
+              translationKey: "size_trousers_too_long",
               type: ReturnQuestionType.OPTION,
             },
             {
               id: "29441d25-8d9f-471e-a13e-a03f61c88091",
-              name: "size_fit_cut_does_not_fit",
-              placeholder: "",
+              translationKey: "size_fit_cut_does_not_fit",
               type: ReturnQuestionType.OPTION,
             },
           ],
@@ -54,11 +46,17 @@ const returnQuestion: ReturnQuestionProjection = {
     },
   ],
 };
-const returnQuestionUnanswered: ReturnQuestionProjection = {
+const returnQuestionUnanswered: ReturnQuestionProjection<ReturnQuestionType.HOST_DEFAULT> = {
   id: "fd7ff4a0-78ed-4c0d-aa4d-64962739c322",
-  name: "style_title",
-  placeholder: "",
-  type: ReturnQuestionType.HOST_STACK,
+  translationKey: "style_title",
+  type: ReturnQuestionType.HOST_DEFAULT,
+  children: [
+    {
+      id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+      translationKey: "size_overall",
+      type: ReturnQuestionType.OPTION,
+    },
+  ],
 };
 
 describe("ReturnQuestionFeedbackItem component (ReturnQuestions organism)", () => {
@@ -70,7 +68,7 @@ describe("ReturnQuestionFeedbackItem component (ReturnQuestions organism)", () =
       />,
     );
 
-    expect(getByText(returnQuestion.name)).toBeTruthy();
+    expect(getByText(returnQuestion.translationKey)).toBeTruthy();
     expect(getByText("size_large / size_overall")).toBeTruthy();
   });
 
@@ -82,7 +80,7 @@ describe("ReturnQuestionFeedbackItem component (ReturnQuestions organism)", () =
       />,
     );
 
-    expect(getByText(returnQuestionUnanswered.name)).toBeTruthy();
+    expect(getByText(returnQuestionUnanswered.translationKey)).toBeTruthy();
     expect(getByText(I18nMessages.FEEDBACK_UNANSWERED)).toBeTruthy();
   });
 });

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

@@ -1,15 +1,17 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 
-const ReturnQuestionFeedbackItem: ReturnQuestionItem = ({ returnQuestion }: ReturnQuestionItemProps) => {
-  const titleText = useI18nMessage({ id: returnQuestion.name });
+const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
+  const titleText = useI18nMessage({ id: returnQuestion.translationKey });
   const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
 
   const returnQuestionFeedback = useReturnQuestionFeedback();

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

@@ -1,9 +1,7 @@
 import { fireEvent } from "@testing-library/react-native";
 import React from "react";
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { render } from "../../../../../test/render";
 import { TextareaReturnQuestionItem } from "./TextareaReturnQuestionItem";
 
@@ -15,31 +13,13 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
 const returnQuestionParent = {
   id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
 } as ReturnQuestionProjection;
-const returnQuestion: ReturnQuestionProjection = {
-  id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "size_large",
-  placeholder: "",
-  type: ReturnQuestionType.OPTION,
-  children: [
-    {
-      id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
-      name: "size_overall",
-      placeholder: "",
-      type: ReturnQuestionType.OPTION,
-    },
-    {
-      id: "85e84a77-461c-41e6-8544-95b5294d0b80",
-      name: "size_trousers_too_long",
-      placeholder: "",
-      type: ReturnQuestionType.OPTION,
-    },
-    {
-      id: "29441d25-8d9f-471e-a13e-a03f61c88091",
-      name: "size_fit_cut_does_not_fit",
-      placeholder: "",
-      type: ReturnQuestionType.OPTION,
-    },
-  ],
+const returnQuestion: ReturnQuestionProjection<ReturnQuestionType.TEXTAREA> = {
+  id: "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
+  translationKey: "comment_textarea",
+  type: ReturnQuestionType.TEXTAREA,
+  metadata: {
+    placeholder: "comment_textarea_placeholder",
+  },
 };
 
 describe("TextareaReturnQuestionItem component (ReturnQuestions organism)", () => {

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

@@ -1,21 +1,23 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./TextareaReturnQuestionItem.style";
 
-const TextareaReturnQuestionItem: ReturnQuestionItem = ({
+const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA> = ({
   returnQuestion,
   returnQuestionParent,
   testID,
-}: ReturnQuestionItemProps) => {
+}) => {
   const { formatMessage } = useIntl();
 
   const placeholderText = useMemo(
-    () => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""),
-    [formatMessage, returnQuestion.placeholder],
+    () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
+    [formatMessage, returnQuestion.metadata.placeholder],
   );
 
   const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });

package/src/infrastructure/ui/components/organisms/returnQuestions/util/__snapshots__/returnQuestionFeedback.test.ts.snap

@@ -13,14 +13,15 @@ exports[`returnQuestionFeedback utils return the deepest returnQuestion with fee
     "children": [
       {
         "id": "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
-        "name": "comment_textarea",
-        "placeholder": "comment_textarea_placeholder",
+        "metadata": {
+          "placeholder": "comment_textarea_placeholder",
+        },
+        "translationKey": "comment_textarea",
         "type": "TEXTAREA",
       },
     ],
     "id": "ce3e8d57-5eea-4dd3-bef4-2e811a143612",
-    "name": "comment_title",
-    "placeholder": "",
+    "translationKey": "comment_title",
     "type": "HOST_TEXTAREA",
   },
   false,

package/src/infrastructure/ui/components/organisms/returnQuestions/util/returnQuestionFeedback.ts

@@ -1,5 +1,9 @@
 import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import {
+  returnQuestionHasChildren,
+  returnQuestionWithTranslationKey,
+} from "../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 
 type Uuid = string;
 
@@ -32,14 +36,16 @@ const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction = ({
     const returnQuestionFeedback = feedback[returnQuestionId];
 
     if (isUuid(returnQuestionFeedback as string)) {
-      const feebackReturnQuestionChild = returnQuestion.children?.find(
-        (childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback,
-      );
+      const feebackReturnQuestionChild =
+        returnQuestionHasChildren(returnQuestion) &&
+        returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
 
       if (feebackReturnQuestionChild) {
         return [
           ...acc,
-          translate(feebackReturnQuestionChild?.name),
+          ...(returnQuestionWithTranslationKey(feebackReturnQuestionChild)
+            ? [translate(feebackReturnQuestionChild.translationKey)]
+            : []),
           ...feedbackForReturnQuestion({ feedback, returnQuestion: feebackReturnQuestionChild, translate, acc }),
         ];
       }
@@ -51,13 +57,15 @@ const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction = ({
   }
 
   return (
-    returnQuestion.children?.reduce(
-      (acc, childReturnQuestion) => [
-        ...acc,
-        ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
-      ],
-      [] as string[],
-    ) || []
+    (returnQuestionHasChildren(returnQuestion) &&
+      returnQuestion.children?.reduce(
+        (acc, childReturnQuestion) => [
+          ...acc,
+          ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
+        ],
+        [] as string[],
+      )) ||
+    []
   );
 };
 
@@ -84,9 +92,9 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     const returnQuestionFeedback = feedback[returnQuestionId];
 
     if (isUuid(returnQuestionFeedback as string)) {
-      const feebackReturnQuestionChild = returnQuestion.children?.find(
-        (childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback,
-      );
+      const feebackReturnQuestionChild =
+        returnQuestionHasChildren(returnQuestion) &&
+        returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
 
       if (feebackReturnQuestionChild) {
         return deepestReturnQuestionWithFeedbackForReturnQuestion({
@@ -102,9 +110,11 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     return [returnQuestion, false];
   }
 
-  const feebackReturnQuestionChild = returnQuestion.children?.find((childReturnQuestion) =>
-    Object.keys(feedback).find((id) => id === childReturnQuestion.id),
-  );
+  const feebackReturnQuestionChild =
+    returnQuestionHasChildren(returnQuestion) &&
+    returnQuestion.children?.find((childReturnQuestion) =>
+      Object.keys(feedback).find((id) => id === childReturnQuestion.id),
+    );
 
   if (feebackReturnQuestionChild) {
     return deepestReturnQuestionWithFeedbackForReturnQuestion({
@@ -114,7 +124,11 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     });
   }
 
-  return [deepestReturnQuestion, !returnQuestion.children || returnQuestion.children.length === 0];
+  const hasChildren = Boolean(
+    returnQuestionHasChildren(returnQuestion) && returnQuestion.children && returnQuestion.children.length > 0,
+  );
+
+  return [deepestReturnQuestion, !hasChildren];
 };
 
 export { feedbackForReturnQuestion, deepestReturnQuestionWithFeedbackForReturnQuestion };

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

@@ -5,7 +5,6 @@ import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
 import { TranslationMessages } from "@lookiero/i18n/domain/translation/model/translationMessages";
 import { Logger, LoggerProvider } from "@lookiero/sty-psp-logging";
-import { EnvironmentStyleProvider } from "@lookiero/sty-psp-ui";
 import { BasePathProvider } from "../routing/useBasePath";
 
 interface RenderArgs {
@@ -28,9 +27,7 @@ const renderWrapper: RenderWrapperFunction =
       <IntlProvider locale={locale as string} messages={messages} onError={() => void 0}>
         <LoggerProvider logger={logger}>
           <BasePathProvider basePath="">
-            <EnvironmentStyleProvider>
-              <Wrapper>{children}</Wrapper>
-            </EnvironmentStyleProvider>
+            <Wrapper>{children}</Wrapper>
           </BasePathProvider>
         </LoggerProvider>
       </IntlProvider>

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

@@ -1,12 +1,11 @@
 import { PortalProvider } from "@gorhom/portal";
 import React, { FC } from "react";
-import { StatusBar, View } from "react-native";
+import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
 import { Notifications } from "@lookiero/sty-psp-notifications";
-import { theme, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { style } from "./App.style";
 
 const { colorBgBase } = theme();
 
@@ -14,26 +13,20 @@ interface AppProps {
   readonly children: JSX.Element;
 }
 
-const App: FC<AppProps> = ({ children }) => {
-  const { container } = useEnvironmentStyle();
+const App: FC<AppProps> = ({ children }) => (
+  <SafeAreaProvider>
+    <PortalProvider>
+      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} />
+      {/*
+        We are using the Aurora's PortalProvider at this level for notifications to work properly.
 
-  return (
-    <View style={[style.container, container]}>
-      <SafeAreaProvider>
-        <PortalProvider>
-          <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-          <Notifications contextId={MESSAGING_CONTEXT_ID} />
-          {/*
-          We are using the Aurora's PortalProvider at this level for notifications to work properly.
-  
-          PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
-          notifications would be displayed in a layer below Portal's one (not visible).
-        */}
-          <AuroraPortalProvider>{children}</AuroraPortalProvider>
-        </PortalProvider>
-      </SafeAreaProvider>
-    </View>
-  );
-};
+        PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
+        notifications would be displayed in a layer below Portal's one (not visible).
+      */}
+      <AuroraPortalProvider>{children}</AuroraPortalProvider>
+    </PortalProvider>
+  </SafeAreaProvider>
+);
 
 export { App };

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.ts

@@ -17,7 +17,7 @@ const style = StyleSheet.create({
     marginVertical: space8,
     width: "100%",
   },
-  modal: {
+  modalContent: {
     paddingHorizontal: space6,
   },
   title: {

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

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { View } from "react-native";
 import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal } from "@lookiero/sty-psp-ui";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
 
@@ -12,7 +12,6 @@ interface GetOutOfCheckoutModalProps {
   readonly onConfirm: () => void;
 }
 const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDismiss, onConfirm }) => {
-  const { modal } = useEnvironmentStyle();
   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 });
@@ -20,7 +19,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
 
   return (
     <Modal visible={visible} onClose={onDismiss}>
-      <View style={[style.modal, modal?.content]}>
+      <View style={style.modalContent}>
         <Text align={ALIGN.CENTER} level={1} style={style.title}>
           {titleText}
         </Text>

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

@@ -76,6 +76,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
           "zIndex": 1,
         }
       }
+      testID="modal-close-button"
     />
     <View
       pointerEvents="box-none"
@@ -132,6 +133,12 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
         }
       >
         <View
+          contentInset={
+            {
+              "bottom": 0,
+              "top": 0,
+            }
+          }
           keyboardShouldPersistTaps="handled"
           showsVerticalScrollIndicator={false}
         >
@@ -144,12 +151,9 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
           >
             <View
               style={
-                [
-                  {
-                    "paddingHorizontal": 24,
-                  },
-                  undefined,
-                ]
+                {
+                  "paddingHorizontal": 24,
+                }
               }
             >
               <Text

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

@@ -21,7 +21,6 @@ interface ItemActionsProps {
   readonly onReplace: (value: string) => void;
   readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
 }
-
 const ItemActions: FC<ItemActionsProps> = ({
   productVariants,
   currentProductVariant,

package/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.tsx

@@ -2,10 +2,8 @@ import React, { FC } from "react";
 import { View } from "react-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
 import {
   ReturnQuestionItemProvider,

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.ts

@@ -4,7 +4,7 @@ import { theme } from "@lookiero/sty-psp-ui";
 const { borderWidth1, colorBorderInteractive, space1, space5, space6 } = theme();
 
 const style = StyleSheet.create({
-  modal: {
+  modalContent: {
     paddingBottom: space6,
     paddingHorizontal: space6,
   },

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.tsx

@@ -1,11 +1,17 @@
 import React, { FC, useCallback } from "react";
-import { TouchableHighlight, View } from "react-native";
+import { StyleProp, TextStyle, TouchableHighlight, View, ViewStyle } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { Modal, theme, useEnvironmentStyle } from "@lookiero/sty-psp-ui";
+import { Modal, theme } from "@lookiero/sty-psp-ui";
 import { style } from "./SelectModal.style";
 
 const { colorBgPrimaryLight } = theme();
 
+interface SelectModalStyle {
+  readonly modalContent: StyleProp<ViewStyle>;
+  readonly option: StyleProp<ViewStyle>;
+  readonly optionText: StyleProp<TextStyle>;
+}
+
 interface Option {
   readonly label: string;
   readonly value: string;
@@ -15,22 +21,23 @@ interface SelectModalProps {
   readonly title?: string;
   readonly value: string | undefined;
   readonly options: Option[];
-  readonly modalVisible: boolean;
-  readonly testID?: string;
+  readonly style?: Partial<SelectModalStyle>;
   readonly onChange?: (value: string) => void;
   readonly onClose?: () => void;
+  readonly modalVisible: boolean;
+  readonly testID?: string;
 }
 
 const SelectModal: FC<SelectModalProps> = ({
   modalVisible,
+  onChange = () => void 0,
+  onClose = () => void 0,
   options,
+  style: customStyle,
   testID,
   title,
   value,
-  onChange = () => void 0,
-  onClose = () => void 0,
 }) => {
-  const { modal } = useEnvironmentStyle();
   const handleOnPressOption = useCallback(
     (value: string) => {
       onChange(value);
@@ -41,7 +48,7 @@ const SelectModal: FC<SelectModalProps> = ({
 
   return (
     <Modal testID={testID} visible={modalVisible} scroll showCloseButton onClose={onClose}>
-      <View style={[style.modal, modal?.content]}>
+      <View style={[style.modalContent, customStyle?.modalContent]}>
         {title && (
           <Text level={3} style={style.modalTitle} heading>
             {title}
@@ -52,13 +59,17 @@ const SelectModal: FC<SelectModalProps> = ({
             key={optionValue}
             accessibilityLabel={optionValue}
             disabled={value === optionValue}
-            style={style.option}
+            style={[style.option, customStyle?.option]}
             testID={optionValue}
             underlayColor={colorBgPrimaryLight}
             accessible
             onPress={value !== optionValue ? () => handleOnPressOption(optionValue) : undefined}
           >
-            <Text color={value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT} level={3} style={style.optionText}>
+            <Text
+              color={value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT}
+              level={3}
+              style={[style.optionText as ViewStyle, customStyle?.optionText]}
+            >
               {label}
             </Text>
           </TouchableHighlight>