@lookiero/checkout 10.0.0-beta.4 → 10.0.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.d.ts

@@ -4,13 +4,14 @@ import { translationEndpoint, translationExternalEndpoint } from "@lookiero/sty-
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { CheckoutStatus } from "./src/domain/checkout/model/checkout";
 import { KameleoonEnvironment } from "./src/infrastructure/ab-testing/kameleoonEnvironment";
 import { RootProps } from "./src/infrastructure/ui/Root";
 import { CheckoutProjection } from "./src/projection/checkout/checkout";
 import { Customer } from "./src/projection/customer/customer";
-import { OrderProjection } from "./src/projection/order/order";
-import { SubscriptionProjection } from "./src/projection/subscription/subscription";
+import { Order } from "./src/projection/order/order";
+import { Subscription } from "./src/projection/subscription/subscription";
 interface FirstAvailableCheckoutByCustomerIdFunctionArgs {
     readonly customerId: string | undefined;
 }
@@ -33,4 +34,4 @@ interface BootstrapFunction {
 }
 declare const bootstrap: BootstrapFunction;
 export { bootstrap, translationEndpoint, translationExternalEndpoint, Country, Segment, CheckoutStatus };
-export type { SentryEnvironment, KameleoonEnvironment, Customer, SubscriptionProjection as Subscription, OrderProjection as Order, Locale, };
+export type { SentryEnvironment, KameleoonEnvironment, Customer, Subscription, Order, Locale, Tradename };

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";
@@ -12,13 +11,14 @@ import { fetchTranslations, translationExternalEndpoint } from "@lookiero/sty-ps
 import { Country, Locale } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
 import { DummyLayout } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
 import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 import { VERSION } from "./version";
-const locale = Locale.es_ES;
+const locale = Locale.en_GB;
 const subscription = "b";
 const order = {
     isFirstOrder: false,
@@ -26,11 +26,9 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "9cfb056e-6008-44b1-9075-320479bf92ac",
-    country: Country.NL,
+    customerId: "a4355713-469b-4684-bf90-3215702dfb1c",
+    country: Country.ES,
     segment: Segment.WOMEN,
-    email: "email@example.com",
-    name: "Adèle Léonce Émilie",
 };
 const sentryConfig = {
     publicKey: "66cadf9444db4ea5945670f12ec08ae7",
@@ -43,7 +41,7 @@ const apiUrl = Platform.OS !== "web"
     : __DEV__
         ? "/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2ODkxMDAsImV4cCI6MTc0NjI3ODQwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMDMiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiYTQzNTU3MTMtNDY5Yi00Njg0LWJmOTAtMzIxNTcwMmRmYjFjIiwiaWF0IjoxNzQzNjg2NDAyfQ.pmqFo-4s0USFpzCnijRt78bWuBdu2Q7f4L9UtOkfAwo";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -78,7 +76,6 @@ setPaymentsBridge({
     useFeatureFlags: () => ({}),
     locale: () => Promise.resolve("es-ES"),
     scrollView: ScrollView,
-    hostUrl: "",
 });
 const kameleoonConfig = {
     siteCode: "aplm4v3ckn",
@@ -109,14 +106,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, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), 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, tradename: Tradename.LOOKIERO, useRedirect: useRedirect, onNotAccessible: onNotAccessible }) }),
+                        React.createElement(Route, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" }))))))) : null;
 };
 export { ExpoRoot };

package/dist/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.d.ts

@@ -5,7 +5,7 @@ interface BlockCheckoutBookingFunction {
 }
 type UseBlockCheckoutBooking = [blockCheckoutBooking: BlockCheckoutBookingFunction, status: CommandStatus];
 interface UseBlockCheckoutBookingFunctionArgs {
-    readonly checkoutBookingId: string | undefined;
+    readonly checkoutBookingId: string;
     readonly logger: Logger;
 }
 interface UseBlockCheckoutBookingFunction {

package/dist/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.js

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import invariant from "tiny-invariant";
 import { useCommand } from "@lookiero/messaging-react";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
 import { blockCheckoutBooking as blockCheckoutBookingCommand } from "../../../../domain/checkoutBooking/command/blockCheckoutBooking";
@@ -9,7 +8,6 @@ const useBlockCheckoutBooking = ({ checkoutBookingId, logger }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
     const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
     const blockCheckoutBooking = useCallback(async () => {
-        invariant(checkoutBookingId, "checkoutBookingId is required");
         try {
             await commandBus(blockCheckoutBookingCommand({
                 aggregateId: checkoutBookingId,

package/dist/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.d.ts

@@ -4,7 +4,7 @@ interface QueryOptions {
     readonly refetchOnMount?: boolean | "always";
 }
 interface UseViewPricingByCheckoutIdFunctionArgs {
-    readonly checkoutId: string | undefined;
+    readonly checkoutId: string;
     readonly queryOptions?: QueryOptions;
 }
 interface UseViewPricingByCheckoutIdFunction {

package/dist/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.js

@@ -13,7 +13,7 @@ const DEFAULT_QUERY_OPTIONS = {
     refetchOnMount: "always",
 };
 const useViewPricingByCheckoutId = ({ checkoutId, queryOptions = DEFAULT_QUERY_OPTIONS, }) => useQuery({
-    query: viewPricingByCheckoutId({ checkoutId: checkoutId }),
+    query: viewPricingByCheckoutId({ checkoutId }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
     options: {
@@ -21,7 +21,6 @@ const useViewPricingByCheckoutId = ({ checkoutId, queryOptions = DEFAULT_QUERY_O
         staleTime: Infinity,
         retry: false,
         refetchOnWindowFocus: false,
-        enabled: Boolean(checkoutId),
     },
 });
 export { useViewPricingByCheckoutId };

package/dist/src/infrastructure/tracking/tracking.d.ts

@@ -2,7 +2,7 @@ import { BaseTrackingEvent, TrackingEventCategory } from "@lookiero/sty-psp-trac
 import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
 import { Currency } from "../../domain/checkoutItem/model/currency";
 import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
-import { SubscriptionProjection } from "../../projection/subscription/subscription";
+import { Subscription } from "../../projection/subscription/subscription";
 declare const PROJECT = "checkout";
 declare enum TrackingPage {
     ITEM = "item",
@@ -96,7 +96,7 @@ interface CheckoutTrackingEvent extends CheckoutBaseTrackingEvent<TrackingEventN
             readonly actionField: {
                 readonly items: number;
                 readonly currencyCode: Currency;
-                readonly subscription: SubscriptionProjection;
+                readonly subscription: Subscription;
                 readonly coupon: string | null;
                 readonly orderId: number;
                 readonly value: number;

package/dist/src/infrastructure/tracking/useTrackCheckout.d.ts

@@ -1,19 +1,26 @@
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { CheckoutProjection } from "../../projection/checkout/checkout";
-import { OrderProjection } from "../../projection/order/order";
-import { PricingProjection } from "../../projection/pricing/pricing";
-import { SubscriptionProjection } from "../../projection/subscription/subscription";
+import { Currency } from "../../domain/checkoutItem/model/currency";
+import { Subscription } from "../../projection/subscription/subscription";
+import { TrackingPage } from "./tracking";
+interface TrackCheckoutFunctionArgs {
+    readonly userId: string;
+    readonly totalReplacedFor: number;
+    readonly isFirstOrder: boolean;
+    readonly totalCheckoutItemsKept: number;
+    readonly currencyCode: Currency;
+    readonly subscription: Subscription;
+    readonly coupon: string | null;
+    readonly orderNumber: number;
+    readonly pendingToPay: number;
+}
 interface TrackCheckoutFunction {
-    (): void;
+    (args: TrackCheckoutFunctionArgs): void;
 }
 interface UseTrackCheckoutFunctionArgs {
-    readonly order: OrderProjection;
-    readonly checkout: CheckoutProjection | undefined;
-    readonly pricing: PricingProjection | undefined;
-    readonly subscription: SubscriptionProjection;
-    readonly userId: string;
+    readonly page: TrackingPage;
     readonly country: Country;
+    readonly checkoutId: string | undefined;
     readonly segment: Segment;
 }
 interface UseTrackCheckoutFunction {

package/dist/src/infrastructure/tracking/useTrackCheckout.js

@@ -1,53 +1,38 @@
 import { useCallback } from "react";
-import invariant from "tiny-invariant";
 import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
-import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
-import { PROJECT, TrackingPage } from "./tracking";
+import { PROJECT } from "./tracking";
 import { TrackingEventName, TrackingEventCategory } from "./tracking";
-const useTrackCheckout = ({ order, checkout, pricing, subscription, segment, country, userId, }) => {
+const useTrackCheckout = ({ page, country, checkoutId, segment }) => {
     const emitUserEvent = useEmitUserEvent();
-    const { coupon, isFirstOrder, orderNumber } = order;
-    const trackCheckout = useCallback(() => {
-        invariant(checkout, "Checkout must be defined to track checkout");
-        const checkoutItemsKept = checkout.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
-        const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
+    const trackCheckout = useCallback(({ coupon, currencyCode, isFirstOrder, orderNumber, pendingToPay, subscription, totalCheckoutItemsKept, totalReplacedFor, userId, }) => {
+        if (!checkoutId) {
+            return;
+        }
         const checkoutTrackingEvent = {
             event: TrackingEventName.CHECKOUT,
             eventCategory: TrackingEventCategory.ECOMMERCE,
-            section: `${PROJECT}_${TrackingPage.CHECKOUT}`,
+            section: `${PROJECT}_${page}`,
             store: country,
             segment,
-            checkoutId: checkout.id,
+            checkoutId,
             userId,
             sizeChanges: totalReplacedFor,
             isFirstOrder,
             ecommerce: {
                 checkout: {
                     actionField: {
-                        items: checkoutItemsKept.length || 0,
-                        currencyCode: pricing?.pendingToPay.currency,
+                        items: totalCheckoutItemsKept,
+                        currencyCode,
                         subscription,
                         coupon,
                         orderId: orderNumber,
-                        value: pricing?.pendingToPay.amount / 100,
+                        value: pendingToPay,
                     },
                 },
             },
         };
         emitUserEvent(checkoutTrackingEvent);
-    }, [
-        checkout,
-        country,
-        coupon,
-        emitUserEvent,
-        isFirstOrder,
-        orderNumber,
-        pricing?.pendingToPay.amount,
-        pricing?.pendingToPay.currency,
-        segment,
-        subscription,
-        userId,
-    ]);
+    }, [checkoutId, country, emitUserEvent, page, segment]);
     return trackCheckout;
 };
 export { useTrackCheckout };

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

@@ -6,15 +6,16 @@ import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs } from "@lookiero/sty-psp-logging";
 import { Layout } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../projection/customer/customer";
-import { OrderProjection } from "../../projection/order/order";
-import { SubscriptionProjection } from "../../projection/subscription/subscription";
+import { Order } from "../../projection/order/order";
+import { Subscription } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;
-    readonly queryBus: QueryBus;
     readonly development?: boolean;
+    readonly queryBus: QueryBus;
     readonly sentry: () => SentryEnvironment;
     readonly getAuthToken: () => Promise<string>;
     readonly kameleoon: () => KameleoonEnvironment;
@@ -24,13 +25,14 @@ interface RootFunction {
 }
 interface RootProps {
     readonly basePath: string;
-    readonly locale: Locale;
+    readonly locale?: Locale;
     readonly customer: Customer;
-    readonly order: OrderProjection;
-    readonly subscription: SubscriptionProjection;
+    readonly order: Order | undefined;
+    readonly subscription: Subscription | undefined;
     readonly layout: Layout;
+    readonly tradename: Tradename;
     readonly onNotAccessible: () => void;
-    readonly onCheckoutFlowSuccess: () => void;
+    readonly onCheckoutSubmitted?: () => void;
     readonly useRedirect: () => Record<string, string>;
     readonly useRoutes?: typeof reactRouterUseRoutes;
 }

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

@@ -2,6 +2,7 @@
 import React, { useCallback } from "react";
 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";
@@ -9,11 +10,11 @@ const root = ({ Messaging, I18n, queryBus, getAuthToken, development, sentry, ka
     const logger = sentryLogger(sentry);
     const kameleoon = kameleoonConfig();
     // eslint-disable-next-line react/display-name, react/prop-types
-    const Root = ({ basePath, locale, customer, order, subscription, layout, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    const Root = ({ basePath, locale = Locale.en_GB, customer, order, subscription, layout, tradename, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
         const handleOnI18nError = useCallback((error) => logger.captureException(error), []);
         return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
             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, onCheckoutFlowSuccess: onCheckoutFlowSuccess, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
+                React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, order: order, subscription: subscription, tradename: tradename, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
     };
     const hoc = sentryLoggerHOC({ logger });
     /**

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

@@ -1,15 +1,18 @@
 import { FC, ReactNode } from "react";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../../projection/customer/customer";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 interface StaticInfo {
     readonly kameleoon: KameleoonEnvironment;
     readonly customer: Customer;
+    readonly tradename: Tradename;
     readonly basePath: string;
 }
 interface StaticInfoProviderProps {
     readonly children: ReactNode;
     readonly kameleoon: KameleoonEnvironment;
     readonly customer: Customer;
+    readonly tradename: Tradename;
     readonly basePath: string;
 }
 declare const StaticInfoProvider: FC<StaticInfoProviderProps>;

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

@@ -1,8 +1,13 @@
 import React, { createContext, useContext, useMemo } from "react";
 import invariant from "tiny-invariant";
 const StaticInfoContext = createContext(null);
-const StaticInfoProvider = ({ children, kameleoon, customer, basePath }) => {
-    const value = useMemo(() => ({ kameleoon, customer, basePath }), [customer, kameleoon, basePath]);
+const StaticInfoProvider = ({ children, kameleoon, customer, tradename, basePath }) => {
+    const value = useMemo(() => ({
+        kameleoon,
+        customer,
+        tradename,
+        basePath,
+    }), [basePath, customer, kameleoon, tradename]);
     return React.createElement(StaticInfoContext.Provider, { value: value }, children);
 };
 const useStaticInfo = () => {

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

@@ -47,7 +47,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

@@ -49,7 +49,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/routing/CheckoutMiddleware.js

@@ -33,6 +33,11 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
     const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
     const feedbackRouteMatchRef = useRef(feedbackRouteMatch);
     feedbackRouteMatchRef.current = feedbackRouteMatch;
+    const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
+    const checkoutPaymentRouteMatchRef = useRef(checkoutPaymentRouteMatch);
+    checkoutPaymentRouteMatchRef.current = checkoutPaymentRouteMatch;
+    const checkoutShown = useRef(false);
+    checkoutShown.current = checkoutShown.current || (Boolean(checkoutRouteMatch) && !Boolean(checkoutPaymentRouteMatch));
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const checkoutItemsRef = useRef();
     /* This hook is mounted at this level, although not being used directly, for optimization (regarding cache) */
@@ -61,7 +66,8 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
                 !(summaryRouteMatchRef.current ||
                     summaryTabsRouteMatchRef.current ||
                     itemDetailRouteMatchRef.current ||
-                    checkoutRouteMatchRef.current)) {
+                    checkoutRouteMatchRef.current ||
+                    checkoutPaymentRouteMatchRef.current)) {
                 navigateRef.current(`${basePath}/${Routes.SUMMARY}`, { replace: true });
             }
             if (itemWithoutCustomerDecision &&
@@ -79,6 +85,11 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
         onNotAccessible();
         return null;
     }
+    /* Prevent direct payment access */
+    if (checkoutPaymentRouteMatch && !checkoutShown.current) {
+        onNotAccessible();
+        return null;
+    }
     return children;
 };
 export { CheckoutMiddleware };

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

@@ -3,22 +3,24 @@ import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { I18n } from "@lookiero/i18n-react";
 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 { OrderProjection } from "../../../projection/order/order";
-import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+import { Order } from "../../../projection/order/order";
+import { Subscription } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 interface RoutingProps {
     readonly basePath?: string;
     readonly customer: Customer;
-    readonly order: OrderProjection;
-    readonly subscription: SubscriptionProjection;
+    readonly order: Order | undefined;
+    readonly subscription: Subscription | undefined;
     readonly locale: Locale;
     readonly I18n: I18n;
     readonly kameleoon: KameleoonEnvironment;
     readonly layout: Layout;
+    readonly tradename: Tradename;
     readonly getAuthToken: () => Promise<string>;
     readonly onNotAccessible: () => void;
-    readonly onCheckoutFlowSuccess: () => void;
+    readonly onCheckoutSubmitted?: () => void;
     readonly onI18nError?: (err: Error) => void;
     readonly useRedirect: () => Record<string, string>;
     readonly useRoutes: typeof reactRouterUseRoutes;

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

@@ -5,6 +5,7 @@ import { Kameleoon } from "@lookiero/sty-psp-ab-testing";
 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";
@@ -12,11 +13,11 @@ import { Summary } from "../views/summary/Summary";
 import { SummaryTabs } from "../views/summaryTabs/SummaryTabs";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
-const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, getAuthToken, onI18nError, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, tradename, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
     return useRoutes([
         {
             path: "",
-            element: (React.createElement(StaticInfoProvider, { basePath: basePath, customer: customer, kameleoon: kameleoon },
+            element: (React.createElement(StaticInfoProvider, { basePath: basePath, customer: customer, kameleoon: kameleoon, tradename: tradename },
                 React.createElement(I18n, { loader: React.createElement(Spinner, null), locale: locale, onError: onI18nError },
                     React.createElement(Kameleoon, { loader: React.createElement(Spinner, null), siteCode: kameleoon.siteCode },
                         React.createElement(CheckoutMiddleware, { customerId: customer?.customerId, onNotAccessible: onNotAccessible },
@@ -49,7 +50,14 @@ const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, k
                 {
                     path: Routes.CHECKOUT,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        React.createElement(Checkout, { getAuthToken: getAuthToken, layout: layout, order: order, subscription: subscription, useRedirect: useRedirect, onCheckoutFlowSuccess: onCheckoutFlowSuccess }))),
+                        React.createElement(Checkout, { layout: layout, useRedirect: useRedirect },
+                            React.createElement(Outlet, null)))),
+                    children: [
+                        {
+                            path: Routes.CHECKOUT_PAYMENT,
+                            element: (React.createElement(CheckoutPaymentModal, { coupon: order?.coupon || null, getAuthToken: getAuthToken, isFirstOrder: order?.isFirstOrder, orderNumber: order?.orderNumber, subscription: subscription, onCheckoutSubmitted: onCheckoutSubmitted })),
+                        },
+                    ],
                 },
                 {
                     path: Routes.FEEDBACK,

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

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

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

@@ -6,6 +6,7 @@ export var Routes;
     Routes["SUMMARY"] = "summary";
     Routes["SUMMARY_TABS"] = "tabs/:tab";
     Routes["CHECKOUT"] = "checkout";
+    Routes["CHECKOUT_PAYMENT"] = "payment";
     Routes["FEEDBACK"] = "feedback";
     Routes["RETURN"] = "return/:id";
 })(Routes || (Routes = {}));