@lookiero/checkout 12.3.0 → 12.4.0

package/src/infrastructure/projection/checkoutFeedback/react/useViewCheckoutFeedbackDefinitionByCheckoutId.test.ts

@@ -0,0 +1,58 @@
+import { renderHook, waitFor } from "@testing-library/react-native";
+import { bootstrap, QueryStatus } from "@lookiero/messaging-react";
+import { CheckoutFeedbackQuestionProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../projection/checkoutFeedback/checkoutFeedback.constants";
+import {
+  viewCheckoutFeedbackDefinitionByCheckoutIdHandler,
+  VIEW_CHECKOUT_FEEDBACK_DEFINITION_BY_CHECKOUT_ID,
+} from "../../../../projection/checkoutFeedback/viewCheckoutFeedbackDefinitionByCheckoutId";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+import { useViewCheckoutFeedbackDefinitionByCheckoutId as sut } from "./useViewCheckoutFeedbackDefinitionByCheckoutId";
+
+const checkoutId = "29790d24-b139-4ab8-b618-d796d101e974";
+const checkoutFeedbackDefinition: CheckoutFeedbackQuestionProjection[] = [
+  {
+    id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
+    type: CheckoutFeedbackQuestionType.HOST_DEFAULT,
+    translationKey: "checkout.feedback.question.default",
+    metadata: {
+      showCondition: [],
+    },
+    children: [
+      {
+        id: "01975911-d451-7651-b1ae-3f977928e8a2",
+        type: CheckoutFeedbackQuestionType.HOST_TEXTAREA,
+        metadata: {
+          showCondition: [],
+        },
+        children: [
+          {
+            id: "01975911-ec6b-768e-9b4a-a6f2645b01b2",
+            type: CheckoutFeedbackQuestionType.TEXTAREA,
+            translationKey: "checkout.feedback.question.textarea",
+            metadata: {
+              placeholder: "checkout.feedback.question.textarea.placeholder",
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+const view = jest.fn().mockReturnValue(checkoutFeedbackDefinition);
+const { Component: Messaging } = bootstrap({ id: MESSAGING_CONTEXT_ID })
+  .query(VIEW_CHECKOUT_FEEDBACK_DEFINITION_BY_CHECKOUT_ID, viewCheckoutFeedbackDefinitionByCheckoutIdHandler, { view })
+  .build();
+
+describe("useViewCheckoutFeedbackDefinitionByCheckoutId integration hook", () => {
+  it("returns success as the query status and the result itself after rendering the hook", async () => {
+    const { result } = renderHook(() => sut({ checkoutId }), { wrapper: Messaging });
+
+    await waitFor(() => {
+      const [projection, status] = result.current;
+
+      expect(projection).toStrictEqual(checkoutFeedbackDefinition);
+      expect(status).toBe(QueryStatus.SUCCESS);
+    });
+  });
+});

package/src/infrastructure/projection/checkoutFeedback/react/useViewCheckoutFeedbackDefinitionByCheckoutId.ts

@@ -0,0 +1,25 @@
+import { useQuery, UseQueryFunctionResult } from "@lookiero/messaging-react";
+import { CheckoutFeedbackQuestionProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
+import { viewCheckoutFeedbackDefinitionByCheckoutId } from "../../../../projection/checkoutFeedback/viewCheckoutFeedbackDefinitionByCheckoutId";
+import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
+
+interface UseViewCheckoutFeedbackDefinitionByCheckoutIdFunctionArgs {
+  readonly checkoutId: string;
+}
+
+interface UseViewCheckoutFeedbackDefinitionByCheckoutIdFunction {
+  (
+    args: UseViewCheckoutFeedbackDefinitionByCheckoutIdFunctionArgs,
+  ): UseQueryFunctionResult<CheckoutFeedbackQuestionProjection[]>;
+}
+
+const useViewCheckoutFeedbackDefinitionByCheckoutId: UseViewCheckoutFeedbackDefinitionByCheckoutIdFunction = ({
+  checkoutId,
+}) =>
+  useQuery({
+    query: viewCheckoutFeedbackDefinitionByCheckoutId({ checkoutId }),
+    contextId: MESSAGING_CONTEXT_ID,
+    options: { staleTime: Infinity, retry: false, refetchOnWindowFocus: false },
+  });
+
+export { useViewCheckoutFeedbackDefinitionByCheckoutId };

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

@@ -1,64 +1,59 @@
+/* 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 CheckoutQuestion from "./CheckoutQuestion";
 import { CheckoutQuestionItemProvider, CheckoutQuestionItems } from "./behaviors/useCheckoutQuestionItem";
-import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "./components/CheckoutQuestionItem";
+import { CheckoutQuestionItem } from "./components/CheckoutQuestionItem";
 
 const mockOnChange = jest.fn();
 jest.mock("./behaviors/useCheckoutQuestionFeedback", () => ({
   useCheckoutQuestionFeedbackForId: () => ({ onChange: mockOnChange }),
 }));
 
-const checkoutQuestion: CheckoutQuestionProjection = {
+const checkoutQuestion: CheckoutFeedbackQuestionProjection = {
   id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
-  name: "checkout.checkout_question.selection.question",
-  placeholder: "checkout.checkout_question.selection.placeholder",
-  type: CheckoutQuestionType.HOST_SELECT,
-  showCondition: [],
+  translationKey: "checkout.checkout_question.selection.question",
+  type: CheckoutFeedbackQuestionType.HOST_SELECT,
+  metadata: {
+    placeholder: "checkout.checkout_question.selection.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,
     },
   ],
 };
 
-const Item: CheckoutQuestionItem = ({ checkoutQuestion, children }: CheckoutQuestionItemProps) => (
+const Item: CheckoutQuestionItem<CheckoutFeedbackQuestionType> = ({ checkoutQuestion, children }) => (
   <>
-    <Text>{checkoutQuestion.name}</Text>
+    <Text>{checkoutQuestion.translationKey}</Text>
     {children}
   </>
 );
 
 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/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();
   });
 });