@lookiero/checkout 11.1.0 → 11.2.0

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

@@ -2,88 +2,90 @@ 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 = () => {
+  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
-  } as 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
-  } as any,
-  scrollView: {
-    backgroundColor: colorBgPrimaryLight,
-    flex: 1,
-  },
-  sticky: {
-    paddingBottom: space4,
-    paddingTop: space3,
-  },
-  title: {
-    marginBottom: space2,
-  },
-});
+  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
+    } as 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
+    } as any,
+    scrollView: {
+      backgroundColor: colorBgPrimaryLight,
+      flex: 1,
+    },
+    sticky: {
+      paddingBottom: space4,
+      paddingTop: space3,
+    },
+    title: {
+      marginBottom: space2,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -18,7 +18,7 @@ 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";
 
 interface SummaryProps {
@@ -31,19 +31,22 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
     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 as string });
   const [fiveItemsDiscount = 0, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({ customerId });
 
   const navigate = useNavigate();
-
   const match = useMatch(`${basePath}/${Routes.SUMMARY}/${Routes.SUMMARY_TABS}`);
   const tab = match?.params.tab;
 

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.style.ts

@@ -1,24 +1,26 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space1, space3 } = theme();
+const style = () => {
+  const { space1, space3 } = theme();
 
-const style = StyleSheet.create({
-  collapsed: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  collapsedContent: {
-    flex: 1,
-    marginBottom: space1,
-  },
-  iconContainer: {
-    alignItems: "center",
-    marginBottom: space3,
-  },
-  totalCollapsed: {
-    marginBottom: space1,
-  },
-});
+  return StyleSheet.create({
+    collapsed: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+    },
+    collapsedContent: {
+      flex: 1,
+      marginBottom: space1,
+    },
+    iconContainer: {
+      alignItems: "center",
+      marginBottom: space3,
+    },
+    totalCollapsed: {
+      marginBottom: space1,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useMemo } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { Button, Icon, Text } from "@lookiero/aurora";
@@ -7,7 +7,7 @@ import { PricingProjection } from "../../../../../../projection/pricing/pricing"
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { Pricing } from "../pricing/Pricing";
-import { style } from "./CollapsiblePricing.style";
+import { style as collapsiblePricingStyle } from "./CollapsiblePricing.style";
 
 interface CollapsiblePricingProps {
   readonly pricing: PricingProjection;
@@ -49,6 +49,8 @@ const CollapsiblePricing: FC<CollapsiblePricingProps> = ({
     [notCollapsedOpacity.value],
   );
 
+  const style = useMemo(() => collapsiblePricingStyle(), []);
+
   return (
     <>
       {collapsible && (

package/src/infrastructure/ui/views/summary/components/pricing/Pricing.style.ts

@@ -1,19 +1,21 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space4, colorBgPrimary } = theme();
+const style = () => {
+  const { space4, colorBgPrimary } = theme();
 
-const style = StyleSheet.create({
-  divider: {
-    backgroundColor: colorBgPrimary,
-    height: 1,
-    marginBottom: space4,
-  },
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginBottom: space4,
-  },
-});
+  return StyleSheet.create({
+    divider: {
+      backgroundColor: colorBgPrimary,
+      height: 1,
+      marginBottom: space4,
+    },
+    row: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      marginBottom: space4,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/summary/components/pricing/Pricing.tsx

@@ -1,11 +1,11 @@
-import React, { FC, ReactNode } from "react";
+import React, { FC, ReactNode, useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./Pricing.style";
+import { style as pricingStyle } from "./Pricing.style";
 
 interface RowProps {
   readonly text: string;
@@ -13,15 +13,18 @@ interface RowProps {
   readonly children: ReactNode;
   readonly action?: boolean;
 }
-const Row: FC<RowProps> = ({ action = false, text, level = 3, children }) => (
-  <View style={style.row}>
-    <Text action={action} level={level}>
-      {text}
-    </Text>
-    {children}
-  </View>
-);
+const Row: FC<RowProps> = ({ action = false, text, level = 3, children }) => {
+  const style = useMemo(() => pricingStyle(), []);
 
+  return (
+    <View style={style.row}>
+      <Text action={action} level={level}>
+        {text}
+      </Text>
+      {children}
+    </View>
+  );
+};
 interface PricingProps {
   readonly pricing: PricingProjection;
   readonly totalCheckoutItemsKept: number;
@@ -30,6 +33,8 @@ interface PricingProps {
 const Pricing: FC<PricingProps> = ({ pricing, totalCheckoutItemsKept }) => {
   const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
 
+  const style = useMemo(() => pricingStyle(), []);
+
   const totalText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_TOTAL });
   const totalCheckoutItemsKeptText = useI18nMessage({
     domain: DOMAIN,

package/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.style.ts

@@ -1,33 +1,35 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
+const style = () => {
+  const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
 
-const style = StyleSheet.create({
-  carousel: {
-    paddingBottom: space6,
-    paddingHorizontal: space6,
-    paddingTop: space2,
-  },
-  carouselDesktop: {
-    paddingHorizontal: 0,
-  },
-  emptyText: {
-    paddingTop: space4,
-  },
-  tabList: {
-    borderBottomColor: colorBorderInput,
-    borderBottomWidth: 1,
-    justifyContent: "flex-start",
-    paddingHorizontal: space4,
-  },
-  tabListDesktop: {
-    paddingHorizontal: 0,
-  },
-  tabText: {
-    fontSize: fontDetailSize1,
-    lineHeight: fontDetailHeight1,
-  },
-});
+  return StyleSheet.create({
+    carousel: {
+      paddingBottom: space6,
+      paddingHorizontal: space6,
+      paddingTop: space2,
+    },
+    carouselDesktop: {
+      paddingHorizontal: 0,
+    },
+    emptyText: {
+      paddingTop: space4,
+    },
+    tabList: {
+      borderBottomColor: colorBorderInput,
+      borderBottomWidth: 1,
+      justifyContent: "flex-start",
+      paddingHorizontal: space4,
+    },
+    tabListDesktop: {
+      paddingHorizontal: 0,
+    },
+    tabText: {
+      fontSize: fontDetailSize1,
+      lineHeight: fontDetailHeight1,
+    },
+  });
+};
 
 export { style };

package/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.tsx

@@ -12,7 +12,7 @@ import {
 import { PriceProjection } from "../../../../../../projection/price/price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { ProductVariant, ProductVariantStyle } from "../../../shared/components/productVariant/ProductVariant";
-import { style } from "./CheckoutItemsTabs.style";
+import { style as checkoutItemsTabsStyle } from "./CheckoutItemsTabs.style";
 
 interface CheckoutItemProps {
   readonly checkoutItemStatus: CheckoutItemStatus;
@@ -65,15 +65,18 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
   onChanged,
 }) => {
   const { screen } = useDevice();
+
+  const style = useMemo(() => checkoutItemsTabsStyle(), []);
+
   const keepTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_TAB });
   const returnTabText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_TAB });
-
   const keepEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_KEEP_EMPTY });
   const returnEmptyText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.SUMMARY_RETURN_EMPTY });
 
   const handleOnPressItem = useCallback((checkoutItemId: string) => onPressItem(checkoutItemId), [onPressItem]);
 
   const data = useMemo(() => [{ id: "0" }, { id: "1" }], []);
+
   const renderItem: RenderItemFunction<{ readonly id?: string }> = useCallback(
     ({ index }) =>
       index === 0 ? (
@@ -115,7 +118,15 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
           ))}
         </>
       ),
-    [checkoutItemsKept, checkoutItemsReturned, country, handleOnPressItem, keepEmptyText, returnEmptyText],
+    [
+      checkoutItemsKept,
+      checkoutItemsReturned,
+      country,
+      handleOnPressItem,
+      keepEmptyText,
+      returnEmptyText,
+      style.emptyText,
+    ],
   );
 
   return (