@lookiero/checkout 11.2.0 → 11.3.0

package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.tsx

@@ -1,15 +1,15 @@
 import { PortalHost } from "@gorhom/portal";
 import React, { FC, useCallback, useMemo } from "react";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { generatePath, useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, View, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
 import { useLogger } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
-import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutProjection } from "../../../../../../projection/checkout/checkout";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { ReturnQuestionType } from "../../../../../../projection/returnQuestion/returnQuestion.constants";
@@ -67,7 +67,9 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
   const navigate = useNavigate();
   const { basePath } = useStaticInfo();
   const logger = useLogger();
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
+  const isDektopScreen = screenSize === "L";
+  const isMobileScreen = screenSize === "S";
 
   const style = useMemo(() => returnQuestionsFormStyle(), []);
 
@@ -163,11 +165,11 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
         >
           <View style={style.background}>
             <AuroraLayout
-              fullWidth={!screen.L}
-              style={[style.layout, screen.L ? style.desktopLayoutSpacing : undefined]}
+              fullWidth={!isDektopScreen}
+              style={[style.layout, isDektopScreen ? style.desktopLayoutSpacing : undefined]}
             >
               <Box size={{ L: "2/3" }}>
-                <View style={[style.info, !screen.S && style.desktopInfo]}>
+                <View style={[style.info, !isMobileScreen && style.desktopInfo]}>
                   <Text level={3} heading>
                     {titleText}
                   </Text>
@@ -181,7 +183,7 @@ const ReturnQuestionsForm: FC<ReturnQuestionsFormProps> = ({
                   returnQuestions={returnQuestions}
                 />
 
-                <View style={[style.submit, !screen.S && style.submitDesktop]}>
+                <View style={[style.submit, !isMobileScreen && style.submitDesktop]}>
                   <Button testID="return-questions-button" onPress={handleOnSubmit}>
                     {submitButtonText}
                   </Button>

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

@@ -6,12 +6,13 @@ const IMAGE_HEIGHT = 132;
 
 const style = () => {
   const {
-    colorBgSurface,
     borderRadius3,
     borderRadiusFull,
     borderWidth2,
-    colorBorderInput,
     colorBgPrimaryLight,
+    colorBgSurface,
+    colorBorderInput,
+    colorTextMedium,
     space05,
     space1,
     space2,
@@ -54,6 +55,9 @@ const style = () => {
       paddingHorizontal: space2,
       paddingTop: space1,
     },
+    text: {
+      color: colorTextMedium,
+    },
   });
 };
 

package/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useMemo } from "react";
 import { ImageStyle, Pressable, StyleProp, View } from "react-native";
-import { COLOR, Icon, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
-import { LazyImage } from "@lookiero/sty-psp-ui";
+import { Icon, LazyImage } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { ColorProjection, MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { PriceProjection } from "../../../../../../projection/price/price";
@@ -69,13 +69,13 @@ const ProductVariant: FC<ProductVariantProps> = ({
 
         <View style={style.descriptionContainer}>
           <View style={style.infoProductVariant}>
-            <Text color={COLOR.TEXT_MEDIUM} level={2} detail>
+            <Text level={2} style={style.text} detail>
               {brand}
             </Text>
             <Text level={2} detail>
               {name}
             </Text>
-            <Text color={COLOR.TEXT_MEDIUM} level={2} detail>
+            <Text level={2} style={style.text} detail>
               {sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })} / {colorLabel}
             </Text>
 

package/src/infrastructure/ui/views/shared/components/productVariant/__snapshots__/ProductVariant.test.tsx.snap

@@ -339,10 +339,19 @@ exports[`ProductVariant component matches the snapshot for a non-unique size: no
             "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>
@@ -689,10 +698,19 @@ exports[`ProductVariant component matches the snapshot for an unique size: uniqu
             "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>

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

@@ -1,10 +1,10 @@
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { generatePath, useMatch, useNavigate } from "react-router-native";
-import { Box, Text, Layout as AuroraLayout, useDevice, Spinner } from "@lookiero/aurora";
+import { Box, Text, Layout as AuroraLayout, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
@@ -31,7 +31,8 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
     customer: { customerId, country, segment },
     basePath,
   } = useStaticInfo();
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
+  const isDesktopScreen = screenSize === "L";
 
   const style = useMemo(() => summaryStyle(), []);
 
@@ -123,12 +124,12 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
         {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
 
         <AuroraLayout
-          fullWidth={!screen.L}
-          style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
+          fullWidth={!isDesktopScreen}
+          style={[isDesktopScreen && style.desktopLayoutSpacing, !isDesktopScreen && { paddingBottom: pricingHeight }]}
         >
-          <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
-            <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
-              <View style={!screen.L && style.mobileInfo}>
+          <Box size={{ L: "2/3" }} style={isDesktopScreen && style.desktopListSpacing}>
+            <View style={[style.contentWrapper, isDesktopScreen && style.desktopContentWrapper]}>
+              <View style={!isDesktopScreen && style.mobileInfo}>
                 <Text level={3} style={style.title} heading>
                   {titleText}
                 </Text>
@@ -141,8 +142,8 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
             </View>
           </Box>
 
-          {pricing && screen.L ? (
-            <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
+          {pricing && isDesktopScreen ? (
+            <Box size={{ L: "1/3" }} style={[style.resume, isDesktopScreen ? style.desktopResume : style.mobileResume]}>
               <View style={style.princingWrapper}>
                 <CollapsiblePricing
                   collapsed={false}
@@ -158,7 +159,7 @@ const Summary: FC<SummaryProps> = ({ layout: Layout, children }) => {
         </AuroraLayout>
       </ScrollView>
 
-      {pricing && !screen.L ? (
+      {pricing && !isDesktopScreen ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
             <CollapsiblePricing

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

@@ -1,8 +1,9 @@
 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";
+import { Button, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Icon } from "@lookiero/sty-psp-ui";
 import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 import { Price } from "../../../../components/atoms/price/Price";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";

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

@@ -77,11 +77,19 @@ exports[`Pricing component matches the snapshot for collaped pricing: collapsed
           {
             "color": "#0C0A0A",
             "fontFamily": "auroraicons",
-            "fontSize": 16,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "height": 16,
-            "width": 16,
+            "height": 24,
+            "letterSpacing": -0.2,
+            "lineHeight": 24,
+            "minHeight": 24,
+            "minWidth": 24,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 0,
+            "width": 24,
           },
         ]
       }
@@ -421,11 +429,19 @@ exports[`Pricing component matches the snapshot for non-collaped pricing: non-co
           {
             "color": "#0C0A0A",
             "fontFamily": "auroraicons",
-            "fontSize": 16,
+            "fontSize": 24,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "height": 16,
-            "width": 16,
+            "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/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,
@@ -64,7 +64,7 @@ const CheckoutItemsTabs: FC<CheckoutItemsTabsProps> = ({
   onPressItem,
   onChanged,
 }) => {
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
 
   const style = useMemo(() => checkoutItemsTabsStyle(), []);
 
@@ -135,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>