@lookiero/checkout 7.0.0-beta.0 → 7.0.1-beta.0

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 }),
+    );
+  });
+});

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

@@ -0,0 +1,184 @@
+import { PortalHost } from "@gorhom/portal";
+import React, { FC, useCallback, useMemo } from "react";
+import { ScrollView } from "react-native";
+import { generatePath, useNavigate } from "react-router-native";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { Segment } from "@lookiero/sty-psp-segment";
+import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
+import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
+import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
+import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { Country } from "../../../../../../projection/shared/country";
+import { useReturnCheckoutItem } from "../../../../../domain/checkoutItem/react/useReturnCheckoutItem";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { TrackingPage } from "../../../../../tracking/tracking";
+import { useTrackPageView } from "../../../../../tracking/useTrackPageView";
+import { useTrackPressBack } from "../../../../../tracking/useTrackPressBack";
+import { useTrackPressNext } from "../../../../../tracking/useTrackPressNext";
+import { useTrackReturnItem } from "../../../../../tracking/useTrackReturnItem";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+import { 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 { ItemDetailHeader } from "../../../../components/templates/header/itemDetailHeader/ItemDetailHeader";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Routes } from "../../../../routing/routes";
+import { useBasePath } from "../../../../routing/useBasePath";
+import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
+import { style } from "./ReturnQuestionsForm.style";
+
+const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
+
+const returnQuestionItems: ReturnQuestionItems = {
+  [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_SELECT]: HostRadioGroupReturnQuestionItem,
+  [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+  [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+  [ReturnQuestionType.OPTION]: RadioReturnQuestionItem,
+};
+
+interface ReturnQuestionsFormProps {
+  readonly checkout: CheckoutProjection;
+  readonly checkoutItem: CheckoutItemProjection;
+  readonly country: Country;
+  readonly layout: UiLayout;
+  readonly segment: Segment;
+}
+
+const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
+  checkout,
+  checkoutItem,
+  country,
+  layout: Layout,
+  segment,
+}) => {
+  const navigate = useNavigate();
+  const basePath = useBasePath();
+  const logger = useLogger();
+
+  const { screen } = useDevice();
+
+  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 feedback = useReturnQuestionFeedback();
+  const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
+    checkoutItemId: checkoutItem.id,
+  });
+
+  const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
+    checkoutItemId: checkoutItem.id,
+    logger,
+  });
+  const trackReturnItem = useTrackReturnItem({
+    page: TrackingPage.RETURN,
+    country,
+    segment,
+    checkoutId: checkout.id,
+    checkoutItemId: checkoutItem.id,
+  });
+
+  useTrackPageView({ checkoutId: checkout.id, country, segment, page: TrackingPage.RETURN });
+
+  const trackPressBack = useTrackPressBack({
+    page: TrackingPage.ITEM,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnBack = useCallback(() => {
+    trackPressBack();
+    navigate(-1);
+  }, [navigate, trackPressBack]);
+
+  const trackPressNext = useTrackPressNext({
+    page: TrackingPage.ITEM,
+    country,
+    segment,
+    checkoutId: checkout.id,
+  });
+
+  const handleOnSubmit = useCallback(async () => {
+    returnCheckoutItem({ feedbacks: feedback });
+    trackReturnItem();
+
+    const itemIndex = checkout.items.indexOf(checkoutItem);
+    const nextItemIndex = itemIndex === checkout.items.length - 1 ? 0 : itemIndex + 1;
+    const nextItem = checkout.items[nextItemIndex] as CheckoutItemProjection;
+
+    trackPressNext({ from: checkoutItem.id, to: nextItem.id });
+    navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
+  }, [basePath, checkout.items, checkoutItem, feedback, navigate, returnCheckoutItem, trackPressNext, trackReturnItem]);
+
+  const header = useMemo(
+    () => (
+      <Box style={style.headerWrapper}>
+        <ItemDetailHeader onBack={handleOnBack} />
+      </Box>
+    ),
+    [handleOnBack],
+  );
+
+  const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
+
+  if (!dependenciesLoaded) {
+    return <Spinner />;
+  }
+
+  return (
+    <ReturnQuestionItemProvider returnQuestionItems={returnQuestionItems}>
+      <PortalHost name={RETURN_QUESTION_FORM_PORTAL_HOST_NAME} />
+
+      <Layout
+        header={header}
+        scrollEnabled={false}
+        style={{
+          safeAreaView: style.safeAreaView,
+          scrollView: style.scrollView,
+        }}
+      >
+        <ProductVariantPreview country={country} item={checkoutItem} />
+
+        <ScrollView showsVerticalScrollIndicator={false} testID="return-questions-form">
+          <AuroraLayout fullWidth={!screen.L} style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}>
+            <Box size={{ L: "2/3" }}>
+              <View style={[style.info, !screen.S && style.desktopInfo]}>
+                <Text level={3} heading>
+                  {titleText}
+                </Text>
+                <Text level={1} style={style.description} detail>
+                  {descriptionText}
+                </Text>
+              </View>
+
+              <ReturnQuestions
+                portalHostName={RETURN_QUESTION_FORM_PORTAL_HOST_NAME}
+                returnQuestions={returnQuestions}
+              />
+
+              <View style={style.submit}>
+                <Button testID="return-questions-button" onPress={handleOnSubmit}>
+                  {submitButtonText}
+                </Button>
+              </View>
+            </Box>
+          </AuroraLayout>
+        </ScrollView>
+      </Layout>
+    </ReturnQuestionItemProvider>
+  );
+};
+
+export { ReturnQuestionsForm };

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { generatePath, useMatch, useNavigate } from "react-router-native";
-import { Box, Text, Layout, useDevice, Spinner } from "@lookiero/aurora";
+import { Box, Text, Layout as AuroraLayout, useDevice, Spinner } 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";
@@ -27,7 +27,7 @@ interface SummaryProps {
   readonly children: ReactNode;
 }
 
-const Summary: FC<SummaryProps> = ({ layout: UiLayout, children }) => {
+const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
@@ -110,7 +110,7 @@ const Summary: FC<SummaryProps> = ({ layout: UiLayout, children }) => {
   }
 
   return (
-    <UiLayout
+    <Layout
       scrollEnabled={false}
       style={{
         header: style.header,
@@ -120,7 +120,7 @@ const Summary: FC<SummaryProps> = ({ layout: UiLayout, children }) => {
       <ScrollView showsVerticalScrollIndicator={false}>
         {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
 
-        <Layout
+        <AuroraLayout
           fullWidth={!screen.L}
           style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
         >
@@ -153,7 +153,7 @@ const Summary: FC<SummaryProps> = ({ layout: UiLayout, children }) => {
               </View>
             </Box>
           ) : null}
-        </Layout>
+        </AuroraLayout>
       </ScrollView>
 
       {pricing && !screen.L ? (
@@ -170,7 +170,7 @@ const Summary: FC<SummaryProps> = ({ layout: UiLayout, children }) => {
           </Body>
         </Sticky>
       ) : null}
-    </UiLayout>
+    </Layout>
   );
 };
 

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

@@ -1,84 +0,0 @@
-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 });
-    });
-  });
-});