@lookiero/checkout 11.1.0 → 11.3.0

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

@@ -2,25 +2,27 @@ 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 = () => {
+  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,
-  },
-});
+  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/src/infrastructure/ui/views/item/Item.tsx

@@ -28,7 +28,7 @@ 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 {
   CheckoutItemWithCustomerDecission,
   ItemWithCustomerDecission,
@@ -59,12 +59,15 @@ interface ItemProps {
 
 const Item: FC<ItemProps> = ({ 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();
@@ -194,6 +197,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
       handleOnNext,
       handleOnPrevious,
       itemDetailRouteMatch,
+      style.headerWrapper,
     ],
   );
 

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

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

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.tsx

@@ -1,11 +1,11 @@
-import React, { FC } from "react";
+import React, { FC, 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";
 
 type CustomerDecissionBannerStatus = Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
 
@@ -22,9 +22,12 @@ interface CustomerDecissionBannerProps {
 const CustomerDecissionBanner: FC<CustomerDecissionBannerProps> = ({ checkoutItemStatus, onPress }) => {
   const decissionText = useI18nMessage({ domain: DOMAIN, id: i18nMessageForCheckoutItemStatus[checkoutItemStatus] });
   const bannerButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_BANNER_BUTTON });
+
   const screenSize = useScreenSize();
   const isSmallScreen = screenSize === "S";
 
+  const style = useMemo(() => customerDecissionBannerStyle(), []);
+
   return (
     <View style={[style.container, isSmallScreen ? style.smallContainer : null]}>
       <InfoBox text={decissionText}>

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

@@ -1,28 +1,32 @@
 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: {
+      textAlign: "center",
+      width: "100%",
+    },
+    confirmButton: {
+      marginTop: space8,
+    },
+    description: {
+      marginVertical: space8,
+      width: "100%",
+    },
+    modalContent: {
+      paddingHorizontal: space6,
+    },
+    title: {
+      textAlign: "center",
+      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 { 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,22 +23,24 @@ 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}>
-        <Text align={ALIGN.CENTER} level={1} style={style.title}>
+        <Text level={1} style={style.title}>
           {titleText}
         </Text>
         <Text level={3} style={style.description}>
           {descriptionText}
         </Text>
         <Button style={style.button} onPress={onDismiss}>
-          <Text align={ALIGN.CENTER} level={3} selectable={false} style={style.buttonText} action upperCase>
+          <Text level={3} selectable={false} style={style.buttonText} action upperCase>
             {dismissButtonText}
           </Text>
         </Button>
         <Button style={[style.button, style.confirmButton]} variant={BUTTON_VARIANT.SECONDARY} onPress={onConfirm}>
-          <Text align={ALIGN.CENTER} level={3} selectable={false} style={style.buttonText} action upperCase>
+          <Text level={3} selectable={false} style={style.buttonText} action upperCase>
             {confirmButtonText}
           </Text>
         </Button>

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/productVariantDescription/ProductVariantDescription.style.ts

@@ -1,24 +1,29 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space1, space4, space6 } = theme();
+const style = () => {
+  const { colorTextMedium, 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: {
+      color: colorTextMedium,
+    },
+    container: {
+      width: "100%",
+    },
+    content: {
+      flex: 1,
+      gap: space1,
+    },
+    info: {
+      display: "flex",
+      flexDirection: "row",
+      marginBottom: space4,
+    },
+    smallContainer: {
+      paddingHorizontal: space6,
+    },
+  });
+};
 
 export { style };

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

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
@@ -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,14 +26,17 @@ 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.container, !isDesktopScreen && style.smallContainer]}>
       <View style={style.info}>
-        <View style={style.brand}>
-          <Text color={COLOR.TEXT_MEDIUM} level={1} detail>
+        <View style={style.content}>
+          <Text level={1} style={style.brand} detail>
             {brand}
           </Text>
           <Text level={1} detailBold>

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,7 +1,8 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { ButtonIcon, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { ReturnQuestionProjection } from "../../../../../../projection/returnQuestion/returnQuestion";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
 import { ReturnQuestions } from "../../../../components/organisms/returnQuestions/ReturnQuestions";
@@ -12,7 +13,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 +32,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,35 @@
 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, colorTextMedium, 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,
+    },
+    textActive: {
+      color: colorTextMedium,
+    },
+  });
+
+  return {
+    ...styles,
+    underlayColor: colorBgPrimaryLight,
+  };
+};
 
 export { style };