@lookiero/checkout 6.5.1 → 6.6.0

package/src/infrastructure/ui/views/return/Return.tsx

@@ -1,216 +1,28 @@
-import { PortalHost } from "@gorhom/portal";
-import React, { FC, useCallback, useMemo } from "react";
-import { ScrollView } from "react-native";
-import { generatePath, useNavigate, useParams } from "react-router-native";
-import { Box, Button, Layout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
-import { useI18nMessage } from "@lookiero/i18n-react";
-import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
-import { useLogger } from "@lookiero/sty-psp-logging";
-import { Segment } from "@lookiero/sty-psp-segment";
+import React, { FC } from "react";
+import { useParams } from "react-router-native";
+import { Spinner } from "@lookiero/aurora";
+import { QueryStatus } from "@lookiero/messaging-react";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
-import { CheckoutProjection } from "../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../projection/checkoutItem/checkoutItem";
-import { FeedbackProjection } from "../../../../projection/feedback/feedback";
-import { ReturnQuestionType } from "../../../../projection/returnQuestion/returnQuestion";
-import { Country } from "../../../../projection/shared/country";
-import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
-import { TrackingPage } from "../../../tracking/tracking";
-import { useTrackPageView } from "../../../tracking/useTrackPageView";
-import { useTrackPressNext } from "../../../tracking/useTrackPressNext";
-import { useTrackPressPrevious } from "../../../tracking/useTrackPressPrevious";
-import { useTrackReturnItem } from "../../../tracking/useTrackReturnItem";
-import { ReturnQuestions } from "../../components/organisms/returnQuestions/ReturnQuestions";
-import {
-  ReturnQuestionFeedbackProvider,
-  useReturnQuestionFeedback,
-} from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
-import {
-  ReturnQuestionItemProvider,
-  ReturnQuestionItems,
-} from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
-import { HostDefaultReturnQuestionItem } from "../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
-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";
-import { TextareaReturnQuestionItem } from "../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
-import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
+import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { I18nMessages } from "../../i18n/i18n";
-import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
-import { style } from "./Return.style";
-import { ProductVariantPreview } from "./components/productVariantPreview/ProductVariantPreview";
-
-const returnQuestionItems: ReturnQuestionItems = {
-  [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
-  [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
-  [ReturnQuestionType.HOST_SELECT]: HostRadioGroupReturnQuestionItem,
-  [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
-  [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
-  [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
-};
-
-interface ReturnFormProps {
-  readonly checkoutItem: CheckoutItemProjection;
-  readonly country: Country;
-  readonly segment: Segment;
-  readonly layout: UiLayout;
-  readonly checkout: CheckoutProjection;
-}
-
-const ReturnForm: FC<ReturnFormProps> = ({ checkout, checkoutItem, country, segment, layout: UiLayout }) => {
-  const { screen } = useDevice();
-  const navigate = useNavigate();
-  const logger = useLogger();
-  const basePath = useBasePath();
-  const checkoutId = checkout.id;
-  const trackPressNext = useTrackPressNext({
-    page: TrackingPage.ITEM,
-    country,
-    segment,
-    checkoutId,
-  });
-  const trackPressPrevious = useTrackPressPrevious({
-    page: TrackingPage.ITEM,
-    country,
-    segment,
-    checkoutId,
-  });
-  const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
-  const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
-  const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
-  const isSmallScreen = screen.S;
-
-  useTrackPageView({ checkoutId, country, segment, page: TrackingPage.RETURN });
-
-  /* ReturnCheckoutItem */
-  const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
-    checkoutItemId: checkoutItem.id,
-  });
-
-  const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
-    checkoutItemId: checkoutItem.id,
-    logger,
-  });
-  const trackReturnItem = useTrackReturnItem({
-    page: TrackingPage.RETURN,
-    country,
-    segment,
-    checkoutId: checkoutId,
-    checkoutItemId: checkoutItem.id,
-  });
-
-  const navigateToNextItem = useCallback(() => {
-    const item = checkoutItem;
-    const items = checkout?.items as CheckoutItemProjection[];
-    const itemIndex = items.indexOf(item);
-    const nextItemIndex = itemIndex === items.length - 1 ? 0 : itemIndex + 1;
-    const nextItem = items[nextItemIndex] as CheckoutItemProjection;
-
-    trackPressNext({ from: item.id, to: nextItem.id });
-    navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
-  }, [basePath, checkout?.items, checkoutItem, navigate, trackPressNext]);
-
-  const navigateToPreviousItem = useCallback(() => {
-    const item = checkoutItem;
-    const items = checkout?.items as CheckoutItemProjection[];
-    const itemIndex = items.indexOf(item);
-    const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
-    const previousItem = items[previousItemIndex] as CheckoutItemProjection;
-
-    trackPressPrevious({ from: item.id, to: previousItem.id });
-
-    navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
-  }, [basePath, checkout?.items, checkoutItem, navigate, trackPressPrevious]);
-
-  const returnItem = useCallback(
-    async (feedbacks: FeedbackProjection) => {
-      returnCheckoutItem({ feedbacks });
-      trackReturnItem();
-      navigateToNextItem();
-    },
-    [navigateToNextItem, returnCheckoutItem, trackReturnItem],
-  );
-
-  const feedback = useReturnQuestionFeedback();
-
-  const handleOnSubmit = useCallback(() => returnItem(feedback), [feedback, returnItem]);
-
-  const header = useMemo(
-    () => (
-      <Box style={style.headerWrapper}>
-        <ItemHeader
-          item={checkoutItem}
-          items={checkout?.items as CheckoutItemProjection[]}
-          onNext={navigateToNextItem}
-          onPrevious={navigateToPreviousItem}
-        />
-      </Box>
-    ),
-    [checkout?.items, checkoutItem, navigateToNextItem, navigateToPreviousItem],
-  );
-
-  /* ReturnCheckoutItem */
-
-  const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
-
-  if (!dependenciesLoaded) {
-    return <Spinner />;
-  }
-
-  return (
-    <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>
-      <PortalHost name="return-question-form-portal" />
-      <UiLayout
-        header={header}
-        scrollEnabled={false}
-        style={{
-          safeAreaView: style.safeAreaView,
-          scrollView: style.scrollView,
-        }}
-      >
-        <ProductVariantPreview country={country} item={checkoutItem} />
-
-        <ScrollView showsVerticalScrollIndicator={false}>
-          <Layout fullWidth={!screen.L} style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}>
-            <Box size={{ L: "2/3" }}>
-              <View style={[style.info, isSmallScreen ? undefined : style.desktopInfo]}>
-                <Text level={3} heading>
-                  {titleText}
-                </Text>
-                <Text level={1} style={style.description} detail>
-                  {descriptionText}
-                </Text>
-              </View>
-
-              <ReturnQuestions portalHostName="return-question-form-portal" returnQuestions={returnQuestions} />
-
-              <View style={style.submit}>
-                <Button testID="return-questions-button" onPress={handleOnSubmit}>
-                  {submitButtonText}
-                </Button>
-              </View>
-            </Box>
-          </Layout>
-        </ScrollView>
-      </UiLayout>
-    </ReturnQuestionItemProvider>
-  );
-};
+import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
 
 interface ReturnProps {
   readonly layout: UiLayout;
 }
 
-const Return: FC<ReturnProps> = ({ layout: UiLayout }) => {
+const Return: FC<ReturnProps> = ({ layout }) => {
   const { id } = useParams();
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
+
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+
   const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id) as CheckoutItemProjection;
+
   const dependenciesLoaded = checkoutStatus !== QueryStatus.LOADING && checkout && checkoutItem;
 
   if (!dependenciesLoaded) {
@@ -219,11 +31,11 @@ const Return: FC<ReturnProps> = ({ layout: UiLayout }) => {
 
   return (
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
-      <ReturnForm
+      <ReturnQuestionsForm
         checkout={checkout}
         checkoutItem={checkoutItem}
         country={country}
-        layout={UiLayout}
+        layout={layout}
         segment={segment}
       />
     </ReturnQuestionFeedbackProvider>

package/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.test.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Country } from "@lookiero/sty-psp-locale";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { checkoutItem } from "../../../../../projection/checkoutItem/checkoutItem.mock";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { render } from "../../../../test/render";
+import { ProductVariantPreview } from "./ProductVariantPreview";
+
+const country = Country.ES;
+const checkoutItemProjection = checkoutItem({ status: CheckoutItemStatus.RETURNED });
+
+describe("ProductVariantPreview", () => {
+  it("matches the snapshot", async () => {
+    const { toJSON } = render(<ProductVariantPreview country={country} item={checkoutItemProjection} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly", async () => {
+    const { getByTestId, getByText } = render(
+      <ProductVariantPreview country={country} item={checkoutItemProjection} />,
+    );
+
+    expect(getByTestId("product-variant-preview")).toBeTruthy();
+    expect(getByTestId("product-variant-image")).toBeTruthy();
+    expect(getByTestId("price")).toBeTruthy();
+
+    expect(getByText(checkoutItemProjection.productVariant.brand)).toBeTruthy();
+    expect(getByText(checkoutItemProjection.productVariant.name)).toBeTruthy();
+    expect(getByText(`${I18nMessages.ITEM_SIZE} ${checkoutItemProjection.productVariant.size.lookiero}`)).toBeTruthy();
+  });
+});

package/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.tsx

@@ -19,19 +19,22 @@ interface ProductVariantPreviewProps {
 const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }) => {
   const cdnImageUrl = useMediaImage();
   const { screen } = useDevice();
-  const isSmallScreen = screen.S;
-  const { productVariant, price } = item;
-  const { media, brand, name, size: sizeProjection } = productVariant;
-  const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
 
   const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
   const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
 
+  const {
+    productVariant: { media, brand, name, size: sizeProjection },
+    price,
+  } = item;
+
+  const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
+
   return (
-    <View style={[style.wrapper, isSmallScreen ? style.mobileWrapper : undefined]}>
+    <View style={[style.wrapper, !screen.S && style.mobileWrapper]} testID="product-variant-preview">
       <Row style={style.row}>
         <Column size={{ M: "2/3", L: "2/3" }} style={style.content}>
-          {mainImage ? (
+          {mainImage && (
             <Image
               resizeMode="stretch"
               style={style.image}
@@ -43,7 +46,8 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
                 }),
               }}
             />
-          ) : null}
+          )}
+
           <View style={style.info}>
             <Text color={COLOR.TEXT_MEDIUM} level={2} detail>
               {brand}
@@ -55,6 +59,7 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
               {`${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`}
             </Text>
           </View>
+
           <View style={style.price}>
             <Price price={price} withPercentage />
           </View>

package/src/infrastructure/ui/views/return/components/productVariantPreview/__snapshots__/ProductVariantPreview.test.tsx.snap

@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductVariantPreview 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={
+      [
+        false,
+        {
+          "backgroundColor": "#FFFFFF",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+      ]
+    }
+    testID="product-variant-preview"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexBasis": "auto",
+            "flexWrap": "wrap",
+            "justifyContent": "flex-start",
+            "width": "100%",
+          },
+          {
+            "paddingHorizontal": 24,
+          },
+          {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "width": "100%",
+            },
+            undefined,
+            {
+              "flexDirection": "row",
+            },
+          ]
+        }
+      >
+        <Image
+          resizeMode="stretch"
+          source={
+            {
+              "uri": "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg?w=70&f=auto",
+            }
+          }
+          style={
+            {
+              "borderRadius": 4,
+              "width": 35,
+            }
+          }
+          testID="product-variant-image"
+        />
+        <View
+          style={
+            [
+              {
+                "flex": 1,
+                "marginLeft": 8,
+              },
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#837C7C",
+                  "fontFamily": "AreaNormal-Semibold",
+                  "fontSize": 12,
+                  "letterSpacing": 0.1,
+                  "lineHeight": 16,
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 0,
+                },
+              ]
+            }
+          >
+            CKS
+          </Text>
+          <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": 0,
+                },
+              ]
+            }
+          >
+            Sari Tshirt lines
+          </Text>
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#837C7C",
+                  "fontFamily": "AreaNormal-Semibold",
+                  "fontSize": 12,
+                  "letterSpacing": 0.1,
+                  "lineHeight": 16,
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 0,
+                },
+              ]
+            }
+          >
+            item.size M
+          </Text>
+        </View>
+        <View
+          style={
+            [
+              {
+                "justifyContent": "flex-end",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "flexDirection": "row",
+              }
+            }
+            testID="price"
+          >
+            <View
+              style={
+                {
+                  "alignItems": "flex-end",
+                  "marginLeft": 8,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
+                  [
+                    {
+                      "color": "#0C0A0A",
+                      "fontFamily": "AreaNormal-Semibold",
+                      "fontSize": 13,
+                      "letterSpacing": 0.1,
+                      "lineHeight": 17,
+                      "paddingBottom": 0,
+                      "paddingLeft": 0,
+                      "paddingRight": 0,
+                      "paddingTop": 4,
+                    },
+                  ]
+                }
+                testID="price-text"
+              >
+                €39.99
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import { generatePath } from "react-router-native";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+import { useReturnCheckoutItem } from "../../../../../domain/checkoutItem/react/useReturnCheckoutItem";
+import { checkout } from "../../../../../projection/checkout/checkout.mock";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { returnQuestions as mockReturnQuestions } from "../../../../../projection/returnQuestion/returnQuestions.mock";
+import { ReturnQuestionFeedbackProvider } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Routes } from "../../../../routing/routes";
+import { render } from "../../../../test/render";
+import { ReturnQuestionsForm } from "./ReturnQuestionsForm";
+
+const country = Country.ES;
+const segment = Segment.WOMEN;
+const mockCheckout = checkout({
+  items: [
+    { status: CheckoutItemStatus.KEPT },
+    { status: CheckoutItemStatus.RETURNED },
+    { status: CheckoutItemStatus.REPLACED },
+  ],
+});
+const checkoutItem = mockCheckout.items[1] as CheckoutItemProjection;
+
+const mockNavigate = jest.fn();
+jest.mock("react-router-native", () => ({
+  ...jest.requireActual("react-router-native"),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock("../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId");
+jest.mock("../../../../../domain/checkoutItem/react/useReturnCheckoutItem");
+
+const mockPressNext = jest.fn();
+jest.mock("../../../../../tracking/useTrackPressNext", () => ({
+  useTrackPressNext: () => mockPressNext,
+}));
+
+const mockPressBack = jest.fn();
+jest.mock("../../../../../tracking/useTrackPressBack", () => ({
+  useTrackPressBack: () => mockPressBack,
+}));
+
+const mockReturnItem = jest.fn();
+jest.mock("../../../../../tracking/useTrackReturnItem", () => ({
+  useTrackReturnItem: () => mockReturnItem,
+}));
+
+describe("Return", () => {
+  test("renders correctly", async () => {
+    (useListReturnQuestionsByCheckoutItemId as jest.Mock).mockReturnValue([mockReturnQuestions, QueryStatus.SUCCESS]);
+    const mockReturnCheckoutItem = jest.fn();
+    (useReturnCheckoutItem as jest.Mock).mockReturnValue([mockReturnCheckoutItem, CommandStatus.IDLE]);
+
+    const { findByTestId, getByTestId, getByText } = render(
+      <ReturnQuestionFeedbackProvider feedback={{}}>
+        <ReturnQuestionsForm
+          checkout={mockCheckout}
+          checkoutItem={checkoutItem}
+          country={country}
+          layout={DummyLayout}
+          segment={segment}
+        />
+        ,
+      </ReturnQuestionFeedbackProvider>,
+    );
+
+    expect(await findByTestId("return-questions-form")).toBeTruthy();
+
+    expect(getByTestId("product-variant-preview")).toBeTruthy();
+
+    expect(getByText(I18nMessages.RETURN_QUESTIONS_TITLE)).toBeTruthy();
+    expect(getByText(I18nMessages.RETURN_QUESTIONS_DESCRIPTION)).toBeTruthy();
+
+    expect(getByTestId("item-detail-header")).toBeTruthy();
+
+    fireEvent.press(getByTestId("close-button-icon"));
+    expect(mockPressBack).toHaveBeenCalled();
+    expect(mockNavigate).toHaveBeenLastCalledWith(-1);
+
+    fireEvent.press(getByTestId("return-questions-button"));
+    expect(mockReturnCheckoutItem).toHaveBeenCalled();
+    expect(mockReturnItem).toHaveBeenCalled();
+    expect(mockPressNext).toHaveBeenCalled();
+    expect(mockNavigate).toHaveBeenLastCalledWith(
+      generatePath(`/${Routes.ITEM}`, { id: mockCheckout.items[2]?.id as string }),
+    );
+  });
+});