@lookiero/checkout 10.0.0-beta.4 → 10.0.0

package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from "react";
-import { CheckoutProjection } from "../../../projection/checkout/checkout";
-import { OrderProjection } from "../../../projection/order/order";
-import { SubscriptionProjection } from "../../../projection/subscription/subscription";
-type CheckoutFlowStatus = "idle" | "loading" | "success" | "error";
-interface CheckoutFlowFunction {
-    (): Promise<void>;
-}
-type CheckoutFlowReturn = [
-    checkoutFlow: CheckoutFlowFunction,
-    checkoutFlowStatus: CheckoutFlowStatus,
-    paymentFlow: ReactNode
-];
-interface UseCheckoutFlowArgs {
-    readonly checkout: CheckoutProjection | undefined;
-    readonly order: OrderProjection;
-    readonly subscription: SubscriptionProjection;
-    readonly getAuthToken: () => Promise<string>;
-    readonly onSuccess: () => void;
-}
-interface UseCheckoutFlowFunction {
-    (args: UseCheckoutFlowArgs): CheckoutFlowReturn;
-}
-declare const useCheckoutFlow: UseCheckoutFlowFunction;
-export type { CheckoutFlowStatus };
-export { useCheckoutFlow };

package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.js

@@ -1,127 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { CommandStatus } from "@lookiero/messaging-react";
-import { PaymentFlow, Section } from "@lookiero/payments-front";
-import { useLogger } from "@lookiero/sty-psp-logging";
-import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { viewCheckoutBookingById, } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
-import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
-import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
-import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
-import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
-import { useViewPricingByCheckoutId } from "../../projection/pricing/react/useViewPricingByCheckoutId";
-import { useTrackCheckout } from "../../tracking/useTrackCheckout";
-import { I18nMessages } from "../i18n/i18n";
-import { Routes } from "../routing/routes";
-import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
-import { useQueryBus } from "./useQueryBus";
-import { useStaticInfo } from "./useStaticInfo";
-const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection, subscription: subscriptionProjection, getAuthToken, onSuccess, }) => {
-    const logger = useLogger();
-    const queryBus = useQueryBus();
-    const { customer: { customerId, country, segment, name, email }, basePath, } = useStaticInfo();
-    const paymentFlowRef = useRef(null);
-    const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
-        checkoutId: checkoutProjection?.id,
-    });
-    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id });
-    const [pricing] = useViewPricingByCheckoutId({
-        checkoutId: checkoutProjection?.id,
-        queryOptions: { refetchOnMount: true },
-    });
-    const [submitCheckout, submitCheckoutStatus] = useSubmitCheckout({
-        checkoutId: checkoutProjection?.id,
-        logger,
-    });
-    const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({
-        checkoutBookingId: checkoutProjection?.checkoutBookingId,
-        logger,
-    });
-    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
-    const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
-    const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
-    const [authToken, setAuthToken] = useState();
-    useEffect(() => {
-        const loadAuthToken = async () => setAuthToken(await getAuthToken());
-        loadAuthToken();
-    }, [getAuthToken]);
-    const trackCheckout = useTrackCheckout({
-        checkout: checkoutProjection,
-        order: orderProjection,
-        pricing,
-        subscription: subscriptionProjection,
-        userId: customerId,
-        country,
-        segment,
-    });
-    const checkoutFlow = useCallback(async () => {
-        try {
-            sizeChangeEnabled && (await blockCheckoutBooking());
-        }
-        catch (error) {
-            return;
-        }
-        if (checkoutProjection?.checkoutBookingId) {
-            const checkoutBooking = await queryBus(viewCheckoutBookingById({ checkoutBookingId: checkoutProjection?.checkoutBookingId }));
-            if (checkoutBooking?.isExpired) {
-                setCheckoutBookingExpired(true);
-                return;
-            }
-        }
-        setStartLegacyBoxCheckoutStatus("loading");
-        paymentFlowRef.current?.startLegacyBoxCheckout({
-            ...paymentFlowPayload,
-            userInformation: { email, name },
-            returnUrl: `${basePath}/${Routes.CHECKOUT}`,
-        });
-    }, [
-        checkoutProjection?.checkoutBookingId,
-        paymentFlowPayload,
-        email,
-        name,
-        basePath,
-        sizeChangeEnabled,
-        blockCheckoutBooking,
-        queryBus,
-    ]);
-    const onPaymentSuccess = useCallback(async () => {
-        setStartLegacyBoxCheckoutStatus("success");
-        await submitCheckout();
-        createNotification({
-            bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
-            level: NotificationLevel.SUCCESS,
-        });
-        trackCheckout();
-        onSuccess();
-    }, [createNotification, onSuccess, submitCheckout, trackCheckout]);
-    const onPaymentError = useCallback((payload) => {
-        setStartLegacyBoxCheckoutStatus("error");
-        createNotification({
-            bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-            level: NotificationLevel.ERROR,
-        });
-    }, [createNotification]);
-    usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
-    const checkoutFlowStatus = useMemo(() => {
-        if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
-            startLegacyBoxCheckoutStatus === "loading" ||
-            submitCheckoutStatus === CommandStatus.LOADING) {
-            return "loading";
-        }
-        if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
-            startLegacyBoxCheckoutStatus === "success" &&
-            submitCheckoutStatus === CommandStatus.SUCCESS) {
-            return "success";
-        }
-        if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
-            startLegacyBoxCheckoutStatus === "error" ||
-            submitCheckoutStatus === CommandStatus.ERROR ||
-            checkoutBookingExpired) {
-            return "error";
-        }
-        return "idle";
-    }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutStatus, checkoutBookingExpired]);
-    const paymentFlow = useMemo(() => (authToken ? React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken }) : null), [authToken]);
-    return useMemo(() => [checkoutFlow, checkoutFlowStatus, paymentFlow], [checkoutFlow, paymentFlow, checkoutFlowStatus]);
-};
-export { useCheckoutFlow };

package/dist/src/infrastructure/ui/routing/useBasePath.d.ts

@@ -1,8 +0,0 @@
-import { FC } from "react";
-interface BasePathProviderProps {
-    readonly children: JSX.Element;
-    readonly basePath: string;
-}
-export declare const BasePathProvider: FC<BasePathProviderProps>;
-export declare const useBasePath: () => string;
-export {};

package/dist/src/infrastructure/ui/routing/useBasePath.js

@@ -1,9 +0,0 @@
-import React, { createContext, useContext } from "react";
-import invariant from "tiny-invariant";
-const BasePathContext = createContext(null);
-export const BasePathProvider = ({ basePath, children }) => (React.createElement(BasePathContext.Provider, { value: basePath }, children));
-export const useBasePath = () => {
-    const basePath = useContext(BasePathContext);
-    invariant(basePath !== null, "Your are trying to use the useBasePath hook without wrapping your app with the <BasePathProvider>.");
-    return basePath;
-};

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

@@ -1,302 +0,0 @@
-import { act, render, renderHook, waitFor } from "@testing-library/react-native";
-import React from "react";
-import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
-import { Country } from "@lookiero/sty-psp-locale";
-import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { Segment } from "@lookiero/sty-psp-segment";
-import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
-import { CheckoutBookingProjection } from "../../../projection/checkoutBooking/checkoutBooking";
-import { OrderProjection } from "../../../projection/order/order";
-import { SubscriptionProjection } from "../../../projection/subscription/subscription";
-import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
-import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
-import { checkout } from "../../projection/checkout/checkout.mock";
-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 { I18nMessages } from "../i18n/i18n";
-import { Routes } from "../routing/routes";
-import { useCheckoutFlow as sut } from "./useCheckoutFlow";
-import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
-import { useQueryBus } from "./useQueryBus";
-
-const getAuthToken = () => Promise.resolve("token");
-const mockCheckout = checkout({
-  items: [
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.KEPT },
-    { status: CheckoutItemStatus.RETURNED },
-  ],
-});
-const order: OrderProjection = {
-  orderNumber: 12345,
-  isFirstOrder: false,
-  coupon: null,
-};
-const mockPricing = pricing();
-const subscription: SubscriptionProjection = "o";
-const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
-const basePath = "/checkout";
-const country = Country.ES;
-const email = "email@example.com";
-const name = "Adèle Léonce Émilie";
-const segment = Segment.WOMEN;
-jest.mock("./useStaticInfo", () => ({
-  useStaticInfo: () => ({ customer: { customerId, country, segment, name, email }, basePath }),
-}));
-
-// const errorChargeStatuses = Object.values(ChargeStatus).filter((status) => status !== ChargeStatus.EXECUTED);
-const mockStartLegacyBoxCheckout = jest.fn();
-jest.mock("@lookiero/payments-front", () => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { useImperativeHandle, forwardRef } = require("react");
-
-  return {
-    // 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;
-    }),
-    Section: {
-      ["BOX_CHECKOUT"]: "box-checkout",
-    },
-  };
-});
-
-jest.mock("@lookiero/sty-psp-logging", () => ({
-  useLogger: () => jest.fn(),
-}));
-
-jest.mock("@lookiero/sty-psp-notifications");
-jest.mock("./useQueryBus");
-jest.mock("../../domain/checkout/react/useSubmitCheckout");
-jest.mock("../../domain/checkoutBooking/react/useBlockCheckoutBooking");
-jest.mock("../../domain/checkout/react/useSubmitCheckout");
-jest.mock("../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId");
-jest.mock("../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId");
-jest.mock("../../projection/pricing/react/useViewPricingByCheckoutId");
-jest.mock("./usePaymentInstrumentEvents");
-
-beforeEach(() => {
-  mockStartLegacyBoxCheckout.mockClear();
-});
-
-describe("useCheckoutFlow custom hook", () => {
-  test("successfully executes 'checkoutFlow'", async () => {
-    const mockBlockCheckoutBooking = jest.fn();
-    const mockSubmitCheckout = jest.fn();
-    const mockCreateToastNotification = jest.fn();
-    const mockOnSuccess = jest.fn();
-
-    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
-    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
-    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.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"]);
-    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onSuccess }) => {
-      setTimeout(() => onSuccess(), 1000);
-    });
-
-    const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
-    );
-
-    let checkoutFlow: () => void, status, paymentFlowComponent;
-
-    await waitFor(() => {
-      [checkoutFlow, , paymentFlowComponent] = result.current;
-
-      expect(paymentFlowComponent).not.toBeNull();
-    });
-
-    render(<>{paymentFlowComponent}</>);
-
-    await act(async () => {
-      await checkoutFlow();
-    });
-
-    await waitFor(() => {
-      [, status] = result.current;
-
-      expect(status).toBe("success");
-      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
-      expect(mockStartLegacyBoxCheckout).toHaveBeenCalledWith(
-        expect.objectContaining({
-          ...mockPaymentFlowPayload,
-          userInformation: { email, name },
-          returnUrl: `${basePath}/${Routes.CHECKOUT}`,
-        }),
-      );
-      expect(mockSubmitCheckout).toHaveBeenCalled();
-      expect(mockCreateToastNotification).toHaveBeenCalledWith({
-        bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
-        level: NotificationLevel.SUCCESS,
-      });
-      expect(mockOnSuccess).toHaveBeenCalled();
-    });
-  });
-
-  test("does not call blockCheckoutBooking if sizeChange is not enabled", async () => {
-    const mockBlockCheckoutBooking = jest.fn();
-    const mockSubmitCheckout = jest.fn();
-    const mockCreateToastNotification = jest.fn();
-    const mockOnSuccess = jest.fn();
-
-    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
-    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
-    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
-    (useViewPaymentFlowPayloadByCheckoutId as jest.Mock).mockReturnValue([mockPaymentFlowPayload, QueryStatus.SUCCESS]);
-    (useViewIsSizeChangeEnabledByCheckoutId as jest.Mock).mockReturnValue([false, QueryStatus.SUCCESS]);
-    (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([mockPricing, QueryStatus.SUCCESS]);
-    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, "success"]);
-    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onSuccess }) => {
-      setTimeout(() => onSuccess(), 1000);
-    });
-
-    const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
-    );
-
-    let checkoutFlow: () => void, status, paymentFlowComponent;
-
-    await waitFor(() => {
-      [checkoutFlow, , paymentFlowComponent] = result.current;
-
-      expect(paymentFlowComponent).not.toBeNull();
-    });
-
-    render(<>{paymentFlowComponent}</>);
-
-    await act(async () => {
-      await checkoutFlow();
-    });
-
-    await waitFor(() => {
-      [, status] = result.current;
-
-      expect(status).toBe("success");
-      expect(mockBlockCheckoutBooking).not.toHaveBeenCalled();
-      expect(mockStartLegacyBoxCheckout).toHaveBeenCalledWith(
-        expect.objectContaining({
-          ...mockPaymentFlowPayload,
-          userInformation: { email, name },
-          returnUrl: `${basePath}/${Routes.CHECKOUT}`,
-        }),
-      );
-      expect(mockSubmitCheckout).toHaveBeenCalled();
-      expect(mockCreateToastNotification).toHaveBeenCalledWith({
-        bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
-        level: NotificationLevel.SUCCESS,
-      });
-      expect(mockOnSuccess).toHaveBeenCalled();
-    });
-  });
-
-  test("breaks execution and returns error as the status when blockCheckoutBooking fails", async () => {
-    const mockBlockCheckoutBooking = jest.fn().mockRejectedValue("error");
-    const mockSubmitCheckout = jest.fn();
-    const mockCreateToastNotification = jest.fn();
-    const mockOnSuccess = jest.fn();
-
-    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
-    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.ERROR]);
-    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.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"]);
-    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onSuccess }) => {
-      setTimeout(() => onSuccess(), 1000);
-    });
-
-    const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
-    );
-
-    let checkoutFlow: () => void, status, paymentFlowComponent;
-
-    await waitFor(() => {
-      [checkoutFlow, , paymentFlowComponent] = result.current;
-
-      expect(paymentFlowComponent).not.toBeNull();
-    });
-
-    render(<>{paymentFlowComponent}</>);
-
-    await act(async () => {
-      await checkoutFlow();
-    });
-
-    await waitFor(() => {
-      [, status] = result.current;
-
-      expect(status).toBe("error");
-      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
-      expect(mockStartLegacyBoxCheckout).not.toHaveBeenCalled();
-      expect(mockSubmitCheckout).not.toHaveBeenCalled();
-      expect(mockCreateToastNotification).not.toHaveBeenCalled();
-      expect(mockOnSuccess).not.toHaveBeenCalled();
-    });
-  });
-
-  test("shows a notification and returns error as the status when payment fails", async () => {
-    const mockBlockCheckoutBooking = jest.fn();
-    const mockSubmitCheckout = jest.fn();
-    const mockCreateToastNotification = jest.fn();
-    const mockOnSuccess = jest.fn();
-
-    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
-    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
-    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.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"]);
-    (usePaymentInstrumentEvents as jest.Mock).mockImplementation(({ onError }) => {
-      setTimeout(() => onError({ metadata: null }), 1000);
-    });
-
-    const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
-    );
-
-    let checkoutFlow: () => void, status, paymentFlowComponent;
-
-    await waitFor(() => {
-      [checkoutFlow, , paymentFlowComponent] = result.current;
-
-      expect(paymentFlowComponent).not.toBeNull();
-    });
-
-    render(<>{paymentFlowComponent}</>);
-
-    await act(async () => {
-      await checkoutFlow();
-    });
-
-    await waitFor(() => {
-      [, status] = result.current;
-
-      expect(status).toBe("error");
-      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
-      expect(mockStartLegacyBoxCheckout).toHaveBeenCalled();
-      expect(mockSubmitCheckout).not.toHaveBeenCalled();
-      expect(mockCreateToastNotification).toHaveBeenCalledWith({
-        bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-        level: NotificationLevel.ERROR,
-      });
-      expect(mockOnSuccess).not.toHaveBeenCalled();
-    });
-  });
-});