npm - @lookiero/checkout - Versions diffs - 6.5.0-beta.3 → 6.5.0-beta.5 - Mend

@lookiero/checkout 6.5.0-beta.3 → 6.5.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

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

@@ -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,28 @@ 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: {
+            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 },
-                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 CHANGED Viewed

@@ -18,15 +18,26 @@ declare const style: {
     desktopResume: {
         borderRadius: number;
     };
+    header: {
+        height: number;
+    };
     paymentSelector: {
         marginTop: number;
     };
     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 CHANGED Viewed

@@ -1,6 +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();
+import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space3, space4, space6, space12, space16 } = theme();
 const style = StyleSheet.create({
     contentWrapper: {
         backgroundColor: colorBgBase,
@@ -21,19 +22,25 @@ const style = StyleSheet.create({
     desktopResume: {
         borderRadius: borderRadius4,
     },
+    header: {
+        height: HEADER_HEIGHT,
+    },
     paymentSelector: {
         marginTop: space6,
     },
     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 +48,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 CHANGED Viewed

@@ -170,7 +170,7 @@ const Item = ({ layout: Layout }) => {
     }
     return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
         React.createElement(Layout, { header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
-                header: fiveItemsDiscount !== 0 && style.headerWithDoubleHeight,
+                header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
                 scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
                 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 }))),

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

@@ -2,6 +2,9 @@ declare const style: {
     fiveItemsDiscountPadding: {
         paddingTop: number;
     };
+    header: {
+        height: number;
+    };
     headerWithDoubleHeight: {
         height: number;
     };

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

@@ -6,6 +6,9 @@ const style = StyleSheet.create({
     fiveItemsDiscountPadding: {
         paddingTop: space12,
     },
+    header: {
+        height: HEADER_HEIGHT,
+    },
     headerWithDoubleHeight: {
         height: HEADER_HEIGHT * 2,
     },

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

@@ -80,6 +80,7 @@ const Summary = ({ layout: LocalLayout, children }) => {
         return React.createElement(Spinner, null);
     }
     return (React.createElement(LocalLayout, { scrollEnabled: false, style: {
+            header: style.header,
             scrollView: style.scrollView,
         } },
         React.createElement(ScrollView, { showsVerticalScrollIndicator: false },

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

@@ -21,6 +21,9 @@ declare const style: {
     desktopResume: {
         borderRadius: number;
     };
+    header: {
+        height: number;
+    };
     mobileInfo: {
         paddingHorizontal: number;
         paddingTop: number;

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

@@ -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",
             },
         }),

package/dist/src/version.d.ts CHANGED Viewed

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

package/dist/src/version.js CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "6.5.0-beta.3",
+  "version": "6.5.0-beta.5",
   "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.8",
+    "@lookiero/sty-psp-notifications": "^0.5.8-beta.0",
     "@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.5",
+    "@lookiero/sty-psp-ui": "^0.5.5-beta.0",
     "@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/components/templates/header/__snapshots__/Header.test.tsx.snap CHANGED Viewed

@@ -38,6 +38,7 @@ exports[`Header template matches the snapshot 1`] = `
           "flexDirection": "row",
           "flexGrow": 0,
           "flexWrap": "nowrap",
+          "height": 48,
           "justifyContent": "space-between",
           "overflow": "visible",
           "paddingHorizontal": 8,

package/src/infrastructure/ui/components/templates/header/checkoutHeader/__snapshots__/CheckoutHeader.test.tsx.snap CHANGED Viewed

@@ -33,181 +33,172 @@ exports[`CheckoutHeader template matches the snapshot 1`] = `
     style={
       [
         {
+          "alignItems": "center",
+          "backgroundColor": "#FFFFFF",
+          "flexDirection": "row",
+          "flexGrow": 0,
+          "flexWrap": "nowrap",
+          "height": 48,
+          "justifyContent": "space-between",
+          "overflow": "visible",
+          "paddingHorizontal": 8,
           "width": "100%",
         },
+        undefined,
       ]
     }
+    testID="checkout-header"
   >
     <View
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
+          [
+            {
+              "_container": {
+                "overflow": "hidden",
+              },
+              "_pressed": {
+                "bottom": 0,
+                "left": 0,
+                "right": 0,
+                "top": 0,
+              },
+              "alignSelf": "auto",
+              "container": {
+                "overflow": "hidden",
+              },
+              "height": 40,
+              "overflow": "visible",
+              "padding": 8,
+              "pressed": {
+                "bottom": 0,
+                "left": 0,
+                "right": 0,
+                "top": 0,
+              },
+              "width": 40,
+            },
+          ],
           {
-            "alignItems": "center",
-            "backgroundColor": "#FFFFFF",
-            "flexDirection": "row",
-            "flexGrow": 0,
-            "flexWrap": "nowrap",
-            "justifyContent": "space-between",
-            "overflow": "visible",
-            "paddingHorizontal": 8,
-            "width": "100%",
+            "opacity": 1,
           },
-          undefined,
         ]
       }
-      testID="checkout-header"
+      testID="arrow-left-button-icon"
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
-          }
-        }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           [
-            [
-              {
-                "_container": {
-                  "overflow": "hidden",
-                },
-                "_pressed": {
-                  "bottom": 0,
-                  "left": 0,
-                  "right": 0,
-                  "top": 0,
-                },
-                "alignSelf": "flex-start",
-                "container": {
-                  "overflow": "hidden",
-                },
-                "height": 40,
-                "overflow": "visible",
-                "padding": 8,
-                "pressed": {
-                  "bottom": 0,
-                  "left": 0,
-                  "right": 0,
-                  "top": 0,
-                },
-                "width": 40,
-              },
-            ],
             {
-              "opacity": 1,
+              "position": "relative",
             },
           ]
         }
-        testID="arrow-left-button-icon"
       >
-        <View
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no"
+          selectable={false}
           style={
             [
               {
-                "position": "relative",
+                "color": "#0C0A0A",
+                "fontFamily": "auroraicons",
+                "fontSize": 24,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "height": 24,
+                "width": 24,
               },
             ]
           }
         >
-          <Text
-            accessibilityElementsHidden={true}
-            allowFontScaling={false}
-            importantForAccessibility="no"
-            selectable={false}
-            style={
-              [
+          
+        </Text>
+        <View
+          collapsable={false}
+          style={
+            {
+              "backgroundColor": "#F45545",
+              "borderColor": "#FFFFFF",
+              "borderRadius": 9999,
+              "borderWidth": 2,
+              "height": 10,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": [
                 {
-                  "color": "#0C0A0A",
-                  "fontFamily": "auroraicons",
-                  "fontSize": 24,
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                  "height": 24,
-                  "width": 24,
+                  "scale": 0,
                 },
-              ]
-            }
-          >
-            
-          </Text>
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "#F45545",
-                "borderColor": "#FFFFFF",
-                "borderRadius": 9999,
-                "borderWidth": 2,
-                "height": 10,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "scale": 0,
-                  },
-                ],
-                "width": 10,
-              }
+              ],
+              "width": 10,
             }
-          />
-        </View>
+          }
+        />
       </View>
-      <Text
-        allowFontScaling={false}
-        selectable={false}
-        style={
-          [
-            {
-              "color": "#0C0A0A",
-              "fontFamily": "AreaNormal-Extrabold",
-              "fontSize": 15,
-              "letterSpacing": -0.2,
-              "lineHeight": 20,
-              "paddingBottom": 0,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 2,
-            },
-          ]
-        }
-      >
-        header.complete_checkout_title
-      </Text>
-      <View
-        style={
+    </View>
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
           {
-            "flexGrow": 0,
-            "height": 40,
-            "width": 40,
-          }
+            "color": "#0C0A0A",
+            "fontFamily": "AreaNormal-Extrabold",
+            "fontSize": 15,
+            "letterSpacing": -0.2,
+            "lineHeight": 20,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 2,
+          },
+        ]
+      }
+    >
+      header.complete_checkout_title
+    </Text>
+    <View
+      style={
+        {
+          "flexGrow": 0,
+          "height": 40,
+          "width": 40,
         }
-      />
-    </View>
+      }
+    />
   </View>
 </View>
 `;

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

@@ -38,6 +38,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
           "flexDirection": "row",
           "flexGrow": 0,
           "flexWrap": "nowrap",
+          "height": 48,
           "justifyContent": "space-between",
           "overflow": "visible",
           "paddingHorizontal": 8,
@@ -122,10 +123,11 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              "alignSelf": "flex-start",
+              "alignSelf": "auto",
               "container": {
                 "overflow": "hidden",
               },
+              "height": 40,
               "overflow": "visible",
               "padding": 8,
               "pressed": {
@@ -134,6 +136,7 @@ exports[`ItemDetailHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
+              "width": 40,
             },
           ],
           {

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

@@ -38,6 +38,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
           "flexDirection": "row",
           "flexGrow": 0,
           "flexWrap": "nowrap",
+          "height": 48,
           "justifyContent": "space-between",
           "overflow": "visible",
           "paddingHorizontal": 8,
@@ -92,7 +93,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              "alignSelf": "flex-start",
+              "alignSelf": "auto",
               "container": {
                 "overflow": "hidden",
               },
@@ -233,7 +234,7 @@ exports[`ItemHeader template matches the snapshot 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              "alignSelf": "flex-start",
+              "alignSelf": "auto",
               "container": {
                 "overflow": "hidden",
               },

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

@@ -1,7 +1,8 @@
 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, space12, space16, space24 } = theme();
+const { borderRadius4, colorBgPrimaryLight, colorBgBase, space3, space4, space6, space12, space16 } = theme();
 const style = StyleSheet.create({
   contentWrapper: {
@@ -23,19 +24,25 @@ const style = StyleSheet.create({
   desktopResume: {
     borderRadius: borderRadius4,
   },
+  header: {
+    height: HEADER_HEIGHT,
+  },
   paymentSelector: {
     marginTop: space6,
   },
   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 +50,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.test.tsx CHANGED Viewed

@@ -2,13 +2,13 @@ import { fireEvent } from "@testing-library/react-native";
 import React from "react";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { pricing } from "../../../projection/pricing/pricing.mock";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { Routes } from "../../routing/routes";
 import { render } from "../../test/render";

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

@@ -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,75 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
   return (
     <LocalLayout
       header={<CheckoutHeader onBack={handleOnBack} />}
+      scrollEnabled={false}
       style={{
+        header: style.header,
         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/feedback/Feedback.test.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { fireEvent } from "@testing-library/react-native";
 import React from "react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
@@ -9,7 +10,6 @@ import { checkout } from "../../../projection/checkout/checkout.mock";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
 import { checkoutQuestions as checkoutQuestionsMock } from "../../../projection/checkoutQuestion/checkoutQuestions.mock";
 import { useListCheckoutQuestionsByCheckoutId } from "../../../projection/checkoutQuestion/react/useListCheckoutQuestionsByCheckoutId";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { render } from "../../test/render";
 import { Feedback } from "./Feedback";

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

@@ -8,6 +8,9 @@ const style = StyleSheet.create({
   fiveItemsDiscountPadding: {
     paddingTop: space12,
   },
+  header: {
+    height: HEADER_HEIGHT,
+  },
   headerWithDoubleHeight: {
     height: HEADER_HEIGHT * 2,
   },

package/src/infrastructure/ui/views/item/Item.test.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { fireEvent, RenderAPI, waitFor, screen, within } from "@testing-library/
 import React from "react";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { useBookCheckoutBookingForCheckoutItem } from "../../../domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem";
@@ -18,7 +19,6 @@ import { useViewIsSizeChangeEnabledByCheckoutId } from "../../../projection/chec
 import { useListReturnQuestionsByCheckoutItemId } from "../../../projection/returnQuestion/react/useListReturnQuestionsByCheckoutItemId";
 import { returnQuestions as mockReturnQuestions } from "../../../projection/returnQuestion/returnQuestions.mock";
 import { useTrackItemPageView } from "../../../tracking/useTrackItemPageView";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { render } from "../../test/render";
 import { Item } from "./Item";

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

@@ -255,7 +255,7 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
         header={header}
         scrollEnabled={!itemWithoutCustomerDecission}
         style={{
-          header: fiveItemsDiscount !== 0 && style.headerWithDoubleHeight,
+          header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
           scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
           safeAreaView: isDesktopScreen ? style.safeAreaView : null,
         }}

package/src/infrastructure/ui/views/shared/components/productVariant/__snapshots__/ProductVariant.test.tsx.snap CHANGED Viewed

@@ -63,7 +63,7 @@ exports[`ProductVariant component matches the snapshot for a non-unique size: no
     style={
       {
         "alignItems": "flex-end",
-        "borderBottomColor": "#DAD8D8",
+        "borderBottomColor": "#F8F7F7",
         "borderBottomWidth": 1,
         "flexDirection": "row",
         "justifyContent": "space-between",
@@ -306,7 +306,7 @@ exports[`ProductVariant component matches the snapshot for an unique size: uniqu
     style={
       {
         "alignItems": "flex-end",
-        "borderBottomColor": "#DAD8D8",
+        "borderBottomColor": "#F8F7F7",
         "borderBottomWidth": 1,
         "flexDirection": "row",
         "justifyContent": "space-between",

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

@@ -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",
       },
     }),

package/src/infrastructure/ui/views/summary/Summary.test.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import React from "react";
 import { Text } from "react-native";
 import { QueryStatus } from "@lookiero/messaging-react";
 import { Segment } from "@lookiero/sty-psp-segment";
+import { DummyLayout } from "@lookiero/sty-psp-ui";
 import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
 import { Country } from "../../../../projection/shared/country";
 import { checkout } from "../../../projection/checkout/checkout.mock";
@@ -10,7 +11,6 @@ import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/c
 import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
 import { pricing } from "../../../projection/pricing/pricing.mock";
 import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
-import { DummyLayout } from "../../components/layouts/layout/dummyLayout/DummyLayout";
 import { I18nMessages } from "../../i18n/i18n";
 import { render } from "../../test/render";
 import { Summary } from "./Summary";

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

@@ -113,6 +113,7 @@ const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
     <LocalLayout
       scrollEnabled={false}
       style={{
+        header: style.header,
         scrollView: style.scrollView,
       }}
     >

package/src/infrastructure/ui/views/summary/components/collapsiblePricing/CollapsiblePricing.test.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { PricingProjection } from "../../../../../../projection/pricing/pricing"
 import { pricing as pricingFunction } from "../../../../../projection/pricing/pricing.mock";
 import { I18nMessages } from "../../../../i18n/i18n";
 import { render } from "../../../../test/render";
-import { Pricing } from "./CollapsiblePricing";
+import { CollapsiblePricing } from "./CollapsiblePricing";
 const mockOnPress = jest.fn();
 const mockOnSubmit = jest.fn();
@@ -25,7 +25,7 @@ const renderPricing: RenderPricingFunction = ({
   pricing = pricingFunction(),
 } = {}) =>
   render(
-    <Pricing
+    <CollapsiblePricing
       collapsed={collapsed}
       collapsible={collapsible}
       pricing={pricing}

package/src/infrastructure/ui/views/summaryTabs/components/checkoutItemsTabs/__snapshots__/CheckoutItemsTabs.test.tsx.snap CHANGED Viewed

@@ -51,10 +51,15 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
             "paddingHorizontal": 24,
           },
           false,
-          {
-            "borderBottomColor": "#DAD8D8",
-            "borderBottomWidth": 1,
-          },
+          [
+            {
+              "borderBottomColor": "#DAD8D8",
+              "borderBottomWidth": 1,
+              "justifyContent": "flex-start",
+              "paddingHorizontal": 16,
+            },
+            false,
+          ],
         ]
       }
       testID="tab-list"
@@ -109,9 +114,9 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
               {
                 "color": "#0C0A0A",
                 "fontFamily": "AreaNormal-Extrabold",
-                "fontSize": 12,
+                "fontSize": 13,
                 "letterSpacing": -0.2,
-                "lineHeight": 16,
+                "lineHeight": 17,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -173,9 +178,9 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
               {
                 "color": "#837C7C",
                 "fontFamily": "AreaNormal-Extrabold",
-                "fontSize": 12,
+                "fontSize": 13,
                 "letterSpacing": -0.2,
-                "lineHeight": 16,
+                "lineHeight": 17,
                 "paddingBottom": 0,
                 "paddingLeft": 0,
                 "paddingRight": 0,
@@ -211,7 +216,8 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
       style={
         {
           "opacity": 0,
-          "padding": 24,
+          "paddingBottom": 24,
+          "paddingHorizontal": 24,
           "paddingTop": 8,
         }
       }
@@ -342,7 +348,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",
@@ -557,7 +563,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",
@@ -821,7 +827,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",
@@ -1036,7 +1042,7 @@ exports[`CheckoutItemTabs component matches the snapshot 1`] = `
                         style={
                           {
                             "alignItems": "flex-end",
-                            "borderBottomColor": "#DAD8D8",
+                            "borderBottomColor": "#F8F7F7",
                             "borderBottomWidth": 1,
                             "flexDirection": "row",
                             "justifyContent": "space-between",

/package/src/infrastructure/ui/views/summary/components/collapsiblePricing/__snapshots__/{Pricing.test.tsx.snap → CollapsiblePricing.test.tsx.snap} RENAMED Viewed

File without changes