@lookiero/checkout 8.14.0-beta.2 → 8.14.0

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,19 +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,
-  style: customStyle,
-}: ReturnQuestionItemProps) => {
+}) => {
   const { formatMessage } = useIntl();
   const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
   const feedbackReturnQuestion = feedback
@@ -21,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],
   );
 
@@ -49,7 +51,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
             {titleText}
           </Text>
         )}
-        {feedbackReturnQuestion ? (
+        {feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (
           <>
             <Text color={COLOR.TEXT_MEDIUM} level={3}>
               {feedbackText}
@@ -60,7 +62,6 @@ const HostStackReturnQuestionItem: ReturnQuestionItem = ({
                 portalHostName={portalHostName}
                 returnQuestion={childReturnQuestion}
                 returnQuestionParent={feedbackReturnQuestion}
-                style={customStyle}
               />
             ))}
           </>

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

@@ -1,9 +1,10 @@
 import React from "react";
-import { StyleProp, View, ViewStyle } from "react-native";
+import { View } from "react-native";
 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";
 
@@ -12,7 +13,6 @@ interface ModalOptionReturnQuestionItemsProps {
   readonly returnQuestion: ReturnQuestionProjection;
   readonly returnQuestionParent: ReturnQuestionProjection;
   readonly visible: boolean;
-  readonly style?: StyleProp<ViewStyle>;
   readonly onClose: () => void;
 }
 
@@ -20,28 +20,27 @@ const ModalOptionReturnQuestionItems = ({
   portalHostName,
   returnQuestion,
   visible,
-  style: customStyle,
   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}>
-      <View style={[style.modalContent, customStyle]}>
+      <View style={style.modalContent}>
         <Text color={COLOR.TEXT_MEDIUM} level={2} style={style.optionText}>
           {title}
         </Text>
         <>
-          {returnQuestion.children?.map((childReturnQuestion) => (
-            <ReturnQuestion
-              key={childReturnQuestion.id}
-              portalHostName=""
-              returnQuestion={childReturnQuestion}
-              returnQuestionParent={returnQuestion}
-              style={{ modal: customStyle }}
-            />
-          ))}
+          {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 } from "@lookiero/aurora";
+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,17 +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,
-  style: customStyle,
-}: ReturnQuestionItemProps) => {
+}) => {
   const intl = useIntl();
   const [modalVisible, setModalVisible] = useState(false);
   const {
@@ -34,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);
 
@@ -75,6 +76,7 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
       <View style={style.wrapper} testID={testID}>
         <Option
           checked={returnQuestion.id === feedbackId}
+          flex={SIZE.XS}
           name={returnQuestion.id}
           title={inputValue ? `${optionText} / ${inputValue}` : `${optionText}`}
           value={returnQuestion.id}
@@ -87,7 +89,6 @@ const RadioReturnQuestionItem: ReturnQuestionItem = ({
           portalHostName={portalHostName}
           returnQuestion={returnQuestion}
           returnQuestionParent={returnQuestion}
-          style={customStyle?.modal}
           visible={modalVisible}
           onClose={handleOnModalClose}
         />

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,