@lookiero/checkout 12.3.0 → 12.4.0

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

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/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/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 };

package/src/projection/checkoutFeedback/viewCheckoutFeedbackDefinitionByCheckoutId.test.ts

@@ -0,0 +1,52 @@
+import { mock } from "jest-mock-extended";
+import { QueryBus } from "@lookiero/messaging";
+import { CheckoutFeedbackQuestionProjection } from "./checkoutFeedback";
+import { CheckoutFeedbackQuestionType } from "./checkoutFeedback.constants";
+import {
+  viewCheckoutFeedbackDefinitionByCheckoutId,
+  viewCheckoutFeedbackDefinitionByCheckoutIdHandler as sut,
+} from "./viewCheckoutFeedbackDefinitionByCheckoutId";
+
+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 queryBus = mock<QueryBus>();
+const signal = mock<AbortSignal>();
+
+describe("viewCheckoutFeedbackDefinitionByCheckoutId", () => {
+  it("returns checkout questions by checkout  id", async () => {
+    const query = viewCheckoutFeedbackDefinitionByCheckoutId({ checkoutId });
+    const view = jest.fn(() => Promise.resolve(checkoutFeedbackDefinition));
+
+    const checkoutFeedbackDefinitionResult = await sut({ view, queryBus, signal })(query);
+
+    expect(checkoutFeedbackDefinitionResult).toBe(checkoutFeedbackDefinition);
+  });
+});