@lookiero/checkout 11.1.0 → 11.3.0

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

@@ -1,9 +1,9 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { Text, useDevice } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
-import { RenderItemFunction, Tabs } from "@lookiero/sty-psp-ui";
+import { RenderItemFunction, Tabs, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import {
   CheckoutItemProductVariantProjection,
@@ -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;
@@ -64,16 +64,19 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
   onPressItem,
   onChanged,
 }) => {
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
+
+  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 (
@@ -124,8 +135,11 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
       defaultIndex={tabIndex}
       tabLabels={[`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`]}
       style={{
-        carousel: [style.carousel, screen.L && style.carouselDesktop],
-        tabList: { tabList: [style.tabList, screen.L && style.tabListDesktop], tab: { tabText: style.tabText } },
+        carousel: [style.carousel, screenSize === "L" && style.carouselDesktop],
+        tabList: {
+          tabList: [style.tabList, screenSize === "L" && style.tabListDesktop],
+          tab: { tabText: style.tabText },
+        },
       }}
       onChanged={onChanged}
     >

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

@@ -626,10 +626,19 @@ exports[`CheckoutItemTabs 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,
                           },
                         ]
                       }
+                      testID="icon"
                     >
                       
                     </Text>
@@ -982,10 +991,19 @@ exports[`CheckoutItemTabs 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,
                           },
                         ]
                       }
+                      testID="icon"
                     >
                       
                     </Text>
@@ -1320,10 +1338,19 @@ exports[`CheckoutItemTabs 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,
                           },
                         ]
                       }
+                      testID="icon"
                     >
                       
                     </Text>
@@ -1676,10 +1703,19 @@ exports[`CheckoutItemTabs 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,
                           },
                         ]
                       }
+                      testID="icon"
                     >
                       
                     </Text>