@lookiero/checkout 9.8.4 → 9.9.0-beta.0

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/hooks/useSubmitCheckout.test.ts

@@ -6,11 +6,9 @@ import { PaymentFlowRef } from "@lookiero/payments-front";
 import { ChargeStatus } from "@lookiero/payments-front/build/infrastructure/CheckoutAPI";
 import { Logger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { CheckoutBookingProjection } from "../../../projection/checkoutBooking/checkoutBooking";
 import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
 import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
 import { paymentFlowPayload as mockPaymentFlowPayload } from "../../projection/payment/paymentFlowPayload.mock";
-import { useQueryBus } from "./useQueryBus";
 import { useSubmitCheckout as sut } from "./useSubmitCheckout";
 
 const checkoutId = "9c450400-0cd7-44a4-b0e3-e0002a9bf8df";
@@ -20,7 +18,6 @@ const errorChargeStatuses = Object.values(ChargeStatus).filter((status) => statu
 const logger = mock<Logger>();
 
 jest.mock("@lookiero/sty-psp-notifications");
-jest.mock("./useQueryBus");
 jest.mock("../../domain/checkout/react/useSubmitCheckout");
 jest.mock("../../domain/checkoutBooking/react/useBlockCheckoutBooking");
 
@@ -41,7 +38,6 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
-    (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]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
@@ -90,7 +86,6 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
-    (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]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
@@ -131,7 +126,6 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
-    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
     (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.ERROR]);
     (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.IDLE]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.IDLE]);
@@ -172,7 +166,6 @@ describe("useSubmitCheckout custom hook", () => {
         },
       };
 
-      (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]);
       (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.IDLE]);
@@ -219,7 +212,6 @@ describe("useSubmitCheckout custom hook", () => {
       },
     };
 
-    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: false }) as CheckoutBookingProjection);
     (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
     (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.ERROR]);
     (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
@@ -244,54 +236,4 @@ describe("useSubmitCheckout custom hook", () => {
       expect(mockOnError).toHaveBeenCalled();
     });
   });
-
-  test("returns submitCheckout error as the status right after calling 'submitCheckout' if CheckoutBooking isExpired", async () => {
-    const mockBlockCheckoutBooking = jest.fn();
-    const mockSubmitCheckout = jest.fn();
-    const mockCreateToastNotification = jest.fn();
-    const mockOnError = jest.fn();
-    const mockOnSuccess = jest.fn();
-    const mockPaymentFlowRef: RefObject<PaymentFlowRef> = {
-      current: {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        startLegacyBoxCheckout: jest.fn().mockImplementation((_payload, callback) => {
-          callback({ status: ChargeStatus.EXECUTED, final: true });
-        }),
-        startCheckout: jest.fn(),
-      },
-    };
-
-    (useQueryBus as jest.Mock).mockReturnValue(() => ({ isExpired: true }) as CheckoutBookingProjection);
-    (useBlockCheckoutBooking as jest.Mock).mockReturnValue([mockBlockCheckoutBooking, CommandStatus.SUCCESS]);
-    (useCreateToastNotification as jest.Mock).mockReturnValue([mockCreateToastNotification, CommandStatus.SUCCESS]);
-    (useSubmitCheckout as jest.Mock).mockReturnValue([mockSubmitCheckout, CommandStatus.SUCCESS]);
-
-    const { result } = renderHook(() =>
-      sut({
-        checkoutId,
-        checkoutBookingId,
-        paymentFlowRef: mockPaymentFlowRef,
-        onError: mockOnError,
-        onSuccess: mockOnSuccess,
-        logger,
-      }),
-    );
-
-    await act(async () => {
-      const [submitCheckout] = result.current;
-      await submitCheckout({ paymentFlowPayload: mockPaymentFlowPayload, sizeChangeEnabled: true });
-    });
-
-    await waitFor(() => {
-      const [, status] = result.current;
-
-      expect(mockBlockCheckoutBooking).toHaveBeenCalled();
-      expect(mockCreateToastNotification).not.toHaveBeenCalled();
-      expect(mockSubmitCheckout).not.toHaveBeenCalled();
-
-      expect(status).toBe("error");
-      expect(mockOnSuccess).not.toHaveBeenCalled();
-      expect(mockOnError).toHaveBeenCalled();
-    });
-  });
 });

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

@@ -1,39 +1,14 @@
 import { RefObject, useCallback, useMemo, useState } from "react";
 import { CommandStatus } from "@lookiero/messaging-react";
-import { PaymentFlowRef } from "@lookiero/payments-front";
+import { PaymentFlowRef, PaymentPayload } from "@lookiero/payments-front";
 import { Logger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import {
-  ViewCheckoutBookingById,
-  viewCheckoutBookingById,
-  ViewCheckoutBookingByIdResult,
-} from "../../../projection/checkoutBooking/viewCheckoutBookingById";
 import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
 import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
 import { I18nMessages } from "../i18n/i18n";
-import { useQueryBus } from "./useQueryBus";
-
-enum ChargeStatus {
-  EXECUTED = "EXECUTED",
-  REQUIRES_ACTION = "REQUIRES_ACTION",
-  REQUIRED_ACTION_CANCELLED = "REQUIRED_ACTION_CANCELLED",
-  REJECTED = "REJECTED",
-  CANCELLED = "CANCELLED",
-  TO_CONFIRM = "TO_CONFIRM",
-  ERROR = "ERROR",
-  UNKNOWN = "UNKNOWN",
-}
-interface LegacyBoxCheckout {
-  readonly status: ChargeStatus;
-  readonly toaster: {
-    id: string;
-  } | null;
-  readonly final: boolean;
-  readonly id?: string;
-  readonly translation?: string;
-}
+import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
 
 type Status = "idle" | "loading" | "success" | "error";
 
@@ -53,7 +28,7 @@ interface UseSubmitCheckoutFunctionArgs {
   readonly checkoutBookingId: string;
   readonly paymentFlowRef: RefObject<PaymentFlowRef>;
   readonly onError: () => void;
-  readonly onSuccess?: () => void;
+  readonly onSuccess: () => void;
   readonly logger: Logger;
 }
 
@@ -69,11 +44,9 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
   onSuccess,
   logger,
 }) => {
-  const queryBus = useQueryBus();
   const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
   const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
   const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
-  const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
 
   const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState<Status>("idle");
 
@@ -85,48 +58,37 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
         return;
       }
 
-      const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
-        viewCheckoutBookingById({ checkoutBookingId }),
-      );
+      setStartLegacyBoxCheckoutStatus("loading");
 
-      if (checkoutBooking?.isExpired) {
-        setCheckoutBookingExpired(true);
-        return;
-      }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      paymentFlowRef.current?.startLegacyBoxCheckout(paymentFlowPayload);
+    },
+    [paymentFlowRef, blockCheckoutBooking],
+  );
+
+  const onPaymentSuccess = useCallback(async () => {
+    setStartLegacyBoxCheckoutStatus("success");
+
+    await submitCheckoutCommand();
+
+    createNotification({
+      bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+      level: NotificationLevel.SUCCESS,
+    });
+  }, [createNotification, submitCheckoutCommand]);
+  const onPaymentError = useCallback(
+    (payload: PaymentPayload) => {
+      setStartLegacyBoxCheckoutStatus("error");
 
-      paymentFlowRef.current?.startLegacyBoxCheckout(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        paymentFlowPayload,
-        async ({ status, toaster, final }: LegacyBoxCheckout) => {
-          setStartLegacyBoxCheckoutStatus("loading");
-
-          if (final) {
-            if (status === ChargeStatus.EXECUTED) {
-              setStartLegacyBoxCheckoutStatus("success");
-              await submitCheckoutCommand();
-              onSuccess?.();
-            } else {
-              createNotification({
-                level: NotificationLevel.ERROR,
-                bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-              });
-              setStartLegacyBoxCheckoutStatus("error");
-            }
-          }
-        },
-      );
+      createNotification({
+        bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+        level: NotificationLevel.ERROR,
+      });
     },
-    [
-      queryBus,
-      checkoutBookingId,
-      paymentFlowRef,
-      blockCheckoutBooking,
-      submitCheckoutCommand,
-      onSuccess,
-      createNotification,
-    ],
+    [createNotification],
   );
+  usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
 
   const status: Status = useMemo(() => {
     if (
@@ -141,26 +103,20 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
       startLegacyBoxCheckoutStatus === "success" &&
       submitCheckoutCommandStatus === CommandStatus.SUCCESS
     ) {
+      onSuccess();
       return "success";
     }
     if (
       blockCheckoutBookingStatus === CommandStatus.ERROR ||
       startLegacyBoxCheckoutStatus === "error" ||
-      submitCheckoutCommandStatus === CommandStatus.ERROR ||
-      checkoutBookingExpired
+      submitCheckoutCommandStatus === CommandStatus.ERROR
     ) {
       onError();
       return "error";
     }
 
     return "idle";
-  }, [
-    blockCheckoutBookingStatus,
-    startLegacyBoxCheckoutStatus,
-    submitCheckoutCommandStatus,
-    checkoutBookingExpired,
-    onError,
-  ]);
+  }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, onSuccess, onError]);
 
   return [submitCheckout, status];
 };

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

@@ -48,6 +48,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/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.tsx

@@ -1,7 +1,7 @@
 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 { PaymentFlow, PaymentFlowRef, Section } 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";
@@ -119,7 +119,7 @@ const CheckoutPaymentModal: FC<CheckoutPaymentModalProps> = ({
 
   if (!dependenciesLoaded) return null;
 
-  return <PaymentFlow ref={paymentFlowRef} token={authToken} />;
+  return <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} />;
 };
 
 export { CheckoutPaymentModal };

package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx

@@ -1,24 +1,24 @@
-import React, { FC, useRef } from "react";
+import React, { FC } from "react";
 import { PaymentInstrumentSelect, Section } from "@lookiero/payments-front";
-import { useLogger } from "@lookiero/sty-psp-logging";
-import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 
 interface PaymentInstrumentProps {
   readonly useRedirect: () => Record<string, string>;
 }
 const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
-  const paymentInstrumentSelectRef = useRef(null);
   const { returnUrl } = useRedirect();
-  const logger = useLogger();
-
-  usePaymentInstrumentEvents({ logger });
+  const { customer } = useStaticInfo();
 
   return (
     <PaymentInstrumentSelect
-      ref={paymentInstrumentSelectRef}
       beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
       hasError={false}
       section={Section.BOX_CHECKOUT}
+      userInformation={{
+        email: customer.email,
+        name: customer.name,
+      }}
+      showSingleUsePaymentMethods
     />
   );
 };

package/src/projection/customer/customer.ts

@@ -5,6 +5,8 @@ interface Customer {
   readonly customerId: string;
   readonly country: Country;
   readonly segment: Segment;
+  readonly name: string;
+  readonly email: string;
 }
 
 export type { Customer };

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

@@ -1,9 +0,0 @@
-import { FC, ReactNode } from "react";
-import { QueryBus } from "@lookiero/messaging";
-interface QueryBusProviderProps {
-    readonly children: ReactNode;
-    readonly queryBus: QueryBus;
-}
-declare const QueryBusProvider: FC<QueryBusProviderProps>;
-declare const useQueryBus: () => QueryBus;
-export { useQueryBus, QueryBusProvider };

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

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

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

@@ -1,23 +0,0 @@
-import { renderHook, waitFor } from "@testing-library/react-native";
-import { mockFn } from "jest-mock-extended";
-import React, { FC } from "react";
-import { QueryBus } from "@lookiero/messaging";
-import { QueryBusProvider, useQueryBus as sut } from "./useQueryBus";
-
-const mockQueryBus = mockFn<QueryBus>();
-
-interface WrapperProps {
-  readonly children: JSX.Element;
-}
-
-const Wrapper: FC<WrapperProps> = ({ children }) => (
-  <QueryBusProvider queryBus={mockQueryBus}>{children}</QueryBusProvider>
-);
-
-describe("useQueryBus hook", () => {
-  it("returns the QueryBusProvider provided queryBus", async () => {
-    const { result } = renderHook(() => sut(), { wrapper: Wrapper });
-
-    await waitFor(() => expect(result.current).toEqual(mockQueryBus));
-  });
-});

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

@@ -1,27 +0,0 @@
-import React, { createContext, FC, ReactNode, useContext } from "react";
-import invariant from "tiny-invariant";
-import { QueryBus } from "@lookiero/messaging";
-
-const QueryBusContext = createContext<QueryBus>(null as unknown as QueryBus);
-
-interface QueryBusProviderProps {
-  readonly children: ReactNode;
-  readonly queryBus: QueryBus;
-}
-
-const QueryBusProvider: FC<QueryBusProviderProps> = ({ children, queryBus }) => (
-  <QueryBusContext.Provider value={queryBus}>{children}</QueryBusContext.Provider>
-);
-
-const useQueryBus = () => {
-  const queryBus = useContext(QueryBusContext);
-
-  invariant(
-    queryBus,
-    "Your are trying to use the useQueryBus hook without wrapping your app with the <QueryBusProvider>.",
-  );
-
-  return queryBus;
-};
-
-export { useQueryBus, QueryBusProvider };