@lookiero/checkout 8.14.0-beta.2 → 8.14.0

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.tsx

@@ -1,25 +1,15 @@
 import React, { FC, memo } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
+import { returnQuestionHasChildren } from "../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
 
-interface ReturnQuestionStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface ReturnQuestionProps {
   readonly returnQuestionParent: ReturnQuestionProjection;
   readonly returnQuestion: ReturnQuestionProjection;
   readonly portalHostName?: string;
-  readonly style?: Partial<ReturnQuestionStyle>;
 }
 
-const ReturnQuestion: FC<ReturnQuestionProps> = ({
-  returnQuestionParent,
-  returnQuestion,
-  portalHostName,
-  style: customStyle,
-}) => {
+const ReturnQuestion: FC<ReturnQuestionProps> = ({ returnQuestionParent, returnQuestion, portalHostName }) => {
   const Item = useReturnQuestionItem({ type: returnQuestion.type });
 
   return (
@@ -27,19 +17,18 @@ const ReturnQuestion: FC<ReturnQuestionProps> = ({
       portalHostName={portalHostName}
       returnQuestion={returnQuestion}
       returnQuestionParent={returnQuestionParent}
-      style={customStyle}
       testID={returnQuestion.id}
     >
       <>
-        {returnQuestion.children?.map((childReturnQuestion) => (
-          <ReturnQuestion
-            key={childReturnQuestion.id}
-            portalHostName={portalHostName}
-            returnQuestion={childReturnQuestion}
-            returnQuestionParent={returnQuestion}
-            style={customStyle}
-          />
-        ))}
+        {returnQuestionHasChildren(returnQuestion) &&
+          returnQuestion.children?.map((childReturnQuestion) => (
+            <ReturnQuestion
+              key={childReturnQuestion.id}
+              portalHostName={portalHostName}
+              returnQuestion={childReturnQuestion}
+              returnQuestionParent={returnQuestion}
+            />
+          ))}
       </>
     </Item>
   );

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.test.tsx

@@ -1,34 +1,35 @@
+/* eslint-disable react/prop-types */
 import { render } from "@testing-library/react-native";
 import React, { ReactNode } from "react";
 import { Text } from "react-native";
-import { ReturnQuestionProjection, ReturnQuestionType } from "../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestions } from "./ReturnQuestions";
 import { ReturnQuestionFeedbackProvider } from "./behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItemProvider, ReturnQuestionItems } from "./behaviors/useReturnQuestionItem";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "./components/ReturnQuestionItem";
+import { ReturnQuestionItem } from "./components/ReturnQuestionItem";
 
 const returnQuestions: ReturnQuestionProjection[] = [
   {
     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,
   },
 ];
 
-const Item: ReturnQuestionItem = ({ returnQuestion }: ReturnQuestionItemProps) => <Text>{returnQuestion.name}</Text>;
+const Item: ReturnQuestionItem<ReturnQuestionType> = ({ returnQuestion }) => (
+  <Text>{returnQuestion.translationKey}</Text>
+);
 
 const returnQuestionItems: ReturnQuestionItems = {
   [ReturnQuestionType.HOST_DEFAULT]: Item,

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.tsx

@@ -1,19 +1,13 @@
 import React, { FC } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
 import ReturnQuestion from "./ReturnQuestion";
 
-interface ReturnQuestionsStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
 interface ReturnQuestionsProps {
   readonly returnQuestions: ReturnQuestionProjection[];
   readonly portalHostName?: string;
-  readonly style?: Partial<ReturnQuestionsStyle>;
 }
 
-const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHostName, style: customStyle }) => (
+const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHostName }) => (
   <>
     {returnQuestions.map((returnQuestion: ReturnQuestionProjection) => (
       <ReturnQuestion
@@ -21,7 +15,6 @@ const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHost
         portalHostName={portalHostName}
         returnQuestion={returnQuestion}
         returnQuestionParent={{} as ReturnQuestionProjection}
-        style={customStyle}
       />
     ))}
   </>

package/src/infrastructure/ui/components/organisms/returnQuestions/behaviors/isChildReturnQuestion.ts

@@ -1,4 +1,5 @@
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { returnQuestionHasChildren } from "../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 
 interface IsChildReturnQuestionFunctionArgs {
   readonly returnQuestionId: string;
@@ -13,7 +14,7 @@ const isChildReturnQuestion: IsChildReturnQuestionFunction = ({ returnQuestionId
     return true;
   }
 
-  const children = returnQuestion.children || [];
+  const children = (returnQuestionHasChildren(returnQuestion) && returnQuestion.children) || [];
 
   for (let index = 0; index < children.length; index++) {
     const isChild = isChildReturnQuestion({

package/src/infrastructure/ui/components/organisms/returnQuestions/behaviors/useReturnQuestionItem.test.tsx

@@ -1,25 +1,23 @@
 import { renderHook } from "@testing-library/react-native";
 import React from "react";
 import { Text } from "react-native";
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { createWrapper } from "../../../../test/createWrapper";
 import { render } from "../../../../test/render";
 import { ReturnQuestionItem } from "../components/ReturnQuestionItem";
 import { ReturnQuestionItemProvider, ReturnQuestionItems, useReturnQuestionItem as sut } from "./useReturnQuestionItem";
 
 const hostDefaultText = "host default";
-const HostDefault: ReturnQuestionItem = () => <Text>{hostDefaultText}</Text>;
+const HostDefault: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = () => <Text>{hostDefaultText}</Text>;
 const hostSelectText = "host select";
-const HostSelect: ReturnQuestionItem = () => <Text>{hostSelectText}</Text>;
+const HostSelect: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT> = () => <Text>{hostSelectText}</Text>;
 const hostStackText = "host stack";
-const HostStack: ReturnQuestionItem = () => <Text>{hostStackText}</Text>;
+const HostStack: ReturnQuestionItem<ReturnQuestionType.HOST_STACK> = () => <Text>{hostStackText}</Text>;
 const optionText = "option";
-const Option: ReturnQuestionItem = () => <Text>{optionText}</Text>;
+const Option: ReturnQuestionItem<ReturnQuestionType.OPTION> = () => <Text>{optionText}</Text>;
 const textareaText = "textarea";
-const Textarea: ReturnQuestionItem = () => <Text>{textareaText}</Text>;
+const Textarea: ReturnQuestionItem<ReturnQuestionType.TEXTAREA> = () => <Text>{textareaText}</Text>;
 
 const returnQuestionItems: ReturnQuestionItems = {
   [ReturnQuestionType.HOST_DEFAULT]: HostDefault,

package/src/infrastructure/ui/components/organisms/returnQuestions/behaviors/useReturnQuestionItem.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, FC, ReactNode, useContext, useMemo } from "react";
 import invariant from "tiny-invariant";
-import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestionItem } from "../components/ReturnQuestionItem";
 
-type ReturnQuestionItems = Record<ReturnQuestionType, ReturnQuestionItem>;
+type ReturnQuestionItems = Record<ReturnQuestionType, ReturnQuestionItem<ReturnQuestionType>>;
 
 const ReturnQuestionItemContext = createContext<ReturnQuestionItems>({} as ReturnQuestionItems);
 
@@ -21,7 +21,7 @@ interface UseReturnQuestionItemFunctionArgs {
 }
 
 interface UseReturnQuestionItemFunction {
-  (args: UseReturnQuestionItemFunctionArgs): ReturnQuestionItem;
+  (args: UseReturnQuestionItemFunctionArgs): ReturnQuestionItem<ReturnQuestionType>;
 }
 
 const useReturnQuestionItem: UseReturnQuestionItemFunction = ({ type }) => {

package/src/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.ts

@@ -1,20 +1,15 @@
 import { FC, ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 
-interface ReturnQuestionItemStyle {
-  readonly modal: StyleProp<ViewStyle>;
-}
-
-interface ReturnQuestionItemProps {
+interface ReturnQuestionItemProps<RQT extends ReturnQuestionType> {
   readonly returnQuestionParent: ReturnQuestionProjection;
-  readonly returnQuestion: ReturnQuestionProjection;
+  readonly returnQuestion: ReturnQuestionProjection<RQT>;
   readonly children?: ReactNode;
   readonly portalHostName?: string;
   readonly testID?: string;
-  readonly style?: Partial<ReturnQuestionItemStyle>;
 }
 
-type ReturnQuestionItem = FC<ReturnQuestionItemProps>;
+type ReturnQuestionItem<QT extends ReturnQuestionType> = FC<ReturnQuestionItemProps<QT>>;
 
 export type { ReturnQuestionItem, ReturnQuestionItemProps };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem.test.tsx

@@ -1,34 +1,28 @@
 import React from "react";
 import { Text } from "react-native";
-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 { HostDefaultReturnQuestionFeedbackItem } from "./HostDefaultReturnQuestionFeedbackItem";
 
 const returnQuestion: ReturnQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "size_large",
-  placeholder: "",
-  type: ReturnQuestionType.OPTION,
+  translationKey: "size_large",
+  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,
     },
   ],

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable react/prop-types */
 import React from "react";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 
-const HostDefaultReturnQuestionFeedbackItem: ReturnQuestionItem = ({ children }: ReturnQuestionItemProps) => (
+const HostDefaultReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ children }) => (
   <>{children}</>
 );
 

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

@@ -1,9 +1,7 @@
 import React from "react";
 import { Text } from "react-native";
-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 { HostDefaultReturnQuestionItem } from "./HostDefaultReturnQuestionItem";
 
@@ -14,26 +12,22 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
 
 const returnQuestion: ReturnQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "size_large",
-  placeholder: "",
-  type: ReturnQuestionType.OPTION,
+  translationKey: "size_large",
+  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,
     },
   ],
@@ -50,7 +44,7 @@ describe("HostDefaultReturnQuestionItem component (ReturnQuestions organism)", (
       </HostDefaultReturnQuestionItem>,
     );
 
-    expect(getByText(returnQuestion.name)).toBeTruthy();
+    expect(getByText(returnQuestion.translationKey)).toBeTruthy();
     expect(getByText("HostDefaultReturnQuestionItem children")).toBeTruthy();
   });
 });

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

@@ -1,20 +1,26 @@
+/* eslint-disable react/prop-types */
 import React from "react";
 import { Text, View } from "@lookiero/aurora";
-import { useI18nMessage } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { I18nMessages } from "../../../../../i18n/i18n";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 
-const HostDefaultReturnQuestionItem: ReturnQuestionItem = ({ returnQuestion, children }: ReturnQuestionItemProps) => {
-  const titleText = useI18nMessage({ id: returnQuestion.name });
-  const isAllOptions = returnQuestion.name === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
+const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({
+  returnQuestion,
+  children,
+}) => {
+  const { formatMessage } = useIntl();
+  const isAllOptions = returnQuestion.translationKey === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
 
   return (
     <>
-      {titleText && titleText !== " " && !isAllOptions ? (
+      {returnQuestionWithTranslationKey(returnQuestion) && returnQuestion.translationKey !== " " && !isAllOptions ? (
         <View style={style.title}>
           <Text level={3} action>
-            {titleText}
+            {formatMessage({ id: returnQuestion.translationKey })}
           </Text>
         </View>
       ) : null}

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

@@ -1,19 +1,21 @@
+/* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./HostRadioGroupReturnQuestionItem.style";
 
-const HostRadioGroupReturnQuestionItem: ReturnQuestionItem = ({
+const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT> = ({
   returnQuestion,
   children,
   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],
   );
 
   return (

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.style.ts

@@ -14,7 +14,7 @@ const style = StyleSheet.create({
   header: {
     justifyContent: "space-between",
   },
-  modal: {
+  modalContent: {
     paddingBottom: space6,
     paddingHorizontal: space6,
   },

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

@@ -1,10 +1,8 @@
 import { fireEvent, within } from "@testing-library/react-native";
 import React from "react";
 import { Text } from "react-native";
-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 { HostSelectReturnQuestionItem } from "./HostSelectReturnQuestionItem";
 
@@ -18,32 +16,30 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
 
 const returnQuestion: ReturnQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "size_large",
-  placeholder: "",
+  translationKey: "size_large",
   type: ReturnQuestionType.HOST_SELECT,
+  metadata: {
+    placeholder: "",
+  },
   children: [
     {
       id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
-      name: "",
-      placeholder: "",
+      translationKey: "",
       type: ReturnQuestionType.HOST_STACK,
       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,
         },
       ],

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

@@ -1,8 +1,10 @@
+/* eslint-disable react/prop-types */
 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 { Modal } from "@lookiero/sty-psp-ui";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import {
   useReturnQuestionFeedback,
@@ -12,20 +14,19 @@ import {
   deepestReturnQuestionWithFeedbackForReturnQuestion,
   feedbackForReturnQuestion,
 } from "../../util/returnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
 
-const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
+const HostSelectReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT> = ({
   returnQuestion,
   children,
   portalHostName,
   testID,
-  style: customStyle,
-}: 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 [modalVisible, setModalVisible] = useState(false);
@@ -91,7 +92,7 @@ const HostSelectReturnQuestionItem: ReturnQuestionItem = ({
         showCloseButton
         onClose={handleOnModalClose}
       >
-        <View style={[style.modal, customStyle?.modal]}>{children}</View>
+        <View style={style.modalContent}>{children}</View>
       </Modal>
     </>
   );

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

@@ -1,12 +1,13 @@
+/* eslint-disable react/prop-types */
 import React from "react";
+import { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import ReturnQuestion from "../../../ReturnQuestion";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../../ReturnQuestionItem";
 
-const HostStackReturnQuestionItem: ReturnQuestionItem = ({
+const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_STACK> = ({
   returnQuestion,
   portalHostName,
-  style: customStyle,
-}: ReturnQuestionItemProps) => (
+}) => (
   <>
     {returnQuestion.children?.map((childReturnQuestion) => (
       <ReturnQuestion
@@ -14,7 +15,6 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
         portalHostName={portalHostName}
         returnQuestion={childReturnQuestion}
         returnQuestionParent={returnQuestion}
-        style={customStyle}
       />
     ))}
   </>