@lookiero/checkout 0.8.17 → 0.8.19-beta.0

package/dist/shared/notifications/infrastructure/persistence/notificationDto.d.ts

@@ -1,8 +1,10 @@
-import { NotificationLevel } from "../../domain/notification/model/notification";
+import { NotificationLevel, NotificationType } from "../../domain/notification/model/notification";
 interface NotificationDto {
     readonly aggregateId: string;
+    readonly type: NotificationType;
     readonly level: NotificationLevel;
     readonly bodyI18nKey: string;
     readonly titleI18nKey: string | undefined;
+    readonly acceptI18nKey: string | undefined;
 }
 export type { NotificationDto };

package/dist/shared/notifications/infrastructure/projection/notification/notification.d.ts

@@ -1,7 +1,7 @@
-import { NotificationProjection } from "../../../projection/notification/notification";
+import { ModalNotificationProjection, ToastNotificationProjection } from "../../../projection/notification/notification";
 import { NotificationDto } from "../../persistence/notificationDto";
 interface ToNotificationProjectionFunction {
-    (notificationDto: NotificationDto): NotificationProjection;
+    (notificationDto: NotificationDto): ToastNotificationProjection | ModalNotificationProjection;
 }
 declare const toNotificationProjection: ToNotificationProjectionFunction;
 export { toNotificationProjection };

package/dist/shared/notifications/infrastructure/projection/notification/notification.js

@@ -1,7 +1,17 @@
-const toNotificationProjection = (notificationDto) => ({
-    id: notificationDto.aggregateId,
-    level: notificationDto.level,
-    titleI18nKey: notificationDto.titleI18nKey,
-    bodyI18nKey: notificationDto.bodyI18nKey,
-});
+import { NotificationType } from "../../../domain/notification/model/notification";
+const toNotificationProjection = (notificationDto) => notificationDto.type === NotificationType.TOAST
+    ? {
+        id: notificationDto.aggregateId,
+        type: notificationDto.type,
+        level: notificationDto.level,
+        titleI18nKey: notificationDto.titleI18nKey,
+        bodyI18nKey: notificationDto.bodyI18nKey,
+    }
+    : {
+        id: notificationDto.aggregateId,
+        type: notificationDto.type,
+        titleI18nKey: notificationDto.titleI18nKey,
+        bodyI18nKey: notificationDto.bodyI18nKey,
+        acceptI18nKey: notificationDto.acceptI18nKey,
+    };
 export { toNotificationProjection };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { ModalNotificationProjection } from "../../../../projection/notification/notification";
+interface ModalNotificationItemProps {
+    readonly visible: boolean;
+    readonly notification: ModalNotificationProjection;
+    readonly onRemove: (notificationId: string) => void;
+    readonly testID?: string;
+}
+declare const ModalNotificationItem: FC<ModalNotificationItemProps>;
+export { ModalNotificationItem };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.js

@@ -0,0 +1,26 @@
+import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
+import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { useCallback } from "react";
+import { View } from "react-native";
+import { Modal } from "../../../../../ui/components/layouts/modal/Modal";
+import { style } from "./ModalNotificationItem.style";
+const ModalNotificationItem = ({ visible, notification, onRemove, testID = "modal-notification-item", }) => {
+    const titleText = useI18nMessage({ id: notification.titleI18nKey });
+    const bodyText = useI18nMessage({ id: notification.bodyI18nKey });
+    const acceptText = useI18nMessage({ id: notification.acceptI18nKey });
+    const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
+    return (React.createElement(Modal, { testID: testID, visible: visible, onClose: handleOnClose },
+        React.createElement(View, { style: style.modal },
+            React.createElement(Text, { level: 1, style: style.modalTitle, body: true }, titleText),
+            React.createElement(Text, { level: 3, style: style.modalDescription, body: true }, bodyText),
+            React.createElement(Button
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            , { 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                style: style.button, onPress: handleOnClose }, acceptText))));
+};
+export { ModalNotificationItem };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.d.ts

@@ -0,0 +1,16 @@
+declare const style: {
+    button: {
+        flex: number;
+    };
+    modal: {
+        padding: number;
+    };
+    modalDescription: {
+        marginVertical: number;
+        textAlign: "center";
+    };
+    modalTitle: {
+        textAlign: "center";
+    };
+};
+export { style };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../../infrastructure/ui/theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    button: {
+        flex: 0,
+    },
+    modal: {
+        padding: spaceXL,
+    },
+    modalDescription: {
+        marginVertical: spaceXL,
+        textAlign: "center",
+    },
+    modalTitle: {
+        textAlign: "center",
+    },
+});
+export { style };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotifications.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { ModalNotificationProjection } from "../../../../projection/notification/notification";
+interface ModalNotificationsProps {
+    readonly notifications?: ModalNotificationProjection[];
+    readonly onRemove: (notificationId: string) => void;
+}
+declare const ModalNotifications: FC<ModalNotificationsProps>;
+export { ModalNotifications };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotifications.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { View } from "react-native";
+import { style } from "../toastNotifications/ToastNotifications.style";
+import { ModalNotificationItem } from "./ModalNotificationItem";
+const ModalNotifications = ({ notifications = [], onRemove }) => (React.createElement(View, { pointerEvents: "box-none", style: style.notifications, testID: "modal-notifications" }, notifications.map((notification) => (React.createElement(ModalNotificationItem, { key: notification.id, notification: notification, testID: notification.id, visible: true, onRemove: onRemove })))));
+export { ModalNotifications };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotifications.style.d.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    notifications: {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        left: number;
+    } | {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "fixed";
+        left: number;
+    } | {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "absolute";
+        left: number;
+    };
+}>;
+export { style };

package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotifications.style.js

@@ -0,0 +1,18 @@
+import { Platform, StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    notifications: {
+        left: 0,
+        ...Platform.select({
+            web: { position: "fixed" },
+            ios: { position: "absolute" },
+            android: { position: "absolute" },
+        }),
+        flexDirection: "column",
+        top: 0,
+        width: "100%",
+        zIndex: 20,
+    },
+});
+export { style };

package/dist/shared/notifications/infrastructure/ui/components/toastNotifications/ToastNotificationItem.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { ToastStyle } from "../../../../../ui/components/molecules/toast/Toast";
+import { ToastNotificationProjection } from "../../../../projection/notification/notification";
+interface ToastNotificationItemProps {
+    readonly notification: ToastNotificationProjection;
+    readonly onRemove: (notificationId: string) => void;
+    readonly autoHideTimeout?: number;
+    readonly testID?: string;
+    readonly style?: ToastStyle;
+}
+declare const ToastNotificationItem: FC<ToastNotificationItemProps>;
+export { ToastNotificationItem };

package/dist/shared/notifications/infrastructure/ui/components/toastNotifications/ToastNotificationItem.js

@@ -0,0 +1,24 @@
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { useCallback, useEffect } from "react";
+import { Toast, ToastVariant } from "../../../../../ui/components/molecules/toast/Toast";
+import { NotificationLevel } from "../../../../domain/notification/model/notification";
+const toastVariantForNotificationLevel = {
+    [NotificationLevel.INFO]: ToastVariant.INFO,
+    [NotificationLevel.ERROR]: ToastVariant.ERROR,
+    [NotificationLevel.SUCCESS]: ToastVariant.SUCCESS,
+};
+const ToastNotificationItem = ({ notification, onRemove, autoHideTimeout, testID = "toast-notification-item", style: customStyle, }) => {
+    const title = useI18nMessage({ id: notification.titleI18nKey }) || undefined;
+    const body = useI18nMessage({ id: notification.bodyI18nKey || "" });
+    const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
+    useEffect(() => {
+        if (!autoHideTimeout) {
+            return;
+        }
+        const hideTimeout = setTimeout(handleOnClose, autoHideTimeout);
+        return () => clearTimeout(hideTimeout);
+    }, [autoHideTimeout, handleOnClose]);
+    return (React.createElement(Toast, { body: body, style: customStyle, testID: testID, title: title, variant: toastVariantForNotificationLevel[notification.level], onClose: handleOnClose }));
+};
+export { ToastNotificationItem };

package/dist/shared/notifications/infrastructure/ui/components/toastNotifications/ToastNotifications.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { ToastNotificationProjection } from "../../../../projection/notification/notification";
+interface ToastNotificationsProps {
+    readonly notifications?: ToastNotificationProjection[];
+    readonly onRemove: (notificationId: string) => void;
+    readonly autoHideTimeout?: number;
+}
+declare const ToastNotifications: FC<ToastNotificationsProps>;
+export { ToastNotifications };

package/dist/shared/notifications/infrastructure/ui/components/toastNotifications/ToastNotifications.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Column } from "../../../../../ui/components/layouts/column/Column";
+import { Row } from "../../../../../ui/components/layouts/row/Row";
+import { Stack } from "../../../../../ui/components/layouts/stack/Stack";
+import { useScreenSize } from "../../../../../ui/hooks/useScreenSize";
+import { ToastNotificationItem } from "./ToastNotificationItem";
+import { style } from "./ToastNotifications.style";
+const NOTIFICATIONS_AUTOHIDE_TIMEOUT = 10000;
+const ToastNotifications = ({ notifications = [], onRemove, autoHideTimeout = NOTIFICATIONS_AUTOHIDE_TIMEOUT, }) => {
+    const { top: safeAreaInsetTop } = useSafeAreaInsets();
+    const screenSize = useScreenSize();
+    const isSmallDevice = screenSize === "S";
+    return (React.createElement(View, { pointerEvents: "box-none", style: style.notifications, testID: "toast-notifications" },
+        React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall, { paddingTop: safeAreaInsetTop }] },
+            React.createElement(Column, null,
+                React.createElement(Stack, null, notifications.map((notification) => (React.createElement(ToastNotificationItem, { key: notification.id, autoHideTimeout: autoHideTimeout, notification: notification, style: { toast: style.toast }, testID: notification.id, onRemove: onRemove }))))))));
+};
+export { ToastNotifications };

package/dist/shared/notifications/infrastructure/ui/components/toastNotifications/ToastNotifications.style.d.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    notifications: {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        left: number;
+    } | {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "fixed";
+        left: number;
+    } | {
+        flexDirection: "column";
+        top: number;
+        width: string;
+        zIndex: number;
+        position: "absolute";
+        left: number;
+    };
+    row: {
+        flex: number;
+        justifyContent: "center";
+    };
+    rowSmall: {
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    toast: {
+        marginTop: number;
+    };
+}>;
+export { style };

package/dist/shared/notifications/infrastructure/ui/components/toastNotifications/ToastNotifications.style.js

@@ -0,0 +1,31 @@
+import { Platform, StyleSheet } from "react-native";
+import { theme } from "../../../../../../infrastructure/ui/theme/theme";
+const { spaceM } = theme();
+const style = StyleSheet.create({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    notifications: {
+        left: 0,
+        ...Platform.select({
+            web: { position: "fixed" },
+            ios: { position: "absolute" },
+            android: { position: "absolute" },
+        }),
+        flexDirection: "column",
+        top: 0,
+        width: "100%",
+        zIndex: 20,
+    },
+    row: {
+        flex: 1,
+        justifyContent: "center",
+    },
+    rowSmall: {
+        paddingLeft: spaceM,
+        paddingRight: spaceM,
+    },
+    toast: {
+        marginTop: spaceM,
+    },
+});
+export { style };

package/dist/shared/notifications/infrastructure/ui/views/Notifications.js

@@ -1,13 +1,19 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useLogger } from "../../../../logging/useLogger";
+import { isModalNotification, isToastNotification } from "../../../projection/notification/notification";
 import { useListNotifications } from "../../../projection/notification/react/useListNotifications";
 import { useRemoveNotification } from "../../domain/notification/react/useRemoveNotification";
-import { Notifications as NotificationsTemplate } from "../components/Notifications";
+import { ModalNotifications } from "../components/modalNotifications/ModalNotifications";
+import { ToastNotifications } from "../components/toastNotifications/ToastNotifications";
 const Notifications = ({ contextId }) => {
     const logger = useLogger();
     const [notifications] = useListNotifications({ contextId });
     const [remove] = useRemoveNotification({ contextId, logger });
     const onRemove = useCallback((id) => remove({ aggregateId: id }), [remove]);
-    return React.createElement(NotificationsTemplate, { notifications: notifications, onRemove: onRemove });
+    const toastNotifications = useMemo(() => notifications?.filter(isToastNotification), [notifications]);
+    const modalNotifications = useMemo(() => notifications?.filter(isModalNotification), [notifications]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ToastNotifications, { notifications: toastNotifications, onRemove: onRemove }),
+        React.createElement(ModalNotifications, { notifications: modalNotifications, onRemove: onRemove })));
 };
 export { Notifications };

package/dist/shared/notifications/projection/notification/notification.d.ts

@@ -1,8 +1,24 @@
 import { NotificationLevel } from "../../domain/notification/model/notification";
+declare enum NotificationType {
+    TOAST = "TOAST",
+    MODAL = "MODAL"
+}
 interface NotificationProjection {
     readonly id: string;
-    readonly level: NotificationLevel;
+    readonly type: NotificationType;
     readonly bodyI18nKey: string;
     readonly titleI18nKey: string | undefined;
 }
-export type { NotificationProjection };
+interface ToastNotificationProjection extends NotificationProjection {
+    readonly type: NotificationType.TOAST;
+    readonly level: NotificationLevel;
+}
+interface ModalNotificationProjection extends NotificationProjection {
+    readonly type: NotificationType.MODAL;
+    readonly titleI18nKey: string;
+    readonly acceptI18nKey: string;
+}
+declare const isToastNotification: (notification: NotificationProjection) => notification is ToastNotificationProjection;
+declare const isModalNotification: (notification: NotificationProjection) => notification is ModalNotificationProjection;
+export type { NotificationProjection, ToastNotificationProjection, ModalNotificationProjection };
+export { isToastNotification, isModalNotification };

package/dist/shared/notifications/projection/notification/notification.js

@@ -1 +1,8 @@
-export {};
+var NotificationType;
+(function (NotificationType) {
+    NotificationType["TOAST"] = "TOAST";
+    NotificationType["MODAL"] = "MODAL";
+})(NotificationType || (NotificationType = {}));
+const isToastNotification = (notification) => notification.type === NotificationType.TOAST;
+const isModalNotification = (notification) => notification.type === NotificationType.MODAL;
+export { isToastNotification, isModalNotification };

package/dist/shared/ui/components/atoms/spinner/Spinner.d.ts

@@ -1,3 +1,8 @@
 import { FC } from "react";
-declare const Spinner: FC;
+import { ColorValue } from "react-native";
+interface SpinnerProps {
+    readonly color?: ColorValue;
+    readonly size?: number | "large" | "small";
+}
+declare const Spinner: FC<SpinnerProps>;
 export { Spinner };

package/dist/shared/ui/components/atoms/spinner/Spinner.js

@@ -3,6 +3,6 @@ import { ActivityIndicator, View } from "react-native";
 import { theme } from "../../../../../infrastructure/ui/theme/theme";
 import { style } from "./Spinner.style";
 const { colorPrimary } = theme();
-const Spinner = () => (React.createElement(View, { style: style.container },
-    React.createElement(ActivityIndicator, { color: colorPrimary, size: "large" })));
+const Spinner = ({ color = colorPrimary, size = "large" }) => (React.createElement(View, { style: style.container },
+    React.createElement(ActivityIndicator, { color: color, size: size })));
 export { Spinner };

package/dist/shared/ui/components/layouts/modal/Modal.d.ts

@@ -14,6 +14,7 @@ interface ModalProps {
     readonly scroll?: boolean;
     readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
     readonly style?: Partial<Record<ModalStyle, StyleProp<ViewStyle>>>;
+    readonly testID?: string;
 }
 declare const Modal: FC<ModalProps>;
 export type { ColumnSize };

package/dist/shared/ui/components/layouts/modal/Modal.js

@@ -15,7 +15,7 @@ const { spaceXL, spaceXXL } = theme();
 const TRANSITION_MODAL_SCALE = 0.9;
 const DEFAULT_SAFEAREA_INSET_TOP = spaceXXL;
 const MODAL_DESKTOP_VERTICAL_PADDING = spaceXXL;
-const Modal = ({ children, visible, header, footer, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
+const Modal = ({ children, visible, header, footer, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, testID = "modal", }) => {
     const { height: screenHeight } = Dimensions.get(Platform.OS === "web" ? "window" : "screen");
     const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
     const screenSize = useScreenSize();
@@ -57,7 +57,7 @@ const Modal = ({ children, visible, header, footer, portalHostName, onClose, sho
         unique: true,
     });
     const ModalContentView = useMemo(() => (scroll ? KeyboardAwareScrollView : View), [scroll]);
-    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { pointerEvents: visible ? "auto" : "none", style: style.container, testID: "modal" },
+    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { pointerEvents: visible ? "auto" : "none", style: style.container, testID: testID },
         React.createElement(TouchableWithoutFeedback, { onPress: visible ? onClose : undefined },
             React.createElement(animated.View, { style: [style.overlay, { opacity: overlayOpacity }, customStyle?.overlay] })),
         React.createElement(SafeAreaView, { edges: ["right", "top", "left"], pointerEvents: "box-none", style: style.safeArea },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "0.8.17",
+  "version": "0.8.19-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -35,6 +35,7 @@
     "@react-spring/native": "^9.5.5",
     "@sentry/react-native": "^4.13.0",
     "inline-style-prefixer": "6.0.1",
+    "lodash": "^4.17.21",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "^12.1.1",
@@ -58,8 +59,8 @@
     "react-native": "^0.70.6",
     "react-native-get-random-values": "^1.8.0",
     "react-native-web": "^0.18.9",
-    "react-router-dom": "^6.4.5",
-    "react-router-native": "^6.4.5"
+    "react-router-dom": "^6.8.1",
+    "react-router-native": "^6.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
@@ -85,6 +86,7 @@
     "@types/react-dom": "~18.0.0",
     "@types/react-native": "~0.69.1",
     "@types/uuid": "^9.0.0",
+    "abort-controller": "^3.0.0",
     "apollo-boost": "0.4.4",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.5.0",
@@ -117,8 +119,8 @@
     "react-native-get-random-values": "^1.8.0",
     "react-native-unimodules": "^0.14.10",
     "react-native-web": "^0.18.9",
-    "react-router-dom": "^6.4.5",
-    "react-router-native": "^6.4.5",
+    "react-router-dom": "^6.8.1",
+    "react-router-native": "^6.8.1",
     "react-test-renderer": "^18.0.0",
     "typescript": "^4.9.3",
     "webpack-bundle-analyzer": "^4.7.0"