@lookiero/checkout 1.3.0 → 2.0.0-beta.0
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/README.md +1 -1
- package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.d.ts +6 -0
- package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.js +13 -0
- package/dist/infrastructure/domain/checkout/react/useStartCheckout.js +1 -1
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +10 -0
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +11 -0
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +6 -0
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +7 -0
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +6 -0
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +9 -0
- package/dist/infrastructure/ui/Root.d.ts +1 -3
- package/dist/infrastructure/ui/Root.js +2 -2
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +2 -0
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +28 -0
- package/dist/infrastructure/ui/routing/Routing.d.ts +1 -3
- package/dist/infrastructure/ui/routing/Routing.js +2 -2
- package/dist/infrastructure/ui/views/App.d.ts +2 -4
- package/dist/infrastructure/ui/views/App.js +2 -2
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.d.ts +7 -0
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.js +25 -0
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.d.ts +16 -0
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.js +19 -0
- package/dist/infrastructure/ui/views/intro/Intro.d.ts +6 -0
- package/dist/infrastructure/ui/views/intro/Intro.js +52 -0
- package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +52 -0
- package/dist/infrastructure/ui/views/intro/Intro.style.js +55 -0
- package/dist/infrastructure/ui/views/item/Item.style.d.ts +15 -0
- package/dist/infrastructure/ui/views/item/Item.style.js +18 -0
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts +26 -0
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +44 -0
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +45 -0
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +53 -0
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.d.ts +7 -0
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js +25 -0
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts +16 -0
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js +19 -0
- package/dist/infrastructure/ui/views/navigation/Navigation.d.ts +2 -3
- package/dist/infrastructure/ui/views/navigation/Navigation.js +6 -20
- package/dist/infrastructure/ui/views/navigation/components/header/Header.d.ts +0 -12
- package/dist/infrastructure/ui/views/navigation/components/header/Header.js +2 -5
- package/dist/shared/notifications/domain/notification/command/createNotification.d.ts +17 -0
- package/dist/shared/notifications/domain/notification/command/createNotification.js +7 -0
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +21 -0
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +22 -0
- package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts +12 -0
- package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js +24 -0
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts +9 -0
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.js +20 -0
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +36 -0
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +31 -0
- package/dist/shared/tracking/infrastructure/usePageView.d.ts +13 -0
- package/dist/shared/tracking/infrastructure/usePageView.js +27 -0
- package/dist/shared/ui/components/atoms/error/Error.style.d.ts +6 -0
- package/dist/shared/ui/components/atoms/error/Error.style.js +9 -0
- package/package.json +27 -24
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { Platform, StyleSheet } from "react-native";
|
|
2
|
+
import { theme } from "../../../../theme/theme";
|
|
3
|
+
const { borderSize, colorGrayscaleL, colorInfo, spaceXS, spaceS, spaceM } = theme();
|
|
4
|
+
const IMAGE_WIDTH = 96;
|
|
5
|
+
const IMAGE_HEIGHT = 120;
|
|
6
|
+
const style = StyleSheet.create({
|
|
7
|
+
brand: {
|
|
8
|
+
color: colorGrayscaleL,
|
|
9
|
+
},
|
|
10
|
+
container: {
|
|
11
|
+
flexDirection: "row",
|
|
12
|
+
justifyContent: "space-between",
|
|
13
|
+
},
|
|
14
|
+
descriptionContainer: {
|
|
15
|
+
justifyContent: "space-between",
|
|
16
|
+
marginLeft: spaceS,
|
|
17
|
+
},
|
|
18
|
+
discarded: {
|
|
19
|
+
height: "100%",
|
|
20
|
+
left: 0,
|
|
21
|
+
position: "absolute",
|
|
22
|
+
top: 0,
|
|
23
|
+
width: "100%",
|
|
24
|
+
zIndex: 10,
|
|
25
|
+
},
|
|
26
|
+
media: {
|
|
27
|
+
borderColor: colorGrayscaleL,
|
|
28
|
+
borderWidth: borderSize,
|
|
29
|
+
height: IMAGE_HEIGHT,
|
|
30
|
+
width: IMAGE_WIDTH,
|
|
31
|
+
},
|
|
32
|
+
priceAndColor: {
|
|
33
|
+
color: colorGrayscaleL,
|
|
34
|
+
},
|
|
35
|
+
row: {
|
|
36
|
+
flexDirection: "row",
|
|
37
|
+
},
|
|
38
|
+
sizeChange: {
|
|
39
|
+
backgroundColor: colorInfo,
|
|
40
|
+
marginTop: spaceM,
|
|
41
|
+
paddingHorizontal: spaceS,
|
|
42
|
+
paddingVertical: spaceXS,
|
|
43
|
+
...Platform.select({
|
|
44
|
+
web: {
|
|
45
|
+
width: "fit-content",
|
|
46
|
+
},
|
|
47
|
+
}),
|
|
48
|
+
},
|
|
49
|
+
sizeChangeText: {
|
|
50
|
+
textTransform: "uppercase",
|
|
51
|
+
},
|
|
52
|
+
});
|
|
53
|
+
export { style, IMAGE_WIDTH };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
|
|
2
|
+
import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
|
|
3
|
+
import { useI18nMessage } from "@lookiero/i18n-react";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { View } from "react-native";
|
|
6
|
+
import { Modal } from "../../../../../../shared/ui/components/layouts/modal/Modal";
|
|
7
|
+
import { I18nMessages } from "../../../../i18n/i18n";
|
|
8
|
+
import { style } from "./SizeChangeModal.style";
|
|
9
|
+
const SizeChangeModal = ({ visible, onDismiss }) => {
|
|
10
|
+
const titleText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_TITLE });
|
|
11
|
+
const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_DESCRIPTION });
|
|
12
|
+
const buttonText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_BUTTON });
|
|
13
|
+
return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
|
|
14
|
+
React.createElement(View, { style: style.modal },
|
|
15
|
+
React.createElement(Text, { level: 1, style: style.modalTitle, body: true }, titleText),
|
|
16
|
+
React.createElement(Text, { level: 3, style: style.modalDescription, body: true }, descriptionText),
|
|
17
|
+
React.createElement(Button
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
19
|
+
// @ts-ignore
|
|
20
|
+
, {
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
22
|
+
// @ts-ignore
|
|
23
|
+
style: style.button, onPress: onDismiss }, buttonText))));
|
|
24
|
+
};
|
|
25
|
+
export { SizeChangeModal };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { StyleSheet } from "react-native";
|
|
2
|
+
import { theme } from "../../../../theme/theme";
|
|
3
|
+
const { spaceXL } = theme();
|
|
4
|
+
const style = StyleSheet.create({
|
|
5
|
+
button: {
|
|
6
|
+
flex: 0,
|
|
7
|
+
},
|
|
8
|
+
modal: {
|
|
9
|
+
padding: spaceXL,
|
|
10
|
+
},
|
|
11
|
+
modalDescription: {
|
|
12
|
+
marginVertical: spaceXL,
|
|
13
|
+
textAlign: "center",
|
|
14
|
+
},
|
|
15
|
+
modalTitle: {
|
|
16
|
+
textAlign: "center",
|
|
17
|
+
},
|
|
18
|
+
});
|
|
19
|
+
export { style };
|
|
@@ -11,11 +11,10 @@ interface TabBarProps {
|
|
|
11
11
|
}
|
|
12
12
|
type TabBar = FC<TabBarProps>;
|
|
13
13
|
interface NavigationProps {
|
|
14
|
+
readonly children: ReactNode;
|
|
14
15
|
readonly customerId: string;
|
|
15
16
|
readonly country: Country;
|
|
16
|
-
readonly
|
|
17
|
-
readonly tabBar: TabBar;
|
|
18
|
-
readonly children: ReactNode;
|
|
17
|
+
readonly onOpenMenu: () => void;
|
|
19
18
|
}
|
|
20
19
|
declare const Navigation: FC<NavigationProps>;
|
|
21
20
|
export type { Menu, TabBar };
|
|
@@ -1,33 +1,21 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import React, { useCallback, useState } from "react";
|
|
3
|
-
import { Platform } from "react-native";
|
|
1
|
+
import React, { useCallback } from "react";
|
|
4
2
|
import { useTrackPressBack } from "../../../../shared/tracking/infrastructure/useTrackPressBack";
|
|
5
3
|
import { useTrackPressMenu } from "../../../../shared/tracking/infrastructure/useTrackPressMenu";
|
|
6
4
|
import { useTrackPressNext } from "../../../../shared/tracking/infrastructure/useTrackPressNext";
|
|
7
5
|
import { useTrackPressPrevious } from "../../../../shared/tracking/infrastructure/useTrackPressPrevious";
|
|
8
6
|
import { style } from "./Navigation.style";
|
|
9
7
|
import { Header } from "./components/header/Header";
|
|
10
|
-
const Navigation = ({ customerId, country,
|
|
11
|
-
const [menuVisible, setMenuVisible] = useState(false);
|
|
8
|
+
const Navigation = ({ children, customerId, country, onOpenMenu }) => {
|
|
12
9
|
const trackPressMenu = useTrackPressMenu();
|
|
13
10
|
const handleOnOpenMenu = useCallback(({ page, checkoutId, collapse }) => {
|
|
14
|
-
|
|
11
|
+
onOpenMenu();
|
|
15
12
|
trackPressMenu({
|
|
16
13
|
page,
|
|
17
14
|
country,
|
|
18
15
|
checkoutId,
|
|
19
16
|
collapse,
|
|
20
17
|
});
|
|
21
|
-
}, [country, trackPressMenu]);
|
|
22
|
-
const handleOnCloseMenu = useCallback(({ page, checkoutId, collapse }) => {
|
|
23
|
-
setMenuVisible(false);
|
|
24
|
-
trackPressMenu({
|
|
25
|
-
page,
|
|
26
|
-
country,
|
|
27
|
-
checkoutId,
|
|
28
|
-
collapse,
|
|
29
|
-
});
|
|
30
|
-
}, [country, trackPressMenu]);
|
|
18
|
+
}, [country, onOpenMenu, trackPressMenu]);
|
|
31
19
|
const trackPressBack = useTrackPressBack();
|
|
32
20
|
const handleOnBack = useCallback(({ page, checkoutId }) => trackPressBack({
|
|
33
21
|
page,
|
|
@@ -50,10 +38,8 @@ const Navigation = ({ customerId, country, menu, tabBar: TabBar, children }) =>
|
|
|
50
38
|
from,
|
|
51
39
|
to,
|
|
52
40
|
}), [country, trackPressPrevious]);
|
|
53
|
-
const { busy } = usePortal();
|
|
54
41
|
return (React.createElement(React.Fragment, null,
|
|
55
|
-
React.createElement(Header, { customerId: customerId,
|
|
56
|
-
children
|
|
57
|
-
Platform.OS !== "web" && React.createElement(TabBar, { isPortalBusy: busy, panel: menuVisible })));
|
|
42
|
+
React.createElement(Header, { customerId: customerId, style: style.header, onBack: handleOnBack, onNext: handleOnNext, onOpenMenu: handleOnOpenMenu, onPrevious: handleOnPrevious }),
|
|
43
|
+
children));
|
|
58
44
|
};
|
|
59
45
|
export { Navigation };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { FC } from "react";
|
|
2
2
|
import { StyleProp, ViewStyle } from "react-native";
|
|
3
3
|
import { TrackingPage } from "../../../../../tracking/tracking";
|
|
4
|
-
import { Menu } from "../../Navigation";
|
|
5
4
|
interface OnOpenMenuFunctionArgs {
|
|
6
5
|
readonly page: TrackingPage;
|
|
7
6
|
readonly checkoutId: string | undefined;
|
|
@@ -10,14 +9,6 @@ interface OnOpenMenuFunctionArgs {
|
|
|
10
9
|
interface OnOpenMenuFunction {
|
|
11
10
|
(args: OnOpenMenuFunctionArgs): void;
|
|
12
11
|
}
|
|
13
|
-
interface OnCloseMenuFunctionArgs {
|
|
14
|
-
readonly page: TrackingPage;
|
|
15
|
-
readonly checkoutId: string | undefined;
|
|
16
|
-
readonly collapse: boolean;
|
|
17
|
-
}
|
|
18
|
-
interface OnCloseMenuFunction {
|
|
19
|
-
(args: OnCloseMenuFunctionArgs): void;
|
|
20
|
-
}
|
|
21
12
|
interface OnBackFunctionArgs {
|
|
22
13
|
readonly page: TrackingPage;
|
|
23
14
|
readonly checkoutId: string | undefined;
|
|
@@ -45,10 +36,7 @@ interface OnPreviousFunction {
|
|
|
45
36
|
}
|
|
46
37
|
interface HeaderProps {
|
|
47
38
|
readonly customerId: string;
|
|
48
|
-
readonly menu: Menu;
|
|
49
|
-
readonly menuVisible: boolean;
|
|
50
39
|
readonly onOpenMenu: OnOpenMenuFunction;
|
|
51
|
-
readonly onCloseMenu: OnCloseMenuFunction;
|
|
52
40
|
readonly onBack?: OnBackFunction;
|
|
53
41
|
readonly onNext?: OnNextFunction;
|
|
54
42
|
readonly onPrevious?: OnPreviousFunction;
|
|
@@ -66,7 +66,7 @@ const CheckoutHeader = ({ onBack }) => {
|
|
|
66
66
|
React.createElement(Text, { level: 3, detail: true, upperCase: true }, title),
|
|
67
67
|
React.createElement(ButtonIconPlaceholder, null)));
|
|
68
68
|
};
|
|
69
|
-
const Header = ({ customerId,
|
|
69
|
+
const Header = ({ customerId, onOpenMenu, onBack, onNext, onPrevious, style: customStyle }) => {
|
|
70
70
|
const { id: itemId } = useParams();
|
|
71
71
|
const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
|
|
72
72
|
const currentItem = checkout?.items.find((item) => item.id === itemId);
|
|
@@ -97,7 +97,6 @@ const Header = ({ customerId, menu: Menu, menuVisible, onOpenMenu, onCloseMenu,
|
|
|
97
97
|
]);
|
|
98
98
|
const { top: safeAreaInsetTop } = useSafeAreaInsets();
|
|
99
99
|
const handleOnOpenMenu = useCallback(() => onOpenMenu({ page: trackingPage(), checkoutId: checkout?.id, collapse: false }), [checkout?.id, onOpenMenu, trackingPage]);
|
|
100
|
-
const handleOnCloseMenu = useCallback(() => onCloseMenu({ page: trackingPage(), checkoutId: checkout?.id, collapse: true }), [checkout?.id, onCloseMenu, trackingPage]);
|
|
101
100
|
const handleOnBack = useCallback(() => onBack?.({ page: trackingPage(), checkoutId: checkout?.id }), [checkout?.id, onBack, trackingPage]);
|
|
102
101
|
const handleOnNext = useCallback(({ from, to }) => onNext?.({ page: trackingPage(), checkoutId: checkout?.id, from, to }), [checkout?.id, onNext, trackingPage]);
|
|
103
102
|
const handleOnPrevious = useCallback(({ from, to }) => onPrevious?.({ page: trackingPage(), checkoutId: checkout?.id, from, to }), [checkout?.id, onPrevious, trackingPage]);
|
|
@@ -116,8 +115,6 @@ const Header = ({ customerId, menu: Menu, menuVisible, onOpenMenu, onCloseMenu,
|
|
|
116
115
|
else {
|
|
117
116
|
header = React.createElement(DefaultHeader, { onOpenMenu: handleOnOpenMenu });
|
|
118
117
|
}
|
|
119
|
-
return (React.createElement(
|
|
120
|
-
React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, { height: HEADER_HEIGHT + safeAreaInsetTop }, customStyle] }, header),
|
|
121
|
-
React.createElement(Menu, { isVisible: menuVisible, onClose: handleOnCloseMenu })));
|
|
118
|
+
return (React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, { height: HEADER_HEIGHT + safeAreaInsetTop }, customStyle] }, header));
|
|
122
119
|
};
|
|
123
120
|
export { Header };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Command } from "@lookiero/messaging";
|
|
2
|
+
import { NotificationLevel } from "../model/notification";
|
|
3
|
+
declare const CREATE_NOTIFICATION = "create_notification";
|
|
4
|
+
interface CreateNotificationPayload {
|
|
5
|
+
readonly aggregateId: string;
|
|
6
|
+
readonly level: NotificationLevel;
|
|
7
|
+
readonly bodyI18nKey: string;
|
|
8
|
+
readonly titleI18nKey: string | undefined;
|
|
9
|
+
}
|
|
10
|
+
interface CreateNotification extends Command<typeof CREATE_NOTIFICATION>, CreateNotificationPayload {
|
|
11
|
+
}
|
|
12
|
+
interface CreateNotificationFunction {
|
|
13
|
+
(payload: CreateNotificationPayload): CreateNotification;
|
|
14
|
+
}
|
|
15
|
+
declare const createNotification: CreateNotificationFunction;
|
|
16
|
+
export type { CreateNotification };
|
|
17
|
+
export { CREATE_NOTIFICATION, createNotification };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { command } from "@lookiero/messaging";
|
|
2
|
+
const CREATE_NOTIFICATION = "create_notification";
|
|
3
|
+
const createNotification = ({ aggregateId, ...payload }) => ({
|
|
4
|
+
...command({ aggregateId, name: CREATE_NOTIFICATION }),
|
|
5
|
+
...payload,
|
|
6
|
+
});
|
|
7
|
+
export { CREATE_NOTIFICATION, createNotification };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CommandStatus } from "@lookiero/messaging-react";
|
|
2
|
+
import { Logger } from "../../../../../logging/Logger";
|
|
3
|
+
import { NotificationLevel } from "../../../../domain/notification/model/notification";
|
|
4
|
+
interface CreateNotificationFunctionArgs {
|
|
5
|
+
readonly aggregateId?: string;
|
|
6
|
+
readonly level: NotificationLevel;
|
|
7
|
+
readonly bodyI18nKey: string;
|
|
8
|
+
readonly titleI18nKey?: string;
|
|
9
|
+
}
|
|
10
|
+
interface CreateNotificationFunction {
|
|
11
|
+
(args: CreateNotificationFunctionArgs): Promise<void>;
|
|
12
|
+
}
|
|
13
|
+
interface UseCreateNotificationFunctionArgs {
|
|
14
|
+
readonly contextId: string;
|
|
15
|
+
readonly logger: Logger;
|
|
16
|
+
}
|
|
17
|
+
interface UseCreateNotificationFunction {
|
|
18
|
+
(args: UseCreateNotificationFunctionArgs): [create: CreateNotificationFunction, status: CommandStatus];
|
|
19
|
+
}
|
|
20
|
+
declare const useCreateNotification: UseCreateNotificationFunction;
|
|
21
|
+
export { useCreateNotification };
|
package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useCommand } from "@lookiero/messaging-react";
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { v4 as uuid } from "uuid";
|
|
4
|
+
import { createNotification } from "../../../../domain/notification/command/createNotification";
|
|
5
|
+
const useCreateNotification = ({ contextId, logger }) => {
|
|
6
|
+
const [commandBus, status] = useCommand({ contextId });
|
|
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]);
|
|
20
|
+
return [create, status];
|
|
21
|
+
};
|
|
22
|
+
export { useCreateNotification };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { ToastStyle } from "../../../../ui/components/molecules/toast/Toast";
|
|
3
|
+
import { NotificationProjection } from "../../../projection/notification/notification";
|
|
4
|
+
interface NotificationItemProps {
|
|
5
|
+
readonly notification: NotificationProjection;
|
|
6
|
+
readonly onRemove: (notificationId: string) => void;
|
|
7
|
+
readonly autoHideTimeout?: number;
|
|
8
|
+
readonly testID?: string;
|
|
9
|
+
readonly style?: ToastStyle;
|
|
10
|
+
}
|
|
11
|
+
declare const NotificationItem: FC<NotificationItemProps>;
|
|
12
|
+
export { NotificationItem };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { useI18nMessage } from "@lookiero/i18n-react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { useCallback, useEffect } from "react";
|
|
4
|
+
import { Toast, ToastVariant } from "../../../../ui/components/molecules/toast/Toast";
|
|
5
|
+
import { NotificationLevel } from "../../../domain/notification/model/notification";
|
|
6
|
+
const toastVariantForNotificationLevel = {
|
|
7
|
+
[NotificationLevel.INFO]: ToastVariant.INFO,
|
|
8
|
+
[NotificationLevel.ERROR]: ToastVariant.ERROR,
|
|
9
|
+
[NotificationLevel.SUCCESS]: ToastVariant.SUCCESS,
|
|
10
|
+
};
|
|
11
|
+
const NotificationItem = ({ notification, onRemove, autoHideTimeout, testID = "notification-item", style: customStyle, }) => {
|
|
12
|
+
const title = useI18nMessage({ id: notification.titleI18nKey }) || undefined;
|
|
13
|
+
const body = useI18nMessage({ id: notification.bodyI18nKey || "" });
|
|
14
|
+
const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
if (!autoHideTimeout) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const hideTimeout = setTimeout(handleOnClose, autoHideTimeout);
|
|
20
|
+
return () => clearTimeout(hideTimeout);
|
|
21
|
+
}, [autoHideTimeout, handleOnClose]);
|
|
22
|
+
return (React.createElement(Toast, { body: body, style: customStyle, testID: testID, title: title, variant: toastVariantForNotificationLevel[notification.level], onClose: handleOnClose }));
|
|
23
|
+
};
|
|
24
|
+
export { NotificationItem };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { NotificationProjection } from "../../../projection/notification/notification";
|
|
3
|
+
interface NotificationsProps {
|
|
4
|
+
readonly notifications?: NotificationProjection[];
|
|
5
|
+
readonly onRemove: (notificationId: string) => void;
|
|
6
|
+
readonly autoHideTimeout?: number;
|
|
7
|
+
}
|
|
8
|
+
declare const Notifications: FC<NotificationsProps>;
|
|
9
|
+
export { Notifications };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
4
|
+
import { Column } from "../../../../ui/components/layouts/column/Column";
|
|
5
|
+
import { Row } from "../../../../ui/components/layouts/row/Row";
|
|
6
|
+
import { Stack } from "../../../../ui/components/layouts/stack/Stack";
|
|
7
|
+
import { useScreenSize } from "../../../../ui/hooks/useScreenSize";
|
|
8
|
+
import { NotificationItem } from "./NotificationItem";
|
|
9
|
+
import { style } from "./Notifications.style";
|
|
10
|
+
const NOTIFICATIONS_AUTOHIDE_TIMEOUT = 10000;
|
|
11
|
+
const Notifications = ({ notifications = [], onRemove, autoHideTimeout = NOTIFICATIONS_AUTOHIDE_TIMEOUT, }) => {
|
|
12
|
+
const { top: safeAreaInsetTop } = useSafeAreaInsets();
|
|
13
|
+
const screenSize = useScreenSize();
|
|
14
|
+
const isSmallDevice = screenSize === "S";
|
|
15
|
+
return (React.createElement(View, { pointerEvents: "box-none", style: style.notifications, testID: "notifications" },
|
|
16
|
+
React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall, { paddingTop: safeAreaInsetTop }] },
|
|
17
|
+
React.createElement(Column, null,
|
|
18
|
+
React.createElement(Stack, null, notifications.map((notification) => (React.createElement(NotificationItem, { key: notification.id, autoHideTimeout: autoHideTimeout, notification: notification, style: { toast: style.toast }, testID: notification.id, onRemove: onRemove }))))))));
|
|
19
|
+
};
|
|
20
|
+
export { Notifications };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { StyleSheet } from "react-native";
|
|
2
|
+
declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
|
|
3
|
+
notifications: {
|
|
4
|
+
flexDirection: "column";
|
|
5
|
+
top: number;
|
|
6
|
+
width: string;
|
|
7
|
+
zIndex: number;
|
|
8
|
+
left: number;
|
|
9
|
+
} | {
|
|
10
|
+
flexDirection: "column";
|
|
11
|
+
top: number;
|
|
12
|
+
width: string;
|
|
13
|
+
zIndex: number;
|
|
14
|
+
position: "fixed";
|
|
15
|
+
left: number;
|
|
16
|
+
} | {
|
|
17
|
+
flexDirection: "column";
|
|
18
|
+
top: number;
|
|
19
|
+
width: string;
|
|
20
|
+
zIndex: number;
|
|
21
|
+
position: "absolute";
|
|
22
|
+
left: number;
|
|
23
|
+
};
|
|
24
|
+
row: {
|
|
25
|
+
flex: number;
|
|
26
|
+
justifyContent: "center";
|
|
27
|
+
};
|
|
28
|
+
rowSmall: {
|
|
29
|
+
paddingLeft: number;
|
|
30
|
+
paddingRight: number;
|
|
31
|
+
};
|
|
32
|
+
toast: {
|
|
33
|
+
marginTop: number;
|
|
34
|
+
};
|
|
35
|
+
}>;
|
|
36
|
+
export { style };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Platform, StyleSheet } from "react-native";
|
|
2
|
+
import { theme } from "../../../../../infrastructure/ui/theme/theme";
|
|
3
|
+
const { spaceM } = theme();
|
|
4
|
+
const style = StyleSheet.create({
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
6
|
+
// @ts-ignore
|
|
7
|
+
notifications: {
|
|
8
|
+
left: 0,
|
|
9
|
+
...Platform.select({
|
|
10
|
+
web: { position: "fixed" },
|
|
11
|
+
ios: { position: "absolute" },
|
|
12
|
+
android: { position: "absolute" },
|
|
13
|
+
}),
|
|
14
|
+
flexDirection: "column",
|
|
15
|
+
top: 0,
|
|
16
|
+
width: "100%",
|
|
17
|
+
zIndex: 20,
|
|
18
|
+
},
|
|
19
|
+
row: {
|
|
20
|
+
flex: 1,
|
|
21
|
+
justifyContent: "center",
|
|
22
|
+
},
|
|
23
|
+
rowSmall: {
|
|
24
|
+
paddingLeft: spaceM,
|
|
25
|
+
paddingRight: spaceM,
|
|
26
|
+
},
|
|
27
|
+
toast: {
|
|
28
|
+
marginTop: spaceM,
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
export { style };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { TrackingPage } from "../../../infrastructure/tracking/tracking";
|
|
2
|
+
import { Country } from "../../../projection/shared/country";
|
|
3
|
+
interface UsePageViewFunctionArgs {
|
|
4
|
+
readonly page: TrackingPage;
|
|
5
|
+
readonly country: Country;
|
|
6
|
+
readonly checkoutId?: string;
|
|
7
|
+
readonly checkoutItemId?: string;
|
|
8
|
+
}
|
|
9
|
+
interface UsePageViewFunction {
|
|
10
|
+
(agrs: UsePageViewFunctionArgs): void;
|
|
11
|
+
}
|
|
12
|
+
declare const usePageView: UsePageViewFunction;
|
|
13
|
+
export { usePageView };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useLayoutEffect } from "react";
|
|
2
|
+
import { PROJECT } from "../../../infrastructure/tracking/tracking";
|
|
3
|
+
import { TrackingEvent, TrackingEventCategory } from "../tracking";
|
|
4
|
+
import { useEmitUserEvent } from "./useEmitUserEvent";
|
|
5
|
+
const usePageView = ({ page, country, checkoutId, checkoutItemId }) => {
|
|
6
|
+
const emitUserEvent = useEmitUserEvent();
|
|
7
|
+
useLayoutEffect(() => {
|
|
8
|
+
if (!checkoutId) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
const baseTrackingEvent = {
|
|
12
|
+
event: TrackingEvent.PAGEVIEW,
|
|
13
|
+
eventCategory: TrackingEventCategory.NAVIGATION,
|
|
14
|
+
section: `${PROJECT}_${page}`,
|
|
15
|
+
store: country,
|
|
16
|
+
checkoutId,
|
|
17
|
+
};
|
|
18
|
+
const pageViewTrackingEvent = checkoutItemId
|
|
19
|
+
? {
|
|
20
|
+
...baseTrackingEvent,
|
|
21
|
+
checkoutItemId,
|
|
22
|
+
}
|
|
23
|
+
: baseTrackingEvent;
|
|
24
|
+
emitUserEvent(pageViewTrackingEvent);
|
|
25
|
+
}, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
|
|
26
|
+
};
|
|
27
|
+
export { usePageView };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lookiero/checkout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-beta.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build:app": "tsc -p ./tsconfig.build-app.json --noemit && ENTRY_POINT='./src/Expo.tsx' NODE_ENV=production expo export:web --clear",
|
|
20
20
|
"lint": "eslint --fix --cache --cache-location ./node_modules/.cache/.eslintcache --ext ts,tsx .",
|
|
21
21
|
"format": "prettier --write \"**/*.+(json|css|ts|tsx|md)\"",
|
|
22
|
-
"test": "tsc -p ./tsconfig.test.json --noemit && jest
|
|
22
|
+
"test": "tsc -p ./tsconfig.test.json --noemit && jest",
|
|
23
23
|
"test:coverage": "jest --coverage --coverageReporters=text --detectOpenHandles --forceExit --silent",
|
|
24
24
|
"test:contract": "TEST_ENV=CONTRACT jest --coverage false --detectOpenHandles --testMatch \"**/?(*.)+(pact).ts\" --testTimeout=3000 --watchAll=false --forceExit",
|
|
25
25
|
"publish:contract": "BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD) node pact.publish.js",
|
|
@@ -37,15 +37,15 @@
|
|
|
37
37
|
"inline-style-prefixer": "6.0.1",
|
|
38
38
|
"lodash": "^4.17.21",
|
|
39
39
|
"react-native-keyboard-aware-scroll-view": "^0.9.5",
|
|
40
|
-
"react-native-safe-area-context": "^4.
|
|
41
|
-
"react-native-svg": "^
|
|
40
|
+
"react-native-safe-area-context": "^4.4.1",
|
|
41
|
+
"react-native-svg": "^12.1.1",
|
|
42
42
|
"tiny-invariant": "^1.3.1",
|
|
43
43
|
"uuid": "^9.0.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
|
-
"@lookiero/aurora": "^3.1.0",
|
|
47
46
|
"@lookiero/aurora-fonts": "^1.0.6",
|
|
48
47
|
"@lookiero/aurora-iconfont": "^2.0.41",
|
|
48
|
+
"@lookiero/aurora": "^3.1.0",
|
|
49
49
|
"@lookiero/data-sources": "^0.3",
|
|
50
50
|
"@lookiero/event": "^0.3",
|
|
51
51
|
"@lookiero/locale": "^0.3",
|
|
@@ -54,20 +54,20 @@
|
|
|
54
54
|
"apollo-boost": "0.4.4",
|
|
55
55
|
"graphql": "16.6.0",
|
|
56
56
|
"graphql-tag": "2.12.6",
|
|
57
|
-
"react": "^18.
|
|
58
|
-
"react-dom": "^18.
|
|
59
|
-
"react-native": "^0.
|
|
57
|
+
"react": "^18.0.0",
|
|
58
|
+
"react-dom": "^18.0.0",
|
|
59
|
+
"react-native": "^0.70.6",
|
|
60
60
|
"react-native-get-random-values": "^1.8.0",
|
|
61
|
-
"react-native-web": "^0.18.
|
|
61
|
+
"react-native-web": "^0.18.9",
|
|
62
62
|
"react-router-dom": "^6.8.1",
|
|
63
63
|
"react-router-native": "^6.8.1"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
|
-
"@babel/core": "^7.
|
|
67
|
-
"@expo/webpack-config": "^0.17.
|
|
68
|
-
"@lookiero/aurora": "^3.1.0",
|
|
66
|
+
"@babel/core": "^7.19.1",
|
|
67
|
+
"@expo/webpack-config": "^0.17.2",
|
|
69
68
|
"@lookiero/aurora-fonts": "^1.0.6",
|
|
70
69
|
"@lookiero/aurora-iconfont": "^2.0.41",
|
|
70
|
+
"@lookiero/aurora": "^3.1.0",
|
|
71
71
|
"@lookiero/data-sources": "^0.3",
|
|
72
72
|
"@lookiero/event": "^0.3",
|
|
73
73
|
"@lookiero/locale": "^0.3",
|
|
@@ -77,12 +77,14 @@
|
|
|
77
77
|
"@pact-foundation/pact-node": "^10.17.6",
|
|
78
78
|
"@react-native-firebase/analytics": "10.5.1",
|
|
79
79
|
"@react-native-firebase/app": "10.5.0",
|
|
80
|
+
"@testing-library/react": "^13.4.0",
|
|
81
|
+
"@testing-library/react-hooks": "^8.0.1",
|
|
80
82
|
"@testing-library/react-native": "^11.5.0",
|
|
81
83
|
"@trivago/prettier-plugin-sort-imports": "^3.3.0",
|
|
82
84
|
"@types/jest": "^29.2.4",
|
|
83
|
-
"@types/react": "~18.0.
|
|
84
|
-
"@types/react-dom": "~18.0.
|
|
85
|
-
"@types/react-native": "
|
|
85
|
+
"@types/react": "~18.0.26",
|
|
86
|
+
"@types/react-dom": "~18.0.0",
|
|
87
|
+
"@types/react-native": "~0.69.1",
|
|
86
88
|
"@types/uuid": "^9.0.0",
|
|
87
89
|
"abort-controller": "^3.0.0",
|
|
88
90
|
"apollo-boost": "0.4.4",
|
|
@@ -96,30 +98,31 @@
|
|
|
96
98
|
"eslint-plugin-react": "^7.31.11",
|
|
97
99
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
98
100
|
"eslint-plugin-react-native": "^4.0.0",
|
|
99
|
-
"expo": "
|
|
100
|
-
"expo-modules-core": "^1.
|
|
101
|
-
"expo-status-bar": "~1.4.
|
|
101
|
+
"expo": "~46.0.8",
|
|
102
|
+
"expo-modules-core": "^1.0.3",
|
|
103
|
+
"expo-status-bar": "~1.4.0",
|
|
102
104
|
"graphql": "16.6.0",
|
|
103
105
|
"graphql-tag": "2.12.6",
|
|
104
106
|
"husky": "^8.0.2",
|
|
105
107
|
"jest": "^29.3.1",
|
|
106
|
-
"jest-expo": "^
|
|
108
|
+
"jest-expo": "^46.0.1",
|
|
107
109
|
"jest-fetch-mock": "^3.0.3",
|
|
108
110
|
"jest-mock-extended": "^3.0.1",
|
|
109
111
|
"lint-staged": "^13.0.3",
|
|
110
112
|
"pino-std-serializers": "^6.0.0",
|
|
111
113
|
"prettier": "^2.7.1",
|
|
112
|
-
"react": "^18.
|
|
113
|
-
"react-dom": "^18.
|
|
114
|
+
"react": "^18.0.0",
|
|
115
|
+
"react-dom": "^18.0.0",
|
|
114
116
|
"react-error-overlay": "^6.0.9",
|
|
115
|
-
"react-native": "^0.
|
|
117
|
+
"react-native": "^0.70.6",
|
|
116
118
|
"react-native-adjust": "^4.33.0",
|
|
117
119
|
"react-native-get-random-values": "^1.8.0",
|
|
118
|
-
"react-native-
|
|
120
|
+
"react-native-unimodules": "^0.14.10",
|
|
121
|
+
"react-native-web": "^0.18.9",
|
|
119
122
|
"react-router-dom": "^6.8.1",
|
|
120
123
|
"react-router-native": "^6.8.1",
|
|
121
124
|
"react-test-renderer": "^18.0.0",
|
|
122
|
-
"typescript": "^4.9.
|
|
125
|
+
"typescript": "^4.9.3",
|
|
123
126
|
"webpack-bundle-analyzer": "^4.7.0"
|
|
124
127
|
}
|
|
125
128
|
}
|