@lookiero/checkout 6.4.0 → 6.5.0-beta.1

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

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Platform, ScrollView, View } from "react-native";
+import { Platform, View } from "react-native";
 import { generatePath, useMatch, useNavigate } from "react-router-native";
 import { Box, Text, Layout, useDevice, Spinner } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
+import { Sticky } 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";
@@ -13,13 +14,13 @@ import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { useTrackPressPricing } from "../../../tracking/useTrackPressPricing";
 import { FiveItemsDiscountBanner } from "../../components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner";
+import { Body } from "../../components/layouts/body/Body";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { useBasePath } from "../../routing/useBasePath";
 import { style } from "./Summary.style";
-import { Pricing } from "./components/pricing/Pricing";
-import { StickyPricing } from "./components/stickyPricing/StickyPricing";
+import { CollapsiblePricing } from "./components/collapsiblePricing/CollapsiblePricing";
 const Summary = ({ layout: LocalLayout, children }) => {
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [pricingCollapsed, setPricingCollapsed] = useState(true);
@@ -78,22 +79,22 @@ const Summary = ({ layout: LocalLayout, children }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(LocalLayout, { scrollEnabled: false, style: {
-            header: style.header,
+    return (React.createElement(LocalLayout, { style: {
             scrollView: style.scrollView,
         } },
-        React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
-            fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
-            React.createElement(Layout, { fullWidth: !screen.L, style: [screen.L ? style.desktopLayoutSpacing : undefined, { paddingBottom: pricingHeight }] },
-                React.createElement(Box, { size: { L: "2/3" }, style: screen.L ? style.desktopListSpacing : undefined },
-                    React.createElement(View, { style: [style.contentWrapper, screen.L ? style.desktopContentWrapper : undefined] },
-                        React.createElement(View, { style: !screen.L ? style.mobileInfo : undefined },
-                            React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
-                            React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
-                        children)),
-                pricing && screen.L ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : style.mobileResume] },
-                    React.createElement(View, { style: style.princingWrapper },
-                        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: false, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, submitButtonText: submitButtonText, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onSubmit: handleOnSubmit })))) : null)),
-        pricing && !screen.L ? (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })) : null));
+        fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
+        React.createElement(Layout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
+            React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
+                React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
+                    React.createElement(View, { style: !screen.L && style.mobileInfo },
+                        React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
+                        React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
+                    children)),
+            pricing && screen.L ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : style.mobileResume] },
+                React.createElement(View, { style: style.princingWrapper },
+                    React.createElement(CollapsiblePricing, { collapsed: false, collapsible: false, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onSubmit: handleOnSubmit })))) : null),
+        pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
+            React.createElement(Body, null,
+                React.createElement(CollapsiblePricing, { collapsed: pricingCollapsed, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })))) : null));
 };
 export { Summary };

package/dist/src/infrastructure/ui/views/summary/Summary.style.d.ts

@@ -21,9 +21,6 @@ declare const style: {
     desktopResume: {
         borderRadius: number;
     };
-    header: {
-        height: number;
-    };
     mobileInfo: {
         paddingHorizontal: number;
         paddingTop: number;
@@ -35,7 +32,10 @@ declare const style: {
     resume: any;
     scrollView: {
         backgroundColor: string;
-        flex: number;
+    };
+    sticky: {
+        paddingBottom: number;
+        paddingTop: number;
     };
     title: {
         marginBottom: number;

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

@@ -1,7 +1,6 @@
 import { Platform, StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space4, space6, space12, space16, borderRadius4, colorBgBase, } = theme();
+const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space3, space4, space6, space12, space16, space24, borderRadius4, colorBgBase, } = theme();
 const style = StyleSheet.create({
     contentWrapper: {
         backgroundColor: colorBgBase,
@@ -9,7 +8,7 @@ const style = StyleSheet.create({
     },
     description: {
         color: colorTextMedium,
-        marginBottom: space4,
+        marginBottom: space6,
     },
     desktopContentWrapper: {
         borderRadius: borderRadius4,
@@ -25,9 +24,6 @@ const style = StyleSheet.create({
     desktopResume: {
         borderRadius: borderRadius4,
     },
-    header: {
-        height: HEADER_HEIGHT,
-    },
     mobileInfo: {
         paddingHorizontal: space6,
         paddingTop: space6,
@@ -53,7 +49,7 @@ const style = StyleSheet.create({
         ...Platform.select({
             web: {
                 position: "sticky",
-                top: space12,
+                top: space24,
                 alignSelf: "flex-start",
             },
         }),
@@ -61,7 +57,10 @@ const style = StyleSheet.create({
     },
     scrollView: {
         backgroundColor: colorBgPrimaryLight,
-        flex: 1,
+    },
+    sticky: {
+        paddingBottom: space4,
+        paddingTop: space3,
     },
     title: {
         marginBottom: space2,

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

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+interface CollapsiblePricingProps {
+    readonly pricing: PricingProjection;
+    readonly totalCheckoutItemsKept: number;
+    readonly collapsible?: boolean;
+    readonly collapsed?: boolean;
+    readonly submitButtonText: string;
+    readonly onPress?: () => void;
+    readonly onSubmit: () => void;
+}
+declare const CollapsiblePricing: FC<CollapsiblePricingProps>;
+export { CollapsiblePricing };

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

@@ -0,0 +1,33 @@
+import { animated, useSpring } from "@react-spring/native";
+import React from "react";
+import { Pressable, View } from "react-native";
+import { Button, Icon, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { Price } from "../../../../components/atoms/price/Price";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Pricing } from "../pricing/Pricing";
+import { style } from "./CollapsiblePricing.style";
+const CollapsiblePricing = ({ pricing, totalCheckoutItemsKept, collapsible = true, collapsed = false, submitButtonText, onPress = () => void 0, onSubmit, }) => {
+    const { pendingToPay } = pricing;
+    const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
+    const totalCheckoutItemsKeptText = useI18nMessage({
+        id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
+        values: { items: totalCheckoutItemsKept.toString() },
+    });
+    const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
+    const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
+    return (React.createElement(React.Fragment, null,
+        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, { style: [style.collapsed, { opacity: collapsedStyle.opacitiy }] },
+            React.createElement(View, { style: style.collapsedContent },
+                React.createElement(Text, { level: 1, style: style.totalCollapsed, detail: true },
+                    totalText,
+                    " ",
+                    totalCheckoutItemsKeptText),
+                React.createElement(Price, { price: pendingToPay, variant: "detail" })),
+            React.createElement(View, { style: style.collapsedContent },
+                React.createElement(Button, { testID: "confirm-checkout-collpased-button", small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
+            React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: totalCheckoutItemsKept }),
+            React.createElement(Button, { testID: "confirm-checkout-button", onPress: onSubmit }, submitButtonText)))));
+};
+export { CollapsiblePricing };

package/dist/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.style.d.ts

@@ -0,0 +1,18 @@
+declare const style: {
+    collapsed: {
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+    collapsedContent: {
+        flex: number;
+        marginBottom: number;
+    };
+    iconContainer: {
+        alignItems: "center";
+        marginBottom: number;
+    };
+    totalCollapsed: {
+        marginBottom: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space1, space3 } = theme();
+const style = StyleSheet.create({
+    collapsed: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    collapsedContent: {
+        flex: 1,
+        marginBottom: space1,
+    },
+    iconContainer: {
+        alignItems: "center",
+        marginBottom: space3,
+    },
+    totalCollapsed: {
+        marginBottom: space1,
+    },
+});
+export { style };

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

@@ -1,20 +1,8 @@
 import { FC } from "react";
-import { ServiceProjection } from "../../../../../../projection/pricing/pricing";
-import { PriceProjection } from "../../../../../../projection/shared/price";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
 interface PricingProps {
-    readonly pendingToPay: PriceProjection;
-    readonly subtotal: PriceProjection;
-    readonly balanceDiscount?: PriceProjection;
-    readonly discount?: PriceProjection;
-    readonly discountPercentage?: number;
+    readonly pricing: PricingProjection;
     readonly totalCheckoutItemsKept: number;
-    readonly service: ServiceProjection;
-    readonly collapsible?: boolean;
-    readonly collapsed?: boolean;
-    readonly busy?: boolean;
-    readonly submitButtonText: string;
-    readonly onPress?: () => void;
-    readonly onSubmit: () => void;
 }
 declare const Pricing: FC<PricingProps>;
 export { Pricing };

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

@@ -1,7 +1,6 @@
-import { animated, useSpring } from "@react-spring/native";
 import React from "react";
-import { Pressable, View } from "react-native";
-import { Button, Icon, Text } from "@lookiero/aurora";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Price } from "../../../../components/atoms/price/Price";
 import { I18nMessages } from "../../../../i18n/i18n";
@@ -9,7 +8,8 @@ import { style } from "./Pricing.style";
 const Row = ({ action = false, text, level = 3, children }) => (React.createElement(View, { style: style.row },
     React.createElement(Text, { action: action, level: level }, text),
     children));
-const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, totalCheckoutItemsKept, service, collapsible = true, collapsed = false, busy = false, submitButtonText, onPress = () => void 0, onSubmit, }) => {
+const Pricing = ({ pricing, totalCheckoutItemsKept }) => {
+    const { pendingToPay, subtotal, balanceDiscount, discount, discountPercentage = 0, service } = pricing;
     const totalText = useI18nMessage({ id: I18nMessages.SUMMARY_TOTAL });
     const totalCheckoutItemsKeptText = useI18nMessage({
         id: I18nMessages.SUMMARY_TOTAL_ITEMS_KEPT,
@@ -23,29 +23,16 @@ const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPe
     });
     const creditText = useI18nMessage({ id: I18nMessages.SUMMARY_CREDIT });
     const feeText = useI18nMessage({ id: I18nMessages.SUMMARY_FEE });
-    const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
-    const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
-    return (React.createElement(React.Fragment, null,
-        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, { style: [style.collapsed, { opacity: collapsedStyle.opacitiy }] },
-            React.createElement(View, { style: style.collapsedContent },
-                React.createElement(Text, { level: 1, style: style.totalCollapsed, detail: true },
-                    totalText,
-                    " ",
-                    totalCheckoutItemsKeptText),
-                React.createElement(Price, { price: pendingToPay, variant: "detail" })),
-            React.createElement(View, { style: style.collapsedContent },
-                React.createElement(Button, { busy: busy, testID: "confirm-checkout-collpased-button", small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
-            React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
-                React.createElement(Price, { price: subtotal, variant: "subtotal" })),
-            discount && discount.amount !== 0 && (React.createElement(Row, { text: discountText },
-                React.createElement(Price, { price: discount, variant: "subtotal" }))),
-            balanceDiscount && balanceDiscount.amount !== 0 && (React.createElement(Row, { text: creditText },
-                React.createElement(Price, { price: balanceDiscount, variant: "subtotal" }))),
-            React.createElement(Row, { text: feeText }, service.paidWithPromocode ? (React.createElement(Text, { level: 3 }, freeText)) : (React.createElement(Price, { price: service.finalPrice, variant: "subtotal" }))),
-            React.createElement(View, { style: style.divider }),
-            React.createElement(Row, { level: 2, text: totalText, action: true },
-                React.createElement(Price, { price: pendingToPay, variant: "total" })),
-            React.createElement(Button, { busy: busy, testID: "confirm-checkout-button", onPress: onSubmit }, submitButtonText)))));
+    return (React.createElement(View, null,
+        React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
+            React.createElement(Price, { price: subtotal, variant: "subtotal" })),
+        discount && discount.amount !== 0 && (React.createElement(Row, { text: discountText },
+            React.createElement(Price, { price: discount, variant: "subtotal" }))),
+        balanceDiscount && balanceDiscount.amount !== 0 && (React.createElement(Row, { text: creditText },
+            React.createElement(Price, { price: balanceDiscount, variant: "subtotal" }))),
+        React.createElement(Row, { text: feeText }, service.paidWithPromocode ? (React.createElement(Text, { level: 3 }, freeText)) : (React.createElement(Price, { price: service.finalPrice, variant: "subtotal" }))),
+        React.createElement(View, { style: style.divider }),
+        React.createElement(Row, { level: 2, text: totalText, action: true },
+            React.createElement(Price, { price: pendingToPay, variant: "total" }))));
 };
 export { Pricing };

package/dist/src/infrastructure/ui/views/summary/components/pricing/Pricing.style.d.ts

@@ -1,28 +1,13 @@
 declare const style: {
-    collapsed: {
-        flexDirection: "row";
-        justifyContent: "space-between";
-    };
-    collapsedContent: {
-        flex: number;
-        marginBottom: number;
-    };
     divider: {
         backgroundColor: string;
         height: number;
         marginBottom: number;
     };
-    iconContainer: {
-        alignItems: "center";
-        marginBottom: number;
-    };
     row: {
         flexDirection: "row";
         justifyContent: "space-between";
         marginBottom: number;
     };
-    totalCollapsed: {
-        marginBottom: number;
-    };
 };
 export { style };

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

@@ -1,31 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgPrimary, space1, space3, space4 } = theme();
+const { space4, colorBgPrimary } = theme();
 const style = StyleSheet.create({
-    collapsed: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-    },
-    collapsedContent: {
-        flex: 1,
-        marginBottom: space1,
-    },
     divider: {
         backgroundColor: colorBgPrimary,
         height: 1,
         marginBottom: space4,
     },
-    iconContainer: {
-        alignItems: "center",
-        marginBottom: space3,
-    },
     row: {
         flexDirection: "row",
         justifyContent: "space-between",
         marginBottom: space4,
     },
-    totalCollapsed: {
-        marginBottom: space1,
-    },
 });
 export { style };

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.d.ts

@@ -5,7 +5,6 @@ interface StickyPricingProps {
     readonly pricing: PricingProjection;
     readonly totalCheckoutItemsKept: number;
     readonly collapsed: boolean;
-    readonly submitButtonText: string;
     readonly onPress: () => void;
     readonly onSubmit: () => void;
     readonly onLayout?: ({ width, height }: LayoutRectangle) => void;

package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.js

@@ -3,7 +3,7 @@ import { Sticky } from "@lookiero/sty-psp-ui";
 import { Body } from "../../../../components/layouts/body/Body";
 import { Pricing } from "../pricing/Pricing";
 import { style } from "./StickyPricing.style";
-const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, submitButtonText, onPress, onSubmit, onLayout, }) => (React.createElement(Sticky, { style: style.sticky, onLayout: onLayout },
+const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit, onLayout, }) => (React.createElement(Sticky, { style: style.sticky, onLayout: onLayout },
     React.createElement(Body, null,
-        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: collapsed, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, submitButtonText: submitButtonText, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: onPress, onSubmit: onSubmit }))));
+        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: collapsed, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: onPress, onSubmit: onSubmit }))));
 export { StickyPricing };

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { Text } from "@lookiero/aurora";
+import { Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { Tabs } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
@@ -10,6 +10,7 @@ import { style } from "./CheckoutItemsTabs.style";
 const CheckoutItem = ({ checkoutItemStatus, checkoutItemProductVariant, checkoutItemPrice, country, testID, style: customStyle, onPress, }) => (React.createElement(View, { testID: testID },
     React.createElement(ProductVariant, { brand: checkoutItemProductVariant.brand, color: checkoutItemProductVariant.color, country: country, media: checkoutItemProductVariant.media, name: checkoutItemProductVariant.name, price: checkoutItemPrice, size: checkoutItemProductVariant.size, status: checkoutItemStatus, style: customStyle, onPress: onPress })));
 const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned, country, onPressItem, onChanged, }) => {
+    const { screen } = useDevice();
     const keepTabText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_TAB });
     const returnTabText = useI18nMessage({ id: I18nMessages.SUMMARY_RETURN_TAB });
     const keepEmptyText = useI18nMessage({ id: I18nMessages.SUMMARY_KEEP_EMPTY });
@@ -19,6 +20,9 @@ const CheckoutItemsTabs = ({ tabIndex, checkoutItemsKept, checkoutItemsReturned,
     const renderItem = useCallback(({ index }) => index === 0 ? (checkoutItemsKept.length === 0 ? (React.createElement(Text, { style: style.emptyText }, keepEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsKept.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemStatus: checkoutItem.status, country: country, testID: "keep-checkout-item", checkoutItemProductVariant: checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
             ? checkoutItem.replacedFor
             : checkoutItem.productVariant, onPress: () => handleOnPressItem(checkoutItem.id) })))))) : checkoutItemsReturned.length === 0 ? (React.createElement(Text, { style: style.emptyText }, returnEmptyText)) : (React.createElement(React.Fragment, null, checkoutItemsReturned.map((checkoutItem) => (React.createElement(CheckoutItem, { key: checkoutItem.id, checkoutItemPrice: checkoutItem.price, checkoutItemProductVariant: checkoutItem.productVariant, checkoutItemStatus: checkoutItem.status, country: country, testID: "return-checkout-item", onPress: () => handleOnPressItem(checkoutItem.id) }))))), [checkoutItemsKept, checkoutItemsReturned, country, handleOnPressItem, keepEmptyText, returnEmptyText]);
-    return (React.createElement(Tabs, { data: data, defaultIndex: tabIndex, style: { carousel: style.carousel, tabList: { tabList: style.tabList, tab: { tabText: style.tabText } } }, tabLabels: [`${keepTabText} (${checkoutItemsKept.length})`, `${returnTabText} (${checkoutItemsReturned.length})`], onChanged: onChanged }, renderItem));
+    return (React.createElement(Tabs, { data: data, 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 } },
+        }, onChanged: onChanged }, renderItem));
 };
 export { CheckoutItemsTabs };

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts

@@ -1,14 +1,23 @@
 declare const style: {
     carousel: {
-        padding: number;
+        paddingBottom: number;
+        paddingHorizontal: number;
         paddingTop: number;
     };
+    carouselDesktop: {
+        paddingHorizontal: number;
+    };
     emptyText: {
         paddingTop: number;
     };
     tabList: {
         borderBottomColor: string;
         borderBottomWidth: number;
+        justifyContent: "flex-start";
+        paddingHorizontal: number;
+    };
+    tabListDesktop: {
+        paddingHorizontal: number;
     };
     tabText: {
         fontSize: number;

package/dist/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/CheckoutItemsTabs.style.js

@@ -1,21 +1,30 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space2, space4, space6, colorBorderInput, fontDetailSize2, fontDetailHeight2 } = theme();
+const { space2, space4, space6, colorBorderInput, fontDetailSize1, fontDetailHeight1 } = theme();
 const style = StyleSheet.create({
     carousel: {
-        padding: space6,
+        paddingBottom: space6,
+        paddingHorizontal: space6,
         paddingTop: space2,
     },
+    carouselDesktop: {
+        paddingHorizontal: 0,
+    },
     emptyText: {
         paddingTop: space4,
     },
     tabList: {
         borderBottomColor: colorBorderInput,
         borderBottomWidth: 1,
+        justifyContent: "flex-start",
+        paddingHorizontal: space4,
+    },
+    tabListDesktop: {
+        paddingHorizontal: 0,
     },
     tabText: {
-        fontSize: fontDetailSize2,
-        lineHeight: fontDetailHeight2,
+        fontSize: fontDetailSize1,
+        lineHeight: fontDetailHeight1,
     },
 });
 export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.4.0";
+export declare const VERSION = "6.5.0-beta.1";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "6.4.0";
+export const VERSION = "6.5.0-beta.1";

package/package.json

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

package/src/ExpoRoot.tsx

@@ -12,11 +12,11 @@ import { PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-fro
 import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment } from "@lookiero/sty-psp-logging";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { KameleoonEnvironment } from "./infrastructure/ab-testing/kameleoonEnvironment";
 // import { bootstrap as checkoutMockBootstrap } from "./infrastructure/delivery/bootstrap.mock";
 import { bootstrap as checkoutBootstrap } from "./infrastructure/delivery/bootstrap";
 import { root } from "./infrastructure/ui/Root";
-import { DummyLayout } from "./infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout";
 import { fetchTranslations } from "./infrastructure/ui/i18n/fetchTranslations";
 import { translationExternalEndpoint } from "./infrastructure/ui/i18n/translationEndpoint";
 import { Router } from "./infrastructure/ui/routing/router/Router";

package/src/infrastructure/ui/Root.tsx

@@ -5,11 +5,11 @@ import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { I18n } from "@lookiero/i18n-react";
 import { MessagingRoot } from "@lookiero/messaging-react/bootstrap";
 import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
+import { Layout } from "@lookiero/sty-psp-ui";
 import { Customer } from "../../projection/shared/customer";
 import { Order } from "../../projection/shared/order";
 import { Subscription } from "../../projection/shared/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
-import { Layout } from "./components/layouts/layout/Layout";
 import { Routing } from "./routing/Routing";
 
 interface RootFunctionArgs {

package/src/infrastructure/ui/components/templates/header/Header.style.ts

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBgBase, space2, space12 } = theme();
+const { colorBgBase, space2 } = theme();
 
-export const HEADER_HEIGHT = space12;
+const HEADER_HEIGHT = 48;
 
 const style = StyleSheet.create({
   header: {
@@ -12,6 +12,7 @@ const style = StyleSheet.create({
     flexDirection: "row",
     flexGrow: 0,
     flexWrap: "nowrap",
+    height: HEADER_HEIGHT,
     justifyContent: "space-between",
     overflow: "visible",
     paddingHorizontal: space2,
@@ -19,4 +20,4 @@ const style = StyleSheet.create({
   },
 });
 
-export { style };
+export { style, HEADER_HEIGHT };

package/src/infrastructure/ui/components/templates/header/Header.tsx

@@ -1,17 +1,13 @@
-import React, { FC, useMemo } from "react";
-import { Platform, SafeAreaView, View, ViewProps } from "react-native";
+import React, { FC } from "react";
+import { View, ViewProps } from "react-native";
 import { style } from "./Header.style";
 
 type HeaderProps = ViewProps;
 
-const Header: FC<HeaderProps> = ({ children, style: customStyle, ...props }) => {
-  const Component = useMemo(() => (Platform.OS === "android" ? SafeAreaView : View), []);
-
-  return (
-    <Component {...props} style={[style.header, customStyle]}>
-      {children}
-    </Component>
-  );
-};
+const Header: FC<HeaderProps> = ({ children, style: customStyle, ...props }) => (
+  <View {...props} style={[style.header, customStyle]}>
+    {children}
+  </View>
+);
 
 export { Header };

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.ts

@@ -5,9 +5,10 @@ const { space10 } = theme();
 
 const style = StyleSheet.create({
   button: {
+    alignSelf: "auto",
     height: space10,
     width: space10,
   },
 });
 
-export default style;
+export { style };