@lookiero/checkout 6.5.0-beta.1 → 6.5.0-beta.4

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

@@ -1,9 +1,10 @@
-import React, { useCallback, useMemo } from "react";
-import { View } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { Box, Button, Layout, Spinner, Text, useDevice } 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 { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -11,6 +12,7 @@ import { TrackingPage } from "../../../tracking/tracking";
 import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
+import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { I18nMessages } from "../../i18n/i18n";
@@ -26,6 +28,8 @@ const Checkout = ({ children, layout: LocalLayout, useRedirect }) => {
     const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
     const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
     const { screen } = useDevice();
+    const [pricingHeight, setPricingHeight] = useState(0);
+    const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
     useTrackPageView({
@@ -64,23 +68,27 @@ const Checkout = ({ children, layout: LocalLayout, useRedirect }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(LocalLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), style: {
+    return (React.createElement(LocalLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), scrollEnabled: false, style: {
             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 },
-                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(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)),
+        React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
+            hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
+            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(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(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, !screen.L && style.princingWrapperSmall] },
+                    React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
+                    screen.L ? (React.createElement(Button, { testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
+        pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
+            React.createElement(Body, null,
+                React.createElement(Button, { testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
         children));
 };
 export { Checkout };

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

@@ -24,9 +24,17 @@ declare const style: {
     princingWrapper: {
         padding: number;
     };
+    princingWrapperSmall: {
+        backgroundColor: string;
+    };
     resume: any;
     scrollView: {
         backgroundColor: string;
+        flex: number;
+    };
+    sticky: {
+        paddingBottom: number;
+        paddingTop: number;
     };
     title: {
         marginBottom: number;

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

@@ -1,6 +1,6 @@
 import { StyleSheet, Platform } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space12, space16, space24 } = theme();
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space3, space4, space6, space12, space16 } = theme();
 const style = StyleSheet.create({
     contentWrapper: {
         backgroundColor: colorBgBase,
@@ -27,13 +27,16 @@ const style = StyleSheet.create({
     princingWrapper: {
         padding: space6,
     },
+    princingWrapperSmall: {
+        backgroundColor: colorBgPrimaryLight,
+    },
     resume: {
         overflow: "hidden",
         backgroundColor: colorBgBase,
         ...Platform.select({
             web: {
                 position: "sticky",
-                top: space24,
+                top: space12,
                 alignSelf: "flex-start",
             },
         }),
@@ -41,6 +44,11 @@ const style = StyleSheet.create({
     },
     scrollView: {
         backgroundColor: colorBgPrimaryLight,
+        flex: 1,
+    },
+    sticky: {
+        paddingBottom: space4,
+        paddingTop: space3,
     },
     title: {
         marginBottom: space4,

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

@@ -1,5 +1,4 @@
 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";
@@ -170,10 +169,11 @@ 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, style: {
+        React.createElement(Layout, { header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
+                header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
+                scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
                 safeAreaView: isDesktopScreen ? style.safeAreaView : null,
-            } },
-            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 })))),
+            } }, 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,10 +1,13 @@
 declare const style: {
-    content: {
-        flex: number;
-    };
     fiveItemsDiscountPadding: {
         paddingTop: number;
     };
+    header: {
+        height: number;
+    };
+    headerWithDoubleHeight: {
+        height: number;
+    };
     headerWrapper: {
         display: "flex";
         flexDirection: "column";

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

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

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { Platform } from "react-native";
+import { Platform, ScrollView } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -63,8 +63,9 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
-        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(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(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,6 +1,5 @@
 declare const style: {
     container: {
-        justifyContent: "flex-start";
         paddingBottom: number;
         paddingHorizontal: number;
     };

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

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

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Platform, View } from "react-native";
+import { Platform, ScrollView, 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";
@@ -79,20 +79,22 @@ const Summary = ({ layout: LocalLayout, children }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(LocalLayout, { style: {
+    return (React.createElement(LocalLayout, { scrollEnabled: false, style: {
+            header: style.header,
             scrollView: style.scrollView,
         } },
-        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),
+        React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
+            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));

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

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

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

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

package/dist/src/version.d.ts

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

package/dist/src/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "6.5.0-beta.1",
+  "version": "6.5.0-beta.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -21,12 +21,12 @@
     "@lookiero/sty-psp-i18n": "^0.1.7",
     "@lookiero/sty-psp-locale": "^0.2.1",
     "@lookiero/sty-psp-logging": "^0.2.2",
-    "@lookiero/sty-psp-notifications": "^0.5.7",
+    "@lookiero/sty-psp-notifications": "^0.5.8",
     "@lookiero/sty-psp-react-native": "^0.2.0",
     "@lookiero/sty-psp-segment": "^0.1.1",
     "@lookiero/sty-psp-storage": "^0.1.3",
     "@lookiero/sty-psp-tracking": "^0.1.6",
-    "@lookiero/sty-psp-ui": "^0.5.4",
+    "@lookiero/sty-psp-ui": "^0.5.5",
     "@lookiero/sty-psp-ui-settings": "^0.1.1",
     "@lookiero/sty-psp-units": "^0.1.1",
     "@lookiero/sty-psp-uuid": "^0.1.0",

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

@@ -1,7 +1,7 @@
 import { StyleSheet, Platform } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space12, space16, space24 } = theme();
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space3, space4, space6, space12, space16 } = theme();
 
 const style = StyleSheet.create({
   contentWrapper: {
@@ -29,13 +29,16 @@ const style = StyleSheet.create({
   princingWrapper: {
     padding: space6,
   },
+  princingWrapperSmall: {
+    backgroundColor: colorBgPrimaryLight,
+  },
   resume: {
     overflow: "hidden",
     backgroundColor: colorBgBase,
     ...Platform.select({
       web: {
         position: "sticky",
-        top: space24,
+        top: space12,
         alignSelf: "flex-start",
       },
     }),
@@ -43,6 +46,11 @@ const style = StyleSheet.create({
   } as any,
   scrollView: {
     backgroundColor: colorBgPrimaryLight,
+    flex: 1,
+  },
+  sticky: {
+    paddingBottom: space4,
+    paddingTop: space3,
   },
   title: {
     marginBottom: space4,

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

@@ -1,10 +1,10 @@
-import React, { FC, ReactNode, useCallback, useMemo } from "react";
-import { View } from "react-native";
+import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
+import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
 import { useNavigate } from "react-router-native";
 import { Box, Button, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { QueryStatus } from "@lookiero/messaging-react";
-import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
+import { Layout as LocalLayout, Sticky } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -12,6 +12,7 @@ import { TrackingPage } from "../../../tracking/tracking";
 import { useTrackPageView } from "../../../tracking/useTrackPageView";
 import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
 import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
+import { Body } from "../../components/layouts/body/Body";
 import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
 import { useStaticInfo } from "../../hooks/useStaticInfo";
 import { I18nMessages } from "../../i18n/i18n";
@@ -36,6 +37,8 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
   const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
   const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
   const { screen } = useDevice();
+  const [pricingHeight, setPricingHeight] = useState(0);
+  const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);
 
   const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
   const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
@@ -98,54 +101,74 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
   return (
     <LocalLayout
       header={<CheckoutHeader onBack={handleOnBack} />}
+      scrollEnabled={false}
       style={{
         scrollView: style.scrollView,
       }}
     >
-      {hasReplacedCheckoutItem && <DeliveryBanner />}
-      <Layout fullWidth={!screen.L} style={screen.L && style.desktopLayoutSpacing}>
-        <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
-          <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
-            <Text level={3} style={style.title} heading>
-              {titleText}
-            </Text>
-
-            {checkoutItemsKept?.map((checkoutItem) => (
-              <View key={checkoutItem.id} testID="checkout-items-kept">
-                <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
-                  }
-                />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {hasReplacedCheckoutItem && <DeliveryBanner />}
+
+        <Layout
+          fullWidth={!screen.L}
+          style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
+        >
+          <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
+            <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+              <Text level={3} style={style.title} heading>
+                {titleText}
+              </Text>
+
+              {checkoutItemsKept?.map((checkoutItem) => (
+                <View key={checkoutItem.id} testID="checkout-items-kept">
+                  <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
+                    }
+                  />
+                </View>
+              ))}
+
+              <View style={style.paymentSelector}>
+                <PaymentInstrument useRedirect={useRedirect} />
               </View>
-            ))}
-
-            <View style={style.paymentSelector}>
-              <PaymentInstrument useRedirect={useRedirect} />
-            </View>
-          </View>
-        </Box>
-
-        <Box size={{ L: "1/3" }} style={[style.resume, screen.L && style.desktopResume]}>
-          {pricing ? (
-            <View style={style.princingWrapper}>
-              <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
-              <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
-                {submitButtonText}
-              </Button>
             </View>
-          ) : null}
-        </Box>
-      </Layout>
+          </Box>
+
+          <Box size={{ L: "1/3" }} style={[style.resume, screen.L && style.desktopResume]}>
+            {pricing ? (
+              <View style={[style.princingWrapper, !screen.L && style.princingWrapperSmall]}>
+                <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
+
+                {screen.L ? (
+                  <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
+                    {submitButtonText}
+                  </Button>
+                ) : null}
+              </View>
+            ) : null}
+          </Box>
+        </Layout>
+      </ScrollView>
+
+      {pricing && !screen.L ? (
+        <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
+          <Body>
+            <Button testID="confirm-checkout-button" small onPress={handleOnSubmit}>
+              {submitButtonText}
+            </Button>
+          </Body>
+        </Sticky>
+      ) : null}
 
       {children}
     </LocalLayout>

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

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

package/src/infrastructure/ui/views/item/Item.tsx

@@ -1,5 +1,4 @@
 import React, { FC, 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";
@@ -254,29 +253,30 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
     <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
       <Layout
         header={header}
+        scrollEnabled={!itemWithoutCustomerDecission}
         style={{
+          header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
+          scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
           safeAreaView: isDesktopScreen ? style.safeAreaView : null,
         }}
       >
-        <View style={[style.content, fiveItemsDiscount !== 0 && style.fiveItemsDiscountPadding]}>
-          {itemWithoutCustomerDecission ? (
-            <ItemWithoutCustomerDecission
-              bookedProductsVariants={bookedProductsVariants as BookedProductsVariantsProjection}
-              checkoutId={checkout.id}
-              checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
-              currentProductVariant={currentProductVariant}
-              onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
-            />
-          ) : (
-            <ItemWithCustomerDecission
-              checkoutId={checkout.id}
-              checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
-              currentProductVariant={currentProductVariant}
-              returnQuestions={returnQuestions}
-              onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
-            />
-          )}
-        </View>
+        {itemWithoutCustomerDecission ? (
+          <ItemWithoutCustomerDecission
+            bookedProductsVariants={bookedProductsVariants as BookedProductsVariantsProjection}
+            checkoutId={checkout.id}
+            checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
+            currentProductVariant={currentProductVariant}
+            onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+          />
+        ) : (
+          <ItemWithCustomerDecission
+            checkoutId={checkout.id}
+            checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
+            currentProductVariant={currentProductVariant}
+            returnQuestions={returnQuestions}
+            onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
+          />
+        )}
       </Layout>
 
       {!redirectToReturnPage ? (

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

@@ -5,7 +5,7 @@ const { space10 } = theme();
 
 const style = StyleSheet.create({
   container: {
-    justifyContent: "flex-start",
+    // justifyContent: "flex-start",
     paddingBottom: space10,
     paddingHorizontal: 0,
   },

package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useState } from "react";
-import { LayoutRectangle, Platform } from "react-native";
+import { LayoutRectangle, Platform, ScrollView } from "react-native";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
@@ -104,16 +104,18 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
     <>
       <SizeWithoutStockModal visible={sizeWithoutStockModalVisible} onDismiss={handleOnHideSizeWithoutStockModal} />
 
-      <Body style={{ row: style.container }}>
-        <ProductVariant
-          checkoutId={checkoutId}
-          checkoutItem={checkoutItem}
-          country={country}
-          currentProductVariant={currentProductVariant}
-          segment={segment}
-          style={{ content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } }}
-        />
-      </Body>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <Body style={{ row: style.container }}>
+          <ProductVariant
+            checkoutId={checkoutId}
+            checkoutItem={checkoutItem}
+            country={country}
+            currentProductVariant={currentProductVariant}
+            segment={segment}
+            style={{ content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } }}
+          />
+        </Body>
+      </ScrollView>
 
       <ItemActions
         country={country}

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

@@ -1,5 +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,
@@ -11,7 +12,6 @@ const {
   space6,
   space12,
   space16,
-  space24,
   borderRadius4,
   colorBgBase,
 } = theme();
@@ -39,6 +39,9 @@ const style = StyleSheet.create({
   desktopResume: {
     borderRadius: borderRadius4,
   },
+  header: {
+    height: HEADER_HEIGHT,
+  },
   mobileInfo: {
     paddingHorizontal: space6,
     paddingTop: space6,
@@ -64,7 +67,7 @@ const style = StyleSheet.create({
     ...Platform.select({
       web: {
         position: "sticky",
-        top: space24,
+        top: space12,
         alignSelf: "flex-start",
       },
     }),
@@ -72,6 +75,7 @@ const style = StyleSheet.create({
   } as any,
   scrollView: {
     backgroundColor: colorBgPrimaryLight,
+    flex: 1,
   },
   sticky: {
     paddingBottom: space4,

package/src/infrastructure/ui/views/summary/Summary.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { LayoutRectangle, Platform, View } from "react-native";
+import { LayoutRectangle, Platform, ScrollView, 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";
@@ -111,45 +111,50 @@ const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
 
   return (
     <LocalLayout
+      scrollEnabled={false}
       style={{
+        header: style.header,
         scrollView: style.scrollView,
       }}
     >
-      {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
-
-      <Layout
-        fullWidth={!screen.L}
-        style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
-      >
-        <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
-          <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
-            <View style={!screen.L && style.mobileInfo}>
-              <Text level={3} style={style.title} heading>
-                {titleText}
-              </Text>
-              <Text level={3} style={style.description}>
-                {descriptionText}
-              </Text>
-            </View>
-
-            {children}
-          </View>
-        </Box>
-        {pricing && screen.L ? (
-          <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
-            <View style={style.princingWrapper}>
-              <CollapsiblePricing
-                collapsed={false}
-                collapsible={false}
-                pricing={pricing}
-                submitButtonText={submitButtonText}
-                totalCheckoutItemsKept={totalCheckoutItemsKept}
-                onSubmit={handleOnSubmit}
-              />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
+
+        <Layout
+          fullWidth={!screen.L}
+          style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
+        >
+          <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
+            <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
+              <View style={!screen.L && style.mobileInfo}>
+                <Text level={3} style={style.title} heading>
+                  {titleText}
+                </Text>
+                <Text level={3} style={style.description}>
+                  {descriptionText}
+                </Text>
+              </View>
+
+              {children}
             </View>
           </Box>
-        ) : null}
-      </Layout>
+
+          {pricing && screen.L ? (
+            <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
+              <View style={style.princingWrapper}>
+                <CollapsiblePricing
+                  collapsed={false}
+                  collapsible={false}
+                  pricing={pricing}
+                  submitButtonText={submitButtonText}
+                  totalCheckoutItemsKept={totalCheckoutItemsKept}
+                  onSubmit={handleOnSubmit}
+                />
+              </View>
+            </Box>
+          ) : null}
+        </Layout>
+      </ScrollView>
 
       {pricing && !screen.L ? (
         <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>