@lookiero/checkout 9.13.0 → 10.0.0-beta.0

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

@@ -0,0 +1,20 @@
+import { EndpointFunction } from "@lookiero/i18n";
+
+interface TranslationEndpointFunctionArgs {
+  readonly translationsUrl: string;
+  readonly translationsApiKey: string;
+}
+interface TranslationEndpointFunction {
+  (args: TranslationEndpointFunctionArgs): EndpointFunction;
+}
+declare const translationEndpoint: TranslationEndpointFunction;
+type Project = "user-area-front" | "inventory-catalog" | "checkout";
+interface TranslationExternalEndpointFunctionArgs {
+  readonly translationsUrl: string;
+  readonly projects: [project: Project, filter?: string][];
+}
+interface TranslationExternalEndpointFunction {
+  (args: TranslationExternalEndpointFunctionArgs): EndpointFunction;
+}
+declare const translationExternalEndpoint: TranslationExternalEndpointFunction;
+export { translationEndpoint, translationExternalEndpoint };

package/dist/src/infrastructure/ui/i18n/translationEndpoint.js

@@ -0,0 +1,27 @@
+import { Country } from "../../../projection/shared/country";
+import { Locale } from "../../../projection/shared/locale";
+
+const translationEndpoint =
+  ({ translationsUrl, translationsApiKey }) =>
+  (locale) =>
+    `${translationsUrl}/${locale}?key=${translationsApiKey}&no-folding=true`;
+const COUNTRY = {
+  [Locale.ES]: Country.ES,
+  [Locale.FR]: Country.FR,
+  [Locale.EN]: Country.GB,
+  [Locale.IT]: Country.IT,
+  [Locale.PT]: Country.PT,
+  [Locale.DE]: Country.DE,
+  [Locale.AT]: Country.AT,
+  [Locale.NL]: Country.NL,
+  [Locale.SE]: Country.SE,
+};
+const translationExternalEndpoint =
+  ({ translationsUrl, projects }) =>
+  (locale) => {
+    const projectsQueryParam = projects
+      .map(([project, filter]) => `projectFilter=${project}${filter ? `:${filter}` : ""}`)
+      .join("&");
+    return `${translationsUrl}/${locale}/${COUNTRY[locale]}?${projectsQueryParam}`;
+  };
+export { translationEndpoint, translationExternalEndpoint };

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

@@ -0,0 +1,10 @@
+import { FC } from "react";
+
+interface CheckoutAccessibilityMiddlewareProps {
+  readonly customerId: string | undefined;
+  readonly onNotAccessible: () => void;
+  readonly loader?: JSX.Element;
+  readonly children: JSX.Element;
+}
+declare const CheckoutAccessibilityMiddleware: FC<CheckoutAccessibilityMiddlewareProps>;
+export { CheckoutAccessibilityMiddleware };

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

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from "react";
+import { Spinner } from "@lookiero/aurora";
+import { QueryStatus } from "@lookiero/messaging-react";
+import { useViewIsCheckoutAccessibleByCustomerId } from "../../projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId";
+
+const CheckoutAccessibilityMiddleware = ({
+  customerId,
+  onNotAccessible,
+  loader = React.createElement(Spinner, null),
+  children,
+}) => {
+  const [accessible, status] = useViewIsCheckoutAccessibleByCustomerId({ customerId });
+  const onNotAccessibleRef = useRef(onNotAccessible);
+  onNotAccessibleRef.current = onNotAccessible;
+  const notAccessible = accessible === false || status === QueryStatus.ERROR;
+  useEffect(() => {
+    if (notAccessible) {
+      onNotAccessibleRef.current();
+    }
+  }, [notAccessible]);
+  return accessible === undefined && [QueryStatus.IDLE, QueryStatus.LOADING].includes(status)
+    ? loader
+    : accessible
+      ? children
+      : null;
+};
+export { CheckoutAccessibilityMiddleware };

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

@@ -7,11 +7,11 @@ import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutI
 import { useStartCheckout } from "../../domain/checkout/react/useStartCheckout";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
+import { useStaticInfo } from "../hooks/useStaticInfo";
 import { Routes } from "./routes";
-import { useBasePath } from "./useBasePath";
 const CheckoutMiddleware = ({ customerId, onNotAccessible, loader = React.createElement(Spinner, null), children, }) => {
     const logger = useLogger();
-    const basePath = useBasePath();
+    const { basePath } = useStaticInfo();
     const navigate = useNavigate();
     const navigateRef = useRef(navigate);
     navigateRef.current = navigate;
@@ -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

@@ -4,21 +4,21 @@ import { I18n } from "@lookiero/i18n-react";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { Layout } from "@lookiero/sty-psp-ui";
 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;
     readonly layout: Layout;
     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,18 +12,16 @@ import { Summary } from "../views/summary/Summary";
 import { SummaryTabs } from "../views/summaryTabs/SummaryTabs";
 import { CheckoutMiddleware } from "./CheckoutMiddleware";
 import { Routes } from "./routes";
-import { BasePathProvider } from "./useBasePath";
-const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, kameleoon, layout, getAuthToken, onI18nError, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
     return useRoutes([
         {
             path: "",
-            element: (React.createElement(BasePathProvider, { basePath: basePath },
-                React.createElement(StaticInfoProvider, { customer: customer, kameleoon: kameleoon },
-                    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 },
-                                React.createElement(App, null,
-                                    React.createElement(Outlet, null)))))))),
+            element: (React.createElement(StaticInfoProvider, { basePath: basePath, customer: customer, kameleoon: kameleoon },
+                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 },
+                            React.createElement(App, null,
+                                React.createElement(Outlet, null))))))),
             children: [
                 {
                     path: Routes.ITEM,
@@ -52,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/test/render.js

@@ -1,18 +1,14 @@
 import { render } from "@testing-library/react-native";
 import { mock } from "jest-mock-extended";
 import React, { Fragment } from "react";
+import { IntlProvider } from "react-intl";
 import { Aurora } from "@lookiero/aurora";
-import { createI18nProvider } from "@lookiero/i18n-react";
 import { LoggerProvider } from "@lookiero/sty-psp-logging";
-import { DOMAIN } from "../i18n/i18n";
-import { BasePathProvider } from "../routing/useBasePath";
-const I18nProvider = createI18nProvider({ domain: DOMAIN });
 const renderWrapper = ({ locale, messages = {}, wrapper: Wrapper = Fragment, logger = mock() }) => 
 // eslint-disable-next-line react/display-name, react/prop-types
 ({ children }) => (React.createElement(Aurora, null,
-    React.createElement(I18nProvider, { locale: locale, messages: messages, onError: () => void 0 },
+    React.createElement(IntlProvider, { locale: locale, messages: messages, onError: () => void 0 },
         React.createElement(LoggerProvider, { logger: logger },
-            React.createElement(BasePathProvider, { basePath: "" },
-                React.createElement(Wrapper, null, children))))));
+            React.createElement(Wrapper, null, children)))));
 const renderWithProviders = (ui, { locale, messages, wrapper } = { locale: "en" }) => render(ui, { wrapper: renderWrapper({ locale, messages, wrapper }) });
 export { renderWithProviders as render };

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

@@ -1,16 +1,14 @@
-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, portalHostName: "Checkout" }),
+    React.createElement(PortalHost, { name: "Checkout" }),
+    children));
 export { App };

package/dist/src/infrastructure/ui/views/App.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+  container: {
+    flex: number;
+  };
+};
+export { style };

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

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+export { style };

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,24 +15,31 @@ 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 { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
 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 { customer: { customerId, country, segment }, } = useStaticInfo();
-    const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
-    const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
+const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedirect, onCheckoutFlowSuccess, }) => {
+    const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
+    const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
+    const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const { screen } = useDevice();
     const [pricingHeight, setPricingHeight] = useState(0);
     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,
@@ -39,17 +47,16 @@ const Checkout = ({ children, layout: Layout, useRedirect }) => {
         checkoutId: checkout?.id,
     });
     const navigate = useNavigate();
-    const basePath = useBasePath();
     const trackPressContinue = useTrackPressContinue({
         page: TrackingPage.CHECKOUT,
         country,
         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({
@@ -77,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/checkoutPaymentModal/CheckoutPaymentModal.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-native";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { PaymentFlow } from "@lookiero/payments-front";
+import { PaymentFlow, Section } from "@lookiero/payments-front";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -10,21 +10,21 @@ import { useViewPaymentFlowPayloadByCheckoutId } from "../../../../../projection
 import { useViewPricingByCheckoutId } from "../../../../../projection/pricing/react/useViewPricingByCheckoutId";
 import { TrackingPage } from "../../../../../tracking/tracking";
 import { useTrackCheckout } from "../../../../../tracking/useTrackCheckout";
+import { useCheckoutFlow } from "../../../../hooks/useCheckoutFlow";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
-import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
 import { Routes } from "../../../../routing/routes";
 import { useBasePath } from "../../../../routing/useBasePath";
 const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber, getAuthToken, onCheckoutSubmitted, }) => {
     const paymentFlowRef = useRef(null);
     const logger = useLogger();
     const { customer: { customerId, country, segment }, } = useStaticInfo();
-    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [checkoutProjection, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
-        checkoutId: checkout?.id,
+        checkoutId: checkoutProjection?.id,
     });
-    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
+    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id });
     const [pricing] = useViewPricingByCheckoutId({
-        checkoutId: checkout?.id,
+        checkoutId: checkoutProjection?.id,
         queryOptions: { refetchOnMount: true },
     });
     const [authToken, setAuthToken] = useState();
@@ -36,13 +36,13 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
     const navigate = useNavigate();
     const trackCheckout = useTrackCheckout({
         page: TrackingPage.CHECKOUT,
-        checkoutId: checkout?.id,
+        checkoutId: checkoutProjection?.id,
         country,
         segment,
     });
     const handleOnSubmitCheckoutError = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`, { replace: true }), [basePath, navigate]);
     const handleOnSubmitCheckoutSuccess = useCallback(() => {
-        const checkoutItemsKept = checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
+        const checkoutItemsKept = checkoutProjection?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
         const totalReplacedFor = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
         trackCheckout({
             totalCheckoutItemsKept: checkoutItemsKept?.length || 0,
@@ -57,7 +57,7 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
         });
         onCheckoutSubmitted?.();
     }, [
-        checkout?.items,
+        checkoutProjection?.items,
         coupon,
         customerId,
         isFirstOrder,
@@ -68,9 +68,9 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
         subscription,
         trackCheckout,
     ]);
-    const [submitCheckout] = useSubmitCheckout({
-        checkoutId: checkout?.id,
-        checkoutBookingId: checkout?.checkoutBookingId,
+    const [checkout] = useCheckoutFlow({
+        checkoutId: checkoutProjection?.id,
+        checkoutBookingId: checkoutProjection?.checkoutBookingId,
         paymentFlowRef,
         onError: handleOnSubmitCheckoutError,
         onSuccess: handleOnSubmitCheckoutSuccess,
@@ -78,13 +78,13 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
     });
     useEffect(() => {
         if (paymentFlowPayload && sizeChangeEnabled !== undefined && pricing !== undefined) {
-            submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
+            checkout({ paymentFlowPayload, sizeChangeEnabled });
         }
-    }, [paymentFlowPayload, pricing, sizeChangeEnabled, submitCheckout]);
+    }, [paymentFlowPayload, pricing, sizeChangeEnabled, checkout]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
+    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkoutProjection) && authToken;
     if (!dependenciesLoaded)
         return null;
-    return React.createElement(PaymentFlow, { ref: paymentFlowRef, token: authToken });
+    return React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken });
 };
 export { CheckoutPaymentModal };

package/dist/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 const DeliveryBanner = () => {
     const { screen } = useDevice();
-    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
+    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
 };
 export { DeliveryBanner };

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/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js

@@ -11,7 +11,7 @@ import { HostDefaultCheckoutQuestionItem } from "../../../../components/organism
 import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem";
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 const checkoutQuestionItems = {
     [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
     [CheckoutQuestionType.HOST_TEXTAREA]: HostDefaultCheckoutQuestionItem,
@@ -21,7 +21,7 @@ const checkoutQuestionItems = {
     [CheckoutQuestionType.BUTTON]: ButtonCheckoutQuestionItem,
 };
 const CheckoutQuestionsForm = ({ checkoutQuestions, submitButtonDisabled, onSubmit, }) => {
-    const buttonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_BUTTON });
+    const buttonText = useI18nMessage({ id: I18nMessages.FEEDBACK_BUTTON });
     const feedback = useCheckoutQuestionFeedback();
     const handlePress = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);
     const filteredCheckoutQuestions = useMemo(() => {

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+  buttonContainer: {
+    paddingHorizontal: number;
+    paddingVertical: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: space6,
+    paddingVertical: space8,
+  },
+});
+export { style };

package/dist/src/infrastructure/ui/views/item/Item.js

@@ -22,7 +22,6 @@ import { ItemDetailHeader } from "../../components/templates/header/itemDetailHe
 import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Item.style";
 import { ItemWithCustomerDecission, } from "./views/itemWithCustomerDecission/ItemWithCustomerDecission";
 import { ItemWithoutCustomerDecission, } from "./views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission";
@@ -30,8 +29,7 @@ const Item = ({ layout: Layout }) => {
     const logger = useLogger();
     const screenSize = useScreenSize();
     const navigate = useNavigate();
-    const basePath = useBasePath();
-    const { customer: { customerId, country, segment }, } = useStaticInfo();
+    const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
     const isDesktopScreen = screenSize !== "S";
     const { id } = useParams();
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });