@lookiero/checkout 12.3.0 → 12.5.0

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.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 { TextareaCheckoutQuestionItem } from "./TextareaCheckoutQuestionItem";
 
@@ -13,21 +11,13 @@ jest.mock("../../behaviors/useCheckoutQuestionFeedback", () => ({
 }));
 
 const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
-const checkoutQuestion: CheckoutQuestionProjection = {
-  id: "ce3e8d57-5eea-4dd3-bef4-2e811a143612",
-  name: "comment_title",
-  placeholder: "",
-  type: CheckoutQuestionType.HOST_TEXTAREA,
-  showCondition: [],
-  children: [
-    {
-      id: "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
-      name: "comment_textarea",
-      placeholder: "comment_textarea_placeholder",
-      type: CheckoutQuestionType.TEXTAREA,
-      showCondition: [],
-    },
-  ],
+const checkoutQuestion: CheckoutFeedbackQuestionProjection = {
+  id: "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
+  translationKey: "comment_textarea",
+  type: CheckoutFeedbackQuestionType.TEXTAREA,
+  metadata: {
+    placeholder: "comment_textarea_placeholder",
+  },
 };
 
 describe("TextareaCheckoutQuestionItem component (CheckoutQuestions organism)", () => {

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.tsx

@@ -1,20 +1,22 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { useI18n } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
+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 textareaCheckoutQuestionItemStyle } from "./TextareaCheckoutQuestionItem.style";
 
-const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
+const TextareaCheckoutQuestionItem: CheckoutQuestionItem<CheckoutFeedbackQuestionType.TEXTAREA> = ({
   checkoutQuestion,
   checkoutQuestionParentId,
   testID,
-}: CheckoutQuestionItemProps) => {
+}) => {
   const { formatMessage } = useI18n({ domain: DOMAIN });
   const placeholderText = useMemo(
-    () => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""),
-    [formatMessage, checkoutQuestion.placeholder],
+    () => (checkoutQuestion.metadata.placeholder ? formatMessage({ id: checkoutQuestion.metadata.placeholder }) : ""),
+    [formatMessage, checkoutQuestion.metadata.placeholder],
   );
 
   const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });

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

@@ -4,7 +4,6 @@ import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18n } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
-import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style as hostDefaultReturnQuestionItemStyle } from "./HostDefaultReturnQuestionItem.style";
@@ -20,7 +19,7 @@ const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_
 
   return (
     <>
-      {returnQuestionWithTranslationKey(returnQuestion) && returnQuestion.translationKey !== " " && !isAllOptions ? (
+      {returnQuestion.translationKey && returnQuestion.translationKey !== " " && !isAllOptions ? (
         <View style={style.title}>
           <Text level={3} action>
             {formatMessage({ id: returnQuestion.translationKey })}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostLegacyRadioGroupReturnQuestionItem/HostLegacyRadioGroupReturnQuestionItem.style.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const style = () => {
+  const { colorBgBase, space2, space6 } = theme();
+
+  return StyleSheet.create({
+    title: {
+      marginBottom: space2,
+    },
+    wrapper: {
+      backgroundColor: colorBgBase,
+      marginBottom: space2,
+      padding: space6,
+    },
+  });
+};
+
+export { style };

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostLegacyRadioGroupReturnQuestionItem/HostLegacyRadioGroupReturnQuestionItem.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/prop-types */
+import React, { useMemo } from "react";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
+import { useI18n } from "@lookiero/i18n-react";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { DOMAIN } from "../../../../../i18n/i18n";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
+import { style as hostLegacyRadioGroupReturnQuestionItemStyle } from "./HostLegacyRadioGroupReturnQuestionItem.style";
+
+const HostLegacyRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT> = ({
+  returnQuestion,
+  children,
+  testID,
+}) => {
+  const { formatMessage } = useI18n({ domain: DOMAIN });
+  const placeholderText = useMemo(
+    () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
+    [formatMessage, returnQuestion.metadata.placeholder],
+  );
+
+  const style = useMemo(() => hostLegacyRadioGroupReturnQuestionItemStyle(), []);
+
+  return (
+    <>
+      <View style={style.wrapper} testID={testID}>
+        <Text level={3} style={style.title} action>
+          {placeholderText}
+        </Text>
+        {children}
+      </View>
+    </>
+  );
+};
+
+export { HostLegacyRadioGroupReturnQuestionItem };

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Text } from "react-native";
+import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
+import { render } from "../../../../../test/render";
+import { HostRadioGroupReturnQuestionItem } from "./HostRadioGroupReturnQuestionItem";
+
+const returnQuestion: ReturnQuestionProjection<ReturnQuestionType.HOST_RADIO_GROUP> = {
+  id: "9251dc2c-d76a-484d-9299-346929af932f",
+  translationKey: "size_large",
+  type: ReturnQuestionType.HOST_RADIO_GROUP,
+  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,
+    },
+  ],
+};
+
+describe("HostRadioGroupReturnQuestionItem component (ReturnQuestions organism)", () => {
+  it("renders correctly", () => {
+    const childrenText = "HostRadioGroupReturnQuestionItem children";
+    const { getByText } = render(
+      <HostRadioGroupReturnQuestionItem
+        returnQuestion={returnQuestion}
+        returnQuestionParent={{} as ReturnQuestionProjection}
+      >
+        <Text>{childrenText}</Text>
+      </HostRadioGroupReturnQuestionItem>,
+    );
+
+    expect(getByText(returnQuestion.translationKey as string)).toBeTruthy();
+    expect(getByText(childrenText)).toBeTruthy();
+  });
+});

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

@@ -8,28 +8,23 @@ import { DOMAIN } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style as hostRadioGroupReturnQuestionItemStyle } from "./HostRadioGroupReturnQuestionItem.style";
 
-const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_SELECT> = ({
+const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_RADIO_GROUP> = ({
   returnQuestion,
   children,
   testID,
 }) => {
   const { formatMessage } = useI18n({ domain: DOMAIN });
-  const placeholderText = useMemo(
-    () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
-    [formatMessage, returnQuestion.metadata.placeholder],
-  );
-
   const style = useMemo(() => hostRadioGroupReturnQuestionItemStyle(), []);
 
   return (
-    <>
-      <View style={style.wrapper} testID={testID}>
+    <View style={style.wrapper} testID={testID}>
+      {returnQuestion.translationKey && (
         <Text level={3} style={style.title} action>
-          {placeholderText}
+          {formatMessage({ id: returnQuestion.translationKey })}
         </Text>
-        {children}
-      </View>
-    </>
+      )}
+      {children}
+    </View>
   );
 };
 

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.tsx

@@ -11,12 +11,11 @@ import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style as returnQuestionFeedbackItemStyle } from "./ReturnQuestionFeedbackItem.style";
 
 const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
-  const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
+  const { formatMessage } = useI18n({ domain: DOMAIN });
   const unansweredText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_UNANSWERED });
 
   const returnQuestionFeedback = useReturnQuestionFeedback();
 
-  const { formatMessage } = useI18n({ domain: DOMAIN });
   const translate = useCallback(
     (returnQuestionName: string) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }),
     [formatMessage],
@@ -29,9 +28,11 @@ const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEF
 
   return (
     <View style={style.container}>
-      <Text level={2} style={style.title} detailBold>
-        {titleText}
-      </Text>
+      {returnQuestion.translationKey && (
+        <Text level={2} style={style.title} detailBold>
+          {formatMessage({ id: returnQuestion.translationKey })}
+        </Text>
+      )}
       <Text level={1} detail>
         {feedback || unansweredText}
       </Text>

package/src/infrastructure/ui/components/organisms/returnQuestions/util/__snapshots__/returnQuestionFeedback.test.ts.snap

@@ -2,8 +2,28 @@
 
 exports[`returnQuestionFeedback utils return the deepest returnQuestion with feedback recursively 1`] = `
 [
-  undefined,
-  false,
+  {
+    "children": [
+      {
+        "id": "68c0bb98-b00a-4b86-af43-528fe903cb69",
+        "translationKey": "size_overall",
+        "type": "OPTION",
+      },
+      {
+        "id": "85e84a77-461c-41e6-8544-95b5294d0b80",
+        "translationKey": "size_trousers_too_long",
+        "type": "OPTION",
+      },
+      {
+        "id": "29441d25-8d9f-471e-a13e-a03f61c88091",
+        "translationKey": "size_fit_cut_does_not_fit",
+        "type": "OPTION",
+      },
+    ],
+    "id": "542c4d24-e1da-484f-8c3a-7d89ee135adc",
+    "type": "HOST_STACK",
+  },
+  true,
 ]
 `;
 

package/src/infrastructure/ui/components/organisms/returnQuestions/util/returnQuestionFeedback.ts

@@ -1,10 +1,7 @@
 import { isUuid } from "@lookiero/sty-psp-uuid";
 import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
-import {
-  returnQuestionHasChildren,
-  returnQuestionWithTranslationKey,
-} from "../../../../../../projection/returnQuestion/returnQuestion.typeguard";
+import { returnQuestionHasChildren } from "../../../../../../projection/returnQuestion/returnQuestion.typeguard";
 
 interface RecursiveFeedbackForReturnQuestionFunctionArgs {
   readonly feedback: FeedbackProjection;
@@ -36,9 +33,7 @@ const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction = ({
       if (feebackReturnQuestionChild) {
         return [
           ...acc,
-          ...(returnQuestionWithTranslationKey(feebackReturnQuestionChild)
-            ? [translate(feebackReturnQuestionChild.translationKey)]
-            : []),
+          ...(feebackReturnQuestionChild.translationKey ? [translate(feebackReturnQuestionChild.translationKey)] : []),
           ...feedbackForReturnQuestion({ feedback, returnQuestion: feebackReturnQuestionChild, translate, acc }),
         ];
       }

package/src/infrastructure/ui/views/feedback/Feedback.test.tsx

@@ -9,8 +9,8 @@ import { Customer } from "../../../../projection/customer/customer";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { checkoutQuestions as checkoutQuestionsMock } from "../../../projection/checkoutQuestion/checkoutQuestions.mock";
-import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
+import { checkoutFeedbackDefinition as checkoutFeedbackDefinitionMock } from "../../../projection/checkoutFeedback/checkoutFeedbackDefinition.mock";
+import { useViewCheckoutFeedbackDefinitionByCheckoutId } from "../../../projection/checkoutFeedback/react/useViewCheckoutFeedbackDefinitionByCheckoutId";
 import { I18nMessages } from "../../i18n/i18n";
 import { render } from "../../test/render";
 import { Feedback } from "./Feedback";
@@ -37,7 +37,7 @@ jest.mock("../../hooks/useStaticInfo", () => ({
 }));
 
 jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
-jest.mock("../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId");
+jest.mock("../../../projection/checkoutFeedback/react/useViewCheckoutFeedbackDefinitionByCheckoutId");
 jest.mock("../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback");
 
 const mockTrackPressContinue = jest.fn();
@@ -69,7 +69,10 @@ afterAll(() => {
 describe("Feedback view", () => {
   test("renders correctly", async () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
-    (useListCheckoutQuestionsByCheckoutId as jest.Mock).mockReturnValue([checkoutQuestionsMock, QueryStatus.SUCCESS]);
+    (useViewCheckoutFeedbackDefinitionByCheckoutId as jest.Mock).mockReturnValue([
+      checkoutFeedbackDefinitionMock,
+      QueryStatus.SUCCESS,
+    ]);
     (useGiveCheckoutFeedback as jest.Mock).mockReturnValue([mockGiveCheckoutFeedback, CommandStatus.SUCCESS]);
 
     const { findByText, getByTestId, getByText } = render(<Feedback layout={DummyLayout} />);
@@ -116,7 +119,10 @@ describe("Feedback view", () => {
 
   test("calls giveCheckoutFeedback with an empty feedback when unmounted", async () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
-    (useListCheckoutQuestionsByCheckoutId as jest.Mock).mockReturnValue([checkoutQuestionsMock, QueryStatus.SUCCESS]);
+    (useViewCheckoutFeedbackDefinitionByCheckoutId as jest.Mock).mockReturnValue([
+      checkoutFeedbackDefinitionMock,
+      QueryStatus.SUCCESS,
+    ]);
     (useGiveCheckoutFeedback as jest.Mock).mockReturnValue([mockGiveCheckoutFeedback, CommandStatus.SUCCESS]);
 
     const { unmount } = render(<Feedback layout={DummyLayout} />);

package/src/infrastructure/ui/views/feedback/Feedback.tsx

@@ -4,10 +4,10 @@ import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { Layout as UiLayout, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutFeedbackProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
-import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
+import { CheckoutFeedbackQuestionType } from "../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
+import { useViewCheckoutFeedbackDefinitionByCheckoutId } from "../../../projection/checkoutFeedback/react/useViewCheckoutFeedbackDefinitionByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
 import { useTrackChangeFeedback } from "../../../tracking/useTrackChangeFeedback";
 import { useTrackPageView } from "../../../tracking/useTrackPageView";
@@ -43,7 +43,7 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
   const style = useMemo(() => feedbackStyle(), []);
 
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
-  const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
+  const [checkoutFeedbackDefinition, checkoutFeedbackDefinitionStatus] = useViewCheckoutFeedbackDefinitionByCheckoutId({
     checkoutId: checkout?.id as string,
   });
 
@@ -64,19 +64,19 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
   });
   const handleOnChangedFeedback: HandleOnChangedFeedbackFunction = useCallback(
     ({ checkoutQuestionId, checkoutQuestionFeedback, hasFeedback }) => {
-      const question = checkoutQuestions?.find((question) => question.id === checkoutQuestionId);
+      const question = checkoutFeedbackDefinition?.find((question) => question.id === checkoutQuestionId);
 
-      if (question?.type === CheckoutQuestionType.HOST_TEXTAREA && hasFeedback) {
+      if (question?.type === CheckoutFeedbackQuestionType.HOST_TEXTAREA && hasFeedback) {
         return;
       }
 
       trackChangeFeedback({
         questionId: checkoutQuestionId,
-        questionName: question?.name as string,
+        questionName: question?.translationKey || "",
         feedback: checkoutQuestionFeedback,
       });
     },
-    [checkoutQuestions, trackChangeFeedback],
+    [checkoutFeedbackDefinition, trackChangeFeedback],
   );
 
   const [giveCheckoutFeedback, giveCheckoutFeedbackStatus] = useGiveCheckoutFeedback({
@@ -117,7 +117,8 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
 
   const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
   const dependenciesLoaded =
-    dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(checkoutQuestionsStatus);
+    dependenciesLoadedStatuses.includes(checkoutStatus) &&
+    dependenciesLoadedStatuses.includes(checkoutFeedbackDefinitionStatus);
 
   if (!dependenciesLoaded) return <Spinner />;
 
@@ -126,7 +127,7 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
       <Layout>
         <Body style={{ row: [style.container, isDesktop && style.containerDesktop] }}>
           <CheckoutQuestionsForm
-            checkoutQuestions={checkoutQuestions || []}
+            checkoutQuestions={checkoutFeedbackDefinition || []}
             submitButtonDisabled={giveCheckoutFeedbackStatus === CommandStatus.LOADING}
             onSubmit={handleOnSubmit}
           />

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent } from "@testing-library/react-native";
 import React, { ReactNode } from "react";
-import { checkoutQuestions } from "../../../../../projection/checkoutQuestion/checkoutQuestions.mock";
+import { checkoutFeedbackDefinition } from "../../../../../projection/checkoutFeedback/checkoutFeedbackDefinition.mock";
 import { CheckoutQuestionFeedbackProvider } from "../../../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { render } from "../../../../test/render";
@@ -16,7 +16,7 @@ describe("CheckoutQuestionsForm component)", () => {
   test("renders correctly", async () => {
     const { getByText, getByTestId, queryByText } = render(
       <CheckoutQuestionsForm
-        checkoutQuestions={checkoutQuestions}
+        checkoutQuestions={checkoutFeedbackDefinition}
         submitButtonDisabled={false}
         onSubmit={mockOnSubmit}
       />,

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.tsx

@@ -2,11 +2,11 @@ import React, { FC, useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { CheckoutFeedbackProjection } from "../../../../../../projection/checkoutFeedback/checkoutFeedback";
 import {
-  CheckoutQuestionProjection,
-  CheckoutQuestionType,
-} from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
+  CheckoutFeedbackProjection,
+  CheckoutFeedbackQuestionProjection,
+} from "../../../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "../../../../../../projection/checkoutFeedback/checkoutFeedback.constants";
 import { CheckoutQuestions } from "../../../../components/organisms/checkoutQuestions/CheckoutQuestions";
 import { useCheckoutQuestionFeedback } from "../../../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import {
@@ -21,16 +21,16 @@ import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/c
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 
 const checkoutQuestionItems: CheckoutQuestionItems = {
-  [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
-  [CheckoutQuestionType.HOST_TEXTAREA]: HostDefaultCheckoutQuestionItem,
-  [CheckoutQuestionType.HOST_SELECT]: HostSelectCheckoutQuestionItem,
-  [CheckoutQuestionType.TEXTAREA]: TextareaCheckoutQuestionItem,
-  [CheckoutQuestionType.ICON]: IconCheckoutQuestionItem,
-  [CheckoutQuestionType.BUTTON]: ButtonCheckoutQuestionItem,
+  [CheckoutFeedbackQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
+  [CheckoutFeedbackQuestionType.HOST_TEXTAREA]: HostDefaultCheckoutQuestionItem,
+  [CheckoutFeedbackQuestionType.HOST_SELECT]: HostSelectCheckoutQuestionItem,
+  [CheckoutFeedbackQuestionType.TEXTAREA]: TextareaCheckoutQuestionItem,
+  [CheckoutFeedbackQuestionType.ICON]: IconCheckoutQuestionItem,
+  [CheckoutFeedbackQuestionType.BUTTON]: ButtonCheckoutQuestionItem,
 };
 
 interface CheckoutQuestionsFormProps {
-  readonly checkoutQuestions: CheckoutQuestionProjection[];
+  readonly checkoutQuestions: CheckoutFeedbackQuestionProjection[];
   readonly submitButtonDisabled: boolean;
   readonly onSubmit: (feedback: CheckoutFeedbackProjection) => void;
 }
@@ -49,8 +49,15 @@ const CheckoutQuestionsForm: FC<CheckoutQuestionsFormProps> = ({
 
     return checkoutQuestions.filter(
       (checkoutQuestion) =>
-        checkoutQuestion.showCondition.length === 0 ||
-        checkoutQuestion.showCondition.some((condition) => responses.includes(condition)),
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        !checkoutQuestion?.metadata?.showCondition ||
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        checkoutQuestion?.metadata?.showCondition.length === 0 ||
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        checkoutQuestion?.metadata?.showCondition.some((condition) => responses.includes(condition)),
     );
   }, [checkoutQuestions, feedback]);
 

package/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.tsx

@@ -22,6 +22,7 @@ const returnQuestionItems: ReturnQuestionItems = {
   [ReturnQuestionType.HOST_STACK]: ReturnQuestionFeedbackItem,
   [ReturnQuestionType.TEXTAREA]: ReturnQuestionFeedbackItem,
   [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
+  [ReturnQuestionType.HOST_RADIO_GROUP]: ReturnQuestionFeedbackItem,
 };
 
 interface ReturnQuestionsFeedbackProps {

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -27,6 +27,7 @@ import {
   ReturnQuestionItems,
 } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
 import { HostDefaultReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
+import { HostLegacyRadioGroupReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostLegacyRadioGroupReturnQuestionItem/HostLegacyRadioGroupReturnQuestionItem";
 import { HostRadioGroupReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem";
 import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/form/HostStackReturnQuestionItem";
 import { RadioReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem";
@@ -43,7 +44,8 @@ const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
 const returnQuestionItems: ReturnQuestionItems = {
   [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
   [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
-  [ReturnQuestionType.HOST_SELECT]: HostRadioGroupReturnQuestionItem,
+  [ReturnQuestionType.HOST_SELECT]: HostLegacyRadioGroupReturnQuestionItem,
+  [ReturnQuestionType.HOST_RADIO_GROUP]: HostRadioGroupReturnQuestionItem,
   [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
   [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
   [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,

package/src/projection/checkoutFeedback/checkoutFeedback.constants.ts

@@ -0,0 +1,16 @@
+enum CheckoutFeedbackQuestionType {
+  HOST_DEFAULT = "HOST_DEFAULT",
+  HOST_TEXTAREA = "HOST_TEXTAREA",
+  HOST_SELECT = "HOST_SELECT",
+  TEXTAREA = "TEXTAREA",
+  ICON = "ICON",
+  BUTTON = "BUTTON",
+}
+
+type CheckoutFeedbackQuestionIcon =
+  | "checkout_feedback.icon.bad"
+  | "checkout_feedback.icon.regular"
+  | "checkout_feedback.icon.good";
+
+export type { CheckoutFeedbackQuestionIcon };
+export { CheckoutFeedbackQuestionType };

package/src/projection/checkoutFeedback/checkoutFeedback.metadata.ts

@@ -0,0 +1,28 @@
+import { EmptyObject } from "@lookiero/sty-psp-typescript";
+import { CheckoutFeedbackQuestionIcon, CheckoutFeedbackQuestionType } from "./checkoutFeedback.constants";
+
+type MetadataDictionary = Record<CheckoutFeedbackQuestionType, EmptyObject>;
+
+interface ComponentWithPlaceholder {
+  readonly placeholder: string;
+}
+
+interface ComponentCondition {
+  readonly showCondition: string[];
+}
+
+interface ComponentIcon {
+  readonly icon: CheckoutFeedbackQuestionIcon;
+}
+
+type ComponentMetadata = MetadataDictionary & {
+  [CheckoutFeedbackQuestionType.HOST_DEFAULT]: ComponentCondition;
+  [CheckoutFeedbackQuestionType.HOST_TEXTAREA]: ComponentCondition;
+  [CheckoutFeedbackQuestionType.HOST_SELECT]: ComponentCondition & ComponentWithPlaceholder;
+  [CheckoutFeedbackQuestionType.TEXTAREA]: ComponentWithPlaceholder;
+  [CheckoutFeedbackQuestionType.ICON]: ComponentIcon;
+};
+
+type Metadata<CFDT extends CheckoutFeedbackQuestionType> = ComponentMetadata[CFDT];
+
+export type { Metadata, ComponentCondition };

package/src/projection/checkoutFeedback/checkoutFeedback.ts

@@ -1,5 +1,41 @@
+import { EmptyObject, ExcludePropertyIfOptional, NonEmptyArray } from "@lookiero/sty-psp-typescript";
 import { FeedbackProjection } from "../feedback/feedback";
+import { CheckoutFeedbackQuestionType } from "./checkoutFeedback.constants";
+import { Metadata } from "./checkoutFeedback.metadata";
 
-type CheckoutFeedbackProjection = FeedbackProjection;
+type CheckoutFeedback = FeedbackProjection;
 
-export type { CheckoutFeedbackProjection };
+type CheckoutFeedbackQuestionTypesWithChildren =
+  | CheckoutFeedbackQuestionType.HOST_DEFAULT
+  | CheckoutFeedbackQuestionType.HOST_TEXTAREA
+  | CheckoutFeedbackQuestionType.HOST_SELECT;
+
+type CheckoutFeedbackQuestionTypesWithOptionalTranslationKeys = CheckoutFeedbackQuestionType.ICON;
+
+type CheckoutFeedbackQuestionMetadata<CFDT extends CheckoutFeedbackQuestionType> = ExcludePropertyIfOptional<
+  "metadata",
+  { readonly metadata: Metadata<CFDT> }
+>;
+
+type CheckoutFeedbackQuestionTypeChildren<QT extends CheckoutFeedbackQuestionType> =
+  QT extends CheckoutFeedbackQuestionTypesWithChildren
+    ? { readonly children: NonEmptyArray<CheckoutFeedbackQuestion> }
+    : EmptyObject;
+
+type CheckoutFeedbackQuestionTypeTranslationKey<QT extends CheckoutFeedbackQuestionType> =
+  QT extends CheckoutFeedbackQuestionTypesWithOptionalTranslationKeys
+    ? { readonly translationKey?: string }
+    : { readonly translationKey: string };
+
+type CheckoutFeedbackQuestion<CFDT extends CheckoutFeedbackQuestionType = CheckoutFeedbackQuestionType> =
+  CFDT extends infer K extends CheckoutFeedbackQuestionType
+    ? { readonly id: string; readonly type: K } & CheckoutFeedbackQuestionTypeTranslationKey<K> &
+        CheckoutFeedbackQuestionTypeChildren<K> &
+        CheckoutFeedbackQuestionMetadata<K>
+    : never;
+
+export type {
+  CheckoutFeedback as CheckoutFeedbackProjection,
+  CheckoutFeedbackQuestion as CheckoutFeedbackQuestionProjection,
+  CheckoutFeedbackQuestionTypesWithChildren,
+};

package/src/projection/checkoutFeedback/checkoutFeedback.typeguards.ts

@@ -0,0 +1,13 @@
+import { CheckoutFeedbackQuestionProjection, CheckoutFeedbackQuestionTypesWithChildren } from "./checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "./checkoutFeedback.constants";
+
+const checkoutFeedbackQuestionHasChildren = (
+  question: CheckoutFeedbackQuestionProjection,
+): question is CheckoutFeedbackQuestionProjection<CheckoutFeedbackQuestionTypesWithChildren> =>
+  [
+    CheckoutFeedbackQuestionType.HOST_DEFAULT,
+    CheckoutFeedbackQuestionType.HOST_SELECT,
+    CheckoutFeedbackQuestionType.HOST_TEXTAREA,
+  ].includes(question.type);
+
+export { checkoutFeedbackQuestionHasChildren };