@lookiero/checkout 8.17.1-beta.1 → 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/productVariantSlider/__snapshots__/ProductVariantSlider.test.tsx.snap

@@ -57,67 +57,67 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
           }
         }
       >
-        <RNGestureHandlerButton
+        <View
           collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          exclusive={true}
-          handlerTag={1}
-          handlerType="NativeViewGestureHandler"
-          onGestureEvent={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onHandlerStateChange={[Function]}
-          rippleColor={0}
-          touchSoundDisabled={false}
+          jestAnimatedStyle={
+            {
+              "value": {
+                "transform": [
+                  {
+                    "translateX": 0,
+                  },
+                ],
+              },
+            }
+          }
+          style={
+            {
+              "flex": 1,
+              "flexDirection": "row",
+              "height": "100%",
+              "transform": [
+                {
+                  "translateX": 0,
+                },
+              ],
+              "width": 600,
+            }
+          }
+          testID="carousel-track"
         >
           <View
-            accessible={true}
             collapsable={false}
-            style={{}}
-          >
-            <View
-              collapsable={false}
-              jestAnimatedStyle={
-                {
-                  "value": {
-                    "transform": [
-                      {
-                        "translateX": 0,
-                      },
-                    ],
-                  },
-                }
+            jestAnimatedStyle={
+              {
+                "value": {},
               }
-              style={
-                {
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "height": "100%",
-                  "transform": [
-                    {
-                      "translateX": 0,
-                    },
-                  ],
-                  "width": 600,
-                }
+            }
+            style={
+              {
+                "flex": 1,
+                "width": 300,
               }
-              testID="carousel-track"
+            }
+            testID="carousel-item"
+          >
+            <RNGestureHandlerButton
+              collapsable={false}
+              delayLongPress={600}
+              enabled={true}
+              exclusive={true}
+              handlerTag={2}
+              handlerType="NativeViewGestureHandler"
+              onGestureEvent={[Function]}
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onHandlerStateChange={[Function]}
+              rippleColor={0}
+              touchSoundDisabled={false}
             >
               <View
+                accessible={true}
                 collapsable={false}
-                jestAnimatedStyle={
-                  {
-                    "value": {},
-                  }
-                }
-                style={
-                  {
-                    "flex": 1,
-                    "width": 300,
-                  }
-                }
-                testID="carousel-item"
+                style={{}}
               >
                 <View
                   onLayout={[Function]}
@@ -263,20 +263,41 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                   </View>
                 </View>
               </View>
+            </RNGestureHandlerButton>
+          </View>
+          <View
+            collapsable={false}
+            jestAnimatedStyle={
+              {
+                "value": {},
+              }
+            }
+            style={
+              {
+                "flex": 1,
+                "width": 300,
+              }
+            }
+            testID="carousel-item"
+          >
+            <RNGestureHandlerButton
+              collapsable={false}
+              delayLongPress={600}
+              enabled={true}
+              exclusive={true}
+              handlerTag={3}
+              handlerType="NativeViewGestureHandler"
+              onGestureEvent={[Function]}
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onHandlerStateChange={[Function]}
+              rippleColor={0}
+              touchSoundDisabled={false}
+            >
               <View
+                accessible={true}
                 collapsable={false}
-                jestAnimatedStyle={
-                  {
-                    "value": {},
-                  }
-                }
-                style={
-                  {
-                    "flex": 1,
-                    "width": 300,
-                  }
-                }
-                testID="carousel-item"
+                style={{}}
               >
                 <View
                   onLayout={[Function]}
@@ -422,9 +443,9 @@ exports[`ProductVariantSlider matches the snapshot 1`] = `
                   </View>
                 </View>
               </View>
-            </View>
+            </RNGestureHandlerButton>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </View>
     </View>
     <View

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,