@lookiero/checkout 11.2.0 → 11.3.0

package/src/infrastructure/ui/components/templates/header/itemHeader/__snapshots__/ItemHeader.test.tsx.snap

@@ -50,7 +50,6 @@ exports[`ItemHeader template matches the snapshot 1`] = `
     testID="item-header"
   >
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -71,9 +70,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      onBlur={[Function]}
       onClick={[Function]}
-      onFocus={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -81,93 +78,47 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        [
-          [
-            {
-              "_container": {
-                "overflow": "hidden",
-              },
-              "_pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "alignSelf": "auto",
-              "container": {
-                "overflow": "hidden",
-              },
-              "height": 40,
-              "overflow": "visible",
-              "padding": 8,
-              "pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "width": 40,
-            },
-          ],
-          {
-            "opacity": 1,
-          },
-        ]
+        {
+          "alignSelf": "auto",
+          "flexGrow": 0,
+          "height": 40,
+          "opacity": 1,
+          "padding": 8,
+          "width": 40,
+        }
       }
       testID="arrow-left-button-icon"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no"
+        selectable={false}
         style={
           [
             {
-              "position": "relative",
+              "color": "#0C0A0A",
+              "fontFamily": "auroraicons",
+              "fontSize": 24,
+              "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
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#0C0A0A",
-                "fontFamily": "auroraicons",
-                "fontSize": 24,
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-                "height": 24,
-                "width": 24,
-              },
-            ]
-          }
-        >
-          
-        </Text>
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#F45545",
-              "borderColor": "#FFFFFF",
-              "borderRadius": 9999,
-              "borderWidth": 2,
-              "height": 10,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "scale": 0,
-                },
-              ],
-              "width": 10,
-            }
-          }
-        />
-      </View>
+        
+      </Text>
     </View>
     <Text
       allowFontScaling={false}
@@ -191,7 +142,6 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       header.checkout_title
     </Text>
     <View
-      accessibilityRole="button"
       accessibilityState={
         {
           "busy": undefined,
@@ -212,9 +162,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       accessible={true}
       collapsable={false}
       focusable={true}
-      onBlur={[Function]}
       onClick={[Function]}
-      onFocus={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
       onResponderRelease={[Function]}
@@ -222,93 +170,47 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        [
-          [
-            {
-              "_container": {
-                "overflow": "hidden",
-              },
-              "_pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "alignSelf": "auto",
-              "container": {
-                "overflow": "hidden",
-              },
-              "height": 40,
-              "overflow": "visible",
-              "padding": 8,
-              "pressed": {
-                "bottom": 0,
-                "left": 0,
-                "right": 0,
-                "top": 0,
-              },
-              "width": 40,
-            },
-          ],
-          {
-            "opacity": 1,
-          },
-        ]
+        {
+          "alignSelf": "auto",
+          "flexGrow": 0,
+          "height": 40,
+          "opacity": 1,
+          "padding": 8,
+          "width": 40,
+        }
       }
       testID="arrow-right-button-icon"
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no"
+        selectable={false}
         style={
           [
             {
-              "position": "relative",
+              "color": "#0C0A0A",
+              "fontFamily": "auroraicons",
+              "fontSize": 24,
+              "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
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no"
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#0C0A0A",
-                "fontFamily": "auroraicons",
-                "fontSize": 24,
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-                "height": 24,
-                "width": 24,
-              },
-            ]
-          }
-        >
-          
-        </Text>
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#F45545",
-              "borderColor": "#FFFFFF",
-              "borderRadius": 9999,
-              "borderWidth": 2,
-              "height": 10,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": [
-                {
-                  "scale": 0,
-                },
-              ],
-              "width": 10,
-            }
-          }
-        />
-      </View>
+        
+      </Text>
     </View>
   </View>
 </View>

package/src/infrastructure/ui/views/checkout/Checkout.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Country } from "@lookiero/sty-psp-locale";
-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 { OrderProjection } from "../../../../projection/order/order";
 import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
@@ -48,12 +48,13 @@ const Checkout: FC<CheckoutProps> = ({
     customer: { customerId, country, segment },
     basePath,
   } = useStaticInfo();
+  const screenSize = useScreenSize();
+  const isDektopScreen = screenSize === "L";
 
   const style = useMemo(() => checkoutStyle(), []);
 
   const titleText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_TITLE });
   const submitButtonText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_PAY_BUTTON });
-  const { screen } = useDevice();
   const [pricingHeight, setPricingHeight] = useState(0);
   const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);
 
@@ -134,11 +135,11 @@ const Checkout: FC<CheckoutProps> = ({
         {hasReplacedCheckoutItem && <DeliveryBanner />}
 
         <AuroraLayout
-          fullWidth={!screen.L}
-          style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
+          fullWidth={!isDektopScreen}
+          style={[isDektopScreen && style.desktopLayoutSpacing, !isDektopScreen && { paddingBottom: pricingHeight }]}
         >
-          <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
-            <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+          <Box size={{ L: "2/3" }} style={isDektopScreen && style.desktopListSpacing}>
+            <View style={[style.contentWrapper, isDektopScreen && style.desktopContentWrapper]}>
               {country === Country.NL && (
                 <View style={style.paymentSelectorNL}>
                   <PaymentInstrument useRedirect={useRedirect} />
@@ -176,12 +177,12 @@ const Checkout: FC<CheckoutProps> = ({
             </View>
           </Box>
 
-          <Box size={{ L: "1/3" }} style={[style.resume, screen.L && style.desktopResume]}>
+          <Box size={{ L: "1/3" }} style={[style.resume, isDektopScreen && style.desktopResume]}>
             {pricing ? (
-              <View style={[style.princingWrapper, !screen.L && style.princingWrapperSmall]}>
+              <View style={[style.princingWrapper, !isDektopScreen && style.princingWrapperSmall]}>
                 <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
 
-                {screen.L ? (
+                {isDektopScreen ? (
                   <Button
                     busy={checkoutFlowStatus === "loading"}
                     testID="confirm-checkout-button"
@@ -196,7 +197,7 @@ const Checkout: FC<CheckoutProps> = ({
         </AuroraLayout>
       </ScrollView>
 
-      {pricing && !screen.L ? (
+      {pricing && !isDektopScreen ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
           <Body>
             <Button

package/src/infrastructure/ui/views/checkout/components/deliveryBanner/DeliveryBanner.tsx

@@ -1,14 +1,15 @@
 import React from "react";
-import { ALIGN, InfoBox, INFOBOX_TYPE, useDevice } from "@lookiero/aurora";
+import { ALIGN, InfoBox, INFOBOX_TYPE } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 
 const DeliveryBanner = () => {
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
 
   return (
     <InfoBox
-      contentAlign={screen.L ? ALIGN.CENTER : undefined}
+      contentAlign={screenSize === "L" ? ALIGN.CENTER : undefined}
       testID="delivery-banner"
       text={useI18nMessage({ domain: DOMAIN, id: I18nMessages.CHECKOUT_DELIVERY_BANNER })}
       type={INFOBOX_TYPE.SQUARED}

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

@@ -9,6 +9,7 @@ const style = () => {
       flex: 0,
     },
     buttonText: {
+      textAlign: "center",
       width: "100%",
     },
     confirmButton: {
@@ -22,6 +23,7 @@ const style = () => {
       paddingHorizontal: space6,
     },
     title: {
+      textAlign: "center",
       width: "100%",
     },
   });

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.tsx

@@ -1,6 +1,6 @@
 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";
@@ -28,19 +28,19 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
   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/productVariantDescription/ProductVariantDescription.style.ts

@@ -2,16 +2,19 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
 const style = () => {
-  const { space1, space4, space6 } = theme();
+  const { colorTextMedium, space1, space4, space6 } = theme();
 
   return StyleSheet.create({
     brand: {
-      flex: 1,
-      gap: space1,
+      color: colorTextMedium,
     },
     container: {
       width: "100%",
     },
+    content: {
+      flex: 1,
+      gap: space1,
+    },
     info: {
       display: "flex",
       flexDirection: "row",

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

@@ -1,6 +1,6 @@
 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";
@@ -33,10 +33,10 @@ const ProductVariantDescription: FC<ProductVariantDescriptionProps> = ({
   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/returnQuestionsFeedback/ReturnQuestionsFeedback.tsx

@@ -1,7 +1,8 @@
 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";

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.ts

@@ -2,7 +2,8 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
 const style = () => {
-  const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, space1, space5, space6 } = theme();
+  const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, colorTextMedium, space1, space5, space6 } =
+    theme();
 
   const styles = StyleSheet.create({
     modalContent: {
@@ -20,6 +21,9 @@ const style = () => {
     optionText: {
       lineHeight: space6,
     },
+    textActive: {
+      color: colorTextMedium,
+    },
   });
 
   return {

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { StyleProp, TextStyle, TouchableHighlight, View, ViewStyle } from "react-native";
-import { COLOR, Text } from "@lookiero/aurora";
+import { Text } from "@lookiero/aurora";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { style as modalStyle } from "./SelectModal.style";
 
@@ -75,9 +75,8 @@ const SelectModal: FC<SelectModalProps> = ({
             onPress={value !== optionValue ? () => handleOnPressOption(optionValue) : undefined}
           >
             <Text
-              color={value === optionValue ? COLOR.TEXT_MEDIUM : COLOR.TEXT}
               level={3}
-              style={[style.optionText as ViewStyle, customStyle?.optionText]}
+              style={[style.optionText, value === optionValue && style.textActive, customStyle?.optionText]}
             >
               {label}
             </Text>

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

@@ -4,7 +4,7 @@ import { theme } from "@lookiero/sty-psp-ui";
 const IMAGE_SIZE = 35;
 
 const style = () => {
-  const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, space2, space4 } = theme();
+  const { borderRadius2, borderWidth1, colorBgBase, colorBorderInput, colorTextMedium, space2, space4 } = theme();
 
   return StyleSheet.create({
     content: {
@@ -29,6 +29,9 @@ const style = () => {
       flex: 1,
       justifyContent: "center",
     },
+    text: {
+      color: colorTextMedium,
+    },
     wrapper: {
       backgroundColor: colorBgBase,
       flexDirection: "row",

package/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useMemo } from "react";
-import { Image } from "react-native";
-import { COLOR, Text, View, useDevice } from "@lookiero/aurora";
+import { Image, View } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
-import { Column, Row } from "@lookiero/sty-psp-ui";
+import { Column, Row, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { size } from "../../../../../../projection/size/size";
 import { useMediaImage } from "../../../../hooks/useMediaImage";
@@ -18,7 +18,7 @@ interface ProductVariantPreviewProps {
 
 const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }) => {
   const cdnImageUrl = useMediaImage();
-  const { screen } = useDevice();
+  const screenSize = useScreenSize();
 
   const sizeText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_SIZE });
   const uniqueText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.ITEM_UNIQUE });
@@ -33,7 +33,7 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
   const style = useMemo(() => productVariantPreviewStyle(), []);
 
   return (
-    <View style={[style.wrapper, !screen.S && style.mobileWrapper]} testID="product-variant-preview">
+    <View style={[style.wrapper, screenSize === "S" && style.mobileWrapper]} testID="product-variant-preview">
       <Row style={style.row}>
         <Column size={{ M: "2/3", L: "2/3" }} style={style.content}>
           {mainImage && (
@@ -51,13 +51,13 @@ const ProductVariantPreview: FC<ProductVariantPreviewProps> = ({ item, country }
           )}
 
           <View style={style.info}>
-            <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>
               {`${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`}
             </Text>
           </View>

package/src/infrastructure/ui/views/return/components/productVariantPreview/__snapshots__/ProductVariantPreview.test.tsx.snap

@@ -32,12 +32,15 @@ exports[`ProductVariantPreview matches the snapshot 1`] = `
   <View
     style={
       [
-        false,
         {
           "backgroundColor": "#FFFFFF",
           "flexDirection": "row",
           "padding": 16,
         },
+        {
+          "borderBottomWidth": 1,
+          "borderColor": "#DAD8D8",
+        },
       ]
     }
     testID="product-variant-preview"
@@ -92,12 +95,10 @@ exports[`ProductVariantPreview matches the snapshot 1`] = `
         />
         <View
           style={
-            [
-              {
-                "flex": 1,
-                "marginLeft": 8,
-              },
-            ]
+            {
+              "flex": 1,
+              "marginLeft": 8,
+            }
           }
         >
           <Text
@@ -166,11 +167,9 @@ exports[`ProductVariantPreview matches the snapshot 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "justifyContent": "flex-end",
-              },
-            ]
+            {
+              "justifyContent": "flex-end",
+            }
           }
         >
           <View