@lookiero/checkout 10.1.0 → 11.0.0

package/cypress/integration/checkout.spec.ts

@@ -57,11 +57,8 @@ const randomIndex = (count: number) => Math.floor(Math.random() * count);
 const navigateToHome = () => cy.visit("/");
 const confirmCheckout = () => {
   cy.shouldIncludePathInUrl(`${BASEPATH}/${Routes.CHECKOUT}`);
-
   cy.getByTestId("confirm-checkout-button").click();
 
-  cy.shouldIncludePathInUrl(`${BASEPATH}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
-
   interceptViewFirstAvailableCheckoutByCustomerId(
     checkout({
       status: CheckoutStatus.SUBMITTED,

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

@@ -1,21 +1,22 @@
 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, callback: (params: StartLegacyBoxCheckoutCallbackArgs) => Promise<void>): void;
+    (paymentFlowPayload: unknown): 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 };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, };

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

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { forwardRef, useImperativeHandle, } from "react";
+let startLegacyBoxCheckoutListener;
 const setPaymentsBridge = () => void 0;
 const PaymentsQueryProvider = ({ children }) => children;
 const PaymentInstrumentSelect = () => null;
 const paymentFlowRef = {
-    startLegacyBoxCheckout: async (_paymentFlowPayload, callback) => {
-        await callback({ status: "EXECUTED", final: true });
+    startLegacyBoxCheckout: async () => {
+        startLegacyBoxCheckoutListener?.({ success: true });
     },
 };
 const PaymentFlow = forwardRef((_props, ref) => {
@@ -13,8 +14,15 @@ const PaymentFlow = forwardRef((_props, ref) => {
     return null;
 });
 PaymentFlow.displayName = "PaymentFlow";
+const paymentStatusManagerResult = {
+    isLoading: false,
+    consumePayload: (callback) => {
+        startLegacyBoxCheckoutListener = () => callback({ success: true });
+    },
+};
+const usePaymentStatusManager = () => paymentStatusManagerResult;
 var Section;
 (function (Section) {
     Section["BOX_CHECKOUT"] = "box-checkout";
 })(Section || (Section = {}));
-export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, paymentFlowRef };
+export { PaymentsQueryProvider, PaymentInstrumentSelect, PaymentFlow, Section, setPaymentsBridge, usePaymentStatusManager, };

package/dist/index.d.ts

@@ -10,8 +10,8 @@ import { KameleoonEnvironment } from "./src/infrastructure/ab-testing/kameleoonE
 import { RootProps } from "./src/infrastructure/ui/Root";
 import { CheckoutProjection } from "./src/projection/checkout/checkout";
 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;
 }
@@ -34,4 +34,4 @@ interface BootstrapFunction {
 }
 declare const bootstrap: BootstrapFunction;
 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/dist/src/ExpoRoot.js

@@ -1,3 +1,4 @@
+import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { useCallback, useState } from "react";
@@ -18,7 +19,7 @@ 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.en_GB;
+const locale = Locale.es_ES;
 const subscription = "b";
 const order = {
     isFirstOrder: false,
@@ -26,9 +27,11 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "a4355713-469b-4684-bf90-3215702dfb1c",
-    country: Country.ES,
+    customerId: "9cfb056e-6008-44b1-9075-320479bf92ac",
+    country: Country.NL,
     segment: Segment.WOMEN,
+    email: "email@example.com",
+    name: "Adèle Léonce Émilie",
 };
 const sentryConfig = {
     publicKey: "66cadf9444db4ea5945670f12ec08ae7",
@@ -41,7 +44,7 @@ const apiUrl = Platform.OS !== "web"
     : __DEV__
         ? "/local-to-dev"
         : "/checkout/api";
-const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2ODkxMDAsImV4cCI6MTc0NjI3ODQwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMDMiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiYTQzNTU3MTMtNDY5Yi00Njg0LWJmOTAtMzIxNTcwMmRmYjFjIiwiaWF0IjoxNzQzNjg2NDAyfQ.pmqFo-4s0USFpzCnijRt78bWuBdu2Q7f4L9UtOkfAwo";
+const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
 const getAuthToken = () => Promise.resolve(authToken);
 const externalTranslationsUrl = Platform.OS !== "web"
     ? "https://backend-for-user.dev.envs.lookiero.tech/api/v2/translations"
@@ -76,6 +79,7 @@ setPaymentsBridge({
     useFeatureFlags: () => ({}),
     locale: () => Promise.resolve("es-ES"),
     scrollView: ScrollView,
+    hostUrl: "",
 });
 const kameleoonConfig = {
     siteCode: "aplm4v3ckn",
@@ -106,13 +110,14 @@ const ExpoRoot = () => {
     });
     const [isAccessible, setIsAccessible] = useState();
     const onNotAccessible = useCallback(() => setIsAccessible(false), []);
-    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;
+    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, tradename: Tradename.LOOKIERO, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), 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;
+    readonly checkoutBookingId: string | undefined;
     readonly logger: Logger;
 }
 interface UseBlockCheckoutBookingFunction {

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

@@ -1,4 +1,5 @@
 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";
@@ -8,6 +9,7 @@ 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/checkout/checkout.mock.d.ts

@@ -3,6 +3,7 @@ import { CheckoutProjection } from "../../../projection/checkout/checkout";
 import { CheckoutItemFunctionArgs } from "../checkoutItem/checkoutItem.mock";
 import { CheckoutDto } from "./checkout";
 interface CheckoutDtoFunctionArgs {
+    readonly id?: string;
     readonly status?: CheckoutStatus;
     readonly items: CheckoutItemFunctionArgs[];
 }

package/dist/src/infrastructure/projection/checkout/checkout.mock.js

@@ -8,8 +8,8 @@ const itemIds = [
     "8af02b73-0b0a-46a0-a3a8-d9710815c739",
     "8890e00b-d4ed-4220-ae13-52cd88ae8ed5",
 ];
-const checkoutDto = ({ status = CheckoutStatus.STARTED, items }) => ({
-    id: "9c450400-0cd7-44a4-b0e3-e0002a9bf8df",
+const checkoutDto = ({ id = "9c450400-0cd7-44a4-b0e3-e0002a9bf8df", status = CheckoutStatus.STARTED, items, }) => ({
+    id,
     status,
     customerId: "0df61ca7-7e4d-462b-a422-a57de0d116b4",
     boxId: "9c406e57-100a-4aa6-83c5-016e7c2970e7",
@@ -17,5 +17,5 @@ const checkoutDto = ({ status = CheckoutStatus.STARTED, items }) => ({
     expiresOn: "2022-09-20",
     items: items.map(({ id, status, feedbacks, replacedFor }, index) => checkoutItem({ id: id || itemIds[index], status, feedbacks, replacedFor })),
 });
-const checkout = ({ status, items }) => toCheckoutProjection(checkoutDto({ status, items }));
+const checkout = ({ id, status, items }) => toCheckoutProjection(checkoutDto({ id, status, items }));
 export { checkout, checkoutDto };

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;
+    readonly checkoutId: string | undefined;
     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 }),
+    query: viewPricingByCheckoutId({ checkoutId: checkoutId }),
     contextId: MESSAGING_CONTEXT_ID,
     invalidation: shouldInvalidate,
     options: {
@@ -21,6 +21,7 @@ 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 { Subscription } from "../../projection/subscription/subscription";
+import { SubscriptionProjection } 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: Subscription;
+                readonly subscription: SubscriptionProjection;
                 readonly coupon: string | null;
                 readonly orderId: number;
                 readonly value: number;

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

@@ -1,26 +1,19 @@
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
-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;
-}
+import { CheckoutProjection } from "../../projection/checkout/checkout";
+import { OrderProjection } from "../../projection/order/order";
+import { PricingProjection } from "../../projection/pricing/pricing";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 interface TrackCheckoutFunction {
-    (args: TrackCheckoutFunctionArgs): void;
+    (): void;
 }
 interface UseTrackCheckoutFunctionArgs {
-    readonly page: TrackingPage;
+    readonly order: OrderProjection;
+    readonly checkout: CheckoutProjection | undefined;
+    readonly pricing: PricingProjection | undefined;
+    readonly subscription: SubscriptionProjection;
+    readonly userId: string;
     readonly country: Country;
-    readonly checkoutId: string | undefined;
     readonly segment: Segment;
 }
 interface UseTrackCheckoutFunction {

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

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

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

@@ -8,8 +8,8 @@ import { SentryEnvironment, SentryLoggerFunctionArgs } from "@lookiero/sty-psp-l
 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 RootFunctionArgs {
     readonly Messaging: MessagingRoot;
@@ -25,14 +25,14 @@ interface RootFunction {
 }
 interface RootProps {
     readonly basePath: string;
-    readonly locale?: Locale;
+    readonly locale: Locale;
     readonly customer: Customer;
-    readonly order: Order | undefined;
-    readonly subscription: Subscription | undefined;
+    readonly order: OrderProjection;
+    readonly subscription: SubscriptionProjection;
     readonly layout: Layout;
     readonly tradename: Tradename;
     readonly onNotAccessible: () => void;
-    readonly onCheckoutSubmitted?: () => void;
+    readonly onCheckoutFlowSuccess: () => void;
     readonly useRedirect: () => Record<string, string>;
     readonly useRoutes?: typeof reactRouterUseRoutes;
 }

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

@@ -2,7 +2,6 @@
 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";
@@ -10,11 +9,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 = Locale.en_GB, customer, order, subscription, layout, tradename, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    const Root = ({ basePath, locale, customer, order, subscription, layout, tradename, onNotAccessible, onCheckoutFlowSuccess, 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, tradename: tradename, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, 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, onCheckoutFlowSuccess: onCheckoutFlowSuccess, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
     };
     const hoc = sentryLoggerHOC({ logger });
     /**

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

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { CheckoutProjection } from "../../../projection/checkout/checkout";
+import { OrderProjection } from "../../../projection/order/order";
+import { SubscriptionProjection } from "../../../projection/subscription/subscription";
+type CheckoutFlowStatus = "idle" | "loading" | "success" | "error";
+interface CheckoutFlowFunction {
+    (): Promise<void>;
+}
+type CheckoutFlowReturn = [
+    checkoutFlow: CheckoutFlowFunction,
+    checkoutFlowStatus: CheckoutFlowStatus,
+    paymentFlow: ReactNode
+];
+interface UseCheckoutFlowArgs {
+    readonly checkout: CheckoutProjection | undefined;
+    readonly order: OrderProjection;
+    readonly subscription: SubscriptionProjection;
+    readonly getAuthToken: () => Promise<string>;
+    readonly onSuccess: () => void;
+}
+interface UseCheckoutFlowFunction {
+    (args: UseCheckoutFlowArgs): CheckoutFlowReturn;
+}
+declare const useCheckoutFlow: UseCheckoutFlowFunction;
+export type { CheckoutFlowStatus };
+export { useCheckoutFlow };

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

@@ -0,0 +1,127 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CommandStatus } from "@lookiero/messaging-react";
+import { PaymentFlow, Section } from "@lookiero/payments-front";
+import { useLogger } from "@lookiero/sty-psp-logging";
+import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { viewCheckoutBookingById, } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
+import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
+import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
+import { useViewPricingByCheckoutId } from "../../projection/pricing/react/useViewPricingByCheckoutId";
+import { useTrackCheckout } from "../../tracking/useTrackCheckout";
+import { I18nMessages } from "../i18n/i18n";
+import { Routes } from "../routing/routes";
+import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
+import { useQueryBus } from "./useQueryBus";
+import { useStaticInfo } from "./useStaticInfo";
+const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection, subscription: subscriptionProjection, getAuthToken, onSuccess, }) => {
+    const logger = useLogger();
+    const queryBus = useQueryBus();
+    const { customer: { customerId, country, segment, name, email }, basePath, } = useStaticInfo();
+    const paymentFlowRef = useRef(null);
+    const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
+        checkoutId: checkoutProjection?.id,
+    });
+    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id });
+    const [pricing] = useViewPricingByCheckoutId({
+        checkoutId: checkoutProjection?.id,
+        queryOptions: { refetchOnMount: true },
+    });
+    const [submitCheckout, submitCheckoutStatus] = useSubmitCheckout({
+        checkoutId: checkoutProjection?.id,
+        logger,
+    });
+    const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({
+        checkoutBookingId: checkoutProjection?.checkoutBookingId,
+        logger,
+    });
+    const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+    const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
+    const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
+    const [authToken, setAuthToken] = useState();
+    useEffect(() => {
+        const loadAuthToken = async () => setAuthToken(await getAuthToken());
+        loadAuthToken();
+    }, [getAuthToken]);
+    const trackCheckout = useTrackCheckout({
+        checkout: checkoutProjection,
+        order: orderProjection,
+        pricing,
+        subscription: subscriptionProjection,
+        userId: customerId,
+        country,
+        segment,
+    });
+    const checkoutFlow = useCallback(async () => {
+        try {
+            sizeChangeEnabled && (await blockCheckoutBooking());
+        }
+        catch (error) {
+            return;
+        }
+        if (checkoutProjection?.checkoutBookingId) {
+            const checkoutBooking = await queryBus(viewCheckoutBookingById({ checkoutBookingId: checkoutProjection?.checkoutBookingId }));
+            if (checkoutBooking?.isExpired) {
+                setCheckoutBookingExpired(true);
+                return;
+            }
+        }
+        setStartLegacyBoxCheckoutStatus("loading");
+        paymentFlowRef.current?.startLegacyBoxCheckout({
+            ...paymentFlowPayload,
+            userInformation: { email, name },
+            returnUrl: `${basePath}/${Routes.CHECKOUT}`,
+        });
+    }, [
+        checkoutProjection?.checkoutBookingId,
+        paymentFlowPayload,
+        email,
+        name,
+        basePath,
+        sizeChangeEnabled,
+        blockCheckoutBooking,
+        queryBus,
+    ]);
+    const onPaymentSuccess = useCallback(async () => {
+        setStartLegacyBoxCheckoutStatus("success");
+        await submitCheckout();
+        createNotification({
+            bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
+            level: NotificationLevel.SUCCESS,
+        });
+        trackCheckout();
+        onSuccess();
+    }, [createNotification, onSuccess, submitCheckout, trackCheckout]);
+    const onPaymentError = useCallback((payload) => {
+        setStartLegacyBoxCheckoutStatus("error");
+        createNotification({
+            bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+            level: NotificationLevel.ERROR,
+        });
+    }, [createNotification]);
+    usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
+    const checkoutFlowStatus = useMemo(() => {
+        if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
+            startLegacyBoxCheckoutStatus === "loading" ||
+            submitCheckoutStatus === CommandStatus.LOADING) {
+            return "loading";
+        }
+        if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
+            startLegacyBoxCheckoutStatus === "success" &&
+            submitCheckoutStatus === CommandStatus.SUCCESS) {
+            return "success";
+        }
+        if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
+            startLegacyBoxCheckoutStatus === "error" ||
+            submitCheckoutStatus === CommandStatus.ERROR ||
+            checkoutBookingExpired) {
+            return "error";
+        }
+        return "idle";
+    }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutStatus, checkoutBookingExpired]);
+    const paymentFlow = useMemo(() => (authToken ? React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken }) : null), [authToken]);
+    return useMemo(() => [checkoutFlow, checkoutFlowStatus, paymentFlow], [checkoutFlow, paymentFlow, checkoutFlowStatus]);
+};
+export { useCheckoutFlow };

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

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

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 };