@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.
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts +1 -0
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js +6 -4
- package/dist/infrastructure/ui/views/checkout/Checkout.js +1 -1
- package/dist/infrastructure/ui/views/feedback/Feedback.js +1 -1
- package/dist/infrastructure/ui/views/header/Header.js +2 -2
- package/dist/infrastructure/ui/views/item/Item.js +2 -3
- package/dist/infrastructure/ui/views/summary/Summary.js +7 -9
- package/dist/shared/ui/components/layouts/sticky/Sticky.style.js +4 -10
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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(
|
|
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.
|
|
47
|
-
React.createElement(
|
|
48
|
-
React.createElement(
|
|
49
|
-
|
|
50
|
-
React.createElement(
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
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:
|
|
25
|
+
zIndex: 0,
|
|
32
26
|
},
|
|
33
27
|
});
|
|
34
28
|
export { style };
|