@lookiero/checkout 11.0.0 → 11.2.0

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

@@ -1,28 +1,30 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space6, space8 } = theme();
+const style = () => {
+  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%",
-  },
-});
+  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/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, 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";
 
 interface GetOutOfCheckoutModalProps {
   readonly visible: boolean;
@@ -23,6 +23,8 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
     id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON,
   });
 
+  const style = useMemo(() => getOutOfCheckoutModalStyle(), []);
+
   return (
     <Modal portalHostName="Checkout" visible={visible} onClose={onDismiss}>
       <View style={style.modalContent}>

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

@@ -1,32 +1,34 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorTextDisabled, space3, space2, space4, space6 } = theme();
+const style = () => {
+  const { colorTextDisabled, space3, space2, space4, space6 } = theme();
 
-const style = StyleSheet.create({
-  actionsRow: {
-    alignItems: "center",
-    flexDirection: "row",
-    marginBottom: space4,
-  },
-  inputDisabled: {
-    color: colorTextDisabled,
-  },
-  returnButton: {
-    flex: 1,
-  },
-  row: {
-    paddingHorizontal: space3,
-  },
-  sizeSelector: {
-    flex: 1,
-    marginRight: space2,
-  },
-  sticky: {
-    paddingBottom: space6,
-    paddingHorizontal: 0,
-    paddingTop: space6,
-  },
-});
+  return StyleSheet.create({
+    actionsRow: {
+      alignItems: "center",
+      flexDirection: "row",
+      marginBottom: space4,
+    },
+    inputDisabled: {
+      color: colorTextDisabled,
+    },
+    returnButton: {
+      flex: 1,
+    },
+    row: {
+      paddingHorizontal: space3,
+    },
+    sizeSelector: {
+      flex: 1,
+      marginRight: space2,
+    },
+    sticky: {
+      paddingBottom: space6,
+      paddingHorizontal: 0,
+      paddingTop: space6,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/item/components/itemActions/ItemActions.tsx

@@ -9,7 +9,7 @@ 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";
 
 interface ItemActionsProps {
   readonly productVariants?: ProductVariantProjection[];
@@ -33,6 +33,8 @@ const ItemActions: FC<ItemActionsProps> = ({
 }) => {
   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/src/infrastructure/ui/views/item/components/itemActions/__snapshots__/ItemActions.test.tsx.snap

@@ -793,6 +793,14 @@ exports[`ItemActions component matches the snapshot 1`] = `
                       "fontStyle": "normal",
                       "fontWeight": "normal",
                       "height": 24,
+                      "letterSpacing": -0.2,
+                      "lineHeight": 24,
+                      "minHeight": 24,
+                      "minWidth": 24,
+                      "paddingBottom": 0,
+                      "paddingLeft": 0,
+                      "paddingRight": 0,
+                      "paddingTop": 0,
                       "width": 24,
                     },
                   ]

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

@@ -1,24 +1,26 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space1, space4, space6 } = theme();
+const style = () => {
+  const { space1, space4, space6 } = theme();
 
-const style = StyleSheet.create({
-  brand: {
-    flex: 1,
-    gap: space1,
-  },
-  container: {
-    width: "100%",
-  },
-  info: {
-    display: "flex",
-    flexDirection: "row",
-    marginBottom: space4,
-  },
-  smallContainer: {
-    paddingHorizontal: space6,
-  },
-});
+  return StyleSheet.create({
+    brand: {
+      flex: 1,
+      gap: space1,
+    },
+    container: {
+      width: "100%",
+    },
+    info: {
+      display: "flex",
+      flexDirection: "row",
+      marginBottom: space4,
+    },
+    smallContainer: {
+      paddingHorizontal: space6,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -8,7 +8,7 @@ import { PriceProjection } from "../../../../../../projection/price/price";
 import { SizeProjection, size } from "../../../../../../projection/size/size";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./ProductVariantDescription.style";
+import { style as productVariantDescriptionStyle } from "./ProductVariantDescription.style";
 
 interface ProductVariantDescriptionProps {
   readonly brand: string;
@@ -26,9 +26,12 @@ const ProductVariantDescription: FC<ProductVariantDescriptionProps> = ({
 }) => {
   const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
   const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
+
   const screenDevice = useScreenSize();
   const isDesktopScreen = screenDevice !== "S";
 
+  const style = useMemo(() => productVariantDescriptionStyle(), []);
+
   return (
     <View style={[style.container, isDesktopScreen ? null : style.smallContainer]}>
       <View style={style.info}>

package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.style.ts

@@ -1,36 +1,44 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4 } = theme();
-
 const PAGINATION_SIZE = 37;
 
-const style = StyleSheet.create({
-  image: {
-    flex: 1,
-  },
-  largeImage: {
-    borderRadius: borderRadius4,
-  },
-  paginationActiveItemStyle: {
-    borderColor: colorBorderActionSecondary,
-  },
-  paginationImage: {
-    flex: 1,
-  },
-  paginationItemStyle: {
-    backgroundColor: colorBgBase,
-    borderColor: colorBgPrimaryMediumLight,
-    borderRadius: 0,
-    borderWidth: 1,
-    height: PAGINATION_SIZE,
-    width: PAGINATION_SIZE,
-  },
-  paginationStyle: {
-    bottom: 0,
-    marginTop: space4,
-    position: "relative",
-  },
-});
+const style = () => {
+  const { borderRadius4, colorBgBase, colorBgPrimaryMediumLight, colorBorderActionSecondary, space4, space16 } =
+    theme();
+
+  const styles = StyleSheet.create({
+    image: {
+      flex: 1,
+    },
+    largeImage: {
+      borderRadius: borderRadius4,
+    },
+    paginationActiveItemStyle: {
+      borderColor: colorBorderActionSecondary,
+    },
+    paginationImage: {
+      flex: 1,
+    },
+    paginationItemStyle: {
+      backgroundColor: colorBgBase,
+      borderColor: colorBgPrimaryMediumLight,
+      borderRadius: 0,
+      borderWidth: 1,
+      height: PAGINATION_SIZE,
+      width: PAGINATION_SIZE,
+    },
+    paginationStyle: {
+      bottom: 0,
+      marginTop: space4,
+      position: "relative",
+    },
+  });
+
+  return {
+    ...styles,
+    imageContainerMarginTop: space16,
+  };
+};
 
 export { style };

package/src/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useState } from "react";
+import React, { FC, useCallback, useMemo, useState } from "react";
 import {
   AspectRatioView,
   Bullets,
@@ -6,14 +6,12 @@ import {
   LazyImage,
   RenderBulletsFunction,
   RenderItemFunction,
-  theme,
   useScreenSize,
 } from "@lookiero/sty-psp-ui";
 import { MediaPerspective, MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
-import { style } from "./ProductVariantSlider.style";
+import { style as productVariantSliderStyle } from "./ProductVariantSlider.style";
 
-const { space16 } = theme();
 interface ProductVariantSlider {
   readonly producVariantMedia: MediaProjection[];
   readonly onChanged?: (active: number) => void;
@@ -23,6 +21,8 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
   const screenSize = useScreenSize();
   const isDesktopScreen = screenSize !== "S";
 
+  const style = useMemo(() => productVariantSliderStyle(), []);
+
   const [activeIndex, setActiveIndex] = useState(0);
   const handleOnActiveChanged = useCallback(
     (activeIndex: number) => {
@@ -42,7 +42,7 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
           aspectRatio={4 / 3}
           multiplier={isCollageImage && isLastItem ? 2 : 1}
           style={{
-            marginTop: isCollageImage && !isDesktopScreen ? space16 : 0,
+            marginTop: isCollageImage && !isDesktopScreen ? style.imageContainerMarginTop : 0,
             alignSelf: isCollageImage ? (isLastItem ? "flex-end" : "flex-start") : undefined,
           }}
         >
@@ -56,7 +56,14 @@ const ProductVariantSlider: FC<ProductVariantSlider> = ({ producVariantMedia, on
         </AspectRatioView>
       );
     },
-    [cdnImageUrl, isDesktopScreen, producVariantMedia.length],
+    [
+      cdnImageUrl,
+      isDesktopScreen,
+      producVariantMedia.length,
+      style.image,
+      style.imageContainerMarginTop,
+      style.largeImage,
+    ],
   );
 
   const renderBullets: RenderBulletsFunction = useCallback(

package/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.ts

@@ -1,15 +1,17 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space4 } = theme();
+const style = () => {
+  const { space4 } = theme();
 
-const style = StyleSheet.create({
-  titleContainer: {
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginBottom: space4,
-  },
-});
+  return StyleSheet.create({
+    titleContainer: {
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      marginBottom: space4,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
 import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -12,7 +12,7 @@ import {
 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 { style } from "./ReturnQuestionsFeedback.style";
+import { style as returnQuestionsFeedbackStyle } from "./ReturnQuestionsFeedback.style";
 
 const returnQuestionItems: ReturnQuestionItems = {
   [ReturnQuestionType.HOST_DEFAULT]: HostDefaultReturnQuestionFeedbackItem,
@@ -31,6 +31,8 @@ interface ReturnQuestionsFeedbackProps {
 const ReturnQuestionsFeedback: FC<ReturnQuestionsFeedbackProps> = ({ returnQuestions, onEditFeedback }) => {
   const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_TITLE });
 
+  const style = useMemo(() => returnQuestionsFeedbackStyle(), []);
+
   return (
     <View>
       <View style={style.titleContainer}>

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

@@ -1,24 +1,31 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { borderWidth1, colorBorderInteractive, space1, space5, space6 } = theme();
+const style = () => {
+  const { borderWidth1, colorBgPrimaryLight, 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 styles = StyleSheet.create({
+    modalContent: {
+      paddingBottom: space6,
+      paddingHorizontal: space6,
+    },
+    modalTitle: {
+      marginBottom: space1,
+    },
+    option: {
+      borderBottomColor: colorBorderInteractive,
+      borderBottomWidth: borderWidth1,
+      paddingVertical: space5,
+    },
+    optionText: {
+      lineHeight: space6,
+    },
+  });
+
+  return {
+    ...styles,
+    underlayColor: colorBgPrimaryLight,
+  };
+};
 
 export { style };

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.tsx

@@ -1,10 +1,8 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import { StyleProp, TextStyle, TouchableHighlight, View, ViewStyle } 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 { Modal } from "@lookiero/sty-psp-ui";
+import { style as modalStyle } from "./SelectModal.style";
 
 interface SelectModalStyle {
   readonly modalContent: StyleProp<ViewStyle>;
@@ -48,6 +46,8 @@ const SelectModal: FC<SelectModalProps> = ({
     [onClose, onChange],
   );
 
+  const style = useMemo(() => modalStyle(), []);
+
   return (
     <Modal
       portalHostName={portalHostName}
@@ -70,7 +70,7 @@ const SelectModal: FC<SelectModalProps> = ({
             disabled={value === optionValue}
             style={[style.option, customStyle?.option]}
             testID={optionValue}
-            underlayColor={colorBgPrimaryLight}
+            underlayColor={style.underlayColor}
             accessible
             onPress={value !== optionValue ? () => handleOnPressOption(optionValue) : undefined}
           >

package/src/infrastructure/ui/views/item/components/selectModal/__snapshots__/SelecModal.test.tsx.snap

@@ -219,6 +219,14 @@ exports[`SelectField component matches the snapshot 1`] = `
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                     "height": 24,
+                    "letterSpacing": -0.2,
+                    "lineHeight": 24,
+                    "minHeight": 24,
+                    "minWidth": 24,
+                    "paddingBottom": 0,
+                    "paddingLeft": 0,
+                    "paddingRight": 0,
+                    "paddingTop": 0,
                     "width": 24,
                   },
                 ]

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

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

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, 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";
 
 interface SizeWithoutStockModalProps {
   readonly visible: boolean;
@@ -15,6 +15,8 @@ const SizeWithoutStockModal: FC<SizeWithoutStockModalProps> = ({ visible, onDism
   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 (
     <Modal portalHostName="Checkout" visible={visible} showCloseButton onClose={onDismiss}>
       <View style={style.modalContent}>

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/__snapshots__/SizeWithoutStockModal.test.tsx.snap

@@ -219,6 +219,14 @@ exports[`SizeWithoutStockModal component matches the snapshot 1`] = `
                     "fontStyle": "normal",
                     "fontWeight": "normal",
                     "height": 24,
+                    "letterSpacing": -0.2,
+                    "lineHeight": 24,
+                    "minHeight": 24,
+                    "minWidth": 24,
+                    "paddingBottom": 0,
+                    "paddingLeft": 0,
+                    "paddingRight": 0,
+                    "paddingTop": 0,
                     "width": 24,
                   },
                 ]

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

@@ -1,23 +1,25 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { borderWidth1, colorBorderInput, space6 } = theme();
+const style = () => {
+  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,
-  },
-});
+  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 };