@lookiero/checkout 11.1.0 → 11.2.0

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,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Image } from "react-native";
 import { COLOR, Text, View, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -7,7 +7,7 @@ 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();
@@ -15,6 +15,7 @@ const ProductVariantPreview = ({ item, country }) => {
     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");
+    const style = useMemo(() => productVariantPreviewStyle(), []);
     return (React.createElement(View, { style: [style.wrapper, !screen.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 },

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";
     };

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

@@ -1,34 +1,36 @@
 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, 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",
+        },
+        wrapper: {
+            backgroundColor: colorBgBase,
+            flexDirection: "row",
+            padding: space4,
+        },
+    });
+};
 export { style, IMAGE_SIZE };

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

@@ -28,7 +28,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,
@@ -43,6 +43,7 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
     const { basePath } = useStaticInfo();
     const logger = useLogger();
     const { screen } = useDevice();
+    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 +89,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);

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;
     };

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

@@ -1,52 +1,54 @@
 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 style = StyleSheet.create({
-    background: {
-        backgroundColor: colorBgPrimaryLight,
-    },
-    description: {
-        color: colorTextMedium,
-    },
-    desktopInfo: {
-        borderTopLeftRadius: borderRadius5,
-        borderTopRightRadius: borderRadius5,
-    },
-    desktopLayoutSpacing: {
-        paddingVertical: space8,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    headerWrapper: {
-        display: "flex",
-        flexDirection: "column",
-    },
-    info: {
-        backgroundColor: colorBgBase,
-        gap: space1,
-        paddingBottom: space4,
-        paddingHorizontal: space6,
-        paddingTop: space8,
-    },
-    layout: {
-        flex: 1,
-        justifyContent: "center",
-    },
-    safeAreaView: {
-        flex: 1,
-    },
-    scrollView: {
-        flex: 1,
-    },
-    submit: {
-        backgroundColor: colorBgBase,
-        padding: space6,
-    },
-    submitDesktop: {
-        borderBottomLeftRadius: borderRadius5,
-        borderBottomRightRadius: borderRadius5,
-    },
-});
+const style = () => {
+    const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space1, space4, space6, space8 } = theme();
+    return StyleSheet.create({
+        background: {
+            backgroundColor: colorBgPrimaryLight,
+        },
+        description: {
+            color: colorTextMedium,
+        },
+        desktopInfo: {
+            borderTopLeftRadius: borderRadius5,
+            borderTopRightRadius: borderRadius5,
+        },
+        desktopLayoutSpacing: {
+            paddingVertical: space8,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        headerWrapper: {
+            display: "flex",
+            flexDirection: "column",
+        },
+        info: {
+            backgroundColor: colorBgBase,
+            gap: space1,
+            paddingBottom: space4,
+            paddingHorizontal: space6,
+            paddingTop: space8,
+        },
+        layout: {
+            flex: 1,
+            justifyContent: "center",
+        },
+        safeAreaView: {
+            flex: 1,
+        },
+        scrollView: {
+            flex: 1,
+        },
+        submit: {
+            backgroundColor: colorBgBase,
+            padding: space6,
+        },
+        submitDesktop: {
+            borderBottomLeftRadius: borderRadius5,
+            borderBottomRightRadius: borderRadius5,
+        },
+    });
+};
 export { style };

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
 import { COLOR, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -8,12 +8,13 @@ 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 { IMAGE_WIDTH, style } from "./ProductVariant.style";
+import { IMAGE_WIDTH, style as productVariantStyle } 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 cdnImageUrl = useMediaImage();
+    const style = useMemo(() => productVariantStyle(), []);
     return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
         React.createElement(View, { style: style.row },
             React.createElement(View, null,

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

@@ -1,5 +1,5 @@
 declare const IMAGE_WIDTH = 104;
-declare const style: {
+declare const style: () => {
     container: {
         alignItems: "flex-end";
         borderBottomColor: string;

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

@@ -1,43 +1,45 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgSurface, borderRadius3, borderRadiusFull, borderWidth2, colorBorderInput, colorBgPrimaryLight, space05, space1, space2, space4, } = theme();
 const IMAGE_WIDTH = 104;
 const IMAGE_HEIGHT = 132;
-const style = StyleSheet.create({
-    container: {
-        alignItems: "flex-end",
-        borderBottomColor: colorBgPrimaryLight,
-        borderBottomWidth: 1,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        paddingVertical: space4,
-    },
-    descriptionContainer: {
-        alignSelf: "stretch",
-        justifyContent: "space-between",
-        marginLeft: space2,
-    },
-    infoProductVariant: {
-        alignItems: "flex-start",
-    },
-    media: {
-        borderColor: colorBorderInput,
-        borderRadius: borderRadius3,
-        borderWidth: borderWidth2,
-        height: IMAGE_HEIGHT,
-        width: IMAGE_WIDTH,
-    },
-    row: {
-        alignItems: "flex-end",
-        flexDirection: "row",
-    },
-    sizeChange: {
-        backgroundColor: colorBgSurface,
-        borderRadius: borderRadiusFull,
-        marginTop: space4,
-        paddingBottom: space05,
-        paddingHorizontal: space2,
-        paddingTop: space1,
-    },
-});
+const style = () => {
+    const { colorBgSurface, borderRadius3, borderRadiusFull, borderWidth2, colorBorderInput, colorBgPrimaryLight, space05, space1, space2, space4, } = theme();
+    return StyleSheet.create({
+        container: {
+            alignItems: "flex-end",
+            borderBottomColor: colorBgPrimaryLight,
+            borderBottomWidth: 1,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            paddingVertical: space4,
+        },
+        descriptionContainer: {
+            alignSelf: "stretch",
+            justifyContent: "space-between",
+            marginLeft: space2,
+        },
+        infoProductVariant: {
+            alignItems: "flex-start",
+        },
+        media: {
+            borderColor: colorBorderInput,
+            borderRadius: borderRadius3,
+            borderWidth: borderWidth2,
+            height: IMAGE_HEIGHT,
+            width: IMAGE_WIDTH,
+        },
+        row: {
+            alignItems: "flex-end",
+            flexDirection: "row",
+        },
+        sizeChange: {
+            backgroundColor: colorBgSurface,
+            borderRadius: borderRadiusFull,
+            marginTop: space4,
+            paddingBottom: space05,
+            paddingHorizontal: space2,
+            paddingTop: space1,
+        },
+    });
+};
 export { style, IMAGE_WIDTH };

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

@@ -18,16 +18,17 @@ import { Body } from "../../components/layouts/body/Body";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { DOMAIN, I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
-import { style } from "./Summary.style";
+import { style as summaryStyle } from "./Summary.style";
 import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 const Summary = ({ layout: Layout, children }) => {
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
+    const { screen } = useDevice();
+    const style = useMemo(() => summaryStyle(), []);
     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 { screen } = useDevice();
     const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });

package/dist/src/infrastructure/ui/views/summary/Summary.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     contentWrapper: {
         backgroundColor: string;
         flexGrow: number;

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

@@ -1,74 +1,76 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space3, space4, space6, space12, space16, borderRadius4, colorBgBase, } = theme();
-const style = StyleSheet.create({
-    contentWrapper: {
-        backgroundColor: colorBgBase,
-        flexGrow: 0,
-    },
-    description: {
-        color: colorTextMedium,
-        marginBottom: space6,
-    },
-    desktopContentWrapper: {
-        borderRadius: borderRadius4,
-        paddingHorizontal: space6,
-        paddingVertical: space12,
-    },
-    desktopLayoutSpacing: {
-        paddingVertical: space12,
-    },
-    desktopListSpacing: {
-        paddingRight: space16,
-    },
-    desktopResume: {
-        borderRadius: borderRadius4,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    mobileInfo: {
-        paddingHorizontal: space6,
-        paddingTop: space6,
-    },
-    mobileResume: {
-        shadowColor: colorText,
-        shadowOpacity: 0.15,
-        ...Platform.select({
-            web: {
-                shadowOffset: { width: 0, height: 8 },
-                shadowRadius: 18,
-                elevation: 0.5,
-            },
-        }),
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    },
-    princingWrapper: {
-        padding: space6,
-    },
-    resume: {
-        overflow: "hidden",
-        backgroundColor: colorBgBase,
-        ...Platform.select({
-            web: {
-                position: "sticky",
-                top: space12,
-                alignSelf: "flex-start",
-            },
-        }),
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    },
-    scrollView: {
-        backgroundColor: colorBgPrimaryLight,
-        flex: 1,
-    },
-    sticky: {
-        paddingBottom: space4,
-        paddingTop: space3,
-    },
-    title: {
-        marginBottom: space2,
-    },
-});
+const style = () => {
+    const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space3, space4, space6, space12, space16, borderRadius4, colorBgBase, } = theme();
+    return StyleSheet.create({
+        contentWrapper: {
+            backgroundColor: colorBgBase,
+            flexGrow: 0,
+        },
+        description: {
+            color: colorTextMedium,
+            marginBottom: space6,
+        },
+        desktopContentWrapper: {
+            borderRadius: borderRadius4,
+            paddingHorizontal: space6,
+            paddingVertical: space12,
+        },
+        desktopLayoutSpacing: {
+            paddingVertical: space12,
+        },
+        desktopListSpacing: {
+            paddingRight: space16,
+        },
+        desktopResume: {
+            borderRadius: borderRadius4,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        mobileInfo: {
+            paddingHorizontal: space6,
+            paddingTop: space6,
+        },
+        mobileResume: {
+            shadowColor: colorText,
+            shadowOpacity: 0.15,
+            ...Platform.select({
+                web: {
+                    shadowOffset: { width: 0, height: 8 },
+                    shadowRadius: 18,
+                    elevation: 0.5,
+                },
+            }),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        },
+        princingWrapper: {
+            padding: space6,
+        },
+        resume: {
+            overflow: "hidden",
+            backgroundColor: colorBgBase,
+            ...Platform.select({
+                web: {
+                    position: "sticky",
+                    top: space12,
+                    alignSelf: "flex-start",
+                },
+            }),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        },
+        scrollView: {
+            backgroundColor: colorBgPrimaryLight,
+            flex: 1,
+        },
+        sticky: {
+            paddingBottom: space4,
+            paddingTop: space3,
+        },
+        title: {
+            marginBottom: space2,
+        },
+    });
+};
 export { style };