@lookiero/checkout 8.18.0 → 8.19.0

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

@@ -1,8 +1,6 @@
 import React from "react";
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { feedback as mockFeedback } from "../../../../../../projection/feedback/feedback.mock";
 import { I18nMessages } from "../../../../../i18n/i18n";
 import { render } from "../../../../../test/render";
@@ -12,40 +10,34 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
   useReturnQuestionFeedback: () => mockFeedback,
 }));
 
-const returnQuestion: ReturnQuestionProjection = {
+const returnQuestion: ReturnQuestionProjection<ReturnQuestionType.HOST_DEFAULT> = {
   id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
-  name: "size_title",
-  placeholder: "",
-  type: ReturnQuestionType.HOST_STACK,
+  translationKey: "size_title",
+  type: ReturnQuestionType.HOST_DEFAULT,
   children: [
     {
       id: "9251dc2c-d76a-484d-9299-346929af932f",
-      name: "size_large",
-      placeholder: "",
+      translationKey: "size_large",
       type: ReturnQuestionType.OPTION,
       children: [
         {
           id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
-          name: "",
-          placeholder: "",
-          type: ReturnQuestionType.HOST_STACK,
+          translationKey: "",
+          type: ReturnQuestionType.HOST_DEFAULT,
           children: [
             {
               id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
-              name: "size_overall",
-              placeholder: "",
+              translationKey: "size_overall",
               type: ReturnQuestionType.OPTION,
             },
             {
               id: "85e84a77-461c-41e6-8544-95b5294d0b80",
-              name: "size_trousers_too_long",
-              placeholder: "",
+              translationKey: "size_trousers_too_long",
               type: ReturnQuestionType.OPTION,
             },
             {
               id: "29441d25-8d9f-471e-a13e-a03f61c88091",
-              name: "size_fit_cut_does_not_fit",
-              placeholder: "",
+              translationKey: "size_fit_cut_does_not_fit",
               type: ReturnQuestionType.OPTION,
             },
           ],
@@ -54,11 +46,17 @@ const returnQuestion: ReturnQuestionProjection = {
     },
   ],
 };
-const returnQuestionUnanswered: ReturnQuestionProjection = {
+const returnQuestionUnanswered: ReturnQuestionProjection<ReturnQuestionType.HOST_DEFAULT> = {
   id: "fd7ff4a0-78ed-4c0d-aa4d-64962739c322",
-  name: "style_title",
-  placeholder: "",
-  type: ReturnQuestionType.HOST_STACK,
+  translationKey: "style_title",
+  type: ReturnQuestionType.HOST_DEFAULT,
+  children: [
+    {
+      id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+      translationKey: "size_overall",
+      type: ReturnQuestionType.OPTION,
+    },
+  ],
 };
 
 describe("ReturnQuestionFeedbackItem component (ReturnQuestions organism)", () => {
@@ -70,7 +68,7 @@ describe("ReturnQuestionFeedbackItem component (ReturnQuestions organism)", () =
       />,
     );
 
-    expect(getByText(returnQuestion.name)).toBeTruthy();
+    expect(getByText(returnQuestion.translationKey)).toBeTruthy();
     expect(getByText("size_large / size_overall")).toBeTruthy();
   });
 
@@ -82,7 +80,7 @@ describe("ReturnQuestionFeedbackItem component (ReturnQuestions organism)", () =
       />,
     );
 
-    expect(getByText(returnQuestionUnanswered.name)).toBeTruthy();
+    expect(getByText(returnQuestionUnanswered.translationKey)).toBeTruthy();
     expect(getByText(I18nMessages.FEEDBACK_UNANSWERED)).toBeTruthy();
   });
 });

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

@@ -1,15 +1,17 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 
-const ReturnQuestionFeedbackItem: ReturnQuestionItem = ({ returnQuestion }: ReturnQuestionItemProps) => {
-  const titleText = useI18nMessage({ id: returnQuestion.name });
+const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEFAULT> = ({ returnQuestion }) => {
+  const titleText = useI18nMessage({ id: returnQuestion.translationKey });
   const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
 
   const returnQuestionFeedback = useReturnQuestionFeedback();

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.test.tsx

@@ -1,9 +1,7 @@
 import { fireEvent } from "@testing-library/react-native";
 import React from "react";
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { render } from "../../../../../test/render";
 import { TextareaReturnQuestionItem } from "./TextareaReturnQuestionItem";
 
@@ -15,31 +13,13 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
 const returnQuestionParent = {
   id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
 } as ReturnQuestionProjection;
-const returnQuestion: ReturnQuestionProjection = {
-  id: "9251dc2c-d76a-484d-9299-346929af932f",
-  name: "size_large",
-  placeholder: "",
-  type: ReturnQuestionType.OPTION,
-  children: [
-    {
-      id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
-      name: "size_overall",
-      placeholder: "",
-      type: ReturnQuestionType.OPTION,
-    },
-    {
-      id: "85e84a77-461c-41e6-8544-95b5294d0b80",
-      name: "size_trousers_too_long",
-      placeholder: "",
-      type: ReturnQuestionType.OPTION,
-    },
-    {
-      id: "29441d25-8d9f-471e-a13e-a03f61c88091",
-      name: "size_fit_cut_does_not_fit",
-      placeholder: "",
-      type: ReturnQuestionType.OPTION,
-    },
-  ],
+const returnQuestion: ReturnQuestionProjection<ReturnQuestionType.TEXTAREA> = {
+  id: "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
+  translationKey: "comment_textarea",
+  type: ReturnQuestionType.TEXTAREA,
+  metadata: {
+    placeholder: "comment_textarea_placeholder",
+  },
 };
 
 describe("TextareaReturnQuestionItem component (ReturnQuestions organism)", () => {

package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.tsx

@@ -1,21 +1,23 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
+import { ReturnQuestionType } from "../../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
-import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
+import { ReturnQuestionItem } from "../ReturnQuestionItem";
 import { style } from "./TextareaReturnQuestionItem.style";
 
-const TextareaReturnQuestionItem: ReturnQuestionItem = ({
+const TextareaReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.TEXTAREA> = ({
   returnQuestion,
   returnQuestionParent,
   testID,
-}: ReturnQuestionItemProps) => {
+}) => {
   const { formatMessage } = useIntl();
 
   const placeholderText = useMemo(
-    () => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""),
-    [formatMessage, returnQuestion.placeholder],
+    () => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""),
+    [formatMessage, returnQuestion.metadata.placeholder],
   );
 
   const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });

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

@@ -13,14 +13,15 @@ exports[`returnQuestionFeedback utils return the deepest returnQuestion with fee
     "children": [
       {
         "id": "1123a37d-bc00-43a4-9d28-cee1dfaf356c",
-        "name": "comment_textarea",
-        "placeholder": "comment_textarea_placeholder",
+        "metadata": {
+          "placeholder": "comment_textarea_placeholder",
+        },
+        "translationKey": "comment_textarea",
         "type": "TEXTAREA",
       },
     ],
     "id": "ce3e8d57-5eea-4dd3-bef4-2e811a143612",
-    "name": "comment_title",
-    "placeholder": "",
+    "translationKey": "comment_title",
     "type": "HOST_TEXTAREA",
   },
   false,

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

@@ -1,6 +1,10 @@
 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";
 
 interface RecursiveFeedbackForReturnQuestionFunctionArgs {
   readonly feedback: FeedbackProjection;
@@ -25,14 +29,16 @@ const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction = ({
     const returnQuestionFeedback = feedback[returnQuestionId];
 
     if (isUuid(returnQuestionFeedback as string)) {
-      const feebackReturnQuestionChild = returnQuestion.children?.find(
-        (childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback,
-      );
+      const feebackReturnQuestionChild =
+        returnQuestionHasChildren(returnQuestion) &&
+        returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
 
       if (feebackReturnQuestionChild) {
         return [
           ...acc,
-          translate(feebackReturnQuestionChild?.name),
+          ...(returnQuestionWithTranslationKey(feebackReturnQuestionChild)
+            ? [translate(feebackReturnQuestionChild.translationKey)]
+            : []),
           ...feedbackForReturnQuestion({ feedback, returnQuestion: feebackReturnQuestionChild, translate, acc }),
         ];
       }
@@ -44,13 +50,15 @@ const feedbackForReturnQuestion: RecursiveFeedbackForReturnQuestionFunction = ({
   }
 
   return (
-    returnQuestion.children?.reduce(
-      (acc, childReturnQuestion) => [
-        ...acc,
-        ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
-      ],
-      [] as string[],
-    ) || []
+    (returnQuestionHasChildren(returnQuestion) &&
+      returnQuestion.children?.reduce(
+        (acc, childReturnQuestion) => [
+          ...acc,
+          ...feedbackForReturnQuestion({ feedback, returnQuestion: childReturnQuestion, translate, acc }),
+        ],
+        [] as string[],
+      )) ||
+    []
   );
 };
 
@@ -77,9 +85,9 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     const returnQuestionFeedback = feedback[returnQuestionId];
 
     if (isUuid(returnQuestionFeedback as string)) {
-      const feebackReturnQuestionChild = returnQuestion.children?.find(
-        (childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback,
-      );
+      const feebackReturnQuestionChild =
+        returnQuestionHasChildren(returnQuestion) &&
+        returnQuestion.children?.find((childReturnQuestion) => childReturnQuestion.id === returnQuestionFeedback);
 
       if (feebackReturnQuestionChild) {
         return deepestReturnQuestionWithFeedbackForReturnQuestion({
@@ -95,9 +103,11 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     return [returnQuestion, false];
   }
 
-  const feebackReturnQuestionChild = returnQuestion.children?.find((childReturnQuestion) =>
-    Object.keys(feedback).find((id) => id === childReturnQuestion.id),
-  );
+  const feebackReturnQuestionChild =
+    returnQuestionHasChildren(returnQuestion) &&
+    returnQuestion.children?.find((childReturnQuestion) =>
+      Object.keys(feedback).find((id) => id === childReturnQuestion.id),
+    );
 
   if (feebackReturnQuestionChild) {
     return deepestReturnQuestionWithFeedbackForReturnQuestion({
@@ -107,7 +117,11 @@ const deepestReturnQuestionWithFeedbackForReturnQuestion: RecursiveDeepestReturn
     });
   }
 
-  return [deepestReturnQuestion, !returnQuestion.children || returnQuestion.children.length === 0];
+  const hasChildren = Boolean(
+    returnQuestionHasChildren(returnQuestion) && returnQuestion.children && returnQuestion.children.length > 0,
+  );
+
+  return [deepestReturnQuestion, !hasChildren];
 };
 
 export { feedbackForReturnQuestion, deepestReturnQuestionWithFeedbackForReturnQuestion };

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

@@ -2,10 +2,8 @@ import React, { FC } from "react";
 import { View } from "react-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionType,
-} from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
 import {
   ReturnQuestionItemProvider,

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

@@ -12,7 +12,7 @@ import { Segment } from "@lookiero/sty-psp-segment";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
-import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { useReturnCheckoutItem } from "../../../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
 import { TrackingPage } from "../../../../../tracking/tracking";

package/src/projection/returnQuestion/listReturnQuestionsByCheckoutItemId.test.ts

@@ -1,30 +1,22 @@
 import { mock } from "jest-mock-extended";
 import { QueryBus } from "@lookiero/messaging";
+import { returnQuestions } from "../../infrastructure/projection/returnQuestion/returnQuestions.mock";
 import {
   listReturnQuestionsByCheckoutItemId,
   listReturnQuestionsByCheckoutItemIdHandler as sut,
 } from "./listReturnQuestionsByCheckoutItemId";
-import { ReturnQuestionProjection, ReturnQuestionType } from "./returnQuestion";
 
 const checkoutItemId = "29790d24-b139-4ab8-b618-d796d101e974";
-const returnQuestionsProjection: ReturnQuestionProjection[] = [
-  {
-    id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
-    name: "main_title",
-    placeholder: "",
-    type: ReturnQuestionType.HOST_DEFAULT,
-  },
-];
 const queryBus = mock<QueryBus>();
 const signal = mock<AbortSignal>();
 
 describe("listReturnQuestionsByCheckoutItemId", () => {
   it("returns return questions by checkout item id", async () => {
     const query = listReturnQuestionsByCheckoutItemId({ checkoutItemId });
-    const view = jest.fn(() => Promise.resolve(returnQuestionsProjection));
+    const view = jest.fn(() => Promise.resolve(returnQuestions));
 
-    const returnQuestionsProjectionResult = await sut({ view, queryBus, signal })(query);
+    const returnQuestionsResult = await sut({ view, queryBus, signal })(query);
 
-    expect(returnQuestionsProjectionResult).toBe(returnQuestionsProjection);
+    expect(returnQuestionsResult).toBe(returnQuestions);
   });
 });

package/src/projection/returnQuestion/returnQuestion.constants.ts

@@ -0,0 +1,10 @@
+enum ReturnQuestionType {
+  HOST_DEFAULT = "HOST_DEFAULT",
+  HOST_TEXTAREA = "HOST_TEXTAREA",
+  HOST_SELECT = "HOST_SELECT",
+  HOST_STACK = "HOST_STACK",
+  TEXTAREA = "TEXTAREA",
+  OPTION = "OPTION",
+}
+
+export { ReturnQuestionType };

package/src/projection/returnQuestion/returnQuestion.metadata.ts

@@ -0,0 +1,17 @@
+import { EmptyObject } from "@lookiero/sty-psp-typescript";
+import { ReturnQuestionType } from "./returnQuestion.constants";
+
+interface ComponentPlaceholder {
+  readonly placeholder: string;
+}
+
+type MetadataDictionary = Record<ReturnQuestionType, EmptyObject>;
+
+type ComponentMetadata = MetadataDictionary & {
+  [ReturnQuestionType.HOST_SELECT]: ComponentPlaceholder;
+  [ReturnQuestionType.TEXTAREA]: ComponentPlaceholder;
+};
+
+type Metadata<RQT extends ReturnQuestionType> = ComponentMetadata[RQT];
+
+export type { Metadata };

package/src/projection/returnQuestion/returnQuestion.ts

@@ -1,20 +1,42 @@
-enum ReturnQuestionType {
-  HOST_DEFAULT = "HOST_DEFAULT",
-  HOST_TEXTAREA = "HOST_TEXTAREA",
-  HOST_SELECT = "HOST_SELECT",
-  HOST_STACK = "HOST_STACK",
-  TEXTAREA = "TEXTAREA",
-  OPTION = "OPTION",
-  // ICON = "ICON",
-}
-
-interface ReturnQuestionProjection {
-  readonly id: string;
-  readonly name: string;
-  readonly placeholder: string; // required for ReturnQuestionType.SELECT | ReturnQuestionType.TEXTAREA
-  readonly type: ReturnQuestionType;
-  readonly children?: ReturnQuestionProjection[];
-}
-
-export { ReturnQuestionType };
-export type { ReturnQuestionProjection };
+import { EmptyObject, ExcludePropertyIfOptional, NonEmptyArray } from "@lookiero/sty-psp-typescript";
+import { ReturnQuestionType } from "./returnQuestion.constants";
+import { Metadata } from "./returnQuestion.metadata";
+
+type ReturnQuestionTypesWithChildren =
+  | ReturnQuestionType.HOST_DEFAULT
+  | ReturnQuestionType.HOST_SELECT
+  | ReturnQuestionType.HOST_STACK
+  | ReturnQuestionType.HOST_TEXTAREA;
+
+type ReturnQuestionTypesWithOptionalChildren = ReturnQuestionType.OPTION;
+
+type ReturnQuestionTypesWithOptionalTranslationKeys = ReturnQuestionType.HOST_STACK;
+
+type ReturnQuestionMetadata<RQT extends ReturnQuestionType> = ExcludePropertyIfOptional<
+  "metadata",
+  { readonly metadata: Metadata<RQT> }
+>;
+
+type ReturnQuestionChildren<RQT extends ReturnQuestionType> = RQT extends ReturnQuestionTypesWithChildren
+  ? { readonly children: NonEmptyArray<ReturnQuestion> }
+  : RQT extends ReturnQuestionTypesWithOptionalChildren
+    ? { readonly children?: NonEmptyArray<ReturnQuestion> }
+    : EmptyObject;
+
+type ReturnQuestionTranslationKey<RQT extends ReturnQuestionType> =
+  RQT extends ReturnQuestionTypesWithOptionalTranslationKeys
+    ? { readonly translationKey?: string }
+    : { readonly translationKey: string };
+
+type ReturnQuestion<RQT extends ReturnQuestionType = ReturnQuestionType> = RQT extends infer K extends
+  ReturnQuestionType
+  ? { readonly id: string; readonly type: K } & ReturnQuestionTranslationKey<K> &
+      ReturnQuestionChildren<K> &
+      ReturnQuestionMetadata<K>
+  : never;
+
+export type {
+  ReturnQuestion as ReturnQuestionProjection,
+  ReturnQuestionTypesWithOptionalTranslationKeys,
+  ReturnQuestionTypesWithChildren,
+};

package/src/projection/returnQuestion/returnQuestion.typeguard.ts

@@ -0,0 +1,24 @@
+import {
+  ReturnQuestionProjection,
+  ReturnQuestionTypesWithChildren,
+  ReturnQuestionTypesWithOptionalTranslationKeys,
+} from "./returnQuestion";
+import { ReturnQuestionType } from "./returnQuestion.constants";
+
+const returnQuestionWithTranslationKey = (
+  question: ReturnQuestionProjection,
+): question is ReturnQuestionProjection<Exclude<ReturnQuestionType, ReturnQuestionTypesWithOptionalTranslationKeys>> =>
+  Boolean(question.translationKey);
+
+const returnQuestionHasChildren = (
+  question: ReturnQuestionProjection,
+): question is ReturnQuestionProjection<ReturnQuestionTypesWithChildren> =>
+  [
+    ReturnQuestionType.HOST_DEFAULT,
+    ReturnQuestionType.HOST_SELECT,
+    ReturnQuestionType.HOST_STACK,
+    ReturnQuestionType.HOST_TEXTAREA,
+    ReturnQuestionType.OPTION,
+  ].includes(question.type);
+
+export { returnQuestionWithTranslationKey, returnQuestionHasChildren };