@lookiero/checkout 14.2.0 → 14.2.2-beta.0

package/dist/src/ExpoRoot.js

@@ -20,7 +20,7 @@ const tradename = Tradename.LOOKIERO;
 const theme = themeByTradename({ tradename });
 const locale = Locale.es_ES;
 const customer = {
-    customerId: "5d7228e5-2220-4437-bdab-e5e6fb28e49d",
+    customerId: "5bf90313-d56e-4a55-b422-16084a4466de",
     country: Country.ES,
     segment: Segment.WOMEN,
     email: "email@example.com",
@@ -98,7 +98,7 @@ const ExpoRoot = () => {
         React.createElement(PaymentsQueryProvider, null,
             React.createElement(EventProvider, null,
                 React.createElement(Aurora, { theme: theme },
-                    isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
+                    isAccessible === false && React.createElement(Text, { variant: "heading" }, "Checkout is not accessible!"),
                     React.createElement(Router, null,
                         React.createElement(Routes, null,
                             React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, tradename: tradename, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), onNotAccessible: onNotAccessible }) }),

package/dist/src/infrastructure/ui/components/atoms/price/Price.js

@@ -5,10 +5,10 @@ import { Text } from "@lookiero/sty-psp-ui";
 import { DOMAIN } from "../../../i18n/i18n";
 import { style as priceStyle } from "./Price.style";
 const PRICE_VARIANT = {
-    default: { detail: true, level: 1 },
-    detail: { detail: true, level: 2 },
-    subtotal: { detail: true, level: 1 },
-    total: { action: true, level: 2 },
+    default: { variant: "detail", level: 1 },
+    detail: { variant: "detail", level: 2 },
+    subtotal: { variant: "detail", level: 1 },
+    total: { variant: "action", level: 2 },
 };
 const Price = ({ price, variant = "default", withPercentage = false }) => {
     const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
@@ -29,7 +29,7 @@ const Price = ({ price, variant = "default", withPercentage = false }) => {
     return (React.createElement(View, { style: style.price, testID: "price" },
         React.createElement(Text, { ...PRICE_VARIANT[variant], testID: "price-text" }, priceValue),
         isDiscounted && (React.createElement(View, { style: style.discountedPriceInfo },
-            React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPriceText, testID: "discounted-price-text", lineThrough: true }, productPrice),
+            React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPriceText, testID: "discounted-price-text" }, productPrice),
             withPercentage ? (React.createElement(Text, { ...PRICE_VARIANT[variant], style: style.discountedPercentage, testID: "discounted-percentage-text" }, `-${price.discountedPrice.percentage}%`)) : null))));
 };
 export { Price };

package/dist/src/infrastructure/ui/components/atoms/price/Price.style.d.ts

@@ -8,6 +8,7 @@ declare const style: () => {
     };
     discountedPriceText: {
         color: string;
+        textDecorationLine: "line-through";
     };
     price: {
         flexDirection: "row";

package/dist/src/infrastructure/ui/components/atoms/price/Price.style.js

@@ -12,6 +12,7 @@ const style = () => {
         },
         discountedPriceText: {
             color: colorTextMedium,
+            textDecorationLine: "line-through",
         },
         price: {
             flexDirection: "row",

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js

@@ -14,6 +14,6 @@ const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId
     const style = useMemo(() => buttonCheckoutQuestionItemStyle(), []);
     const checked = feedback === checkoutQuestion.id;
     return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, checked && style.buttonActive], testID: testID, onPress: handleOnPress },
-        React.createElement(Text, { level: 3, style: [style.text, checked && style.textActive], action: true }, optionText)));
+        React.createElement(Text, { level: 3, style: [style.text, checked && style.textActive], variant: "action" }, optionText)));
 };
 export { ButtonCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.js

@@ -11,7 +11,7 @@ const HostDefaultReturnQuestionItem = ({ returnQuestion, children, }) => {
     const style = useMemo(() => hostDefaultReturnQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         returnQuestion.translationKey && returnQuestion.translationKey !== " " && !isAllOptions ? (React.createElement(View, { style: style.title },
-            React.createElement(Text, { level: 3, action: true }, formatMessage({ id: returnQuestion.translationKey })))) : null,
+            React.createElement(Text, { level: 3, variant: "action" }, formatMessage({ id: returnQuestion.translationKey })))) : null,
         children));
 };
 export { HostDefaultReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostLegacyRadioGroupReturnQuestionItem/HostLegacyRadioGroupReturnQuestionItem.js

@@ -11,7 +11,7 @@ const HostLegacyRadioGroupReturnQuestionItem = ({ returnQuestion, children, test
     const style = useMemo(() => hostLegacyRadioGroupReturnQuestionItemStyle(), []);
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: style.wrapper, testID: testID },
-            React.createElement(Text, { level: 3, style: style.title, action: true }, placeholderText),
+            React.createElement(Text, { level: 3, style: style.title, variant: "action" }, placeholderText),
             children)));
 };
 export { HostLegacyRadioGroupReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.js

@@ -9,7 +9,7 @@ const HostRadioGroupReturnQuestionItem = ({ returnQuestion, children, testID, })
     const { formatMessage } = useI18n({ domain: DOMAIN });
     const style = useMemo(() => hostRadioGroupReturnQuestionItemStyle(), []);
     return (React.createElement(View, { style: style.wrapper, testID: testID },
-        returnQuestion.translationKey && (React.createElement(Text, { level: 3, style: style.title, action: true }, formatMessage({ id: returnQuestion.translationKey }))),
+        returnQuestion.translationKey && (React.createElement(Text, { level: 3, style: style.title, variant: "action" }, formatMessage({ id: returnQuestion.translationKey }))),
         children));
 };
 export { HostRadioGroupReturnQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.js

@@ -25,7 +25,7 @@ const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName,
     const style = useMemo(() => hostStackReturnQuestionItemStyle(), []);
     return (React.createElement(Animated.View, { style: stackAnimatedStyle },
         React.createElement(View, { onLayout: handleOnLayout },
-            titleText && (React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText)),
+            titleText && (React.createElement(Text, { level: 3, style: style.title, variant: "heading" }, titleText)),
             feedbackReturnQuestion && returnQuestionHasChildren(feedbackReturnQuestion) ? (React.createElement(React.Fragment, null,
                 React.createElement(Text, { level: 3, style: style.text }, feedbackText),
                 feedbackReturnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParent: feedbackReturnQuestion }))))) : (children))));

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -11,7 +11,7 @@ import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQu
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
 const TEXT = {
-    [Tradename.LOOKIERO]: (props) => React.createElement(Text, { level: 1, detail: true, ...props }),
+    [Tradename.LOOKIERO]: (props) => React.createElement(Text, { level: 1, variant: "detail", ...props }),
     [Tradename.OUTFITTERY]: (props) => React.createElement(Text, { level: 3, ...props }),
 };
 const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.js

@@ -15,7 +15,7 @@ const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
     const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
     const style = useMemo(() => returnQuestionFeedbackItemStyle(), []);
     return (React.createElement(View, { style: style.container },
-        returnQuestion.translationKey && (React.createElement(Text, { level: 2, style: style.title, detailBold: true }, formatMessage({ id: returnQuestion.translationKey }))),
-        React.createElement(Text, { level: 1, detail: true }, feedback || unansweredText)));
+        returnQuestion.translationKey && (React.createElement(Text, { level: 2, style: style.title, variant: "detailBold" }, formatMessage({ id: returnQuestion.translationKey }))),
+        React.createElement(Text, { level: 1, variant: "detail" }, feedback || unansweredText)));
 };
 export { ReturnQuestionFeedbackItem };

package/dist/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.js

@@ -11,7 +11,7 @@ const CheckoutHeader = ({ onBack }) => {
     const style = useMemo(() => checkoutHeader(), []);
     return (React.createElement(Header, { testID: "checkout-header" },
         React.createElement(ButtonIcon, { name: "arrow_left", style: { button: style.button }, testID: "arrow-left-button-icon", onPress: onBack }),
-        React.createElement(Text, { level: 3, action: true }, title),
+        React.createElement(Text, { level: 3, variant: "action" }, title),
         React.createElement(ButtonIconPlaceholder, null)));
 };
 export { CheckoutHeader };

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.js

@@ -11,7 +11,7 @@ const ItemDetailHeader = ({ onBack }) => {
     const style = useMemo(() => itemDetailHeaderStyle(), []);
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
-        React.createElement(Text, { level: 3, action: true }, title),
+        React.createElement(Text, { level: 3, variant: "action" }, title),
         React.createElement(ButtonIcon, { name: "close", style: { button: style.button }, testID: "close-button-icon", onPress: onBack })));
 };
 export { ItemDetailHeader };

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.js

@@ -31,7 +31,7 @@ const ItemHeader = ({ items, item, onNext, onPrevious }) => {
     }, [basePath, item.id, itemIndex, items, navigate, onNext]);
     return (React.createElement(Header, { testID: "item-header" },
         !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow_left", style: { button: style.button }, testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
-        React.createElement(Text, { level: 3, action: true }, title),
+        React.createElement(Text, { level: 3, variant: "action" }, title),
         !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow_right", style: { button: style.button }, testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
 };
 export { ItemHeader };

package/dist/src/infrastructure/ui/views/checkout/Checkout.js

@@ -90,7 +90,7 @@ const Checkout = ({ layout: Layout, getAuthToken, useRedirect, onCheckoutFlowSuc
                     React.createElement(View, { style: [style.contentWrapper, isDektopScreen && style.desktopContentWrapper] },
                         country === Country.NL && (React.createElement(View, { style: style.paymentSelectorNL },
                             React.createElement(PaymentInstrument, { useRedirect: useRedirect }))),
-                        React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                        React.createElement(Text, { level: 3, style: style.title, variant: "heading" }, titleText),
                         checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
                             React.createElement(ProductVariant, { brand: checkoutItem.productVariant.brand, color: checkoutItem.productVariant.color, country: country, media: checkoutItem.productVariant.media, name: checkoutItem.productVariant.name, price: checkoutItem.price, status: checkoutItem.status, size: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
                                     ? checkoutItem.replacedFor.size

package/dist/src/infrastructure/ui/views/item/components/banner/CustomerDecissionBanner.js

@@ -21,6 +21,6 @@ const CustomerDecissionBanner = ({ checkoutItemStatus, onPress }) => {
     return (React.createElement(View, { style: [style.container, isSmallScreen ? style.smallContainer : null] },
         React.createElement(InfoBox, { text: decissionText },
             React.createElement(Pressable, { testID: "customer-decission-banner", onPress: onPress },
-                React.createElement(Text, { level: isSmallScreen ? 2 : 1, detail: true, underlined: true }, bannerButtonText)))));
+                React.createElement(Text, { level: isSmallScreen ? 2 : 1, style: style.underlinedText, variant: "detail" }, bannerButtonText)))));
 };
 export { CustomerDecissionBanner };

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

@@ -5,5 +5,8 @@ declare const style: () => {
     smallContainer: {
         marginHorizontal: number;
     };
+    underlinedText: {
+        textDecorationLine: "underline";
+    };
 };
 export { style };

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

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

package/dist/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js

@@ -22,8 +22,8 @@ const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
             React.createElement(Text, { level: 1, style: style.title }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { style: style.button, onPress: onDismiss },
-                React.createElement(Text, { level: 3, selectable: false, style: [style.buttonText, { textTransform: "uppercase" }], action: true }, dismissButtonText)),
+                React.createElement(Text, { level: 3, selectable: false, style: [style.buttonText, { textTransform: "uppercase" }], variant: "action" }, dismissButtonText)),
             React.createElement(Button, { style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm },
-                React.createElement(Text, { level: 3, selectable: false, style: [style.buttonText, { textTransform: "uppercase" }], action: true }, confirmButtonText)))));
+                React.createElement(Text, { level: 3, selectable: false, style: [style.buttonText, { textTransform: "uppercase" }], variant: "action" }, confirmButtonText)))));
 };
 export { GetOutOfCheckoutModal };

package/dist/src/infrastructure/ui/views/item/components/productVariantDescription/ProductVariantDescription.js

@@ -16,9 +16,9 @@ const ProductVariantDescription = ({ brand, name, price, size: sizeProjection, c
     return (React.createElement(View, { style: [style.container, !isDesktopScreen && style.smallContainer] },
         React.createElement(View, { style: style.info },
             React.createElement(View, { style: style.content },
-                React.createElement(Text, { level: 1, style: style.brand, detail: true }, brand),
-                React.createElement(Text, { level: 1, detailBold: true }, name)),
+                React.createElement(Text, { level: 1, style: style.brand, variant: "detail" }, brand),
+                React.createElement(Text, { level: 1, variant: "detailBold" }, name)),
             React.createElement(Price, { price: price, withPercentage: true })),
-        React.createElement(Text, { level: 1, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));
+        React.createElement(Text, { level: 1, variant: "detail" }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)));
 };
 export { ProductVariantDescription };

package/dist/src/infrastructure/ui/views/item/components/selectModal/SelectModal.js

@@ -11,7 +11,7 @@ const SelectModal = ({ modalVisible, options, style: customStyle, testID, title,
     const style = useMemo(() => modalStyle(), []);
     return (React.createElement(Modal, { portalHostName: portalHostName, testID: testID, visible: modalVisible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
-            title && (React.createElement(Text, { level: 3, style: style.modalTitle, heading: true }, title)),
+            title && (React.createElement(Text, { level: 3, style: style.modalTitle, variant: "heading" }, title)),
             options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: style.underlayColor, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
                 React.createElement(Text, { level: 3, style: [style.optionText, value === optionValue && style.textActive, customStyle?.optionText] }, label)))))));
 };

package/dist/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js

@@ -12,7 +12,7 @@ const SizeWithoutStockModal = ({ visible, onDismiss }) => {
     const style = useMemo(() => sizeWithoutStockModalStyle(), []);
     return (React.createElement(Modal, { portalHostName: "Checkout", visible: visible, showCloseButton: true, onClose: onDismiss },
         React.createElement(View, { style: style.modalContent },
-            React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+            React.createElement(Text, { level: 3, style: style.title, variant: "heading" }, titleText),
             React.createElement(Text, { level: 3, style: style.description }, descriptionText),
             React.createElement(Button, { onPress: onDismiss }, buttonText))));
 };

package/dist/src/infrastructure/ui/views/return/components/price/Price.js

@@ -21,9 +21,9 @@ const Price = ({ price, withPercentage = false }) => {
     const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
     const style = useMemo(() => priceStyle(), []);
     return (React.createElement(View, { style: style.price, testID: "price" },
-        isDiscounted && (React.createElement(Text, { level: 1, style: style.discountedPriceText, testID: "discounted-price-text", detail: true, lineThrough: true }, productPrice)),
+        isDiscounted && (React.createElement(Text, { level: 1, style: style.discountedPriceText, testID: "discounted-price-text", variant: "detail" }, productPrice)),
         React.createElement(View, { style: style.discountedPriceInfo },
-            React.createElement(Text, { level: 1, testID: "price-text", detail: true }, priceValue),
-            isDiscounted && withPercentage ? (React.createElement(Text, { level: 1, style: style.discountedPercentage, testID: "discounted-percentage-text", detail: true }, `-${price.discountedPrice.percentage}%`)) : null)));
+            React.createElement(Text, { level: 1, testID: "price-text", variant: "detail" }, priceValue),
+            isDiscounted && withPercentage ? (React.createElement(Text, { level: 1, style: style.discountedPercentage, testID: "discounted-percentage-text", variant: "detail" }, `-${price.discountedPrice.percentage}%`)) : null)));
 };
 export { Price };

package/dist/src/infrastructure/ui/views/return/components/price/Price.style.d.ts

@@ -8,6 +8,7 @@ declare const style: () => {
     };
     discountedPriceText: {
         color: string;
+        textDecorationLine: "line-through";
     };
     price: {
         flexDirection: "row";

package/dist/src/infrastructure/ui/views/return/components/price/Price.style.js

@@ -12,6 +12,7 @@ const style = () => {
         },
         discountedPriceText: {
             color: colorTextMedium,
+            textDecorationLine: "line-through",
         },
         price: {
             flexDirection: "row",

package/dist/src/infrastructure/ui/views/return/components/productVariantPreview/ProductVariantPreview.js

@@ -26,9 +26,9 @@ const ProductVariantPreview = ({ item, country }) => {
                         }),
                     } })),
                 React.createElement(View, { style: style.info },
-                    React.createElement(Text, { level: 2, style: style.text, detail: true }, brand),
-                    React.createElement(Text, { level: 2, detail: true }, name),
-                    React.createElement(Text, { level: 2, style: style.text, detail: true }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
+                    React.createElement(Text, { level: 2, style: style.text, variant: "detail" }, brand),
+                    React.createElement(Text, { level: 2, variant: "detail" }, name),
+                    React.createElement(Text, { level: 2, style: style.text, variant: "detail" }, `${sizeText} ${sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country })}`)),
                 React.createElement(View, { style: style.price },
                     React.createElement(Price, { price: price, withPercentage: true }))))));
 };

package/dist/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.js

@@ -121,8 +121,8 @@ const ReturnQuestionsForm = ({ checkout, checkoutItem, country, layout: Layout,
                                     !isMobileScreen && style.infoDesktop,
                                     tradename === Tradename.OUTFITTERY && style.infoOutfittery,
                                 ] },
-                                React.createElement(Text, { level: 3, heading: true }, titleText),
-                                React.createElement(Text, { level: 1, style: style.description, detail: true }, descriptionText)),
+                                React.createElement(Text, { level: 3, variant: "heading" }, titleText),
+                                React.createElement(Text, { level: 1, style: style.description, variant: "detail" }, descriptionText)),
                             React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
                             React.createElement(View, { style: [style.submit, !isMobileScreen && style.submitDesktop] },
                                 React.createElement(Button, { testID: "return-questions-button", onPress: handleOnSubmit }, submitButtonText)))))))));

package/dist/src/infrastructure/ui/views/shared/components/productVariant/ProductVariant.js

@@ -21,14 +21,14 @@ const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color
                 React.createElement(LazyImage, { hiResSrc: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH }), resizeMode: "contain", src: cdnImageUrl({ url: media[0]?.url, width: IMAGE_WIDTH, dpi: 1 }), style: { view: [style.media, customStyle?.image] }, testID: "product-variant-media" })),
             React.createElement(View, { style: style.descriptionContainer },
                 React.createElement(View, { style: style.infoProductVariant },
-                    React.createElement(Text, { level: 2, style: style.text, detail: true }, brand),
-                    React.createElement(Text, { level: 2, detail: true }, name),
-                    React.createElement(Text, { level: 2, style: style.text, detail: true },
+                    React.createElement(Text, { level: 2, style: style.text, variant: "detail" }, brand),
+                    React.createElement(Text, { level: 2, variant: "detail" }, name),
+                    React.createElement(Text, { level: 2, style: style.text, variant: "detail" },
                         sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country }),
                         " / ",
                         colorLabel),
                     status === CheckoutItemStatus.REPLACED && (React.createElement(View, { style: style.sizeChange },
-                        React.createElement(Text, { level: 2, detail: true }, sizeChangeText)))),
+                        React.createElement(Text, { level: 2, variant: "detail" }, sizeChangeText)))),
                 React.createElement(Price, { price: price, variant: "detail" }))),
         onPress && React.createElement(Icon, { name: "arrow_right" })));
 };

package/dist/src/infrastructure/ui/views/summary/Summary.js

@@ -92,7 +92,7 @@ const Summary = ({ layout: Layout, children }) => {
                 React.createElement(Box, { size: { L: "2/3" }, style: isDesktopScreen && style.desktopListSpacing },
                     React.createElement(View, { style: [style.contentWrapper, isDesktopScreen && style.desktopContentWrapper] },
                         React.createElement(View, { style: !isDesktopScreen && style.mobileInfo },
-                            React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                            React.createElement(Text, { level: 3, style: style.title, variant: "heading" }, titleText),
                             React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
                         children)),
                 pricing && isDesktopScreen ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, isDesktopScreen ? style.desktopResume : style.mobileResume] },

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.js

@@ -27,7 +27,7 @@ const CollapsiblePricing = ({ migrated, tradename, pricing, totalCheckoutItemsKe
         collapsible && (React.createElement(Pressable, { style: style.iconContainer, testID: "pricing-collapsed", onPress: onPress }, collapsed ? (React.createElement(Icon, { name: "arrow_up_small", testID: "arrow-up" })) : (React.createElement(Icon, { name: "arrow_down_small", testID: "arrow-down" })))),
         collapsed && collapsible ? (React.createElement(Animated.View, { key: "collapsed", style: [style.collapsed, collapsedAnimatedStyle] },
             React.createElement(View, { style: style.collapsedContent },
-                React.createElement(Text, { level: 1, style: style.totalCollapsed, detail: true },
+                React.createElement(Text, { level: 1, style: style.totalCollapsed, variant: "detail" },
                     totalText,
                     " ",
                     totalCheckoutItemsKeptText),

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.js

@@ -9,7 +9,7 @@ import { style as pricingStyle } from "./Pricing.style";
 const Row = ({ action = false, text, level = 3, children }) => {
     const style = useMemo(() => pricingStyle(), []);
     return (React.createElement(View, { style: style.row },
-        React.createElement(Text, { action: action, level: level }, text),
+        React.createElement(Text, { level: level, variant: action ? "action" : "body" }, text),
         children));
 };
 const Pricing = ({ pricing, totalCheckoutItemsKept, tradename, migrated }) => {

package/dist/src/version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "14.2.0";
-export declare const RELEASE = "checkout@14.2.0";
+export declare const VERSION = "14.2.2-beta.0";
+export declare const RELEASE = "checkout@14.2.2-beta.0";

package/dist/src/version.js

@@ -1,2 +1,2 @@
-export const VERSION = "14.2.0";
-export const RELEASE = "checkout@14.2.0";
+export const VERSION = "14.2.2-beta.0";
+export const RELEASE = "checkout@14.2.2-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "14.2.0",
+  "version": "14.2.2-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/ExpoRoot.tsx

@@ -25,7 +25,7 @@ const theme = themeByTradename({ tradename });
 const locale: Locale = Locale.es_ES;
 
 const customer: Customer = {
-  customerId: "5d7228e5-2220-4437-bdab-e5e6fb28e49d",
+  customerId: "5bf90313-d56e-4a55-b422-16084a4466de",
   country: Country.ES,
   segment: Segment.WOMEN,
   email: "email@example.com",
@@ -118,7 +118,7 @@ const ExpoRoot: FC = () => {
       <PaymentsQueryProvider>
         <EventProvider>
           <Aurora theme={theme}>
-            {isAccessible === false && <Text heading={true}>Checkout is not accessible!</Text>}
+            {isAccessible === false && <Text variant="heading">Checkout is not accessible!</Text>}
 
             <Router>
               <Routes>

package/src/infrastructure/ui/components/atoms/price/Price.style.ts

@@ -14,6 +14,7 @@ const style = () => {
     },
     discountedPriceText: {
       color: colorTextMedium,
+      textDecorationLine: "line-through",
     },
     price: {
       flexDirection: "row",

package/src/infrastructure/ui/components/atoms/price/Price.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from "react";
 import { View } from "react-native";
 import { useI18nNumber } from "@lookiero/i18n-react";
-import { Text } from "@lookiero/sty-psp-ui";
+import { Text, TextLevel, TextVariant } from "@lookiero/sty-psp-ui";
 import { PriceProjection } from "../../../../../projection/price/price";
 import { DOMAIN } from "../../../i18n/i18n";
 import { style as priceStyle } from "./Price.style";
@@ -9,17 +9,15 @@ import { style as priceStyle } from "./Price.style";
 type PriceVariant = "default" | "detail" | "subtotal" | "total";
 
 interface PriceVariantProps {
-  readonly body?: boolean;
-  readonly detail?: boolean;
-  readonly action?: boolean;
-  readonly level?: 1 | 2 | 3;
+  readonly variant?: TextVariant;
+  readonly level?: TextLevel;
 }
 
 const PRICE_VARIANT: Partial<Record<PriceVariant, PriceVariantProps>> = {
-  default: { detail: true, level: 1 },
-  detail: { detail: true, level: 2 },
-  subtotal: { detail: true, level: 1 },
-  total: { action: true, level: 2 },
+  default: { variant: "detail", level: 1 },
+  detail: { variant: "detail", level: 2 },
+  subtotal: { variant: "detail", level: 1 },
+  total: { variant: "action", level: 2 },
 };
 
 interface PriceProps {
@@ -53,12 +51,7 @@ const Price: FC<PriceProps> = ({ price, variant = "default", withPercentage = fa
       </Text>
       {isDiscounted && (
         <View style={style.discountedPriceInfo}>
-          <Text
-            {...PRICE_VARIANT[variant]}
-            style={style.discountedPriceText}
-            testID="discounted-price-text"
-            lineThrough
-          >
+          <Text {...PRICE_VARIANT[variant]} style={style.discountedPriceText} testID="discounted-price-text">
             {productPrice}
           </Text>
           {withPercentage ? (

package/src/infrastructure/ui/components/atoms/price/__snapshots__/Price.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Semibold",
             "fontSize": 13,
             "fontStyle": "normal",
@@ -67,16 +68,17 @@ exports[`Price atom matches the snapshot for a discounted price: discounted pric
         style={
           [
             {
+              "color": "#0C0A0A",
               "fontFamily": "AreaNormal-Semibold",
               "fontSize": 13,
               "fontStyle": "normal",
               "fontWeight": "normal",
               "letterSpacing": 0.1,
               "lineHeight": 17,
-              "textDecorationLine": "line-through",
             },
             {
               "color": "#837C7C",
+              "textDecorationLine": "line-through",
             },
           ]
         }
@@ -130,6 +132,7 @@ exports[`Price atom matches the snapshot for a non-discounted price: non-discoun
       style={
         [
           {
+            "color": "#0C0A0A",
             "fontFamily": "AreaNormal-Semibold",
             "fontSize": 13,
             "fontStyle": "normal",

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -36,7 +36,7 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem<CheckoutFeedbackQuestionT
       testID={testID}
       onPress={handleOnPress}
     >
-      <Text level={3} style={[style.text, checked && style.textActive]} action>
+      <Text level={3} style={[style.text, checked && style.textActive]} variant="action">
         {optionText}
       </Text>
     </TouchableOpacity>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.tsx

@@ -21,7 +21,7 @@ const HostDefaultReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_
     <>
       {returnQuestion.translationKey && returnQuestion.translationKey !== " " && !isAllOptions ? (
         <View style={style.title}>
-          <Text level={3} action>
+          <Text level={3} variant="action">
             {formatMessage({ id: returnQuestion.translationKey })}
           </Text>
         </View>

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostLegacyRadioGroupReturnQuestionItem/HostLegacyRadioGroupReturnQuestionItem.tsx

@@ -24,7 +24,7 @@ const HostLegacyRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionT
   return (
     <>
       <View style={style.wrapper} testID={testID}>
-        <Text level={3} style={style.title} action>
+        <Text level={3} style={style.title} variant="action">
           {placeholderText}
         </Text>
         {children}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.tsx

@@ -19,7 +19,7 @@ const HostRadioGroupReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HO
   return (
     <View style={style.wrapper} testID={testID}>
       {returnQuestion.translationKey && (
-        <Text level={3} style={style.title} action>
+        <Text level={3} style={style.title} variant="action">
           {formatMessage({ id: returnQuestion.translationKey })}
         </Text>
       )}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.tsx

@@ -52,7 +52,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
     <Animated.View style={stackAnimatedStyle}>
       <View onLayout={handleOnLayout}>
         {titleText && (
-          <Text level={3} style={style.title} heading>
+          <Text level={3} style={style.title} variant="heading">
             {titleText}
           </Text>
         )}

package/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.tsx

@@ -20,7 +20,7 @@ import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItem
 import { style as radioReturnQuestionItemStyle } from "./RadioReturnQuestionItem.style";
 
 const TEXT: Record<Tradename, FC<RNTextProps>> = {
-  [Tradename.LOOKIERO]: (props) => <Text level={1} detail {...props} />,
+  [Tradename.LOOKIERO]: (props) => <Text level={1} variant="detail" {...props} />,
   [Tradename.OUTFITTERY]: (props) => <Text level={3} {...props} />,
 };
 

package/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.tsx

@@ -29,11 +29,11 @@ const ReturnQuestionFeedbackItem: ReturnQuestionItem<ReturnQuestionType.HOST_DEF
   return (
     <View style={style.container}>
       {returnQuestion.translationKey && (
-        <Text level={2} style={style.title} detailBold>
+        <Text level={2} style={style.title} variant="detailBold">
           {formatMessage({ id: returnQuestion.translationKey })}
         </Text>
       )}
-      <Text level={1} detail>
+      <Text level={1} variant="detail">
         {feedback || unansweredText}
       </Text>
     </View>

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.tsx

@@ -19,7 +19,7 @@ const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
   return (
     <Header testID="checkout-header">
       <ButtonIcon name="arrow_left" style={{ button: style.button }} testID="arrow-left-button-icon" onPress={onBack} />
-      <Text level={3} action>
+      <Text level={3} variant="action">
         {title}
       </Text>
       <ButtonIconPlaceholder />