@lookiero/checkout 5.3.0 → 6.0.0-beta.0

package/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.tsx

@@ -0,0 +1,125 @@
+import React, { FC, useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-native";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { PaymentFlow, PaymentFlowRef } from "@lookiero/payments-front";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { Currency } from "../../../../../../domain/checkoutItem/model/currency";
+import { Subscription } from "../../../../../../projection/shared/subscription";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../../../tracking/tracking";
+import { useTrackCheckout } from "../../../../../tracking/useTrackCheckout";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
+import { Routes } from "../../../../routing/routes";
+import { useBasePath } from "../../../../routing/useBasePath";
+
+interface CheckoutPaymentModalProps {
+  readonly coupon: string | null;
+  readonly orderNumber: number;
+  readonly isFirstOrder: boolean;
+  readonly subscription: Subscription;
+  readonly getAuthToken: () => Promise<string>;
+  readonly onCheckoutSubmitted?: () => void;
+}
+
+const CheckoutPaymentModal: FC<CheckoutPaymentModalProps> = ({
+  coupon,
+  isFirstOrder,
+  subscription,
+  orderNumber,
+  getAuthToken,
+  onCheckoutSubmitted,
+}) => {
+  const paymentFlowRef = useRef<PaymentFlowRef>(null);
+  const logger = useLogger();
+  const {
+    customer: { customerId, country, segment },
+  } = useStaticInfo();
+
+  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+    checkoutId: checkout?.id as string,
+  });
+  const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id as string });
+  const [pricing] = useViewPricingByCheckoutId({
+    checkoutId: checkout?.id as string,
+    queryOptions: { refetchOnMount: true },
+  });
+
+  const [authToken, setAuthToken] = useState<string>();
+  useEffect(() => {
+    const loadAuthToken = async () => setAuthToken(await getAuthToken());
+    loadAuthToken();
+  }, [getAuthToken]);
+
+  const basePath = useBasePath();
+  const navigate = useNavigate();
+  const trackCheckout = useTrackCheckout({
+    page: TrackingPage.CHECKOUT,
+    checkoutId: checkout?.id as string,
+    country,
+    segment,
+  });
+
+  const handleOnSubmitCheckoutError = useCallback(
+    () => navigate(`${basePath}/${Routes.CHECKOUT}`, { replace: true }),
+    [basePath, navigate],
+  );
+  const handleOnSubmitCheckoutSuccess = useCallback(() => {
+    const checkoutItemsKept = checkout?.items.filter(
+      (checkoutItem) =>
+        checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED,
+    );
+    const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
+
+    trackCheckout({
+      totalCheckoutItemsKept: checkoutItemsKept?.length || 0,
+      pendingToPay: (pricing?.pendingToPay.amount as number) / 100,
+      coupon,
+      currencyCode: pricing?.pendingToPay.currency as Currency,
+      isFirstOrder,
+      orderNumber,
+      totalReplacedFor,
+      subscription,
+      userId: customerId,
+    });
+    onCheckoutSubmitted?.();
+  }, [
+    checkout?.items,
+    coupon,
+    customerId,
+    isFirstOrder,
+    onCheckoutSubmitted,
+    orderNumber,
+    pricing?.pendingToPay.amount,
+    pricing?.pendingToPay.currency,
+    subscription,
+    trackCheckout,
+  ]);
+  const [submitCheckout] = useSubmitCheckout({
+    checkoutId: checkout?.id as string,
+    checkoutBookingId: checkout?.checkoutBookingId as string,
+    paymentFlowRef,
+    onError: handleOnSubmitCheckoutError,
+    onSuccess: handleOnSubmitCheckoutSuccess,
+    logger,
+  });
+  useEffect(() => {
+    if (paymentFlowPayload && sizeChangeEnabled !== undefined && pricing !== undefined) {
+      submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
+    }
+  }, [paymentFlowPayload, pricing, sizeChangeEnabled, submitCheckout]);
+
+  const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+  const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
+
+  if (!dependenciesLoaded) return null;
+
+  return <PaymentFlow ref={paymentFlowRef} token={authToken} />;
+};
+
+export { CheckoutPaymentModal };

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.test.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "../../../../test/render";
+import { DeliveryBanner } from "./DeliveryBanner";
+
+describe("DeliveryBanner component", () => {
+  test("matches the snapshot", () => {
+    const { toJSON } = render(<DeliveryBanner />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  test("renders correctly", () => {
+    const { getByTestId } = render(<DeliveryBanner />);
+
+    expect(getByTestId("delivery-banner")).toBeTruthy();
+  });
+});

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { I18nMessages } from "../../../../i18n/i18n";
+
+const DeliveryBanner = () => {
+  const { screen } = useDevice();
+
+  return (
+    <InfoBox
+      contentAlign={screen.L ? ALIGN.CENTER : undefined}
+      testID="delivery-banner"
+      text={useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER })}
+      type={INFOBOX_TYPE.SQUARED}
+    />
+  );
+};
+
+export { DeliveryBanner };

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/__snapshots__/DeliveryBanner.test.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeliveryBanner component matches the snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "#FFFFFF",
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "left": 0,
+          "marginHorizontal": "auto",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "width": "100%",
+          "zIndex": 5,
+        },
+      ]
+    }
+  >
+    <RCTSafeAreaView />
+  </View>
+  <View
+    style={[]}
+    testID="delivery-banner"
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "#F1E4DB",
+            "borderRadius": 0,
+            "padding": 12,
+            "width": "100%",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "flexDirection": "row",
+              "justifyContent": "flex-start",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "flexShrink": 1,
+              },
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#0C0A0A",
+                  "fontFamily": "AreaNormal-Semibold",
+                  "fontSize": 12,
+                  "letterSpacing": 0.1,
+                  "lineHeight": 16,
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 5,
+                },
+              ]
+            }
+          >
+            checkout.delivery_banner
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx

@@ -0,0 +1,27 @@
+import React, { FC, useRef } from "react";
+import { PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
+
+interface PaymentInstrumentProps {
+  readonly useRedirect: () => Record<string, string>;
+}
+const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
+  const paymentInstrumentSelectRef = useRef(null);
+  const { returnUrl } = useRedirect();
+  const logger = useLogger();
+
+  usePaymentInstrumentEvents({ logger });
+
+  return (
+    <PaymentInstrumentSelect
+      ref={paymentInstrumentSelectRef}
+      beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
+      hasError={false}
+      hidePaymentMethods={[PaymentMethod.GOOGLE_PAY]}
+      section={Section.BOX_CHECKOUT}
+    />
+  );
+};
+
+export { PaymentInstrument };

package/src/infrastructure/ui/views/feedback/Feedback.style.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+
+const { space8, space10 } = theme();
+
+const style = StyleSheet.create({
+  bodyColumn: {
+    paddingBottom: space8,
+    paddingHorizontal: space8,
+  },
+  container: {
+    paddingBottom: space10,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+  },
+});
+
+export { style };

package/src/infrastructure/ui/views/feedback/Feedback.test.tsx

@@ -0,0 +1,122 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { Country } from "../../../../projection/shared/country";
+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 { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
+import { I18nMessages } from "../../i18n/i18n";
+import { render } from "../../test/render";
+import { Feedback } from "./Feedback";
+
+const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const country = Country.ES;
+const segment = Segment.WOMEN;
+const checkoutMock = checkout({
+  items: [
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.RETURNED },
+    { status: CheckoutItemStatus.REPLACED },
+  ],
+});
+const mockGiveCheckoutFeedback = jest.fn();
+
+jest.mock("../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ customer: { customerId, country, segment } }),
+}));
+
+jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
+jest.mock("../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId");
+jest.mock("../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback");
+
+const mockTrackPressContinue = jest.fn();
+jest.mock("../../../tracking/useTrackPressContinue", () => ({
+  useTrackPressContinue: () => mockTrackPressContinue,
+}));
+
+const mockTrackChangeFeedback = jest.fn();
+jest.mock("../../../tracking/useTrackChangeFeedback", () => ({
+  useTrackChangeFeedback: () => mockTrackChangeFeedback,
+}));
+
+jest.mock("react-router-native", () => ({
+  ...jest.requireActual("react-router-native"),
+  useLocation: () => jest.fn(),
+}));
+
+beforeEach(() => mockGiveCheckoutFeedback.mockClear());
+
+beforeAll(() => {
+  jest.useFakeTimers();
+});
+
+afterAll(() => {
+  jest.runOnlyPendingTimers();
+  jest.useRealTimers();
+});
+
+describe("Feedback view", () => {
+  test("renders correctly", async () => {
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
+    (useListCheckoutQuestionsByCheckoutId as jest.Mock).mockReturnValue([checkoutQuestionsMock, QueryStatus.SUCCESS]);
+    (useGiveCheckoutFeedback as jest.Mock).mockReturnValue([mockGiveCheckoutFeedback, CommandStatus.SUCCESS]);
+
+    const { findByText, getByTestId, getByText } = render(<Feedback layout={DummyLayout} />);
+
+    expect(await findByText("checkout_question.selection.question")).toBeTruthy();
+    expect(getByText("checkout_question.experience.question")).toBeTruthy();
+
+    fireEvent.press(getByTestId("29441d25-8d9f-471e-a13e-a03f61c88091"));
+    expect(mockTrackChangeFeedback).toHaveBeenLastCalledWith({
+      questionId: "efe07b97-f6fb-4b6a-ba92-b68519320b2c",
+      questionName: "checkout_question.selection.question",
+      feedback: "29441d25-8d9f-471e-a13e-a03f61c88091",
+    });
+
+    fireEvent.press(getByTestId("bab3d4f9-0227-4550-a53f-3c125d68429c"));
+    expect(mockTrackChangeFeedback).toHaveBeenLastCalledWith({
+      questionId: "6a6d3878-5561-412c-96f3-7ed79ee587bb",
+      questionName: "checkout_question.experience.question",
+      feedback: "bab3d4f9-0227-4550-a53f-3c125d68429c",
+    });
+
+    fireEvent.changeText(getByTestId("1123a37d-bc00-43a4-9d28-cee1dfaf356c-input"), "Input value");
+    expect(mockTrackChangeFeedback).toHaveBeenLastCalledWith({
+      questionId: "ce3e8d57-5eea-4dd3-bef4-2e811a143612",
+      questionName: "checkout_question.comment.question",
+      feedback: "Input value",
+    });
+
+    fireEvent.changeText(getByTestId("1123a37d-bc00-43a4-9d28-cee1dfaf356c-input"), "New input value");
+    expect(mockTrackChangeFeedback).toHaveBeenCalledTimes(3);
+
+    fireEvent.press(getByText(I18nMessages.FEEDBACK_BUTTON));
+    expect(mockTrackPressContinue).toHaveBeenCalled();
+    expect(mockGiveCheckoutFeedback).toHaveBeenCalledWith({
+      feedbacks: {
+        ["efe07b97-f6fb-4b6a-ba92-b68519320b2c"]: "29441d25-8d9f-471e-a13e-a03f61c88091",
+        ["6a6d3878-5561-412c-96f3-7ed79ee587bb"]: "bab3d4f9-0227-4550-a53f-3c125d68429c",
+        ["ce3e8d57-5eea-4dd3-bef4-2e811a143612"]: "New input value",
+      },
+    });
+
+    expect(getByTestId("default-header")).toBeTruthy();
+  });
+
+  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]);
+    (useGiveCheckoutFeedback as jest.Mock).mockReturnValue([mockGiveCheckoutFeedback, CommandStatus.SUCCESS]);
+
+    const { unmount } = render(<Feedback layout={DummyLayout} />);
+
+    unmount();
+
+    expect(mockGiveCheckoutFeedback).toHaveBeenCalledWith({ feedbacks: {} });
+  });
+});

package/src/infrastructure/ui/views/feedback/Feedback.tsx

@@ -0,0 +1,130 @@
+import React, { FC, useCallback, useEffect, useRef } from "react";
+import { Spinner } from "@lookiero/aurora";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { CheckoutFeedbackProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
+import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
+import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { useTrackChangeFeedback } from "../../../tracking/useTrackChangeFeedback";
+import { useTrackPageView } from "../../../tracking/useTrackPageView";
+import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
+import { Body } from "../../components/layouts/body/Body";
+import { Layout } from "../../components/layouts/layout/Layout";
+import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
+import { useStaticInfo } from "../../hooks/useStaticInfo";
+import { style } from "./Feedback.style";
+import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
+
+interface HandleOnChangedFeedbackFunctionArgs {
+  readonly checkoutQuestionId: string;
+  readonly checkoutQuestionFeedback: string | undefined; // uuid | free-text
+  readonly hasFeedback?: boolean;
+}
+interface HandleOnChangedFeedbackFunction {
+  (args: HandleOnChangedFeedbackFunctionArgs): void;
+}
+
+interface FeedbackProps {
+  readonly layout: Layout;
+}
+
+const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
+  const logger = useLogger();
+  const {
+    customer: { customerId, country, segment },
+  } = useStaticInfo();
+  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
+    checkoutId: checkout?.id as string,
+  });
+
+  useTrackPageView({
+    page: TrackingPage.FEEDBACK,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+
+  const trackChangeFeedback = useTrackChangeFeedback({
+    page: TrackingPage.FEEDBACK,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnChangedFeedback: HandleOnChangedFeedbackFunction = useCallback(
+    ({ checkoutQuestionId, checkoutQuestionFeedback, hasFeedback }) => {
+      const question = checkoutQuestions?.find((question) => question.id === checkoutQuestionId);
+
+      if (question?.type === CheckoutQuestionType.HOST_TEXTAREA && hasFeedback) {
+        return;
+      }
+
+      trackChangeFeedback({
+        questionId: checkoutQuestionId,
+        questionName: question?.name as string,
+        feedback: checkoutQuestionFeedback,
+      });
+    },
+    [checkoutQuestions, trackChangeFeedback],
+  );
+
+  const [giveCheckoutFeedback, giveCheckoutFeedbackStatus] = useGiveCheckoutFeedback({
+    checkoutId: checkout?.id as string,
+    logger,
+  });
+  const checkoutFeedbackGivenRef = useRef(false);
+  const trackPressContinue = useTrackPressContinue({
+    page: TrackingPage.FEEDBACK,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnSubmit = useCallback(
+    async (feedbacks: CheckoutFeedbackProjection) => {
+      try {
+        trackPressContinue();
+        await giveCheckoutFeedback({ feedbacks });
+        checkoutFeedbackGivenRef.current = true;
+      } catch (e) {}
+    },
+    [giveCheckoutFeedback, trackPressContinue],
+  );
+
+  /**
+   * Give empty feedback when this view is unmounted
+   * (if feedback has not already been given)
+   */
+  useEffect(
+    () => () => {
+      if (!checkoutFeedbackGivenRef.current) {
+        giveCheckoutFeedback({ feedbacks: {} });
+      }
+    },
+    [giveCheckoutFeedback],
+  );
+
+  const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+  const dependenciesLoaded =
+    dependenciesLoadedStatuses.includes(checkoutStatus) && dependenciesLoadedStatuses.includes(checkoutQuestionsStatus);
+
+  if (!dependenciesLoaded) return <Spinner />;
+
+  return (
+    <CheckoutQuestionFeedbackProvider feedback={{}} onChanged={handleOnChangedFeedback}>
+      <Layout style={{ header: style.header, scrollView: style.container }}>
+        <Body style={{ column: style.bodyColumn }}>
+          <CheckoutQuestionsForm
+            checkoutQuestions={checkoutQuestions || []}
+            submitButtonDisabled={giveCheckoutFeedbackStatus === CommandStatus.LOADING}
+            onSubmit={handleOnSubmit}
+          />
+        </Body>
+      </Layout>
+    </CheckoutQuestionFeedbackProvider>
+  );
+};
+
+export { Feedback };

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space6, space8 } = theme();
+
+const style = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: space6,
+    paddingVertical: space8,
+  },
+});
+
+export { style };

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent } from "@testing-library/react-native";
+import React, { ReactNode } from "react";
+import { checkoutQuestions } from "../../../../../projection/checkoutQuestion/checkoutQuestions.mock";
+import { CheckoutQuestionFeedbackProvider } from "../../../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { render } from "../../../../test/render";
+import { CheckoutQuestionsForm } from "./CheckoutQuestionsForm";
+
+const mockOnSubmit = jest.fn();
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <CheckoutQuestionFeedbackProvider feedback={{}}>{children}</CheckoutQuestionFeedbackProvider>
+);
+
+describe("CheckoutQuestionsForm component)", () => {
+  test("renders correctly", async () => {
+    const { getByText, getByTestId, queryByText } = render(
+      <CheckoutQuestionsForm
+        checkoutQuestions={checkoutQuestions}
+        submitButtonDisabled={false}
+        onSubmit={mockOnSubmit}
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(getByText("checkout_question.selection.question")).toBeTruthy();
+
+    expect(getByText("checkout_question.experience.question")).toBeTruthy();
+
+    expect(queryByText("checkout_question.personalshopper.question")).not.toBeTruthy();
+
+    expect(getByText("checkout_question.comment.question")).toBeTruthy();
+
+    fireEvent.press(getByTestId("68c0bb98-b00a-4b86-af43-528fe903cb69"));
+    // Show conditional question
+    expect(getByText("checkout_question.personalshopper.question")).toBeTruthy();
+
+    fireEvent.press(getByTestId("7970edd3-fb5c-42d3-afe3-ce31bcbb856c"));
+    fireEvent.press(getByText("checkout_question.personalshopper.yes"));
+
+    fireEvent.press(getByText(I18nMessages.FEEDBACK_BUTTON));
+    expect(mockOnSubmit).toHaveBeenCalledWith({
+      ["efe07b97-f6fb-4b6a-ba92-b68519320b2c"]: "68c0bb98-b00a-4b86-af43-528fe903cb69",
+      ["6a6d3878-5561-412c-96f3-7ed79ee587bb"]: "7970edd3-fb5c-42d3-afe3-ce31bcbb856c",
+      ["a1acdb2d-62c8-467f-b7cc-dc24d967290c"]: "cce7851c-92c7-461b-8dcb-903c5de59ed1",
+    });
+  });
+});