@lookiero/checkout 10.1.0 → 11.1.0

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

@@ -1,134 +0,0 @@
-import { waitFor } from "@testing-library/react-native";
-import React from "react";
-import { QueryStatus } from "@lookiero/messaging-react";
-import { Country } from "@lookiero/sty-psp-locale";
-import { Segment } from "@lookiero/sty-psp-segment";
-import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { checkout } from "../../../../../projection/checkout/checkout.mock";
-import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
-import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
-import { paymentFlowPayload as mockPaymentFlowPayload } from "../../../../../projection/payment/paymentFlowPayload.mock";
-import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
-import { pricing } from "../../../../../projection/pricing/pricing.mock";
-import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
-import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
-import { Routes } from "../../../../routing/routes";
-import { render } from "../../../../test/render";
-import { CheckoutPaymentModal } from "./CheckoutPaymentModal";
-
-const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
-const country = Country.ES;
-const segment = Segment.WOMEN;
-const orderNumber = 3691625;
-const isFirstOrder = false;
-const getAuthToken = () => Promise.resolve("token");
-const mockCheckout = checkout({
-  items: [
-    { status: CheckoutItemStatus.RETURNED },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.REPLACED },
-  ],
-});
-const mockPricing = pricing();
-
-jest.mock("../../../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({
-    customer: { customerId, country, segment },
-    basePath: "",
-  }),
-}));
-
-jest.mock("../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
-jest.mock("../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId");
-jest.mock("../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId");
-jest.mock("../../../../../projection/pricing/react/useViewPricingByCheckoutId");
-jest.mock("../../../../hooks/useSubmitCheckout");
-jest.mock("../../../../../tracking/useTrackCheckout");
-
-const mockStartLegacyBoxCheckout = jest.fn();
-jest.mock("@lookiero/payments-front", () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { useImperativeHandle, forwardRef } = require("react");
-
-  return {
-    CheckoutStatus: {
-      REJECTED: "REJECTED",
-      ERROR: "ERROR",
-      FULFILLED: "FULFILLED",
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/naming-convention, react/display-name
-    PaymentFlow: forwardRef((params, ref) => {
-      useImperativeHandle(ref, () => ({
-        startLegacyBoxCheckout: mockStartLegacyBoxCheckout,
-      }));
-
-      return null;
-    }),
-    PaymentMethod: {
-      ["GOOGLE_PAY"]: "google_pay",
-    },
-    Section: {
-      ["BOX_CHECKOUT"]: "box-checkout",
-    },
-    PaymentInstrumentSelect: jest.fn(() => <></>),
-  };
-});
-
-const mockUseNavigate = jest.fn();
-jest.mock("react-router-native", () => ({
-  ...jest.requireActual("react-router-native"),
-  useNavigate: () => mockUseNavigate,
-}));
-
-describe("CheckoutPaymentModal component", () => {
-  it("renders correctly", async () => {
-    const mockSubmitCheckout = jest.fn();
-    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
-    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
-    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
-    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
-    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, "success"]);
-
-    await waitFor(() => {
-      render(
-        <CheckoutPaymentModal
-          coupon={null}
-          getAuthToken={getAuthToken}
-          isFirstOrder={isFirstOrder}
-          orderNumber={orderNumber}
-          subscription="b"
-        />,
-      );
-      expect(mockSubmitCheckout).toHaveBeenCalled();
-    });
-  });
-
-  it("navigates back to /checkout when checkout-flow fails", async () => {
-    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
-    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
-    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([true, QueryStatus.SUCCESS]);
-    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
-    (useSubmitCheckout as jest.Mock).mockImplementation(({ onError }) => {
-      const submitCheckout = () => onError();
-
-      return [submitCheckout, "error"];
-    });
-
-    await waitFor(() => {
-      render(
-        <CheckoutPaymentModal
-          coupon={null}
-          getAuthToken={getAuthToken}
-          isFirstOrder={isFirstOrder}
-          orderNumber={orderNumber}
-          subscription="b"
-        />,
-      );
-      expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}`, { replace: true });
-    });
-  });
-});

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

@@ -1,124 +0,0 @@
-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/subscription/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";
-
-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 },
-    basePath,
-  } = 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 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 };