@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.
Files changed (55) hide show
  1. package/README.md +1 -1
  2. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.d.ts +6 -0
  3. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.js +13 -0
  4. package/dist/infrastructure/domain/checkout/react/useStartCheckout.js +1 -1
  5. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +10 -0
  6. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +11 -0
  7. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +6 -0
  8. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +7 -0
  9. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +6 -0
  10. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +9 -0
  11. package/dist/infrastructure/ui/Root.d.ts +1 -3
  12. package/dist/infrastructure/ui/Root.js +2 -2
  13. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +2 -0
  14. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +28 -0
  15. package/dist/infrastructure/ui/routing/Routing.d.ts +1 -3
  16. package/dist/infrastructure/ui/routing/Routing.js +2 -2
  17. package/dist/infrastructure/ui/views/App.d.ts +2 -4
  18. package/dist/infrastructure/ui/views/App.js +2 -2
  19. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.d.ts +7 -0
  20. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.js +25 -0
  21. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.d.ts +16 -0
  22. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.js +19 -0
  23. package/dist/infrastructure/ui/views/intro/Intro.d.ts +6 -0
  24. package/dist/infrastructure/ui/views/intro/Intro.js +52 -0
  25. package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +52 -0
  26. package/dist/infrastructure/ui/views/intro/Intro.style.js +55 -0
  27. package/dist/infrastructure/ui/views/item/Item.style.d.ts +15 -0
  28. package/dist/infrastructure/ui/views/item/Item.style.js +18 -0
  29. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts +26 -0
  30. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +44 -0
  31. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +45 -0
  32. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +53 -0
  33. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.d.ts +7 -0
  34. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js +25 -0
  35. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts +16 -0
  36. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js +19 -0
  37. package/dist/infrastructure/ui/views/navigation/Navigation.d.ts +2 -3
  38. package/dist/infrastructure/ui/views/navigation/Navigation.js +6 -20
  39. package/dist/infrastructure/ui/views/navigation/components/header/Header.d.ts +0 -12
  40. package/dist/infrastructure/ui/views/navigation/components/header/Header.js +2 -5
  41. package/dist/shared/notifications/domain/notification/command/createNotification.d.ts +17 -0
  42. package/dist/shared/notifications/domain/notification/command/createNotification.js +7 -0
  43. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +21 -0
  44. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +22 -0
  45. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts +12 -0
  46. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js +24 -0
  47. package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts +9 -0
  48. package/dist/shared/notifications/infrastructure/ui/components/Notifications.js +20 -0
  49. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +36 -0
  50. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +31 -0
  51. package/dist/shared/tracking/infrastructure/usePageView.d.ts +13 -0
  52. package/dist/shared/tracking/infrastructure/usePageView.js +27 -0
  53. package/dist/shared/ui/components/atoms/error/Error.style.d.ts +6 -0
  54. package/dist/shared/ui/components/atoms/error/Error.style.js +9 -0
  55. 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,7 @@
1
+ import { FC } from "react";
2
+ interface SizeChangeModalProps {
3
+ readonly visible: boolean;
4
+ readonly onDismiss: () => void;
5
+ }
6
+ declare const SizeChangeModal: FC<SizeChangeModalProps>;
7
+ export { SizeChangeModal };
@@ -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,16 @@
1
+ declare const style: {
2
+ button: {
3
+ flex: number;
4
+ };
5
+ modal: {
6
+ padding: number;
7
+ };
8
+ modalDescription: {
9
+ marginVertical: number;
10
+ textAlign: "center";
11
+ };
12
+ modalTitle: {
13
+ textAlign: "center";
14
+ };
15
+ };
16
+ export { style };
@@ -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 menu: Menu;
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 { usePortal } from "@lookiero/aurora";
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, menu, tabBar: TabBar, children }) => {
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
- setMenuVisible(true);
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, menu: menu, menuVisible: menuVisible, style: style.header, onBack: handleOnBack, onCloseMenu: handleOnCloseMenu, onNext: handleOnNext, onOpenMenu: handleOnOpenMenu, onPrevious: handleOnPrevious }),
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, menu: Menu, menuVisible, onOpenMenu, onCloseMenu, onBack, onNext, onPrevious, style: customStyle, }) => {
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(React.Fragment, null,
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 };
@@ -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 };
@@ -0,0 +1,6 @@
1
+ declare const style: {
2
+ error: {
3
+ color: string;
4
+ };
5
+ };
6
+ export { style };
@@ -0,0 +1,9 @@
1
+ import { StyleSheet } from "react-native";
2
+ import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
+ const { colorPrimary } = theme();
4
+ const style = StyleSheet.create({
5
+ error: {
6
+ color: colorPrimary,
7
+ },
8
+ });
9
+ export { style };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "1.3.0",
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 --passWithNoTests --colors --verbose --runInBand --detectOpenHandles --forceExit",
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.5.0",
41
- "react-native-svg": "^13.4.0",
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.2.0",
58
- "react-dom": "^18.2.0",
59
- "react-native": "^0.71.4",
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.11",
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.20.0",
67
- "@expo/webpack-config": "^0.17.4",
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.27",
84
- "@types/react-dom": "~18.0.10",
85
- "@types/react-native": "^0.70.13",
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": "^48.0.0",
100
- "expo-modules-core": "^1.2.6",
101
- "expo-status-bar": "~1.4.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": "^48.0.0",
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.2.0",
113
- "react-dom": "^18.2.0",
114
+ "react": "^18.0.0",
115
+ "react-dom": "^18.0.0",
114
116
  "react-error-overlay": "^6.0.9",
115
- "react-native": "^0.71.3",
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-web": "^0.18.11",
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.4",
125
+ "typescript": "^4.9.3",
123
126
  "webpack-bundle-analyzer": "^4.7.0"
124
127
  }
125
128
  }