@lookiero/checkout 5.3.0-beta.2 → 6.0.0-beta.0

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultReturnQuestionItem.test.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Text } from "react-native";
+import {
+  CheckoutQuestionProjection,
+  CheckoutQuestionType,
+} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { render } from "../../../../../test/render";
+import { HostDefaultCheckoutQuestionItem } from "./HostDefaultCheckoutQuestionItem";
+
+const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
+const checkoutQuestion: CheckoutQuestionProjection = {
+  id: "9251dc2c-d76a-484d-9299-346929af932f",
+  name: "checkout.checkout_question.selection.question",
+  placeholder: "",
+  type: CheckoutQuestionType.HOST_DEFAULT,
+  showCondition: [],
+};
+
+describe("HostDefaultCheckoutQuestionItem component (CheckoutQuestions organism)", () => {
+  it("renders correctly", () => {
+    const { getByText } = render(
+      <HostDefaultCheckoutQuestionItem
+        checkoutQuestion={checkoutQuestion}
+        checkoutQuestionParentId={checkoutQuestionParentId}
+      >
+        <Text>HostDefaultCheckoutQuestionItem children</Text>
+      </HostDefaultCheckoutQuestionItem>,
+    );
+
+    expect(getByText(checkoutQuestion.name)).toBeTruthy();
+    expect(getByText("HostDefaultCheckoutQuestionItem children")).toBeTruthy();
+  });
+});

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.style.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { colorBgPrimaryLight, space6, space8 } = theme();
+const containerUnderlayColor = colorBgPrimaryLight;
+
+const style = StyleSheet.create({
+  content: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginBottom: space8,
+  },
+  title: {
+    marginBottom: space6,
+  },
+});
+
+export { style, containerUnderlayColor };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.test.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Text } from "react-native";
+import {
+  CheckoutQuestionProjection,
+  CheckoutQuestionType,
+} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { render } from "../../../../../test/render";
+import { HostSelectCheckoutQuestionItem } from "./HostSelectCheckoutQuestionItem";
+
+const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
+const checkoutQuestion: CheckoutQuestionProjection = {
+  id: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
+  name: "checkout.checkout_question.selection.question",
+  placeholder: "",
+  type: CheckoutQuestionType.HOST_SELECT,
+  showCondition: [],
+  children: [
+    {
+      id: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+      name: "checkout.checkout_question.icon.bad",
+      placeholder: "",
+      type: CheckoutQuestionType.ICON,
+      showCondition: [],
+    },
+    {
+      id: "85e84a77-461c-41e6-8544-95b5294d0b80",
+      name: "checkout.checkout_question.icon.regular",
+      placeholder: "",
+      type: CheckoutQuestionType.ICON,
+      showCondition: [],
+    },
+    {
+      id: "29441d25-8d9f-471e-a13e-a03f61c88091",
+      name: "checkout.checkout_question.icon.good",
+      placeholder: "",
+      type: CheckoutQuestionType.ICON,
+      showCondition: [],
+    },
+  ],
+};
+
+const renderHostSelectCheckoutQuestionItem = () =>
+  render(
+    <HostSelectCheckoutQuestionItem
+      checkoutQuestion={checkoutQuestion}
+      checkoutQuestionParentId={checkoutQuestionParentId}
+    >
+      <Text>HostSelectCheckoutQuestionItem children</Text>
+    </HostSelectCheckoutQuestionItem>,
+  );
+
+describe("HostSelectCheckoutQuestionItem component (CheckoutQuestions organism)", () => {
+  it("renders correctly", async () => {
+    const { getByText } = renderHostSelectCheckoutQuestionItem();
+
+    expect(getByText(checkoutQuestion.name)).toBeTruthy();
+    expect(getByText("HostSelectCheckoutQuestionItem children")).toBeTruthy();
+  });
+});

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+import { style } from "./HostSelectCheckoutQuestionItem.style";
+
+const HostSelectCheckoutQuestionItem: CheckoutQuestionItem = ({
+  checkoutQuestion,
+  children,
+}: CheckoutQuestionItemProps) => {
+  const titleText = useI18nMessage({ id: checkoutQuestion.name });
+
+  return (
+    <>
+      <Text level={3} style={style.title}>
+        {titleText}
+      </Text>
+      <View style={style.content}>{children}</View>
+    </>
+  );
+};
+
+export { HostSelectCheckoutQuestionItem };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.style.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+
+const style = StyleSheet.create({
+  icon: {
+    marginHorizontal: 12,
+  },
+});
+
+export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import {
+  CheckoutQuestionProjection,
+  CheckoutQuestionType,
+} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { render } from "../../../../../test/render";
+import { IconCheckoutQuestionItem, IconName } from "./IconCheckoutQuestionItem";
+
+const mockOnChange = jest.fn();
+jest.mock("../../behaviors/useCheckoutQuestionFeedback", () => ({
+  useCheckoutQuestionFeedbackForId: () => ({ feedback: "", onChange: mockOnChange }),
+}));
+
+const checkoutQuestionParentId = "0ad1dba8-b02c-4121-a1e3-981f1c30800d";
+const checkoutQuestion: CheckoutQuestionProjection = {
+  id: "9251dc2c-d76a-484d-9299-346929af932f",
+  name: "icon",
+  placeholder: "",
+  type: CheckoutQuestionType.ICON,
+  showCondition: [],
+};
+
+type Scenario = [IconName];
+const scenarios: Scenario[] = [
+  ["checkout_question.icon.bad"],
+  ["checkout_question.icon.good"],
+  ["checkout_question.icon.regular"],
+];
+
+describe("IconCheckoutQuestionItem component (CheckoutQuestions organism)", () => {
+  test.each(scenarios)("renders correctly %s icon", (iconName) => {
+    const { getByTestId } = render(
+      <IconCheckoutQuestionItem
+        checkoutQuestion={{ ...checkoutQuestion, name: iconName }}
+        checkoutQuestionParentId={checkoutQuestionParentId}
+        testID={iconName}
+      />,
+    );
+
+    expect(getByTestId(iconName)).toBeTruthy();
+
+    fireEvent.press(getByTestId(iconName));
+
+    expect(mockOnChange).toHaveBeenCalledWith({
+      checkoutQuestionId: checkoutQuestionParentId,
+      checkoutQuestionFeedback: checkoutQuestion.id,
+    });
+  });
+});

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.tsx

@@ -0,0 +1,55 @@
+import React, { FC, useCallback } from "react";
+import { Pressable } from "react-native";
+import { SvgProps } from "react-native-svg";
+import invariant from "tiny-invariant";
+import { theme } from "@lookiero/sty-psp-ui";
+import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
+import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+import { style } from "./IconCheckoutQuestionItem.style";
+import { Happy } from "./icons/Happy";
+import { Normal } from "./icons/Normal";
+import { Sad } from "./icons/Sad";
+
+const { colorBgPrimaryMediumLight } = theme();
+
+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 IconCheckoutQuestionItem: CheckoutQuestionItem = ({
+  checkoutQuestion,
+  checkoutQuestionParentId,
+  testID,
+}: CheckoutQuestionItemProps) => {
+  const Icon = ICON[checkoutQuestion.name as IconName];
+
+  const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
+  const isSelected = feedback === checkoutQuestion.id;
+
+  const handleOnPress = useCallback(
+    () => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }),
+    [onChange, checkoutQuestion.id, checkoutQuestionParentId],
+  );
+
+  invariant(Icon, "CheckoutQuestion icon does not exist");
+
+  return (
+    <Pressable accessibilityLabel={testID} testID={testID} onPress={handleOnPress}>
+      <Icon
+        fill={isSelected ? colorBgPrimaryMediumLight : "none"}
+        strokeWidth={isSelected ? 2 : 1}
+        style={style.icon}
+      />
+    </Pressable>
+  );
+};
+
+export type { IconName };
+export { IconCheckoutQuestionItem };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/Happy.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+import Svg, { Circle, Path, SvgProps } from "react-native-svg";
+
+const Happy: FC<SvgProps> = ({ strokeWidth = 1, ...props }) => (
+  <Svg fill="none" height={48} width={48} {...props}>
+    <Circle cx={24} cy={24} r={23} stroke="#000" strokeWidth={strokeWidth} />
+    <Circle cx={16} cy={17} fill="#000" r={2} />
+    <Circle cx={32} cy={17} fill="#000" r={2} />
+    <Path d="M14 28.5s3 6 10 6 10-6 10-6" stroke="#000" strokeWidth={strokeWidth} />
+  </Svg>
+);
+
+export { Happy };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/Normal.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+import Svg, { Circle, Path, SvgProps } from "react-native-svg";
+
+const Normal: FC<SvgProps> = ({ strokeWidth = 1, ...props }) => (
+  <Svg fill="none" height={48} width={48} {...props}>
+    <Circle cx={24} cy={24} r={23} stroke="#000" strokeWidth={strokeWidth} />
+    <Circle cx={16} cy={17} fill="#000" r={2} />
+    <Circle cx={32} cy={17} fill="#000" r={2} />
+    <Path d="M15 31h19v1H15z" fill="#000" strokeWidth={strokeWidth} />
+  </Svg>
+);
+
+export { Normal };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/Sad.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+import Svg, { Circle, Path, SvgProps } from "react-native-svg";
+
+const Sad: FC<SvgProps> = ({ strokeWidth = 1, ...props }) => (
+  <Svg fill="none" height={48} width={48} {...props}>
+    <Circle cx={24} cy={24} r={23} stroke="#000" strokeWidth={strokeWidth} />
+    <Circle cx={16} cy={17} fill="#000" r={2} />
+    <Circle cx={32} cy={17} fill="#000" r={2} />
+    <Path d="M14 33.5s3-6 10-6 10 6 10 6" stroke="#000" strokeWidth={strokeWidth} />
+  </Svg>
+);
+
+export { Sad };

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

@@ -0,0 +1,50 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import {
+  CheckoutQuestionProjection,
+  CheckoutQuestionType,
+} from "../../../../../../../projection/checkoutQuestion/checkoutQuestion";
+import { render } from "../../../../../test/render";
+import { TextareaCheckoutQuestionItem } from "./TextareaCheckoutQuestionItem";
+
+const mockOnChange = jest.fn();
+jest.mock("../../behaviors/useCheckoutQuestionFeedback", () => ({
+  useCheckoutQuestionFeedbackForId: () => ({ feedback: "", onChange: mockOnChange }),
+}));
+
+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: [],
+    },
+  ],
+};
+
+describe("TextareaCheckoutQuestionItem component (CheckoutQuestions organism)", () => {
+  it("renders correctly", () => {
+    const { getByTestId } = render(
+      <TextareaCheckoutQuestionItem
+        checkoutQuestion={checkoutQuestion}
+        checkoutQuestionParentId={checkoutQuestionParentId}
+      />,
+    );
+
+    const newValue = "New input value";
+    fireEvent.changeText(getByTestId("input-input"), newValue);
+
+    expect(mockOnChange).toHaveBeenCalledWith({
+      checkoutQuestionId: checkoutQuestionParentId,
+      checkoutQuestionFeedback: newValue,
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import React, { useCallback, useMemo } from "react";
+import { useIntl } from "@lookiero/i18n-react";
+import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
+import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
+
+const TextareaCheckoutQuestionItem: CheckoutQuestionItem = ({
+  checkoutQuestion,
+  checkoutQuestionParentId,
+  testID,
+}: CheckoutQuestionItemProps) => {
+  const { formatMessage } = useIntl();
+  const placeholderText = useMemo(
+    () => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""),
+    [formatMessage, checkoutQuestion.placeholder],
+  );
+
+  const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
+  const handleOnChange = useCallback(
+    (value: string) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }),
+    [onChange, checkoutQuestionParentId],
+  );
+
+  return (
+    <InputField
+      label={placeholderText}
+      placeholder={placeholderText}
+      testID={testID}
+      value={feedback}
+      multiline
+      onChange={handleOnChange}
+    />
+  );
+};
+
+export { TextareaCheckoutQuestionItem };

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.test.tsx

@@ -0,0 +1,82 @@
+import { render } from "@testing-library/react-native";
+import React, { ReactNode } from "react";
+import { Text } from "react-native";
+import { ReturnQuestionProjection, ReturnQuestionType } from "../../../../../projection/returnQuestion/returnQuestion";
+import ReturnQuestion from "./ReturnQuestion";
+import { ReturnQuestionItemProvider, ReturnQuestionItems } from "./behaviors/useReturnQuestionItem";
+import { ReturnQuestionItem, ReturnQuestionItemProps } from "./components/ReturnQuestionItem";
+
+const mockOnChange = jest.fn();
+jest.mock("./behaviors/useReturnQuestionFeedback", () => ({
+  useReturnQuestionFeedbackForReturnQuestion: () => ({ onChange: mockOnChange }),
+}));
+
+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 Item: ReturnQuestionItem = ({ returnQuestion, children }: ReturnQuestionItemProps) => (
+  <>
+    <Text>{returnQuestion.name}</Text>
+    {children}
+  </>
+);
+
+const returnQuestionItems: ReturnQuestionItems = {
+  [ReturnQuestionType.HOST_DEFAULT]: Item,
+  [ReturnQuestionType.HOST_TEXTAREA]: Item,
+  [ReturnQuestionType.HOST_SELECT]: Item,
+  [ReturnQuestionType.HOST_STACK]: Item,
+  [ReturnQuestionType.OPTION]: Item,
+  [ReturnQuestionType.TEXTAREA]: Item,
+};
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>{children}</ReturnQuestionItemProvider>
+);
+
+describe("ReturnQuestion component (ReturnQuestions organism)", () => {
+  it("renders recursively the ReturnQuestionItems for the returnQuestion", async () => {
+    const { findByText } = render(
+      <ReturnQuestion returnQuestion={returnQuestion} returnQuestionParent={{} as ReturnQuestionProjection} />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    const large = await findByText("size_large");
+    expect(large).toBeDefined();
+
+    const overall = await findByText("size_overall");
+    expect(overall).toBeDefined();
+
+    const tooLong = await findByText("size_trousers_too_long");
+    expect(tooLong).toBeDefined();
+
+    const fit = await findByText("size_fit_cut_does_not_fit");
+    expect(fit).toBeDefined();
+  });
+});

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.tsx

@@ -0,0 +1,35 @@
+import React, { FC, memo } from "react";
+import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
+import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
+
+interface ReturnQuestionProps {
+  readonly returnQuestionParent: ReturnQuestionProjection;
+  readonly returnQuestion: ReturnQuestionProjection;
+  readonly portalHostName?: string;
+}
+
+const ReturnQuestion: FC<ReturnQuestionProps> = ({ returnQuestionParent, returnQuestion, portalHostName }) => {
+  const Item = useReturnQuestionItem({ type: returnQuestion.type });
+
+  return (
+    <Item
+      portalHostName={portalHostName}
+      returnQuestion={returnQuestion}
+      returnQuestionParent={returnQuestionParent}
+      testID={returnQuestion.id}
+    >
+      <>
+        {returnQuestion.children?.map((childReturnQuestion) => (
+          <ReturnQuestion
+            key={childReturnQuestion.id}
+            portalHostName={portalHostName}
+            returnQuestion={childReturnQuestion}
+            returnQuestionParent={returnQuestion}
+          />
+        ))}
+      </>
+    </Item>
+  );
+};
+
+export default memo(ReturnQuestion);

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.test.tsx

@@ -0,0 +1,63 @@
+import { render } from "@testing-library/react-native";
+import React, { ReactNode } from "react";
+import { Text } from "react-native";
+import { ReturnQuestionProjection, ReturnQuestionType } from "../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "./ReturnQuestions";
+import { ReturnQuestionFeedbackProvider } from "./behaviors/useReturnQuestionFeedback";
+import { ReturnQuestionItemProvider, ReturnQuestionItems } from "./behaviors/useReturnQuestionItem";
+import { ReturnQuestionItem, ReturnQuestionItemProps } from "./components/ReturnQuestionItem";
+
+const returnQuestions: ReturnQuestionProjection[] = [
+  {
+    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 Item: ReturnQuestionItem = ({ returnQuestion }: ReturnQuestionItemProps) => <Text>{returnQuestion.name}</Text>;
+
+const returnQuestionItems: ReturnQuestionItems = {
+  [ReturnQuestionType.HOST_DEFAULT]: Item,
+  [ReturnQuestionType.HOST_TEXTAREA]: Item,
+  [ReturnQuestionType.HOST_SELECT]: Item,
+  [ReturnQuestionType.HOST_STACK]: Item,
+  [ReturnQuestionType.OPTION]: Item,
+  [ReturnQuestionType.TEXTAREA]: Item,
+};
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <ReturnQuestionFeedbackProvider feedback={{}}>
+    <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>{children}</ReturnQuestionItemProvider>
+  </ReturnQuestionFeedbackProvider>
+);
+
+describe("ReturnQuestions organism)", () => {
+  it("renders ReturnQuestion components for the provided returnQuestions", async () => {
+    const { findByText } = render(<ReturnQuestions returnQuestions={returnQuestions} />, {
+      wrapper: Wrapper,
+    });
+
+    const overall = await findByText("size_overall");
+    expect(overall).toBeDefined();
+
+    const tooLong = await findByText("size_trousers_too_long");
+    expect(tooLong).toBeDefined();
+
+    const fit = await findByText("size_fit_cut_does_not_fit");
+    expect(fit).toBeDefined();
+  });
+});

package/src/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestions.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from "react";
+import { ReturnQuestionProjection } from "../../../../../projection/returnQuestion/returnQuestion";
+import ReturnQuestion from "./ReturnQuestion";
+
+interface ReturnQuestionsProps {
+  readonly returnQuestions: ReturnQuestionProjection[];
+  readonly portalHostName?: string;
+}
+
+const ReturnQuestions: FC<ReturnQuestionsProps> = ({ returnQuestions, portalHostName }) => (
+  <>
+    {returnQuestions.map((returnQuestion: ReturnQuestionProjection) => (
+      <ReturnQuestion
+        key={returnQuestion.id}
+        portalHostName={portalHostName}
+        returnQuestion={returnQuestion}
+        returnQuestionParent={{} as ReturnQuestionProjection}
+      />
+    ))}
+  </>
+);
+
+export { ReturnQuestions };

package/src/infrastructure/ui/components/organisms/returnQuestions/behaviors/isChildReturnQuestion.ts

@@ -0,0 +1,32 @@
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+
+interface IsChildReturnQuestionFunctionArgs {
+  readonly returnQuestionId: string;
+  readonly returnQuestion: ReturnQuestionProjection;
+}
+interface IsChildReturnQuestionFunction {
+  (args: IsChildReturnQuestionFunctionArgs): boolean;
+}
+
+const isChildReturnQuestion: IsChildReturnQuestionFunction = ({ returnQuestionId, returnQuestion }) => {
+  if (returnQuestionId === returnQuestion.id) {
+    return true;
+  }
+
+  const children = returnQuestion.children || [];
+
+  for (let index = 0; index < children.length; index++) {
+    const isChild = isChildReturnQuestion({
+      returnQuestionId,
+      returnQuestion: children[index] as ReturnQuestionProjection,
+    });
+
+    if (isChild) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export { isChildReturnQuestion };