@lookiero/checkout 12.3.0 → 12.5.0

package/src/infrastructure/ui/components/organisms/checkoutQuestions/CheckoutQuestion.tsx

@@ -1,16 +1,14 @@
 import React, { FC, memo } from "react";
-import { CheckoutQuestionProjection } from "../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { checkoutFeedbackQuestionHasChildren } from "../../../../../projection/checkoutFeedback/checkoutFeedback.typeguards";
 import { useCheckoutQuestionItem } from "./behaviors/useCheckoutQuestionItem";
 
 interface CheckoutQuestionProps {
   readonly checkoutQuestionParentId: string;
-  readonly checkoutQuestion: CheckoutQuestionProjection;
+  readonly checkoutQuestion: CheckoutFeedbackQuestionProjection;
 }
 
-const CheckoutQuestion: FC<CheckoutQuestionProps> = ({
-  checkoutQuestion,
-  checkoutQuestionParentId,
-}: CheckoutQuestionProps) => {
+const CheckoutQuestion: FC<CheckoutQuestionProps> = ({ checkoutQuestion, checkoutQuestionParentId }) => {
   const Item = useCheckoutQuestionItem({ type: checkoutQuestion.type });
 
   return (
@@ -19,13 +17,14 @@ const CheckoutQuestion: FC<CheckoutQuestionProps> = ({
       checkoutQuestionParentId={checkoutQuestionParentId}
       testID={checkoutQuestion.id}
     >
-      {checkoutQuestion.children?.map((childCheckoutQuestion) => (
-        <CheckoutQuestion
-          key={childCheckoutQuestion.id}
-          checkoutQuestion={childCheckoutQuestion}
-          checkoutQuestionParentId={checkoutQuestion.id}
-        />
-      ))}
+      {checkoutFeedbackQuestionHasChildren(checkoutQuestion) &&
+        checkoutQuestion.children.map((childCheckoutQuestion) => (
+          <CheckoutQuestion
+            key={childCheckoutQuestion.id}
+            checkoutQuestion={childCheckoutQuestion}
+            checkoutQuestionParentId={checkoutQuestion.id}
+          />
+        ))}
     </Item>
   );
 };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/CheckoutQuestions.test.tsx

@@ -1,50 +1,43 @@
+/* eslint-disable react/prop-types */
 import { render } from "@testing-library/react-native";
 import React, { ReactNode } from "react";
 import { Text } from "react-native";
-import {
-  CheckoutQuestionProjection,
-  CheckoutQuestionType,
-} from "../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { CheckoutQuestions } from "./CheckoutQuestions";
 import { CheckoutQuestionFeedbackProvider } from "./behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItemProvider, CheckoutQuestionItems } from "./behaviors/useCheckoutQuestionItem";
-import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "./components/CheckoutQuestionItem";
+import { CheckoutQuestionItem } from "./components/CheckoutQuestionItem";
 
-const checkoutQuestions: CheckoutQuestionProjection[] = [
+const checkoutQuestions: CheckoutFeedbackQuestionProjection[] = [
   {
     id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
-    name: "checkout.checkout_question.icon.bad",
-    placeholder: "",
-    type: CheckoutQuestionType.ICON,
-    showCondition: [],
+    translationKey: "checkout.checkout_question.icon.bad",
+    type: CheckoutFeedbackQuestionType.ICON,
   },
   {
     id: "85e84a77-461c-41e6-8544-95b5294d0b80",
-    name: "checkout.checkout_question.icon.regular",
-    placeholder: "",
-    type: CheckoutQuestionType.ICON,
-    showCondition: [],
+    translationKey: "checkout.checkout_question.icon.regular",
+    type: CheckoutFeedbackQuestionType.ICON,
   },
   {
     id: "29441d25-8d9f-471e-a13e-a03f61c88091",
-    name: "checkout.checkout_question.icon.good",
-    placeholder: "",
-    type: CheckoutQuestionType.ICON,
-    showCondition: [],
+    translationKey: "checkout.checkout_question.icon.good",
+    type: CheckoutFeedbackQuestionType.ICON,
   },
 ];
 
-const Item: CheckoutQuestionItem = ({ checkoutQuestion }: CheckoutQuestionItemProps) => (
-  <Text>{checkoutQuestion.name}</Text>
+const Item: CheckoutQuestionItem<CheckoutFeedbackQuestionType> = ({ checkoutQuestion }) => (
+  <Text>{checkoutQuestion.translationKey}</Text>
 );
 
 const checkoutQuestionItems: CheckoutQuestionItems = {
-  [CheckoutQuestionType.HOST_DEFAULT]: Item,
-  [CheckoutQuestionType.HOST_TEXTAREA]: Item,
-  [CheckoutQuestionType.HOST_SELECT]: Item,
-  [CheckoutQuestionType.TEXTAREA]: Item,
-  [CheckoutQuestionType.BUTTON]: Item,
-  [CheckoutQuestionType.ICON]: Item,
+  [CheckoutFeedbackQuestionType.HOST_DEFAULT]: Item,
+  [CheckoutFeedbackQuestionType.HOST_TEXTAREA]: Item,
+  [CheckoutFeedbackQuestionType.HOST_SELECT]: Item,
+  [CheckoutFeedbackQuestionType.TEXTAREA]: Item,
+  [CheckoutFeedbackQuestionType.BUTTON]: Item,
+  [CheckoutFeedbackQuestionType.ICON]: Item,
 };
 
 const Wrapper = ({ children }: { children: ReactNode }) => (

package/src/infrastructure/ui/components/organisms/checkoutQuestions/CheckoutQuestions.tsx

@@ -1,14 +1,14 @@
 import React, { FC } from "react";
-import { CheckoutQuestionProjection } from "../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../projection/checkoutFeedback/checkoutFeedback";
 import CheckoutQuestion from "./CheckoutQuestion";
 
 interface CheckoutQuestionsProps {
-  readonly checkoutQuestions: CheckoutQuestionProjection[];
+  readonly checkoutQuestions: CheckoutFeedbackQuestionProjection[];
 }
 
 const CheckoutQuestions: FC<CheckoutQuestionsProps> = ({ checkoutQuestions }) => (
   <>
-    {checkoutQuestions.map((checkoutQuestion: CheckoutQuestionProjection) => (
+    {checkoutQuestions.map((checkoutQuestion: CheckoutFeedbackQuestionProjection) => (
       <CheckoutQuestion key={checkoutQuestion.id} checkoutQuestion={checkoutQuestion} checkoutQuestionParentId="" />
     ))}
   </>

package/src/infrastructure/ui/components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionItem.test.tsx

@@ -1,10 +1,8 @@
 import { renderHook } from "@testing-library/react-native";
 import React from "react";
 import { Text } from "react-native";
-import {
-  CheckoutQuestionProjection,
-  CheckoutQuestionType,
-} from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { createWrapper } from "../../../../test/createWrapper";
 import { render } from "../../../../test/render";
 import { CheckoutQuestionItem } from "../components/CheckoutQuestionItem";
@@ -15,37 +13,39 @@ import {
 } from "./useCheckoutQuestionItem";
 
 const hostDefaultText = "host default";
-const HostDefault: CheckoutQuestionItem = () => <Text>{hostDefaultText}</Text>;
+const HostDefault: CheckoutQuestionItem<CheckoutFeedbackQuestionType.HOST_DEFAULT> = () => (
+  <Text>{hostDefaultText}</Text>
+);
 const hostSelectText = "host select";
-const HostSelect: CheckoutQuestionItem = () => <Text>{hostSelectText}</Text>;
+const HostSelect: CheckoutQuestionItem<CheckoutFeedbackQuestionType.HOST_SELECT> = () => <Text>{hostSelectText}</Text>;
 const buttonText = "button";
-const Button: CheckoutQuestionItem = () => <Text>{buttonText}</Text>;
+const Button: CheckoutQuestionItem<CheckoutFeedbackQuestionType.BUTTON> = () => <Text>{buttonText}</Text>;
 const iconText = "icon";
-const Icon: CheckoutQuestionItem = () => <Text>{iconText}</Text>;
+const Icon: CheckoutQuestionItem<CheckoutFeedbackQuestionType.ICON> = () => <Text>{iconText}</Text>;
 const textareaText = "textarea";
-const Textarea: CheckoutQuestionItem = () => <Text>{textareaText}</Text>;
+const Textarea: CheckoutQuestionItem<CheckoutFeedbackQuestionType.TEXTAREA> = () => <Text>{textareaText}</Text>;
 
 const checkoutQuestionItems: CheckoutQuestionItems = {
-  [CheckoutQuestionType.HOST_DEFAULT]: HostDefault,
-  [CheckoutQuestionType.HOST_TEXTAREA]: HostDefault,
-  [CheckoutQuestionType.HOST_SELECT]: HostSelect,
-  [CheckoutQuestionType.TEXTAREA]: Textarea,
-  [CheckoutQuestionType.BUTTON]: Button,
-  [CheckoutQuestionType.ICON]: Icon,
+  [CheckoutFeedbackQuestionType.HOST_DEFAULT]: HostDefault,
+  [CheckoutFeedbackQuestionType.HOST_TEXTAREA]: HostDefault,
+  [CheckoutFeedbackQuestionType.HOST_SELECT]: HostSelect,
+  [CheckoutFeedbackQuestionType.TEXTAREA]: Textarea,
+  [CheckoutFeedbackQuestionType.BUTTON]: Button,
+  [CheckoutFeedbackQuestionType.ICON]: Icon,
 };
 
-const scenarios: [CheckoutQuestionType, string][] = [
-  [CheckoutQuestionType.HOST_DEFAULT, hostDefaultText],
-  [CheckoutQuestionType.HOST_TEXTAREA, hostDefaultText],
-  [CheckoutQuestionType.HOST_SELECT, hostSelectText],
-  [CheckoutQuestionType.TEXTAREA, textareaText],
-  [CheckoutQuestionType.BUTTON, buttonText],
-  [CheckoutQuestionType.ICON, iconText],
+const scenarios: [CheckoutFeedbackQuestionType, string][] = [
+  [CheckoutFeedbackQuestionType.HOST_DEFAULT, hostDefaultText],
+  [CheckoutFeedbackQuestionType.HOST_TEXTAREA, hostDefaultText],
+  [CheckoutFeedbackQuestionType.HOST_SELECT, hostSelectText],
+  [CheckoutFeedbackQuestionType.TEXTAREA, textareaText],
+  [CheckoutFeedbackQuestionType.BUTTON, buttonText],
+  [CheckoutFeedbackQuestionType.ICON, iconText],
 ];
 
 describe("useCheckoutQuestionItem hook", () => {
   test.each(scenarios)(
-    "returns the %s component from the context for CheckoutQuestionType.%s",
+    "returns the %s component from the context for CheckoutFeedbackQuestionType.%s",
     async (type, componentText) => {
       const { result } = renderHook(() => sut({ type }), {
         wrapper: createWrapper({
@@ -58,7 +58,7 @@ describe("useCheckoutQuestionItem hook", () => {
 
       const { findByText } = render(
         <Component
-          checkoutQuestion={{} as CheckoutQuestionProjection}
+          checkoutQuestion={{} as CheckoutFeedbackQuestionProjection}
           checkoutQuestionParentId="1d10e62a-27fa-49d0-a89e-b01775dfb4d8"
         />,
       );
@@ -69,9 +69,9 @@ describe("useCheckoutQuestionItem hook", () => {
     },
   );
 
-  it("throws if provided CheckoutQuestionType is not supported", () => {
+  it("throws if provided CheckoutFeedbackQuestionType is not supported", () => {
     expect(async () =>
-      renderHook(() => sut({ type: "NotSupportedType" as CheckoutQuestionType }), {
+      renderHook(() => sut({ type: "NotSupportedType" as CheckoutFeedbackQuestionType }), {
         wrapper: createWrapper({
           wrapper: CheckoutQuestionItemProvider,
           initialProps: { checkoutQuestionItems, children: null },

package/src/infrastructure/ui/components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionItem.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, FC, ReactNode, useContext, useMemo } from "react";
 import invariant from "tiny-invariant";
-import { CheckoutQuestionType } from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionType } from "../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { CheckoutQuestionItem } from "../components/CheckoutQuestionItem";
 
-type CheckoutQuestionItems = Record<CheckoutQuestionType, CheckoutQuestionItem>;
+type CheckoutQuestionItems = Record<CheckoutFeedbackQuestionType, CheckoutQuestionItem<CheckoutFeedbackQuestionType>>;
 
 const CheckoutQuestionItemContext = createContext<CheckoutQuestionItems>({} as CheckoutQuestionItems);
 
@@ -19,12 +19,12 @@ const CheckoutQuestionItemProvider: FC<CheckoutQuestionItemContextProviderProps>
   <CheckoutQuestionItemContext.Provider value={checkoutQuestionItems}>{children}</CheckoutQuestionItemContext.Provider>
 );
 
-interface UseCheckoutQuestionItemFunctionArgs {
-  readonly type: CheckoutQuestionType;
+interface UseCheckoutQuestionItemFunctionArgs<QT extends CheckoutFeedbackQuestionType> {
+  readonly type: QT;
 }
 
 interface UseCheckoutQuestionItemFunction {
-  (args: UseCheckoutQuestionItemFunctionArgs): CheckoutQuestionItem;
+  <QT extends CheckoutFeedbackQuestionType>(args: UseCheckoutQuestionItemFunctionArgs<QT>): CheckoutQuestionItem<QT>;
 }
 
 const useCheckoutQuestionItem: UseCheckoutQuestionItemFunction = ({ type }) => {
@@ -36,7 +36,7 @@ const useCheckoutQuestionItem: UseCheckoutQuestionItemFunction = ({ type }) => {
     "Your are trying to use the useCheckoutQuestionItem hook without wrapping your app with the <CheckoutQuestionItemProvider>.",
   );
 
-  invariant(item, `The provided CheckoutQuestionType (${type}) is NOT SUPPORTED`);
+  invariant(item, `The provided CheckoutFeedbackQuestionType (${type}) is NOT SUPPORTED`);
 
   return item;
 };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/CheckoutQuestionItem.ts

@@ -1,14 +1,15 @@
 import { FC, ReactNode } from "react";
-import { CheckoutQuestionProjection } from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 
-interface CheckoutQuestionItemProps {
-  readonly checkoutQuestion: CheckoutQuestionProjection;
+interface CheckoutQuestionItemProps<CFQT extends CheckoutFeedbackQuestionType> {
+  readonly checkoutQuestion: CheckoutFeedbackQuestionProjection<CFQT>;
   readonly checkoutQuestionParentId: string;
   readonly children?: ReactNode;
   readonly portalHostName?: string;
   readonly testID?: string;
 }
 
-type CheckoutQuestionItem = FC<CheckoutQuestionItemProps>;
+type CheckoutQuestionItem<CFQT extends CheckoutFeedbackQuestionType> = FC<CheckoutQuestionItemProps<CFQT>>;
 
 export type { CheckoutQuestionItem, CheckoutQuestionItemProps };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.test.tsx

@@ -1,9 +1,7 @@
 import { fireEvent } from "@testing-library/react-native";
 import React from "react";
-import {
-  CheckoutQuestionProjection,
-  CheckoutQuestionType,
-} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { render } from "../../../../../test/render";
 import { ButtonCheckoutQuestionItem } from "./ButtonCheckoutQuestionItem";
 
@@ -13,12 +11,10 @@ jest.mock("../../behaviors/useCheckoutQuestionFeedback", () => ({
 }));
 
 const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
-const checkoutQuestion: CheckoutQuestionProjection = {
+const checkoutQuestion: CheckoutFeedbackQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "checkout.checkout_question.personalshopper.yes",
-  placeholder: "",
-  type: CheckoutQuestionType.BUTTON,
-  showCondition: [],
+  translationKey: "checkout.checkout_question.personalshopper.yes",
+  type: CheckoutFeedbackQuestionType.BUTTON,
 };
 
 describe("ButtonCheckoutQuestionItem component (CheckoutQuestions organism)", () => {
@@ -30,9 +26,9 @@ describe("ButtonCheckoutQuestionItem component (CheckoutQuestions organism)", ()
       />,
     );
 
-    expect(getByText(checkoutQuestion.name)).toBeTruthy();
+    expect(getByText(checkoutQuestion.translationKey)).toBeTruthy();
 
-    fireEvent.press(getByText(checkoutQuestion.name));
+    fireEvent.press(getByText(checkoutQuestion.translationKey));
 
     expect(mockOnChange).toHaveBeenCalledWith({
       checkoutQuestionId: checkoutQuestionParentId,

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,22 +1,24 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
-import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+import { CheckoutQuestionItem } from "../CheckoutQuestionItem";
 import { style as buttonCheckoutQuestionItemStyle } from "./ButtonCheckoutQuestionItem.style";
 
 const ACTIVE_OPACITY = 0.6;
 
-const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
+const ButtonCheckoutQuestionItem: CheckoutQuestionItem<CheckoutFeedbackQuestionType.BUTTON> = ({
   checkoutQuestion,
   checkoutQuestionParentId,
   testID,
-}: CheckoutQuestionItemProps) => {
+}) => {
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
 
-  const optionText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+  const optionText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.translationKey });
   const handleOnPress = useCallback(
     () => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }),
     [onChange, checkoutQuestion.id, checkoutQuestionParentId],

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.tsx

@@ -1,16 +1,18 @@
+/* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
-import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+import { CheckoutQuestionItem } from "../CheckoutQuestionItem";
 import { style as hostDefaultCheckoutQuestionItemStyle } from "./HostDefaultCheckoutQuestionItem.style";
 
-const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem = ({
+const HostDefaultCheckoutQuestionItem: CheckoutQuestionItem<CheckoutFeedbackQuestionType.HOST_DEFAULT> = ({
   checkoutQuestion,
   children,
-}: CheckoutQuestionItemProps) => {
-  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+}) => {
+  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.translationKey });
 
   const style = useMemo(() => hostDefaultCheckoutQuestionItemStyle(), []);
 

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultReturnQuestionItem.test.tsx

@@ -1,19 +1,25 @@
 import React from "react";
 import { Text } from "react-native";
-import {
-  CheckoutQuestionProjection,
-  CheckoutQuestionType,
-} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { render } from "../../../../../test/render";
 import { HostDefaultCheckoutQuestionItem } from "./HostDefaultCheckoutQuestionItem";
 
 const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
-const checkoutQuestion: CheckoutQuestionProjection = {
+const checkoutQuestion: CheckoutFeedbackQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "checkout.checkout_question.selection.question",
-  placeholder: "",
-  type: CheckoutQuestionType.HOST_DEFAULT,
-  showCondition: [],
+  translationKey: "checkout.checkout_question.selection.question",
+  type: CheckoutFeedbackQuestionType.HOST_DEFAULT,
+  metadata: {
+    showCondition: [],
+  },
+  children: [
+    {
+      id: "0197594f-54f3-72bc-aadc-fb079811ad3b",
+      type: CheckoutFeedbackQuestionType.BUTTON,
+      translationKey: "checkout.checkout_question.personalshopper.yes",
+    },
+  ],
 };
 
 describe("HostDefaultCheckoutQuestionItem component (CheckoutQuestions organism)", () => {
@@ -27,7 +33,7 @@ describe("HostDefaultCheckoutQuestionItem component (CheckoutQuestions organism)
       </HostDefaultCheckoutQuestionItem>,
     );
 
-    expect(getByText(checkoutQuestion.name)).toBeTruthy();
+    expect(getByText(checkoutQuestion.translationKey)).toBeTruthy();
     expect(getByText("HostDefaultCheckoutQuestionItem children")).toBeTruthy();
   });
 });

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.test.tsx

@@ -1,40 +1,34 @@
 import React from "react";
 import { Text } from "react-native";
-import {
-  CheckoutQuestionProjection,
-  CheckoutQuestionType,
-} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { render } from "../../../../../test/render";
 import { HostSelectCheckoutQuestionItem } from "./HostSelectCheckoutQuestionItem";
 
 const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
-const checkoutQuestion: CheckoutQuestionProjection = {
+const checkoutQuestion: CheckoutFeedbackQuestionProjection = {
   id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
-  name: "checkout.checkout_question.selection.question",
-  placeholder: "",
-  type: CheckoutQuestionType.HOST_SELECT,
-  showCondition: [],
+  translationKey: "checkout.checkout_question.selection.question",
+  type: CheckoutFeedbackQuestionType.HOST_SELECT,
+  metadata: {
+    placeholder: "checkout.checkout_question.selection.question_placeholder",
+    showCondition: [],
+  },
   children: [
     {
       id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
-      name: "checkout.checkout_question.icon.bad",
-      placeholder: "",
-      type: CheckoutQuestionType.ICON,
-      showCondition: [],
+      translationKey: "checkout.checkout_question.icon.bad",
+      type: CheckoutFeedbackQuestionType.ICON,
     },
     {
       id: "85e84a77-461c-41e6-8544-95b5294d0b80",
-      name: "checkout.checkout_question.icon.regular",
-      placeholder: "",
-      type: CheckoutQuestionType.ICON,
-      showCondition: [],
+      translationKey: "checkout.checkout_question.icon.regular",
+      type: CheckoutFeedbackQuestionType.ICON,
     },
     {
       id: "29441d25-8d9f-471e-a13e-a03f61c88091",
-      name: "checkout.checkout_question.icon.good",
-      placeholder: "",
-      type: CheckoutQuestionType.ICON,
-      showCondition: [],
+      translationKey: "checkout.checkout_question.icon.good",
+      type: CheckoutFeedbackQuestionType.ICON,
     },
   ],
 };
@@ -53,7 +47,7 @@ describe("HostSelectCheckoutQuestionItem component (CheckoutQuestions organism)"
   it("renders correctly", async () => {
     const { getByText } = renderHostSelectCheckoutQuestionItem();
 
-    expect(getByText(checkoutQuestion.name)).toBeTruthy();
+    expect(getByText(checkoutQuestion.translationKey)).toBeTruthy();
     expect(getByText("HostSelectCheckoutQuestionItem children")).toBeTruthy();
   });
 });

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.tsx

@@ -1,16 +1,18 @@
+/* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { CheckoutFeedbackQuestionType } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { DOMAIN } from "../../../../../i18n/i18n";
-import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+import { CheckoutQuestionItem } from "../CheckoutQuestionItem";
 import { style as hostSelectCheckoutQuestionItemStyle } from "./HostSelectCheckoutQuestionItem.style";
 
-const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
+const HostSelectCheckoutQuestionItem: CheckoutQuestionItem<CheckoutFeedbackQuestionType.HOST_SELECT> = ({
   checkoutQuestion,
   children,
-}: CheckoutQuestionItemProps) => {
-  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+}) => {
+  const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.translationKey });
 
   const style = useMemo(() => hostSelectCheckoutQuestionItemStyle(), []);
 

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.test.tsx

@@ -1,11 +1,12 @@
 import { fireEvent } from "@testing-library/react-native";
 import React from "react";
+import { CheckoutFeedbackQuestionProjection } from "../../../../../../../projection/checkoutFeedback/checkoutFeedback";
 import {
-  CheckoutQuestionProjection,
-  CheckoutQuestionType,
-} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+  CheckoutFeedbackQuestionIcon,
+  CheckoutFeedbackQuestionType,
+} from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { render } from "../../../../../test/render";
-import { IconCheckoutQuestionItem, IconName } from "./IconCheckoutQuestionItem";
+import { IconCheckoutQuestionItem } from "./IconCheckoutQuestionItem";
 
 const mockOnChange = jest.fn();
 jest.mock("../../behaviors/useCheckoutQuestionFeedback", () => ({
@@ -13,26 +14,27 @@ jest.mock("../../behaviors/useCheckoutQuestionFeedback", () => ({
 }));
 
 const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
-const checkoutQuestion: CheckoutQuestionProjection = {
+const checkoutQuestion: CheckoutFeedbackQuestionProjection = {
   id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "icon",
-  placeholder: "",
-  type: CheckoutQuestionType.ICON,
-  showCondition: [],
+  translationKey: "icon",
+  type: CheckoutFeedbackQuestionType.ICON,
+  metadata: {
+    icon: "checkout_feedback.icon.regular",
+  },
 };
 
-type Scenario = [IconName];
+type Scenario = [CheckoutFeedbackQuestionIcon];
 const scenarios: Scenario[] = [
-  ["checkout_question.icon.bad"],
-  ["checkout_question.icon.good"],
-  ["checkout_question.icon.regular"],
+  ["checkout_feedback.icon.bad"],
+  ["checkout_feedback.icon.good"],
+  ["checkout_feedback.icon.regular"],
 ];
 
 describe("IconCheckoutQuestionItem component (CheckoutQuestions organism)", () => {
   test.each(scenarios)("renders correctly %s icon", (iconName) => {
     const { getByTestId } = render(
       <IconCheckoutQuestionItem
-        checkoutQuestion={{ ...checkoutQuestion, name: iconName }}
+        checkoutQuestion={{ ...checkoutQuestion, translationKey: iconName }}
         checkoutQuestionParentId={checkoutQuestionParentId}
         testID={iconName}
       />,

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.tsx

@@ -1,31 +1,31 @@
+/* eslint-disable react/prop-types */
 import React, { FC, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
 import { SvgProps } from "react-native-svg";
 import invariant from "tiny-invariant";
+import {
+  CheckoutFeedbackQuestionIcon,
+  CheckoutFeedbackQuestionType,
+} from "../../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
-import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+import { CheckoutQuestionItem } from "../CheckoutQuestionItem";
 import { style as iconCheckoutQuestionItemStyle } from "./IconCheckoutQuestionItem.style";
 import { Happy } from "./icons/Happy";
 import { Normal } from "./icons/Normal";
 import { Sad } from "./icons/Sad";
 
-type IconName = "checkout_question.icon.bad" | "checkout_question.icon.regular" | "checkout_question.icon.good";
-
-const ICON: Record<IconName, FC<SvgProps>> = {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "checkout_question.icon.bad": Sad,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "checkout_question.icon.regular": Normal,
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  "checkout_question.icon.good": Happy,
+const ICON: Record<CheckoutFeedbackQuestionIcon, FC<SvgProps>> = {
+  ["checkout_feedback.icon.bad"]: Sad,
+  ["checkout_feedback.icon.regular"]: Normal,
+  ["checkout_feedback.icon.good"]: Happy,
 };
 
-const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
+const IconCheckoutQuestionItem: CheckoutQuestionItem<CheckoutFeedbackQuestionType.ICON> = ({
   checkoutQuestion,
   checkoutQuestionParentId,
   testID,
-}: CheckoutQuestionItemProps) => {
-  const Icon = ICON[checkoutQuestion.name as IconName];
+}) => {
+  const Icon = ICON[checkoutQuestion.metadata.icon];
 
   const style = useMemo(() => iconCheckoutQuestionItemStyle(), []);
 
@@ -51,5 +51,4 @@ const IconCheckoutQuestionItem: CheckoutQuestionItem = ({
   );
 };
 
-export type { IconName };
 export { IconCheckoutQuestionItem };