@lookiero/checkout 11.0.0 → 11.2.0

package/src/infrastructure/ui/views/item/views/itemWithCustomerDecission/ItemWithCustomerDecission.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
@@ -19,7 +19,7 @@ import {
 } 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";
 
 interface CheckoutItemWithCustomerDecission extends CheckoutItemProjection {
   readonly status: Exclude<CheckoutItemStatus, CheckoutItemStatus.INITIAL>;
@@ -40,6 +40,8 @@ const ItemWithCustomerDecission: FC<ItemWithCustomerDecissionProps> = ({
   currentProductVariant,
   onEditFeedback,
 }) => {
+  const style = useMemo(() => itemWithCustomerDecissionStyle(), []);
+
   const screenSize = useScreenSize();
   const isMobile = screenSize === "S";
   const logger = useLogger();

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

@@ -1,13 +1,20 @@
 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/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx

@@ -1,9 +1,8 @@
-import React, { FC, useCallback, useState } from "react";
+import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, 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 { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import {
   BookedProductsVariantsProjection,
@@ -21,7 +20,7 @@ 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";
+import { style as itemWithoutCustomerDecissionStyle } from "./ItemWithoutCustomerDecission.style";
 
 interface CheckoutItemWithoutCustomerDecission extends CheckoutItemProjection {
   readonly status: CheckoutItemStatus.INITIAL;
@@ -35,8 +34,6 @@ interface ItemWithoutCustomerDecissionProps {
   readonly onReturn: () => void;
 }
 
-const { space6 } = theme();
-
 const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
   checkoutId,
   checkoutItem,
@@ -49,6 +46,8 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
     customer: { country, segment },
   } = useStaticInfo();
 
+  const style = useMemo(() => itemWithoutCustomerDecissionStyle(), []);
+
   /* KeepCheckoutItem */
   const [keepCheckoutItem, keepCheckoutItemStatus] = useKeepCheckoutItem({ checkoutItemId: checkoutItem.id, logger });
   const trackKeepItem = useTrackKeepItem({
@@ -112,7 +111,9 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
             country={country}
             currentProductVariant={currentProductVariant}
             segment={segment}
-            style={{ content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } }}
+            style={{
+              content: { paddingBottom: Platform.OS === "web" ? style.productVariantPaddingBottom : stickyHeight },
+            }}
           />
         </Body>
       </ScrollView>

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

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

package/src/infrastructure/ui/views/item/views/productVariant/ProductVariant.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useCallback, useEffect } from "react";
+import React, { FC, ReactNode, useCallback, useEffect, useMemo } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { Country } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
@@ -13,7 +13,7 @@ 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";
 
 type ProductVariantStyle = "content";
 
@@ -41,6 +41,8 @@ const ProductVariant: FC<ProductVariantProps> = ({
   const screenSize = useScreenSize();
   const isDesktopScreen = screenSize !== "S";
 
+  const style = useMemo(() => productVariantStyle(), []);
+
   const trackImageView = useTrackImageView({
     page: TrackingPage.ITEM,
     country,

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

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

package/src/infrastructure/ui/views/return/components/price/Price.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
 import { PriceProjection } from "../../../../../../projection/price/price";
 import { DOMAIN } from "../../../../i18n/i18n";
-import { style } from "./Price.style";
+import { style as priceStyle } from "./Price.style";
 
 interface PriceProps {
   readonly price: PriceProjection;
@@ -27,6 +27,8 @@ const Price: FC<PriceProps> = ({ price, withPercentage = false }) => {
 
   const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
 
+  const style = useMemo(() => priceStyle(), []);
+
   return (
     <View style={style.price} testID="price">
       {isDiscounted && (

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

@@ -1,38 +1,40 @@
 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/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { Image } from "react-native";
 import { COLOR, Text, View, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -9,7 +9,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";
 
 interface ProductVariantPreviewProps {
   readonly item: CheckoutItemProjection;
@@ -30,6 +30,8 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
 
   const mainImage = media.find((mediaElement) => mediaElement.perspective === "MAIN");
 
+  const style = useMemo(() => productVariantPreviewStyle(), []);
+
   return (
     <View style={[style.wrapper, !screen.S && style.mobileWrapper]} testID="product-variant-preview">
       <Row style={style.row}>

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

@@ -2,54 +2,56 @@ 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 = () => {
+  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,
-  },
-});
+  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/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -36,7 +36,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";
 
@@ -67,9 +67,10 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
   const navigate = useNavigate();
   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 });
@@ -129,7 +130,7 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
         <ItemDetailHeader onBack={handleOnBack} />
       </Box>
     ),
-    [handleOnBack],
+    [handleOnBack, style.headerWrapper],
   );
 
   const dependenciesLoaded = checkoutItem && returnQuestions && returnCheckoutItemStatus !== CommandStatus.LOADING;

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

@@ -1,58 +1,60 @@
 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/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { ImageStyle, Pressable, StyleProp, View } from "react-native";
 import { COLOR, Icon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
@@ -11,7 +11,7 @@ import { size, SizeProjection } 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";
 
 interface ProductVariantStyle {
   readonly image: StyleProp<ImageStyle>;
@@ -47,6 +47,8 @@ const ProductVariant: FC<ProductVariantProps> = ({
 
   const cdnImageUrl = useMediaImage();
 
+  const style = useMemo(() => productVariantStyle(), []);
+
   return (
     <Pressable
       pointerEvents={onPress ? "auto" : "none"}