@lookiero/checkout 8.17.1-beta.1 → 8.19.0

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

@@ -1,14 +1,15 @@
 import { FC, ReactNode } from "react";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 
-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;
 }
 
-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.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,19 +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,
-}: 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);

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

@@ -1,11 +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,
-}: ReturnQuestionItemProps) => (
+}) => (
   <>
     {returnQuestion.children?.map((childReturnQuestion) => (
       <ReturnQuestion

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.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 * as useReturnQuestionFeedback from "../../../behaviors/useReturnQuestionFeedback";
 import { HostStackReturnQuestionItem } from "./HostStackReturnQuestionItem";
@@ -15,45 +13,54 @@ const mockedUseReturnQuestionFeedbackForReturnQuestion = (
   useReturnQuestionFeedback as jest.Mocked<typeof useReturnQuestionFeedback>
 ).useReturnQuestionFeedbackForReturnQuestion;
 
-const returnQuestionChildren: ReturnQuestionProjection[] = [
-  {
-    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 withTitle: ReturnQuestionProjection = {
+const withTitle: ReturnQuestionProjection<ReturnQuestionType.HOST_STACK> = {
   id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
-  name: "return question title",
-  placeholder: "",
+  translationKey: "return question title",
   type: ReturnQuestionType.HOST_STACK,
-  children: returnQuestionChildren,
+  children: [
+    {
+      id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+      translationKey: "size_overall",
+      type: ReturnQuestionType.OPTION,
+    },
+    {
+      id: "85e84a77-461c-41e6-8544-95b5294d0b80",
+      translationKey: "size_trousers_too_long",
+      type: ReturnQuestionType.OPTION,
+    },
+    {
+      id: "29441d25-8d9f-471e-a13e-a03f61c88091",
+      translationKey: "size_fit_cut_does_not_fit",
+      type: ReturnQuestionType.OPTION,
+    },
+  ],
 };
 
-const withoutTitle: ReturnQuestionProjection = {
+const withoutTitle: ReturnQuestionProjection<ReturnQuestionType.HOST_STACK> = {
   id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
-  name: "",
-  placeholder: "",
+  translationKey: "",
   type: ReturnQuestionType.HOST_STACK,
-  children: returnQuestionChildren,
+  children: [
+    {
+      id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+      translationKey: "size_overall",
+      type: ReturnQuestionType.OPTION,
+    },
+    {
+      id: "85e84a77-461c-41e6-8544-95b5294d0b80",
+      translationKey: "size_trousers_too_long",
+      type: ReturnQuestionType.OPTION,
+    },
+    {
+      id: "29441d25-8d9f-471e-a13e-a03f61c88091",
+      translationKey: "size_fit_cut_does_not_fit",
+      type: ReturnQuestionType.OPTION,
+    },
+  ],
 };
 
 interface RenderHostStackReturnQuestionItemParameters {
-  readonly returnQuestion: ReturnQuestionProjection;
+  readonly returnQuestion: ReturnQuestionProjection<ReturnQuestionType.HOST_STACK>;
 }
 
 const renderHostStackReturnQuestionItem = ({ returnQuestion }: RenderHostStackReturnQuestionItemParameters) =>
@@ -72,7 +79,7 @@ describe("HostStackReturnQuestionItem component (ReturnQuestions organism)", ()
     });
     const { findByText } = renderHostStackReturnQuestionItem({ returnQuestion: withTitle });
 
-    expect(await findByText(withTitle.name)).toBeDefined();
+    expect(await findByText(withTitle.translationKey as string)).toBeDefined();
   });
 
   it("does not render a title for the returnQuestion (when returnQuestion's name is not provided)", async () => {
@@ -83,7 +90,7 @@ describe("HostStackReturnQuestionItem component (ReturnQuestions organism)", ()
     });
     const { queryByText } = renderHostStackReturnQuestionItem({ returnQuestion: withoutTitle });
 
-    expect(await queryByText(withTitle.name)).toBeNull();
+    expect(await queryByText(withTitle.translationKey as string)).toBeNull();
   });
 
   it("renders the feedback and a ReturnQuestion for its returnQuestion.children when there is feedback", async () => {

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

@@ -1,18 +1,21 @@
+/* eslint-disable react/prop-types */
 import { animated, useSpring } from "@react-spring/native";
 import React, { useCallback, useMemo, useState } from "react";
 import { LayoutChangeEvent, View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
+import { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../../ReturnQuestionItem";
 import { style } from "./HostStackReturnQuestionItem.style";
 
-const HostStackReturnQuestionItem: ReturnQuestionItem = ({
+const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_STACK> = ({
   returnQuestion,
   children,
   portalHostName,
-}: ReturnQuestionItemProps) => {
+}) => {
   const { formatMessage } = useIntl();
   const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
   const feedbackReturnQuestion = feedback
@@ -20,11 +23,11 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
     : undefined;
 
   const titleText = useMemo(
-    () => (returnQuestion.name ? formatMessage({ id: returnQuestion.name }) : undefined),
-    [formatMessage, returnQuestion.name],
+    () => (returnQuestion.translationKey ? formatMessage({ id: returnQuestion.translationKey }) : undefined),
+    [formatMessage, returnQuestion.translationKey],
   );
   const feedbackText = useMemo(
-    () => (feedbackReturnQuestion ? formatMessage({ id: feedbackReturnQuestion.name }) : undefined),
+    () => (feedbackReturnQuestion ? formatMessage({ id: feedbackReturnQuestion.translationKey }) : undefined),
     [feedbackReturnQuestion, formatMessage],
   );
 
@@ -48,7 +51,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
             {titleText}
           </Text>
         )}
-        {feedbackReturnQuestion ? (
+        {feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (
           <>
             <Text color={COLOR.TEXT_MEDIUM} level={3}>
               {feedbackText}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.tsx

@@ -4,6 +4,7 @@ import { COLOR, Text } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
 
@@ -22,7 +23,7 @@ const ModalOptionReturnQuestionItems = ({
   onClose,
 }: ModalOptionReturnQuestionItemsProps) => {
   const { formatMessage } = useIntl();
-  const title = formatMessage({ id: returnQuestion.name });
+  const title = formatMessage({ id: returnQuestion.translationKey });
 
   return (
     <Modal portalHostName={portalHostName} visible={visible} scroll showCloseButton onClose={onClose}>
@@ -31,14 +32,15 @@ const ModalOptionReturnQuestionItems = ({
           {title}
         </Text>
         <>
-          {returnQuestion.children?.map((childReturnQuestion) => (
-            <ReturnQuestion
-              key={childReturnQuestion.id}
-              portalHostName=""
-              returnQuestion={childReturnQuestion}
-              returnQuestionParent={returnQuestion}
-            />
-          ))}
+          {returnQuestionHasChildren(returnQuestion) &&
+            returnQuestion.children?.map((childReturnQuestion) => (
+              <ReturnQuestion
+                key={childReturnQuestion.id}
+                portalHostName=""
+                returnQuestion={childReturnQuestion}
+                returnQuestionParent={returnQuestion}
+              />
+            ))}
         </>
       </View>
     </Modal>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.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 { OptionReturnQuestionItem } from "./OptionReturnQuestionItem";
 
@@ -17,26 +15,22 @@ const returnQuestionParent = {
 } as ReturnQuestionProjection;
 const returnQuestion: ReturnQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "size_large",
-  placeholder: "",
+  translationKey: "size_large",
   type: ReturnQuestionType.OPTION,
   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,
     },
   ],
@@ -48,9 +42,9 @@ describe("OptionReturnQuestionItem component (ReturnQuestions organism)", () =>
       <OptionReturnQuestionItem returnQuestion={returnQuestion} returnQuestionParent={returnQuestionParent} />,
     );
 
-    expect(getByText(returnQuestion.name)).toBeTruthy();
+    expect(getByText(returnQuestion.translationKey)).toBeTruthy();
 
-    fireEvent.press(getByText(returnQuestion.name));
+    fireEvent.press(getByText(returnQuestion.translationKey));
 
     expect(mockOnChange).toHaveBeenCalledWith({
       returnQuestionId: returnQuestionParent.id,

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