@lookiero/checkout 9.8.2 → 9.8.3

package/dist/src/ExpoRoot.js

@@ -24,7 +24,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
+    customerId: "d3c2354b-9811-46d4-b2ba-5fba012ed94d",
     country: Country.ES,
     segment: Segment.WOMEN,
 };
@@ -79,7 +79,7 @@ const kameleoonConfig = {
     siteCode: "aplm4v3ckn",
     experiments: {},
 };
-const { Component: Messaging } = process.env.EXPO_PUBLIC_APP_VARIANT === "test"
+const { Component: Messaging, queryBus } = process.env.EXPO_PUBLIC_APP_VARIANT === "test"
     ? checkoutMockBootstrap()
     : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
 const I18n = i18n({
@@ -109,7 +109,7 @@ const ExpoRoot = () => {
                 isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
                 React.createElement(Router, null,
                     React.createElement(Routes, null,
-                        React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, onNotAccessible: onNotAccessible }) }),
+                        React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, order: order, queryBus: queryBus, subscription: subscription, useRedirect: useRedirect, onNotAccessible: onNotAccessible }) }),
                         React.createElement(Route, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" }))))))) : null;
 };
 export { ExpoRoot };

package/dist/src/infrastructure/ui/Root.d.ts

@@ -1,6 +1,7 @@
 import { ComponentType } from "react";
 import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { I18n } from "@lookiero/i18n-react";
+import { QueryBus } from "@lookiero/messaging";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs } from "@lookiero/sty-psp-logging";
@@ -27,6 +28,7 @@ interface RootProps {
     readonly order: Order | undefined;
     readonly subscription: Subscription | undefined;
     readonly layout: Layout;
+    readonly queryBus: QueryBus;
     readonly onNotAccessible: () => void;
     readonly onCheckoutSubmitted?: () => void;
     readonly useRedirect: () => Record<string, string>;

package/dist/src/infrastructure/ui/Root.js

@@ -4,15 +4,17 @@ import { Platform } from "react-native";
 import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
+import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
 const root = ({ Messaging, I18n, getAuthToken, development, sentry, kameleoon: kameleoonConfig }) => {
     const logger = sentryLogger(sentry);
     const kameleoon = kameleoonConfig();
     // eslint-disable-next-line react/display-name, react/prop-types
-    const Root = ({ basePath, locale = Locale.en_GB, customer, order, subscription, layout, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    const Root = ({ basePath, locale = Locale.en_GB, customer, order, subscription, layout, queryBus, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
         const handleOnI18nError = useCallback((error) => logger.captureException(error), []);
         return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
-            React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
+            React.createElement(QueryBusProvider, { queryBus: queryBus },
+                React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
     };
     const hoc = sentryLoggerHOC({ logger });
     /**

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,10 @@
+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/dist/src/infrastructure/ui/hooks/useSubmitCheckout.js

@@ -1,10 +1,12 @@
 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";
@@ -17,9 +19,11 @@ var ChargeStatus;
     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 {
@@ -28,6 +32,11 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         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
@@ -48,7 +57,15 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
                 }
             }
         });
-    }, [paymentFlowRef, blockCheckoutBooking, submitCheckoutCommand, onSuccess, createNotification]);
+    }, [
+        queryBus,
+        checkoutBookingId,
+        paymentFlowRef,
+        blockCheckoutBooking,
+        submitCheckoutCommand,
+        onSuccess,
+        createNotification,
+    ]);
     const status = useMemo(() => {
         if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
             startLegacyBoxCheckoutStatus === "loading" ||
@@ -62,12 +79,19 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         }
         if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
             startLegacyBoxCheckoutStatus === "error" ||
-            submitCheckoutCommandStatus === CommandStatus.ERROR) {
+            submitCheckoutCommandStatus === CommandStatus.ERROR ||
+            checkoutBookingExpired) {
             onError();
             return "error";
         }
         return "idle";
-    }, [blockCheckoutBookingStatus, submitCheckoutCommandStatus, onError, startLegacyBoxCheckoutStatus]);
+    }, [
+        blockCheckoutBookingStatus,
+        startLegacyBoxCheckoutStatus,
+        submitCheckoutCommandStatus,
+        checkoutBookingExpired,
+        onError,
+    ]);
     return [submitCheckout, status];
 };
 export { useSubmitCheckout };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.8.2";
+export declare const VERSION = "9.8.3";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.8.2";
+export const VERSION = "9.8.3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.8.2",
+  "version": "9.8.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/ExpoRoot.tsx

@@ -32,7 +32,7 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
+  customerId: "d3c2354b-9811-46d4-b2ba-5fba012ed94d",
   country: Country.ES,
   segment: Segment.WOMEN,
 };
@@ -99,7 +99,7 @@ const kameleoonConfig: KameleoonEnvironment = {
   experiments: {},
 };
 
-const { Component: Messaging } =
+const { Component: Messaging, queryBus } =
   process.env.EXPO_PUBLIC_APP_VARIANT === "test"
     ? checkoutMockBootstrap()
     : checkoutBootstrap({ apiUrl: () => apiUrl, getAuthToken });
@@ -144,6 +144,7 @@ const ExpoRoot: FC = () => {
                     layout={DummyLayout}
                     locale={locale}
                     order={order}
+                    queryBus={queryBus}
                     subscription={subscription}
                     useRedirect={useRedirect}
                     onNotAccessible={onNotAccessible}

package/src/infrastructure/ui/Root.tsx

@@ -3,6 +3,7 @@ import React, { ComponentType, useCallback } from "react";
 import { Platform } from "react-native";
 import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { I18n } from "@lookiero/i18n-react";
+import { QueryBus } from "@lookiero/messaging";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
@@ -11,6 +12,7 @@ import { Customer } from "../../projection/customer/customer";
 import { Order } from "../../projection/order/order";
 import { Subscription } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
+import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
 
 interface RootFunctionArgs {
@@ -33,6 +35,7 @@ interface RootProps {
   readonly order: Order | undefined;
   readonly subscription: Subscription | undefined;
   readonly layout: Layout;
+  readonly queryBus: QueryBus;
   readonly onNotAccessible: () => void;
   readonly onCheckoutSubmitted?: () => void;
   readonly useRedirect: () => Record<string, string>;
@@ -51,6 +54,7 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
     order,
     subscription,
     layout,
+    queryBus,
     onNotAccessible,
     onCheckoutSubmitted,
     useRedirect,
@@ -60,22 +64,24 @@ const root: RootFunction = ({ Messaging, I18n, getAuthToken, development, sentry
 
     return (
       <Messaging includeReactQueryDevTools={Platform.OS === "web"}>
-        <Routing
-          I18n={I18n}
-          basePath={basePath}
-          customer={customer}
-          getAuthToken={getAuthToken}
-          kameleoon={kameleoon}
-          layout={layout}
-          locale={locale}
-          order={order}
-          subscription={subscription}
-          useRedirect={useRedirect}
-          useRoutes={useRoutes}
-          onCheckoutSubmitted={onCheckoutSubmitted}
-          onI18nError={development ? undefined : handleOnI18nError}
-          onNotAccessible={onNotAccessible}
-        />
+        <QueryBusProvider queryBus={queryBus}>
+          <Routing
+            I18n={I18n}
+            basePath={basePath}
+            customer={customer}
+            getAuthToken={getAuthToken}
+            kameleoon={kameleoon}
+            layout={layout}
+            locale={locale}
+            order={order}
+            subscription={subscription}
+            useRedirect={useRedirect}
+            useRoutes={useRoutes}
+            onCheckoutSubmitted={onCheckoutSubmitted}
+            onI18nError={development ? undefined : handleOnI18nError}
+            onNotAccessible={onNotAccessible}
+          />
+        </QueryBusProvider>
       </Messaging>
     );
   };

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,27 @@
+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 };

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

@@ -6,9 +6,11 @@ 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";
@@ -18,6 +20,7 @@ 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");
 
@@ -38,6 +41,7 @@ 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]);
@@ -86,6 +90,7 @@ 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]);
@@ -126,6 +131,7 @@ 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]);
@@ -166,6 +172,7 @@ 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]);
@@ -212,6 +219,7 @@ 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]);
@@ -236,4 +244,54 @@ 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

@@ -3,11 +3,17 @@ import { CommandStatus } from "@lookiero/messaging-react";
 import { PaymentFlowRef } 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",
@@ -63,9 +69,11 @@ 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");
 
@@ -77,6 +85,15 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
         return;
       }
 
+      const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
+        viewCheckoutBookingById({ checkoutBookingId }),
+      );
+
+      if (checkoutBooking?.isExpired) {
+        setCheckoutBookingExpired(true);
+        return;
+      }
+
       paymentFlowRef.current?.startLegacyBoxCheckout(
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -100,7 +117,15 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
         },
       );
     },
-    [paymentFlowRef, blockCheckoutBooking, submitCheckoutCommand, onSuccess, createNotification],
+    [
+      queryBus,
+      checkoutBookingId,
+      paymentFlowRef,
+      blockCheckoutBooking,
+      submitCheckoutCommand,
+      onSuccess,
+      createNotification,
+    ],
   );
 
   const status: Status = useMemo(() => {
@@ -121,14 +146,21 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
     if (
       blockCheckoutBookingStatus === CommandStatus.ERROR ||
       startLegacyBoxCheckoutStatus === "error" ||
-      submitCheckoutCommandStatus === CommandStatus.ERROR
+      submitCheckoutCommandStatus === CommandStatus.ERROR ||
+      checkoutBookingExpired
     ) {
       onError();
       return "error";
     }
 
     return "idle";
-  }, [blockCheckoutBookingStatus, submitCheckoutCommandStatus, onError, startLegacyBoxCheckoutStatus]);
+  }, [
+    blockCheckoutBookingStatus,
+    startLegacyBoxCheckoutStatus,
+    submitCheckoutCommandStatus,
+    checkoutBookingExpired,
+    onError,
+  ]);
 
   return [submitCheckout, status];
 };