@lookiero/checkout 6.5.0-beta.3 → 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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/dist/src/version.js

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

package/package.json

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

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

@@ -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.tsx

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

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

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