@mistertemp/libs-front-shared 3.0.3 → 4.0.0-alpha.0

package/src/components/Notifications/NotificationsCenterContext.tsx

@@ -0,0 +1,578 @@
+import { NotificationsContext } from '@mistertemp/design-system';
+import { getToken, OAuthContext } from '@mistertemp/front-core';
+import {
+    CategoryType,
+    NotificationTypes,
+    PublishedNotification,
+} from '@mistertemp/types-agency-notification-center';
+import React, {
+    createContext,
+    Dispatch,
+    SetStateAction,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
+
+import { useBundledTranslation } from '../../hooks';
+import es from '../../locales/es/notification-error.json';
+import fr from '../../locales/fr/notification-error.json';
+import it from '../../locales/it/notification-error.json';
+import { NotificationCenterClientInterface } from './types';
+
+const translationNs = 'notification-error';
+const translations = { it, fr, es };
+
+const POPUP_NOTIFICATION_DURATION = 10000;
+
+export interface NotificationsCenterContextProps {
+    // State
+    unreadNotifications: number;
+    setUnreadNotifications: Dispatch<SetStateAction<number>>;
+    removeUnreadNotification: () => void;
+    unseenNotifications: number;
+    setUnseenNotifications: Dispatch<SetStateAction<number>>;
+    notifications: PublishedNotification<NotificationTypes>[];
+    setNotifications: Dispatch<SetStateAction<PublishedNotification<NotificationTypes>[]>>;
+    addNotification: (notification: PublishedNotification<NotificationTypes>) => void;
+    popupNotifications: PopupNotificationType[];
+    setPopupNotifications: Dispatch<SetStateAction<PopupNotificationType[]>>;
+    addPopupNotification: (notification: PublishedNotification<NotificationTypes>) => void;
+    closePopupNotification: (notification: PublishedNotification<NotificationTypes>) => void;
+    isPopoverOpen: boolean;
+    setIsPopoverOpen: Dispatch<SetStateAction<boolean>>;
+    notificationsHasBeenLoaded: boolean;
+    setNotificationsHasBeenLoaded: Dispatch<SetStateAction<boolean>>;
+    agencyId: string | null | undefined;
+    startDate: Date | undefined;
+    setStartDate: (startDate: Date | undefined) => void;
+    endDate: Date | undefined;
+    setEndDate: (endDate: Date | undefined) => void;
+    isFullPageMode: boolean;
+    setIsFullPageMode: Dispatch<SetStateAction<boolean>>;
+    categories: CategoryType[];
+    setCategories: (categories: CategoryType[]) => void;
+    isDisplayReadNotification: boolean | undefined;
+    setIsDisplayReadNotification: (isDisplayReadNotification: boolean | undefined) => void;
+    // Services
+    markNotificationAsRead: (notificationId: string) => void;
+    markAllAsRead: () => void;
+}
+
+export type PopupNotificationType = PublishedNotification<NotificationTypes> & {
+    displayed: boolean;
+    hidden: boolean;
+};
+
+export interface NotificationsCenterProviderProps {
+    children: React.ReactNode;
+    isFullPageMode?: boolean;
+    /**
+     * The agency/account ID used to scope notifications.
+     * In match context this is agencyId, in customer context this is accountId.
+     */
+    agencyId: string | null | undefined;
+    /**
+     * The notification center client to use for API calls.
+     * Pass `new NotificationCenterClient()` for match,
+     * or `new CustomerNotificationCenterClient(env)` for customer.
+     */
+    client: NotificationCenterClientInterface;
+    /**
+     * Name of the BroadcastChannel used to sync notification state across tabs.
+     * @default 'shared_notifs'
+     */
+    broadcastChannelName?: string;
+}
+
+export const NotificationsCenterContext = createContext<NotificationsCenterContextProps>({
+    // State
+    unreadNotifications: 0,
+    setUnreadNotifications: () => void 0,
+    removeUnreadNotification: () => void 0,
+    unseenNotifications: 0,
+    setUnseenNotifications: () => void 0,
+    notifications: [],
+    addNotification: () => void 0,
+    setNotifications: () => void 0,
+    popupNotifications: [],
+    setPopupNotifications: () => void 0,
+    addPopupNotification: () => void 0,
+    closePopupNotification: () => void 0,
+    isPopoverOpen: false,
+    setIsPopoverOpen: () => void 0,
+    notificationsHasBeenLoaded: false,
+    setNotificationsHasBeenLoaded: () => void 0,
+    agencyId: undefined,
+    isFullPageMode: false,
+    setIsFullPageMode: () => void 0,
+    categories: [],
+    setCategories: () => void 0,
+    startDate: undefined,
+    setStartDate: () => void 0,
+    endDate: undefined,
+    setEndDate: () => void 0,
+    isDisplayReadNotification: undefined,
+    setIsDisplayReadNotification: () => void 0,
+    // Services
+    markNotificationAsRead: () => void 0,
+    markAllAsRead: () => void 0,
+});
+
+NotificationsCenterContext.displayName = 'NotificationsCenter';
+
+export const NotificationsCenterProvider = ({
+    children,
+    isFullPageMode: initialIsFullPageMode = false,
+    agencyId,
+    client,
+    broadcastChannelName = 'shared_notifs',
+}: NotificationsCenterProviderProps) => {
+    const idToken = useMemo(() => getToken('id'), []);
+
+    const { t, isReady } = useBundledTranslation(translationNs, translations);
+
+    const { enqueue } = useContext(NotificationsContext);
+
+    const { decodedIdToken } = useContext(OAuthContext);
+    const userCorrelationId = useMemo(
+        () => decodedIdToken && decodedIdToken['custom:userCorrelationId'],
+        [decodedIdToken],
+    );
+
+    const [closePopupNotifTimeout, setClosePopupNotifTimeout] = useState<NodeJS.Timeout | null>(
+        null,
+    );
+
+    const [unreadNotifications, setUnreadNotifications] = useState<number>(0);
+    const [unseenNotifications, setUnseenNotifications] = useState<number>(0);
+    const [notifications, setNotifications] = useState<PublishedNotification<NotificationTypes>[]>(
+        [],
+    );
+
+    const [popupNotifications, setPopupNotifications] = useState<PopupNotificationType[]>([]);
+
+    const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+    const [isFullPageMode, setIsFullPageMode] = useState<boolean>(initialIsFullPageMode);
+    const [notificationsHasBeenLoaded, setNotificationsHasBeenLoaded] = useState<boolean>(false);
+    const [categories, setCategories] = useState<CategoryType[]>([]);
+    const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+    const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+    const [isDisplayReadNotification, setIsDisplayReadNotification] = useState<boolean | undefined>(
+        isFullPageMode ? undefined : false,
+    );
+
+    const removeUnreadNotification = useCallback(() => {
+        setUnreadNotifications(unreadNotifications - 1);
+    }, [unreadNotifications]);
+
+    const broadcastChannel = useMemo(
+        () => new BroadcastChannel(broadcastChannelName),
+        [broadcastChannelName],
+    );
+
+    const markAllAsReadStates = useCallback(async () => {
+        setUnreadNotifications(0);
+        setNotifications(
+            notifications.map((notification) => ({
+                ...notification,
+                readAt: notification.readAt ?? new Date().toISOString(),
+            })),
+        );
+    }, [notifications]);
+
+    const markNotificationAsReadStates = useCallback(
+        async (notificationId: string) => {
+            removeUnreadNotification();
+            setNotifications(
+                notifications.map((notification) => ({
+                    ...notification,
+                    readAt:
+                        notification.notificationId === notificationId
+                            ? new Date().toISOString()
+                            : notification.readAt,
+                })),
+            );
+        },
+        [removeUnreadNotification, notifications],
+    );
+
+    const markAlertAsOpenStates = useCallback(async () => {
+        setNotifications(
+            notifications.map((notification) => ({
+                ...notification,
+                seenAt: notification.seenAt ?? new Date().toISOString(),
+            })),
+        );
+        setUnseenNotifications(0);
+    }, [notifications]);
+
+    const listener = useCallback(
+        async ({
+            data: { method, params },
+        }: {
+            data: { method: string; params: { notificationId: string } };
+        }) => {
+            switch (method) {
+                case 'markAllAsRead':
+                    await markAllAsReadStates();
+                    break;
+                case 'markNotificationAsRead':
+                    if (params.notificationId) {
+                        await markNotificationAsReadStates(params.notificationId);
+                    }
+                    break;
+                case 'markAlertAsOpen':
+                    await markAlertAsOpenStates();
+                    break;
+                default:
+                    break;
+            }
+        },
+        [markAllAsReadStates, markNotificationAsReadStates, markAlertAsOpenStates],
+    );
+
+    useEffect(() => {
+        broadcastChannel.addEventListener('message', listener);
+
+        return () => broadcastChannel.removeEventListener('message', listener);
+    }, [broadcastChannel, listener]);
+
+    useEffect(() => {
+        if (isPopoverOpen && !isFullPageMode) {
+            setIsDisplayReadNotification(false);
+        }
+    }, [isPopoverOpen, isFullPageMode]);
+
+    const addNotification = useCallback(
+        (notification: PublishedNotification<NotificationTypes>) => {
+            setNotifications([
+                notification,
+                ...notifications.filter((n) => n.notificationId !== notification.notificationId),
+            ]);
+        },
+        [notifications],
+    );
+
+    const closePopupNotification = useCallback(
+        (notification: PublishedNotification<NotificationTypes>) => {
+            if (closePopupNotifTimeout) {
+                clearTimeout(closePopupNotifTimeout);
+                setClosePopupNotifTimeout(null);
+            }
+
+            setPopupNotifications((oldArray) =>
+                oldArray.map((n) =>
+                    n.notificationId === notification.notificationId ? { ...n, hidden: true } : n,
+                ),
+            );
+
+            setTimeout(() => {
+                setPopupNotifications((oldArray) =>
+                    oldArray.filter((n) => n.notificationId !== notification.notificationId),
+                );
+            }, 1000);
+        },
+        [closePopupNotifTimeout],
+    );
+
+    const addPopupNotification = useCallback(
+        (notification: PublishedNotification<NotificationTypes>) => {
+            setPopupNotifications((oldArray) => [
+                { ...notification, displayed: false, hidden: false },
+                ...oldArray.filter((n) => n.notificationId !== notification.notificationId),
+            ]);
+            setTimeout(() => {
+                setPopupNotifications((oldArray) =>
+                    oldArray.map((n) => ({ ...n, displayed: true })),
+                );
+            }, 100);
+
+            setClosePopupNotifTimeout(
+                setTimeout(() => {
+                    closePopupNotification(notification);
+                }, POPUP_NOTIFICATION_DURATION),
+            );
+        },
+        [closePopupNotification],
+    );
+
+    /**
+     * Call the API to mark a notification as read, and update notifications state
+     */
+    const markNotificationAsRead = useCallback(
+        async (notificationId: string) => {
+            if (!idToken || !userCorrelationId || !agencyId) {
+                enqueue({
+                    text: `${t('notification-error:common.userNotAuthenticated')}`,
+                    isPersistant: true,
+                    type: 'negative',
+                });
+
+                return;
+            }
+
+            try {
+                await markNotificationAsReadStates(notificationId);
+                await client.markNotificationAsRead({
+                    userCorrelationId,
+                    agencyId,
+                    notificationId,
+                    token: idToken,
+                });
+                broadcastChannel.postMessage({
+                    method: 'markNotificationAsRead',
+                    params: { notificationId },
+                });
+            } catch (error) {
+                console.error(error);
+                enqueue({
+                    text: `${t('notification-error:notifications.markNotificationAsRead')}`,
+                    isPersistant: true,
+                    type: 'negative',
+                });
+            }
+        },
+        [
+            idToken,
+            userCorrelationId,
+            agencyId,
+            enqueue,
+            t,
+            client,
+            broadcastChannel,
+            markNotificationAsReadStates,
+        ],
+    );
+
+    /**
+     * Call the API to mark all notifications as read, and update notifications state
+     */
+    const markAllAsRead = useCallback(async () => {
+        if (!idToken || !userCorrelationId || !agencyId) {
+            enqueue({
+                text: `${t('notification-error:common.userNotAuthenticated')}`,
+                isPersistant: true,
+                type: 'negative',
+            });
+
+            return;
+        }
+
+        try {
+            await markAllAsReadStates();
+            await client.markAllNotificationAsRead({
+                userCorrelationId,
+                agencyId,
+                token: idToken,
+            });
+            broadcastChannel.postMessage({ method: 'markAllAsRead' });
+        } catch (error) {
+            console.error(error);
+            enqueue({
+                text: `${t('notification-error:notifications.markAllNotificationAsRead')}`,
+                isPersistant: true,
+                type: 'negative',
+            });
+        }
+    }, [
+        idToken,
+        userCorrelationId,
+        agencyId,
+        enqueue,
+        t,
+        client,
+        markAllAsReadStates,
+        broadcastChannel,
+    ]);
+
+    /**
+     * On the first popover opening, call the API to get the notifications list
+     */
+    useEffect(() => {
+        if (!idToken || !userCorrelationId || !agencyId) {
+            enqueue({
+                text: `${t('notification-error:common.userNotAuthenticated')}`,
+                isPersistant: true,
+                type: 'negative',
+            });
+
+            return;
+        }
+
+        const queryString: Record<string, unknown> = { isRead: isDisplayReadNotification };
+
+        if (categories.length) {
+            queryString.categories = categories.join(', ');
+        }
+
+        if (startDate !== undefined && endDate !== undefined && startDate < endDate) {
+            queryString.startDate = startDate.toISOString();
+            queryString.endDate = endDate.toISOString();
+        }
+
+        setNotificationsHasBeenLoaded(false);
+        client
+            .getNotificationList({
+                userCorrelationId,
+                agencyId,
+                token: idToken,
+                queryString,
+            })
+            .then((fetchedNotifications) => {
+                setNotifications(
+                    fetchedNotifications.sort(
+                        (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+                    ),
+                );
+            })
+            .catch((error) => {
+                console.error(error);
+                enqueue({
+                    text: `${t('notification-error:notifications.getNotificationList')}`,
+                    isPersistant: true,
+                    type: 'negative',
+                });
+            })
+            .finally(() => {
+                setNotificationsHasBeenLoaded(true);
+            });
+    }, [
+        client,
+        isPopoverOpen,
+        idToken,
+        userCorrelationId,
+        agencyId,
+        enqueue,
+        t,
+        isFullPageMode,
+        categories,
+        startDate,
+        endDate,
+        isDisplayReadNotification,
+    ]);
+
+    /**
+     * On the first render, call the API to get the number of unread and unseen notifications
+     */
+    useEffect(() => {
+        if (!idToken || !userCorrelationId || !agencyId || !isReady) {
+            return;
+        }
+
+        client
+            .getNotificationStatus({
+                userCorrelationId,
+                agencyId,
+                token: idToken,
+            })
+            .then((notificationsStatus) => {
+                setUnreadNotifications(notificationsStatus.countUnread);
+                setUnseenNotifications(notificationsStatus.countUnseen);
+            })
+            .catch(() => {
+                if (process.env.ENV !== 'sta') {
+                    enqueue({
+                        text: `${t('notification-error:notifications.getNotificationStatus')}`,
+                        isPersistant: true,
+                        type: 'negative',
+                    });
+                }
+            });
+    }, [client, idToken, agencyId, userCorrelationId, enqueue, t, isReady]);
+
+    /**
+     * On popover opening, if there are notifications not seen, call the API to mark them as open
+     */
+    useEffect(() => {
+        const hasNotificationsNotSeen = notifications.some(
+            (notification) => notification.seenAt === undefined,
+        );
+
+        if (hasNotificationsNotSeen && (isPopoverOpen || isFullPageMode)) {
+            if (!idToken || !userCorrelationId || !agencyId) {
+                enqueue({
+                    text: `${t('notification-error:common.userNotAuthenticated')}`,
+                    isPersistant: true,
+                    type: 'negative',
+                });
+
+                return;
+            }
+
+            client
+                .markAlertAsOpen({
+                    userCorrelationId,
+                    agencyId,
+                    token: idToken,
+                })
+                .then(() => {
+                    markAlertAsOpenStates();
+                    broadcastChannel.postMessage({ method: 'markAlertAsOpen' });
+                })
+                .catch((error) => {
+                    console.error(error);
+                    enqueue({
+                        text: `${t('notification-error:notifications.markAlertAsOpen')}`,
+                        isPersistant: true,
+                        type: 'negative',
+                    });
+                });
+        }
+    }, [
+        notifications,
+        idToken,
+        agencyId,
+        userCorrelationId,
+        isPopoverOpen,
+        client,
+        enqueue,
+        t,
+        broadcastChannel,
+        markAlertAsOpenStates,
+        isFullPageMode,
+    ]);
+
+    return (
+        <NotificationsCenterContext.Provider
+            value={{
+                // State
+                unreadNotifications,
+                setUnreadNotifications,
+                removeUnreadNotification,
+                unseenNotifications,
+                setUnseenNotifications,
+                notifications,
+                setNotifications,
+                addNotification,
+                popupNotifications,
+                setPopupNotifications,
+                addPopupNotification,
+                closePopupNotification,
+                isPopoverOpen,
+                setIsPopoverOpen,
+                notificationsHasBeenLoaded,
+                setNotificationsHasBeenLoaded,
+                agencyId,
+                isFullPageMode,
+                setIsFullPageMode,
+                categories,
+                setCategories,
+                startDate,
+                setStartDate,
+                endDate,
+                setEndDate,
+                isDisplayReadNotification,
+                setIsDisplayReadNotification,
+                // Services
+                markNotificationAsRead,
+                markAllAsRead,
+            }}>
+            {children}
+        </NotificationsCenterContext.Provider>
+    );
+};
+
+export const useNotificationsCenterContext = () => useContext(NotificationsCenterContext);