@lookiero/checkout 6.6.0 → 7.0.0-beta.0

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { Text, View } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import {
+  NewFeedbackExperimentVariation,
+  useNewFeedbackExperiment,
+} from "../../../../../hooks/useNewFeedbackExperiment";
 import { I18nMessages } from "../../../../../i18n/i18n";
 import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
 import { style } from "./HostDefaultReturnQuestionItem.style";
@@ -9,10 +13,21 @@ const HostDefaultReturnQuestionItem: ReturnQuestionItem = ({ returnQuestion, chi
   const titleText = useI18nMessage({ id: returnQuestion.name });
   const isAllOptions = returnQuestion.name === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
 
+  /* Kameleoon experiment */
+  const newFeedbackVariation = useNewFeedbackExperiment();
+  const isReturnPage = newFeedbackVariation === NewFeedbackExperimentVariation.RETURN_PAGE;
+  /* Kameleoon experiment */
+
   return (
     <>
-      {titleText && titleText !== " " && !isAllOptions ? (
-        <View style={style.title}>
+      {titleText && titleText !== " " ? (
+        <View
+          style={[
+            style.title,
+            isAllOptions ? style.allOptionsTitle : undefined,
+            isReturnPage ? style.formTitle : undefined,
+          ]}
+        >
           <Text level={3} action>
             {titleText}
           </Text>

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

@@ -12,6 +12,11 @@ jest.mock("../../behaviors/useReturnQuestionFeedback", () => ({
   useReturnQuestionFeedbackForReturnQuestion: () => ({ feedback: "", onChange: mockOnChange }),
 }));
 
+jest.mock("../../../../../hooks/useNewFeedbackExperiment", () => ({
+  ...jest.requireActual("../../../../../hooks/useNewFeedbackExperiment"),
+  useNewFeedbackExperiment: () => "control",
+}));
+
 const returnQuestionParent = {
   id: "0ad1dba8-b02c-4121-a1e3-981f1c30800d",
 } as ReturnQuestionProjection;

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

@@ -2,6 +2,10 @@ import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
+import {
+  NewFeedbackExperimentVariation,
+  useNewFeedbackExperiment,
+} from "../../../../../hooks/useNewFeedbackExperiment";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { ReturnQuestionItem, ReturnQuestionItemProps } from "../ReturnQuestionItem";
 import { style } from "./TextareaReturnQuestionItem.style";
@@ -13,6 +17,11 @@ const TextareaReturnQuestionItem: ReturnQuestionItem = ({
 }: ReturnQuestionItemProps) => {
   const { formatMessage } = useIntl();
 
+  /* Kameleoon experiment */
+  const newFeedbackVariation = useNewFeedbackExperiment();
+  const isReturnPage = newFeedbackVariation === NewFeedbackExperimentVariation.RETURN_PAGE;
+  /* Kameleoon experiment */
+
   const placeholderText = useMemo(
     () => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""),
     [formatMessage, returnQuestion.placeholder],
@@ -24,18 +33,18 @@ const TextareaReturnQuestionItem: ReturnQuestionItem = ({
     [onChange, returnQuestionParent.id],
   );
 
-  return (
-    <View style={style.wrapper}>
-      <InputField
-        label={placeholderText}
-        placeholder={placeholderText}
-        testID={testID}
-        value={feedback}
-        multiline
-        onChange={handleOnChange}
-      />
-    </View>
+  const fieldComponent = (
+    <InputField
+      label={placeholderText}
+      placeholder={placeholderText}
+      testID={testID}
+      value={feedback}
+      multiline
+      onChange={handleOnChange}
+    />
   );
+
+  return isReturnPage ? <View style={style.wrapper}>{fieldComponent}</View> : fieldComponent;
 };
 
 export { TextareaReturnQuestionItem };

package/src/infrastructure/ui/hooks/useNewFeedbackExperiment.test.tsx

@@ -0,0 +1,84 @@
+import { renderHook, waitFor } from "@testing-library/react-native";
+import React, { FC } from "react";
+import { Variation, useAssignedVariationByExperimentId } from "@lookiero/sty-psp-ab-testing";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { CheckoutProjection } from "../../../projection/checkout/checkout";
+import { Country } from "../../../projection/shared/country";
+import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
+import {
+  NewFeedbackExperimentProvider,
+  NewFeedbackExperimentVariation,
+  useNewFeedbackExperiment as sut,
+} from "./useNewFeedbackExperiment";
+
+const mockKameleoon: KameleoonEnvironment = {
+  siteCode: "aplm4v3ckn",
+  experiments: {
+    newFeedback: {
+      id: "245000",
+      variations: {
+        v1: "964072",
+      },
+    },
+  },
+};
+
+const country = Country.ES;
+const segment = Segment.WOMEN;
+const customerId = "1f410890-b3e1-49d2-9950-2ff89182cb79";
+const mockTrackAssignedVariation = jest.fn();
+// useStaticInfo
+
+jest.mock("../../tracking/useTrackAssignedVariationByExperiment", () => ({
+  useTrackAssignedVariationByExperiment: () => mockTrackAssignedVariation,
+}));
+
+jest.mock("@lookiero/sty-psp-ab-testing");
+
+jest.mock("./useStaticInfo", () => ({
+  useStaticInfo: () => ({ kameleoon: mockKameleoon, customer: { customerId, country, segment } }),
+}));
+
+jest.mock("../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId", () => ({
+  useViewFirstAvailableCheckoutByCustomerId: () => [
+    { id: "3db6984e-c8d2-4242-a795-ab5babb25e8c" } as CheckoutProjection,
+  ],
+}));
+
+interface WrapperProps {
+  readonly children: JSX.Element;
+}
+
+const Wrapper: FC<WrapperProps> = ({ children }) => (
+  <NewFeedbackExperimentProvider>{children}</NewFeedbackExperimentProvider>
+);
+
+beforeEach(() => {
+  mockTrackAssignedVariation.mockClear();
+});
+
+describe("useNewFeedbackExperiment hook", () => {
+  it("returns 'control' as variation", async () => {
+    const assignedVariation: Variation = { id: 0, name: "Control" };
+    (useAssignedVariationByExperimentId as jest.Mock).mockReturnValue({ assignedVariation });
+
+    const { result } = renderHook(() => sut(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current).toBe(NewFeedbackExperimentVariation.CONTROL));
+    await waitFor(() => {
+      expect(mockTrackAssignedVariation).toHaveBeenCalledWith({ assignedVariation });
+    });
+  });
+
+  it("returns 'return_page' as variation", async () => {
+    const assignedVariation: Variation = { id: 964072, name: "Variation 1" };
+    (useAssignedVariationByExperimentId as jest.Mock).mockReturnValue({ assignedVariation });
+
+    const { result } = renderHook(() => sut(), { wrapper: Wrapper });
+
+    await waitFor(() => expect(result.current).toBe(NewFeedbackExperimentVariation.RETURN_PAGE));
+    await waitFor(() => {
+      expect(mockTrackAssignedVariation).toHaveBeenCalledWith({ assignedVariation });
+    });
+  });
+});

package/src/infrastructure/ui/hooks/useNewFeedbackExperiment.tsx

@@ -0,0 +1,82 @@
+import React, { createContext, FC, ReactNode, useContext, useEffect, useMemo, useRef } from "react";
+import invariant from "tiny-invariant";
+import { Spinner } from "@lookiero/aurora";
+import { useAssignedVariationByExperimentId } from "@lookiero/sty-psp-ab-testing";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useTrackAssignedVariationByExperiment } from "../../tracking/useTrackAssignedVariationByExperiment";
+import { useStaticInfo } from "./useStaticInfo";
+
+enum NewFeedbackExperimentVariation {
+  CONTROL = "control",
+  RETURN_PAGE = "return_page",
+}
+
+interface NewFeedbackExperiment {
+  readonly variation: NewFeedbackExperimentVariation;
+}
+
+const NewFeedbackExperimentContext = createContext<NewFeedbackExperiment>(null as unknown as NewFeedbackExperiment);
+
+interface NewFeedbackExperimentProviderProps {
+  readonly children: ReactNode;
+}
+
+const NewFeedbackExperimentProvider: FC<NewFeedbackExperimentProviderProps> = ({ children }) => {
+  const {
+    kameleoon: {
+      experiments: {
+        newFeedback: { id: newFeedbackId, variations },
+      },
+    },
+    customer: { customerId, country, segment },
+  } = useStaticInfo();
+  const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const { assignedVariation: newFeedbackVariation } = useAssignedVariationByExperimentId({
+    experimentId: newFeedbackId,
+  });
+  const trackAssignedVariation = useTrackAssignedVariationByExperiment({
+    checkoutId: checkout?.id,
+    country,
+    segment,
+    experimentId: newFeedbackId,
+  });
+
+  const value = useMemo(
+    () => ({
+      variation:
+        newFeedbackVariation?.id === Number(variations.v1)
+          ? NewFeedbackExperimentVariation.RETURN_PAGE
+          : NewFeedbackExperimentVariation.CONTROL,
+    }),
+    [newFeedbackVariation?.id, variations.v1],
+  );
+
+  const assignedVariantTracked = useRef(false);
+  useEffect(() => {
+    if (assignedVariantTracked.current || !newFeedbackVariation || !checkout?.id) {
+      return;
+    }
+
+    trackAssignedVariation({ assignedVariation: newFeedbackVariation });
+    assignedVariantTracked.current = true;
+  }, [checkout?.id, newFeedbackVariation, trackAssignedVariation]);
+
+  if (!checkout) {
+    return <Spinner />;
+  }
+
+  return <NewFeedbackExperimentContext.Provider value={value}>{children}</NewFeedbackExperimentContext.Provider>;
+};
+
+const useNewFeedbackExperiment = () => {
+  const newFeedbackExperiment = useContext(NewFeedbackExperimentContext);
+
+  invariant(
+    newFeedbackExperiment,
+    "Your are trying to use the useNewFeedbackExperiment hook without wrapping your app with the <NewFeedbackExperimentProvider>.",
+  );
+
+  return newFeedbackExperiment.variation;
+};
+
+export { useNewFeedbackExperiment, NewFeedbackExperimentProvider, NewFeedbackExperimentVariation };

package/src/infrastructure/ui/routing/Routing.tsx

@@ -1,4 +1,4 @@
-import React, { FC, lazy, memo, Suspense } from "react";
+import React, { FC, memo, Suspense } from "react";
 import { Navigate, Outlet, useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Spinner } from "@lookiero/aurora";
 import { I18n } from "@lookiero/i18n-react";
@@ -8,23 +8,20 @@ import { Customer } from "../../../projection/shared/customer";
 import { Order } from "../../../projection/shared/order";
 import { Subscription } from "../../../projection/shared/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
+import { NewFeedbackExperimentProvider } from "../hooks/useNewFeedbackExperiment";
 import { StaticInfoProvider } from "../hooks/useStaticInfo";
 import { App } from "../views/App";
+import { Checkout } from "../views/checkout/Checkout";
 import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
-import { CheckoutAccessibilityMiddleware } from "./CheckoutAccessibilityMiddleware";
+import { Feedback } from "../views/feedback/Feedback";
+import { Item } from "../views/item/Item";
+import { Return } from "../views/return/Return";
+import { Summary } from "../views/summary/Summary";
+import { SummaryTabs } from "../views/summaryTabs/SummaryTabs";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
 import { BasePathProvider } from "./useBasePath";
 
-const Item = lazy(() => import("../views/item/Item").then((module) => ({ default: module.Item })));
-const Summary = lazy(() => import("../views/summary/Summary").then((module) => ({ default: module.Summary })));
-const SummaryTabs = lazy(() =>
-  import("../views/summaryTabs/SummaryTabs").then((module) => ({ default: module.SummaryTabs })),
-);
-const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
-const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
-const Return = lazy(() => import("../views/return/Return").then((module) => ({ default: module.Return })));
-
 interface RoutingProps {
   readonly basePath?: string;
   readonly customer: Customer;
@@ -63,19 +60,19 @@ const Routing: FC<RoutingProps> = ({
       path: "",
       element: (
         <BasePathProvider basePath={basePath}>
-          <CheckoutAccessibilityMiddleware customerId={customer?.customerId} onNotAccessible={onNotAccessible}>
-            <StaticInfoProvider customer={customer} kameleoon={kameleoon}>
-              <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
-                <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
-                  <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>
+          <StaticInfoProvider customer={customer} kameleoon={kameleoon}>
+            <I18n loader={<Spinner />} locale={locale} onError={onI18nError}>
+              <Kameleoon loader={<Spinner />} siteCode={kameleoon.siteCode}>
+                <CheckoutMiddleware customerId={customer?.customerId as string} onNotAccessible={onNotAccessible}>
+                  <NewFeedbackExperimentProvider>
                     <App>
                       <Outlet />
                     </App>
-                  </CheckoutMiddleware>
-                </Kameleoon>
-              </I18n>
-            </StaticInfoProvider>
-          </CheckoutAccessibilityMiddleware>
+                  </NewFeedbackExperimentProvider>
+                </CheckoutMiddleware>
+              </Kameleoon>
+            </I18n>
+          </StaticInfoProvider>
         </BasePathProvider>
       ),
       children: [

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
@@ -30,7 +30,7 @@ interface CheckoutProps {
   readonly useRedirect: () => Record<string, string>;
 }
 
-const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect }) => {
+const Checkout: FC<CheckoutProps> = ({ children, layout: UiLayout, useRedirect }) => {
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
@@ -99,7 +99,7 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   }
 
   return (
-    <Layout
+    <UiLayout
       header={<CheckoutHeader onBack={handleOnBack} />}
       scrollEnabled={false}
       style={{
@@ -110,7 +110,7 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
       <ScrollView showsVerticalScrollIndicator={false}>
         {hasReplacedCheckoutItem && <DeliveryBanner />}
 
-        <AuroraLayout
+        <Layout
           fullWidth={!screen.L}
           style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
         >
@@ -158,7 +158,7 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
               </View>
             ) : null}
           </Box>
-        </AuroraLayout>
+        </Layout>
       </ScrollView>
 
       {pricing && !screen.L ? (
@@ -172,7 +172,7 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
       ) : null}
 
       {children}
-    </Layout>
+    </UiLayout>
   );
 };
 

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

@@ -2,7 +2,7 @@ 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 { Layout as UiLayout, useScreenSize } from "@lookiero/sty-psp-ui";
+import { Layout, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutFeedbackProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
 import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
@@ -28,7 +28,7 @@ interface HandleOnChangedFeedbackFunction {
 }
 
 interface FeedbackProps {
-  readonly layout: UiLayout;
+  readonly layout: Layout;
 }
 
 const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {

package/src/infrastructure/ui/views/item/Item.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, RenderAPI, waitFor, screen } from "@testing-library/react-native";
+import { fireEvent, RenderAPI, waitFor, screen, within } from "@testing-library/react-native";
 import React from "react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
@@ -9,6 +9,7 @@ import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutB
 import { useKeepCheckoutItem } from "../../../domain/checkoutItem/react/useKeepCheckoutItem";
 import { useReplaceCheckoutItem } from "../../../domain/checkoutItem/react/useReplaceCheckoutItem";
 import { useResetCheckoutItem } from "../../../domain/checkoutItem/react/useResetCheckoutItem";
+import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { bookedProductsVariants as mockBookedProductsVariants } from "../../../projection/bookedProductsVariants/bookedProductsVariants.mock";
 import { useViewBookedProductsVariantsForCheckoutItem } from "../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem";
 import { checkout } from "../../../projection/checkout/checkout.mock";
@@ -31,11 +32,10 @@ jest.mock("../../hooks/useStaticInfo", () => ({
   useStaticInfo: () => ({ customer: { customerId, country, segment } }),
 }));
 
-const mockNavigate = jest.fn();
 jest.mock("react-router-native", () => ({
   ...jest.requireActual("react-router-native"),
   useLocation: () => jest.fn(),
-  useNavigate: () => mockNavigate,
+  useNavigate: () => jest.fn(),
   useMatch: () => false,
   useParams: () => ({ id: mockFirstCheckoutItemId }),
 }));
@@ -45,6 +45,7 @@ jest.mock("../../../projection/checkout/react/useViewIsSizeChangeEnabledByChecko
 jest.mock("../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId");
 jest.mock("../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem");
 jest.mock("../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem");
+jest.mock("../../../domain/checkoutItem/react/useReturnCheckoutItem");
 jest.mock("../../../domain/checkoutItem/react/useKeepCheckoutItem");
 jest.mock("../../../domain/checkoutItem/react/useReplaceCheckoutItem");
 jest.mock("../../../domain/checkoutItem/react/useResetCheckoutItem");
@@ -59,8 +60,17 @@ jest.mock("../../../tracking/useTrackKeepItem", () => ({
 jest.mock("../../../tracking/useTrackReplaceItem", () => ({
   useTrackReplaceItem: () => jest.fn(),
 }));
+const mockTrackReturnItem = jest.fn();
+jest.mock("../../../tracking/useTrackReturnItem", () => ({
+  useTrackReturnItem: () => mockTrackReturnItem,
+}));
 jest.mock("../../../tracking/useTrackItemPageView");
 
+jest.mock("../../hooks/useNewFeedbackExperiment", () => ({
+  ...jest.requireActual("../../hooks/useNewFeedbackExperiment"),
+  useNewFeedbackExperiment: () => "control",
+}));
+
 const mockCheckout = checkout({
   items: [
     { id: mockFirstCheckoutItemId, status: CheckoutItemStatus.INITIAL },
@@ -77,6 +87,8 @@ interface RenderItemFunction {
 
 const renderItem: RenderItemFunction = () => render(<Item layout={DummyLayout} />);
 
+beforeEach(() => mockTrackReturnItem.mockClear());
+
 beforeAll(() => {
   jest.useFakeTimers();
 });
@@ -98,6 +110,8 @@ describe("Item view", () => {
     ]);
     const mockBookCheckoutBookingForCheckoutItem = jest.fn();
     (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
     (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
@@ -119,6 +133,8 @@ describe("Item view", () => {
     ]);
     const mockBookCheckoutBookingForCheckoutItem = jest.fn();
     (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
     (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
@@ -140,6 +156,31 @@ describe("Item view", () => {
     ]);
     const mockBookCheckoutBookingForCheckoutItem = jest.fn();
     (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
+    (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
+    (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
+    (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
+
+    const { findByTestId } = renderItem();
+    const spinner = await findByTestId("spinner");
+
+    expect(spinner).toBeDefined();
+  });
+
+  it("renders a Spinner while 'returning' the item", async () => {
+    (useViewFiveItemsDiscountByCustomerId as jest.Mock).mockReturnValue([5, QueryStatus.SUCCESS]);
+    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
+    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
+    (useListReturnQuestionsByCheckoutItemId as jest.Mock).mockReturnValue([mockReturnQuestions, QueryStatus.SUCCESS]);
+    (useViewBookedProductsVariantsForCheckoutItem as jest.Mock).mockReturnValue([
+      mockBookedProductsVariants,
+      QueryStatus.SUCCESS,
+    ]);
+    const mockBookCheckoutBookingForCheckoutItem = jest.fn();
+    (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.LOADING]);
     (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
@@ -161,6 +202,8 @@ describe("Item view", () => {
     ]);
     const mockBookCheckoutBookingForCheckoutItem = jest.fn();
     (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
     (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
@@ -182,6 +225,8 @@ describe("Item view", () => {
     (useViewBookedProductsVariantsForCheckoutItem as jest.Mock).mockReturnValue([null, QueryStatus.SUCCESS]);
     const mockBookCheckoutBookingForCheckoutItem = jest.fn();
     (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
     (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
@@ -202,6 +247,8 @@ describe("Item view", () => {
     ]);
     const mockBookCheckoutBookingForCheckoutItem = jest.fn();
     (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
     (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
@@ -211,7 +258,7 @@ describe("Item view", () => {
     expect(mockBookCheckoutBookingForCheckoutItem).not.toHaveBeenCalled();
   });
 
-  it("calls navigate to return page when pressing the return-button", async () => {
+  it("calls returnCheckoutItem and trackReturnCheckoutItem when pressing the return-button", async () => {
     (useViewFiveItemsDiscountByCustomerId as jest.Mock).mockReturnValue([5, QueryStatus.SUCCESS]);
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
@@ -222,17 +269,26 @@ describe("Item view", () => {
     ]);
     const mockBookCheckoutBookingForCheckoutItem = jest.fn();
     (useBookCheckoutBookingForCheckoutItem as jest.Mock).mockReturnValue([mockBookCheckoutBookingForCheckoutItem]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
     (useKeepCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useReplaceCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
     (useResetCheckoutItem as jest.Mock).mockReturnValue([jest.fn(), CommandStatus.IDLE]);
 
-    const { findByText } = renderItem();
+    const { findByText, findByTestId } = renderItem();
 
     const returnButton = await findByText(I18nMessages.ITEM_RETURN_BUTTON);
 
     fireEvent.press(returnButton);
 
-    expect(mockNavigate).toHaveBeenCalled();
+    const modal = await findByTestId("return-questions-form-modal");
+
+    const submitButton = await within(modal).findByText(I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON);
+
+    fireEvent.press(submitButton);
+
+    expect(mockReturnCheckoutItem).toHaveBeenCalled();
+    expect(mockTrackReturnItem).toHaveBeenCalled();
   });
 
   it("shows discount banner when the user have purchased items", async () => {