@lookiero/checkout 5.3.0 → 6.0.0-beta.0

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

@@ -0,0 +1,294 @@
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
+import { Box, Spinner } from "@lookiero/aurora";
+import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
+import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import {
+  BookedProductsVariantsProjection,
+  ProductVariantProjection,
+} from "../../../../projection/bookedProductsVariants/bookedProductsVariants";
+import { CheckoutItemProjection } from "../../../../projection/checkoutItem/checkoutItem";
+import { FeedbackProjection } from "../../../../projection/feedback/feedback";
+import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
+import { useReturnCheckoutItem } from "../../../domain/checkoutItem/react/useReturnCheckoutItem";
+import { useViewBookedProductsVariantsForCheckoutItem } from "../../../projection/bookedProductsVariants/react/useViewBookedProductsVariantsForCheckoutItem";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { useTrackItemPageView } from "../../../tracking/useTrackItemPageView";
+import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
+import { useTrackPressNext } from "../../../tracking/useTrackPressNext";
+import { useTrackPressPrevious } from "../../../tracking/useTrackPressPrevious";
+import { useTrackReturnItem } from "../../../tracking/useTrackReturnItem";
+import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
+import { Layout } from "../../components/layouts/layout/Layout";
+import { ReturnQuestionFeedbackProvider } from "../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ItemDetailHeader } from "../../components/templates/header/itemDetailHeader/ItemDetailHeader";
+import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
+import { NewFeedbackExperimentVariation, useNewFeedbackExperiment } from "../../hooks/useNewFeedbackExperiment";
+import { useStaticInfo } from "../../hooks/useStaticInfo";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { style } from "./Item.style";
+import { ReturnQuestionsForm } from "./components/returnQuestionsForm/ReturnQuestionsForm";
+import {
+  CheckoutItemWithCustomerDecission,
+  ItemWithCustomerDecission,
+} from "./views/itemWithCustomerDecission/ItemWithCustomerDecission";
+import {
+  CheckoutItemWithoutCustomerDecission,
+  ItemWithoutCustomerDecission,
+} from "./views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission";
+
+interface HandleOnNextFunctionArgs {
+  readonly from: string;
+  readonly to: string;
+}
+interface HandleOnNextFunction {
+  (args: HandleOnNextFunctionArgs): void;
+}
+interface HandleOnPreviousFunctionArgs {
+  readonly from: string;
+  readonly to: string;
+}
+interface HandleOnPreviousFunction {
+  (args: HandleOnPreviousFunctionArgs): void;
+}
+
+interface ItemProps {
+  readonly layout: Layout;
+}
+
+const Item: FC<ItemProps> = ({ layout: Layout }) => {
+  const logger = useLogger();
+  const screenSize = useScreenSize();
+  const navigate = useNavigate();
+  const basePath = useBasePath();
+  const {
+    customer: { customerId, country, segment },
+  } = useStaticInfo();
+  const isDesktopScreen = screenSize !== "S";
+
+  const { id } = useParams();
+  const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
+  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+  const checkoutItem = checkout?.items.find((checkoutItem) => checkoutItem.id === id) as CheckoutItemProjection;
+
+  /* Kameleoon experiment */
+  const newFeedbackVariation = useNewFeedbackExperiment();
+  const redirectToReturnPage = newFeedbackVariation === NewFeedbackExperimentVariation.RETURN_PAGE;
+  /* Kameleoon experiment */
+
+  /* SizeChange and Booking */
+  const [isSizeChangeEnabled, sizeChangeEnabledStatus] = useViewIsSizeChangeEnabledByCheckoutId({
+    checkoutId: checkout?.id,
+  });
+  const [bookedProductsVariants, bookedProductsVariantsStatus] = useViewBookedProductsVariantsForCheckoutItem({
+    checkoutItemId: checkoutItem.id,
+  });
+  const isBookingRequired = bookedProductsVariants === null && isSizeChangeEnabled;
+  const [bookCheckoutBooking] = useBookCheckoutBookingForCheckoutItem({
+    checkoutItemId: checkoutItem.id,
+    checkoutBookingId: checkout?.checkoutBookingId,
+    logger,
+  });
+  // This reference is used for the effect not be triggered twice
+  // (bookCheckoutBooking changes when the checkout has a proper checkoutBookingId)
+  const bookCheckoutBookingRef = useRef(bookCheckoutBooking);
+  bookCheckoutBookingRef.current = bookCheckoutBooking;
+  useEffect(() => {
+    if (isBookingRequired) {
+      bookCheckoutBookingRef.current();
+    }
+  }, [isBookingRequired]);
+  /* SizeChange and Booking */
+
+  /* ReturnCheckoutItem */
+  const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
+    checkoutItemId: checkoutItem.id,
+  });
+  const [returnQuestionsVisible, setReturnQuestionsVisible] = useState(false);
+  const showReturnQuestions = useCallback(() => setReturnQuestionsVisible(true), []);
+  const hideReturnQuestions = useCallback(() => setReturnQuestionsVisible(false), []);
+  const goToReturnPage = useCallback(() => {
+    navigate(`${basePath}/${generatePath(Routes.RETURN, { id: checkoutItem.id })}`);
+  }, [basePath, checkoutItem.id, navigate]);
+
+  const [returnCheckoutItem, returnCheckoutItemStatus] = useReturnCheckoutItem({
+    checkoutItemId: checkoutItem.id,
+    logger,
+  });
+  const trackReturnItem = useTrackReturnItem({
+    page: TrackingPage.ITEM,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+    checkoutItemId: checkoutItem.id,
+  });
+  const returnItem = useCallback(
+    async (feedbacks: FeedbackProjection) => {
+      hideReturnQuestions();
+      returnCheckoutItem({ feedbacks });
+      trackReturnItem();
+    },
+    [hideReturnQuestions, returnCheckoutItem, trackReturnItem],
+  );
+  /* ReturnCheckoutItem */
+
+  const currentProductVariant: ProductVariantProjection = useMemo(
+    () =>
+      checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
+        ? { id: checkoutItem.replacedFor.id, size: checkoutItem.replacedFor.size }
+        : { id: checkoutItem.productVariant.id, size: checkoutItem.productVariant.size },
+    [checkoutItem.productVariant.id, checkoutItem.productVariant.size, checkoutItem.replacedFor, checkoutItem.status],
+  );
+
+  const replaceableFor = useMemo(
+    () =>
+      sizeChangeEnabledStatus === QueryStatus.SUCCESS
+        ? isSizeChangeEnabled
+          ? bookedProductsVariants
+            ? bookedProductsVariants.productVariants
+                .filter(({ id }) => id !== currentProductVariant.id)
+                .map(({ size }) => size.lookiero)
+            : undefined
+          : []
+        : undefined,
+    [bookedProductsVariants, currentProductVariant.id, isSizeChangeEnabled, sizeChangeEnabledStatus],
+  );
+  useTrackItemPageView({
+    page: TrackingPage.ITEM,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+    checkoutItemId: checkoutItem.id,
+    status: checkoutItem.status,
+    productVariantId: checkoutItem.productVariant.id,
+    replaceableFor,
+    unique: checkoutItem.productVariant.size.unique,
+  });
+
+  const trackPressNext = useTrackPressNext({
+    page: TrackingPage.ITEM,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnNext: HandleOnNextFunction = useCallback(
+    ({ from, to }) => trackPressNext({ from, to }),
+    [trackPressNext],
+  );
+  const trackPressPrevious = useTrackPressPrevious({
+    page: TrackingPage.ITEM,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnPrevious: HandleOnPreviousFunction = useCallback(
+    ({ from, to }) => trackPressPrevious({ from, to }),
+    [trackPressPrevious],
+  );
+  const trackPressBack = useTrackPressBack({
+    page: TrackingPage.ITEM,
+    country,
+    segment,
+    checkoutId: checkout?.id,
+  });
+  const handleOnBack = useCallback(() => {
+    trackPressBack();
+    navigate(-1);
+  }, [navigate, trackPressBack]);
+  const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
+
+  const header = useMemo(
+    () => (
+      <Box style={style.headerWrapper}>
+        {itemDetailRouteMatch ? (
+          <ItemDetailHeader onBack={handleOnBack} />
+        ) : (
+          <ItemHeader
+            item={checkoutItem}
+            items={checkout?.items as CheckoutItemProjection[]}
+            onNext={handleOnNext}
+            onPrevious={handleOnPrevious}
+          />
+        )}
+        {fiveItemsDiscount !== 0 ? <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} /> : null}
+      </Box>
+    ),
+    [
+      checkout?.items,
+      checkoutItem,
+      fiveItemsDiscount,
+      handleOnBack,
+      handleOnNext,
+      handleOnPrevious,
+      itemDetailRouteMatch,
+    ],
+  );
+
+  const itemWithoutCustomerDecission = checkoutItem.status === CheckoutItemStatus.INITIAL;
+
+  const dependenciesLoaded =
+    checkoutStatus !== QueryStatus.LOADING &&
+    checkout &&
+    checkoutItem &&
+    returnQuestions &&
+    // This will ensure that the view is not shown until bookCheckoutBooking use-case is dispatched (if required)
+    bookedProductsVariantsStatus !== QueryStatus.LOADING &&
+    fiveItemsDiscountStatus !== QueryStatus.LOADING &&
+    sizeChangeEnabledStatus !== QueryStatus.LOADING &&
+    (isBookingRequired ? checkout.checkoutBookingId && bookedProductsVariants : true) &&
+    returnCheckoutItemStatus !== CommandStatus.LOADING;
+
+  if (!dependenciesLoaded) {
+    return <Spinner testID="spinner" />;
+  }
+
+  return (
+    <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
+      <Layout
+        header={header}
+        scrollEnabled={!itemWithoutCustomerDecission}
+        style={{
+          header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
+          scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
+          safeAreaView: isDesktopScreen ? style.safeAreaView : null,
+        }}
+      >
+        {itemWithoutCustomerDecission ? (
+          <ItemWithoutCustomerDecission
+            bookedProductsVariants={bookedProductsVariants as BookedProductsVariantsProjection}
+            checkoutId={checkout.id}
+            checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
+            currentProductVariant={currentProductVariant}
+            onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+          />
+        ) : (
+          <ItemWithCustomerDecission
+            checkoutId={checkout.id}
+            checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
+            currentProductVariant={currentProductVariant}
+            returnQuestions={returnQuestions}
+            onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+          />
+        )}
+      </Layout>
+
+      {!redirectToReturnPage ? (
+        <ReturnQuestionsForm
+          returnQuestions={returnQuestions}
+          visible={returnQuestionsVisible}
+          onClose={hideReturnQuestions}
+          onSubmit={returnItem}
+        />
+      ) : null}
+    </ReturnQuestionFeedbackProvider>
+  );
+};
+
+export { Item };

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space4, space6 } = theme();
+
+const style = StyleSheet.create({
+  container: {
+    marginBottom: space4,
+  },
+  smallContainer: {
+    marginHorizontal: space6,
+  },
+});
+
+export { style };

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.test.tsx

@@ -0,0 +1,37 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { render } from "../../../../test/render";
+import { CustomerDecissionBanner } from "./CustomerDecissionBanner";
+
+const mockOnPress = jest.fn();
+
+type Status = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
+type Scenarios = [Status, string][];
+const scenarios: Scenarios = [
+  [CheckoutItemStatus.KEPT, I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION],
+  [CheckoutItemStatus.REPLACED, I18nMessages.ITEM_BANNER_CUSTOMER_REPLACED_DECISSION],
+  [CheckoutItemStatus.RETURNED, I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION],
+];
+
+describe("CustomerDecissionBanner component", () => {
+  test.each(scenarios)("matches the snapshot for a %s checkout item status", (checkoutItemStatus, snapshotName) => {
+    const { toJSON } = render(
+      <CustomerDecissionBanner checkoutItemStatus={checkoutItemStatus} onPress={mockOnPress} />,
+    );
+
+    expect(toJSON()).toMatchSnapshot(snapshotName);
+  });
+
+  test.each(scenarios)("renders correctly for a %s checkout item status", (checkoutItemStatus, expectedText) => {
+    const { getByText } = render(
+      <CustomerDecissionBanner checkoutItemStatus={checkoutItemStatus} onPress={mockOnPress} />,
+    );
+
+    expect(getByText(expectedText)).toBeTruthy();
+
+    fireEvent.press(getByText(I18nMessages.ITEM_BANNER_BUTTON));
+    expect(mockOnPress).toBeCalled();
+  });
+});

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from "react";
+import { Pressable, View } from "react-native";
+import { InfoBox, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./CustomerDecissionBanner.style";
+
+type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
+
+const i18nMessageForCheckoutItemStatus: Record<CustomerDecissionBannerStatus, string> = {
+  [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
+  [CheckoutItemStatus.REPLACED]: I18nMessages.ITEM_BANNER_CUSTOMER_REPLACED_DECISSION,
+  [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
+};
+
+interface CustomerDecissionBannerProps {
+  readonly checkoutItemStatus: CustomerDecissionBannerStatus;
+  readonly onPress: () => void;
+}
+const CustomerDecissionBanner: FC<CustomerDecissionBannerProps> = ({ checkoutItemStatus, onPress }) => {
+  const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
+  const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
+  const screenSize = useScreenSize();
+  const isSmallScreen = screenSize === "S";
+
+  return (
+    <View style={[style.container, isSmallScreen ? style.smallContainer : null]}>
+      <InfoBox text={decissionText}>
+        <Pressable testID="customer-decission-banner" onPress={onPress}>
+          <Text level={isSmallScreen ? 2 : 1} detail underlined>
+            {bannerButtonText}
+          </Text>
+        </Pressable>
+      </InfoBox>
+    </View>
+  );
+};
+
+export type { CustomerDecissionBannerStatus };
+export { CustomerDecissionBanner };