@lookiero/checkout 11.1.0 → 11.3.0

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -1,18 +1,18 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableHighlight, View } from "react-native";
-import { COLOR, Text } from "@lookiero/aurora";
-import { Modal, theme } from "@lookiero/sty-psp-ui";
-import { style } from "./SelectModal.style";
-const { colorBgPrimaryLight } = theme();
+import { Text } from "@lookiero/aurora";
+import { Modal } from "@lookiero/sty-psp-ui";
+import { style as modalStyle } from "./SelectModal.style";
 const SelectModal = ({ modalVisible, options, style: customStyle, testID, title, value, portalHostName, onChange = () => void 0, onClose = () => void 0, }) => {
     const handleOnPressOption = useCallback((value) => {
         onChange(value);
         onClose();
     }, [onClose, onChange]);
+    const style = useMemo(() => modalStyle(), []);
     return (React.createElement(Modal, { portalHostName: portalHostName, testID: testID, visible: modalVisible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
             title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
-            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorBgPrimaryLight, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
-                React.createElement(Text, { color: value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT, level: 3, style: [style.optionText, customStyle?.optionText] }, label)))))));
+            options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: style.underlayColor, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
+                React.createElement(Text, { level: 3, style: [style.optionText, value === optionValue && style.textActive, customStyle?.optionText] }, label)))))));
 };
 export { SelectModal };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.d.ts

@@ -1,4 +1,5 @@
-declare const style: {
+declare const style: () => {
+    underlayColor: string;
     modalContent: {
         paddingBottom: number;
         paddingHorizontal: number;
@@ -14,5 +15,8 @@ declare const style: {
     optionText: {
         lineHeight: number;
     };
+    textActive: {
+        color: string;
+    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.js

@@ -1,21 +1,30 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderWidth1, colorBorderInteractive, space1, space5, space6 } = theme();
-const style = StyleSheet.create({
-    modalContent: {
-        paddingBottom: space6,
-        paddingHorizontal: space6,
-    },
-    modalTitle: {
-        marginBottom: space1,
-    },
-    option: {
-        borderBottomColor: colorBorderInteractive,
-        borderBottomWidth: borderWidth1,
-        paddingVertical: space5,
-    },
-    optionText: {
-        lineHeight: space6,
-    },
-});
+const style = () => {
+    const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, colorTextMedium, space1, space5, space6 } = theme();
+    const styles = StyleSheet.create({
+        modalContent: {
+            paddingBottom: space6,
+            paddingHorizontal: space6,
+        },
+        modalTitle: {
+            marginBottom: space1,
+        },
+        option: {
+            borderBottomColor: colorBorderInteractive,
+            borderBottomWidth: borderWidth1,
+            paddingVertical: space5,
+        },
+        optionText: {
+            lineHeight: space6,
+        },
+        textActive: {
+            color: colorTextMedium,
+        },
+    });
+    return {
+        ...styles,
+        underlayColor: colorBgPrimaryLight,
+    };
+};
 export { style };

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

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useMemo } 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 { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./SizeWithoutStockModal.style";
+import { style as sizeWithoutStockModalStyle } 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 style = useMemo(() => sizeWithoutStockModalStyle(), []);
     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/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     description: {
         color: string;
         marginBottom: number;

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

@@ -1,18 +1,20 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space1, space6, colorTextMedium } = theme();
-const style = StyleSheet.create({
-    description: {
-        color: colorTextMedium,
-        marginBottom: space6,
-        width: "100%",
-    },
-    modalContent: {
-        paddingHorizontal: space6,
-    },
-    title: {
-        marginBottom: space1,
-        width: "100%",
-    },
-});
+const style = () => {
+    const { space1, space6, colorTextMedium } = theme();
+    return StyleSheet.create({
+        description: {
+            color: colorTextMedium,
+            marginBottom: space6,
+            width: "100%",
+        },
+        modalContent: {
+            paddingHorizontal: space6,
+        },
+        title: {
+            marginBottom: space1,
+            width: "100%",
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
@@ -13,8 +13,9 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { CustomerDecissionBanner, } from "../../components/banner/CustomerDecissionBanner";
 import { ReturnQuestionsFeedback } from "../../components/returnQuestionsFeedback/ReturnQuestionsFeedback";
 import { ProductVariant } from "../../views/productVariant/ProductVariant";
-import { style } from "./ItemWithCustomerDecission.style";
+import { style as itemWithCustomerDecissionStyle } from "./ItemWithCustomerDecission.style";
 const ItemWithCustomerDecission = ({ checkoutId, checkoutItem, returnQuestions, currentProductVariant, onEditFeedback, }) => {
+    const style = useMemo(() => itemWithCustomerDecissionStyle(), []);
     const screenSize = useScreenSize();
     const isMobile = screenSize === "S";
     const logger = useLogger();

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     container: {
         justifyContent: "flex-start";
         paddingBottom: number;

package/dist/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.style.js

@@ -1,20 +1,22 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderWidth1, colorBorderInput, space6 } = theme();
-const style = StyleSheet.create({
-    container: {
-        justifyContent: "flex-start",
-        paddingBottom: space6,
-        paddingHorizontal: 0,
-    },
-    feedbackContainer: {
-        borderTopColor: colorBorderInput,
-        borderTopWidth: borderWidth1,
-        marginTop: space6,
-        paddingTop: space6,
-    },
-    feedbackContainerMobile: {
-        paddingHorizontal: space6,
-    },
-});
+const style = () => {
+    const { borderWidth1, colorBorderInput, space6 } = theme();
+    return StyleSheet.create({
+        container: {
+            justifyContent: "flex-start",
+            paddingBottom: space6,
+            paddingHorizontal: 0,
+        },
+        feedbackContainer: {
+            borderTopColor: colorBorderInput,
+            borderTopWidth: borderWidth1,
+            marginTop: space6,
+            paddingTop: space6,
+        },
+        feedbackContainerMobile: {
+            paddingHorizontal: space6,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js

@@ -1,9 +1,8 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Platform, ScrollView } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
-import { theme } from "@lookiero/sty-psp-ui";
 import "../../../../../../projection/checkout/viewFirstAvailableCheckoutByCustomerId";
 import { useKeepCheckoutItem } from "../../../../../domain/checkoutItem/react/useKeepCheckoutItem";
 import { useReplaceCheckoutItem } from "../../../../../domain/checkoutItem/react/useReplaceCheckoutItem";
@@ -15,11 +14,11 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { ItemActions } from "../../components/itemActions/ItemActions";
 import { SizeWithoutStockModal } from "../../components/sizeWithoutStockModal/SizeWithoutStockModal";
 import { ProductVariant } from "../productVariant/ProductVariant";
-import { style } from "./ItemWithoutCustomerDecission.style";
-const { space6 } = theme();
+import { style as itemWithoutCustomerDecissionStyle } from "./ItemWithoutCustomerDecission.style";
 const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProductsVariants, currentProductVariant, onReturn, }) => {
     const logger = useLogger();
     const { customer: { country, segment }, } = useStaticInfo();
+    const style = useMemo(() => itemWithoutCustomerDecissionStyle(), []);
     /* KeepCheckoutItem */
     const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id, logger });
     const trackKeepItem = useTrackKeepItem({
@@ -65,7 +64,9 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false, testID: checkoutItem.id },
             React.createElement(Body, { style: { row: style.container } },
-                React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } }))),
+                React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: {
+                        content: { paddingBottom: Platform.OS === "web" ? style.productVariantPaddingBottom : stickyHeight },
+                    } }))),
         React.createElement(ItemActions, { country: country, currentProductVariant: currentProductVariant, productVariants: bookedProductsVariants?.productVariants, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: onReturn, onShowSizeWithoutStockModal: handleOnShowSizeWithoutStockModal })));
 };
 export { ItemWithoutCustomerDecission };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.d.ts

@@ -1,4 +1,5 @@
-declare const style: {
+declare const style: () => {
+    productVariantPaddingBottom: number;
     container: {
         paddingBottom: number;
         paddingHorizontal: number;

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js

@@ -1,10 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space10 } = theme();
-const style = StyleSheet.create({
-    container: {
-        paddingBottom: space10,
-        paddingHorizontal: 0,
-    },
-});
+const style = () => {
+    const { space6, space10 } = theme();
+    const styles = StyleSheet.create({
+        container: {
+            paddingBottom: space10,
+            paddingHorizontal: 0,
+        },
+    });
+    return {
+        ...styles,
+        productVariantPaddingBottom: space6,
+    };
+};
 export { style };

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { View } from "react-native";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { MediaPerspective, } from "../../../../../../projection/checkoutItem/checkoutItem";
@@ -6,10 +6,11 @@ import { TrackingPage } from "../../../../../tracking/tracking";
 import { useTrackImageView } from "../../../../../tracking/useTrackImageView";
 import { ProductVariantDescription } from "../../components/productVariantDescription/ProductVariantDescription";
 import { ProductVariantSlider } from "../../components/productVariantSlider/ProductVariantSlider";
-import { style } from "./ProductVariant.style";
+import { style as productVariantStyle } from "./ProductVariant.style";
 const ProductVariant = ({ country, segment, checkoutId, checkoutItem, currentProductVariant, style: customStyle, children, customerDecissionBanner, }) => {
     const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
+    const style = useMemo(() => productVariantStyle(), []);
     const trackImageView = useTrackImageView({
         page: TrackingPage.ITEM,
         country,

package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     container: {
         backgroundColor: string;
     };

package/dist/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.js

@@ -1,18 +1,20 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space6, space12, colorBgBase, borderRadius4 } = theme();
-const style = StyleSheet.create({
-    container: {
-        backgroundColor: colorBgBase,
-    },
-    content: {
-        paddingVertical: space6,
-    },
-    largeContainer: {
-        borderRadius: borderRadius4,
-        marginTop: space12,
-        padding: space12,
-        paddingBottom: 0,
-    },
-});
+const style = () => {
+    const { space6, space12, colorBgBase, borderRadius4 } = theme();
+    return StyleSheet.create({
+        container: {
+            backgroundColor: colorBgBase,
+        },
+        content: {
+            paddingVertical: space6,
+        },
+        largeContainer: {
+            borderRadius: borderRadius4,
+            marginTop: space12,
+            padding: space12,
+            paddingBottom: 0,
+        },
+    });
+};
 export { style };

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

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useMemo } 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";
+import { style as priceStyle } from "./Price.style";
 const Price = ({ price, withPercentage = false }) => {
     const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
     const productPrice = useI18nNumber({
@@ -19,6 +19,7 @@ const Price = ({ price, withPercentage = false }) => {
         currency: price.currency,
     });
     const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
+    const style = useMemo(() => priceStyle(), []);
     return (React.createElement(View, { style: style.price, testID: "price" },
         isDiscounted && (React.createElement(Text, { level: 1, style: style.discountedPriceText, testID: "discounted-price-text", detail: true, lineThrough: true }, productPrice)),
         React.createElement(View, { style: style.discountedPriceInfo },

package/dist/src/infrastructure/ui/views/return/components/price/Price.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     discountedPercentage: {
         color: string;
     };

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

@@ -1,19 +1,21 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorTextError, colorTextMedium, space2 } = theme();
-const style = StyleSheet.create({
-    discountedPercentage: {
-        color: colorTextError,
-    },
-    discountedPriceInfo: {
-        alignItems: "flex-end",
-        marginLeft: space2,
-    },
-    discountedPriceText: {
-        color: colorTextMedium,
-    },
-    price: {
-        flexDirection: "row",
-    },
-});
+const style = () => {
+    const { colorTextError, colorTextMedium, space2 } = theme();
+    return StyleSheet.create({
+        discountedPercentage: {
+            color: colorTextError,
+        },
+        discountedPriceInfo: {
+            alignItems: "flex-end",
+            marginLeft: space2,
+        },
+        discountedPriceText: {
+            color: colorTextMedium,
+        },
+        price: {
+            flexDirection: "row",
+        },
+    });
+};
 export { style };

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

@@ -1,21 +1,22 @@
-import React from "react";
-import { Image } from "react-native";
-import { COLOR, Text, View, useDevice } from "@lookiero/aurora";
+import React, { useMemo } from "react";
+import { Image, View } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Column, Row } from "@lookiero/sty-psp-ui";
+import { Column, Row, useScreenSize } from "@lookiero/sty-psp-ui";
 import { size } from "../../../../../../projection/size/size";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Price } from "../price/Price";
-import { IMAGE_SIZE, style } from "./ProductVariantPreview.style";
+import { IMAGE_SIZE, style as productVariantPreviewStyle } from "./ProductVariantPreview.style";
 const ProductVariantPreview = ({ item, country }) => {
     const cdnImageUrl = useMediaImage();
-    const { screen } = useDevice();
+    const screenSize = useScreenSize();
     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" },
+    const style = useMemo(() => productVariantPreviewStyle(), []);
+    return (React.createElement(View, { style: [style.wrapper, screenSize === "S" && style.mobileWrapper], testID: "product-variant-preview" },
         React.createElement(Row, { style: style.row },
             React.createElement(Column, { size: { M: "2/3", L: "2/3" }, style: style.content },
                 mainImage && (React.createElement(Image, { resizeMode: "stretch", style: style.image, testID: "product-variant-image", source: {
@@ -25,9 +26,9 @@ const ProductVariantPreview = ({ item, country }) => {
                         }),
                     } })),
                 React.createElement(View, { style: style.info },
-                    React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, brand),
+                    React.createElement(Text, { level: 2, style: style.text, detail: true }, brand),
                     React.createElement(Text, { level: 2, detail: true }, name),
-                    React.createElement(Text, { color: COLOR.TEXT_MEDIUM, level: 2, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
+                    React.createElement(Text, { level: 2, style: style.text, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
                 React.createElement(View, { style: style.price },
                     React.createElement(Price, { price: price, withPercentage: true }))))));
 };

package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.style.d.ts

@@ -1,5 +1,5 @@
 declare const IMAGE_SIZE = 35;
-declare const style: {
+declare const style: () => {
     content: {
         flexDirection: "row";
     };
@@ -22,6 +22,9 @@ declare const style: {
         flex: number;
         justifyContent: "center";
     };
+    text: {
+        color: string;
+    };
     wrapper: {
         backgroundColor: string;
         flexDirection: "row";

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

@@ -1,34 +1,39 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, space2, space4 } = theme();
 const IMAGE_SIZE = 35;
-const style = StyleSheet.create({
-    content: {
-        flexDirection: "row",
-    },
-    image: {
-        borderRadius: borderRadius2,
-        width: IMAGE_SIZE,
-    },
-    info: {
-        flex: 1,
-        marginLeft: space2,
-    },
-    mobileWrapper: {
-        borderBottomWidth: borderWidth1,
-        borderColor: colorBorderInput,
-    },
-    price: {
-        justifyContent: "flex-end",
-    },
-    row: {
-        flex: 1,
-        justifyContent: "center",
-    },
-    wrapper: {
-        backgroundColor: colorBgBase,
-        flexDirection: "row",
-        padding: space4,
-    },
-});
+const style = () => {
+    const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, colorTextMedium, space2, space4 } = theme();
+    return StyleSheet.create({
+        content: {
+            flexDirection: "row",
+        },
+        image: {
+            borderRadius: borderRadius2,
+            width: IMAGE_SIZE,
+        },
+        info: {
+            flex: 1,
+            marginLeft: space2,
+        },
+        mobileWrapper: {
+            borderBottomWidth: borderWidth1,
+            borderColor: colorBorderInput,
+        },
+        price: {
+            justifyContent: "flex-end",
+        },
+        row: {
+            flex: 1,
+            justifyContent: "center",
+        },
+        text: {
+            color: colorTextMedium,
+        },
+        wrapper: {
+            backgroundColor: colorBgBase,
+            flexDirection: "row",
+            padding: space4,
+        },
+    });
+};
 export { style, IMAGE_SIZE };

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

@@ -1,12 +1,13 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { useCallback, useMemo } from "react";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { generatePath, useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { useReturnCheckoutItem } from "../../../../../domain/checkoutItem/react/useReturnCheckoutItem";
 import { useListReturnQuestionsByCheckoutItemId } from "../../../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
@@ -28,7 +29,7 @@ import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { ProductVariantPreview } from "../productVariantPreview/ProductVariantPreview";
-import { style } from "./ReturnQuestionsForm.style";
+import { style as returnQuestionsFormStyle } from "./ReturnQuestionsForm.style";
 const RETURN_QUESTION_FORM_PORTAL_HOST_NAME = "return-question-form-portal";
 const returnQuestionItems = {
     [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionItem,
@@ -42,7 +43,10 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     const navigate = useNavigate();
     const { basePath } = useStaticInfo();
     const logger = useLogger();
-    const { screen } = useDevice();
+    const screenSize = useScreenSize();
+    const isDektopScreen = screenSize === "L";
+    const isMobileScreen = screenSize === "S";
+    const style = useMemo(() => returnQuestionsFormStyle(), []);
     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 });
@@ -88,7 +92,7 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
         navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
     }, [basePath, checkout.items, checkoutItem, feedback, navigate, returnCheckoutItem, trackPressNext, trackReturnItem]);
     const header = useMemo(() => (React.createElement(Box, { style: style.headerWrapper },
-        React.createElement(ItemDetailHeader, { onBack: handleOnBack }))), [handleOnBack]);
+        React.createElement(ItemDetailHeader, { onBack: handleOnBack }))), [handleOnBack, style.headerWrapper]);
     const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
@@ -103,13 +107,13 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
             React.createElement(ProductVariantPreview, { country: country, item: checkoutItem }),
             React.createElement(KeyboardAwareScrollView, { extraScrollHeight: Platform.OS === "android" ? 10 : 120, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, testID: "return-questions-form" },
                 React.createElement(View, { style: style.background },
-                    React.createElement(AuroraLayout, { fullWidth: !screen.L, style: [style.layout, screen.L ? style.desktopLayoutSpacing : undefined] },
+                    React.createElement(AuroraLayout, { fullWidth: !isDektopScreen, style: [style.layout, isDektopScreen ? style.desktopLayoutSpacing : undefined] },
                         React.createElement(Box, { size: { L: "2/3" } },
-                            React.createElement(View, { style: [style.info, !screen.S && style.desktopInfo] },
+                            React.createElement(View, { style: [style.info, !isMobileScreen && style.desktopInfo] },
                                 React.createElement(Text, { level: 3, heading: true }, titleText),
                                 React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
                             React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
-                            React.createElement(View, { style: [style.submit, !screen.S && style.submitDesktop] },
+                            React.createElement(View, { style: [style.submit, !isMobileScreen && style.submitDesktop] },
                                 React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))))))));
 };
 export { ReturnQuestionsForm };

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

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     background: {
         backgroundColor: string;
     };