@lookiero/checkout 0.4.5-beta.2 → 0.4.5-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.
@@ -4,6 +4,7 @@ import { Edge } from "react-native-safe-area-context";
4
4
  type SafeAreaScrollViewStyle = "safeAreaView" | "scrollView";
5
5
  interface SafeAreaScrollViewProps {
6
6
  readonly children: ReactNode;
7
+ readonly footer?: ReactNode;
7
8
  readonly scrollerPaddingTop?: number;
8
9
  readonly edges?: Edge[];
9
10
  readonly style?: Partial<Record<SafeAreaScrollViewStyle, StyleProp<ViewStyle>>>;
@@ -1,16 +1,18 @@
1
1
  import React from "react";
2
2
  import { ScrollView } from "react-native";
3
3
  import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
4
- const SafeAreaScrollView = ({ children, edges = ["top", "bottom", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
4
+ import { theme } from "../../theme/theme";
5
+ const { spaceXXXL } = theme();
6
+ const SafeAreaScrollView = ({ children, footer, edges = ["top", "bottom", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
5
7
  const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
6
8
  return (React.createElement(SafeAreaView, { edges: edges, style: customStyle?.safeAreaView },
7
9
  React.createElement(ScrollView, { contentContainerStyle: [
8
10
  {
9
- // Why did we set this??
10
11
  paddingTop: safeAreaInsetTop + scrollerPaddingTop,
11
- paddingBottom: safeAreaInsetBottom,
12
+ paddingBottom: safeAreaInsetBottom + spaceXXXL,
12
13
  },
13
14
  customStyle?.scrollView,
14
- ] }, children)));
15
+ ] }, children),
16
+ footer));
15
17
  };
16
18
  export { SafeAreaScrollView };
@@ -38,7 +38,7 @@ const Checkout = ({ children, customerId, useRedirect }) => {
38
38
  if (!dependenciesLoaded)
39
39
  return React.createElement(Spinner, null);
40
40
  return (React.createElement(React.Fragment, null,
41
- React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
41
+ React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
42
42
  React.createElement(Body, { style: { column: style.bodyColumn } },
43
43
  hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
44
44
  React.createElement(DeliveryBanner, null))),
@@ -30,7 +30,7 @@ const Feedback = ({ customerId }) => {
30
30
  if (!dependenciesLoaded)
31
31
  return React.createElement(Spinner, null);
32
32
  return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
33
- React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
33
+ React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
34
34
  React.createElement(Body, { style: { column: style.bodyColumn } },
35
35
  React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
36
36
  };
@@ -83,8 +83,8 @@ const Header = ({ customerId, menu: Menu, style: customStyle }) => {
83
83
  else {
84
84
  header = React.createElement(DefaultHeader, { onOpenMenu: handleOnOpenMenu });
85
85
  }
86
- return (React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, customStyle] },
87
- header,
86
+ return (React.createElement(React.Fragment, null,
87
+ React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, customStyle] }, header),
88
88
  React.createElement(Menu, { visible: menuVisible, onClose: handleOnCloseMenu })));
89
89
  };
90
90
  export { Header };
@@ -136,7 +136,7 @@ const Item = ({ customerId }) => {
136
136
  return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
137
137
  React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
138
138
  React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
139
- React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
139
+ React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, footer: !customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })) },
140
140
  React.createElement(Body, null,
141
141
  customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
142
142
  React.createElement(View, { style: [style.container, { paddingBottom: Platform.OS === "web" ? spaceXL : stickyHeight }] },
@@ -145,7 +145,6 @@ const Item = ({ customerId }) => {
145
145
  React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: productVariantSelected.size }),
146
146
  checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: style.feedbackContainer },
147
147
  React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions || [], onEditFeedback: handleOnEditFeedback })))))),
148
- React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions || [], visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit }),
149
- !customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal }))));
148
+ React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions || [], visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
150
149
  };
151
150
  export { Item };
@@ -43,14 +43,12 @@ const Summary = ({ customerId }) => {
43
43
  dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
44
44
  if (!dependenciesLoaded)
45
45
  return React.createElement(Spinner, null);
46
- return (React.createElement(React.Fragment, null,
47
- React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container } },
48
- React.createElement(Body, { style: { row: { paddingBottom: pricingHeight || spaceXL } } },
49
- fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
50
- React.createElement(View, { style: style.content },
51
- React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
52
- React.createElement(Text, { level: 3, style: style.description, body: true }, descriptionText)),
53
- React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], onPressItem: handleOnPressItem }))),
54
- pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
46
+ return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container }, footer: pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })) },
47
+ React.createElement(Body, { style: { row: { paddingBottom: pricingHeight || spaceXL } } },
48
+ fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
49
+ React.createElement(View, { style: style.content },
50
+ React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
51
+ React.createElement(Text, { level: 3, style: style.description, body: true }, descriptionText)),
52
+ React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], onPressItem: handleOnPressItem }))));
55
53
  };
56
54
  export { Summary };
@@ -18,17 +18,11 @@ const style = StyleSheet.create({
18
18
  shadowRadius: elevationRadius,
19
19
  width: "100%",
20
20
  ...Platform.select({
21
- web: {
22
- position: "sticky",
23
- },
24
- ios: {
25
- position: "absolute",
26
- },
27
- android: {
28
- position: "absolute",
29
- },
21
+ web: { position: "sticky" },
22
+ ios: { position: "absolute" },
23
+ android: { position: "absolute" },
30
24
  }),
31
- zIndex: 1,
25
+ zIndex: 0,
32
26
  },
33
27
  });
34
28
  export { style };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "0.4.5-beta.2",
3
+ "version": "0.4.5-beta.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [