@lookiero/checkout 0.8.4-beta.2 → 0.8.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/domain/checkout/model/checkout.js +1 -0
- package/dist/infrastructure/delivery/http/fetchHttpClient.js +36 -19
- package/dist/infrastructure/delivery/http/httpClient.d.ts +9 -3
- package/dist/infrastructure/domain/checkout/react/useStartCheckout.d.ts +3 -1
- package/dist/infrastructure/domain/checkout/react/useStartCheckout.js +11 -4
- package/dist/infrastructure/domain/checkout/react/useSubmitCheckout.d.ts +3 -1
- package/dist/infrastructure/domain/checkout/react/useSubmitCheckout.js +19 -6
- package/dist/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.d.ts +2 -0
- package/dist/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.js +20 -4
- package/dist/infrastructure/domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem.d.ts +2 -0
- package/dist/infrastructure/domain/checkoutBooking/react/useBookCheckoutBookingForCheckoutItem.js +20 -5
- package/dist/infrastructure/domain/checkoutFeedback/react/useGiveCheckoutFeedback.d.ts +2 -0
- package/dist/infrastructure/domain/checkoutFeedback/react/useGiveCheckoutFeedback.js +20 -5
- package/dist/infrastructure/domain/checkoutItem/react/useKeepCheckoutItem.d.ts +2 -0
- package/dist/infrastructure/domain/checkoutItem/react/useKeepCheckoutItem.js +19 -4
- package/dist/infrastructure/domain/checkoutItem/react/useReplaceCheckoutItem.d.ts +2 -0
- package/dist/infrastructure/domain/checkoutItem/react/useReplaceCheckoutItem.js +20 -5
- package/dist/infrastructure/domain/checkoutItem/react/useReturnCheckoutItem.d.ts +2 -0
- package/dist/infrastructure/domain/checkoutItem/react/useReturnCheckoutItem.js +20 -5
- package/dist/infrastructure/domain/uiSetting/react/useUpdateUiSetting.d.ts +5 -1
- package/dist/infrastructure/domain/uiSetting/react/useUpdateUiSetting.js +13 -6
- package/dist/infrastructure/projection/bookedProductsVariants/httpBookedProductsVariantsForCheckoutItemView.js +9 -8
- package/dist/infrastructure/projection/checkout/httpCheckoutByIdView.js +9 -8
- package/dist/infrastructure/projection/checkout/httpFirstAvailableCheckoutByCustomerIdView.js +9 -8
- package/dist/infrastructure/projection/checkout/httpFiveItemsDiscountByCustomerIdView.js +8 -7
- package/dist/infrastructure/projection/checkout/httpIsCheckoutEnabledByCustomerIdView.js +8 -7
- package/dist/infrastructure/projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId.js +1 -4
- package/dist/infrastructure/projection/checkoutBooking/httpCheckoutBookingByIdView.js +9 -8
- package/dist/infrastructure/projection/checkoutItem/httpCheckoutItemByIdView.js +9 -8
- package/dist/infrastructure/projection/checkoutQuestion/httpCheckoutQuestionsByCheckoutIdView.js +9 -8
- package/dist/infrastructure/projection/payment/httpPaymentFlowPayloadByCheckoutIdView.js +9 -8
- package/dist/infrastructure/projection/pricing/httpPricingByCheckoutIdView.js +9 -8
- package/dist/infrastructure/projection/returnQuestion/httpReturnQuestionsByCheckoutItemIdView.js +9 -8
- package/dist/infrastructure/ui/Root.js +2 -1
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentEvents.d.ts +8 -1
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentEvents.js +2 -2
- package/dist/infrastructure/ui/hooks/useSubmitCheckout.d.ts +2 -0
- package/dist/infrastructure/ui/hooks/useSubmitCheckout.js +9 -10
- package/dist/infrastructure/ui/i18n/i18n.d.ts +1 -0
- package/dist/infrastructure/ui/i18n/i18n.js +1 -0
- package/dist/infrastructure/ui/routing/CheckoutMiddleware.js +3 -1
- package/dist/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js +3 -0
- package/dist/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.js +3 -1
- package/dist/infrastructure/ui/views/feedback/Feedback.js +3 -0
- package/dist/infrastructure/ui/views/item/Item.js +6 -1
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +2 -2
- package/dist/shared/logging/Logger.d.ts +7 -0
- package/dist/shared/logging/Logger.js +1 -0
- package/dist/shared/logging/SentryLogger.d.ts +3 -8
- package/dist/shared/logging/SentryLogger.js +27 -33
- package/dist/shared/logging/SentryLoggerHOC.d.ts +15 -0
- package/dist/shared/logging/SentryLoggerHOC.js +24 -0
- package/dist/shared/logging/useLogger.d.ts +12 -0
- package/dist/shared/logging/useLogger.js +10 -0
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +2 -0
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +14 -7
- package/dist/shared/notifications/infrastructure/domain/notification/react/useRemoveNotification.d.ts +2 -0
- package/dist/shared/notifications/infrastructure/domain/notification/react/useRemoveNotification.js +9 -2
- package/dist/shared/notifications/infrastructure/ui/views/Notifications.js +3 -1
- package/dist/shared/ui/components/layouts/slider/Slider.js +12 -47
- package/package.json +2 -1
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +0 -10
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +0 -11
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +0 -6
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +0 -7
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +0 -6
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +0 -9
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +0 -2
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +0 -28
- package/dist/infrastructure/ui/views/intro/Intro.d.ts +0 -6
- package/dist/infrastructure/ui/views/intro/Intro.js +0 -52
- package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +0 -52
- package/dist/infrastructure/ui/views/intro/Intro.style.js +0 -55
package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js
CHANGED
|
@@ -2,14 +2,21 @@ import { useCommand } from "@lookiero/messaging-react";
|
|
|
2
2
|
import { useCallback } from "react";
|
|
3
3
|
import { v4 as uuid } from "uuid";
|
|
4
4
|
import { createNotification } from "../../../../domain/notification/command/createNotification";
|
|
5
|
-
const useCreateNotification = ({ contextId }) => {
|
|
5
|
+
const useCreateNotification = ({ contextId, logger }) => {
|
|
6
6
|
const [commandBus, status] = useCommand({ contextId });
|
|
7
|
-
const create = useCallback(({ aggregateId, level, titleI18nKey, bodyI18nKey }) =>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
const create = useCallback(async ({ aggregateId, level, titleI18nKey, bodyI18nKey }) => {
|
|
8
|
+
try {
|
|
9
|
+
await commandBus(createNotification({
|
|
10
|
+
aggregateId: aggregateId || uuid(),
|
|
11
|
+
level,
|
|
12
|
+
titleI18nKey,
|
|
13
|
+
bodyI18nKey,
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
catch (error) {
|
|
17
|
+
logger.captureException(error);
|
|
18
|
+
}
|
|
19
|
+
}, [commandBus, logger]);
|
|
13
20
|
return [create, status];
|
|
14
21
|
};
|
|
15
22
|
export { useCreateNotification };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CommandStatus } from "@lookiero/messaging-react";
|
|
2
|
+
import { Logger } from "../../../../../logging/Logger";
|
|
2
3
|
interface RemoveNotificationFunctionArgs {
|
|
3
4
|
readonly aggregateId: string;
|
|
4
5
|
}
|
|
@@ -7,6 +8,7 @@ interface RemoveNotificationFunction {
|
|
|
7
8
|
}
|
|
8
9
|
interface UseRemoveNotificationFunctionArgs {
|
|
9
10
|
readonly contextId: string;
|
|
11
|
+
readonly logger: Logger;
|
|
10
12
|
}
|
|
11
13
|
interface UseRemoveNotificationFunction {
|
|
12
14
|
(args: UseRemoveNotificationFunctionArgs): [remove: RemoveNotificationFunction, status: CommandStatus];
|
package/dist/shared/notifications/infrastructure/domain/notification/react/useRemoveNotification.js
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { useCommand } from "@lookiero/messaging-react";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
3
|
import { removeNotification } from "../../../../domain/notification/command/removeNotification";
|
|
4
|
-
const useRemoveNotification = ({ contextId }) => {
|
|
4
|
+
const useRemoveNotification = ({ contextId, logger }) => {
|
|
5
5
|
const [commandBus, status] = useCommand({ contextId });
|
|
6
|
-
const remove = useCallback(({ aggregateId }) =>
|
|
6
|
+
const remove = useCallback(async ({ aggregateId }) => {
|
|
7
|
+
try {
|
|
8
|
+
await commandBus(removeNotification({ aggregateId }));
|
|
9
|
+
}
|
|
10
|
+
catch (error) {
|
|
11
|
+
logger.captureException(error);
|
|
12
|
+
}
|
|
13
|
+
}, [commandBus, logger]);
|
|
7
14
|
return [remove, status];
|
|
8
15
|
};
|
|
9
16
|
export { useRemoveNotification };
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import React, { useCallback } from "react";
|
|
2
|
+
import { useLogger } from "../../../../logging/useLogger";
|
|
2
3
|
import { useListNotifications } from "../../../projection/notification/react/useListNotifications";
|
|
3
4
|
import { useRemoveNotification } from "../../domain/notification/react/useRemoveNotification";
|
|
4
5
|
import { Notifications as NotificationsTemplate } from "../components/Notifications";
|
|
5
6
|
const Notifications = ({ contextId }) => {
|
|
7
|
+
const logger = useLogger();
|
|
6
8
|
const [notifications] = useListNotifications({ contextId });
|
|
7
|
-
const [remove] = useRemoveNotification({ contextId });
|
|
9
|
+
const [remove] = useRemoveNotification({ contextId, logger });
|
|
8
10
|
const onRemove = useCallback((id) => remove({ aggregateId: id }), [remove]);
|
|
9
11
|
return React.createElement(NotificationsTemplate, { notifications: notifications, onRemove: onRemove });
|
|
10
12
|
};
|
|
@@ -1,17 +1,9 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
-
import { Animated,
|
|
3
|
-
|
|
4
|
-
// import { Pagination } from "./Pagination";
|
|
2
|
+
import { Animated, I18nManager, PanResponder, StyleSheet, View, } from "react-native";
|
|
3
|
+
import { Pagination } from "./Pagination";
|
|
5
4
|
import { style } from "./Slider.style";
|
|
6
5
|
const DEFAULT_WIDTH = 200;
|
|
7
|
-
const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5, minDistanceForAction = 0.2, gesturesEnabled = true,
|
|
8
|
-
// paginationEnabled = true,
|
|
9
|
-
// paginationStyle,
|
|
10
|
-
// paginationItemStyle,
|
|
11
|
-
// paginationActiveItemStyle,
|
|
12
|
-
onSliderStart, onSliderEnd, onChanged,
|
|
13
|
-
// paginationRenderItem,
|
|
14
|
-
}) => {
|
|
6
|
+
const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5, minDistanceForAction = 0.2, gesturesEnabled = true, paginationEnabled = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, onSliderStart, onSliderEnd, onChanged, paginationRenderItem, }) => {
|
|
15
7
|
const flatennedChildren = children.flat();
|
|
16
8
|
const count = flatennedChildren.length;
|
|
17
9
|
const [width, setWidth] = useState(0);
|
|
@@ -108,7 +100,7 @@ onSliderStart, onSliderEnd, onChanged,
|
|
|
108
100
|
fixAndGo(delta);
|
|
109
101
|
}
|
|
110
102
|
}, [fixAndGo]);
|
|
111
|
-
|
|
103
|
+
const getActiveIndex = useCallback(() => activeIndex.current, []);
|
|
112
104
|
useEffect(() => {
|
|
113
105
|
pan.x.addListener(({ value }) => (animatedValueX.current = value));
|
|
114
106
|
pan.y.addListener(({ value }) => (animatedValueY.current = value));
|
|
@@ -128,40 +120,13 @@ onSliderStart, onSliderEnd, onChanged,
|
|
|
128
120
|
widthRef.current = width;
|
|
129
121
|
fixState();
|
|
130
122
|
}, [fixState]);
|
|
131
|
-
return (
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
// ])}
|
|
140
|
-
// {...panResponder.panHandlers}
|
|
141
|
-
// >
|
|
142
|
-
// {flatennedChildren.map((child, index) => (
|
|
143
|
-
// <View key={index} style={{ width }} testID="slider-child">
|
|
144
|
-
// {child}
|
|
145
|
-
// </View>
|
|
146
|
-
// ))}
|
|
147
|
-
// </Animated.View>
|
|
148
|
-
// {paginationEnabled && (
|
|
149
|
-
// <Pagination
|
|
150
|
-
// activeIndex={getActiveIndex()}
|
|
151
|
-
// count={count}
|
|
152
|
-
// paginationActiveItemStyle={paginationActiveItemStyle}
|
|
153
|
-
// paginationItemStyle={paginationItemStyle}
|
|
154
|
-
// paginationStyle={paginationStyle}
|
|
155
|
-
// renderItem={paginationRenderItem}
|
|
156
|
-
// onChange={(index) => goTo(index)}
|
|
157
|
-
// />
|
|
158
|
-
// )}
|
|
159
|
-
// </View>
|
|
160
|
-
React.createElement(Animated.View, { style: StyleSheet.flatten([
|
|
161
|
-
{
|
|
162
|
-
transform: [{ translateX: pan.x }, { translateY: pan.y }],
|
|
163
|
-
},
|
|
164
|
-
style.sliderAreaStyle,
|
|
165
|
-
]), onLayout: onLayoutWrapper, ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width: "100%" }, testID: "slider-child" }, child)))));
|
|
123
|
+
return (React.createElement(View, { style: style.container, testID: "slider", onLayout: onLayoutWrapper },
|
|
124
|
+
React.createElement(Animated.View, { style: StyleSheet.flatten([
|
|
125
|
+
{
|
|
126
|
+
transform: [{ translateX: pan.x }, { translateY: pan.y }],
|
|
127
|
+
},
|
|
128
|
+
style.sliderAreaStyle,
|
|
129
|
+
]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width }, testID: "slider-child" }, child)))),
|
|
130
|
+
paginationEnabled && (React.createElement(Pagination, { activeIndex: getActiveIndex(), count: count, paginationActiveItemStyle: paginationActiveItemStyle, paginationItemStyle: paginationItemStyle, paginationStyle: paginationStyle, renderItem: paginationRenderItem, onChange: (index) => goTo(index) }))));
|
|
166
131
|
};
|
|
167
132
|
export { Slider };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lookiero/checkout",
|
|
3
|
-
"version": "0.8.4
|
|
3
|
+
"version": "0.8.4",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -110,6 +110,7 @@
|
|
|
110
110
|
"prettier": "^2.7.1",
|
|
111
111
|
"react": "^18.0.0",
|
|
112
112
|
"react-dom": "^18.0.0",
|
|
113
|
+
"react-error-overlay": "^6.0.9",
|
|
113
114
|
"react-native": "^0.70.6",
|
|
114
115
|
"react-native-adjust": "^4.33.0",
|
|
115
116
|
"react-native-get-random-values": "^1.8.0",
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { CommandStatus } from "@lookiero/messaging-react";
|
|
2
|
-
interface IncrementIntroShownCountFunction {
|
|
3
|
-
(): Promise<void>;
|
|
4
|
-
}
|
|
5
|
-
type UseIncrementIntroShownCount = [incrementIntroShownCount: IncrementIntroShownCountFunction, status: CommandStatus];
|
|
6
|
-
interface UseIncrementIntroShownCountFunction {
|
|
7
|
-
(): UseIncrementIntroShownCount;
|
|
8
|
-
}
|
|
9
|
-
declare const useIncrementIntroShownCount: UseIncrementIntroShownCountFunction;
|
|
10
|
-
export { useIncrementIntroShownCount };
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { useCallback } from "react";
|
|
2
|
-
import { useViewIntroShownCount } from "../../../projection/uiSetting/react/useViewIntroShownCount";
|
|
3
|
-
import { UISettings } from "../../../ui/settings/UISettings";
|
|
4
|
-
import { useUpdateUiSetting } from "./useUpdateUiSetting";
|
|
5
|
-
const useIncrementIntroShownCount = () => {
|
|
6
|
-
const [update, status] = useUpdateUiSetting();
|
|
7
|
-
const [introShownCount] = useViewIntroShownCount();
|
|
8
|
-
const incrementIntroShownCount = useCallback(() => update({ key: UISettings.INTRO_SHOWN_COUNT, value: introShownCount + 1 }), [introShownCount, update]);
|
|
9
|
-
return [incrementIntroShownCount, status];
|
|
10
|
-
};
|
|
11
|
-
export { useIncrementIntroShownCount };
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { useViewIntroShownCount } from "./useViewIntroShownCount";
|
|
2
|
-
const MAX_INTRO_SHOWN_COUNT = 2;
|
|
3
|
-
const useShouldIntroBeShown = () => {
|
|
4
|
-
const [introShownCount, introShownCountStatus] = useViewIntroShownCount();
|
|
5
|
-
return [introShownCount < MAX_INTRO_SHOWN_COUNT, introShownCountStatus];
|
|
6
|
-
};
|
|
7
|
-
export { useShouldIntroBeShown };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { UISettings } from "../../../ui/settings/UISettings";
|
|
2
|
-
import { useViewUiSettingByKey } from "./useViewUiSettingByKey";
|
|
3
|
-
const useViewIntroShownCount = () => {
|
|
4
|
-
const [introShownCount, introShownCountStatus] = useViewUiSettingByKey({
|
|
5
|
-
key: UISettings.INTRO_SHOWN_COUNT,
|
|
6
|
-
});
|
|
7
|
-
return [introShownCount?.value || 0, introShownCountStatus];
|
|
8
|
-
};
|
|
9
|
-
export { useViewIntroShownCount };
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { useEvent } from "@lookiero/event";
|
|
2
|
-
import { useCallback, useEffect } from "react";
|
|
3
|
-
import { useCreateNotification } from "../../../shared/notifications";
|
|
4
|
-
import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
|
|
5
|
-
import { I18nMessages } from "../i18n/i18n";
|
|
6
|
-
import { useToast } from "./useToast";
|
|
7
|
-
const PAYMENT_ERROR = "ERROR";
|
|
8
|
-
const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
|
|
9
|
-
const usePaymentInstrumentUpdateEvents = () => {
|
|
10
|
-
const { subscribe, unsubscribe } = useEvent();
|
|
11
|
-
const { showError, showSuccess } = useToast();
|
|
12
|
-
const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
|
|
13
|
-
const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
|
|
14
|
-
const onError = useCallback(({ error }) => {
|
|
15
|
-
if (error.toaster) {
|
|
16
|
-
showError({ message: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR });
|
|
17
|
-
}
|
|
18
|
-
}, [showError]);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
subscribe({ event: PAYMENT_ERROR }, onError);
|
|
21
|
-
subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
|
|
22
|
-
return () => {
|
|
23
|
-
unsubscribe({ event: PAYMENT_ERROR }, onError);
|
|
24
|
-
unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
|
|
25
|
-
};
|
|
26
|
-
}, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
|
|
27
|
-
};
|
|
28
|
-
export { usePaymentInstrumentUpdateEvents };
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
|
|
2
|
-
import { Icon } from "@lookiero/aurora-next/build/components/primitives/Icon/Icon";
|
|
3
|
-
import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
|
|
4
|
-
import { useI18nMessage } from "@lookiero/i18n-react";
|
|
5
|
-
import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
|
|
6
|
-
import React from "react";
|
|
7
|
-
import { Platform, View } from "react-native";
|
|
8
|
-
import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
|
|
9
|
-
import { useIncrementIntroShownCount } from "../../../domain/uiSetting/react/useIncrementIntroShownCount";
|
|
10
|
-
import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
|
|
11
|
-
import { Body } from "../../components/layouts/body/Body";
|
|
12
|
-
import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
|
|
13
|
-
import { I18nMessages } from "../../i18n/i18n";
|
|
14
|
-
import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
|
|
15
|
-
import { style } from "./Intro.style";
|
|
16
|
-
const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
|
|
17
|
-
React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),
|
|
18
|
-
React.createElement(Text, { level: 2, detail: true }, text)));
|
|
19
|
-
const Intro = ({ customerId }) => {
|
|
20
|
-
const titleText = useI18nMessage({ id: I18nMessages.INTRO_TITLE });
|
|
21
|
-
const subTitleText = useI18nMessage({ id: I18nMessages.INTRO_SUBTITLE });
|
|
22
|
-
const discountText = useI18nMessage({ id: I18nMessages.INTRO_DISCOUNT });
|
|
23
|
-
const bulletOneText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_ONE });
|
|
24
|
-
const bulletTwoText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_TWO });
|
|
25
|
-
const bulletThreeText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_THREE });
|
|
26
|
-
const buttonText = useI18nMessage({ id: I18nMessages.INTRO_BUTTON });
|
|
27
|
-
const [fiveItemsDiscount, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({
|
|
28
|
-
customerId,
|
|
29
|
-
});
|
|
30
|
-
const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
|
|
31
|
-
if (fiveItemsDiscountStatus === QueryStatus.LOADING)
|
|
32
|
-
return React.createElement(Spinner, null);
|
|
33
|
-
return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
|
|
34
|
-
React.createElement(Body, { style: { column: style.bodyColumn } },
|
|
35
|
-
React.createElement(View, { style: style.intro },
|
|
36
|
-
React.createElement(View, { style: style.content },
|
|
37
|
-
React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
|
|
38
|
-
React.createElement(Text, { level: 3, style: style.subtitle, body: true }, subTitleText),
|
|
39
|
-
fiveItemsDiscount !== 0 && (React.createElement(View, { style: style.discountContainer },
|
|
40
|
-
React.createElement(View, { style: style.discount },
|
|
41
|
-
React.createElement(Text, { level: 2, heading: true },
|
|
42
|
-
"- ",
|
|
43
|
-
fiveItemsDiscount),
|
|
44
|
-
React.createElement(Text, { level: 3, style: style.percentage, heading: true }, "%")),
|
|
45
|
-
React.createElement(Text, { level: 3, body: true }, discountText))),
|
|
46
|
-
React.createElement(View, { style: style.description },
|
|
47
|
-
React.createElement(Bullet, { text: bulletOneText }),
|
|
48
|
-
React.createElement(Bullet, { text: bulletTwoText }),
|
|
49
|
-
React.createElement(Bullet, { text: bulletThreeText }))),
|
|
50
|
-
React.createElement(Button, { disabled: incrementIntroShownCountStatus === CommandStatus.LOADING, onPress: incrementIntroShownCount }, buttonText)))));
|
|
51
|
-
};
|
|
52
|
-
export { Intro };
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
declare const style: {
|
|
2
|
-
bodyColumn: {
|
|
3
|
-
paddingHorizontal: number;
|
|
4
|
-
};
|
|
5
|
-
bullet: {
|
|
6
|
-
alignItems: "center";
|
|
7
|
-
flexDirection: "row";
|
|
8
|
-
marginVertical: number;
|
|
9
|
-
};
|
|
10
|
-
content: {
|
|
11
|
-
alignItems: "center";
|
|
12
|
-
};
|
|
13
|
-
description: {
|
|
14
|
-
borderWidth: number;
|
|
15
|
-
marginBottom: number;
|
|
16
|
-
padding: number;
|
|
17
|
-
width: string;
|
|
18
|
-
};
|
|
19
|
-
discount: {
|
|
20
|
-
alignItems: "flex-end";
|
|
21
|
-
flexDirection: "row";
|
|
22
|
-
justifyContent: "center";
|
|
23
|
-
marginBottom: number;
|
|
24
|
-
};
|
|
25
|
-
discountContainer: {
|
|
26
|
-
alignItems: "center";
|
|
27
|
-
backgroundColor: string;
|
|
28
|
-
marginBottom: number;
|
|
29
|
-
padding: number;
|
|
30
|
-
textAlign: "center";
|
|
31
|
-
width: string;
|
|
32
|
-
};
|
|
33
|
-
intro: {
|
|
34
|
-
flex: number;
|
|
35
|
-
justifyContent: "space-between";
|
|
36
|
-
};
|
|
37
|
-
percentage: {
|
|
38
|
-
marginLeft: number;
|
|
39
|
-
};
|
|
40
|
-
subtitle: {
|
|
41
|
-
marginBottom: number;
|
|
42
|
-
textAlign: "center";
|
|
43
|
-
};
|
|
44
|
-
tickIcon: {
|
|
45
|
-
marginRight: number;
|
|
46
|
-
};
|
|
47
|
-
title: {
|
|
48
|
-
marginBottom: number;
|
|
49
|
-
textAlign: "center";
|
|
50
|
-
};
|
|
51
|
-
};
|
|
52
|
-
export { style };
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { StyleSheet } from "react-native";
|
|
2
|
-
import { theme } from "../../theme/theme";
|
|
3
|
-
const { borderSize, colorAccent, spaceXS, spaceS, spaceM, spaceL, spaceXL } = theme();
|
|
4
|
-
const style = StyleSheet.create({
|
|
5
|
-
bodyColumn: {
|
|
6
|
-
paddingHorizontal: spaceXL,
|
|
7
|
-
},
|
|
8
|
-
bullet: {
|
|
9
|
-
alignItems: "center",
|
|
10
|
-
flexDirection: "row",
|
|
11
|
-
marginVertical: spaceS,
|
|
12
|
-
},
|
|
13
|
-
content: {
|
|
14
|
-
alignItems: "center",
|
|
15
|
-
},
|
|
16
|
-
description: {
|
|
17
|
-
borderWidth: borderSize,
|
|
18
|
-
marginBottom: spaceXL,
|
|
19
|
-
padding: spaceM,
|
|
20
|
-
width: "100%",
|
|
21
|
-
},
|
|
22
|
-
discount: {
|
|
23
|
-
alignItems: "flex-end",
|
|
24
|
-
flexDirection: "row",
|
|
25
|
-
justifyContent: "center",
|
|
26
|
-
marginBottom: spaceS,
|
|
27
|
-
},
|
|
28
|
-
discountContainer: {
|
|
29
|
-
alignItems: "center",
|
|
30
|
-
backgroundColor: colorAccent,
|
|
31
|
-
marginBottom: spaceL,
|
|
32
|
-
padding: spaceM,
|
|
33
|
-
textAlign: "center",
|
|
34
|
-
width: "100%",
|
|
35
|
-
},
|
|
36
|
-
intro: {
|
|
37
|
-
flex: 1,
|
|
38
|
-
justifyContent: "space-between",
|
|
39
|
-
},
|
|
40
|
-
percentage: {
|
|
41
|
-
marginLeft: spaceXS,
|
|
42
|
-
},
|
|
43
|
-
subtitle: {
|
|
44
|
-
marginBottom: spaceXL,
|
|
45
|
-
textAlign: "center",
|
|
46
|
-
},
|
|
47
|
-
tickIcon: {
|
|
48
|
-
marginRight: spaceS,
|
|
49
|
-
},
|
|
50
|
-
title: {
|
|
51
|
-
marginBottom: spaceM,
|
|
52
|
-
textAlign: "center",
|
|
53
|
-
},
|
|
54
|
-
});
|
|
55
|
-
export { style };
|