@lookiero/checkout 0.8.4-beta.0 → 0.8.4-beta.1

package/dist/domain/checkout/model/checkout.js

@@ -11,7 +11,6 @@ var CheckoutStatus;
 })(CheckoutStatus || (CheckoutStatus = {}));
 const startCheckoutHandler = () => async ({ aggregateRoot, command }) => {
     const { aggregateId } = command;
-    invariant(aggregateRoot.status !== CheckoutStatus.STARTED, "Checkout is already started");
     invariant(aggregateRoot.status !== CheckoutStatus.SUBMITTED, "Checkout is already submitted");
     invariant(aggregateRoot.status !== CheckoutStatus.COMPLETED, "Checkout is already completed");
     return {

package/dist/infrastructure/delivery/http/fetchHttpClient.js

@@ -1,37 +1,20 @@
-const fetchHttpPost = ({ apiUrl, getAuthToken }) => async ({ endpoint, body, signal, result }) => {
-    const response = await fetch(`${apiUrl}${endpoint}`, {
-        method: "POST",
-        headers: {
-            ["Content-Type"]: "application/json",
-            authorization: `Bearer ${await getAuthToken()}`,
-        },
-        body: JSON.stringify(body),
-        signal,
-    });
-    return await processResponse({ response, result });
-};
-const fetchHttpGet = ({ apiUrl, getAuthToken }) => async ({ endpoint, signal, result }) => {
-    const response = await fetch(`${apiUrl}${endpoint}`, {
-        method: "GET",
-        credentials: "include",
-        headers: {
-            Authorization: `Bearer ${await getAuthToken()}`,
-            ["Content-Type"]: "application/json",
-        },
-        referrer: "",
-        signal,
-    });
-    return await processResponse({ response, result });
-};
-const processResponse = async ({ response, result }) => {
-    if (response.ok) {
-        const responseText = await response.text();
-        const responseResult = responseText ? JSON.parse(responseText) : responseText;
-        return result?.success(responseResult) ?? responseResult;
-    }
-    if (result?.error !== undefined) {
-        return result.error;
-    }
-    throw new Error(response.statusText);
-};
+const fetchHttpPost = ({ apiUrl, getAuthToken }) => async ({ endpoint, body, signal }) => fetch(`${apiUrl}${endpoint}`, {
+    method: "POST",
+    headers: {
+        ["Content-Type"]: "application/json",
+        authorization: `Bearer ${await getAuthToken()}`,
+    },
+    body: JSON.stringify(body),
+    signal,
+});
+const fetchHttpGet = ({ apiUrl, getAuthToken }) => async ({ endpoint, signal }) => fetch(`${apiUrl}${endpoint}`, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+        Authorization: `Bearer ${await getAuthToken()}`,
+        ["Content-Type"]: "application/json",
+    },
+    referrer: "",
+    signal,
+});
 export { fetchHttpGet, fetchHttpPost };

package/dist/infrastructure/delivery/http/httpClient.d.ts

@@ -1,22 +1,16 @@
-interface HttpFunctionResult {
-    readonly error: any;
-    readonly success: (response: any) => any;
-}
 interface HttpGetFunctionArgs {
     readonly endpoint: string;
     readonly signal?: AbortSignal;
-    readonly result?: HttpFunctionResult;
 }
 interface HttpGetFunction {
-    (args: HttpGetFunctionArgs): Promise<any>;
+    (args: HttpGetFunctionArgs): Promise<Response>;
 }
 interface HttpPostFunctionArgs {
     readonly endpoint: string;
     readonly body: Record<string, unknown>;
     readonly signal?: AbortSignal;
-    readonly result?: HttpFunctionResult;
 }
 interface HttpPostFunction {
-    (args: HttpPostFunctionArgs): Promise<any>;
+    (args: HttpPostFunctionArgs): Promise<Response>;
 }
-export type { HttpGetFunction, HttpPostFunction, HttpFunctionResult };
+export type { HttpGetFunction, HttpPostFunction };

package/dist/infrastructure/domain/checkout/react/useStartCheckout.d.ts

@@ -1,6 +1,6 @@
 import { CommandStatus } from "@lookiero/messaging-react";
 interface StartCheckoutFunction {
-    (): Promise<void> | undefined;
+    (): Promise<void>;
 }
 interface UseStartCheckoutArgs {
     readonly checkoutId?: string;

package/dist/infrastructure/domain/checkout/react/useStartCheckout.js

@@ -5,16 +5,9 @@ import { startCheckout } from "../../../../domain/checkout/command/startCheckout
 import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
 const useStartCheckout = ({ checkoutId }) => {
     const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
-    const start = useCallback(async () => {
+    const start = useCallback(() => {
         invariant(checkoutId, "CheckoutId must be defined in order to start checkout");
-        try {
-            return await commandBus(startCheckout({ aggregateId: checkoutId }));
-        }
-        catch (error) {
-            if (!error?.message?.includes("Checkout is already started")) {
-                // logger?.captureException(error as Error);
-            }
-        }
+        return commandBus(startCheckout({ aggregateId: checkoutId }));
     }, [checkoutId, commandBus]);
     return [start, status];
 };

package/dist/infrastructure/projection/bookedProductsVariants/httpBookedProductsVariantsForCheckoutItemView.js

@@ -1,10 +1,9 @@
-const httpBookedProductsVariantsForCheckoutItemView = ({ httpPost }) => async ({ checkoutItemId, signal }) => await httpPost({
-    endpoint: "/view-booked-product-variants-for-checkout-item",
-    body: { checkoutItemId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => response.result,
-    },
-});
+const httpBookedProductsVariantsForCheckoutItemView = ({ httpPost }) => async ({ checkoutItemId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-booked-product-variants-for-checkout-item",
+        body: { checkoutItemId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
 export { httpBookedProductsVariantsForCheckoutItemView };

package/dist/infrastructure/projection/checkout/httpCheckoutByIdView.js

@@ -1,11 +1,10 @@
 import { toCheckoutProjection } from "./checkout";
-const httpCheckoutByIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
-    endpoint: "/view-checkout-by-id",
-    body: { checkoutId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => toCheckoutProjection(response.result),
-    },
-});
+const httpCheckoutByIdView = ({ httpPost }) => async ({ checkoutId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-checkout-by-id",
+        body: { checkoutId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : toCheckoutProjection((await response.json()).result);
+};
 export { httpCheckoutByIdView };

package/dist/infrastructure/projection/checkout/httpFirstAvailableCheckoutByCustomerIdView.js

@@ -1,11 +1,10 @@
 import { toCheckoutProjection } from "./checkout";
-const httpFirstAvailableCheckoutByCustomerIdView = ({ httpPost }) => async ({ customerId, signal }) => await httpPost({
-    endpoint: "/view-first-available-checkout-by-customer-id",
-    body: { customerId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => toCheckoutProjection(response.result),
-    },
-});
+const httpFirstAvailableCheckoutByCustomerIdView = ({ httpPost }) => async ({ customerId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-first-available-checkout-by-customer-id",
+        body: { customerId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : toCheckoutProjection((await response.json()).result);
+};
 export { httpFirstAvailableCheckoutByCustomerIdView };

package/dist/infrastructure/projection/checkout/httpFiveItemsDiscountByCustomerIdView.js

@@ -1,9 +1,8 @@
-const httpFiveItemsDiscountByCustomerIdView = ({ httpGet }) => async ({ customerId, signal }) => await httpGet({
-    endpoint: `/view-five-items-discount-by-customer-id/${customerId}`,
-    signal,
-    result: {
-        error: 0,
-        success: (response) => response,
-    },
-});
+const httpFiveItemsDiscountByCustomerIdView = ({ httpGet }) => async ({ customerId, signal }) => {
+    const response = await httpGet({
+        endpoint: `/view-five-items-discount-by-customer-id/${customerId}`,
+        signal,
+    });
+    return !response.ok ? 0 : await response.json();
+};
 export { httpFiveItemsDiscountByCustomerIdView };

package/dist/infrastructure/projection/checkout/httpIsCheckoutEnabledByCustomerIdView.js

@@ -1,9 +1,8 @@
-const httpIsCheckoutEnabledByCustomerIdView = ({ httpGet }) => async ({ customerId, signal }) => await httpGet({
-    endpoint: `/is-new-checkout-enabled/${customerId}`,
-    signal,
-    result: {
-        error: false,
-        success: (response) => response,
-    },
-});
+const httpIsCheckoutEnabledByCustomerIdView = ({ httpGet }) => async ({ customerId, signal }) => {
+    const response = await httpGet({
+        endpoint: `/is-new-checkout-enabled/${customerId}`,
+        signal,
+    });
+    return !response.ok ? false : await response.json();
+};
 export { httpIsCheckoutEnabledByCustomerIdView };

package/dist/infrastructure/projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId.js

@@ -1,6 +1,7 @@
 import { useQuery } from "@lookiero/messaging-react";
 import { CHECKOUT_STARTED } from "../../../../domain/checkout/model/checkoutStarted";
 import { CHECKOUT_SUBMITTED } from "../../../../domain/checkout/model/checkoutSubmitted";
+import { CHECKOUT_BOOKING_BOOKED, } from "../../../../domain/checkoutBooking/model/checkoutBookingBooked";
 import { CHECKOUT_BOOKING_EXPIRED, } from "../../../../domain/checkoutBooking/model/checkoutBookingExpired";
 import { CHECKOUT_FEEDBACK_GIVEN, } from "../../../../domain/checkoutFeedback/model/checkoutFeedbackGiven";
 import { CHECKOUT_ITEM_KEPT } from "../../../../domain/checkoutItem/model/checkoutItemKept";
@@ -15,13 +16,15 @@ const isCheckoutStarted = (event) => event.name === CHECKOUT_STARTED;
 const isCheckoutSubmitted = (event) => event.name === CHECKOUT_SUBMITTED;
 const isCheckoutFeedbackGiven = (event) => event.name === CHECKOUT_FEEDBACK_GIVEN;
 const isCheckoutBookingExpired = (event) => event.name === CHECKOUT_BOOKING_EXPIRED;
+const isCheckoutBookingBooked = (event) => event.name === CHECKOUT_BOOKING_BOOKED;
 const shouldInvalidate = (event) => isCheckoutItemKept(event) ||
     isCheckoutItemReplaced(event) ||
     isCheckoutItemReturned(event) ||
     isCheckoutStarted(event) ||
     isCheckoutSubmitted(event) ||
     isCheckoutFeedbackGiven(event) ||
-    isCheckoutBookingExpired(event);
+    isCheckoutBookingExpired(event) ||
+    isCheckoutBookingBooked(event);
 const useViewFirstAvailableCheckoutByCustomerId = ({ customerId }) => useQuery({
     query: viewFirstAvailableCheckoutByCustomerId({ customerId }),
     contextId: MESSAGING_CONTEXT_ID,

package/dist/infrastructure/projection/checkoutBooking/httpCheckoutBookingByIdView.js

@@ -1,10 +1,9 @@
-const httpCheckoutBookingByIdView = ({ httpPost }) => async ({ checkoutBookingId, signal }) => await httpPost({
-    endpoint: "/view-checkout-booking-by-id",
-    body: { checkoutBookingId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => response.result,
-    },
-});
+const httpCheckoutBookingByIdView = ({ httpPost }) => async ({ checkoutBookingId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-checkout-booking-by-id",
+        body: { checkoutBookingId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
 export { httpCheckoutBookingByIdView };

package/dist/infrastructure/projection/checkoutItem/httpCheckoutItemByIdView.js

@@ -1,10 +1,9 @@
-const httpCheckoutItemByIdView = ({ httpPost }) => async ({ checkoutItemId, signal }) => await httpPost({
-    endpoint: "/view-checkout-item-by-id",
-    body: { checkoutItemId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => response.result,
-    },
-});
+const httpCheckoutItemByIdView = ({ httpPost }) => async ({ checkoutItemId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-checkout-item-by-id",
+        body: { checkoutItemId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
 export { httpCheckoutItemByIdView };

package/dist/infrastructure/projection/checkoutQuestion/httpCheckoutQuestionsByCheckoutIdView.js

@@ -1,10 +1,9 @@
-const httpCheckoutQuestionsByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
-    endpoint: "/list-checkout-questions-by-checkout-id",
-    body: { checkoutId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => response.result,
-    },
-});
+const httpCheckoutQuestionsByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/list-checkout-questions-by-checkout-id",
+        body: { checkoutId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
 export { httpCheckoutQuestionsByCheckoutIdView };

package/dist/infrastructure/projection/payment/httpPaymentFlowPayloadByCheckoutIdView.js

@@ -1,10 +1,9 @@
-const httpPaymentFlowPayloadByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
-    endpoint: "/view-payment-flow-payload-by-checkout-id",
-    body: { checkoutId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => response.result,
-    },
-});
+const httpPaymentFlowPayloadByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-payment-flow-payload-by-checkout-id",
+        body: { checkoutId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
 export { httpPaymentFlowPayloadByCheckoutIdView };

package/dist/infrastructure/projection/pricing/httpPricingByCheckoutIdView.js

@@ -1,10 +1,9 @@
-const httpPricingByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => await httpPost({
-    endpoint: "/view-pricing-by-checkout-id",
-    body: { checkoutId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => response.result,
-    },
-});
+const httpPricingByCheckoutIdView = ({ httpPost }) => async ({ checkoutId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/view-pricing-by-checkout-id",
+        body: { checkoutId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
 export { httpPricingByCheckoutIdView };

package/dist/infrastructure/projection/returnQuestion/httpReturnQuestionsByCheckoutItemIdView.js

@@ -1,10 +1,9 @@
-const httpReturnQuestionsByCheckoutItemIdView = ({ httpPost }) => async ({ checkoutItemId, signal }) => await httpPost({
-    endpoint: "/list-return-questions-by-checkout-item-id",
-    body: { checkoutItemId },
-    signal,
-    result: {
-        error: null,
-        success: (response) => response.result,
-    },
-});
+const httpReturnQuestionsByCheckoutItemIdView = ({ httpPost }) => async ({ checkoutItemId, signal }) => {
+    const response = await httpPost({
+        endpoint: "/list-return-questions-by-checkout-item-id",
+        body: { checkoutItemId },
+        signal,
+    });
+    return !response.ok || response.status === 404 ? null : (await response.json()).result;
+};
 export { httpReturnQuestionsByCheckoutItemIdView };

package/dist/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 { sentryLogger } from "../../shared/logging/SentryLogger";
-import { sentryLoggerHOC } from "../../shared/logging/SentryLoggerHOC";
 import { Routing } from "./routing/Routing";
 const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
     // eslint-disable-next-line react/display-name, react/prop-types
@@ -11,6 +10,6 @@ const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
         return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
             React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, locale: locale, menu: menu, tabBar: tabBar, useRedirect: useRedirect, useRoutes: useRoutes, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
     };
-    return sentryLoggerHOC({ logger: sentryLogger(sentry) })(Root);
+    return sentryLogger(sentry)(Root);
 };
 export { root };

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

@@ -0,0 +1,2 @@
+declare const usePaymentInstrumentEvents: () => void;
+export { usePaymentInstrumentEvents };

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

@@ -0,0 +1,28 @@
+import { useEvent } from "@lookiero/event";
+import { useCallback, useEffect } from "react";
+import { useCreateNotification } from "../../../shared/notifications";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { I18nMessages } from "../i18n/i18n";
+import { useToast } from "./useToast";
+const PAYMENT_ERROR = "ERROR";
+const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
+const usePaymentInstrumentEvents = () => {
+    const { subscribe, unsubscribe } = useEvent();
+    const { showError, showSuccess } = useToast();
+    const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
+    const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
+    const onError = useCallback(({ error }) => {
+        if (error.toaster) {
+            showError({ message: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR });
+        }
+    }, [showError]);
+    useEffect(() => {
+        subscribe({ event: PAYMENT_ERROR }, onError);
+        subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+        return () => {
+            unsubscribe({ event: PAYMENT_ERROR }, onError);
+            unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+        };
+    }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
+};
+export { usePaymentInstrumentEvents };

package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts

@@ -0,0 +1,2 @@
+declare const usePaymentInstrumentUpdateEvents: () => void;
+export { usePaymentInstrumentUpdateEvents };

package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js

@@ -0,0 +1,28 @@
+import { useEvent } from "@lookiero/event";
+import { useCallback, useEffect } from "react";
+import { useCreateNotification } from "../../../shared/notifications";
+import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
+import { I18nMessages } from "../i18n/i18n";
+import { useToast } from "./useToast";
+const PAYMENT_ERROR = "ERROR";
+const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
+const usePaymentInstrumentUpdateEvents = () => {
+    const { subscribe, unsubscribe } = useEvent();
+    const { showError, showSuccess } = useToast();
+    const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
+    const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
+    const onError = useCallback(({ error }) => {
+        if (error.toaster) {
+            showError({ message: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR });
+        }
+    }, [showError]);
+    useEffect(() => {
+        subscribe({ event: PAYMENT_ERROR }, onError);
+        subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+        return () => {
+            unsubscribe({ event: PAYMENT_ERROR }, onError);
+            unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
+        };
+    }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
+};
+export { usePaymentInstrumentUpdateEvents };

package/dist/infrastructure/ui/hooks/useToast.d.ts

@@ -0,0 +1,11 @@
+interface ShowErrorFunctionArgs {
+    readonly message: string;
+}
+interface ShowErrorFunction {
+    (args: ShowErrorFunctionArgs): void;
+}
+declare const useToast: () => {
+    showError: ShowErrorFunction;
+    showSuccess: ShowErrorFunction;
+};
+export { useToast };

package/dist/infrastructure/ui/hooks/useToast.js

@@ -0,0 +1,44 @@
+import { Notification } from "@lookiero/aurora-next/build/components/molecules/Notification/Notification";
+import { useStack } from "@lookiero/aurora-next/build/contexts/Stack/Stack";
+import { useIntl } from "@lookiero/i18n-react";
+import { useCallback } from "react";
+import { StyleSheet } from "react-native";
+import { v4 as uuid } from "uuid";
+import { theme } from "../theme/theme";
+const { layoutXXS, elevationColor, elevationOffset, elevationOpacityM, elevationRadius } = theme();
+const style = StyleSheet.create({
+    container: {
+        marginHorizontal: layoutXXS,
+        marginTop: layoutXXS,
+        shadowColor: elevationColor,
+        shadowOffset: elevationOffset,
+        shadowOpacity: elevationOpacityM,
+        shadowRadius: elevationRadius,
+    },
+    inAppContainer: {
+        top: 75,
+    },
+});
+const NOTIFICATION_DEFAULTS = {
+    motion: "top",
+    timeoutClose: 10000,
+    style: style.container,
+};
+const IN_APP_NOTIFICATION_DEFAULTS = {
+    ...NOTIFICATION_DEFAULTS,
+    style: [style.container, style.inAppContainer],
+};
+const iOSInAppBrowser = window.screen?.height > 667 && /FBIOS/.test(navigator.userAgent);
+const getNotificationDefaults = () => (iOSInAppBrowser ? IN_APP_NOTIFICATION_DEFAULTS : NOTIFICATION_DEFAULTS);
+const useToast = () => {
+    const Stack = useStack();
+    const intl = useIntl();
+    const translate = useCallback((message) => intl.formatMessage({ id: message, defaultMessage: message }), [intl]);
+    const showError = useCallback(({ message }) => Stack.alert(uuid(), Notification, { ...getNotificationDefaults(), text: translate(message) }), [Stack, translate]);
+    const showSuccess = useCallback(({ message }) => Stack.success(uuid(), Notification, { ...getNotificationDefaults(), text: translate(message) }), [Stack, translate]);
+    return {
+        showError,
+        showSuccess,
+    };
+};
+export { useToast };

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

@@ -1,8 +1,7 @@
 import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Platform, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
@@ -21,9 +20,9 @@ import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
 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, customerId, country, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
-    const paymentInstrumentSelectRef = useRef(null);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     usePageView({
@@ -33,7 +32,6 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
     });
     const navigate = useNavigate();
     const basePath = useBasePath();
-    const { returnUrl } = useRedirect();
     const handleOnSubmit = useCallback(() => {
         navigate(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
     }, [basePath, navigate]);
@@ -49,7 +47,7 @@ const Checkout = ({ children, customerId, country, useRedirect }) => {
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
                     React.createElement(DeliveryBanner, null))),
-                React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }),
+                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, style: style.checkoutItemKept, 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

package/dist/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface PaymentInstrumentProps {
+    readonly useRedirect: () => Record<string, string>;
+}
+declare const PaymentInstrument: FC<PaymentInstrumentProps>;
+export { PaymentInstrument };

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

@@ -0,0 +1,10 @@
+import { PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
+import React, { useRef } from "react";
+import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
+const PaymentInstrument = ({ useRedirect }) => {
+    const paymentInstrumentSelectRef = useRef(null);
+    const { returnUrl } = useRedirect();
+    usePaymentInstrumentEvents();
+    return (React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }));
+};
+export { PaymentInstrument };

package/dist/infrastructure/ui/views/intro/Intro.js

@@ -30,7 +30,7 @@ const Intro = ({ customerId }) => {
     const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
     if (fiveItemsDiscountStatus === QueryStatus.LOADING)
         return React.createElement(Spinner, null);
-    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
+    return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
         React.createElement(Body, { style: { column: style.bodyColumn } },
             React.createElement(View, { style: style.intro },
                 React.createElement(View, { style: style.content },

package/dist/infrastructure/ui/views/intro/Intro.style.d.ts

@@ -7,9 +7,6 @@ declare const style: {
         flexDirection: "row";
         marginVertical: number;
     };
-    container: {
-        flex: number;
-    };
     content: {
         alignItems: "center";
     };

package/dist/infrastructure/ui/views/intro/Intro.style.js

@@ -10,9 +10,6 @@ const style = StyleSheet.create({
         flexDirection: "row",
         marginVertical: spaceS,
     },
-    container: {
-        flex: 1,
-    },
     content: {
         alignItems: "center",
     },

package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js

@@ -5,7 +5,7 @@ import { Image, Pressable, View } from "react-native";
 import Svg, { Line } from "react-native-svg";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { size } from "../../../../../../projection/shared/size";
-import { ButtonIcon } from "../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
+import { Icon } from "../../../../../../shared/ui/components/atoms/icon/Icon";
 import { Price } from "../../../../components/atoms/price/Price";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { COLOR_I18N_PREFIX, I18nMessages } from "../../../../i18n/i18n";
@@ -39,6 +39,6 @@ const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color
                     status === CheckoutItemStatus.REPLACED && (React.createElement(View, { style: style.sizeChange },
                         React.createElement(Text, { level: 3, style: style.sizeChangeText, detail: true }, sizeChangeText)))),
                 React.createElement(Price, { price: price, variant: "detail" }))),
-        onPress && React.createElement(ButtonIcon, { name: "arrow-right" })));
+        onPress && React.createElement(Icon, { name: "arrow-right" })));
 };
 export { ProductVariant };