@lookiero/checkout 6.4.0 → 6.5.0-beta.0

package/dist/src/ExpoRoot.js

@@ -10,10 +10,10 @@ import { i18n } from "@lookiero/i18n-react";
 import { PaymentsQueryProvider, setPaymentsBridge } from "@lookiero/payments-front";
 import { Locale } from "@lookiero/sty-psp-locale";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 // 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/dist/src/infrastructure/ui/Root.d.ts

@@ -3,11 +3,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 } 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";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
     readonly I18n: I18n;

package/dist/src/infrastructure/ui/components/templates/header/Header.js

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

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

@@ -1,4 +1,4 @@
-export declare const HEADER_HEIGHT: number;
+declare const HEADER_HEIGHT = 48;
 declare const style: {
     header: {
         alignItems: "center";
@@ -6,10 +6,11 @@ declare const style: {
         flexDirection: "row";
         flexGrow: number;
         flexWrap: "nowrap";
+        height: number;
         justifyContent: "space-between";
         overflow: "visible";
         paddingHorizontal: number;
         width: "100%";
     };
 };
-export { style };
+export { style, HEADER_HEIGHT };

package/dist/src/infrastructure/ui/components/templates/header/Header.style.js

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

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

@@ -1,16 +1,15 @@
 import React from "react";
-import { Box, ButtonIcon, Text } from "@lookiero/aurora";
+import { ButtonIcon, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
-import style from "./CheckoutHeader.style";
+import { style } from "./CheckoutHeader.style";
 const CheckoutHeader = ({ onBack }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
-    return (React.createElement(Box, null,
-        React.createElement(Header, { testID: "checkout-header" },
-            React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: onBack }),
-            React.createElement(Text, { level: 3, action: true }, title),
-            React.createElement(ButtonIconPlaceholder, null))));
+    return (React.createElement(Header, { testID: "checkout-header" },
+        React.createElement(ButtonIcon, { name: "arrow_left", style: style.button, testID: "arrow-left-button-icon", onPress: onBack }),
+        React.createElement(Text, { level: 3, action: true }, title),
+        React.createElement(ButtonIconPlaceholder, null)));
 };
 export { CheckoutHeader };

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

@@ -1,7 +1,8 @@
 declare const style: {
     button: {
+        alignSelf: "auto";
         height: number;
         width: number;
     };
 };
-export default style;
+export { style };

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

@@ -3,8 +3,9 @@ import { theme } from "@lookiero/sty-psp-ui";
 const { space10 } = theme();
 const style = StyleSheet.create({
     button: {
+        alignSelf: "auto",
         height: space10,
         width: space10,
     },
 });
-export default style;
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.js

@@ -3,8 +3,9 @@ import { ButtonIcon } from "@lookiero/aurora";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
 import { Logo } from "../logo/Logo";
+import { style } from "./DefaultHeader.style";
 const DefaultHeader = ({ onPressMenu }) => (React.createElement(Header, { testID: "default-header" },
     React.createElement(Logo, null),
     React.createElement(ButtonIconPlaceholder, null),
-    React.createElement(ButtonIcon, { name: "menu", testID: "menu-button-icon", onPress: onPressMenu })));
+    React.createElement(ButtonIcon, { name: "menu", style: style.button, testID: "menu-button-icon", onPress: onPressMenu })));
 export { DefaultHeader };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.d.ts

@@ -0,0 +1,8 @@
+declare const style: {
+    button: {
+        alignSelf: "auto";
+        height: number;
+        width: number;
+    };
+};
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space10 } = theme();
+const style = StyleSheet.create({
+    button: {
+        alignSelf: "auto",
+        height: space10,
+        width: space10,
+    },
+});
+export { style };

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

@@ -4,11 +4,12 @@ import { useI18nMessage } from "@lookiero/i18n-react";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { Header } from "../Header";
 import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import { style } from "./ItemDetailHeader.style";
 const ItemDetailHeader = ({ onBack }) => {
     const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
     return (React.createElement(Header, { testID: "item-detail-header" },
         React.createElement(ButtonIconPlaceholder, null),
         React.createElement(Text, { level: 3, action: true }, title),
-        React.createElement(ButtonIcon, { name: "close", testID: "close-button-icon", onPress: onBack })));
+        React.createElement(ButtonIcon, { name: "close", style: style.button, testID: "close-button-icon", onPress: onBack })));
 };
 export { ItemDetailHeader };

package/dist/src/infrastructure/ui/components/templates/header/itemDetailHeader/ItemDetailHeader.style.d.ts

@@ -0,0 +1,8 @@
+declare const style: {
+    button: {
+        alignSelf: "auto";
+        height: number;
+        width: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space10 } = theme();
+const style = StyleSheet.create({
+    button: {
+        alignSelf: "auto",
+        height: space10,
+        width: space10,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.style.d.ts

@@ -1,5 +1,6 @@
 declare const style: {
     button: {
+        alignSelf: "auto";
         height: number;
         width: number;
     };

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

@@ -3,6 +3,7 @@ import { theme } from "@lookiero/sty-psp-ui";
 const { space10 } = theme();
 const style = StyleSheet.create({
     button: {
+        alignSelf: "auto",
         height: space10,
         width: space10,
     },

package/dist/src/infrastructure/ui/routing/Routing.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { useRoutes as reactRouterUseRoutes } from "react-router-native";
 import { I18n } from "@lookiero/i18n-react";
+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";
 interface RoutingProps {
     readonly basePath?: string;
     readonly customer: Customer;

package/dist/src/infrastructure/ui/views/checkout/Checkout.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from "react";
-import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
+import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
 interface CheckoutProps {
     readonly children?: ReactNode;
     readonly layout: LocalLayout;

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import { useNavigate } from "react-router-native";
-import { Box, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
+import { Box, Button, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
@@ -65,22 +65,22 @@ const Checkout = ({ children, layout: LocalLayout, useRedirect }) => {
         return React.createElement(Spinner, null);
     }
     return (React.createElement(LocalLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), style: {
-            header: style.header,
             scrollView: style.scrollView,
         } },
         hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
         React.createElement(Layout, { fullWidth: !screen.L, style: screen.L && style.desktopLayoutSpacing },
-            React.createElement(Box, { size: { L: "2/3" }, style: screen.L ? style.desktopListSpacing : undefined },
-                React.createElement(View, { style: [style.contentWrapper, screen.L ? style.contentWrapper : undefined] },
-                    React.createElement(View, { style: style.paymentSelector },
-                        React.createElement(PaymentInstrument, { useRedirect: useRedirect })),
+            React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
+                React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
                     React.createElement(Text, { level: 3, style: style.title, heading: true }, 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
-                                : checkoutItem.productVariant.size })))))),
-            React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : undefined] }, pricing ? (React.createElement(View, { style: style.princingWrapper },
-                React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsible: false, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, submitButtonText: submitButtonText, subtotal: pricing.subtotal, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onSubmit: handleOnSubmit }))) : null)),
+                                : checkoutItem.productVariant.size })))),
+                    React.createElement(View, { style: style.paymentSelector },
+                        React.createElement(PaymentInstrument, { useRedirect: useRedirect })))),
+            React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L && style.desktopResume] }, pricing ? (React.createElement(View, { style: style.princingWrapper },
+                React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
+                React.createElement(Button, { testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText))) : null)),
         children));
 };
 export { Checkout };

package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts

@@ -2,13 +2,12 @@ declare const style: {
     contentWrapper: {
         backgroundColor: string;
         flexGrow: number;
-        padding: number;
-    };
-    deliveryBannerContainer: {
-        marginBottom: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
     };
     desktopContentWrapper: {
         borderRadius: number;
+        paddingVertical: number;
     };
     desktopLayoutSpacing: {
         paddingVertical: number;
@@ -19,20 +18,8 @@ declare const style: {
     desktopResume: {
         borderRadius: number;
     };
-    header: {
-        backgroundColor: string;
-        height: number;
-    };
-    mobileInfo: {
-        paddingHorizontal: number;
-        paddingTop: number;
-    };
     paymentSelector: {
-        marginBottom: number;
-    };
-    pricingContainer: {
-        paddingHorizontal: number;
-        paddingVertical: number;
+        marginTop: number;
     };
     princingWrapper: {
         padding: number;
@@ -42,7 +29,7 @@ declare const style: {
         backgroundColor: string;
     };
     title: {
-        marginVertical: number;
+        marginBottom: number;
     };
 };
 export { style };

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

@@ -1,18 +1,16 @@
 import { StyleSheet, Platform } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space8, space12, space16 } = theme();
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space12, space16, space24 } = theme();
 const style = StyleSheet.create({
     contentWrapper: {
         backgroundColor: colorBgBase,
         flexGrow: 0,
-        padding: space6,
-    },
-    deliveryBannerContainer: {
-        marginBottom: space6,
+        paddingHorizontal: space6,
+        paddingVertical: space6,
     },
     desktopContentWrapper: {
         borderRadius: borderRadius4,
+        paddingVertical: space12,
     },
     desktopLayoutSpacing: {
         paddingVertical: space12,
@@ -23,20 +21,8 @@ const style = StyleSheet.create({
     desktopResume: {
         borderRadius: borderRadius4,
     },
-    header: {
-        backgroundColor: colorBgBase,
-        height: HEADER_HEIGHT,
-    },
-    mobileInfo: {
-        paddingHorizontal: space6,
-        paddingTop: space6,
-    },
     paymentSelector: {
-        marginBottom: space4,
-    },
-    pricingContainer: {
-        paddingHorizontal: space6,
-        paddingVertical: space8,
+        marginTop: space6,
     },
     princingWrapper: {
         padding: space6,
@@ -47,7 +33,7 @@ const style = StyleSheet.create({
         ...Platform.select({
             web: {
                 position: "sticky",
-                top: space12,
+                top: space24,
                 alignSelf: "flex-start",
             },
         }),
@@ -57,7 +43,7 @@ const style = StyleSheet.create({
         backgroundColor: colorBgPrimaryLight,
     },
     title: {
-        marginVertical: space4,
+        marginBottom: space4,
     },
 });
 export { style };

package/dist/src/infrastructure/ui/views/feedback/Feedback.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Layout } from "../../components/layouts/layout/Layout";
+import { Layout } from "@lookiero/sty-psp-ui";
 interface FeedbackProps {
     readonly layout: Layout;
 }

package/dist/src/infrastructure/ui/views/feedback/Feedback.js

@@ -12,6 +12,7 @@ import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
 import { Body } from "../../components/layouts/body/Body";
 import { CheckoutQuestionFeedbackProvider } from "../../components/organisms/checkoutQuestions/behaviors/useCheckoutQuestionFeedback";
+import { DefaultHeader } from "../../components/templates/header/defaultHeader/DefaultHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { style } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
@@ -78,7 +79,7 @@ const Feedback = ({ layout: Layout }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {}, onChanged: handleOnChangedFeedback },
-        React.createElement(Layout, { style: { header: style.header, scrollView: style.container } },
+        React.createElement(Layout, { header: React.createElement(DefaultHeader, null), style: { scrollView: style.container } },
             React.createElement(Body, { style: { column: style.bodyColumn } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.d.ts

@@ -6,8 +6,5 @@ declare const style: {
     container: {
         paddingBottom: number;
     };
-    header: {
-        height: number;
-    };
 };
 export { style };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.js

@@ -1,6 +1,5 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
 const { space8, space10 } = theme();
 const style = StyleSheet.create({
     bodyColumn: {
@@ -10,8 +9,5 @@ const style = StyleSheet.create({
     container: {
         paddingBottom: space10,
     },
-    header: {
-        height: HEADER_HEIGHT,
-    },
 });
 export { style };

package/dist/src/infrastructure/ui/views/item/Item.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Layout } from "../../components/layouts/layout/Layout";
+import { Layout } from "@lookiero/sty-psp-ui";
 interface ItemProps {
     readonly layout: Layout;
 }

package/dist/src/infrastructure/ui/views/item/Item.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View } from "react-native";
 import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
 import { Box, Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
@@ -169,11 +170,10 @@ const Item = ({ layout: Layout }) => {
         return React.createElement(Spinner, { testID: "spinner" });
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
-        React.createElement(Layout, { header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
-                header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
-                scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
+        React.createElement(Layout, { header: header, style: {
                 safeAreaView: isDesktopScreen ? style.safeAreaView : null,
-            } }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, onReturn: redirectToReturnPage ? goToReturnPage : showReturnQuestions })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: redirectToReturnPage ? goToReturnPage : showReturnQuestions }))),
+            } },
+            React.createElement(View, { style: [style.content, fiveItemsDiscount !== 0 && style.fiveItemsDiscountPadding] }, itemWithoutCustomerDecission ? (React.createElement(ItemWithoutCustomerDecission, { bookedProductsVariants: bookedProductsVariants, checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, onReturn: redirectToReturnPage ? goToReturnPage : showReturnQuestions })) : (React.createElement(ItemWithCustomerDecission, { checkoutId: checkout.id, checkoutItem: checkoutItem, currentProductVariant: currentProductVariant, returnQuestions: returnQuestions, onEditFeedback: redirectToReturnPage ? goToReturnPage : showReturnQuestions })))),
         !redirectToReturnPage ? (React.createElement(ReturnQuestionsForm, { returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: hideReturnQuestions, onSubmit: returnItem })) : null));
 };
 export { Item };

package/dist/src/infrastructure/ui/views/item/Item.style.d.ts

@@ -1,9 +1,9 @@
 declare const style: {
-    header: {
-        height: number;
+    content: {
+        flex: number;
     };
-    headerWithDoubleHeight: {
-        height: number;
+    fiveItemsDiscountPadding: {
+        paddingTop: number;
     };
     headerWrapper: {
         display: "flex";

package/dist/src/infrastructure/ui/views/item/Item.style.js

@@ -1,13 +1,12 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { colorBgPrimaryLight } = theme();
+const { colorBgPrimaryLight, space12 } = theme();
 const style = StyleSheet.create({
-    header: {
-        height: HEADER_HEIGHT,
+    content: {
+        flex: 1,
     },
-    headerWithDoubleHeight: {
-        height: HEADER_HEIGHT * 2,
+    fiveItemsDiscountPadding: {
+        paddingTop: space12,
     },
     headerWrapper: {
         display: "flex",

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { Platform, ScrollView } from "react-native";
+import { Platform } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -63,9 +63,8 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
-        React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
-            React.createElement(Body, { style: { row: style.container } },
-                React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } }))),
+        React.createElement(Body, { style: { row: style.container } },
+            React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } })),
         React.createElement(ItemActions, { country: country, currentProductVariant: currentProductVariant, productVariants: bookedProductsVariants?.productVariants, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: onReturn, onShowSizeWithoutStockModal: handleOnShowSizeWithoutStockModal })));
 };
 export { ItemWithoutCustomerDecission };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.d.ts

@@ -1,5 +1,6 @@
 declare const style: {
     container: {
+        justifyContent: "flex-start";
         paddingBottom: number;
         paddingHorizontal: number;
     };

package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js

@@ -3,6 +3,7 @@ import { theme } from "@lookiero/sty-psp-ui";
 const { space10 } = theme();
 const style = StyleSheet.create({
     container: {
+        justifyContent: "flex-start",
         paddingBottom: space10,
         paddingHorizontal: 0,
     },

package/dist/src/infrastructure/ui/views/return/Return.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Layout as LocalLayout } from "../../components/layouts/layout/Layout";
+import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
 interface ReturnProps {
     readonly layout: LocalLayout;
 }

package/dist/src/infrastructure/ui/views/return/Return.js

@@ -111,7 +111,6 @@ const ReturnForm = ({ checkout, checkoutItem, country, segment, layout: LocalLay
     return (React.createElement(ReturnQuestionItemProvider, { returnQuestionItems: returnQuestionItems },
         React.createElement(PortalHost, { name: "return-question-form-portal" }),
         React.createElement(LocalLayout, { header: header, scrollEnabled: false, style: {
-                header: style.header,
                 safeAreaView: style.safeAreaView,
                 scrollView: style.scrollView,
             } },

package/dist/src/infrastructure/ui/views/return/Return.style.d.ts

@@ -9,9 +9,6 @@ declare const style: {
     desktopLayoutSpacing: {
         paddingVertical: number;
     };
-    header: {
-        height: number;
-    };
     headerWrapper: {
         display: "flex";
         flexDirection: "column";

package/dist/src/infrastructure/ui/views/return/Return.style.js

@@ -1,7 +1,6 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
-const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space2, space4, space6, space8 } = theme();
+const { borderRadius5, colorBgPrimaryLight, colorBgBase, colorTextMedium, space4, space6, space8 } = theme();
 const style = StyleSheet.create({
     description: {
         color: colorTextMedium,
@@ -13,9 +12,6 @@ const style = StyleSheet.create({
     desktopLayoutSpacing: {
         paddingVertical: space8,
     },
-    header: {
-        height: HEADER_HEIGHT - space2,
-    },
     headerWrapper: {
         display: "flex",
         flexDirection: "column",

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

@@ -1,12 +1,12 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBgSurface, borderRadius3, borderRadiusFull, borderWidth2, colorBorderInput, space05, space1, space2, space4, } = theme();
+const { colorBgSurface, borderRadius3, borderRadiusFull, borderWidth2, colorBorderInput, colorBgPrimaryLight, space05, space1, space2, space4, } = theme();
 const IMAGE_WIDTH = 104;
 const IMAGE_HEIGHT = 132;
 const style = StyleSheet.create({
     container: {
         alignItems: "flex-end",
-        borderBottomColor: colorBorderInput,
+        borderBottomColor: colorBgPrimaryLight,
         borderBottomWidth: 1,
         flexDirection: "row",
         justifyContent: "space-between",