@lookiero/checkout 10.0.0-beta.2 → 10.0.0-beta.4

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

@@ -1,15 +1,29 @@
 import { useCallback, useMemo, useState } from "react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
+import { viewCheckoutBookingById, } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
 import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
 import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
 import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
 import { I18nMessages } from "../i18n/i18n";
-import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
+import { useQueryBus } from "./useQueryBus";
+var ChargeStatus;
+(function (ChargeStatus) {
+    ChargeStatus["EXECUTED"] = "EXECUTED";
+    ChargeStatus["REQUIRES_ACTION"] = "REQUIRES_ACTION";
+    ChargeStatus["REQUIRED_ACTION_CANCELLED"] = "REQUIRED_ACTION_CANCELLED";
+    ChargeStatus["REJECTED"] = "REJECTED";
+    ChargeStatus["CANCELLED"] = "CANCELLED";
+    ChargeStatus["TO_CONFIRM"] = "TO_CONFIRM";
+    ChargeStatus["ERROR"] = "ERROR";
+    ChargeStatus["UNKNOWN"] = "UNKNOWN";
+})(ChargeStatus || (ChargeStatus = {}));
 const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onError, onSuccess, logger, }) => {
+    const queryBus = useQueryBus();
     const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
     const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
     const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
+    const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
     const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
     const submitCheckout = useCallback(async ({ paymentFlowPayload, sizeChangeEnabled }) => {
         try {
@@ -18,27 +32,40 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         catch (error) {
             return;
         }
-        setStartLegacyBoxCheckoutStatus("loading");
+        const checkoutBooking = await queryBus(viewCheckoutBookingById({ checkoutBookingId }));
+        if (checkoutBooking?.isExpired) {
+            setCheckoutBookingExpired(true);
+            return;
+        }
+        paymentFlowRef.current?.startLegacyBoxCheckout(
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
-        paymentFlowRef.current?.startLegacyBoxCheckout(paymentFlowPayload);
-    }, [paymentFlowRef, blockCheckoutBooking]);
-    const onPaymentSuccess = useCallback(async () => {
-        setStartLegacyBoxCheckoutStatus("success");
-        await submitCheckoutCommand();
-        createNotification({
-            bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
-            level: NotificationLevel.SUCCESS,
-        });
-    }, [createNotification, submitCheckoutCommand]);
-    const onPaymentError = useCallback((payload) => {
-        setStartLegacyBoxCheckoutStatus("error");
-        createNotification({
-            bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
-            level: NotificationLevel.ERROR,
+        paymentFlowPayload, async ({ status, toaster, final }) => {
+            setStartLegacyBoxCheckoutStatus("loading");
+            if (final) {
+                if (status === ChargeStatus.EXECUTED) {
+                    setStartLegacyBoxCheckoutStatus("success");
+                    await submitCheckoutCommand();
+                    onSuccess?.();
+                }
+                else {
+                    createNotification({
+                        level: NotificationLevel.ERROR,
+                        bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
+                    });
+                    setStartLegacyBoxCheckoutStatus("error");
+                }
+            }
         });
-    }, [createNotification]);
-    usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
+    }, [
+        queryBus,
+        checkoutBookingId,
+        paymentFlowRef,
+        blockCheckoutBooking,
+        submitCheckoutCommand,
+        onSuccess,
+        createNotification,
+    ]);
     const status = useMemo(() => {
         if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
             startLegacyBoxCheckoutStatus === "loading" ||
@@ -48,17 +75,23 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
         if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
             startLegacyBoxCheckoutStatus === "success" &&
             submitCheckoutCommandStatus === CommandStatus.SUCCESS) {
-            onSuccess();
             return "success";
         }
         if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
             startLegacyBoxCheckoutStatus === "error" ||
-            submitCheckoutCommandStatus === CommandStatus.ERROR) {
+            submitCheckoutCommandStatus === CommandStatus.ERROR ||
+            checkoutBookingExpired) {
             onError();
             return "error";
         }
         return "idle";
-    }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, onSuccess, onError]);
+    }, [
+        blockCheckoutBookingStatus,
+        startLegacyBoxCheckoutStatus,
+        submitCheckoutCommandStatus,
+        checkoutBookingExpired,
+        onError,
+    ]);
     return [submitCheckout, status];
 };
 export { useSubmitCheckout };

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

@@ -1,3 +1,4 @@
+declare const DOMAIN = "CheckoutI18n";
 declare const COLOR_I18N_PREFIX = "catalog.color.";
 declare enum I18nMessages {
     TOAST_GENERIC_ERROR = "toast_generic_error",
@@ -56,4 +57,4 @@ declare enum I18nMessages {
     FEEDBACK_BUTTON = "feedback.button",
     CHECKOUT_TOAST_BOOKING_EXPIRED = "checkout.toast_booking_expired"
 }
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };

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

@@ -1,3 +1,4 @@
+const DOMAIN = "CheckoutI18n";
 // TODO: deprecated?
 const COLOR_I18N_PREFIX = "catalog.color.";
 var I18nMessages;
@@ -58,4 +59,4 @@ var I18nMessages;
     I18nMessages["FEEDBACK_BUTTON"] = "feedback.button";
     I18nMessages["CHECKOUT_TOAST_BOOKING_EXPIRED"] = "checkout.toast_booking_expired";
 })(I18nMessages || (I18nMessages = {}));
-export { I18nMessages, COLOR_I18N_PREFIX };
+export { DOMAIN, I18nMessages, COLOR_I18N_PREFIX };

package/dist/src/infrastructure/ui/test/render.js

@@ -1,13 +1,15 @@
 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";
+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(IntlProvider, { locale: locale, messages: messages, onError: () => void 0 },
+    React.createElement(I18nProvider, { locale: locale, messages: messages, onError: () => void 0 },
         React.createElement(LoggerProvider, { logger: logger },
             React.createElement(Wrapper, null, children)))));
 const renderWithProviders = (ui, { locale, messages, wrapper } = { locale: "en" }) => render(ui, { wrapper: renderWrapper({ locale, messages, wrapper }) });

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

@@ -5,10 +5,11 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 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(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
-    React.createElement(Notifications, { contextId: MESSAGING_CONTEXT_ID, portalHostName: "Checkout" }),
+    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.js

@@ -17,7 +17,7 @@ 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 { I18nMessages } from "../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { ProductVariant } from "../shared/components/productVariant/ProductVariant";
 import { Pricing } from "../summary/components/pricing/Pricing";
@@ -26,8 +26,8 @@ import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
 import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
 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 titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
+    const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const { screen } = useDevice();
     const [pricingHeight, setPricingHeight] = useState(0);
     const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);

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, Section } from "@lookiero/payments-front";
+import { PaymentFlow } 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 [checkoutProjection, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
-        checkoutId: checkoutProjection?.id,
+        checkoutId: checkout?.id,
     });
-    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id });
+    const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkout?.id });
     const [pricing] = useViewPricingByCheckoutId({
-        checkoutId: checkoutProjection?.id,
+        checkoutId: checkout?.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: checkoutProjection?.id,
+        checkoutId: checkout?.id,
         country,
         segment,
     });
     const handleOnSubmitCheckoutError = useCallback(() => navigate(`${basePath}/${Routes.CHECKOUT}`, { replace: true }), [basePath, navigate]);
     const handleOnSubmitCheckoutSuccess = useCallback(() => {
-        const checkoutItemsKept = checkoutProjection?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
+        const checkoutItemsKept = checkout?.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?.();
     }, [
-        checkoutProjection?.items,
+        checkout?.items,
         coupon,
         customerId,
         isFirstOrder,
@@ -68,9 +68,9 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
         subscription,
         trackCheckout,
     ]);
-    const [checkout] = useCheckoutFlow({
-        checkoutId: checkoutProjection?.id,
-        checkoutBookingId: checkoutProjection?.checkoutBookingId,
+    const [submitCheckout] = useSubmitCheckout({
+        checkoutId: checkout?.id,
+        checkoutBookingId: checkout?.checkoutBookingId,
         paymentFlowRef,
         onError: handleOnSubmitCheckoutError,
         onSuccess: handleOnSubmitCheckoutSuccess,
@@ -78,13 +78,13 @@ const CheckoutPaymentModal = ({ coupon, isFirstOrder, subscription, orderNumber,
     });
     useEffect(() => {
         if (paymentFlowPayload && sizeChangeEnabled !== undefined && pricing !== undefined) {
-            checkout({ paymentFlowPayload, sizeChangeEnabled });
+            submitCheckout({ paymentFlowPayload, sizeChangeEnabled });
         }
-    }, [paymentFlowPayload, pricing, sizeChangeEnabled, checkout]);
+    }, [paymentFlowPayload, pricing, sizeChangeEnabled, submitCheckout]);
     const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
-    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkoutProjection) && authToken;
+    const dependenciesLoaded = (dependenciesLoadedStatuses.includes(checkoutStatus) || checkout) && authToken;
     if (!dependenciesLoaded)
         return null;
-    return React.createElement(PaymentFlow, { ref: paymentFlowRef, section: Section.BOX_CHECKOUT, token: authToken });
+    return React.createElement(PaymentFlow, { ref: paymentFlowRef, 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 { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 const DeliveryBanner = () => {
     const { screen } = useDevice();
-    return (React.createElement(InfoBox, { contentAlign: screen.L ? ALIGN.CENTER : undefined, testID: "delivery-banner", text: useI18nMessage({ id: I18nMessages.CHECKOUT_DELIVERY_BANNER }), type: INFOBOX_TYPE.SQUARED }));
+    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 }));
 };
 export { DeliveryBanner };

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 { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, 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({ id: I18nMessages.FEEDBACK_BUTTON });
+    const buttonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_BUTTON });
     const feedback = useCheckoutQuestionFeedback();
     const handlePress = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);
     const filteredCheckoutQuestions = useMemo(() => {

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -4,7 +4,7 @@ import { InfoBox, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./CustomerDecissionBanner.style";
 const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
@@ -12,8 +12,8 @@ const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.RETURNED]: I18nMessages.ITEM_BANNER_CUSTOMER_RETURNED_DECISSION,
 };
 const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
-    const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
-    const bannerButtonText = useI18nMessage({ id: I18nMessages.ITEM_BANNER_BUTTON });
+    const decissionText = useI18nMessage({ domain: DOMAIN, id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
+    const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
     const screenSize = useScreenSize();
     const isSmallScreen = screenSize === "S";
     return (React.createElement(View, { style: [style.container, isSmallScreen ? style.smallContainer : null] },

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -3,13 +3,19 @@ import { View } from "react-native";
 import { ALIGN, Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
 const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
-    const titleText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
-    const descriptionText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
-    const dismissButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON });
-    const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
+    const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_TITLE });
+    const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DESCRIPTION });
+    const dismissButtonText = useI18nMessage({
+        domain: DOMAIN,
+        id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_DISMISS_BUTTON,
+    });
+    const confirmButtonText = useI18nMessage({
+        domain: DOMAIN,
+        id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON,
+    });
     return (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
             React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.js

@@ -5,14 +5,14 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { Sticky } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
 import { Body } from "../../../../components/layouts/body/Body";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { SelectModal } from "../selectModal/SelectModal";
 import { style } from "./ItemActions.style";
 const ItemActions = ({ productVariants, currentProductVariant, country, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
     const [modalVisible, setModalVisible] = useState(false);
-    const changeSizeButtonText = useI18nMessage({ id: I18nMessages.ITEM_CHANGE_SIZE_BUTTON });
-    const keepButtonText = useI18nMessage({ id: I18nMessages.ITEM_KEEP_BUTTON });
-    const returnButtonText = useI18nMessage({ id: I18nMessages.ITEM_RETURN_BUTTON });
+    const changeSizeButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_CHANGE_SIZE_BUTTON });
+    const keepButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_KEEP_BUTTON });
+    const returnButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_RETURN_BUTTON });
     const sizeSelectorOptions = useMemo(() => (productVariants || []).map((productVariant) => ({
         label: size({ size: productVariant.size, country }),
         value: productVariant.id,

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -5,11 +5,11 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./ProductVariantDescription.style";
 const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, country, }) => {
-    const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
-    const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+    const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
+    const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
     const screenDevice = useScreenSize();
     const isDesktopScreen = screenDevice !== "S";
     return (React.createElement(View, { style: [style.container, isDesktopScreen ? null : style.smallContainer] },

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.d.ts

@@ -1,6 +1,7 @@
 declare const style: {
     brand: {
         flex: number;
+        gap: number;
     };
     container: {
         width: "100%";

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.style.js

@@ -1,9 +1,10 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space4, space6 } = theme();
+const { space1, space4, space6 } = theme();
 const style = StyleSheet.create({
     brand: {
         flex: 1,
+        gap: space1,
     },
     container: {
         width: "100%",

package/dist/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.js

@@ -7,7 +7,7 @@ import { ReturnQuestions } from "../../../../components/organisms/returnQuestion
 import { ReturnQuestionItemProvider, } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
 import { HostDefaultReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionFeedbackItem/HostDefaultReturnQuestionFeedbackItem";
 import { ReturnQuestionFeedbackItem } from "../../../../components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./ReturnQuestionsFeedback.style";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionFeedbackItem,
@@ -18,7 +18,7 @@ const returnQuestionItems = {
     [ReturnQuestionType.OPTION]: ReturnQuestionFeedbackItem,
 };
 const ReturnQuestionsFeedback = ({ returnQuestions, onEditFeedback }) => {
-    const titleText = useI18nMessage({ id: I18nMessages.FEEDBACK_TITLE });
+    const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_TITLE });
     return (React.createElement(View, null,
         React.createElement(View, { style: style.titleContainer },
             React.createElement(Text, { level: 2 }, titleText),

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -3,12 +3,12 @@ import { View } from "react-native";
 import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./SizeWithoutStockModal.style";
 const SizeWithoutStockModal = ({ visible, onDismiss }) => {
-    const titleText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
-    const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
-    const buttonText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
+    const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
+    const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
+    const buttonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
     return (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, showCloseButton: true, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
             React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),

package/dist/src/infrastructure/ui/views/return/components/price/Price.js

@@ -2,15 +2,18 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
+import { DOMAIN } from "../../../../i18n/i18n";
 import { style } from "./Price.style";
 const Price = ({ price, withPercentage = false }) => {
     const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
     const productPrice = useI18nNumber({
+        domain: DOMAIN,
         value: price.amount / 100,
         style: "currency",
         currency: price.currency,
     });
     const productDiscountedPrice = useI18nNumber({
+        domain: DOMAIN,
         value: (price.discountedPrice?.amount || 0) / 100,
         style: "currency",
         currency: price.currency,

package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.js

@@ -5,14 +5,14 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { Column, Row } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Price } from "../price/Price";
 import { IMAGE_SIZE, style } from "./ProductVariantPreview.style";
 const ProductVariantPreview = ({ item, country }) => {
     const cdnImageUrl = useMediaImage();
     const { screen } = useDevice();
-    const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
-    const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
+    const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
+    const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
     const { productVariant: { media, brand, name, size: sizeProjection }, price, } = item;
     const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
     return (React.createElement(View, { style: [style.wrapper, !screen.S && style.mobileWrapper], testID: "product-variant-preview" },

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -25,7 +25,7 @@ import { RadioReturnQuestionItem } from "../../../../components/organisms/return
 import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
 import { ItemDetailHeader } from "../../../../components/templates/header/itemDetailHeader/ItemDetailHeader";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
 import { style } from "./ReturnQuestionsForm.style";
@@ -43,9 +43,9 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     const { basePath } = useStaticInfo();
     const logger = useLogger();
     const { screen } = useDevice();
-    const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
-    const descriptionText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
-    const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+    const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_TITLE });
+    const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_DESCRIPTION });
+    const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
     const feedback = useReturnQuestionFeedback();
     const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
         checkoutItemId: checkoutItem.id,

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts

@@ -21,6 +21,7 @@ declare const style: {
     };
     info: {
         backgroundColor: string;
+        gap: number;
         paddingBottom: number;
         paddingHorizontal: number;
         paddingTop: number;

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.style.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../../../components/templates/header/Header.style";
-const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space1, space4, space6, space8 } = theme();
 const style = StyleSheet.create({
     background: {
         backgroundColor: colorBgPrimaryLight,
@@ -25,6 +25,7 @@ const style = StyleSheet.create({
     },
     info: {
         backgroundColor: colorBgBase,
+        gap: space1,
         paddingBottom: space4,
         paddingHorizontal: space6,
         paddingTop: space8,

package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.js

@@ -7,12 +7,12 @@ import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/
 import { size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
-import { COLOR_I18N_PREFIX, I18nMessages } from "../../../../i18n/i18n";
+import { COLOR_I18N_PREFIX, DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { IMAGE_WIDTH, style } from "./ProductVariant.style";
 const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color, status, country, style: customStyle, onPress, }) => {
-    const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
-    const colorLabel = useI18nMessage({ id: color.name, prefix: COLOR_I18N_PREFIX });
-    const sizeChangeText = useI18nMessage({ id: I18nMessages.PRODUCT_VARIANT_SIZE_CHANGE });
+    const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
+    const colorLabel = useI18nMessage({ domain: DOMAIN, id: color.name, prefix: COLOR_I18N_PREFIX });
+    const sizeChangeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.PRODUCT_VARIANT_SIZE_CHANGE });
     const cdnImageUrl = useMediaImage();
     return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
         React.createElement(View, { style: style.row },

package/dist/src/infrastructure/ui/views/summary/Summary.js

@@ -16,7 +16,7 @@ import { useTrackPressPricing } from "../../../tracking/useTrackPressPricing";
 import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
 import { Body } from "../../components/layouts/body/Body";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { I18nMessages } from "../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { style } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
@@ -24,9 +24,9 @@ const Summary = ({ layout: Layout, children }) => {
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const [pricingHeight, setPricingHeight] = useState(0);
-    const titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
-    const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
-    const submitButtonText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
+    const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TITLE });
+    const descriptionText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_DESCRIPTION });
+    const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
     const { screen } = useDevice();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.js

@@ -4,13 +4,14 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-na
 import { Button, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Price } from "../../../../components/atoms/price/Price";
-import { I18nMessages } from "../../../../i18n/i18n";
+import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Pricing } from "../pricing/Pricing";
 import { style } from "./CollapsiblePricing.style";
 const CollapsiblePricing = ({ pricing, totalCheckoutItemsKept, collapsible = true, collapsed = false, submitButtonText, onPress = () => void 0, onSubmit, }) => {
     const { pendingToPay } = pricing;
-    const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
+    const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
     const totalCheckoutItemsKeptText = useI18nMessage({
+        domain: DOMAIN,
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
         values: { items: totalCheckoutItemsKept.toString() },
     });