@lookiero/checkout 14.1.0 → 14.2.1

package/src/infrastructure/ui/components/templates/header/itemDetailHeader/__snapshots__/ItemDetailHeader.test.tsx.snap

@@ -59,21 +59,18 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
       }
     />
     <Text
-      allowFontScaling={false}
-      selectable={false}
       style={
         [
           {
             "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Extrabold",
             "fontSize": 15,
+            "fontStyle": "normal",
+            "fontWeight": "normal",
             "letterSpacing": -0.2,
             "lineHeight": 20,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
           },
+          undefined,
         ]
       }
     >
@@ -128,21 +125,27 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
           [
             {
               "color": "#0C0A0A",
-              "fontFamily": "auroraicons",
-              "fontSize": 24,
+              "fontFamily": "AreaNormal-Semibold",
+              "fontSize": 15,
               "fontStyle": "normal",
-              "fontWeight": "normal",
-              "height": 24,
+              "fontWeight": "300",
               "letterSpacing": -0.2,
-              "lineHeight": 24,
-              "minHeight": 24,
-              "minWidth": 24,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 0,
-              "width": 24,
+              "lineHeight": 20,
             },
+            [
+              {
+                "fontFamily": "auroraicons",
+                "fontSize": 24,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "height": 24,
+                "lineHeight": 24,
+                "minHeight": 24,
+                "minWidth": 24,
+                "width": 24,
+              },
+              undefined,
+            ],
           ]
         }
         testID="icon"

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

@@ -1,8 +1,8 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { generatePath, useNavigate } from "react-router-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
+import { Text } from "@lookiero/sty-psp-ui";
 import { ButtonIcon } from "@lookiero/sty-psp-ui";
 import { CheckoutItemProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
 import { useStaticInfo } from "../../../../hooks/useStaticInfo";
@@ -73,7 +73,7 @@ const ItemHeader: FC<ItemHeaderProps> = ({ items, item, onNext, onPrevious }) =>
       ) : (
         <ButtonIconPlaceholder />
       )}
-      <Text level={3} action>
+      <Text level={3} variant="action">
         {title}
       </Text>
       {!isLastItem ? (

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

@@ -98,21 +98,27 @@ exports[`ItemHeader template matches the snapshot 1`] = `
           [
             {
               "color": "#0C0A0A",
-              "fontFamily": "auroraicons",
-              "fontSize": 24,
+              "fontFamily": "AreaNormal-Semibold",
+              "fontSize": 15,
               "fontStyle": "normal",
-              "fontWeight": "normal",
-              "height": 24,
+              "fontWeight": "300",
               "letterSpacing": -0.2,
-              "lineHeight": 24,
-              "minHeight": 24,
-              "minWidth": 24,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 0,
-              "width": 24,
+              "lineHeight": 20,
             },
+            [
+              {
+                "fontFamily": "auroraicons",
+                "fontSize": 24,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "height": 24,
+                "lineHeight": 24,
+                "minHeight": 24,
+                "minWidth": 24,
+                "width": 24,
+              },
+              undefined,
+            ],
           ]
         }
         testID="icon"
@@ -121,21 +127,18 @@ exports[`ItemHeader template matches the snapshot 1`] = `
       </Text>
     </View>
     <Text
-      allowFontScaling={false}
-      selectable={false}
       style={
         [
           {
             "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Extrabold",
             "fontSize": 15,
+            "fontStyle": "normal",
+            "fontWeight": "normal",
             "letterSpacing": -0.2,
             "lineHeight": 20,
-            "paddingBottom": 0,
-            "paddingLeft": 0,
-            "paddingRight": 0,
-            "paddingTop": 0,
           },
+          undefined,
         ]
       }
     >
@@ -190,21 +193,27 @@ exports[`ItemHeader template matches the snapshot 1`] = `
           [
             {
               "color": "#0C0A0A",
-              "fontFamily": "auroraicons",
-              "fontSize": 24,
+              "fontFamily": "AreaNormal-Semibold",
+              "fontSize": 15,
               "fontStyle": "normal",
-              "fontWeight": "normal",
-              "height": 24,
+              "fontWeight": "300",
               "letterSpacing": -0.2,
-              "lineHeight": 24,
-              "minHeight": 24,
-              "minWidth": 24,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 0,
-              "width": 24,
+              "lineHeight": 20,
             },
+            [
+              {
+                "fontFamily": "auroraicons",
+                "fontSize": 24,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "height": 24,
+                "lineHeight": 24,
+                "minHeight": 24,
+                "minWidth": 24,
+                "width": 24,
+              },
+              undefined,
+            ],
           ]
         }
         testID="icon"

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

@@ -1,12 +1,12 @@
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Layout as AuroraLayout, Spinner, Text } from "@lookiero/aurora";
+import { Box, Layout as AuroraLayout, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { PayButton, Section } from "@lookiero/payments-front";
 import { Country } from "@lookiero/sty-psp-locale";
-import { Layout as UiLayout, Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
+import { Layout as UiLayout, Sticky, Text, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -151,7 +151,7 @@ const Checkout: FC<CheckoutProps> = ({ layout: Layout, getAuthToken, useRedirect
                 </View>
               )}
 
-              <Text level={3} style={style.title} heading>
+              <Text level={3} style={style.title} variant="heading">
                 {titleText}
               </Text>
 

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.style.ts

@@ -11,6 +11,9 @@ const style = () => {
     smallContainer: {
       marginHorizontal: space6,
     },
+    underlinedText: {
+      textDecorationLine: "underline",
+    },
   });
 };
 

package/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.tsx

@@ -1,8 +1,9 @@
 import React, { FC, useMemo } from "react";
 import { Pressable, View } from "react-native";
-import { InfoBox, Text } from "@lookiero/aurora";
+import { InfoBox } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { useScreenSize } from "@lookiero/sty-psp-ui";
+import "@lookiero/sty-psp-ui";
+import { useScreenSize, Text } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style as customerDecissionBannerStyle } from "./CustomerDecissionBanner.style";
@@ -32,7 +33,7 @@ const CustomerDecissionBanner: FC<CustomerDecissionBannerProps> = ({ checkoutIte
     <View style={[style.container, isSmallScreen ? style.smallContainer : null]}>
       <InfoBox text={decissionText}>
         <Pressable testID="customer-decission-banner" onPress={onPress}>
-          <Text level={isSmallScreen ? 2 : 1} detail underlined>
+          <Text level={isSmallScreen ? 2 : 1} style={style.underlinedText} variant="detail">
             {bannerButtonText}
           </Text>
         </Pressable>

package/src/infrastructure/ui/views/item/components/banner/__snapshots__/CustomerDecissionBanner.test.tsx.snap

@@ -138,20 +138,18 @@ exports[`CustomerDecissionBanner component matches the snapshot for a KEPT check
                 testID="customer-decission-banner"
               >
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
                   style={
                     [
                       {
                         "color": "#0C0A0A",
                         "fontFamily": "AreaNormal-Semibold",
                         "fontSize": 12,
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
                         "letterSpacing": 0.1,
                         "lineHeight": 16,
-                        "paddingBottom": 0,
-                        "paddingLeft": 0,
-                        "paddingRight": 0,
-                        "paddingTop": 0,
+                      },
+                      {
                         "textDecorationLine": "underline",
                       },
                     ]
@@ -307,20 +305,18 @@ exports[`CustomerDecissionBanner component matches the snapshot for a REPLACED c
                 testID="customer-decission-banner"
               >
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
                   style={
                     [
                       {
                         "color": "#0C0A0A",
                         "fontFamily": "AreaNormal-Semibold",
                         "fontSize": 12,
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
                         "letterSpacing": 0.1,
                         "lineHeight": 16,
-                        "paddingBottom": 0,
-                        "paddingLeft": 0,
-                        "paddingRight": 0,
-                        "paddingTop": 0,
+                      },
+                      {
                         "textDecorationLine": "underline",
                       },
                     ]
@@ -476,20 +472,18 @@ exports[`CustomerDecissionBanner component matches the snapshot for a RETURNED c
                 testID="customer-decission-banner"
               >
                 <Text
-                  allowFontScaling={false}
-                  selectable={false}
                   style={
                     [
                       {
                         "color": "#0C0A0A",
                         "fontFamily": "AreaNormal-Semibold",
                         "fontSize": 12,
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
                         "letterSpacing": 0.1,
                         "lineHeight": 16,
-                        "paddingBottom": 0,
-                        "paddingLeft": 0,
-                        "paddingRight": 0,
-                        "paddingTop": 0,
+                      },
+                      {
                         "textDecorationLine": "underline",
                       },
                     ]

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

@@ -1,8 +1,8 @@
 import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { Button, BUTTON_VARIANT, Text } from "@lookiero/aurora";
+import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { Modal } from "@lookiero/sty-psp-ui";
+import { Modal, Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN, I18nMessages } from "../../../../i18n/i18n";
 import { style as getOutOfCheckoutModalStyle } from "./GetOutOfCheckoutModal.style";
 
@@ -35,12 +35,22 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
           {descriptionText}
         </Text>
         <Button style={style.button} onPress={onDismiss}>
-          <Text level={3} selectable={false} style={style.buttonText} action upperCase>
+          <Text
+            level={3}
+            selectable={false}
+            style={[style.buttonText, { textTransform: "uppercase" }]}
+            variant="action"
+          >
             {dismissButtonText}
           </Text>
         </Button>
         <Button style={[style.button, style.confirmButton]} variant={BUTTON_VARIANT.SECONDARY} onPress={onConfirm}>
-          <Text level={3} selectable={false} style={style.buttonText} action upperCase>
+          <Text
+            level={3}
+            selectable={false}
+            style={[style.buttonText, { textTransform: "uppercase" }]}
+            variant="action"
+          >
             {confirmButtonText}
           </Text>
         </Button>

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

@@ -173,20 +173,18 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
               }
             >
               <Text
-                allowFontScaling={false}
-                selectable={false}
                 style={
                   [
                     {
                       "color": "#0C0A0A",
                       "fontFamily": "AreaNormal-Semibold",
                       "fontSize": 22,
+                      "fontStyle": "normal",
+                      "fontWeight": "300",
                       "letterSpacing": -0.2,
                       "lineHeight": 26,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
+                    },
+                    {
                       "textAlign": "center",
                       "width": "100%",
                     },
@@ -196,21 +194,19 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                 get_out_of_checkout_modal.title
               </Text>
               <Text
-                allowFontScaling={false}
-                selectable={false}
                 style={
                   [
                     {
                       "color": "#0C0A0A",
                       "fontFamily": "AreaNormal-Semibold",
                       "fontSize": 15,
+                      "fontStyle": "normal",
+                      "fontWeight": "300",
                       "letterSpacing": -0.2,
                       "lineHeight": 20,
+                    },
+                    {
                       "marginVertical": 32,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
                       "width": "100%",
                     },
                   ]
@@ -356,7 +352,6 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                     }
                   >
                     <Text
-                      allowFontScaling={false}
                       selectable={false}
                       style={
                         [
@@ -364,16 +359,20 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                             "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Extrabold",
                             "fontSize": 15,
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
                             "letterSpacing": -0.2,
                             "lineHeight": 20,
-                            "paddingBottom": 0,
-                            "paddingLeft": 0,
-                            "paddingRight": 0,
-                            "paddingTop": 0,
-                            "textAlign": "center",
-                            "textTransform": "uppercase",
-                            "width": "100%",
                           },
+                          [
+                            {
+                              "textAlign": "center",
+                              "width": "100%",
+                            },
+                            {
+                              "textTransform": "uppercase",
+                            },
+                          ],
                         ]
                       }
                     >
@@ -528,7 +527,6 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                     }
                   >
                     <Text
-                      allowFontScaling={false}
                       selectable={false}
                       style={
                         [
@@ -536,16 +534,20 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
                             "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Extrabold",
                             "fontSize": 15,
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
                             "letterSpacing": -0.2,
                             "lineHeight": 20,
-                            "paddingBottom": 0,
-                            "paddingLeft": 0,
-                            "paddingRight": 0,
-                            "paddingTop": 0,
-                            "textAlign": "center",
-                            "textTransform": "uppercase",
-                            "width": "100%",
                           },
+                          [
+                            {
+                              "textAlign": "center",
+                              "width": "100%",
+                            },
+                            {
+                              "textTransform": "uppercase",
+                            },
+                          ],
                         ]
                       }
                     >

package/src/infrastructure/ui/views/item/components/itemActions/__snapshots__/ItemActions.test.tsx.snap

@@ -794,21 +794,27 @@ exports[`ItemActions component matches the snapshot 1`] = `
                   [
                     {
                       "color": "#0C0A0A",
-                      "fontFamily": "auroraicons",
-                      "fontSize": 24,
+                      "fontFamily": "AreaNormal-Semibold",
+                      "fontSize": 15,
                       "fontStyle": "normal",
-                      "fontWeight": "normal",
-                      "height": 24,
+                      "fontWeight": "300",
                       "letterSpacing": -0.2,
-                      "lineHeight": 24,
-                      "minHeight": 24,
-                      "minWidth": 24,
-                      "paddingBottom": 0,
-                      "paddingLeft": 0,
-                      "paddingRight": 0,
-                      "paddingTop": 0,
-                      "width": 24,
+                      "lineHeight": 20,
                     },
+                    [
+                      {
+                        "fontFamily": "auroraicons",
+                        "fontSize": 24,
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                        "height": 24,
+                        "lineHeight": 24,
+                        "minHeight": 24,
+                        "minWidth": 24,
+                        "width": 24,
+                      },
+                      undefined,
+                    ],
                   ]
                 }
                 testID="icon"
@@ -847,21 +853,19 @@ exports[`ItemActions component matches the snapshot 1`] = `
                   }
                 >
                   <Text
-                    allowFontScaling={false}
-                    selectable={false}
                     style={
                       [
                         {
                           "color": "#0C0A0A",
                           "fontFamily": "AreaInktrap-Semibold",
                           "fontSize": 31,
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
                           "letterSpacing": -1,
                           "lineHeight": 36,
+                        },
+                        {
                           "marginBottom": 4,
-                          "paddingBottom": 0,
-                          "paddingLeft": 0,
-                          "paddingRight": 0,
-                          "paddingTop": 0,
                         },
                       ]
                     }
@@ -905,21 +909,26 @@ exports[`ItemActions component matches the snapshot 1`] = `
                     testID="2875e66d-4e2a-47b1-a58b-61e316dcc66a"
                   >
                     <Text
-                      allowFontScaling={false}
-                      selectable={false}
                       style={
                         [
                           {
-                            "color": "#837C7C",
+                            "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Semibold",
                             "fontSize": 15,
+                            "fontStyle": "normal",
+                            "fontWeight": "300",
                             "letterSpacing": -0.2,
-                            "lineHeight": 24,
-                            "paddingBottom": 0,
-                            "paddingLeft": 0,
-                            "paddingRight": 0,
-                            "paddingTop": 0,
+                            "lineHeight": 20,
                           },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            {
+                              "color": "#837C7C",
+                            },
+                            undefined,
+                          ],
                         ]
                       }
                     >
@@ -963,21 +972,24 @@ exports[`ItemActions component matches the snapshot 1`] = `
                     testID="4016fcfc-a08e-4800-bc07-0d7dd59848fc"
                   >
                     <Text
-                      allowFontScaling={false}
-                      selectable={false}
                       style={
                         [
                           {
                             "color": "#0C0A0A",
                             "fontFamily": "AreaNormal-Semibold",
                             "fontSize": 15,
+                            "fontStyle": "normal",
+                            "fontWeight": "300",
                             "letterSpacing": -0.2,
-                            "lineHeight": 24,
-                            "paddingBottom": 0,
-                            "paddingLeft": 0,
-                            "paddingRight": 0,
-                            "paddingTop": 0,
+                            "lineHeight": 20,
                           },
+                          [
+                            {
+                              "lineHeight": 24,
+                            },
+                            false,
+                            undefined,
+                          ],
                         ]
                       }
                     >

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

@@ -1,8 +1,8 @@
 import React, { FC, useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Country } from "@lookiero/sty-psp-locale";
+import { Text } from "@lookiero/sty-psp-ui";
 import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { PriceProjection } from "../../../../../../projection/price/price";
 import { SizeProjection, size } from "../../../../../../projection/size/size";
@@ -36,16 +36,16 @@ const ProductVariantDescription: FC<ProductVariantDescriptionProps> = ({
     <View style={[style.container, !isDesktopScreen && style.smallContainer]}>
       <View style={style.info}>
         <View style={style.content}>
-          <Text level={1} style={style.brand} detail>
+          <Text level={1} style={style.brand} variant="detail">
             {brand}
           </Text>
-          <Text level={1} detailBold>
+          <Text level={1} variant="detailBold">
             {name}
           </Text>
         </View>
         <Price price={price} withPercentage />
       </View>
-      <Text level={1} detail>
+      <Text level={1} variant="detail">
         {`${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`}
       </Text>
     </View>