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

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 (23) hide show
  1. package/dist/src/infrastructure/ui/views/checkout/Checkout.js +25 -17
  2. package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts +8 -0
  3. package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js +10 -2
  4. package/dist/src/infrastructure/ui/views/item/Item.js +4 -4
  5. package/dist/src/infrastructure/ui/views/item/Item.style.d.ts +6 -3
  6. package/dist/src/infrastructure/ui/views/item/Item.style.js +7 -3
  7. package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js +4 -3
  8. package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.d.ts +0 -1
  9. package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js +1 -1
  10. package/dist/src/infrastructure/ui/views/summary/Summary.js +15 -13
  11. package/dist/src/infrastructure/ui/views/summary/Summary.style.d.ts +4 -0
  12. package/dist/src/infrastructure/ui/views/summary/Summary.style.js +7 -2
  13. package/dist/src/version.d.ts +1 -1
  14. package/dist/src/version.js +1 -1
  15. package/package.json +3 -3
  16. package/src/infrastructure/ui/views/checkout/Checkout.style.ts +10 -2
  17. package/src/infrastructure/ui/views/checkout/Checkout.tsx +68 -45
  18. package/src/infrastructure/ui/views/item/Item.style.ts +7 -3
  19. package/src/infrastructure/ui/views/item/Item.tsx +20 -20
  20. package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.ts +1 -1
  21. package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx +13 -11
  22. package/src/infrastructure/ui/views/summary/Summary.style.ts +6 -2
  23. package/src/infrastructure/ui/views/summary/Summary.tsx +39 -34
package/dist/src/infrastructure/ui/views/checkout/Checkout.js CHANGED
@@ -1,9 +1,10 @@
1
- import React, { useCallback, useMemo } from "react";
2
- import { View } from "react-native";
1
+ import React, { useCallback, useMemo, useState } from "react";
2
+ import { Platform, ScrollView, View } from "react-native";
3
3
  import { useNavigate } from "react-router-native";
4
4
  import { Box, Button, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
5
5
  import { useI18nMessage } from "@lookiero/i18n-react";
6
6
  import { QueryStatus } from "@lookiero/messaging-react";
7
+ import { Sticky } from "@lookiero/sty-psp-ui";
7
8
  import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
8
9
  import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
9
10
  import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -11,6 +12,7 @@ import { TrackingPage } from "../../../tracking/tracking";
11
12
  import { useTrackPageView } from "../../../tracking/useTrackPageView";
12
13
  import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
13
14
  import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
15
+ import { Body } from "../../components/layouts/body/Body";
14
16
  import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
15
17
  import { useStaticInfo } from "../../hooks/useStaticInfo";
16
18
  import { I18nMessages } from "../../i18n/i18n";
@@ -26,6 +28,8 @@ const Checkout = ({ children, layout: LocalLayout, useRedirect }) => {
26
28
  const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
27
29
  const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
28
30
  const { screen } = useDevice();
31
+ const [pricingHeight, setPricingHeight] = useState(0);
32
+ const handleOnPricingLayout = useCallback(({ height }) => setPricingHeight(height), []);
29
33
  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
30
34
  const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
31
35
  useTrackPageView({
@@ -64,23 +68,27 @@ const Checkout = ({ children, layout: LocalLayout, useRedirect }) => {
64
68
  if (!dependenciesLoaded) {
65
69
  return React.createElement(Spinner, null);
66
70
  }
67
- return (React.createElement(LocalLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), style: {
71
+ return (React.createElement(LocalLayout, { header: React.createElement(CheckoutHeader, { onBack: handleOnBack }), scrollEnabled: false, style: {
68
72
  scrollView: style.scrollView,
69
73
  } },
70
- hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
71
- React.createElement(Layout, { fullWidth: !screen.L, style: screen.L && style.desktopLayoutSpacing },
72
- React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
73
- React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
74
- React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
75
- checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
76
- 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
77
- ? checkoutItem.replacedFor.size
78
- : checkoutItem.productVariant.size })))),
79
- React.createElement(View, { style: style.paymentSelector },
80
- React.createElement(PaymentInstrument, { useRedirect: useRedirect })))),
81
- React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L && style.desktopResume] }, pricing ? (React.createElement(View, { style: style.princingWrapper },
82
- React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
83
- React.createElement(Button, { testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText))) : null)),
74
+ React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
75
+ hasReplacedCheckoutItem && React.createElement(DeliveryBanner, null),
76
+ React.createElement(Layout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
77
+ React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
78
+ React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
79
+ React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
80
+ checkoutItemsKept?.map((checkoutItem) => (React.createElement(View, { key: checkoutItem.id, testID: "checkout-items-kept" },
81
+ 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
82
+ ? checkoutItem.replacedFor.size
83
+ : checkoutItem.productVariant.size })))),
84
+ React.createElement(View, { style: style.paymentSelector },
85
+ React.createElement(PaymentInstrument, { useRedirect: useRedirect })))),
86
+ 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] },
87
+ React.createElement(Pricing, { pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0 }),
88
+ screen.L ? (React.createElement(Button, { testID: "confirm-checkout-button", onPress: handleOnSubmit }, submitButtonText)) : null)) : null))),
89
+ pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
90
+ React.createElement(Body, null,
91
+ React.createElement(Button, { testID: "confirm-checkout-button", small: true, onPress: handleOnSubmit }, submitButtonText)))) : null,
84
92
  children));
85
93
  };
86
94
  export { Checkout };
package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts CHANGED
@@ -24,9 +24,17 @@ declare const style: {
24
24
  princingWrapper: {
25
25
  padding: number;
26
26
  };
27
+ princingWrapperSmall: {
28
+ backgroundColor: string;
29
+ };
27
30
  resume: any;
28
31
  scrollView: {
29
32
  backgroundColor: string;
33
+ flex: number;
34
+ };
35
+ sticky: {
36
+ paddingBottom: number;
37
+ paddingTop: number;
30
38
  };
31
39
  title: {
32
40
  marginBottom: number;
package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { StyleSheet, Platform } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
- const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space12, space16, space24 } = theme();
3
+ const { borderRadius4, colorBgPrimaryLight, colorBgBase, space3, space4, space6, space12, space16 } = theme();
4
4
  const style = StyleSheet.create({
5
5
  contentWrapper: {
6
6
  backgroundColor: colorBgBase,
@@ -27,13 +27,16 @@ const style = StyleSheet.create({
27
27
  princingWrapper: {
28
28
  padding: space6,
29
29
  },
30
+ princingWrapperSmall: {
31
+ backgroundColor: colorBgPrimaryLight,
32
+ },
30
33
  resume: {
31
34
  overflow: "hidden",
32
35
  backgroundColor: colorBgBase,
33
36
  ...Platform.select({
34
37
  web: {
35
38
  position: "sticky",
36
- top: space24,
39
+ top: space12,
37
40
  alignSelf: "flex-start",
38
41
  },
39
42
  }),
@@ -41,6 +44,11 @@ const style = StyleSheet.create({
41
44
  },
42
45
  scrollView: {
43
46
  backgroundColor: colorBgPrimaryLight,
47
+ flex: 1,
48
+ },
49
+ sticky: {
50
+ paddingBottom: space4,
51
+ paddingTop: space3,
44
52
  },
45
53
  title: {
46
54
  marginBottom: space4,
package/dist/src/infrastructure/ui/views/item/Item.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
2
- import { View } from "react-native";
3
2
  import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
4
3
  import { Box, Spinner } from "@lookiero/aurora";
5
4
  import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
@@ -170,10 +169,11 @@ const Item = ({ layout: Layout }) => {
170
169
  return React.createElement(Spinner, { testID: "spinner" });
171
170
  }
172
171
  return (React.createElement(ReturnQuestionFeedbackProvider, { key: checkoutItem.id, feedback: checkoutItem.feedbacks || {} },
173
- React.createElement(Layout, { header: header, style: {
172
+ React.createElement(Layout, { header: header, scrollEnabled: !itemWithoutCustomerDecission, style: {
173
+ header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
174
+ scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
174
175
  safeAreaView: isDesktopScreen ? style.safeAreaView : null,
175
- } },
176
- 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 })))),
176
+ } }, 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 }))),
177
177
  !redirectToReturnPage ? (React.createElement(ReturnQuestionsForm, { returnQuestions: returnQuestions, visible: returnQuestionsVisible, onClose: hideReturnQuestions, onSubmit: returnItem })) : null));
178
178
  };
179
179
  export { Item };
package/dist/src/infrastructure/ui/views/item/Item.style.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  declare const style: {
2
- content: {
3
- flex: number;
4
- };
5
2
  fiveItemsDiscountPadding: {
6
3
  paddingTop: number;
7
4
  };
5
+ header: {
6
+ height: number;
7
+ };
8
+ headerWithDoubleHeight: {
9
+ height: number;
10
+ };
8
11
  headerWrapper: {
9
12
  display: "flex";
10
13
  flexDirection: "column";
package/dist/src/infrastructure/ui/views/item/Item.style.js CHANGED
@@ -1,13 +1,17 @@
1
1
  import { StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
+ import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
3
4
  const { colorBgPrimaryLight, space12 } = theme();
4
5
  const style = StyleSheet.create({
5
- content: {
6
- flex: 1,
7
- },
8
6
  fiveItemsDiscountPadding: {
9
7
  paddingTop: space12,
10
8
  },
9
+ header: {
10
+ height: HEADER_HEIGHT,
11
+ },
12
+ headerWithDoubleHeight: {
13
+ height: HEADER_HEIGHT * 2,
14
+ },
11
15
  headerWrapper: {
12
16
  display: "flex",
13
17
  flexDirection: "column",
package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useState } from "react";
2
- import { Platform } from "react-native";
2
+ import { Platform, ScrollView } from "react-native";
3
3
  import { Spinner } from "@lookiero/aurora";
4
4
  import { CommandStatus } from "@lookiero/messaging-react";
5
5
  import { useLogger } from "@lookiero/sty-psp-logging";
@@ -63,8 +63,9 @@ const ItemWithoutCustomerDecission = ({ checkoutId, checkoutItem, bookedProducts
63
63
  }
64
64
  return (React.createElement(React.Fragment, null,
65
65
  React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
66
- React.createElement(Body, { style: { row: style.container } },
67
- React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } })),
66
+ React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
67
+ React.createElement(Body, { style: { row: style.container } },
68
+ React.createElement(ProductVariant, { checkoutId: checkoutId, checkoutItem: checkoutItem, country: country, currentProductVariant: currentProductVariant, segment: segment, style: { content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } } }))),
68
69
  React.createElement(ItemActions, { country: country, currentProductVariant: currentProductVariant, productVariants: bookedProductsVariants?.productVariants, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: onReturn, onShowSizeWithoutStockModal: handleOnShowSizeWithoutStockModal })));
69
70
  };
70
71
  export { ItemWithoutCustomerDecission };
package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  declare const style: {
2
2
  container: {
3
- justifyContent: "flex-start";
4
3
  paddingBottom: number;
5
4
  paddingHorizontal: number;
6
5
  };
package/dist/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.js CHANGED
@@ -3,7 +3,7 @@ import { theme } from "@lookiero/sty-psp-ui";
3
3
  const { space10 } = theme();
4
4
  const style = StyleSheet.create({
5
5
  container: {
6
- justifyContent: "flex-start",
6
+ // justifyContent: "flex-start",
7
7
  paddingBottom: space10,
8
8
  paddingHorizontal: 0,
9
9
  },
package/dist/src/infrastructure/ui/views/summary/Summary.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { useCallback, useEffect, useMemo, useState } from "react";
2
- import { Platform, View } from "react-native";
2
+ import { Platform, ScrollView, View } from "react-native";
3
3
  import { generatePath, useMatch, useNavigate } from "react-router-native";
4
4
  import { Box, Text, Layout, useDevice, Spinner } from "@lookiero/aurora";
5
5
  import { useI18nMessage } from "@lookiero/i18n-react";
@@ -79,20 +79,22 @@ const Summary = ({ layout: LocalLayout, children }) => {
79
79
  if (!dependenciesLoaded) {
80
80
  return React.createElement(Spinner, null);
81
81
  }
82
- return (React.createElement(LocalLayout, { style: {
82
+ return (React.createElement(LocalLayout, { scrollEnabled: false, style: {
83
+ header: style.header,
83
84
  scrollView: style.scrollView,
84
85
  } },
85
- fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
86
- React.createElement(Layout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
87
- React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
88
- React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
89
- React.createElement(View, { style: !screen.L && style.mobileInfo },
90
- React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
91
- React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
92
- children)),
93
- pricing && screen.L ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : style.mobileResume] },
94
- React.createElement(View, { style: style.princingWrapper },
95
- React.createElement(CollapsiblePricing, { collapsed: false, collapsible: false, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onSubmit: handleOnSubmit })))) : null),
86
+ React.createElement(ScrollView, { showsVerticalScrollIndicator: false },
87
+ fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
88
+ React.createElement(Layout, { fullWidth: !screen.L, style: [screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }] },
89
+ React.createElement(Box, { size: { L: "2/3" }, style: screen.L && style.desktopListSpacing },
90
+ React.createElement(View, { style: [style.contentWrapper, screen.L && style.desktopContentWrapper] },
91
+ React.createElement(View, { style: !screen.L && style.mobileInfo },
92
+ React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
93
+ React.createElement(Text, { level: 3, style: style.description }, descriptionText)),
94
+ children)),
95
+ pricing && screen.L ? (React.createElement(Box, { size: { L: "1/3" }, style: [style.resume, screen.L ? style.desktopResume : style.mobileResume] },
96
+ React.createElement(View, { style: style.princingWrapper },
97
+ React.createElement(CollapsiblePricing, { collapsed: false, collapsible: false, pricing: pricing, submitButtonText: submitButtonText, totalCheckoutItemsKept: totalCheckoutItemsKept, onSubmit: handleOnSubmit })))) : null)),
96
98
  pricing && !screen.L ? (React.createElement(Sticky, { style: style.sticky, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined },
97
99
  React.createElement(Body, null,
98
100
  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 CHANGED
@@ -21,6 +21,9 @@ declare const style: {
21
21
  desktopResume: {
22
22
  borderRadius: number;
23
23
  };
24
+ header: {
25
+ height: number;
26
+ };
24
27
  mobileInfo: {
25
28
  paddingHorizontal: number;
26
29
  paddingTop: number;
@@ -32,6 +35,7 @@ declare const style: {
32
35
  resume: any;
33
36
  scrollView: {
34
37
  backgroundColor: string;
38
+ flex: number;
35
39
  };
36
40
  sticky: {
37
41
  paddingBottom: number;
package/dist/src/infrastructure/ui/views/summary/Summary.style.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Platform, StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
- const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space3, space4, space6, space12, space16, space24, borderRadius4, colorBgBase, } = theme();
3
+ import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
4
+ const { colorTextMedium, colorText, colorBgPrimaryLight, space2, space3, space4, space6, space12, space16, borderRadius4, colorBgBase, } = theme();
4
5
  const style = StyleSheet.create({
5
6
  contentWrapper: {
6
7
  backgroundColor: colorBgBase,
@@ -24,6 +25,9 @@ const style = StyleSheet.create({
24
25
  desktopResume: {
25
26
  borderRadius: borderRadius4,
26
27
  },
28
+ header: {
29
+ height: HEADER_HEIGHT,
30
+ },
27
31
  mobileInfo: {
28
32
  paddingHorizontal: space6,
29
33
  paddingTop: space6,
@@ -49,7 +53,7 @@ const style = StyleSheet.create({
49
53
  ...Platform.select({
50
54
  web: {
51
55
  position: "sticky",
52
- top: space24,
56
+ top: space12,
53
57
  alignSelf: "flex-start",
54
58
  },
55
59
  }),
@@ -57,6 +61,7 @@ const style = StyleSheet.create({
57
61
  },
58
62
  scrollView: {
59
63
  backgroundColor: colorBgPrimaryLight,
64
+ flex: 1,
60
65
  },
61
66
  sticky: {
62
67
  paddingBottom: space4,
package/dist/src/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const VERSION = "6.5.0-beta.1";
1
+ export declare const VERSION = "6.5.0-beta.4";
package/dist/src/version.js CHANGED
@@ -1 +1 @@
1
- export const VERSION = "6.5.0-beta.1";
1
+ export const VERSION = "6.5.0-beta.4";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "6.5.0-beta.1",
3
+ "version": "6.5.0-beta.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": "false",
@@ -21,12 +21,12 @@
21
21
  "@lookiero/sty-psp-i18n": "^0.1.7",
22
22
  "@lookiero/sty-psp-locale": "^0.2.1",
23
23
  "@lookiero/sty-psp-logging": "^0.2.2",
24
- "@lookiero/sty-psp-notifications": "^0.5.7",
24
+ "@lookiero/sty-psp-notifications": "^0.5.8",
25
25
  "@lookiero/sty-psp-react-native": "^0.2.0",
26
26
  "@lookiero/sty-psp-segment": "^0.1.1",
27
27
  "@lookiero/sty-psp-storage": "^0.1.3",
28
28
  "@lookiero/sty-psp-tracking": "^0.1.6",
29
- "@lookiero/sty-psp-ui": "^0.5.4",
29
+ "@lookiero/sty-psp-ui": "^0.5.5",
30
30
  "@lookiero/sty-psp-ui-settings": "^0.1.1",
31
31
  "@lookiero/sty-psp-units": "^0.1.1",
32
32
  "@lookiero/sty-psp-uuid": "^0.1.0",
package/src/infrastructure/ui/views/checkout/Checkout.style.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { StyleSheet, Platform } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
3
 
4
- const { borderRadius4, colorBgPrimaryLight, colorBgBase, space4, space6, space12, space16, space24 } = theme();
4
+ const { borderRadius4, colorBgPrimaryLight, colorBgBase, space3, space4, space6, space12, space16 } = theme();
5
5
 
6
6
  const style = StyleSheet.create({
7
7
  contentWrapper: {
@@ -29,13 +29,16 @@ const style = StyleSheet.create({
29
29
  princingWrapper: {
30
30
  padding: space6,
31
31
  },
32
+ princingWrapperSmall: {
33
+ backgroundColor: colorBgPrimaryLight,
34
+ },
32
35
  resume: {
33
36
  overflow: "hidden",
34
37
  backgroundColor: colorBgBase,
35
38
  ...Platform.select({
36
39
  web: {
37
40
  position: "sticky",
38
- top: space24,
41
+ top: space12,
39
42
  alignSelf: "flex-start",
40
43
  },
41
44
  }),
@@ -43,6 +46,11 @@ const style = StyleSheet.create({
43
46
  } as any,
44
47
  scrollView: {
45
48
  backgroundColor: colorBgPrimaryLight,
49
+ flex: 1,
50
+ },
51
+ sticky: {
52
+ paddingBottom: space4,
53
+ paddingTop: space3,
46
54
  },
47
55
  title: {
48
56
  marginBottom: space4,
package/src/infrastructure/ui/views/checkout/Checkout.tsx CHANGED
@@ -1,10 +1,10 @@
1
- import React, { FC, ReactNode, useCallback, useMemo } from "react";
2
- import { View } from "react-native";
1
+ import React, { FC, ReactNode, useCallback, useMemo, useState } from "react";
2
+ import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
3
3
  import { useNavigate } from "react-router-native";
4
4
  import { Box, Button, Layout, Spinner, Text, useDevice } from "@lookiero/aurora";
5
5
  import { useI18nMessage } from "@lookiero/i18n-react";
6
6
  import { QueryStatus } from "@lookiero/messaging-react";
7
- import { Layout as LocalLayout } from "@lookiero/sty-psp-ui";
7
+ import { Layout as LocalLayout, Sticky } from "@lookiero/sty-psp-ui";
8
8
  import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
9
9
  import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
10
10
  import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
@@ -12,6 +12,7 @@ import { TrackingPage } from "../../../tracking/tracking";
12
12
  import { useTrackPageView } from "../../../tracking/useTrackPageView";
13
13
  import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
14
14
  import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
15
+ import { Body } from "../../components/layouts/body/Body";
15
16
  import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
16
17
  import { useStaticInfo } from "../../hooks/useStaticInfo";
17
18
  import { I18nMessages } from "../../i18n/i18n";
@@ -36,6 +37,8 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
36
37
  const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_TITLE });
37
38
  const submitButtonText = useI18nMessage({ id: I18nMessages.CHECKOUT_PAY_BUTTON });
38
39
  const { screen } = useDevice();
40
+ const [pricingHeight, setPricingHeight] = useState(0);
41
+ const handleOnPricingLayout = useCallback(({ height }: LayoutRectangle) => setPricingHeight(height), []);
39
42
 
40
43
  const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
41
44
  const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id as string });
@@ -98,54 +101,74 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: LocalLayout, useRedirec
98
101
  return (
99
102
  <LocalLayout
100
103
  header={<CheckoutHeader onBack={handleOnBack} />}
104
+ scrollEnabled={false}
101
105
  style={{
102
106
  scrollView: style.scrollView,
103
107
  }}
104
108
  >
105
- {hasReplacedCheckoutItem && <DeliveryBanner />}
106
- <Layout fullWidth={!screen.L} style={screen.L && style.desktopLayoutSpacing}>
107
- <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
108
- <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
109
- <Text level={3} style={style.title} heading>
110
- {titleText}
111
- </Text>
112
-
113
- {checkoutItemsKept?.map((checkoutItem) => (
114
- <View key={checkoutItem.id} testID="checkout-items-kept">
115
- <ProductVariant
116
- brand={checkoutItem.productVariant.brand}
117
- color={checkoutItem.productVariant.color}
118
- country={country}
119
- media={checkoutItem.productVariant.media}
120
- name={checkoutItem.productVariant.name}
121
- price={checkoutItem.price}
122
- status={checkoutItem.status}
123
- size={
124
- checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
125
- ? checkoutItem.replacedFor.size
126
- : checkoutItem.productVariant.size
127
- }
128
- />
109
+ <ScrollView showsVerticalScrollIndicator={false}>
110
+ {hasReplacedCheckoutItem && <DeliveryBanner />}
111
+
112
+ <Layout
113
+ fullWidth={!screen.L}
114
+ style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
115
+ >
116
+ <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
117
+ <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
118
+ <Text level={3} style={style.title} heading>
119
+ {titleText}
120
+ </Text>
121
+
122
+ {checkoutItemsKept?.map((checkoutItem) => (
123
+ <View key={checkoutItem.id} testID="checkout-items-kept">
124
+ <ProductVariant
125
+ brand={checkoutItem.productVariant.brand}
126
+ color={checkoutItem.productVariant.color}
127
+ country={country}
128
+ media={checkoutItem.productVariant.media}
129
+ name={checkoutItem.productVariant.name}
130
+ price={checkoutItem.price}
131
+ status={checkoutItem.status}
132
+ size={
133
+ checkoutItem.status === CheckoutItemStatus.REPLACED && checkoutItem.replacedFor
134
+ ? checkoutItem.replacedFor.size
135
+ : checkoutItem.productVariant.size
136
+ }
137
+ />
138
+ </View>
139
+ ))}
140
+
141
+ <View style={style.paymentSelector}>
142
+ <PaymentInstrument useRedirect={useRedirect} />
129
143
  </View>
130
- ))}
131
-
132
- <View style={style.paymentSelector}>
133
- <PaymentInstrument useRedirect={useRedirect} />
134
- </View>
135
- </View>
136
- </Box>
137
-
138
- <Box size={{ L: "1/3" }} style={[style.resume, screen.L && style.desktopResume]}>
139
- {pricing ? (
140
- <View style={style.princingWrapper}>
141
- <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
142
- <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
143
- {submitButtonText}
144
- </Button>
145
144
  </View>
146
- ) : null}
147
- </Box>
148
- </Layout>
145
+ </Box>
146
+
147
+ <Box size={{ L: "1/3" }} style={[style.resume, screen.L && style.desktopResume]}>
148
+ {pricing ? (
149
+ <View style={[style.princingWrapper, !screen.L && style.princingWrapperSmall]}>
150
+ <Pricing pricing={pricing} totalCheckoutItemsKept={checkoutItemsKept?.length || 0} />
151
+
152
+ {screen.L ? (
153
+ <Button testID="confirm-checkout-button" onPress={handleOnSubmit}>
154
+ {submitButtonText}
155
+ </Button>
156
+ ) : null}
157
+ </View>
158
+ ) : null}
159
+ </Box>
160
+ </Layout>
161
+ </ScrollView>
162
+
163
+ {pricing && !screen.L ? (
164
+ <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>
165
+ <Body>
166
+ <Button testID="confirm-checkout-button" small onPress={handleOnSubmit}>
167
+ {submitButtonText}
168
+ </Button>
169
+ </Body>
170
+ </Sticky>
171
+ ) : null}
149
172
 
150
173
  {children}
151
174
  </LocalLayout>
package/src/infrastructure/ui/views/item/Item.style.ts CHANGED
@@ -1,15 +1,19 @@
1
1
  import { StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
+ import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
3
4
 
4
5
  const { colorBgPrimaryLight, space12 } = theme();
5
6
 
6
7
  const style = StyleSheet.create({
7
- content: {
8
- flex: 1,
9
- },
10
8
  fiveItemsDiscountPadding: {
11
9
  paddingTop: space12,
12
10
  },
11
+ header: {
12
+ height: HEADER_HEIGHT,
13
+ },
14
+ headerWithDoubleHeight: {
15
+ height: HEADER_HEIGHT * 2,
16
+ },
13
17
  headerWrapper: {
14
18
  display: "flex",
15
19
  flexDirection: "column",
package/src/infrastructure/ui/views/item/Item.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
2
- import { View } from "react-native";
3
2
  import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
4
3
  import { Box, Spinner } from "@lookiero/aurora";
5
4
  import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
@@ -254,29 +253,30 @@ const Item: FC<ItemProps> = ({ layout: Layout }) => {
254
253
  <ReturnQuestionFeedbackProvider key={checkoutItem.id} feedback={checkoutItem.feedbacks || {}}>
255
254
  <Layout
256
255
  header={header}
256
+ scrollEnabled={!itemWithoutCustomerDecission}
257
257
  style={{
258
+ header: fiveItemsDiscount !== 0 ? style.headerWithDoubleHeight : style.header,
259
+ scrollView: { height: itemWithoutCustomerDecission ? "100%" : "auto" },
258
260
  safeAreaView: isDesktopScreen ? style.safeAreaView : null,
259
261
  }}
260
262
  >
261
- <View style={[style.content, fiveItemsDiscount !== 0 && style.fiveItemsDiscountPadding]}>
262
- {itemWithoutCustomerDecission ? (
263
- <ItemWithoutCustomerDecission
264
- bookedProductsVariants={bookedProductsVariants as BookedProductsVariantsProjection}
265
- checkoutId={checkout.id}
266
- checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
267
- currentProductVariant={currentProductVariant}
268
- onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
269
- />
270
- ) : (
271
- <ItemWithCustomerDecission
272
- checkoutId={checkout.id}
273
- checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
274
- currentProductVariant={currentProductVariant}
275
- returnQuestions={returnQuestions}
276
- onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
277
- />
278
- )}
279
- </View>
263
+ {itemWithoutCustomerDecission ? (
264
+ <ItemWithoutCustomerDecission
265
+ bookedProductsVariants={bookedProductsVariants as BookedProductsVariantsProjection}
266
+ checkoutId={checkout.id}
267
+ checkoutItem={checkoutItem as CheckoutItemWithoutCustomerDecission}
268
+ currentProductVariant={currentProductVariant}
269
+ onReturn={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
270
+ />
271
+ ) : (
272
+ <ItemWithCustomerDecission
273
+ checkoutId={checkout.id}
274
+ checkoutItem={checkoutItem as CheckoutItemWithCustomerDecission}
275
+ currentProductVariant={currentProductVariant}
276
+ returnQuestions={returnQuestions}
277
+ onEditFeedback={redirectToReturnPage ? goToReturnPage : showReturnQuestions}
278
+ />
279
+ )}
280
280
  </Layout>
281
281
 
282
282
  {!redirectToReturnPage ? (
package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.style.ts CHANGED
@@ -5,7 +5,7 @@ const { space10 } = theme();
5
5
 
6
6
  const style = StyleSheet.create({
7
7
  container: {
8
- justifyContent: "flex-start",
8
+ // justifyContent: "flex-start",
9
9
  paddingBottom: space10,
10
10
  paddingHorizontal: 0,
11
11
  },
package/src/infrastructure/ui/views/item/views/itemWithoutCustomerDecission/ItemWithoutCustomerDecission.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { FC, useCallback, useState } from "react";
2
- import { LayoutRectangle, Platform } from "react-native";
2
+ import { LayoutRectangle, Platform, ScrollView } from "react-native";
3
3
  import { Spinner } from "@lookiero/aurora";
4
4
  import { CommandStatus } from "@lookiero/messaging-react";
5
5
  import { useLogger } from "@lookiero/sty-psp-logging";
@@ -104,16 +104,18 @@ const ItemWithoutCustomerDecission: FC<ItemWithoutCustomerDecissionProps> = ({
104
104
  <>
105
105
  <SizeWithoutStockModal visible={sizeWithoutStockModalVisible} onDismiss={handleOnHideSizeWithoutStockModal} />
106
106
 
107
- <Body style={{ row: style.container }}>
108
- <ProductVariant
109
- checkoutId={checkoutId}
110
- checkoutItem={checkoutItem}
111
- country={country}
112
- currentProductVariant={currentProductVariant}
113
- segment={segment}
114
- style={{ content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } }}
115
- />
116
- </Body>
107
+ <ScrollView showsVerticalScrollIndicator={false}>
108
+ <Body style={{ row: style.container }}>
109
+ <ProductVariant
110
+ checkoutId={checkoutId}
111
+ checkoutItem={checkoutItem}
112
+ country={country}
113
+ currentProductVariant={currentProductVariant}
114
+ segment={segment}
115
+ style={{ content: { paddingBottom: Platform.OS === "web" ? space6 : stickyHeight } }}
116
+ />
117
+ </Body>
118
+ </ScrollView>
117
119
 
118
120
  <ItemActions
119
121
  country={country}
package/src/infrastructure/ui/views/summary/Summary.style.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Platform, StyleSheet } from "react-native";
2
2
  import { theme } from "@lookiero/sty-psp-ui";
3
+ import { HEADER_HEIGHT } from "../../components/templates/header/Header.style";
3
4
 
4
5
  const {
5
6
  colorTextMedium,
@@ -11,7 +12,6 @@ const {
11
12
  space6,
12
13
  space12,
13
14
  space16,
14
- space24,
15
15
  borderRadius4,
16
16
  colorBgBase,
17
17
  } = theme();
@@ -39,6 +39,9 @@ const style = StyleSheet.create({
39
39
  desktopResume: {
40
40
  borderRadius: borderRadius4,
41
41
  },
42
+ header: {
43
+ height: HEADER_HEIGHT,
44
+ },
42
45
  mobileInfo: {
43
46
  paddingHorizontal: space6,
44
47
  paddingTop: space6,
@@ -64,7 +67,7 @@ const style = StyleSheet.create({
64
67
  ...Platform.select({
65
68
  web: {
66
69
  position: "sticky",
67
- top: space24,
70
+ top: space12,
68
71
  alignSelf: "flex-start",
69
72
  },
70
73
  }),
@@ -72,6 +75,7 @@ const style = StyleSheet.create({
72
75
  } as any,
73
76
  scrollView: {
74
77
  backgroundColor: colorBgPrimaryLight,
78
+ flex: 1,
75
79
  },
76
80
  sticky: {
77
81
  paddingBottom: space4,
package/src/infrastructure/ui/views/summary/Summary.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from "react";
2
- import { LayoutRectangle, Platform, View } from "react-native";
2
+ import { LayoutRectangle, Platform, ScrollView, View } from "react-native";
3
3
  import { generatePath, useMatch, useNavigate } from "react-router-native";
4
4
  import { Box, Text, Layout, useDevice, Spinner } from "@lookiero/aurora";
5
5
  import { useI18nMessage } from "@lookiero/i18n-react";
@@ -111,45 +111,50 @@ const Summary: FC<SummaryProps> = ({ layout: LocalLayout, children }) => {
111
111
 
112
112
  return (
113
113
  <LocalLayout
114
+ scrollEnabled={false}
114
115
  style={{
116
+ header: style.header,
115
117
  scrollView: style.scrollView,
116
118
  }}
117
119
  >
118
- {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
119
-
120
- <Layout
121
- fullWidth={!screen.L}
122
- style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
123
- >
124
- <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
125
- <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
126
- <View style={!screen.L && style.mobileInfo}>
127
- <Text level={3} style={style.title} heading>
128
- {titleText}
129
- </Text>
130
- <Text level={3} style={style.description}>
131
- {descriptionText}
132
- </Text>
133
- </View>
134
-
135
- {children}
136
- </View>
137
- </Box>
138
- {pricing && screen.L ? (
139
- <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
140
- <View style={style.princingWrapper}>
141
- <CollapsiblePricing
142
- collapsed={false}
143
- collapsible={false}
144
- pricing={pricing}
145
- submitButtonText={submitButtonText}
146
- totalCheckoutItemsKept={totalCheckoutItemsKept}
147
- onSubmit={handleOnSubmit}
148
- />
120
+ <ScrollView showsVerticalScrollIndicator={false}>
121
+ {fiveItemsDiscount !== 0 && <FiveItemsDiscountBanner fiveItemsDiscount={fiveItemsDiscount} />}
122
+
123
+ <Layout
124
+ fullWidth={!screen.L}
125
+ style={[screen.L && style.desktopLayoutSpacing, !screen.L && { paddingBottom: pricingHeight }]}
126
+ >
127
+ <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
128
+ <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
129
+ <View style={!screen.L && style.mobileInfo}>
130
+ <Text level={3} style={style.title} heading>
131
+ {titleText}
132
+ </Text>
133
+ <Text level={3} style={style.description}>
134
+ {descriptionText}
135
+ </Text>
136
+ </View>
137
+
138
+ {children}
149
139
  </View>
150
140
  </Box>
151
- ) : null}
152
- </Layout>
141
+
142
+ {pricing && screen.L ? (
143
+ <Box size={{ L: "1/3" }} style={[style.resume, screen.L ? style.desktopResume : style.mobileResume]}>
144
+ <View style={style.princingWrapper}>
145
+ <CollapsiblePricing
146
+ collapsed={false}
147
+ collapsible={false}
148
+ pricing={pricing}
149
+ submitButtonText={submitButtonText}
150
+ totalCheckoutItemsKept={totalCheckoutItemsKept}
151
+ onSubmit={handleOnSubmit}
152
+ />
153
+ </View>
154
+ </Box>
155
+ ) : null}
156
+ </Layout>
157
+ </ScrollView>
153
158
 
154
159
  {pricing && !screen.L ? (
155
160
  <Sticky style={style.sticky} onLayout={Platform.OS !== "web" ? handleOnPricingLayout : undefined}>