@lookiero/checkout 10.1.0 → 11.1.0

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

@@ -7,13 +7,12 @@ import { Locale } from "@lookiero/sty-psp-locale";
 import { Layout } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../../projection/customer/customer";
-import { Order } from "../../../projection/order/order";
-import { Subscription } from "../../../projection/subscription/subscription";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 import { StaticInfoProvider } from "../hooks/useStaticInfo";
 import { App } from "../views/App";
 import { Checkout } from "../views/checkout/Checkout";
-import { CheckoutPaymentModal } from "../views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal";
 import { Feedback } from "../views/feedback/Feedback";
 import { Item } from "../views/item/Item";
 import { Return } from "../views/return/Return";
@@ -25,8 +24,8 @@ import { Routes } from "./routes";
 interface RoutingProps {
   readonly basePath?: string;
   readonly customer: Customer;
-  readonly order: Order | undefined;
-  readonly subscription: Subscription | undefined;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
   readonly locale: Locale;
   readonly I18n: I18n;
   readonly kameleoon: KameleoonEnvironment;
@@ -34,7 +33,7 @@ interface RoutingProps {
   readonly tradename: Tradename;
   readonly getAuthToken: () => Promise<string>;
   readonly onNotAccessible: () => void;
-  readonly onCheckoutSubmitted?: () => void;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly onI18nError?: (err: Error) => void;
   readonly useRedirect: () => Record<string, string>;
   readonly useRoutes: typeof reactRouterUseRoutes;
@@ -53,7 +52,7 @@ const Routing: FC<RoutingProps> = ({
   getAuthToken,
   onI18nError,
   onNotAccessible,
-  onCheckoutSubmitted,
+  onCheckoutFlowSuccess,
   useRedirect,
   useRoutes = reactRouterUseRoutes,
 }) => {
@@ -114,26 +113,16 @@ const Routing: FC<RoutingProps> = ({
           path: Routes.CHECKOUT,
           element: (
             <Suspense fallback={<Spinner />}>
-              <Checkout layout={layout} useRedirect={useRedirect}>
-                <Outlet />
-              </Checkout>
+              <Checkout
+                getAuthToken={getAuthToken}
+                layout={layout}
+                order={order}
+                subscription={subscription}
+                useRedirect={useRedirect}
+                onCheckoutFlowSuccess={onCheckoutFlowSuccess}
+              />
             </Suspense>
           ),
-          children: [
-            {
-              path: Routes.CHECKOUT_PAYMENT,
-              element: (
-                <CheckoutPaymentModal
-                  coupon={order?.coupon || null}
-                  getAuthToken={getAuthToken}
-                  isFirstOrder={order?.isFirstOrder as boolean}
-                  orderNumber={order?.orderNumber as number}
-                  subscription={subscription as Subscription}
-                  onCheckoutSubmitted={onCheckoutSubmitted}
-                />
-              ),
-            },
-          ],
         },
         {
           path: Routes.FEEDBACK,

package/src/infrastructure/ui/routing/routes.ts

@@ -5,7 +5,6 @@ export enum Routes {
   SUMMARY = "summary",
   SUMMARY_TABS = "tabs/:tab",
   CHECKOUT = "checkout",
-  CHECKOUT_PAYMENT = "payment",
   FEEDBACK = "feedback",
   RETURN = "return/:id",
 }

package/src/infrastructure/ui/views/App.tsx

@@ -1,8 +1,7 @@
-import { PortalProvider } from "@gorhom/portal";
+import { PortalHost } from "@gorhom/portal";
 import React, { FC } from "react";
 import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
 import { Notifications } from "@lookiero/sty-psp-notifications";
 import { theme } from "@lookiero/sty-psp-ui";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
@@ -16,17 +15,10 @@ interface AppProps {
 
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
-    <PortalProvider rootHostName="Checkout">
-      <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-      <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
-      {/*
-        We are using the Aurora's PortalProvider at this level for notifications to work properly.
-
-        PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
-        notifications would be displayed in a layer below Portal's one (not visible).
-      */}
-      <AuroraPortalProvider>{children}</AuroraPortalProvider>
-    </PortalProvider>
+    <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
+    <Notifications contextId={MESSAGING_CONTEXT_ID} domain={DOMAIN} portalHostName="Checkout" />
+    <PortalHost name="Checkout" />
+    {children}
   </SafeAreaProvider>
 );
 

package/src/infrastructure/ui/views/checkout/Checkout.style.ts

@@ -30,6 +30,9 @@ const style = StyleSheet.create({
   paymentSelector: {
     marginTop: space6,
   },
+  paymentSelectorNL: {
+    marginBottom: space6,
+  },
   princingWrapper: {
     padding: space6,
   },

package/src/infrastructure/ui/views/checkout/Checkout.test.tsx

@@ -1,10 +1,13 @@
 import { fireEvent } from "@testing-library/react-native";
-import React from "react";
+import React, { ReactNode } from "react";
+import { View } from "react-native";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { OrderProjection } from "../../../../projection/order/order";
+import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { pricing } from "../../../projection/pricing/pricing.mock";
@@ -14,7 +17,9 @@ import { Routes } from "../../routing/routes";
 import { render } from "../../test/render";
 import { Checkout } from "./Checkout";
 
+const getAuthToken = () => Promise.resolve("token");
 const customerId = "a8fff6d7-708c-41a7-b42a-58c5706d33df";
+const basePath = "/checkout";
 const country = Country.ES;
 const segment = Segment.WOMEN;
 const mockCheckout = checkout({
@@ -26,49 +31,29 @@ const mockCheckout = checkout({
     { status: CheckoutItemStatus.REPLACED },
   ],
 });
+const order: OrderProjection = {
+  orderNumber: 12345,
+  isFirstOrder: false,
+  coupon: null,
+};
+const subscription: SubscriptionProjection = "o";
 const mockUseRedirect = jest.fn(() => ({ returnUrl: "https://web2.dev.aws.lookiero.es/user/" }));
 
-jest.mock("../../hooks/useStaticInfo", () => ({
-  useStaticInfo: () => ({
-    customer: { customerId, country, segment },
-    basePath: "",
-  }),
+const mockOnSuccess = jest.fn();
+const mockCheckoutFlow = jest.fn();
+const paymentFlowTestId = "payment-flow";
+const mockPaymentFlowComponent: ReactNode = <View testID={paymentFlowTestId}>PaymentFlow</View>;
+jest.mock("../../hooks/useCheckoutFlow", () => ({
+  useCheckoutFlow: () => [mockCheckoutFlow, QueryStatus.SUCCESS, mockPaymentFlowComponent],
 }));
 
+jest.mock("../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ customer: { customerId, country, segment }, basePath }),
+}));
+// eslint-disable-next-line @typescript-eslint/naming-convention
+jest.mock("./components/paymentInstrument/PaymentInstrument", () => ({ PaymentInstrument: () => null }));
 jest.mock("../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId");
 jest.mock("../../../projection/pricing/react/useViewPricingByCheckoutId");
-jest.mock("../../hooks/usePaymentInstrumentEvents");
-
-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 mockTrackPressContinue = jest.fn();
 jest.mock("../../../tracking/useTrackPressContinue", () => ({
@@ -87,13 +72,25 @@ jest.mock("react-router-native", () => ({
   useNavigate: () => mockUseNavigate,
 }));
 
+beforeEach(() => {
+  mockCheckoutFlow.mockClear();
+  mockTrackPressContinue.mockClear();
+  mockTrackPressBack.mockClear();
+});
+
 describe("Checkout view", () => {
   it("renders correctly", async () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
-
     const { findByText, getAllByTestId, getByText, getByTestId } = render(
-      <Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />,
+      <Checkout
+        getAuthToken={getAuthToken}
+        layout={DummyLayout}
+        order={order}
+        subscription={subscription}
+        useRedirect={mockUseRedirect}
+        onCheckoutFlowSuccess={mockOnSuccess}
+      />,
     );
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
@@ -114,15 +111,17 @@ describe("Checkout view", () => {
     expect(getByText(I18nMessages.SUMMARY_FEE)).toBeTruthy();
     expect(getByText("-€10.00")).toBeTruthy();
 
+    expect(getByTestId(paymentFlowTestId)).toBeTruthy();
+
     expect(getByText(I18nMessages.CHECKOUT_PAY_BUTTON)).toBeTruthy();
     fireEvent.press(getByText(I18nMessages.CHECKOUT_PAY_BUTTON));
     expect(mockTrackPressContinue).toHaveBeenCalled();
-    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
+    expect(mockCheckoutFlow).toHaveBeenCalled();
 
     expect(getByTestId("checkout-header")).toBeTruthy();
     fireEvent.press(getByTestId("arrow-left-button-icon"));
     expect(mockTrackPressBack).toHaveBeenCalled();
-    expect(mockUseNavigate).toHaveBeenCalledWith(`/${Routes.SUMMARY}`);
+    expect(mockUseNavigate).toHaveBeenCalledWith(`${basePath}/${Routes.SUMMARY}`);
   });
 
   it("does not render a delivery banner", async () => {
@@ -138,7 +137,16 @@ describe("Checkout view", () => {
     (useViewFirstAvailableCheckoutByCustomerId as jest.Mock).mockReturnValue([mockCheckout, QueryStatus.SUCCESS]);
     (useViewPricingByCheckoutId as jest.Mock).mockReturnValue([pricing(), QueryStatus.SUCCESS]);
 
-    const { findByText, queryByText } = render(<Checkout layout={DummyLayout} useRedirect={mockUseRedirect} />);
+    const { findByText, queryByText } = render(
+      <Checkout
+        getAuthToken={getAuthToken}
+        layout={DummyLayout}
+        order={order}
+        subscription={subscription}
+        useRedirect={mockUseRedirect}
+        onCheckoutFlowSuccess={mockOnSuccess}
+      />,
+    );
 
     expect(await findByText(I18nMessages.CHECKOUT_TITLE)).toBeTruthy();
 

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -1,11 +1,14 @@
-import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
+import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { Country } from "@lookiero/sty-psp-locale";
 import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
+import { OrderProjection } from "../../../../projection/order/order";
+import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
@@ -14,6 +17,7 @@ import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
+import { useCheckoutFlow } from "../../hooks/useCheckoutFlow";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
@@ -24,12 +28,22 @@ import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 
 interface CheckoutProps {
-  readonly children?: ReactNode;
   readonly layout: UiLayout;
+  readonly order: OrderProjection;
+  readonly subscription: SubscriptionProjection;
+  readonly getAuthToken: () => Promise<string>;
+  readonly onCheckoutFlowSuccess: () => void;
   readonly useRedirect: () => Record<string, string>;
 }
 
-const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect }) => {
+const Checkout: FC<CheckoutProps> = ({
+  layout: Layout,
+  order,
+  subscription,
+  getAuthToken,
+  useRedirect,
+  onCheckoutFlowSuccess,
+}) => {
   const {
     customer: { customerId, country, segment },
     basePath,
@@ -43,6 +57,14 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
 
+  const [checkoutFlow, checkoutFlowStatus, paymentFlowComponent] = useCheckoutFlow({
+    checkout,
+    order,
+    subscription,
+    getAuthToken,
+    onSuccess: onCheckoutFlowSuccess,
+  });
+
   useTrackPageView({
     page: TrackingPage.CHECKOUT,
     country,
@@ -51,17 +73,16 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
   });
 
   const navigate = useNavigate();
-
   const trackPressContinue = useTrackPressContinue({
     page: TrackingPage.CHECKOUT,
     country,
     segment,
     checkoutId: checkout?.id,
   });
-  const handleOnSubmit = useCallback(() => {
+  const handleOnSubmit = useCallback(async () => {
     trackPressContinue();
-    navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
-  }, [basePath, navigate, trackPressContinue]);
+    await checkoutFlow();
+  }, [checkoutFlow, trackPressContinue]);
 
   const checkoutItemsKept = useMemo(
     () =>
@@ -115,6 +136,12 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
         >
           <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
             <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+              {country === Country.NL && (
+                <View style={style.paymentSelectorNL}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
+
               <Text level={3} style={style.title} heading>
                 {titleText}
               </Text>
@@ -138,9 +165,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 </View>
               ))}
 
-              <View style={style.paymentSelector}>
-                <PaymentInstrument useRedirect={useRedirect} />
-              </View>
+              {country !== Country.NL && (
+                <View style={style.paymentSelector}>
+                  <PaymentInstrument useRedirect={useRedirect} />
+                </View>
+              )}
             </View>
           </Box>
 
@@ -150,7 +179,11 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
                 {screen.L ? (
-                  <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
+                  <Button
+                    busy={checkoutFlowStatus === "loading"}
+                    testID="confirm-checkout-button"
+                    onPress={handleOnSubmit}
+                  >
                     {submitButtonText}
                   </Button>
                 ) : null}
@@ -163,14 +196,19 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
       {pricing && !screen.L ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
-            <Button testID="confirm-checkout-button" small onPress={handleOnSubmit}>
+            <Button
+              busy={checkoutFlowStatus === "loading"}
+              testID="confirm-checkout-button"
+              small
+              onPress={handleOnSubmit}
+            >
               {submitButtonText}
             </Button>
           </Body>
         </Sticky>
       ) : null}
 
-      {children}
+      {paymentFlowComponent}
     </Layout>
   );
 };

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/infrastructure/ui/views/item/components/itemActions/__snapshots__/ItemActions.test.tsx.snap

@@ -793,6 +793,14 @@ exports[`ItemActions component matches the snapshot 1`] = `
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                       "height": 24,
+                      "letterSpacing": -0.2,
+                      "lineHeight": 24,
+                      "minHeight": 24,
+                      "minWidth": 24,
+                      "paddingBottom": 0,
+                      "paddingLeft": 0,
+                      "paddingRight": 0,
+                      "paddingTop": 0,
                       "width": 24,
                     },
                   ]

package/src/infrastructure/ui/views/item/components/selectModal/__snapshots__/SelecModal.test.tsx.snap

@@ -219,6 +219,14 @@ exports[`SelectField component matches the snapshot 1`] = `
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                     "height": 24,
+                    "letterSpacing": -0.2,
+                    "lineHeight": 24,
+                    "minHeight": 24,
+                    "minWidth": 24,
+                    "paddingBottom": 0,
+                    "paddingLeft": 0,
+                    "paddingRight": 0,
+                    "paddingTop": 0,
                     "width": 24,
                   },
                 ]

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/__snapshots__/SizeWithoutStockModal.test.tsx.snap

@@ -219,6 +219,14 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                     "height": 24,
+                    "letterSpacing": -0.2,
+                    "lineHeight": 24,
+                    "minHeight": 24,
+                    "minWidth": 24,
+                    "paddingBottom": 0,
+                    "paddingLeft": 0,
+                    "paddingRight": 0,
+                    "paddingTop": 0,
                     "width": 24,
                   },
                 ]

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/src/projection/order/order.ts

@@ -4,4 +4,4 @@ interface Order {
   readonly coupon: string | null;
 }
 
-export type { Order };
+export type { Order as OrderProjection };

package/src/projection/subscription/subscription.ts

@@ -1,3 +1,3 @@
 type Subscription = "o" | "m" | "b" | "q";
 
-export type { Subscription };
+export type { Subscription as SubscriptionProjection };

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

@@ -1,27 +0,0 @@
-import { RefObject } from "react";
-import { PaymentFlowRef } from "@lookiero/payments-front";
-import { Logger } from "@lookiero/sty-psp-logging";
-import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
-type Status = "idle" | "loading" | "success" | "error";
-interface SubmitCheckoutFunctionArgs {
-    readonly paymentFlowPayload: PaymentFlowPayloadProjection;
-    readonly sizeChangeEnabled: boolean;
-}
-interface SubmitCheckoutFunction {
-    (args: SubmitCheckoutFunctionArgs): Promise<void>;
-}
-type UseSubmitCheckoutResult = [submitCheckout: SubmitCheckoutFunction, status: Status];
-interface UseSubmitCheckoutFunctionArgs {
-    readonly checkoutId: string;
-    readonly checkoutBookingId: string;
-    readonly paymentFlowRef: RefObject<PaymentFlowRef>;
-    readonly onError: () => void;
-    readonly onSuccess?: () => void;
-    readonly logger: Logger;
-}
-interface UseSubmitCheckoutFunction {
-    (args: UseSubmitCheckoutFunctionArgs): UseSubmitCheckoutResult;
-}
-declare const useSubmitCheckout: UseSubmitCheckoutFunction;
-export type { Status, SubmitCheckoutFunction };
-export { useSubmitCheckout };

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

@@ -1,97 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-import { CommandStatus } from "@lookiero/messaging-react";
-import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
-import { viewCheckoutBookingById, } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
-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";
-var ChargeStatus;
-(function (ChargeStatus) {
-    ChargeStatus["EXECUTED"] = "EXECUTED";
-    ChargeStatus["REQUIRES_ACTION"] = "REQUIRES_ACTION";
-    ChargeStatus["REQUIRED_ACTION_CANCELLED"] = "REQUIRED_ACTION_CANCELLED";
-    ChargeStatus["REJECTED"] = "REJECTED";
-    ChargeStatus["CANCELLED"] = "CANCELLED";
-    ChargeStatus["TO_CONFIRM"] = "TO_CONFIRM";
-    ChargeStatus["ERROR"] = "ERROR";
-    ChargeStatus["UNKNOWN"] = "UNKNOWN";
-})(ChargeStatus || (ChargeStatus = {}));
-const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onError, 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("idle");
-    const submitCheckout = useCallback(async ({ paymentFlowPayload, sizeChangeEnabled }) => {
-        try {
-            sizeChangeEnabled && (await blockCheckoutBooking());
-        }
-        catch (error) {
-            return;
-        }
-        const checkoutBooking = await queryBus(viewCheckoutBookingById({ checkoutBookingId }));
-        if (checkoutBooking?.isExpired) {
-            setCheckoutBookingExpired(true);
-            return;
-        }
-        paymentFlowRef.current?.startLegacyBoxCheckout(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        paymentFlowPayload, async ({ status, toaster, final }) => {
-            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");
-                }
-            }
-        });
-    }, [
-        queryBus,
-        checkoutBookingId,
-        paymentFlowRef,
-        blockCheckoutBooking,
-        submitCheckoutCommand,
-        onSuccess,
-        createNotification,
-    ]);
-    const status = useMemo(() => {
-        if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
-            startLegacyBoxCheckoutStatus === "loading" ||
-            submitCheckoutCommandStatus === CommandStatus.LOADING) {
-            return "loading";
-        }
-        if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
-            startLegacyBoxCheckoutStatus === "success" &&
-            submitCheckoutCommandStatus === CommandStatus.SUCCESS) {
-            return "success";
-        }
-        if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
-            startLegacyBoxCheckoutStatus === "error" ||
-            submitCheckoutCommandStatus === CommandStatus.ERROR ||
-            checkoutBookingExpired) {
-            onError();
-            return "error";
-        }
-        return "idle";
-    }, [
-        blockCheckoutBookingStatus,
-        startLegacyBoxCheckoutStatus,
-        submitCheckoutCommandStatus,
-        checkoutBookingExpired,
-        onError,
-    ]);
-    return [submitCheckout, status];
-};
-export { useSubmitCheckout };