@lookiero/checkout 9.9.0-beta.2 → 9.9.0

package/dist/fake-dependencies/@lookiero/payments-front/index.d.ts

@@ -1,23 +1,21 @@
 import { FC, ForwardRefExoticComponent, PropsWithChildren, RefAttributes } from "react";
-import { PaymentPayload } from "@lookiero/payments-front";
 declare const setPaymentsBridge: () => undefined;
 declare const PaymentsQueryProvider: FC<PropsWithChildren>;
 declare const PaymentInstrumentSelect: FC;
+interface StartLegacyBoxCheckoutCallbackArgs {
+    readonly status: string;
+    readonly final: boolean;
+}
 interface StartLegacyBoxCheckoutFunction {
-    (paymentFlowPayload: unknown): void;
+    (paymentFlowPayload: unknown, callback: (params: StartLegacyBoxCheckoutCallbackArgs) => Promise<void>): void;
 }
 interface PaymentFlowRef {
     readonly startLegacyBoxCheckout: StartLegacyBoxCheckoutFunction;
 }
 declare const paymentFlowRef: PaymentFlowRef;
 declare const PaymentFlow: ForwardRefExoticComponent<RefAttributes<PaymentFlowRef>>;
-interface UsePaymentStatusManagerResult {
-    isLoading: boolean;
-    consumePayload: (callback: (payload: PaymentPayload) => void) => void;
-}
-declare const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResult;
 declare enum Section {
     BOX_CHECKOUT = "box-checkout"
 }
 export type { PaymentFlowRef };
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef, usePaymentStatusManager, };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };

package/dist/fake-dependencies/@lookiero/payments-front/index.js

@@ -4,20 +4,17 @@ const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider = ({ children }) => children;
 const PaymentInstrumentSelect = () => null;
 const paymentFlowRef = {
-    startLegacyBoxCheckout: async () => { },
+    startLegacyBoxCheckout: async (_paymentFlowPayload, callback) => {
+        await callback({ status: "EXECUTED", final: true });
+    },
 };
 const PaymentFlow = forwardRef((_props, ref) => {
     useImperativeHandle(ref, () => paymentFlowRef, []);
     return null;
 });
 PaymentFlow.displayName = "PaymentFlow";
-const paymentStatusManagerResult = {
-    isLoading: false,
-    consumePayload: (callback) => callback({ success: true }),
-};
-const usePaymentStatusManager = () => paymentStatusManagerResult;
 var Section;
 (function (Section) {
     Section["BOX_CHECKOUT"] = "box-checkout";
 })(Section || (Section = {}));
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef, usePaymentStatusManager, };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };

package/dist/index.js

@@ -10,11 +10,11 @@ const bootstrap = ({ apiUrl, getAuthToken, translations, sentry, kameleoon }) =>
     const { Component: Messaging, queryBus } = checkoutBootstrap({ apiUrl, getAuthToken });
     const I18n = i18n({
         fetchTranslation: fetchTranslations({ translations }),
-        contextId: "CheckoutI18n",
+        domain: "CheckoutI18n",
     });
     const firstAvailableCheckoutByCustomerId = ({ customerId }) => queryBus(viewFirstAvailableCheckoutByCustomerId({ customerId: customerId }));
     return {
-        root: root({ Messaging, I18n, getAuthToken, sentry, kameleoon }),
+        root: root({ Messaging, I18n, queryBus, getAuthToken, sentry, kameleoon }),
         firstAvailableCheckoutByCustomerId,
     };
 };

package/dist/src/ExpoRoot.js

@@ -1,4 +1,3 @@
-import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { useCallback, useState } from "react";
@@ -28,8 +27,6 @@ const customer = {
     customerId: "d3c2354b-9811-46d4-b2ba-5fba012ed94d",
     country: Country.ES,
     segment: Segment.WOMEN,
-    email: "email@example.com",
-    name: "Adèle Léonce Émilie",
 };
 const sentryConfig = {
     publicKey: "66cadf9444db4ea5945670f12ec08ae7",
@@ -42,7 +39,7 @@ const apiUrl = Platform.OS !== "web"
     : __DEV__
         ? "/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDg3OTAsImV4cCI6MTc0MjM2OTcyNywiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTEtMDgiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiNzRjYjRmNzYtM2YxNC00OTgzLTgxYTYtMmVlMmE5YTI3NWQ0IiwiaWF0IjoxNzM5OTUwNTI3fQ.ajNczGc6YhM23--PsqlAoDrp_GN87TnHEBOYyg2hoWM";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -77,22 +74,22 @@ setPaymentsBridge({
     useFeatureFlags: () => ({}),
     locale: () => Promise.resolve("es-ES"),
     scrollView: ScrollView,
-    hostUrl: "",
 });
 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({
     fetchTranslation: fetchTranslations({ translations }),
-    contextId: "CheckoutI18n",
+    domain: "CheckoutI18n",
 });
 const Root = root({
     Messaging,
     I18n,
+    queryBus,
     getAuthToken,
     development: false,
     sentry: () => (process.env.EXPO_PUBLIC_APP_VARIANT === "test" ? {} : sentryConfig),
@@ -107,14 +104,13 @@ const ExpoRoot = () => {
     });
     const [isAccessible, setIsAccessible] = useState();
     const onNotAccessible = useCallback(() => setIsAccessible(false), []);
-    return fontsLoaded ? (React.createElement(PortalProvider, null,
-        React.createElement(PaymentsQueryProvider, null,
-            React.createElement(EventProvider, null,
-                React.createElement(Aurora, null,
-                    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, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" })))))))) : null;
+    return fontsLoaded ? (React.createElement(PaymentsQueryProvider, null,
+        React.createElement(EventProvider, null,
+            React.createElement(Aurora, null,
+                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, { 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";
@@ -12,6 +13,7 @@ import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
+    readonly queryBus: QueryBus;
     readonly development?: boolean;
     readonly sentry: () => SentryEnvironment;
     readonly getAuthToken: () => Promise<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 root = ({ Messaging, I18n, queryBus, 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 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/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -8,7 +8,7 @@ const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParent
     const placeholderText = useMemo(() => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""), [formatMessage, checkoutQuestion.placeholder]);
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
-    return (React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
+    return (React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, textAlignVertical: "top", value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
             inputField: style.inputField,
             input: { container: style.inputContainer, input: style.input },
         } }));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.d.ts

@@ -1,7 +1,6 @@
 declare const style: {
     input: {
         paddingTop: number;
-        height?: "auto" | undefined;
     };
     inputContainer: {
         alignItems?: "flex-start" | undefined;

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.js

@@ -8,7 +8,6 @@ const style = StyleSheet.create({
         ...Platform.select({
             android: {
                 paddingTop: space2,
-                height: "auto",
             },
         }),
     },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -11,7 +11,7 @@ const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, test
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
     return (React.createElement(View, { style: style.wrapper, testID: "textarea-return-question-item" },
-        React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
+        React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, textAlignVertical: "top", value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
                 inputField: style.inputField,
                 input: { container: style.inputContainer, input: style.input },
             } })));

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.d.ts

@@ -1,7 +1,6 @@
 declare const style: {
     input: {
         paddingTop: number;
-        height?: "auto" | undefined;
     };
     inputContainer: {
         alignItems?: "flex-start" | undefined;

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.js

@@ -8,7 +8,6 @@ const style = StyleSheet.create({
         ...Platform.select({
             android: {
                 paddingTop: space2,
-                height: "auto",
             },
         }),
     },

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

@@ -1,7 +1,6 @@
-import { PaymentPayload } from "@lookiero/payments-front";
+import { Logger } from "@lookiero/sty-psp-logging";
 interface UsePaymentInstrumentEventsFunctionArgs {
-    readonly onSuccess: (payload: PaymentPayload) => void;
-    readonly onError: (payload: PaymentPayload) => void;
+    readonly logger: Logger;
 }
 interface UsePaymentInstrumentEventsFunction {
     (args: UsePaymentInstrumentEventsFunctionArgs): void;

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

@@ -1,20 +1,29 @@
-import { useEffect } from "react";
-import { Section, usePaymentStatusManager } from "@lookiero/payments-front";
-const usePaymentInstrumentEvents = ({ onSuccess, onError }) => {
-    const refreshStatus = usePaymentStatusManager(Section.BOX_CHECKOUT);
-    useEffect(() => {
-        const { isLoading, consumePayload } = refreshStatus;
-        if (isLoading) {
-            return;
+import { useCallback, useEffect } from "react";
+import { useEvent } from "@lookiero/event";
+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";
+const usePaymentInstrumentEvents = ({ logger }) => {
+    const { subscribe, unsubscribe } = useEvent();
+    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+    const onSuccess = useCallback(({ message }) => createNotification({ bodyI18nKey: message.id, level: NotificationLevel.SUCCESS }), [createNotification]);
+    const onError = 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);
-            }
-        });
-    }, [onError, onSuccess, refreshStatus]);
+    }, [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]);
 };
 export { usePaymentInstrumentEvents };

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.d.ts

@@ -16,7 +16,7 @@ interface UseSubmitCheckoutFunctionArgs {
     readonly checkoutBookingId: string;
     readonly paymentFlowRef: RefObject<PaymentFlowRef>;
     readonly onError: () => void;
-    readonly onSuccess: () => void;
+    readonly onSuccess?: () => void;
     readonly logger: Logger;
 }
 interface UseSubmitCheckoutFunction {

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

@@ -1,15 +1,29 @@
 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 { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
+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 {
@@ -18,27 +32,40 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         catch (error) {
             return;
         }
-        setStartLegacyBoxCheckoutStatus("loading");
+        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
-        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) => {
-        setStartLegacyBoxCheckoutStatus("error");
-        createNotification({
-            bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-            level: NotificationLevel.ERROR,
+        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");
+                }
+            }
         });
-    }, [createNotification]);
-    usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
+    }, [
+        queryBus,
+        checkoutBookingId,
+        paymentFlowRef,
+        blockCheckoutBooking,
+        submitCheckoutCommand,
+        onSuccess,
+        createNotification,
+    ]);
     const status = useMemo(() => {
         if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
             startLegacyBoxCheckoutStatus === "loading" ||
@@ -48,17 +75,23 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
             startLegacyBoxCheckoutStatus === "success" &&
             submitCheckoutCommandStatus === CommandStatus.SUCCESS) {
-            onSuccess();
             return "success";
         }
         if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
             startLegacyBoxCheckoutStatus === "error" ||
-            submitCheckoutCommandStatus === CommandStatus.ERROR) {
+            submitCheckoutCommandStatus === CommandStatus.ERROR ||
+            checkoutBookingExpired) {
             onError();
             return "error";
         }
         return "idle";
-    }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, onSuccess, onError]);
+    }, [
+        blockCheckoutBookingStatus,
+        startLegacyBoxCheckoutStatus,
+        submitCheckoutCommandStatus,
+        checkoutBookingExpired,
+        onError,
+    ]);
     return [submitCheckout, status];
 };
 export { useSubmitCheckout };

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

@@ -46,7 +46,6 @@ declare 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/dist/src/infrastructure/ui/i18n/i18n.js

@@ -48,7 +48,6 @@ var I18nMessages;
     I18nMessages["CHECKOUT_TITLE"] = "checkout.title";
     I18nMessages["CHECKOUT_PAY_BUTTON"] = "checkout.pay_button";
     I18nMessages["CHECKOUT_TOAST_PAYMENT_ERROR"] = "checkout.toast_payment_error";
-    I18nMessages["CHECKOUT_TOAST_PAYMENT_SUCCESS"] = "checkout.toast_payment_success";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_TITLE"] = "checkout.success_modal_title";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_DESCRIPTION"] = "checkout.success_modal_description";
     I18nMessages["CHECKOUT_SUCCESS_MODAL_BUTTON"] = "checkout.success_modal_button";

package/dist/src/infrastructure/ui/views/App.js

@@ -1,14 +1,15 @@
-import { PortalHost } from "@gorhom/portal";
+import { PortalProvider } from "@gorhom/portal";
 import React 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";
 const { colorBgBase } = theme();
 const App = ({ children }) => (React.createElement(SafeAreaProvider, null,
-    React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
-    React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, portalHostName: "Checkout" }),
-    React.createElement(PortalHost, { name: "Checkout" }),
-    children));
+    React.createElement(PortalProvider, { rootHostName: "Checkout" },
+        React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
+        React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, portalHostName: "Checkout" }),
+        React.createElement(AuroraPortalProvider, null, children))));
 export { App };

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

@@ -4,7 +4,6 @@ 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 { Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -78,15 +77,13 @@ const Checkout = ({ children, layout: Layout, useRedirect }) => {
             React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
                 React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
                     React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
-                        country === Country.NL && (React.createElement(View, { style: style.paymentSelectorNL },
-                            React.createElement(PaymentInstrument, { useRedirect: useRedirect }))),
                         React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
                         checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
                             React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
                                     ? checkoutItem.replacedFor.size
                                     : checkoutItem.productVariant.size })))),
-                        country !== Country.NL && (React.createElement(View, { style: style.paymentSelector },
-                            React.createElement(PaymentInstrument, { useRedirect: useRedirect }))))),
+                        React.createElement(View, { style: style.paymentSelector },
+                            React.createElement(PaymentInstrument, { useRedirect: useRedirect })))),
                 React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L && style.desktopResume] }, pricing ? (React.createElement(View, { style: [style.princingWrapper, !screen.L && style.princingWrapperSmall] },
                     React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
                     screen.L ? (React.createElement(Button, { testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),

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

@@ -24,9 +24,6 @@ declare const style: {
     paymentSelector: {
         marginTop: number;
     };
-    paymentSelectorNL: {
-        marginBottom: number;
-    };
     princingWrapper: {
         padding: number;
     };

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

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

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-native";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { PaymentFlow, Section } from "@lookiero/payments-front";
+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";
@@ -85,6 +85,6 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
     const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
     if (!dependenciesLoaded)
         return null;
-    return React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken });
+    return React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken });
 };
 export { CheckoutPaymentModal };

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

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

package/dist/src/projection/customer/customer.d.ts

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

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.9.0-beta.2";
+export declare const VERSION = "9.9.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.9.0-beta.2";
+export const VERSION = "9.9.0";