@lookiero/checkout 12.1.2 → 12.2.0-beta.0

package/dist/src/infrastructure/integration/useRedirect.d.ts

@@ -0,0 +1,7 @@
+interface UseRedirectFunctionReturn {
+    readonly returnUrl: string;
+}
+interface UseRedirectFunction {
+    (): UseRedirectFunctionReturn;
+}
+export type { UseRedirectFunction };

package/dist/src/infrastructure/integration/useRedirect.js

@@ -0,0 +1 @@
+export {};

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

@@ -11,6 +11,7 @@ import { Customer } from "../../projection/customer/customer";
 import { OrderProjection } from "../../projection/order/order";
 import { SubscriptionProjection } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
+import { UseRedirectFunction } from "../integration/useRedirect";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
@@ -33,7 +34,7 @@ interface RootProps {
     readonly tradename: Tradename;
     readonly onNotAccessible: () => void;
     readonly onCheckoutFlowSuccess: () => void;
-    readonly useRedirect: () => Record<string, string>;
+    readonly useRedirect: UseRedirectFunction;
     readonly useRoutes?: typeof reactRouterUseRoutes;
 }
 declare const root: RootFunction;

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

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import { CheckoutProjection } from "../../../projection/checkout/checkout";
 import { OrderProjection } from "../../../projection/order/order";
 import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+import { UseRedirectFunction } from "../../integration/useRedirect";
 type CheckoutFlowStatus = "idle" | "loading" | "success" | "error";
 interface CheckoutFlowFunction {
     (): Promise<void>;
@@ -17,6 +18,7 @@ interface UseCheckoutFlowArgs {
     readonly subscription: SubscriptionProjection;
     readonly getAuthToken: () => Promise<string>;
     readonly onSuccess: () => void;
+    readonly useRedirect: UseRedirectFunction;
 }
 interface UseCheckoutFlowFunction {
     (args: UseCheckoutFlowArgs): CheckoutFlowReturn;

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

@@ -12,14 +12,14 @@ import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/
 import { useViewPricingByCheckoutId } from "../../projection/pricing/react/useViewPricingByCheckoutId";
 import { useTrackCheckout } from "../../tracking/useTrackCheckout";
 import { I18nMessages } from "../i18n/i18n";
-import { Routes } from "../routing/routes";
 import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
 import { useQueryBus } from "./useQueryBus";
 import { useStaticInfo } from "./useStaticInfo";
-const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection, subscription: subscriptionProjection, getAuthToken, onSuccess, }) => {
+const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection, subscription: subscriptionProjection, getAuthToken, onSuccess, useRedirect, }) => {
     const logger = useLogger();
     const queryBus = useQueryBus();
-    const { customer: { customerId, country, segment, name, email }, basePath, tradename, } = useStaticInfo();
+    const { customer: { customerId, country, segment, name, email }, tradename, } = useStaticInfo();
+    const { returnUrl } = useRedirect();
     const paymentFlowRef = useRef(null);
     const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
         checkoutId: checkoutProjection?.id,
@@ -73,14 +73,14 @@ const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection,
         paymentFlowRef.current?.startLegacyBoxCheckout({
             ...paymentFlowPayload,
             userInformation: { email, name },
-            returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+            returnUrl,
         });
     }, [
         checkoutProjection?.checkoutBookingId,
         paymentFlowPayload,
         email,
         name,
-        basePath,
+        returnUrl,
         sizeChangeEnabled,
         blockCheckoutBooking,
         queryBus,

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

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

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

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

@@ -8,6 +8,7 @@ import { Customer } from "../../../projection/customer/customer";
 import { OrderProjection } from "../../../projection/order/order";
 import { SubscriptionProjection } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
+import { UseRedirectFunction } from "../../integration/useRedirect";
 interface RoutingProps {
     readonly basePath?: string;
     readonly customer: Customer;
@@ -22,7 +23,7 @@ interface RoutingProps {
     readonly onNotAccessible: () => void;
     readonly onCheckoutFlowSuccess: () => void;
     readonly onI18nError?: (err: Error) => void;
-    readonly useRedirect: () => Record<string, string>;
+    readonly useRedirect: UseRedirectFunction;
     readonly useRoutes: typeof reactRouterUseRoutes;
 }
 /**

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

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

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

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

package/dist/src/infrastructure/ui/views/checkout/Checkout.d.ts

@@ -2,13 +2,14 @@ import { FC } from "react";
 import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
 import { OrderProjection } from "../../../../projection/order/order";
 import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
+import { UseRedirectFunction } from "../../../integration/useRedirect";
 interface CheckoutProps {
     readonly layout: UiLayout;
     readonly order: OrderProjection;
     readonly subscription: SubscriptionProjection;
     readonly getAuthToken: () => Promise<string>;
     readonly onCheckoutFlowSuccess: () => void;
-    readonly useRedirect: () => Record<string, string>;
+    readonly useRedirect: UseRedirectFunction;
 }
 declare const Checkout: FC<CheckoutProps>;
 export { Checkout };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -41,6 +41,7 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
         subscription,
         getAuthToken,
         onSuccess: onCheckoutFlowSuccess,
+        useRedirect,
     });
     useTrackPageView({
         page: TrackingPage.CHECKOUT,

package/dist/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { Subscription } from "../../../../../../projection/subscription/subscription";
+interface CheckoutPaymentModalProps {
+    readonly coupon: string | null;
+    readonly orderNumber: number;
+    readonly isFirstOrder: boolean;
+    readonly subscription: Subscription;
+    readonly getAuthToken: () => Promise<string>;
+    readonly onCheckoutSubmitted?: () => void;
+}
+declare const CheckoutPaymentModal: FC<CheckoutPaymentModalProps>;
+export { CheckoutPaymentModal };

package/dist/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js

@@ -0,0 +1,90 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-native";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { PaymentFlow } from "@lookiero/payments-front";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
+import { TrackingPage } from "../../../../../tracking/tracking";
+import { useTrackCheckout } from "../../../../../tracking/useTrackCheckout";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
+import { Routes } from "../../../../routing/routes";
+import { useBasePath } from "../../../../routing/useBasePath";
+const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber, getAuthToken, onCheckoutSubmitted, }) => {
+    const paymentFlowRef = useRef(null);
+    const logger = useLogger();
+    const { customer: { customerId, country, segment }, } = useStaticInfo();
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+        checkoutId: checkout?.id,
+    });
+    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
+    const [pricing] = useViewPricingByCheckoutId({
+        checkoutId: checkout?.id,
+        queryOptions: { refetchOnMount: true },
+    });
+    const [authToken, setAuthToken] = useState();
+    useEffect(() => {
+        const loadAuthToken = async () => setAuthToken(await getAuthToken());
+        loadAuthToken();
+    }, [getAuthToken]);
+    const basePath = useBasePath();
+    const navigate = useNavigate();
+    const trackCheckout = useTrackCheckout({
+        page: TrackingPage.CHECKOUT,
+        checkoutId: checkout?.id,
+        country,
+        segment,
+    });
+    const handleOnSubmitCheckoutError = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`, { replace: true }), [basePath, navigate]);
+    const handleOnSubmitCheckoutSuccess = useCallback(() => {
+        const checkoutItemsKept = checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
+        const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
+        trackCheckout({
+            totalCheckoutItemsKept: checkoutItemsKept?.length || 0,
+            pendingToPay: pricing?.pendingToPay.amount / 100,
+            coupon,
+            currencyCode: pricing?.pendingToPay.currency,
+            isFirstOrder,
+            orderNumber,
+            totalReplacedFor,
+            subscription,
+            userId: customerId,
+        });
+        onCheckoutSubmitted?.();
+    }, [
+        checkout?.items,
+        coupon,
+        customerId,
+        isFirstOrder,
+        onCheckoutSubmitted,
+        orderNumber,
+        pricing?.pendingToPay.amount,
+        pricing?.pendingToPay.currency,
+        subscription,
+        trackCheckout,
+    ]);
+    const [submitCheckout] = useSubmitCheckout({
+        checkoutId: checkout?.id,
+        checkoutBookingId: checkout?.checkoutBookingId,
+        paymentFlowRef,
+        onError: handleOnSubmitCheckoutError,
+        onSuccess: handleOnSubmitCheckoutSuccess,
+        logger,
+    });
+    useEffect(() => {
+        if (paymentFlowPayload && sizeChangeEnabled !== undefined && pricing !== undefined) {
+            submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
+        }
+    }, [paymentFlowPayload, pricing, sizeChangeEnabled, submitCheckout]);
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
+    if (!dependenciesLoaded)
+        return null;
+    return React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken });
+};
+export { CheckoutPaymentModal };

package/dist/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.d.ts

@@ -1,6 +1,7 @@
 import { FC } from "react";
+import { UseRedirectFunction } from "../../../../../integration/useRedirect";
 interface PaymentInstrumentProps {
-    readonly useRedirect: () => Record<string, string>;
+    readonly useRedirect: UseRedirectFunction;
 }
 declare const PaymentInstrument: FC<PaymentInstrumentProps>;
 export { PaymentInstrument };

package/dist/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.js

@@ -4,7 +4,7 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 const PaymentInstrument = ({ useRedirect }) => {
     const { returnUrl } = useRedirect();
     const { customer } = useStaticInfo();
-    return (React.createElement(PaymentInstrumentSelect, { beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, section: Section.BOX_CHECKOUT, userInformation: {
+    return (React.createElement(PaymentInstrumentSelect, { beforeRedirect: () => Promise.resolve(returnUrl), hasError: false, section: Section.BOX_CHECKOUT, userInformation: {
             email: customer.email,
             name: customer.name,
         }, showSingleUsePaymentMethods: true }));

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "12.1.2";
+export declare const VERSION = "12.2.0-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "12.1.2";
+export const VERSION = "12.2.0-beta.0";

package/package.json

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

package/src/ExpoRoot.tsx

@@ -17,6 +17,7 @@ import { Tradename } from "@lookiero/sty-sp-tradename";
 import { KameleoonEnvironment } from "./infrastructure/ab-testing/kameleoonEnvironment";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
+import { UseRedirectFunction } from "./infrastructure/integration/useRedirect";
 import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
@@ -79,7 +80,7 @@ const translations: EndpointFunction[] = [
     })(locale),
 ];
 
-const useRedirect: () => Record<string, string> = () => ({
+const useRedirect: UseRedirectFunction = () => ({
   returnUrl: "https://web2.dev.aws.lookiero.es/user/",
 });
 

package/src/infrastructure/integration/useRedirect.ts

@@ -0,0 +1,9 @@
+interface UseRedirectFunctionReturn {
+  readonly returnUrl: string;
+}
+
+interface UseRedirectFunction {
+  (): UseRedirectFunctionReturn;
+}
+
+export type { UseRedirectFunction };

package/src/infrastructure/ui/Root.tsx

@@ -13,6 +13,7 @@ import { Customer } from "../../projection/customer/customer";
 import { OrderProjection } from "../../projection/order/order";
 import { SubscriptionProjection } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
+import { UseRedirectFunction } from "../integration/useRedirect";
 import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
 
@@ -40,7 +41,7 @@ interface RootProps {
   readonly tradename: Tradename;
   readonly onNotAccessible: () => void;
   readonly onCheckoutFlowSuccess: () => void;
-  readonly useRedirect: () => Record<string, string>;
+  readonly useRedirect: UseRedirectFunction;
   readonly useRoutes?: typeof reactRouterUseRoutes;
 }
 

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

@@ -11,6 +11,7 @@ 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 { UseRedirectFunction } from "../../integration/useRedirect";
 import { checkout } from "../../projection/checkout/checkout.mock";
 import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
 import { paymentFlowPayload as mockPaymentFlowPayload } from "../../projection/payment/paymentFlowPayload.mock";
@@ -18,11 +19,15 @@ import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/
 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 returnUrl = "/checkout";
+const useRedirect: UseRedirectFunction = () => ({
+  returnUrl,
+});
+
 const getAuthToken = () => Promise.resolve("token");
 const mockCheckout = checkout({
   items: [
@@ -119,7 +124,7 @@ describe("useCheckoutFlow custom hook", () => {
     });
 
     const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess, useRedirect }),
     );
 
     let checkoutFlow: () => void, status, paymentFlowComponent;
@@ -145,7 +150,7 @@ describe("useCheckoutFlow custom hook", () => {
         expect.objectContaining({
           ...mockPaymentFlowPayload,
           userInformation: { email, name },
-          returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+          returnUrl,
         }),
       );
       expect(mockSubmitCheckout).toHaveBeenCalled();
@@ -175,7 +180,7 @@ describe("useCheckoutFlow custom hook", () => {
     });
 
     const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess, useRedirect }),
     );
 
     let checkoutFlow: () => void, status, paymentFlowComponent;
@@ -201,7 +206,7 @@ describe("useCheckoutFlow custom hook", () => {
         expect.objectContaining({
           ...mockPaymentFlowPayload,
           userInformation: { email, name },
-          returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+          returnUrl,
         }),
       );
       expect(mockSubmitCheckout).toHaveBeenCalled();
@@ -231,7 +236,7 @@ describe("useCheckoutFlow custom hook", () => {
     });
 
     const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess, useRedirect }),
     );
 
     let checkoutFlow: () => void, status, paymentFlowComponent;
@@ -278,7 +283,7 @@ describe("useCheckoutFlow custom hook", () => {
     });
 
     const { result } = renderHook(() =>
-      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess }),
+      sut({ checkout: mockCheckout, order, subscription, getAuthToken, onSuccess: mockOnSuccess, useRedirect }),
     );
 
     let checkoutFlow: () => void, status, paymentFlowComponent;

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

@@ -15,12 +15,12 @@ import { SubscriptionProjection } from "../../../projection/subscription/subscri
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
 import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { UseRedirectFunction } from "../../integration/useRedirect";
 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";
@@ -43,6 +43,7 @@ interface UseCheckoutFlowArgs {
   readonly subscription: SubscriptionProjection;
   readonly getAuthToken: () => Promise<string>;
   readonly onSuccess: () => void;
+  readonly useRedirect: UseRedirectFunction;
 }
 
 interface UseCheckoutFlowFunction {
@@ -55,14 +56,15 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
   subscription: subscriptionProjection,
   getAuthToken,
   onSuccess,
+  useRedirect,
 }) => {
   const logger = useLogger();
   const queryBus = useQueryBus();
   const {
     customer: { customerId, country, segment, name, email },
-    basePath,
     tradename,
   } = useStaticInfo();
+  const { returnUrl } = useRedirect();
   const paymentFlowRef = useRef<PaymentFlowRef>(null);
   const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
     checkoutId: checkoutProjection?.id as string,
@@ -122,14 +124,14 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
     paymentFlowRef.current?.startLegacyBoxCheckout({
       ...paymentFlowPayload,
       userInformation: { email, name },
-      returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+      returnUrl,
     } as unknown as LegacyBoxCheckoutStrategyPayload);
   }, [
     checkoutProjection?.checkoutBookingId,
     paymentFlowPayload,
     email,
     name,
-    basePath,
+    returnUrl,
     sizeChangeEnabled,
     blockCheckoutBooking,
     queryBus,

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

@@ -10,6 +10,7 @@ import { Customer } from "../../../projection/customer/customer";
 import { OrderProjection } from "../../../projection/order/order";
 import { SubscriptionProjection } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
+import { UseRedirectFunction } from "../../integration/useRedirect";
 import { StaticInfoProvider } from "../hooks/useStaticInfo";
 import { App } from "../views/App";
 import { Checkout } from "../views/checkout/Checkout";
@@ -35,7 +36,7 @@ interface RoutingProps {
   readonly onNotAccessible: () => void;
   readonly onCheckoutFlowSuccess: () => void;
   readonly onI18nError?: (err: Error) => void;
-  readonly useRedirect: () => Record<string, string>;
+  readonly useRedirect: UseRedirectFunction;
   readonly useRoutes: typeof reactRouterUseRoutes;
 }
 

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

@@ -9,6 +9,7 @@ import { Layout as UiLayout, Sticky, useScreenSize } 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 { UseRedirectFunction } from "../../../integration/useRedirect";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../tracking/tracking";
@@ -33,7 +34,7 @@ interface CheckoutProps {
   readonly subscription: SubscriptionProjection;
   readonly getAuthToken: () => Promise<string>;
   readonly onCheckoutFlowSuccess: () => void;
-  readonly useRedirect: () => Record<string, string>;
+  readonly useRedirect: UseRedirectFunction;
 }
 
 const Checkout: FC<CheckoutProps> = ({
@@ -68,6 +69,7 @@ const Checkout: FC<CheckoutProps> = ({
     subscription,
     getAuthToken,
     onSuccess: onCheckoutFlowSuccess,
+    useRedirect,
   });
 
   useTrackPageView({

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

@@ -1,9 +1,10 @@
 import React, { FC } from "react";
 import { PaymentInstrumentSelect, Section } from "@lookiero/payments-front";
+import { UseRedirectFunction } from "../../../../../integration/useRedirect";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 
 interface PaymentInstrumentProps {
-  readonly useRedirect: () => Record<string, string>;
+  readonly useRedirect: UseRedirectFunction;
 }
 const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
   const { returnUrl } = useRedirect();
@@ -11,7 +12,7 @@ const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
 
   return (
     <PaymentInstrumentSelect
-      beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
+      beforeRedirect={() => Promise.resolve(returnUrl)}
       hasError={false}
       section={Section.BOX_CHECKOUT}
       userInformation={{