@lookiero/checkout 10.0.1 → 11.0.0

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.0.1";
+export declare const VERSION = "11.0.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "10.0.1";
+export const VERSION = "11.0.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.0.1",
+  "version": "11.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -32,7 +32,7 @@
     "@lookiero/sty-psp-segment": "^0.1",
     "@lookiero/sty-psp-storage": "^0.2",
     "@lookiero/sty-psp-tracking": "^0.2",
-    "@lookiero/sty-sp-tradename": "^0.1",
+    "@lookiero/sty-sp-tradename": "^1.0",
     "@lookiero/sty-psp-ui": "^0.7",
     "@lookiero/sty-psp-ui-settings": "^0.2",
     "@lookiero/sty-psp-units": "^0.1",
@@ -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": "*",
@@ -76,7 +76,7 @@
     "@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/ExpoRoot.tsx

@@ -1,3 +1,4 @@
+import { PortalProvider } from "@gorhom/portal";
 import { useFonts } from "expo-font";
 import "expo/build/Expo.fx";
 import React, { FC, useCallback, useState } from "react";
@@ -21,22 +22,24 @@ import { root } from "./infrastructure/ui/Root";
 import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
 import { Router } from "./infrastructure/ui/routing/router/Router";
 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 { VERSION } from "./version";
 
-const locale: Locale = Locale.en_GB;
-const subscription: Subscription = "b";
-const order: Order = {
+const locale: Locale = Locale.es_ES;
+const subscription: SubscriptionProjection = "b";
+const order: OrderProjection = {
   isFirstOrder: false,
   orderNumber: 3687582,
   coupon: "MYLOOKIERO",
 };
 
 const customer: 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: SentryEnvironment = {
@@ -53,7 +56,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2ODkxMDAsImV4cCI6MTc0NjI3ODQwMiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjUtMDQtMDMiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiYTQzNTU3MTMtNDY5Yi00Njg0LWJmOTAtMzIxNTcwMmRmYjFjIiwiaWF0IjoxNzQzNjg2NDAyfQ.pmqFo-4s0USFpzCnijRt78bWuBdu2Q7f4L9UtOkfAwo";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NDk0NjYsImV4cCI6MTc0MjQ3MDI5OSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTExIiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6ImQzYzIzNTRiLTk4MTEtNDZkNC1iMmJhLTVmYmEwMTJlZDk0ZCIsImlhdCI6MTc0MDA1MTA5OX0.AkuUZTsn9mgplQwatg0dPKyv1Hsc6r267UMahxMH19g";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =
@@ -94,6 +97,7 @@ setPaymentsBridge({
   useFeatureFlags: () => ({}),
   locale: () => Promise.resolve("es-ES"),
   scrollView: ScrollView,
+  hostUrl: "",
 });
 
 const kameleoonConfig: KameleoonEnvironment = {
@@ -131,36 +135,39 @@ const ExpoRoot: FC = () => {
   const onNotAccessible = useCallback(() => setIsAccessible(false), []);
 
   return fontsLoaded ? (
-    <PaymentsQueryProvider>
-      <EventProvider>
-        <Aurora>
-          {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
+    <PortalProvider>
+      <PaymentsQueryProvider>
+        <EventProvider>
+          <Aurora>
+            {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
 
-          <Router>
-            <Routes>
-              <Route
-                path="/checkout/*"
-                element={
-                  <Root
-                    basePath="/checkout"
-                    customer={customer}
-                    layout={DummyLayout}
-                    locale={locale}
-                    order={order}
-                    subscription={subscription}
-                    tradename={Tradename.LOOKIERO}
-                    useRedirect={useRedirect}
-                    onNotAccessible={onNotAccessible}
-                  />
-                }
-              />
+            <Router>
+              <Routes>
+                <Route
+                  path="/checkout/*"
+                  element={
+                    <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}
+                    />
+                  }
+                />
 
-              <Route element={<Navigate to="/checkout" replace />} path="*" />
-            </Routes>
-          </Router>
-        </Aurora>
-      </EventProvider>
-    </PaymentsQueryProvider>
+                <Route element={<Navigate to="/checkout" replace />} path="*" />
+              </Routes>
+            </Router>
+          </Aurora>
+        </EventProvider>
+      </PaymentsQueryProvider>
+    </PortalProvider>
   ) : null;
 };
 

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

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import invariant from "tiny-invariant";
 import { CommandStatus, useCommand } from "@lookiero/messaging-react";
 import { Logger } from "@lookiero/sty-psp-logging";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
@@ -13,7 +14,7 @@ interface BlockCheckoutBookingFunction {
 type UseBlockCheckoutBooking = [blockCheckoutBooking: BlockCheckoutBookingFunction, status: CommandStatus];
 
 interface UseBlockCheckoutBookingFunctionArgs {
-  readonly checkoutBookingId: string;
+  readonly checkoutBookingId: string | undefined;
   readonly logger: Logger;
 }
 
@@ -26,6 +27,8 @@ const useBlockCheckoutBooking: UseBlockCheckoutBookingFunction = ({ checkoutBook
   const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
 
   const blockCheckoutBooking = useCallback(async () => {
+    invariant(checkoutBookingId, "checkoutBookingId is required");
+
     try {
       await commandBus(
         blockCheckoutBookingCommand({

package/src/infrastructure/projection/checkout/checkout.mock.ts

@@ -11,6 +11,7 @@ const itemIds = [
   "8890e00b-d4ed-4220-ae13-52cd88ae8ed5",
 ];
 interface CheckoutDtoFunctionArgs {
+  readonly id?: string;
   readonly status?: CheckoutStatus;
   readonly items: CheckoutItemFunctionArgs[];
 }
@@ -19,8 +20,12 @@ interface CheckoutDtoFunction {
   (args: CheckoutDtoFunctionArgs): CheckoutDto;
 }
 
-const checkoutDto: CheckoutDtoFunction = ({ status = CheckoutStatus.STARTED, items }) => ({
-  id: "9c450400-0cd7-44a4-b0e3-e0002a9bf8df",
+const checkoutDto: CheckoutDtoFunction = ({
+  id = "9c450400-0cd7-44a4-b0e3-e0002a9bf8df",
+  status = CheckoutStatus.STARTED,
+  items,
+}) => ({
+  id,
   status,
   customerId: "0df61ca7-7e4d-462b-a422-a57de0d116b4",
   boxId: "9c406e57-100a-4aa6-83c5-016e7c2970e7",
@@ -37,6 +42,6 @@ interface CheckoutFunction {
   (args: CheckoutFunctionArgs): CheckoutProjection;
 }
 
-const checkout: CheckoutFunction = ({ status, items }) => toCheckoutProjection(checkoutDto({ status, items }));
+const checkout: CheckoutFunction = ({ id, status, items }) => toCheckoutProjection(checkoutDto({ id, status, items }));
 
 export { checkout, checkoutDto };