@lookiero/checkout 9.13.0 → 10.0.0-beta.0

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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { 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({ domain: DOMAIN, id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
-    const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
+    const decissionText = useI18nMessage({ id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
+    const bannerButtonText = useI18nMessage({ 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,19 +3,13 @@ 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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./GetOutOfCheckoutModal.style";
 const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
-    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,
-    });
+    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 });
     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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { 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({ 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 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 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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./ProductVariantDescription.style";
 const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, country, }) => {
-    const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
-    const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
+    const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
+    const uniqueText = useI18nMessage({ 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,7 +1,6 @@
 declare const style: {
     brand: {
         flex: number;
-        gap: number;
     };
     container: {
         width: "100%";

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

@@ -1,10 +1,9 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space1, space4, space6 } = theme();
+const { 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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { 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({ domain: DOMAIN, id: I18nMessages.FEEDBACK_TITLE });
+    const titleText = useI18nMessage({ 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/returnQuestionsForm/ReturnQuestionsForm.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { FeedbackProjection } from "../../../../../../projection/feedback/feedback";
+import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
+
+interface ReturnQuestionsFormProps {
+  readonly visible: boolean;
+  readonly returnQuestions: ReturnQuestionProjection[];
+  readonly onSubmit: (feedback: FeedbackProjection) => void;
+  readonly onClose: () => void;
+}
+declare const ReturnQuestionsForm: FC<ReturnQuestionsFormProps>;
+export { ReturnQuestionsForm };

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

@@ -0,0 +1,64 @@
+import { PortalHost } from "@gorhom/portal";
+import React, { useCallback } from "react";
+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 { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion";
+import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
+import { useReturnQuestionFeedback } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionFeedback";
+import { ReturnQuestionItemProvider } from "../../../../components/organisms/returnQuestions/behaviors/useReturnQuestionItem";
+import { HostDefaultReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem";
+import { HostSelectReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem";
+import { HostStackReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem";
+import { OptionReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem";
+import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./ReturnQuestionsForm.style";
+
+const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
+const returnQuestionItems = {
+  [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_TEXTAREA]: HostDefaultReturnQuestionItem,
+  [ReturnQuestionType.HOST_SELECT]: HostSelectReturnQuestionItem,
+  [ReturnQuestionType.HOST_STACK]: HostStackReturnQuestionItem,
+  [ReturnQuestionType.TEXTAREA]: TextareaReturnQuestionItem,
+  [ReturnQuestionType.OPTION]: OptionReturnQuestionItem,
+};
+const ReturnQuestionsForm = ({ returnQuestions, visible, onSubmit, onClose }) => {
+  const titleText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_TITLE });
+  const submitButtonText = useI18nMessage({ id: I18nMessages.RETURN_QUESTIONS_SUBMIT_BUTTON });
+  const feedback = useReturnQuestionFeedback();
+  const handleOnSubmit = useCallback(() => onSubmit(feedback), [feedback, onSubmit]);
+  return React.createElement(
+    ReturnQuestionItemProvider,
+    { returnQuestionItems: returnQuestionItems },
+    React.createElement(PortalHost, { name: RETURN_QUESTION_FORM_PORTAL_HOST_NAME }),
+    React.createElement(
+      Modal,
+      {
+        portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME,
+        testID: "return-questions-form-modal",
+        visible: visible,
+        scroll: true,
+        showCloseButton: true,
+        onClose: onClose,
+      },
+      React.createElement(
+        View,
+        { style: style.modalContent },
+        React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+        React.createElement(ReturnQuestions, {
+          portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME,
+          returnQuestions: returnQuestions,
+        }),
+        React.createElement(
+          Button,
+          { style: style.submit, testID: "return-questions-button", onPress: handleOnSubmit },
+          submitButtonText,
+        ),
+      ),
+    ),
+  );
+};
+export { ReturnQuestionsForm };

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

@@ -0,0 +1,12 @@
+declare const style: {
+  modalContent: {
+    paddingHorizontal: number;
+  };
+  submit: {
+    marginTop: number;
+  };
+  title: {
+    marginBottom: number;
+  };
+};
+export { style };

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

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space6, space8 } = theme();
+const style = StyleSheet.create({
+  modalContent: {
+    paddingHorizontal: space6,
+  },
+  submit: {
+    marginTop: space8,
+  },
+  title: {
+    marginBottom: space6,
+  },
+});
+export { style };

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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./SizeWithoutStockModal.style";
 const SizeWithoutStockModal = ({ visible, onDismiss }) => {
-    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 });
+    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 });
     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/Return.style.d.ts

@@ -0,0 +1,40 @@
+declare const style: {
+  description: {
+    color: string;
+  };
+  desktopInfo: {
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+  };
+  desktopLayoutSpacing: {
+    paddingVertical: number;
+  };
+  headerWrapper: {
+    display: "flex";
+    flexDirection: "column";
+  };
+  info: {
+    backgroundColor: string;
+    paddingBottom: number;
+    paddingHorizontal: number;
+    paddingTop: number;
+  };
+  layout: {
+    flex: number;
+    justifyContent: "center";
+  };
+  safeAreaView: {
+    backgroundColor: string;
+    flex: number;
+  };
+  scrollView: {
+    flex: number;
+  };
+  submit: {
+    backgroundColor: string;
+    borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
+    padding: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/views/return/Return.style.js

@@ -0,0 +1,44 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
+const style = StyleSheet.create({
+  description: {
+    color: colorTextMedium,
+  },
+  desktopInfo: {
+    borderTopLeftRadius: borderRadius5,
+    borderTopRightRadius: borderRadius5,
+  },
+  desktopLayoutSpacing: {
+    paddingVertical: space8,
+  },
+  headerWrapper: {
+    display: "flex",
+    flexDirection: "column",
+  },
+  info: {
+    backgroundColor: colorBgBase,
+    paddingBottom: space4,
+    paddingHorizontal: space6,
+    paddingTop: space8,
+  },
+  layout: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  safeAreaView: {
+    backgroundColor: colorBgPrimaryLight,
+    flex: 1,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  submit: {
+    backgroundColor: colorBgBase,
+    borderBottomLeftRadius: borderRadius5,
+    borderBottomRightRadius: borderRadius5,
+    padding: space6,
+  },
+});
+export { style };

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

@@ -2,18 +2,15 @@ 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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { 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({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
-    const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
+    const sizeText = useI18nMessage({ id: I18nMessages.ITEM_SIZE });
+    const uniqueText = useI18nMessage({ 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

@@ -24,9 +24,9 @@ import { HostStackReturnQuestionItem } from "../../../../components/organisms/re
 import { RadioReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem";
 import { TextareaReturnQuestionItem } from "../../../../components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem";
 import { ItemDetailHeader } from "../../../../components/templates/header/itemDetailHeader/ItemDetailHeader";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
-import { useBasePath } from "../../../../routing/useBasePath";
 import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
 import { style } from "./ReturnQuestionsForm.style";
 const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
@@ -40,12 +40,12 @@ const returnQuestionItems = {
 };
 const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout, segment, }) => {
     const navigate = useNavigate();
-    const basePath = useBasePath();
+    const { basePath } = useStaticInfo();
     const logger = useLogger();
     const { screen } = useDevice();
-    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 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 feedback = useReturnQuestionFeedback();
     const [returnQuestions] = useListReturnQuestionsByCheckoutItemId({
         checkoutItemId: checkoutItem.id,

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

@@ -21,7 +21,6 @@ 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, space1, space4, space6, space8 } = theme();
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
 const style = StyleSheet.create({
     background: {
         backgroundColor: colorBgPrimaryLight,
@@ -25,7 +25,6 @@ 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, DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { COLOR_I18N_PREFIX, 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({ 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 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 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,24 +16,23 @@ 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 { DOMAIN, I18nMessages } from "../../i18n/i18n";
+import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 const Summary = ({ layout: Layout, children }) => {
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
     const [pricingHeight, setPricingHeight] = useState(0);
-    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 titleText = useI18nMessage({ id: I18nMessages.SUMMARY_TITLE });
+    const descriptionText = useI18nMessage({ id: I18nMessages.SUMMARY_DESCRIPTION });
+    const submitButtonText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBMIT_BUTTON });
     const { screen } = useDevice();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
     const navigate = useNavigate();
-    const basePath = useBasePath();
+    const { basePath } = useStaticInfo();
     const match = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
     const tab = match?.params.tab;
     const trackPressPricing = useTrackPressPricing({

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

@@ -4,14 +4,13 @@ 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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { 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({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
+    const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
     const totalCheckoutItemsKeptText = useI18nMessage({
-        domain: DOMAIN,
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
         values: { items: totalCheckoutItemsKept.toString() },
     });

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -3,28 +3,26 @@ import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Price } from "../../../../components/atoms/price/Price";
-import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
+import { I18nMessages } from "../../../../i18n/i18n";
 import { style } from "./Pricing.style";
 const Row = ({ action = false, text, level = 3, children }) => (React.createElement(View, { style: style.row },
     React.createElement(Text, { action: action, level: level }, text),
     children));
 const Pricing = ({ pricing, totalCheckoutItemsKept }) => {
     const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
-    const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
+    const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
     const totalCheckoutItemsKeptText = useI18nMessage({
-        domain: DOMAIN,
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
         values: { items: totalCheckoutItemsKept.toString() },
     });
-    const subtotalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_SUBTOTAL });
-    const freeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FREE });
+    const subtotalText = useI18nMessage({ id: I18nMessages.SUMMARY_SUBTOTAL });
+    const freeText = useI18nMessage({ id: I18nMessages.SUMMARY_FREE });
     const discountText = useI18nMessage({
-        domain: DOMAIN,
         id: I18nMessages.SUMMARY_DISCOUNT,
         values: { discount: discountPercentage?.toString() },
     });
-    const creditText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_CREDIT });
-    const feeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_FEE });
+    const creditText = useI18nMessage({ id: I18nMessages.SUMMARY_CREDIT });
+    const feeText = useI18nMessage({ id: I18nMessages.SUMMARY_FEE });
     return (React.createElement(View, null,
         React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
             React.createElement(Price, { price: subtotal, variant: "subtotal" })),

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { LayoutRectangle } from "react-native";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+
+interface StickyPricingProps {
+  readonly pricing: PricingProjection;
+  readonly totalCheckoutItemsKept: number;
+  readonly collapsed: boolean;
+  readonly onPress: () => void;
+  readonly onSubmit: () => void;
+  readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
+}
+declare const StickyPricing: FC<StickyPricingProps>;
+export { StickyPricing };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Sticky } from "@lookiero/sty-psp-ui";
+import { Body } from "../../../../components/layouts/body/Body";
+import { Pricing } from "../pricing/Pricing";
+import { style } from "./StickyPricing.style";
+
+const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit, onLayout }) =>
+  React.createElement(
+    Sticky,
+    { style: style.sticky, onLayout: onLayout },
+    React.createElement(
+      Body,
+      null,
+      React.createElement(Pricing, {
+        balanceDiscount: pricing.balanceDiscount,
+        collapsed: collapsed,
+        discount: pricing.discount,
+        discountPercentage: pricing.discountPercentage,
+        pendingToPay: pricing.pendingToPay,
+        service: pricing.service,
+        subtotal: pricing.subtotal,
+        totalCheckoutItemsKept: totalCheckoutItemsKept,
+        onPress: onPress,
+        onSubmit: onSubmit,
+      }),
+    ),
+  );
+export { StickyPricing };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+  sticky: {
+    paddingBottom: number;
+    paddingTop: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space3, space4 } = theme();
+const style = StyleSheet.create({
+  sticky: {
+    paddingBottom: space4,
+    paddingTop: space3,
+  },
+});
+export { style };

package/dist/src/infrastructure/ui/views/summaryTabs/SummaryTabs.js

@@ -10,7 +10,6 @@ import { useTrackPressItem } from "../../../tracking/useTrackPressItem";
 import { useTrackTabView } from "../../../tracking/useTrackTabView";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { Routes } from "../../routing/routes";
-import { useBasePath } from "../../routing/useBasePath";
 import { CheckoutItemsTabs } from "./components/checkoutItemsTabs/CheckoutItemsTabs";
 const TAB_INDEX = {
     keep: 0,
@@ -18,11 +17,10 @@ const TAB_INDEX = {
 };
 const SummaryTabs = () => {
     const { tab } = useParams();
-    const { customer: { customerId, country, segment }, } = useStaticInfo();
+    const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
     const tabIndex = useMemo(() => TAB_INDEX[tab] || 0, [tab]);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const navigate = useNavigate();
-    const basePath = useBasePath();
     useTrackPageView({
         page: TrackingPage.SUMMARY,
         country,