@lookiero/checkout 10.1.0 → 11.1.0

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

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

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

@@ -0,0 +1,203 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { PaymentFlow, PaymentFlowRef, PaymentPayload, Section } from "@lookiero/payments-front";
+import { LegacyBoxCheckoutStrategyPayload } from "@lookiero/payments-front/build/components/PaymentFlow/internals/strategies/LegacyBoxCheckoutStrategy";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { CheckoutProjection } from "../../../projection/checkout/checkout";
+import {
+  ViewCheckoutBookingById,
+  viewCheckoutBookingById,
+  ViewCheckoutBookingByIdResult,
+} from "../../../projection/checkoutBooking/viewCheckoutBookingById";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+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";
+
+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;
+}
+
+const useCheckoutFlow: UseCheckoutFlowFunction = ({
+  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<PaymentFlowRef>(null);
+  const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+    checkoutId: checkoutProjection?.id as string,
+  });
+  const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id as string });
+  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<CheckoutFlowStatus>("idle");
+  const [authToken, setAuthToken] = useState<string>();
+  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: CheckoutFlowFunction = useCallback(async () => {
+    try {
+      sizeChangeEnabled && (await blockCheckoutBooking());
+    } catch (error) {
+      return;
+    }
+
+    if (checkoutProjection?.checkoutBookingId) {
+      const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
+        viewCheckoutBookingById({ checkoutBookingId: checkoutProjection?.checkoutBookingId }),
+      );
+
+      if (checkoutBooking?.isExpired) {
+        setCheckoutBookingExpired(true);
+        return;
+      }
+    }
+
+    setStartLegacyBoxCheckoutStatus("loading");
+
+    paymentFlowRef.current?.startLegacyBoxCheckout({
+      ...paymentFlowPayload,
+      userInformation: { email, name },
+      returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+    } as unknown as LegacyBoxCheckoutStrategyPayload);
+  }, [
+    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: PaymentPayload) => {
+      setStartLegacyBoxCheckoutStatus("error");
+
+      createNotification({
+        bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+        level: NotificationLevel.ERROR,
+      });
+    },
+    [createNotification],
+  );
+  usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
+
+  const checkoutFlowStatus: 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 ? <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} /> : null),
+    [authToken],
+  );
+
+  return useMemo(
+    () => [checkoutFlow, checkoutFlowStatus, paymentFlow],
+    [checkoutFlow, paymentFlow, checkoutFlowStatus],
+  );
+};
+
+export type { CheckoutFlowStatus };
+export { useCheckoutFlow };

package/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.ts

@@ -1,75 +1,33 @@
-import { useCallback, useEffect } from "react";
-import { useEvent } from "@lookiero/event";
-import { Logger } from "@lookiero/sty-psp-logging";
-import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
-import { I18nMessages } from "../i18n/i18n";
-
-const PAYMENT_ERROR = "ERROR";
-const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
-
-interface Message {
-  readonly id: string;
-}
-interface OnSuccessFunctionArgs {
-  readonly message: Message;
-}
-interface OnSuccessFunction {
-  (args: OnSuccessFunctionArgs): void;
-}
-
-interface Toaster {
-  readonly id: string;
-}
-interface Error {
-  readonly toaster?: Toaster;
-}
-interface OnErrorFunctionArgs {
-  readonly error: Error;
-}
-interface OnErrorFunction {
-  (args: OnErrorFunctionArgs): void;
-}
+import { useEffect } from "react";
+import { PaymentPayload, Section, usePaymentStatusManager } from "@lookiero/payments-front";
 
 interface UsePaymentInstrumentEventsFunctionArgs {
-  readonly logger: Logger;
+  readonly onSuccess: (payload: PaymentPayload) => void;
+  readonly onError: (payload: PaymentPayload) => void;
 }
 
 interface UsePaymentInstrumentEventsFunction {
   (args: UsePaymentInstrumentEventsFunctionArgs): void;
 }
 
-const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ logger }) => {
-  const { subscribe, unsubscribe } = useEvent();
+const usePaymentInstrumentEvents: UsePaymentInstrumentEventsFunction = ({ onSuccess, onError }) => {
+  const refreshStatus = usePaymentStatusManager(Section.BOX_CHECKOUT);
 
-  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+  useEffect(() => {
+    const { isLoading, consumePayload } = refreshStatus;
 
-  const onSuccess: OnSuccessFunction = useCallback(
-    ({ message }) => createNotification({ bodyI18nKey: message.id, level: NotificationLevel.SUCCESS }),
-    [createNotification],
-  );
+    if (isLoading) {
+      return;
+    }
 
-  const onError: OnErrorFunction = useCallback(
-    ({ error }) => {
-      if (error.toaster) {
-        createNotification({
-          bodyI18nKey: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-          level: NotificationLevel.ERROR,
-        });
+    consumePayload((payload) => {
+      if (payload.success) {
+        onSuccess(payload);
+      } else {
+        onError(payload);
       }
-    },
-    [createNotification],
-  );
-
-  useEffect(() => {
-    subscribe({ event: PAYMENT_ERROR }, onError);
-    subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
-
-    return () => {
-      unsubscribe({ event: PAYMENT_ERROR }, onError);
-      unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
-    };
-  }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
+    });
+  }, [onError, onSuccess, refreshStatus]);
 };
 
 export { usePaymentInstrumentEvents };

package/src/infrastructure/ui/i18n/i18n.ts

@@ -50,6 +50,7 @@ enum I18nMessages {
   CHECKOUT_TITLE = "checkout.title",
   CHECKOUT_PAY_BUTTON = "checkout.pay_button",
   CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
+  CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
   CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
   CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
   CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",

package/src/infrastructure/ui/routing/CheckoutMiddleware.test.tsx

@@ -158,17 +158,6 @@ describe("CheckoutMiddleware component", () => {
     expect(onNotAccessible).toHaveBeenCalled();
   });
 
-  it("payment route should not be directly accessible", async () => {
-    const checkoutMock = checkout({ items: [{ status: CheckoutItemStatus.INITIAL }] });
-    (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([checkoutMock, QueryStatus.SUCCESS]);
-    (useStartCheckout as jest.Mock).mockReturnValue([mockStartCheckout, CommandStatus.SUCCESS]);
-
-    const onNotAccessible = jest.fn();
-    renderCheckoutMiddleware({ path: `${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, onNotAccessible });
-
-    expect(onNotAccessible).toHaveBeenCalled();
-  });
-
   it("should redirect to 'feedback' if checkout's status is SUBMITTED", async () => {
     const checkoutMock = checkout({
       status: CheckoutStatus.SUBMITTED,

package/src/infrastructure/ui/routing/CheckoutMiddleware.tsx

@@ -48,12 +48,6 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
   const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
   const feedbackRouteMatchRef = useRef(feedbackRouteMatch);
   feedbackRouteMatchRef.current = feedbackRouteMatch;
-  const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
-  const checkoutPaymentRouteMatchRef = useRef(checkoutPaymentRouteMatch);
-  checkoutPaymentRouteMatchRef.current = checkoutPaymentRouteMatch;
-
-  const checkoutShown = useRef(false);
-  checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
 
   const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const checkoutItemsRef = useRef<CheckoutItemProjection[]>();
@@ -99,8 +93,7 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
           summaryRouteMatchRef.current ||
           summaryTabsRouteMatchRef.current ||
           itemDetailRouteMatchRef.current ||
-          checkoutRouteMatchRef.current ||
-          checkoutPaymentRouteMatchRef.current
+          checkoutRouteMatchRef.current
         )
       ) {
         navigateRef.current(`${basePath}/${Routes.SUMMARY}`, { replace: true });
@@ -127,13 +120,6 @@ const CheckoutMiddleware: FC<CheckoutMiddlewareProps> = ({
     return null;
   }
 
-  /* Prevent direct payment access */
-  if (checkoutPaymentRouteMatch && !checkoutShown.current) {
-    onNotAccessible();
-
-    return null;
-  }
-
   return children;
 };