@lookiero/checkout 12.4.0 → 12.5.0

package/src/infrastructure/projection/returnQuestion/returnQuestions.mock.ts

@@ -8,76 +8,65 @@ const returnQuestions: ReturnQuestionProjection[] = [
     type: ReturnQuestionType.HOST_DEFAULT,
     children: [
       {
-        id: "ed396b68-1436-48ab-842f-fbfea996fad4",
-        translationKey: "size",
-        type: ReturnQuestionType.HOST_SELECT,
-        metadata: {
-          placeholder: "size_placeholder",
-        },
+        id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
+        type: ReturnQuestionType.HOST_RADIO_GROUP,
         children: [
           {
-            id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
-            translationKey: "size_title",
-            type: ReturnQuestionType.HOST_STACK,
+            id: "9251dc2c-d76a-484d-9299-346929af932f",
+            translationKey: "size_large",
+            type: ReturnQuestionType.OPTION,
             children: [
               {
-                id: "9251dc2c-d76a-484d-9299-346929af932f",
-                translationKey: "size_large",
-                type: ReturnQuestionType.OPTION,
+                id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
+                type: ReturnQuestionType.HOST_STACK,
                 children: [
                   {
-                    id: "542c4d24-e1da-484f-8c3a-7d89ee135adc",
-                    type: ReturnQuestionType.HOST_STACK,
-                    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,
-                      },
-                    ],
+                    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,
                   },
                 ],
               },
+            ],
+          },
+          {
+            id: "a081c3e9-1904-4a60-8899-b72c1a3a0291",
+            translationKey: "size_correct",
+            type: ReturnQuestionType.OPTION,
+          },
+          {
+            id: "624cce3d-bd86-463a-b16b-c862ad73d5f3",
+            translationKey: "size_small",
+            type: ReturnQuestionType.OPTION,
+            children: [
               {
-                id: "a081c3e9-1904-4a60-8899-b72c1a3a0291",
-                translationKey: "size_correct",
-                type: ReturnQuestionType.OPTION,
-              },
-              {
-                id: "624cce3d-bd86-463a-b16b-c862ad73d5f3",
-                translationKey: "size_small",
-                type: ReturnQuestionType.OPTION,
+                id: "58e5ae9a-bc0d-4d27-b267-854a51c2a79a",
+                type: ReturnQuestionType.HOST_STACK,
                 children: [
                   {
-                    id: "58e5ae9a-bc0d-4d27-b267-854a51c2a79a",
-                    type: ReturnQuestionType.HOST_STACK,
-                    children: [
-                      {
-                        id: "6a3d11fc-570c-4085-a850-1967228cdd4c",
-                        translationKey: "size_overall",
-                        type: ReturnQuestionType.OPTION,
-                      },
-                      {
-                        id: "c27e1936-deea-4dbe-a8f1-fe4fb8564deb",
-                        translationKey: "size_trousers_too_short",
-                        type: ReturnQuestionType.OPTION,
-                      },
-                      {
-                        id: "e77232ae-eeec-4722-b2d3-f5c0d34fd0ca",
-                        translationKey: "size_fit_cut_does_not_fit",
-                        type: ReturnQuestionType.OPTION,
-                      },
-                    ],
+                    id: "6a3d11fc-570c-4085-a850-1967228cdd4c",
+                    translationKey: "size_overall",
+                    type: ReturnQuestionType.OPTION,
+                  },
+                  {
+                    id: "c27e1936-deea-4dbe-a8f1-fe4fb8564deb",
+                    translationKey: "size_trousers_too_short",
+                    type: ReturnQuestionType.OPTION,
+                  },
+                  {
+                    id: "e77232ae-eeec-4722-b2d3-f5c0d34fd0ca",
+                    translationKey: "size_fit_cut_does_not_fit",
+                    type: ReturnQuestionType.OPTION,
                   },
                 ],
               },

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/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/returnQuestion/returnQuestion.constants.ts

@@ -3,6 +3,7 @@ enum ReturnQuestionType {
   HOST_TEXTAREA = "HOST_TEXTAREA",
   HOST_SELECT = "HOST_SELECT",
   HOST_STACK = "HOST_STACK",
+  HOST_RADIO_GROUP = "HOST_RADIO_GROUP",
   TEXTAREA = "TEXTAREA",
   OPTION = "OPTION",
 }

package/src/projection/returnQuestion/returnQuestion.ts

@@ -6,11 +6,15 @@ type ReturnQuestionTypesWithChildren =
   | ReturnQuestionType.HOST_DEFAULT
   | ReturnQuestionType.HOST_SELECT
   | ReturnQuestionType.HOST_STACK
-  | ReturnQuestionType.HOST_TEXTAREA;
+  | ReturnQuestionType.HOST_TEXTAREA
+  | ReturnQuestionType.HOST_RADIO_GROUP;
 
 type ReturnQuestionTypesWithOptionalChildren = ReturnQuestionType.OPTION;
 
-type ReturnQuestionTypesWithOptionalTranslationKeys = ReturnQuestionType.HOST_STACK;
+type ReturnQuestionTypesWithOptionalTranslationKeys =
+  | ReturnQuestionType.HOST_DEFAULT
+  | ReturnQuestionType.HOST_STACK
+  | ReturnQuestionType.HOST_RADIO_GROUP;
 
 type ReturnQuestionMetadata<RQT extends ReturnQuestionType> = ExcludePropertyIfOptional<
   "metadata",

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

@@ -1,15 +1,6 @@
-import {
-  ReturnQuestionProjection,
-  ReturnQuestionTypesWithChildren,
-  ReturnQuestionTypesWithOptionalTranslationKeys,
-} from "./returnQuestion";
+import { ReturnQuestionProjection, ReturnQuestionTypesWithChildren } 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> =>
@@ -18,7 +9,8 @@ const returnQuestionHasChildren = (
     ReturnQuestionType.HOST_SELECT,
     ReturnQuestionType.HOST_STACK,
     ReturnQuestionType.HOST_TEXTAREA,
+    ReturnQuestionType.HOST_RADIO_GROUP,
     ReturnQuestionType.OPTION,
   ].includes(question.type);
 
-export { returnQuestionWithTranslationKey, returnQuestionHasChildren };
+export { returnQuestionHasChildren };