@finsemble/finsemble-ui 7.2.1 → 7.3.0-beta.1

package/react/components/notifications/components/shared/NotificationCardShell.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { services } from "@finsemble/finsemble-api";
+import "../../css/notification-card.css";
 declare type INotification = services.notification.types.INotification;
 export declare type NotificationCardPropType = {
     /**
@@ -14,6 +15,7 @@ export declare type NotificationCardPropType = {
      * The internal function that will be called on toasts when dismissed or marked as read
      */
     removeNotification: Function;
+    preferences?: any;
 };
 export declare const NotificationCardShell: React.FunctionComponent<NotificationCardPropType>;
 export {};

package/react/components/notifications/components/shared/NotificationCardShell.js

@@ -4,45 +4,70 @@ import { isNewNotification, isReNotification, getMostRecentAction } from "../../
 import { NotificationCardHeaderShell } from "./notificationCard/NotificationCardHeaderShell";
 import { NotificationCardBodyShell } from "./notificationCard/NotificationCardBodyShell";
 import { ErrorBoundary } from "../../../common/ErrorBoundary";
-export const NotificationCardShell = ({ notification, uiContext, removeNotification, children, }) => {
+import "../../css/notification-card.css";
+export const NotificationCardShell = ({ notification, uiContext = "center", removeNotification, children, }) => {
     const { isRead } = notification;
     const [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);
     const [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));
     const [componentUnmounted, setComponentUnmounted] = useState(false);
     const [wokeFromSnooze, setWokeFromSnooze] = useState(isReNotification(notification, newNotificationHaloPeriodSeconds));
-    // Sets the current default preference
-    useEffect(() => {
-        const getNotificationsPreferences = async () => {
-            const preferences = await FSBL.Clients.NotificationClient.getPreferences();
-            setNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);
+    if (uiContext == "center") {
+        // Sets the current default preference
+        useEffect(() => {
+            const getNotificationsPreferences = async () => {
+                var _a;
+                const preferences = await FSBL.Clients.NotificationClient.getPreferences();
+                const haloPeriod = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.newNotificationHaloPeriodSeconds) !== null && _a !== void 0 ? _a : 0;
+                setNotificationHaloPeriodSeconds(haloPeriod);
+                if (!componentUnmounted) {
+                    setIsNew(isNewNotification(notification, haloPeriod));
+                }
+            };
             if (!componentUnmounted) {
-                setIsNew(isNewNotification(notification, preferences.newNotificationHaloPeriodSeconds));
+                getNotificationsPreferences();
             }
-        };
-        getNotificationsPreferences();
-        return () => {
-            setComponentUnmounted(true);
-        };
-    }, []);
-    // Listens for preferences change
-    useEffect(() => {
-        async function listenForPreferenceChange(error, response) {
-            if (error) {
-                console.error("FinsembleUserPreferencesChannel: ", error);
+            return () => {
+                setComponentUnmounted(true);
+            };
+        }, []);
+        // Listens for preferences change
+        useEffect(() => {
+            function listenForPreferenceChange(error, response) {
+                var _a, _b;
+                if (error) {
+                    console.error("FinsembleUserPreferencesChannel: ", error);
+                    FSBL.Clients.Logger.system.error("FinsembleUserPreferencesChannel: ", error);
+                }
+                else {
+                    const { data } = response;
+                    setNotificationHaloPeriodSeconds((_b = (_a = data === null || data === void 0 ? void 0 : data.notificationPreferences) === null || _a === void 0 ? void 0 : _a.newNotificationHaloPeriodSeconds) !== null && _b !== void 0 ? _b : 0);
+                }
             }
-            else {
-                const { data } = response;
-                if (data.notificationPreferences &&
-                    data.notificationPreferences.hasOwnProperty("newNotificationHaloPeriodSeconds")) {
-                    setNotificationHaloPeriodSeconds(data.notificationPreferences.newNotificationHaloPeriodSeconds);
+            FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
+            return () => {
+                FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
+            };
+        }, []);
+        useEffect(() => {
+            let isRenotificationTimerId;
+            if (isReNotification(notification, newNotificationHaloPeriodSeconds)) {
+                const mostRecentAction = getMostRecentAction(notification);
+                if (mostRecentAction) {
+                    setWokeFromSnooze(true);
+                    isRenotificationTimerId = setTimeout(() => {
+                        setWokeFromSnooze(false);
+                    }, differenceInMilliseconds(addSeconds(parseISO(mostRecentAction.datePerformed), newNotificationHaloPeriodSeconds), Date.now()));
                 }
             }
-        }
-        FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
-        return () => {
-            FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
-        };
-    }, []);
+            else {
+                setWokeFromSnooze(false);
+                clearTimeout(isRenotificationTimerId);
+            }
+            return () => {
+                clearTimeout(isRenotificationTimerId);
+            };
+        }, [newNotificationHaloPeriodSeconds, notification]);
+    }
     useEffect(() => {
         let isNewTimerId;
         if (isNew) {
@@ -60,27 +85,8 @@ export const NotificationCardShell = ({ notification, uiContext, removeNotificat
             clearTimeout(isNewTimerId);
         };
     }, [isNew, notification]);
-    useEffect(() => {
-        let isRenotificationTimerId;
-        if (isReNotification(notification, newNotificationHaloPeriodSeconds)) {
-            const mostRecentAction = getMostRecentAction(notification);
-            if (mostRecentAction) {
-                setWokeFromSnooze(true);
-                isRenotificationTimerId = setTimeout(() => {
-                    setWokeFromSnooze(false);
-                }, differenceInMilliseconds(addSeconds(parseISO(mostRecentAction.datePerformed), newNotificationHaloPeriodSeconds), Date.now()));
-            }
-        }
-        else {
-            setWokeFromSnooze(false);
-            clearTimeout(isRenotificationTimerId);
-        }
-        return () => {
-            clearTimeout(isRenotificationTimerId);
-        };
-    }, [newNotificationHaloPeriodSeconds, notification]);
     return (React.createElement("div", { className: `notification-card ${isRead ? "read" : ""} ${isNew || wokeFromSnooze ? "new" : ""} 
-			${notification.cssClassName ? notification.cssClassName : ""}` }, children ? (React.createElement(ErrorBoundary, null, children)) : (React.createElement(React.Fragment, null,
+			${notification.cssClassName ? notification.cssClassName : ""} js-${uiContext}` }, children ? (React.createElement(ErrorBoundary, null, children)) : (React.createElement(React.Fragment, null,
         React.createElement(NotificationCardHeaderShell, { notification: notification, removeNotification: removeNotification, uiContext: uiContext }),
         React.createElement(NotificationCardBodyShell, { notification: notification })))));
 };

package/react/components/notifications/components/shared/NotificationCardShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardShell.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/NotificationCardShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,2BAA2B,EAAE,MAAM,gDAAgD,CAAC;AAC7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,8CAA8C,CAAC;AAEzF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAsB9D,MAAM,CAAC,MAAM,qBAAqB,GAAsD,CAAC,EACxF,YAAY,EACZ,SAAS,EACT,kBAAkB,EAClB,QAAQ,GACR,EAAE,EAAE;IACJ,MAAM,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC;IAEhC,MAAM,CAAC,gCAAgC,EAAE,gCAAgC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEzF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,YAAY,EAAE,gCAAgC,CAAC,CAAC,CAAC;IACtG,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CACnD,gBAAgB,CAAC,YAAY,EAAE,gCAAgC,CAAC,CAChE,CAAC;IAEF,sCAAsC;IACtC,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,2BAA2B,GAAG,KAAK,IAAI,EAAE;YAC9C,MAAM,WAAW,GAAQ,MAAM,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,cAAc,EAAE,CAAC;YAChF,gCAAgC,CAAC,WAAW,CAAC,gCAAgC,CAAC,CAAC;YAC/E,IAAI,CAAC,kBAAkB,EAAE;gBACxB,QAAQ,CAAC,iBAAiB,CAAC,YAAY,EAAE,WAAW,CAAC,gCAAgC,CAAC,CAAC,CAAC;aACxF;QACF,CAAC,CAAC;QAEF,2BAA2B,EAAE,CAAC;QAC9B,OAAO,GAAG,EAAE;YACX,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iCAAiC;IACjC,SAAS,CAAC,GAAG,EAAE;QACd,KAAK,UAAU,yBAAyB,CAAC,KAAU,EAAE,QAAa;YACjE,IAAI,KAAK,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAC;aAC1D;iBAAM;gBACN,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAC;gBAC1B,IACC,IAAI,CAAC,uBAAuB;oBAC5B,IAAI,CAAC,uBAAuB,CAAC,cAAc,CAAC,kCAAkC,CAAC,EAC9E;oBACD,gCAAgC,CAAC,IAAI,CAAC,uBAAuB,CAAC,gCAAgC,CAAC,CAAC;iBAChG;aACD;QACF,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,iCAAiC,EAAE,yBAAyB,CAAC,CAAC;QACpG,OAAO,GAAG,EAAE;YACX,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,CAAC,iCAAiC,EAAE,yBAAyB,CAAC,CAAC;QACxG,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,YAAiB,CAAC;QACtB,IAAI,KAAK,EAAE;YACV,IAAI,YAAY,CAAC,MAAM,EAAE;gBACxB,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAChB,YAAY,CAAC,YAAY,CAAC,CAAC;aAC3B;iBAAM;gBACN,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC9B,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACjB,CAAC,EAAE,wBAAwB,CAAC,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,gCAAgC,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;aACxH;SACD;QACD,OAAO,GAAG,EAAE;YACX,YAAY,CAAC,YAAY,CAAC,CAAC;QAC5B,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE1B,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,uBAA4B,CAAC;QACjC,IAAI,gBAAgB,CAAC,YAAY,EAAE,gCAAgC,CAAC,EAAE;YACrE,MAAM,gBAAgB,GAA4B,mBAAmB,CAAC,YAAY,CAAC,CAAC;YACpF,IAAI,gBAAgB,EAAE;gBACrB,iBAAiB,CAAC,IAAI,CAAC,CAAC;gBACxB,uBAAuB,GAAG,UAAU,CAAC,GAAG,EAAE;oBACzC,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,EAAE,wBAAwB,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,gCAAgC,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;aACjI;SACD;aAAM;YACN,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,YAAY,CAAC,uBAAuB,CAAC,CAAC;SACtC;QACD,OAAO,GAAG,EAAE;YACX,YAAY,CAAC,uBAAuB,CAAC,CAAC;QACvC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,gCAAgC,EAAE,YAAY,CAAC,CAAC,CAAC;IACrD,OAAO,CACN,6BACC,SAAS,EAAE,qBAAqB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;KAC1F,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,IAE7D,QAAQ,CAAC,CAAC,CAAC,CACX,oBAAC,aAAa,QAAE,QAAQ,CAAiB,CACzC,CAAC,CAAC,CAAC,CACH;QACC,oBAAC,2BAA2B,IAC3B,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,SAAS,GACnB;QACF,oBAAC,yBAAyB,IAAC,YAAY,EAAE,YAAY,GAAI,CACvD,CACH,CACI,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { parseISO, differenceInMilliseconds, addSeconds } from \"date-fns\";\nimport { isNewNotification, isReNotification, getMostRecentAction } from \"../../utils\";\nimport { NotificationCardHeaderShell } from \"./notificationCard/NotificationCardHeaderShell\";\nimport { NotificationCardBodyShell } from \"./notificationCard/NotificationCardBodyShell\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nexport type NotificationCardPropType = {\n\t/**\n\t * The Notification to be displayed\n\t */\n\tnotification: INotification;\n\n\t/**\n\t * Which UI context the Card is being used in\n\t */\n\tuiContext: \"toasts\" | \"center\";\n\n\t/**\n\t * The internal function that will be called on toasts when dismissed or marked as read\n\t */\n\tremoveNotification: Function;\n};\n\nexport const NotificationCardShell: React.FunctionComponent<NotificationCardPropType> = ({\n\tnotification,\n\tuiContext,\n\tremoveNotification,\n\tchildren,\n}) => {\n\tconst { isRead } = notification;\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [componentUnmounted, setComponentUnmounted] = useState<boolean>(false);\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\n\t// Sets the current default preference\n\tuseEffect(() => {\n\t\tconst getNotificationsPreferences = async () => {\n\t\t\tconst preferences: any = await FSBL.Clients.NotificationClient.getPreferences();\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\n\t\t\tif (!componentUnmounted) {\n\t\t\t\tsetIsNew(isNewNotification(notification, preferences.newNotificationHaloPeriodSeconds));\n\t\t\t}\n\t\t};\n\n\t\tgetNotificationsPreferences();\n\t\treturn () => {\n\t\t\tsetComponentUnmounted(true);\n\t\t};\n\t}, []);\n\n\t// Listens for preferences change\n\tuseEffect(() => {\n\t\tasync function listenForPreferenceChange(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleUserPreferencesChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (\n\t\t\t\t\tdata.notificationPreferences &&\n\t\t\t\t\tdata.notificationPreferences.hasOwnProperty(\"newNotificationHaloPeriodSeconds\")\n\t\t\t\t) {\n\t\t\t\t\tsetNotificationHaloPeriodSeconds(data.notificationPreferences.newNotificationHaloPeriodSeconds);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\tuseEffect(() => {\n\t\tlet isRenotificationTimerId: any;\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\n\t\t\tif (mostRecentAction) {\n\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(mostRecentAction.datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t} else {\n\t\t\tsetWokeFromSnooze(false);\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t};\n\t}, [newNotificationHaloPeriodSeconds, notification]);\n\treturn (\n\t\t<div\n\t\t\tclassName={`notification-card ${isRead ? \"read\" : \"\"} ${isNew || wokeFromSnooze ? \"new\" : \"\"} \n\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<ErrorBoundary>{children}</ErrorBoundary>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<NotificationCardHeaderShell\n\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\tremoveNotification={removeNotification}\n\t\t\t\t\t\tuiContext={uiContext}\n\t\t\t\t\t/>\n\t\t\t\t\t<NotificationCardBodyShell notification={notification} />\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"NotificationCardShell.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/NotificationCardShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { parseISO, differenceInMilliseconds, addSeconds } from \"date-fns\";\nimport { isNewNotification, isReNotification, getMostRecentAction } from \"../../utils\";\nimport { NotificationCardHeaderShell } from \"./notificationCard/NotificationCardHeaderShell\";\nimport { NotificationCardBodyShell } from \"./notificationCard/NotificationCardBodyShell\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\nimport \"../../css/notification-card.css\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nexport type NotificationCardPropType = {\n\t/**\n\t * The Notification to be displayed\n\t */\n\tnotification: INotification;\n\n\t/**\n\t * Which UI context the Card is being used in\n\t */\n\tuiContext: \"toasts\" | \"center\";\n\n\t/**\n\t * The internal function that will be called on toasts when dismissed or marked as read\n\t */\n\tremoveNotification: Function;\n\tpreferences?: any;\n};\n\nexport const NotificationCardShell: React.FunctionComponent<NotificationCardPropType> = ({\n\tnotification,\n\tuiContext = \"center\",\n\tremoveNotification,\n\tchildren,\n}) => {\n\tconst { isRead } = notification;\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [componentUnmounted, setComponentUnmounted] = useState<boolean>(false);\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\n\tif (uiContext == \"center\") {\n\t\t// Sets the current default preference\n\t\tuseEffect(() => {\n\t\t\tconst getNotificationsPreferences = async () => {\n\t\t\t\tconst preferences: any = await FSBL.Clients.NotificationClient.getPreferences();\n\t\t\t\tconst haloPeriod = preferences?.newNotificationHaloPeriodSeconds ?? 0;\n\t\t\t\tsetNotificationHaloPeriodSeconds(haloPeriod);\n\t\t\t\tif (!componentUnmounted) {\n\t\t\t\t\tsetIsNew(isNewNotification(notification, haloPeriod));\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tif (!componentUnmounted) {\n\t\t\t\tgetNotificationsPreferences();\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tsetComponentUnmounted(true);\n\t\t\t};\n\t\t}, []);\n\n\t\t// Listens for preferences change\n\t\tuseEffect(() => {\n\t\t\tfunction listenForPreferenceChange(error: any, response: any) {\n\t\t\t\tif (error) {\n\t\t\t\t\tconsole.error(\"FinsembleUserPreferencesChannel: \", error);\n\t\t\t\t\tFSBL.Clients.Logger.system.error(\"FinsembleUserPreferencesChannel: \", error);\n\t\t\t\t} else {\n\t\t\t\t\tconst { data } = response;\n\t\t\t\t\tsetNotificationHaloPeriodSeconds(data?.notificationPreferences?.newNotificationHaloPeriodSeconds ?? 0);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\n\t\t\treturn () => {\n\t\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\n\t\t\t};\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tlet isRenotificationTimerId: any;\n\t\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\n\t\t\t\tif (mostRecentAction) {\n\t\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(mostRecentAction.datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t\t};\n\t\t}, [newNotificationHaloPeriodSeconds, notification]);\n\t}\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`notification-card ${isRead ? \"read\" : \"\"} ${isNew || wokeFromSnooze ? \"new\" : \"\"} \n\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"} js-${uiContext}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<ErrorBoundary>{children}</ErrorBoundary>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<NotificationCardHeaderShell\n\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\tremoveNotification={removeNotification}\n\t\t\t\t\t\tuiContext={uiContext}\n\t\t\t\t\t/>\n\t\t\t\t\t<NotificationCardBodyShell notification={notification} />\n\t\t\t\t</>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.js

@@ -3,9 +3,8 @@ import { NotificationCardBodyActions } from "./NotificationCardBodyActions";
 import { NotificationCardBodyContentLogo } from "./NotificationCardBodyContentLogo";
 import { ErrorBoundary } from "../../../../common/ErrorBoundary";
 export const NotificationCardBodyShell = ({ notification, children, }) => {
-    const { actions, details, contentLogo } = notification;
-    const hasActions = actions && actions.length > 0;
-    return (React.createElement("div", { className: `notification-card__body ${hasActions ? "actions" : ""}` },
+    const { details, contentLogo } = notification;
+    return (React.createElement("div", { className: "notification-card__body" },
         children ? (React.createElement(ErrorBoundary, null, children)) : (React.createElement(React.Fragment, null,
             React.createElement(NotificationCardBodyContentLogo, { contentLogo: contentLogo }),
             React.createElement("div", { className: "notification-card__body_text" }, details))),

package/react/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardBodyShell.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjE,MAAM,CAAC,MAAM,yBAAyB,GAA6D,CAAC,EACnG,YAAY,EACZ,QAAQ,GACR,EAAE,EAAE;IACJ,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC;IACvD,MAAM,UAAU,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjD,OAAO,CACN,6BAAK,SAAS,EAAE,2BAA2B,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;QACtE,QAAQ,CAAC,CAAC,CAAC,CACX,oBAAC,aAAa,QAAE,QAAQ,CAAiB,CACzC,CAAC,CAAC,CAAC,CACH;YACC,oBAAC,+BAA+B,IAAC,WAAW,EAAE,WAAW,GAAI;YAC7D,6BAAK,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAO,CAC3D,CACH;QACD,oBAAC,2BAA2B,IAAC,YAAY,EAAE,YAAY,GAAI,CACtD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { NotificationCardBodyActions } from \"./NotificationCardBodyActions\";\nimport { NotificationCardBodyContentLogo } from \"./NotificationCardBodyContentLogo\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\n\nexport const NotificationCardBodyShell: React.FunctionComponent<{ notification: INotification }> = ({\n\tnotification,\n\tchildren,\n}) => {\n\tconst { actions, details, contentLogo } = notification;\n\tconst hasActions = actions && actions.length > 0;\n\n\treturn (\n\t\t<div className={`notification-card__body ${hasActions ? \"actions\" : \"\"}`}>\n\t\t\t{children ? (\n\t\t\t\t<ErrorBoundary>{children}</ErrorBoundary>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<NotificationCardBodyContentLogo contentLogo={contentLogo} />\n\t\t\t\t\t<div className=\"notification-card__body_text\">{details}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<NotificationCardBodyActions notification={notification} />\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"NotificationCardBodyShell.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjE,MAAM,CAAC,MAAM,yBAAyB,GAA6D,CAAC,EACnG,YAAY,EACZ,QAAQ,GACR,EAAE,EAAE;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC;IAE9C,OAAO,CACN,6BAAK,SAAS,EAAC,yBAAyB;QACtC,QAAQ,CAAC,CAAC,CAAC,CACX,oBAAC,aAAa,QAAE,QAAQ,CAAiB,CACzC,CAAC,CAAC,CAAC,CACH;YACC,oBAAC,+BAA+B,IAAC,WAAW,EAAE,WAAW,GAAI;YAC7D,6BAAK,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAO,CAC3D,CACH;QACD,oBAAC,2BAA2B,IAAC,YAAY,EAAE,YAAY,GAAI,CACtD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { NotificationCardBodyActions } from \"./NotificationCardBodyActions\";\nimport { NotificationCardBodyContentLogo } from \"./NotificationCardBodyContentLogo\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\n\nexport const NotificationCardBodyShell: React.FunctionComponent<{ notification: INotification }> = ({\n\tnotification,\n\tchildren,\n}) => {\n\tconst { details, contentLogo } = notification;\n\n\treturn (\n\t\t<div className=\"notification-card__body\">\n\t\t\t{children ? (\n\t\t\t\t<ErrorBoundary>{children}</ErrorBoundary>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<NotificationCardBodyContentLogo contentLogo={contentLogo} />\n\t\t\t\t\t<div className=\"notification-card__body_text\">{details}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<NotificationCardBodyActions notification={notification} />\n\t\t</div>\n\t);\n};\n"]}

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 import { services } from "@finsemble/finsemble-api";
+import { ContextMenuAction } from "../../../types";
 declare type INotification = services.notification.types.INotification;
+export declare const ContextMenuActions: {
+    [key: string]: ContextMenuAction;
+};
 export declare const NotificationCardHeaderControls: React.FunctionComponent<{
     notification: INotification;
     uiContext?: string;

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.js

@@ -1,12 +1,84 @@
 import React, { useContext, useEffect, useState } from "react";
-import IconButton from "../IconButton";
-import OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from "../OverflowMenu";
+import ContextMenuToggle from "../../../../common/ContextMenu";
 import { NotificationsContext } from "../../../notificationsContext";
 import { formatDistanceToNow } from "date-fns";
+import { markNotificationsRead, markNotificationsUnread, snoozeNotifications, } from "../../../../../hooks/useNotifications";
+// Icons
+import EnvelopeCloseIcon from "../../../../notifications/icons/EnvelopeClose";
+import EnvelopeOpenIcon from "../../../../notifications/icons/EnvelopeOpen";
+import SnoozeIcon from "../../../../notifications/icons/SnoozeIcon";
+import IconButton from "../IconButton";
+export const ContextMenuActions = {
+    MARK_AS_UNREAD: {
+        name: "MARK_AS_UNREAD",
+        icon: React.createElement(EnvelopeCloseIcon, null),
+        label: "Mark Unread",
+        action: (notification) => markNotificationsUnread([notification]),
+        display: true,
+    },
+    MARK_AS_READ: {
+        name: "MARK_AS_READ",
+        icon: React.createElement(EnvelopeOpenIcon, null),
+        label: "Mark Read",
+        action: (notification) => markNotificationsRead([notification]),
+        display: true,
+    },
+    SNOOZE: {
+        name: "SNOOZE",
+        icon: React.createElement(SnoozeIcon, null),
+        label: "Snooze",
+        action: (notification) => snoozeNotifications([notification]),
+        display: true,
+    },
+    DISMISS: {
+        name: "DISMISS",
+        icon: (React.createElement("div", { className: "finsemble-icon" },
+            React.createElement("i", { className: "ff-close" }))),
+        label: "Dismiss",
+        action: () => {
+            // Empty - filled in later
+        },
+        display: true,
+    },
+    SETTINGS: {
+        name: "SETTINGS",
+        icon: (React.createElement("div", { className: "finsemble-icon" },
+            React.createElement("i", { className: "ff-settings" }))),
+        label: "Settings",
+        action: (notification) => {
+            FSBL.Clients.LauncherClient.showWindow({
+                componentType: "UserPreferences",
+            }, {
+                monitor: "mine",
+                left: "center",
+                top: "center",
+            }, () => {
+                FSBL.Clients.RouterClient.transmit("FinsembleUserPreferencesChannel", {
+                    preferencesTab: "Notifications",
+                    notification,
+                });
+                // we need this timeout otherwise the UserPreferences screen does not detect the message being transmited
+                setTimeout(() => {
+                    FSBL.Clients.RouterClient.transmit("FinsembleNotificationsNavigationChannel", { notification });
+                }, 50);
+            });
+        },
+        display: true,
+    },
+    DETAILS: {
+        name: "DETAILS",
+        icon: (React.createElement("div", { className: "finsemble-icon" },
+            React.createElement("i", { className: "ff-dots-horz" }))),
+        label: "Details",
+        action: () => {
+            // Empty - filled in later
+        },
+        display: true,
+    },
+};
 export const NotificationCardHeaderControls = ({ notification, removeNotification, uiContext = "center" }) => {
     const notificationsContext = useContext(NotificationsContext);
     const { setSelectedNotification, muteFilters } = notificationsContext;
-    const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
     const [isMuteFilterApplied, setIsMuteFilterApplied] = useState(muteFilters
         ? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)
         : false);
@@ -14,22 +86,23 @@ export const NotificationCardHeaderControls = ({ notification, removeNotificatio
         includeSeconds: true,
     }));
     useEffect(() => {
+        var _a;
         const id = setInterval(() => {
             setTime(formatDistanceToNow(new Date(notification.issuedAt), {
                 includeSeconds: true,
             }));
         }, 60000);
+        // when running unit tests in node.js, node does not exit until timeouts and intervals are done
+        // Calling this allows node to exit without waiting for setInterval to complete.
+        (_a = id.unref) === null || _a === void 0 ? void 0 : _a.call(id);
         return () => clearInterval(id);
     });
-    const toggleOverflowMenu = () => {
-        setOverflowMenuOpen(!overflowMenuOpen);
-    };
-    const overFlowActions = Object.assign({}, OverflowMenuActions);
+    const overFlowActions = Object.assign({}, ContextMenuActions);
     let optionsToggleClassName = "notification-card__more-options__toggle";
     if (uiContext === "center") {
         delete overFlowActions.DISMISS;
-        overFlowActions.DETAILS.action = (overflowNotification) => {
-            setSelectedNotification(overflowNotification);
+        overFlowActions.DETAILS.action = (contextNotification) => {
+            setSelectedNotification(contextNotification);
         };
     }
     else {
@@ -39,10 +112,17 @@ export const NotificationCardHeaderControls = ({ notification, removeNotificatio
         delete overFlowActions.DETAILS;
         delete overFlowActions.DISMISS;
     }
+    // Don't display read if notification is read
+    if (overFlowActions.MARK_AS_READ)
+        overFlowActions.MARK_AS_READ.display = !notification.isRead;
+    // Don't display unread if notification is unread
+    if (overFlowActions.MARK_AS_UNREAD)
+        overFlowActions.MARK_AS_UNREAD.display = notification.isRead;
     useEffect(() => {
         function listenMuteStateChanged(error, response) {
             if (error) {
                 console.error("FinsembleNotificationsMuteStateChannel: ", error);
+                FSBL.Clients.Logger.system.error("FinsembleNotificationsMuteStateChannel: ", error);
             }
             else {
                 const { data } = response;
@@ -56,10 +136,9 @@ export const NotificationCardHeaderControls = ({ notification, removeNotificatio
             FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
         };
     }, []);
-    const menuActions = Object.values(overFlowActions).map((value) => renderOverflowMenuAction(notification, value, isMuteFilterApplied));
-    return (React.createElement("div", { className: optionsToggleClassName, onMouseLeave: () => setOverflowMenuOpen(false) },
-        React.createElement("span", { className: "notification-card_overflow_menu" },
-            React.createElement(IconButton, { iconName: "ff-dots-vert", tooltip: "Options", clickHandler: toggleOverflowMenu }, overflowMenuOpen ? React.createElement(OverflowMenu, { closeSelf: setOverflowMenuOpen }, menuActions) : null)),
+    return (React.createElement("div", { className: optionsToggleClassName },
+        React.createElement("span", { className: "notification-card_context_menu" },
+            React.createElement(ContextMenuToggle, { menuActions: overFlowActions, message: notification, isMuteFilterApplied: isMuteFilterApplied })),
         uiContext == "toasts" && (React.createElement(IconButton, { iconName: "ff-close", classNames: "notification-card__dismiss no-hover", tooltip: "Dismiss", clickHandler: removeNotification })),
         uiContext == "center" && React.createElement("span", { className: "notification-card_timestamp" }, time)));
 };

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardHeaderControls.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useState } from \"react\";\nimport IconButton from \"../IconButton\";\nimport OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from \"../OverflowMenu\";\nimport { NotificationsContext } from \"../../../notificationsContext\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\n\nexport const NotificationCardHeaderControls: React.FunctionComponent<{\n\tnotification: INotification;\n\tuiContext?: string;\n\tremoveNotification?: Function;\n}> = ({ notification, removeNotification, uiContext = \"center\" }) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters } = notificationsContext;\n\n\tconst [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\tconst [time, setTime] = useState(\n\t\tformatDistanceToNow(new Date(notification.issuedAt), {\n\t\t\tincludeSeconds: true,\n\t\t})\n\t);\n\n\tuseEffect(() => {\n\t\tconst id = setInterval(() => {\n\t\t\tsetTime(\n\t\t\t\tformatDistanceToNow(new Date(notification.issuedAt), {\n\t\t\t\t\tincludeSeconds: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}, 60000);\n\t\treturn () => clearInterval(id);\n\t});\n\n\tconst toggleOverflowMenu = () => {\n\t\tsetOverflowMenuOpen(!overflowMenuOpen);\n\t};\n\n\tconst overFlowActions = Object.assign({}, OverflowMenuActions);\n\tlet optionsToggleClassName = \"notification-card__more-options__toggle\";\n\n\tif (uiContext === \"center\") {\n\t\tdelete overFlowActions.DISMISS;\n\t\toverFlowActions.DETAILS.action = (overflowNotification: INotification) => {\n\t\t\tsetSelectedNotification(overflowNotification);\n\t\t};\n\t} else {\n\t\toptionsToggleClassName = \"notification-card__more-options__no-toggle\";\n\t\tdelete overFlowActions.MARK_AS_READ;\n\t\tdelete overFlowActions.MARK_AS_UNREAD;\n\t\tdelete overFlowActions.DETAILS;\n\t\tdelete overFlowActions.DISMISS;\n\t}\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\tconst menuActions = Object.values(overFlowActions).map((value) =>\n\t\trenderOverflowMenuAction(notification, value, isMuteFilterApplied)\n\t);\n\n\treturn (\n\t\t<div className={optionsToggleClassName} onMouseLeave={() => setOverflowMenuOpen(false)}>\n\t\t\t<span className=\"notification-card_overflow_menu\">\n\t\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleOverflowMenu}>\n\t\t\t\t\t{overflowMenuOpen ? <OverflowMenu closeSelf={setOverflowMenuOpen}>{menuActions}</OverflowMenu> : null}\n\t\t\t\t</IconButton>\n\t\t\t</span>\n\t\t\t{uiContext == \"toasts\" && (\n\t\t\t\t<IconButton\n\t\t\t\t\ticonName=\"ff-close\"\n\t\t\t\t\tclassNames={\"notification-card__dismiss no-hover\"}\n\t\t\t\t\ttooltip=\"Dismiss\"\n\t\t\t\t\tclickHandler={removeNotification}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{uiContext == \"center\" && <span className=\"notification-card_timestamp\">{time}</span>}\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"NotificationCardHeaderControls.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useState } from \"react\";\nimport ContextMenuToggle from \"../../../../common/ContextMenu\";\nimport { NotificationsContext } from \"../../../notificationsContext\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ContextMenuAction } from \"../../../types\";\n\nimport {\n\tmarkNotificationsRead,\n\tmarkNotificationsUnread,\n\tsnoozeNotifications,\n} from \"../../../../../hooks/useNotifications\";\n\n// Icons\nimport EnvelopeCloseIcon from \"../../../../notifications/icons/EnvelopeClose\";\nimport EnvelopeOpenIcon from \"../../../../notifications/icons/EnvelopeOpen\";\nimport SnoozeIcon from \"../../../../notifications/icons/SnoozeIcon\";\nimport IconButton from \"../IconButton\";\n\ntype INotification = services.notification.types.INotification;\n\nexport const ContextMenuActions: { [key: string]: ContextMenuAction } = {\n\tMARK_AS_UNREAD: {\n\t\tname: \"MARK_AS_UNREAD\",\n\t\ticon: <EnvelopeCloseIcon />,\n\t\tlabel: \"Mark Unread\",\n\t\taction: (notification: INotification) => markNotificationsUnread([notification]),\n\t\tdisplay: true,\n\t},\n\tMARK_AS_READ: {\n\t\tname: \"MARK_AS_READ\",\n\t\ticon: <EnvelopeOpenIcon />,\n\t\tlabel: \"Mark Read\",\n\t\taction: (notification: INotification) => markNotificationsRead([notification]),\n\t\tdisplay: true,\n\t},\n\tSNOOZE: {\n\t\tname: \"SNOOZE\",\n\t\ticon: <SnoozeIcon />,\n\t\tlabel: \"Snooze\",\n\t\taction: (notification: INotification) => snoozeNotifications([notification]),\n\t\tdisplay: true,\n\t},\n\tDISMISS: {\n\t\tname: \"DISMISS\",\n\t\ticon: (\n\t\t\t<div className=\"finsemble-icon\">\n\t\t\t\t<i className=\"ff-close\" />\n\t\t\t</div>\n\t\t),\n\t\tlabel: \"Dismiss\",\n\t\taction: () => {\n\t\t\t// Empty - filled in later\n\t\t},\n\t\tdisplay: true,\n\t},\n\tSETTINGS: {\n\t\tname: \"SETTINGS\",\n\t\ticon: (\n\t\t\t<div className=\"finsemble-icon\">\n\t\t\t\t<i className=\"ff-settings\" />\n\t\t\t</div>\n\t\t),\n\t\tlabel: \"Settings\",\n\t\taction: (notification: INotification) => {\n\t\t\tFSBL.Clients.LauncherClient.showWindow(\n\t\t\t\t{\n\t\t\t\t\tcomponentType: \"UserPreferences\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tmonitor: \"mine\",\n\t\t\t\t\tleft: \"center\",\n\t\t\t\t\ttop: \"center\",\n\t\t\t\t},\n\t\t\t\t() => {\n\t\t\t\t\tFSBL.Clients.RouterClient.transmit(\"FinsembleUserPreferencesChannel\", {\n\t\t\t\t\t\tpreferencesTab: \"Notifications\",\n\t\t\t\t\t\tnotification,\n\t\t\t\t\t});\n\t\t\t\t\t// we need this timeout otherwise the UserPreferences screen does not detect the message being transmited\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tFSBL.Clients.RouterClient.transmit(\"FinsembleNotificationsNavigationChannel\", { notification });\n\t\t\t\t\t}, 50);\n\t\t\t\t}\n\t\t\t);\n\t\t},\n\t\tdisplay: true,\n\t},\n\tDETAILS: {\n\t\tname: \"DETAILS\",\n\t\ticon: (\n\t\t\t<div className=\"finsemble-icon\">\n\t\t\t\t<i className=\"ff-dots-horz\" />\n\t\t\t</div>\n\t\t),\n\t\tlabel: \"Details\",\n\t\taction: () => {\n\t\t\t// Empty - filled in later\n\t\t},\n\t\tdisplay: true,\n\t},\n};\n\nexport const NotificationCardHeaderControls: React.FunctionComponent<{\n\tnotification: INotification;\n\tuiContext?: string;\n\tremoveNotification?: Function;\n}> = ({ notification, removeNotification, uiContext = \"center\" }) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters } = notificationsContext;\n\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\tconst [time, setTime] = useState(\n\t\tformatDistanceToNow(new Date(notification.issuedAt), {\n\t\t\tincludeSeconds: true,\n\t\t})\n\t);\n\n\tuseEffect(() => {\n\t\tconst id = setInterval(() => {\n\t\t\tsetTime(\n\t\t\t\tformatDistanceToNow(new Date(notification.issuedAt), {\n\t\t\t\t\tincludeSeconds: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}, 60000);\n\n\t\t// when running unit tests in node.js, node does not exit until timeouts and intervals are done\n\t\t// Calling this allows node to exit without waiting for setInterval to complete.\n\t\tid.unref?.();\n\n\t\treturn () => clearInterval(id);\n\t});\n\n\tconst overFlowActions = Object.assign({}, ContextMenuActions);\n\tlet optionsToggleClassName = \"notification-card__more-options__toggle\";\n\n\tif (uiContext === \"center\") {\n\t\tdelete overFlowActions.DISMISS;\n\t\toverFlowActions.DETAILS.action = (contextNotification: INotification) => {\n\t\t\tsetSelectedNotification(contextNotification);\n\t\t};\n\t} else {\n\t\toptionsToggleClassName = \"notification-card__more-options__no-toggle\";\n\t\tdelete overFlowActions.MARK_AS_READ;\n\t\tdelete overFlowActions.MARK_AS_UNREAD;\n\t\tdelete overFlowActions.DETAILS;\n\t\tdelete overFlowActions.DISMISS;\n\t}\n\n\t// Don't display read if notification is read\n\tif (overFlowActions.MARK_AS_READ) overFlowActions.MARK_AS_READ.display = !notification.isRead;\n\t// Don't display unread if notification is unread\n\tif (overFlowActions.MARK_AS_UNREAD) overFlowActions.MARK_AS_UNREAD.display = notification.isRead;\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t\tFSBL.Clients.Logger.system.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div className={optionsToggleClassName}>\n\t\t\t<span className=\"notification-card_context_menu\">\n\t\t\t\t<ContextMenuToggle\n\t\t\t\t\tmenuActions={overFlowActions}\n\t\t\t\t\tmessage={notification}\n\t\t\t\t\tisMuteFilterApplied={isMuteFilterApplied}\n\t\t\t\t/>\n\t\t\t</span>\n\t\t\t{uiContext == \"toasts\" && (\n\t\t\t\t<IconButton\n\t\t\t\t\ticonName=\"ff-close\"\n\t\t\t\t\tclassNames={\"notification-card__dismiss no-hover\"}\n\t\t\t\t\ttooltip=\"Dismiss\"\n\t\t\t\t\tclickHandler={removeNotification}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{uiContext == \"center\" && <span className=\"notification-card_timestamp\">{time}</span>}\n\t\t</div>\n\t);\n};\n"]}

package/react/components/notifications/components/views/ListView.js

@@ -3,9 +3,9 @@ import { format, differenceInMilliseconds, parseISO, addSeconds } from "date-fns
 // Context
 import { NotificationsContext } from "../../notificationsContext";
 // Components
-import IconButton from "../shared/IconButton";
 import NoNotifications from "../NoNotifications";
-import OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from "../shared/OverflowMenu";
+import ContextMenuToggle from "../../../common/ContextMenu";
+import { ContextMenuActions } from "../../../notifications/components/shared/notificationCard/NotificationCardHeaderControls";
 import { CheckButton } from "../shared/CheckButton";
 // Utils
 import { getActiveFilter, getMostRecentAction, isNewNotification, isReNotification, searchNotifications, } from "../../utils";
@@ -21,10 +21,6 @@ const ListHeaderComponent = () => (React.createElement("div", { className: "list
 export const NotificationListRowShell = ({ notification, newNotificationHaloPeriodSeconds, children, }) => {
     const notificationsContext = useContext(NotificationsContext);
     const { setSelectedNotification, muteFilters, selectionMode } = notificationsContext;
-    const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
-    const toggleOverflowMenu = () => {
-        setOverflowMenuOpen(!overflowMenuOpen);
-    };
     const [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));
     const [wokeFromSnooze, setWokeFromSnooze] = useState(isReNotification(notification, newNotificationHaloPeriodSeconds));
     const [isMuteFilterApplied, setIsMuteFilterApplied] = useState(muteFilters
@@ -72,7 +68,7 @@ export const NotificationListRowShell = ({ notification, newNotificationHaloPeri
             clearTimeout(isRenotificationTimerId);
         };
     }, [newNotificationHaloPeriodSeconds, notification]);
-    const overFlowActions = Object.assign({}, OverflowMenuActions);
+    const overFlowActions = Object.assign({}, ContextMenuActions);
     overFlowActions.DETAILS.action = (detailNotification) => {
         setSelectedNotification(detailNotification);
     };
@@ -81,6 +77,7 @@ export const NotificationListRowShell = ({ notification, newNotificationHaloPeri
         function listenMuteStateChanged(error, response) {
             if (error) {
                 console.error("FinsembleNotificationsMuteStateChannel: ", error);
+                FSBL.Clients.Logger.system.error("FinsembleNotificationsMuteStateChannel: ", error);
             }
             else {
                 const { data } = response;
@@ -94,7 +91,6 @@ export const NotificationListRowShell = ({ notification, newNotificationHaloPeri
             FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
         };
     }, []);
-    const menuActions = Object.values(overFlowActions).map((value) => renderOverflowMenuAction(notification, value, isMuteFilterApplied));
     return (React.createElement("div", { className: `list-row__container notification-item ${notification.isRead ? "is-read" : ""} ${isNew || wokeFromSnooze ? "new" : ""}
 				${notification.cssClassName ? notification.cssClassName : ""}` },
         children ? (React.createElement(React.Fragment, null,
@@ -107,7 +103,7 @@ export const NotificationListRowShell = ({ notification, newNotificationHaloPeri
             React.createElement("div", { className: "list-row__cell" }, `${notification.title} - ${notification.details}`))),
         React.createElement("div", { className: "list-row__cell" },
             React.createElement("span", null,
-                React.createElement(IconButton, { iconName: "ff-dots-vert", tooltip: "Options", clickHandler: toggleOverflowMenu }, overflowMenuOpen ? React.createElement(OverflowMenu, { closeSelf: setOverflowMenuOpen }, menuActions) : null)))));
+                React.createElement(ContextMenuToggle, { menuActions: overFlowActions, message: notification, isMuteFilterApplied: false })))));
 };
 const ListView = ({ notificationHeaderRow, notificationListRow, notifications, }) => {
     var _a;

package/react/components/notifications/components/views/ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/ListView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useState, useEffect } from \"react\";\nimport { format, differenceInMilliseconds, parseISO, addSeconds } from \"date-fns\";\n\n// types\nimport { NotificationListViewProps } from \"../../types\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Components\nimport IconButton from \"../shared/IconButton\";\nimport NoNotifications from \"../NoNotifications\";\nimport OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from \"../shared/OverflowMenu\";\nimport { CheckButton } from \"../shared/CheckButton\";\n\n// Utils\nimport {\n\tgetActiveFilter,\n\tgetMostRecentAction,\n\tisNewNotification,\n\tisReNotification,\n\tsearchNotifications,\n} from \"../../utils\";\n\nimport { NotificationCardHeaderLogo } from \"../shared/notificationCard/NotificationCardHeaderLogo\";\n\n// Constants\nimport { SelectionMode } from \"../../constants\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nconst ListHeaderComponent = () => (\n\t<div className=\"list-header__container\">\n\t\t<div className=\"list-header_cell\">Received</div>\n\t\t<div className=\"list-header_cell\">App</div>\n\t\t<div className=\"list-header_cell\">Content</div>\n\t\t<div className=\"list-header_cell\">{\"\"}</div>\n\t</div>\n);\n\nexport type NotificationListRowPropType = {\n\tnotification: INotification;\n\tnewNotificationHaloPeriodSeconds: number;\n};\n\nexport const NotificationListRowShell: React.FunctionComponent<NotificationListRowPropType> = ({\n\tnotification,\n\tnewNotificationHaloPeriodSeconds,\n\tchildren,\n}: any) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters, selectionMode } = notificationsContext;\n\tconst [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n\tconst toggleOverflowMenu = () => {\n\t\tsetOverflowMenuOpen(!overflowMenuOpen);\n\t};\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\t// effect needed as the newNotificationHaloPeriodSeconds is fecthed asynchronously in the parent component\n\t// and sometimes at the first render, this value is still 0\n\tuseEffect(() => {\n\t\tsetIsNew(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\t}, [newNotificationHaloPeriodSeconds]);\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\tuseEffect(() => {\n\t\tlet isRenotificationTimerId: any;\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\n\t\t\tif (mostRecentAction) {\n\t\t\t\tconst { datePerformed } = mostRecentAction;\n\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t} else {\n\t\t\tsetWokeFromSnooze(false);\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t};\n\t}, [newNotificationHaloPeriodSeconds, notification]);\n\n\tconst overFlowActions = Object.assign({}, OverflowMenuActions);\n\toverFlowActions.DETAILS.action = (detailNotification: INotification) => {\n\t\tsetSelectedNotification(detailNotification);\n\t};\n\n\tdelete overFlowActions.DISMISS;\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\tconst menuActions = Object.values(overFlowActions).map((value) =>\n\t\trenderOverflowMenuAction(notification, value, isMuteFilterApplied)\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`list-row__container notification-item ${notification.isRead ? \"is-read\" : \"\"} ${\n\t\t\t\tisNew || wokeFromSnooze ? \"new\" : \"\"\n\t\t\t}\n\t\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"list-row__cell\">{format(Date.parse(notification.issuedAt), \"dd-MM-yyyy HH:mm\")}</div>\n\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"list-row__cell\">{`${notification.title} - ${notification.details}`}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t<span>\n\t\t\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleOverflowMenu}>\n\t\t\t\t\t\t{overflowMenuOpen ? <OverflowMenu closeSelf={setOverflowMenuOpen}>{menuActions}</OverflowMenu> : null}\n\t\t\t\t\t</IconButton>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst ListView: React.FunctionComponent<NotificationListViewProps> = ({\n\tnotificationHeaderRow,\n\tnotificationListRow,\n\tnotifications,\n}) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\t// The context will be used to filter the notifications\n\tconst { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;\n\n\tconst activeFilter = getActiveFilter(drawerControlProps);\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst NotificationHeaderRow = notificationHeaderRow || ListHeaderComponent;\n\tconst NotificationListRow = notificationListRow || NotificationListRowShell;\n\n\t// Sets the current default preference\n\tuseEffect(() => {\n\t\tasync function getNotificationsPreferences() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\n\t\t}\n\n\t\tgetNotificationsPreferences().then((preferences: any) => {\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (searchString === \"\") {\n\t\t\tsetFilteredNotifications(notifications);\n\t\t} else {\n\t\t\tsetFilteredNotifications(searchNotifications(notifications, searchString));\n\t\t}\n\t}, [searchString, notifications]);\n\n\tlet controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];\n\tcontrolFilteredNotifications.sort(\n\t\t(a: INotification, b: INotification) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt)\n\t);\n\n\tcontrolFilteredNotifications = controlFilteredNotifications.filter((notification: INotification) =>\n\t\tactiveFilter.action === \"snoozed\" ? notification.isSnoozed : !notification.isSnoozed\n\t);\n\n\treturn controlFilteredNotifications.length === 0 ? (\n\t\t<NoNotifications />\n\t) : (\n\t\t<>\n\t\t\t<NotificationHeaderRow />\n\t\t\t{controlFilteredNotifications.map((notification: INotification, index: number) => {\n\t\t\t\tconst key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;\n\t\t\t\treturn (\n\t\t\t\t\t<ErrorBoundary key={key}>\n\t\t\t\t\t\t<NotificationListRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\t\tnewNotificationHaloPeriodSeconds={newNotificationHaloPeriodSeconds}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default ListView;\n"]}
+{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/ListView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useState, useEffect } from \"react\";\nimport { format, differenceInMilliseconds, parseISO, addSeconds } from \"date-fns\";\n\n// types\nimport { NotificationListViewProps } from \"../../types\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Components\nimport NoNotifications from \"../NoNotifications\";\nimport ContextMenuToggle from \"../../../common/ContextMenu\";\nimport { ContextMenuActions } from \"../../../notifications/components/shared/notificationCard/NotificationCardHeaderControls\";\nimport { CheckButton } from \"../shared/CheckButton\";\n\n// Utils\nimport {\n\tgetActiveFilter,\n\tgetMostRecentAction,\n\tisNewNotification,\n\tisReNotification,\n\tsearchNotifications,\n} from \"../../utils\";\n\nimport { NotificationCardHeaderLogo } from \"../shared/notificationCard/NotificationCardHeaderLogo\";\n\n// Constants\nimport { SelectionMode } from \"../../constants\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nconst ListHeaderComponent = () => (\n\t<div className=\"list-header__container\">\n\t\t<div className=\"list-header_cell\">Received</div>\n\t\t<div className=\"list-header_cell\">App</div>\n\t\t<div className=\"list-header_cell\">Content</div>\n\t\t<div className=\"list-header_cell\">{\"\"}</div>\n\t</div>\n);\n\nexport type NotificationListRowPropType = {\n\tnotification: INotification;\n\tnewNotificationHaloPeriodSeconds: number;\n};\n\nexport const NotificationListRowShell: React.FunctionComponent<NotificationListRowPropType> = ({\n\tnotification,\n\tnewNotificationHaloPeriodSeconds,\n\tchildren,\n}: any) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters, selectionMode } = notificationsContext;\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\t// effect needed as the newNotificationHaloPeriodSeconds is fecthed asynchronously in the parent component\n\t// and sometimes at the first render, this value is still 0\n\tuseEffect(() => {\n\t\tsetIsNew(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\t}, [newNotificationHaloPeriodSeconds]);\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\tuseEffect(() => {\n\t\tlet isRenotificationTimerId: any;\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\n\t\t\tif (mostRecentAction) {\n\t\t\t\tconst { datePerformed } = mostRecentAction;\n\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t} else {\n\t\t\tsetWokeFromSnooze(false);\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t};\n\t}, [newNotificationHaloPeriodSeconds, notification]);\n\n\tconst overFlowActions = Object.assign({}, ContextMenuActions);\n\toverFlowActions.DETAILS.action = (detailNotification: INotification) => {\n\t\tsetSelectedNotification(detailNotification);\n\t};\n\n\tdelete overFlowActions.DISMISS;\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t\tFSBL.Clients.Logger.system.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`list-row__container notification-item ${notification.isRead ? \"is-read\" : \"\"} ${\n\t\t\t\tisNew || wokeFromSnooze ? \"new\" : \"\"\n\t\t\t}\n\t\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"list-row__cell\">{format(Date.parse(notification.issuedAt), \"dd-MM-yyyy HH:mm\")}</div>\n\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"list-row__cell\">{`${notification.title} - ${notification.details}`}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t<span>\n\t\t\t\t\t<ContextMenuToggle menuActions={overFlowActions} message={notification} isMuteFilterApplied={false} />\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst ListView: React.FunctionComponent<NotificationListViewProps> = ({\n\tnotificationHeaderRow,\n\tnotificationListRow,\n\tnotifications,\n}) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\t// The context will be used to filter the notifications\n\tconst { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;\n\n\tconst activeFilter = getActiveFilter(drawerControlProps);\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst NotificationHeaderRow = notificationHeaderRow || ListHeaderComponent;\n\tconst NotificationListRow = notificationListRow || NotificationListRowShell;\n\n\t// Sets the current default preference\n\tuseEffect(() => {\n\t\tasync function getNotificationsPreferences() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\n\t\t}\n\n\t\tgetNotificationsPreferences().then((preferences: any) => {\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (searchString === \"\") {\n\t\t\tsetFilteredNotifications(notifications);\n\t\t} else {\n\t\t\tsetFilteredNotifications(searchNotifications(notifications, searchString));\n\t\t}\n\t}, [searchString, notifications]);\n\n\tlet controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];\n\tcontrolFilteredNotifications.sort(\n\t\t(a: INotification, b: INotification) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt)\n\t);\n\n\tcontrolFilteredNotifications = controlFilteredNotifications.filter((notification: INotification) =>\n\t\tactiveFilter.action === \"snoozed\" ? notification.isSnoozed : !notification.isSnoozed\n\t);\n\n\treturn controlFilteredNotifications.length === 0 ? (\n\t\t<NoNotifications />\n\t) : (\n\t\t<>\n\t\t\t<NotificationHeaderRow />\n\t\t\t{controlFilteredNotifications.map((notification: INotification, index: number) => {\n\t\t\t\tconst key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;\n\t\t\t\treturn (\n\t\t\t\t\t<ErrorBoundary key={key}>\n\t\t\t\t\t\t<NotificationListRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\t\tnewNotificationHaloPeriodSeconds={newNotificationHaloPeriodSeconds}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default ListView;\n"]}