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

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,
+                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,10 @@
 declare const style: {
-    content: {
-        flex: number;
-    };
     fiveItemsDiscountPadding: {
         paddingTop: number;
     };
+    headerWithDoubleHeight: {
+        height: number;
+    };
     headerWrapper: {
         display: "flex";
         flexDirection: "column";

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

@@ -1,13 +1,14 @@
 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,
     },
+    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,21 @@ const Summary = ({ layout: LocalLayout, children }) => {
     if (!dependenciesLoaded) {
         return React.createElement(Spinner, null);
     }
-    return (React.createElement(LocalLayout, { style: {
+    return (React.createElement(LocalLayout, { scrollEnabled: false, style: {
             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

@@ -32,6 +32,7 @@ declare const style: {
     resume: any;
     scrollView: {
         backgroundColor: string;
+        flex: number;
     };
     sticky: {
         paddingBottom: number;

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

@@ -57,6 +57,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.3";

package/dist/src/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "6.5.0-beta.1",
+  "version": "6.5.0-beta.3",
   "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/item/Item.style.ts

@@ -1,15 +1,16 @@
 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,
   },
+  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,
+          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

@@ -72,6 +72,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,49 @@ const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
 
   return (
     <LocalLayout
+      scrollEnabled={false}
       style={{
         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}>