@lookiero/checkout 11.1.0 → 11.2.0

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.js

@@ -1,11 +1,13 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space10 } = theme();
-const style = StyleSheet.create({
-    button: {
-        alignSelf: "auto",
-        height: space10,
-        width: space10,
-    },
-});
+const style = () => {
+    const { space10 } = theme();
+    return StyleSheet.create({
+        button: {
+            alignSelf: "auto",
+            height: space10,
+            width: space10,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.js

@@ -1,12 +1,13 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import { style } from "./ItemDetailHeader.style";
+import { style as itemDetailHeaderStyle } from "./ItemDetailHeader.style";
 const ItemDetailHeader = ({ onBack }) => {
     const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
+    const style = useMemo(() => itemDetailHeaderStyle(), []);
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
         React.createElement(Text, { level: 3, action: true }, title),

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     button: {
         alignSelf: "auto";
         height: number;

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.style.js

@@ -1,11 +1,13 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space10 } = theme();
-const style = StyleSheet.create({
-    button: {
-        alignSelf: "auto",
-        height: space10,
-        width: space10,
-    },
-});
+const style = () => {
+    const { space10 } = theme();
+    return StyleSheet.create({
+        button: {
+            alignSelf: "auto",
+            height: space10,
+            width: space10,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { generatePath, useNavigate } from "react-router-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -7,8 +7,9 @@ import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Routes } from "../../../../routing/routes";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import style from "./ItemHeader.style";
+import { style as itemHeaderStyle } from "./ItemHeader.style";
 const ItemHeader = ({ items, item, onNext, onPrevious }) => {
+    const style = useMemo(() => itemHeaderStyle(), []);
     const title = useI18nMessage({ domain: DOMAIN, id: I18nMessages.HEADER_CHECKOUT_TITLE });
     const itemIndex = items.indexOf(item);
     const isFirstItem = itemIndex === 0;

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.style.d.ts

@@ -1,8 +1,8 @@
-declare const style: {
+declare const style: () => {
     button: {
         alignSelf: "auto";
         height: number;
         width: number;
     };
 };
-export default style;
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.style.js

@@ -1,11 +1,13 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space10 } = theme();
-const style = StyleSheet.create({
-    button: {
-        alignSelf: "auto",
-        height: space10,
-        width: space10,
-    },
-});
-export default style;
+const style = () => {
+    const { space10 } = theme();
+    return StyleSheet.create({
+        button: {
+            alignSelf: "auto",
+            height: space10,
+            width: space10,
+        },
+    });
+};
+export { style };

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

@@ -6,10 +6,12 @@ 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, domain: DOMAIN, portalHostName: "Checkout" }),
-    React.createElement(PortalHost, { name: "Checkout" }),
-    children));
+const App = ({ children }) => {
+    const { colorBgBase } = theme();
+    return (React.createElement(SafeAreaProvider, null,
+        React.createElement(StatusBar, { backgroundColor: colorBgBase, barStyle: "dark-content", translucent: true }),
+        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

@@ -21,11 +21,12 @@ 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";
-import { style } from "./Checkout.style";
+import { style as checkoutStyle } from "./Checkout.style";
 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 style = useMemo(() => checkoutStyle(), []);
     const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
     const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const { screen } = useDevice();

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts

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

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

@@ -1,65 +1,67 @@
 import { StyleSheet, Platform } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
-const style = StyleSheet.create({
-    contentWrapper: {
-        backgroundColor: colorBgBase,
-        flexGrow: 0,
-        paddingHorizontal: space6,
-        paddingVertical: space6,
-    },
-    desktopContentWrapper: {
-        borderRadius: borderRadius4,
-        paddingVertical: space12,
-    },
-    desktopLayoutSpacing: {
-        paddingVertical: space12,
-    },
-    desktopListSpacing: {
-        paddingRight: space16,
-    },
-    desktopResume: {
-        borderRadius: borderRadius4,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    paymentSelector: {
-        marginTop: space6,
-    },
-    paymentSelectorNL: {
-        marginBottom: space6,
-    },
-    princingWrapper: {
-        padding: space6,
-    },
-    princingWrapperSmall: {
-        backgroundColor: colorBgPrimaryLight,
-        paddingBottom: space2,
-    },
-    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: space4,
-    },
-});
+const style = () => {
+    const { borderRadius4, colorBgPrimaryLight, colorBgBase, space2, space3, space4, space6, space12, space16 } = theme();
+    return StyleSheet.create({
+        contentWrapper: {
+            backgroundColor: colorBgBase,
+            flexGrow: 0,
+            paddingHorizontal: space6,
+            paddingVertical: space6,
+        },
+        desktopContentWrapper: {
+            borderRadius: borderRadius4,
+            paddingVertical: space12,
+        },
+        desktopLayoutSpacing: {
+            paddingVertical: space12,
+        },
+        desktopListSpacing: {
+            paddingRight: space16,
+        },
+        desktopResume: {
+            borderRadius: borderRadius4,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        paymentSelector: {
+            marginTop: space6,
+        },
+        paymentSelectorNL: {
+            marginBottom: space6,
+        },
+        princingWrapper: {
+            padding: space6,
+        },
+        princingWrapperSmall: {
+            backgroundColor: colorBgPrimaryLight,
+            paddingBottom: space2,
+        },
+        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: space4,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/feedback/Feedback.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -14,13 +14,14 @@ import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
-import { style } from "./Feedback.style";
+import { style as feedbackStyle } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
 const Feedback = ({ layout: Layout }) => {
     const logger = useLogger();
     const screenSize = useScreenSize();
     const isDesktop = screenSize === "L";
     const { customer: { customerId, country, segment }, } = useStaticInfo();
+    const style = useMemo(() => feedbackStyle(), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
         checkoutId: checkout?.id,

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.d.ts

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

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.js

@@ -1,14 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space3, space6, space8 } = theme();
-const style = StyleSheet.create({
-    container: {
-        justifyContent: "flex-start",
-        paddingHorizontal: space6,
-        paddingVertical: space8,
-    },
-    containerDesktop: {
-        paddingHorizontal: space3,
-    },
-});
+const style = () => {
+    const { space3, space6, space8 } = theme();
+    return StyleSheet.create({
+        container: {
+            justifyContent: "flex-start",
+            paddingHorizontal: space6,
+            paddingVertical: space8,
+        },
+        containerDesktop: {
+            paddingHorizontal: space3,
+        },
+    });
+};
 export { style };

package/dist/src/infrastructure/ui/views/item/Item.js

@@ -22,14 +22,15 @@ import { ItemDetailHeader } from "../../components/templates/header/itemDetailHe
 import { ItemHeader } from "../../components/templates/header/itemHeader/ItemHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { Routes } from "../../routing/routes";
-import { style } from "./Item.style";
+import { style as itemStyle } from "./Item.style";
 import { ItemWithCustomerDecission, } from "./views/itemWithCustomerDecission/ItemWithCustomerDecission";
 import { ItemWithoutCustomerDecission, } from "./views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission";
 const Item = ({ layout: Layout }) => {
     const logger = useLogger();
-    const screenSize = useScreenSize();
     const navigate = useNavigate();
     const { customer: { customerId, country, segment }, basePath, } = useStaticInfo();
+    const style = useMemo(() => itemStyle(), []);
+    const screenSize = useScreenSize();
     const isDesktopScreen = screenSize !== "S";
     const { id } = useParams();
     const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
@@ -124,6 +125,7 @@ const Item = ({ layout: Layout }) => {
         handleOnNext,
         handleOnPrevious,
         itemDetailRouteMatch,
+        style.headerWrapper,
     ]);
     const itemWithoutCustomerDecission = checkoutItem.status === CheckoutItemStatus.INITIAL;
     const dependenciesLoaded = checkoutStatus !== QueryStatus.LOADING &&

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

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     fiveItemsDiscountPadding: {
         paddingTop: number;
     };

package/dist/src/infrastructure/ui/views/item/Item.style.js

@@ -1,23 +1,25 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { colorBgPrimaryLight, space12 } = theme();
-const style = StyleSheet.create({
-    fiveItemsDiscountPadding: {
-        paddingTop: space12,
-    },
-    header: {
-        height: HEADER_HEIGHT,
-    },
-    headerWithDoubleHeight: {
-        height: HEADER_HEIGHT * 2,
-    },
-    headerWrapper: {
-        display: "flex",
-        flexDirection: "column",
-    },
-    safeAreaView: {
-        backgroundColor: colorBgPrimaryLight,
-    },
-});
+const style = () => {
+    const { colorBgPrimaryLight, space12 } = theme();
+    return StyleSheet.create({
+        fiveItemsDiscountPadding: {
+            paddingTop: space12,
+        },
+        header: {
+            height: HEADER_HEIGHT,
+        },
+        headerWithDoubleHeight: {
+            height: HEADER_HEIGHT * 2,
+        },
+        headerWrapper: {
+            display: "flex",
+            flexDirection: "column",
+        },
+        safeAreaView: {
+            backgroundColor: colorBgPrimaryLight,
+        },
+    });
+};
 export { style };

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

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Pressable, View } from "react-native";
 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 { style } from "./CustomerDecissionBanner.style";
+import { style as customerDecissionBannerStyle } from "./CustomerDecissionBanner.style";
 const i18nMessageForCheckoutItemStatus = {
     [CheckoutItemStatus.KEPT]: I18nMessages.ITEM_BANNER_CUSTOMER_KEPT_DECISSION,
     [CheckoutItemStatus.REPLACED]: I18nMessages.ITEM_BANNER_CUSTOMER_REPLACED_DECISSION,
@@ -16,6 +16,7 @@ const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
     const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
     const screenSize = useScreenSize();
     const isSmallScreen = screenSize === "S";
+    const style = useMemo(() => customerDecissionBannerStyle(), []);
     return (React.createElement(View, { style: [style.container, isSmallScreen ? style.smallContainer : null] },
         React.createElement(InfoBox, { text: decissionText },
             React.createElement(Pressable, { testID: "customer-decission-banner", onPress: onPress },

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.d.ts

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

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

@@ -1,12 +1,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space4, space6 } = theme();
-const style = StyleSheet.create({
-    container: {
-        marginBottom: space4,
-    },
-    smallContainer: {
-        marginHorizontal: space6,
-    },
-});
+const style = () => {
+    const { space4, space6 } = theme();
+    return StyleSheet.create({
+        container: {
+            marginBottom: space4,
+        },
+        smallContainer: {
+            marginHorizontal: space6,
+        },
+    });
+};
 export { style };

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

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 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 { style } from "./GetOutOfCheckoutModal.style";
+import { style as getOutOfCheckoutModalStyle } 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 });
@@ -16,6 +16,7 @@ const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
         domain: DOMAIN,
         id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON,
     });
+    const style = useMemo(() => getOutOfCheckoutModalStyle(), []);
     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/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     button: {
         flex: number;
     };

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

@@ -1,25 +1,27 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space6, space8 } = theme();
-const style = StyleSheet.create({
-    button: {
-        flex: 0,
-    },
-    buttonText: {
-        width: "100%",
-    },
-    confirmButton: {
-        marginTop: space8,
-    },
-    description: {
-        marginVertical: space8,
-        width: "100%",
-    },
-    modalContent: {
-        paddingHorizontal: space6,
-    },
-    title: {
-        width: "100%",
-    },
-});
+const style = () => {
+    const { space6, space8 } = theme();
+    return StyleSheet.create({
+        button: {
+            flex: 0,
+        },
+        buttonText: {
+            width: "100%",
+        },
+        confirmButton: {
+            marginTop: space8,
+        },
+        description: {
+            marginVertical: space8,
+            width: "100%",
+        },
+        modalContent: {
+            paddingHorizontal: space6,
+        },
+        title: {
+            width: "100%",
+        },
+    });
+};
 export { style };

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

@@ -7,9 +7,10 @@ import { size } from "../../../../../../projection/size/size";
 import { Body } from "../../../../components/layouts/body/Body";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { SelectModal } from "../selectModal/SelectModal";
-import { style } from "./ItemActions.style";
+import { style as itemActionsStyle } from "./ItemActions.style";
 const ItemActions = ({ productVariants, currentProductVariant, country, onShowSizeWithoutStockModal = () => void 0, onKeep, onReplace, onReturn, onLayout, }) => {
     const [modalVisible, setModalVisible] = useState(false);
+    const style = useMemo(() => itemActionsStyle(), []);
     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 });

package/dist/src/infrastructure/ui/views/item/components/itemActions/ItemActions.style.d.ts

@@ -1,4 +1,4 @@
-declare const style: {
+declare const style: () => {
     actionsRow: {
         alignItems: "center";
         flexDirection: "row";