@lookiero/checkout 10.1.0 → 11.1.0

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

@@ -1,29 +1,20 @@
-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,
-            });
-        }
-    }, [createNotification]);
+import { useEffect } from "react";
+import { Section, usePaymentStatusManager } from "@lookiero/payments-front";
+const usePaymentInstrumentEvents = ({ onSuccess, onError }) => {
+    const refreshStatus = usePaymentStatusManager(Section.BOX_CHECKOUT);
     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]);
+        const { isLoading, consumePayload } = refreshStatus;
+        if (isLoading) {
+            return;
+        }
+        consumePayload((payload) => {
+            if (payload.success) {
+                onSuccess(payload);
+            }
+            else {
+                onError(payload);
+            }
+        });
+    }, [onError, onSuccess, refreshStatus]);
 };
 export { usePaymentInstrumentEvents };

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

@@ -47,6 +47,7 @@ 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,6 +49,7 @@ 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,11 +33,6 @@ 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) */
@@ -66,8 +61,7 @@ const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.create
                 !(summaryRouteMatchRef.current ||
                     summaryTabsRouteMatchRef.current ||
                     itemDetailRouteMatchRef.current ||
-                    checkoutRouteMatchRef.current ||
-                    checkoutPaymentRouteMatchRef.current)) {
+                    checkoutRouteMatchRef.current)) {
                 navigateRef.current(`${basePath}/${Routes.SUMMARY}`, { replace: true });
             }
             if (itemWithoutCustomerDecision &&
@@ -85,11 +79,6 @@ 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

@@ -5,14 +5,14 @@ import { Locale } from "@lookiero/sty-psp-locale";
 import { Layout } from "@lookiero/sty-psp-ui";
 import { Tradename } from "@lookiero/sty-sp-tradename";
 import { Customer } from "../../../projection/customer/customer";
-import { Order } from "../../../projection/order/order";
-import { Subscription } from "../../../projection/subscription/subscription";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
 interface RoutingProps {
     readonly basePath?: string;
     readonly customer: Customer;
-    readonly order: Order | undefined;
-    readonly subscription: Subscription | undefined;
+    readonly order: OrderProjection;
+    readonly subscription: SubscriptionProjection;
     readonly locale: Locale;
     readonly I18n: I18n;
     readonly kameleoon: KameleoonEnvironment;
@@ -20,7 +20,7 @@ interface RoutingProps {
     readonly tradename: Tradename;
     readonly getAuthToken: () => Promise<string>;
     readonly onNotAccessible: () => void;
-    readonly onCheckoutSubmitted?: () => void;
+    readonly onCheckoutFlowSuccess: () => void;
     readonly onI18nError?: (err: Error) => void;
     readonly useRedirect: () => Record<string, string>;
     readonly useRoutes: typeof reactRouterUseRoutes;

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

@@ -5,7 +5,6 @@ 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";
@@ -13,7 +12,7 @@ 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, tradename, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, tradename, getAuthToken, onI18nError, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
     return useRoutes([
         {
             path: "",
@@ -50,14 +49,7 @@ const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, k
                 {
                     path: Routes.CHECKOUT,
                     element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
-                        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 })),
-                        },
-                    ],
+                        React.createElement(Checkout, { getAuthToken: getAuthToken, layout: layout, order: order, subscription: subscription, useRedirect: useRedirect, onCheckoutFlowSuccess: onCheckoutFlowSuccess }))),
                 },
                 {
                     path: Routes.FEEDBACK,

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

@@ -5,7 +5,6 @@ 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,7 +6,6 @@ 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 = {}));

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

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

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

@@ -1,8 +1,13 @@
-import { FC, ReactNode } from "react";
+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";
 interface CheckoutProps {
-    readonly children?: ReactNode;
     readonly layout: UiLayout;
+    readonly order: OrderProjection;
+    readonly subscription: SubscriptionProjection;
+    readonly getAuthToken: () => Promise<string>;
+    readonly onCheckoutFlowSuccess: () => void;
     readonly useRedirect: () => Record<string, string>;
 }
 declare const Checkout: FC<CheckoutProps>;

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

@@ -4,6 +4,7 @@ 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";
@@ -14,6 +15,7 @@ import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
+import { useCheckoutFlow } from "../../hooks/useCheckoutFlow";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
@@ -22,7 +24,7 @@ import { Pricing } from "../summary/components/pricing/Pricing";
 import { style } from "./Checkout.style";
 import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
-const Checkout = ({ children, layout: Layout, useRedirect }) => {
+const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedirect, onCheckoutFlowSuccess, }) => {
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
     const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
@@ -31,6 +33,13 @@ const Checkout = ({ children, layout: Layout, useRedirect }) => {
     const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
+    const [checkoutFlow, checkoutFlowStatus, paymentFlowComponent] = useCheckoutFlow({
+        checkout,
+        order,
+        subscription,
+        getAuthToken,
+        onSuccess: onCheckoutFlowSuccess,
+    });
     useTrackPageView({
         page: TrackingPage.CHECKOUT,
         country,
@@ -44,10 +53,10 @@ const Checkout = ({ children, layout: Layout, useRedirect }) => {
         segment,
         checkoutId: checkout?.id,
     });
-    const handleOnSubmit = useCallback(() => {
+    const handleOnSubmit = useCallback(async () => {
         trackPressContinue();
-        navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`, { replace: true });
-    }, [basePath, navigate, trackPressContinue]);
+        await checkoutFlow();
+    }, [checkoutFlow, trackPressContinue]);
     const checkoutItemsKept = useMemo(() => checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const hasReplacedCheckoutItem = useMemo(() => checkout?.items.some((checkoutItem) => checkoutItem.status === CheckoutItemStatus.REPLACED), [checkout?.items]);
     const trackPressBack = useTrackPressBack({
@@ -75,19 +84,21 @@ 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 })))),
-                        React.createElement(View, { style: style.paymentSelector },
-                            React.createElement(PaymentInstrument, { useRedirect: useRedirect })))),
+                        country !== Country.NL && (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))),
+                    screen.L ? (React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
         pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
             React.createElement(Body, null,
-                React.createElement(Button, { testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
-        children));
+                React.createElement(Button, { busy: checkoutFlowStatus === "loading", testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
+        paymentFlowComponent));
 };
 export { Checkout };

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "10.1.0";
+export declare const VERSION = "11.1.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "10.1.0";
+export const VERSION = "11.1.0";

package/fake-dependencies/@lookiero/payments-front/index.tsx

@@ -7,34 +7,62 @@ import {
   RefAttributes,
   useImperativeHandle,
 } from "react";
+import { PaymentPayload } from "@lookiero/payments-front";
+
+let startLegacyBoxCheckoutListener: ({ success }: { success: boolean }) => void;
 
 const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider: FC<PropsWithChildren> = ({ children }) => children;
 const PaymentInstrumentSelect: FC = () => null;
-interface StartLegacyBoxCheckoutCallbackArgs {
-  readonly status: string;
-  readonly final: boolean;
-}
+
 interface StartLegacyBoxCheckoutFunction {
-  (paymentFlowPayload: unknown, callback: (params: StartLegacyBoxCheckoutCallbackArgs) => Promise<void>): void;
+  (paymentFlowPayload: unknown): void;
 }
+
 interface PaymentFlowRef {
   readonly startLegacyBoxCheckout: StartLegacyBoxCheckoutFunction;
 }
+
 const paymentFlowRef: PaymentFlowRef = {
-  startLegacyBoxCheckout: async (_paymentFlowPayload, callback) => {
-    await callback({ status: "EXECUTED", final: true });
+  startLegacyBoxCheckout: async () => {
+    startLegacyBoxCheckoutListener?.({ success: true });
   },
 };
+
 const PaymentFlow: ForwardRefExoticComponent<RefAttributes<PaymentFlowRef>> = forwardRef<PaymentFlowRef, unknown>(
   (_props, ref) => {
     useImperativeHandle(ref, () => paymentFlowRef, []);
     return null;
   },
 );
+
 PaymentFlow.displayName = "PaymentFlow";
+
+interface UsePaymentStatusManagerResult {
+  isLoading: boolean;
+  consumePayload: (callback: (payload: PaymentPayload) => void) => void;
+}
+
+const paymentStatusManagerResult: UsePaymentStatusManagerResult = {
+  isLoading: false,
+  consumePayload: (callback) => {
+    startLegacyBoxCheckoutListener = () => callback({ success: true } as PaymentPayload);
+  },
+};
+
+const usePaymentStatusManager: (section: Section) => UsePaymentStatusManagerResult = () => paymentStatusManagerResult;
+
 enum Section {
   BOX_CHECKOUT = "box-checkout",
 }
+
 export type { PaymentFlowRef };
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };
+
+export {
+  PaymentsQueryProvider,
+  PaymentInstrumentSelect,
+  PaymentFlow,
+  Section,
+  setPaymentsBridge,
+  usePaymentStatusManager,
+};

package/index.ts

@@ -14,8 +14,8 @@ import { DOMAIN } from "./src/infrastructure/ui/i18n/i18n";
 import { CheckoutProjection } from "./src/projection/checkout/checkout";
 import { viewFirstAvailableCheckoutByCustomerId } from "./src/projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { Customer } from "./src/projection/customer/customer";
-import { Order } from "./src/projection/order/order";
-import { Subscription } from "./src/projection/subscription/subscription";
+import { OrderProjection } from "./src/projection/order/order";
+import { SubscriptionProjection } from "./src/projection/subscription/subscription";
 
 interface FirstAvailableCheckoutByCustomerIdFunctionArgs {
   readonly customerId: string | undefined;
@@ -59,4 +59,11 @@ const bootstrap: BootstrapFunction = ({ apiUrl, getAuthToken, translations, sent
 };
 
 export { bootstrap, translationEndpoint, translationExternalEndpoint, Country, Segment, CheckoutStatus, Tradename };
-export type { SentryEnvironment, KameleoonEnvironment, Customer, Subscription, Order, Locale };
+export type {
+  SentryEnvironment,
+  KameleoonEnvironment,
+  Customer,
+  SubscriptionProjection as Subscription,
+  OrderProjection as Order,
+  Locale,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "10.1.0",
+  "version": "11.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -46,7 +46,7 @@
     "@cypress/webpack-preprocessor": "^6.0.2",
     "@lookiero/eslint-config-sty-psp": "*",
     "@lookiero/event": "^0.3",
-    "@lookiero/payments-front": "6.0.3",
+    "@lookiero/payments-front": "^7.0.0",
     "@lookiero/sty-psp-jest-config": "*",
     "@lookiero/sty-psp-prettier-config": "*",
     "@lookiero/sty-psp-scripts": "*",
@@ -71,12 +71,11 @@
   "peerDependencies": {
     "@gorhom/portal": ">=1.0",
     "@lookiero/aurora": ">=6",
-    "@lookiero/aurora-fonts": ">=2",
     "@lookiero/aurora-iconfont": ">=3",
     "@lookiero/event": "^0.3",
     "@lookiero/i18n": ">=2",
     "@lookiero/i18n-react": ">=2",
-    "@lookiero/payments-front": "6.0.3",
+    "@lookiero/payments-front": ">=7",
     "apollo-boost": "0.4.4",
     "expo": ">=51",
     "expo-font": ">=12",

package/src/Expo.tsx

@@ -1,8 +1,16 @@
 import { registerRootComponent } from "expo";
+import React from "react";
 import { enableLegacyWebImplementation } from "react-native-gesture-handler";
 import "react-native-get-random-values";
-import { ExpoRoot } from "./ExpoRoot";
+import { setTheme } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
 
 enableLegacyWebImplementation(true);
 
-registerRootComponent(ExpoRoot);
+const tradename = Tradename.LOOKIERO;
+setTheme({ tradename });
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { ExpoRoot } = require("./ExpoRoot");
+
+registerRootComponent(() => <ExpoRoot tradename={tradename} />);