@finsemble/finsemble-ui 1.0.0-beta-1

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const NotificationCardHeaderLogo: React.FunctionComponent<{
+    headerLogo?: string;
+}>;

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

@@ -0,0 +1,8 @@
+import React, { useState } from "react";
+export const NotificationCardHeaderLogo = ({ headerLogo }) => {
+    const [showDefaultIcon, setShowDefaultIcon] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("img", { alt: "App logo", src: headerLogo, style: showDefaultIcon || !headerLogo ? { display: "none" } : {}, onError: () => setShowDefaultIcon(true) }),
+        showDefaultIcon || !headerLogo ? React.createElement("i", { className: "ff-finsemble default-img large" }) : null));
+};
+//# sourceMappingURL=NotificationCardHeaderLogo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardHeaderLogo.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,MAAM,CAAC,MAAM,0BAA0B,GAAqD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IAC9G,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACN;QACC,6BACC,GAAG,EAAC,UAAU,EACd,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,GACtC;QACD,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,2BAAG,SAAS,EAAC,gCAAgC,GAAG,CAAC,CAAC,CAAC,IAAI,CACvF,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useState } from \"react\";\n\nexport const NotificationCardHeaderLogo: React.FunctionComponent<{ headerLogo?: string }> = ({ headerLogo }) => {\n\tconst [showDefaultIcon, setShowDefaultIcon] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<img\n\t\t\t\talt=\"App logo\"\n\t\t\t\tsrc={headerLogo}\n\t\t\t\tstyle={showDefaultIcon || !headerLogo ? { display: \"none\" } : {}}\n\t\t\t\tonError={() => setShowDefaultIcon(true)}\n\t\t\t/>\n\t\t\t{showDefaultIcon || !headerLogo ? <i className=\"ff-finsemble default-img large\" /> : null}\n\t\t</>\n\t);\n};\n"]}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { services } from "@finsemble/finsemble-api";
+declare type INotification = services.notification.types.INotification;
+export declare const NotificationCardHeaderShell: React.FunctionComponent<{
+    notification: INotification;
+    uiContext: string;
+    removeNotification: Function;
+}>;
+export {};

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

@@ -0,0 +1,19 @@
+import React, { useContext } from "react";
+import { NotificationCardHeaderControls } from "./NotificationCardHeaderControls";
+import { NotificationCardHeaderLogo } from "./NotificationCardHeaderLogo";
+import { NotificationsContext } from "../../../notificationsContext";
+import { SelectionMode } from "../../../constants";
+import { CheckButton } from "../CheckButton";
+import { ErrorBoundary } from "../../../../common/ErrorBoundary";
+export const NotificationCardHeaderShell = ({ notification, removeNotification, uiContext = "center", children }) => {
+    const notificationsContext = useContext(NotificationsContext);
+    const { selectionMode } = notificationsContext;
+    return (React.createElement("div", { className: "notification-card__header" },
+        children ? (React.createElement(ErrorBoundary, null,
+            selectionMode === SelectionMode.SELECTION ? React.createElement(CheckButton, { notification: notification }) : React.createElement(React.Fragment, null),
+            children)) : (React.createElement(React.Fragment, null,
+            selectionMode === SelectionMode.SELECTION ? (React.createElement(CheckButton, { notification: notification })) : (React.createElement(NotificationCardHeaderLogo, { headerLogo: notification.headerLogo })),
+            React.createElement("div", { className: "notification-card__title" }, notification.title))),
+        React.createElement(NotificationCardHeaderControls, { notification: notification, removeNotification: removeNotification, uiContext: uiContext })));
+};
+//# sourceMappingURL=NotificationCardHeaderShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardHeaderShell.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAIjE,MAAM,CAAC,MAAM,2BAA2B,GAInC,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7E,MAAM,oBAAoB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC9D,MAAM,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC;IAE/C,OAAO,CACN,6BAAK,SAAS,EAAC,2BAA2B;QACxC,QAAQ,CAAC,CAAC,CAAC,CACX,oBAAC,aAAa;YACZ,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,yCAAK;YAC/F,QAAQ,CACM,CAChB,CAAC,CAAC,CAAC,CACH;YACE,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5C,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,0BAA0B,IAAC,UAAU,EAAE,YAAY,CAAC,UAAU,GAAI,CACnE;YACD,6BAAK,SAAS,EAAC,0BAA0B,IAAE,YAAY,CAAC,KAAK,CAAO,CAClE,CACH;QACD,oBAAC,8BAA8B,IAC9B,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,SAAS,GACnB,CACG,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useContext } from \"react\";\nimport { NotificationCardHeaderControls } from \"./NotificationCardHeaderControls\";\nimport { NotificationCardHeaderLogo } from \"./NotificationCardHeaderLogo\";\nimport { NotificationsContext } from \"../../../notificationsContext\";\nimport { SelectionMode } from \"../../../constants\";\nimport { CheckButton } from \"../CheckButton\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\n\nexport const NotificationCardHeaderShell: React.FunctionComponent<{\n\tnotification: INotification;\n\tuiContext: string;\n\tremoveNotification: Function;\n}> = ({ notification, removeNotification, uiContext = \"center\", children }) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { selectionMode } = notificationsContext;\n\n\treturn (\n\t\t<div className=\"notification-card__header\">\n\t\t\t{children ? (\n\t\t\t\t<ErrorBoundary>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? <CheckButton notification={notification} /> : <></>}\n\t\t\t\t\t{children}\n\t\t\t\t</ErrorBoundary>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"notification-card__title\">{notification.title}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<NotificationCardHeaderControls\n\t\t\t\tnotification={notification}\n\t\t\t\tremoveNotification={removeNotification}\n\t\t\t\tuiContext={uiContext}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"]}

package/react/components/notifications/components/views/CardView.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { NotificationCardViewProps } from "../../types";
+export declare const CardView: React.FunctionComponent<NotificationCardViewProps>;
+export default CardView;

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

@@ -0,0 +1,92 @@
+import React, { useContext, useEffect } from "react";
+import { isToday, isYesterday, isThisWeek } from "date-fns";
+// Context
+import { NotificationsContext } from "../../notificationsContext";
+// Components
+import { NotificationCardShell } from "../shared/NotificationCardShell";
+import NoNotifications from "../NoNotifications";
+// Utils
+import { getActiveFilter, searchNotifications } from "../../utils";
+import { ErrorBoundary } from "../../../common/ErrorBoundary";
+var Periods;
+(function (Periods) {
+    Periods["TODAY"] = "today";
+    Periods["THIS_WEEK"] = "thisWeek";
+    Periods["YESTERDAY"] = "yesterday";
+    Periods["OLDER"] = "older";
+})(Periods || (Periods = {}));
+const isEmpty = (byPeriodNotifications, accountForSnooze) => {
+    if (accountForSnooze) {
+        return Object.values(byPeriodNotifications).every((value) => value.length === 0);
+    }
+    else {
+        return Object.values(byPeriodNotifications).every((value) => value.length === 0 || value.filter((notification) => !notification.isSnoozed).length === 0);
+    }
+};
+export const CardView = (props) => {
+    var _a;
+    const { notifications } = props;
+    const notificationsContext = useContext(NotificationsContext);
+    const { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;
+    const activeFilter = getActiveFilter(drawerControlProps);
+    const byPeriodNotifications = {
+        today: [],
+        yesterday: [],
+        thisWeek: [],
+        older: [],
+    };
+    useEffect(() => {
+        if (searchString === "") {
+            setFilteredNotifications(notifications);
+        }
+        else {
+            setFilteredNotifications(searchNotifications(notifications, searchString));
+        }
+    }, [searchString, notifications]);
+    const controlFilteredNotifications = activeFilter ? (_a = activeFilter.run) === null || _a === void 0 ? void 0 : _a.call(activeFilter, filteredNotifications) : [];
+    controlFilteredNotifications.reduce((accumulator, notification) => {
+        const notificationDate = Date.parse(notification.issuedAt);
+        if (isToday(notificationDate)) {
+            accumulator.today.push(notification);
+        }
+        else if (isYesterday(notificationDate)) {
+            accumulator.yesterday.push(notification);
+        }
+        else if (isThisWeek(notificationDate)) {
+            accumulator.thisWeek.push(notification);
+        }
+        else {
+            accumulator.older.push(notification);
+        }
+        return accumulator;
+    }, byPeriodNotifications);
+    const NotificationCardComponent = props.notificationCard ? props.notificationCard : NotificationCardShell;
+    const renderSeparatorLabel = (period) => {
+        if (period === Periods.TODAY) {
+            return React.createElement("p", { className: "notification-day" }, "Today");
+        }
+        else if (period === Periods.YESTERDAY) {
+            return React.createElement("p", { className: "notification-day" }, "Yesterday");
+        }
+        else if (period === Periods.THIS_WEEK) {
+            return React.createElement("p", { className: "notification-day" }, "This Week");
+        }
+        else {
+            return React.createElement("p", { className: "notification-day" }, "Older");
+        }
+    };
+    const renderNotificationsBlock = (period) => byPeriodNotifications[period]
+        .sort((a, b) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt))
+        .filter((notification) => (activeFilter.action === "snoozed" ? notification.isSnoozed : !notification.isSnoozed))
+        .map((notification, index) => {
+        const key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;
+        return (React.createElement("div", { key: key },
+            index === 0 ? renderSeparatorLabel(period) : null,
+            React.createElement(ErrorBoundary, { key: key },
+                React.createElement(NotificationCardComponent, { key: notification.id, notification: notification, removeNotification: () => { }, uiContext: "center" })),
+            React.createElement("div", { className: "divider" }, "\u00A0")));
+    });
+    return isEmpty(byPeriodNotifications, activeFilter.action === "snoozed") ? (React.createElement(NoNotifications, null)) : (React.createElement(React.Fragment, null, Object.keys(byPeriodNotifications).map((period) => renderNotificationsBlock(period))));
+};
+export default CardView;
+//# sourceMappingURL=CardView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/CardView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport { isToday, isYesterday, isThisWeek } from \"date-fns\";\n\n// Types\nimport { NotificationCardViewProps } from \"../../types\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Components\nimport { NotificationCardShell } from \"../shared/NotificationCardShell\";\nimport NoNotifications from \"../NoNotifications\";\n\n// Utils\nimport { getActiveFilter, searchNotifications } from \"../../utils\";\n\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\n\nenum Periods {\n\tTODAY = \"today\",\n\tTHIS_WEEK = \"thisWeek\",\n\tYESTERDAY = \"yesterday\",\n\tOLDER = \"older\",\n}\n\nconst isEmpty = (byPeriodNotifications: Record<Periods, INotification[]>, accountForSnooze: boolean) => {\n\tif (accountForSnooze) {\n\t\treturn Object.values(byPeriodNotifications).every((value: INotification[]) => value.length === 0);\n\t} else {\n\t\treturn Object.values(byPeriodNotifications).every(\n\t\t\t(value: INotification[]) =>\n\t\t\t\tvalue.length === 0 || value.filter((notification: INotification) => !notification.isSnoozed).length === 0\n\t\t);\n\t}\n};\n\nexport const CardView: React.FunctionComponent<NotificationCardViewProps> = (props: NotificationCardViewProps) => {\n\tconst { notifications } = props;\n\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;\n\tconst activeFilter = getActiveFilter(drawerControlProps);\n\n\tconst byPeriodNotifications: Record<Periods, INotification[]> = {\n\t\ttoday: [],\n\t\tyesterday: [],\n\t\tthisWeek: [],\n\t\tolder: [],\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\tconst controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];\n\n\tcontrolFilteredNotifications.reduce((accumulator: any, notification: INotification) => {\n\t\tconst notificationDate: number = Date.parse(notification.issuedAt);\n\t\tif (isToday(notificationDate)) {\n\t\t\taccumulator.today.push(notification);\n\t\t} else if (isYesterday(notificationDate)) {\n\t\t\taccumulator.yesterday.push(notification);\n\t\t} else if (isThisWeek(notificationDate)) {\n\t\t\taccumulator.thisWeek.push(notification);\n\t\t} else {\n\t\t\taccumulator.older.push(notification);\n\t\t}\n\t\treturn accumulator;\n\t}, byPeriodNotifications);\n\n\tconst NotificationCardComponent = props.notificationCard ? props.notificationCard : NotificationCardShell;\n\n\tconst renderSeparatorLabel = (period: string) => {\n\t\tif (period === Periods.TODAY) {\n\t\t\treturn <p className=\"notification-day\">Today</p>;\n\t\t} else if (period === Periods.YESTERDAY) {\n\t\t\treturn <p className=\"notification-day\">Yesterday</p>;\n\t\t} else if (period === Periods.THIS_WEEK) {\n\t\t\treturn <p className=\"notification-day\">This Week</p>;\n\t\t} else {\n\t\t\treturn <p className=\"notification-day\">Older</p>;\n\t\t}\n\t};\n\n\tconst renderNotificationsBlock = (period: Periods) =>\n\t\tbyPeriodNotifications[period]\n\t\t\t.sort((a: INotification, b: INotification) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt))\n\t\t\t.filter((notification) => (activeFilter.action === \"snoozed\" ? notification.isSnoozed : !notification.isSnoozed))\n\t\t\t.map((notification, index) => {\n\t\t\t\tconst key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;\n\t\t\t\treturn (\n\t\t\t\t\t<div key={key}>\n\t\t\t\t\t\t{index === 0 ? renderSeparatorLabel(period) : null}\n\t\t\t\t\t\t<ErrorBoundary key={key}>\n\t\t\t\t\t\t\t<NotificationCardComponent\n\t\t\t\t\t\t\t\tkey={notification.id}\n\t\t\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\t\t\tremoveNotification={() => {}}\n\t\t\t\t\t\t\t\tuiContext={\"center\"}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t\t\t<div className=\"divider\">&nbsp;</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t});\n\n\treturn isEmpty(byPeriodNotifications, activeFilter.action === \"snoozed\") ? (\n\t\t<NoNotifications />\n\t) : (\n\t\t<>{Object.keys(byPeriodNotifications).map((period) => renderNotificationsBlock(period as Periods))}</>\n\t);\n};\n\nexport default CardView;\n"]}

package/react/components/notifications/components/views/ListView.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { NotificationListViewProps } from "../../types";
+import { services } from "@finsemble/finsemble-api";
+declare type INotification = services.notification.types.INotification;
+export declare type NotificationListRowPropType = {
+    notification: INotification;
+    newNotificationHaloPeriodSeconds: number;
+};
+export declare const NotificationListRowShell: React.FunctionComponent<NotificationListRowPropType>;
+declare const ListView: React.FunctionComponent<NotificationListViewProps>;
+export default ListView;

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

@@ -0,0 +1,150 @@
+import React, { useContext, useState, useEffect } from "react";
+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 { CheckButton } from "../shared/CheckButton";
+// Utils
+import { getActiveFilter, getMostRecentAction, isNewNotification, isReNotification, searchNotifications, } from "../../utils";
+import { NotificationCardHeaderLogo } from "../shared/notificationCard/NotificationCardHeaderLogo";
+// Constants
+import { SelectionMode } from "../../constants";
+import { ErrorBoundary } from "../../../common/ErrorBoundary";
+const ListHeaderComponent = () => (React.createElement("div", { className: "list-header__container" },
+    React.createElement("div", { className: "list-header_cell" }, "Received"),
+    React.createElement("div", { className: "list-header_cell" }, "App"),
+    React.createElement("div", { className: "list-header_cell" }, "Content"),
+    React.createElement("div", { className: "list-header_cell" }, "")));
+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
+        ? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)
+        : false);
+    // effect needed as the newNotificationHaloPeriodSeconds is fecthed asynchronously in the parent component
+    // and sometimes at the first render, this value is still 0
+    useEffect(() => {
+        setIsNew(isNewNotification(notification, newNotificationHaloPeriodSeconds));
+    }, [newNotificationHaloPeriodSeconds]);
+    useEffect(() => {
+        let isNewTimerId;
+        if (isNew) {
+            if (notification.isRead) {
+                setIsNew(false);
+                clearTimeout(isNewTimerId);
+            }
+            else {
+                isNewTimerId = setTimeout(() => {
+                    setIsNew(false);
+                }, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));
+            }
+        }
+        return () => {
+            clearTimeout(isNewTimerId);
+        };
+    }, [isNew, notification]);
+    useEffect(() => {
+        let isRenotificationTimerId;
+        if (isReNotification(notification, newNotificationHaloPeriodSeconds)) {
+            const mostRecentAction = getMostRecentAction(notification);
+            if (mostRecentAction) {
+                const { datePerformed } = mostRecentAction;
+                setWokeFromSnooze(true);
+                isRenotificationTimerId = setTimeout(() => {
+                    setWokeFromSnooze(false);
+                }, differenceInMilliseconds(addSeconds(parseISO(datePerformed), newNotificationHaloPeriodSeconds), Date.now()));
+            }
+        }
+        else {
+            setWokeFromSnooze(false);
+            clearTimeout(isRenotificationTimerId);
+        }
+        return () => {
+            clearTimeout(isRenotificationTimerId);
+        };
+    }, [newNotificationHaloPeriodSeconds, notification]);
+    const overFlowActions = Object.assign({}, OverflowMenuActions);
+    overFlowActions.DETAILS.action = (detailNotification) => {
+        setSelectedNotification(detailNotification);
+    };
+    delete overFlowActions.DISMISS;
+    useEffect(() => {
+        function listenMuteStateChanged(error, response) {
+            if (error) {
+                console.error("FinsembleNotificationsMuteStateChannel: ", error);
+            }
+            else {
+                const { data } = response;
+                if (notification.source === data.source && notification.type === data.type) {
+                    setIsMuteFilterApplied(data.isMuted);
+                }
+            }
+        }
+        FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        return () => {
+            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,
+            selectionMode === SelectionMode.SELECTION ? (React.createElement("div", { className: "list-row__cell" },
+                React.createElement(CheckButton, { notification: notification }))) : (React.createElement(React.Fragment, null)),
+            children)) : (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "list-row__cell" }, format(Date.parse(notification.issuedAt), "dd-MM-yyyy HH:mm")),
+            React.createElement("div", { className: "list-row__cell" }, selectionMode === SelectionMode.SELECTION ? (React.createElement("div", { className: "list-row__cell" },
+                React.createElement(CheckButton, { notification: notification }))) : (React.createElement(NotificationCardHeaderLogo, { headerLogo: notification.headerLogo }))),
+            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)))));
+};
+const ListView = ({ notificationHeaderRow, notificationListRow, notifications, }) => {
+    var _a;
+    const notificationsContext = useContext(NotificationsContext);
+    // The context will be used to filter the notifications
+    const { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;
+    const activeFilter = getActiveFilter(drawerControlProps);
+    const [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);
+    const NotificationHeaderRow = notificationHeaderRow || ListHeaderComponent;
+    const NotificationListRow = notificationListRow || NotificationListRowShell;
+    // Sets the current default preference
+    useEffect(() => {
+        async function getNotificationsPreferences() {
+            return await FSBL.Clients.NotificationClient.getPreferences();
+        }
+        getNotificationsPreferences().then((preferences) => {
+            setNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);
+        });
+    }, []);
+    useEffect(() => {
+        if (searchString === "") {
+            setFilteredNotifications(notifications);
+        }
+        else {
+            setFilteredNotifications(searchNotifications(notifications, searchString));
+        }
+    }, [searchString, notifications]);
+    let controlFilteredNotifications = activeFilter ? (_a = activeFilter.run) === null || _a === void 0 ? void 0 : _a.call(activeFilter, filteredNotifications) : [];
+    controlFilteredNotifications.sort((a, b) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt));
+    controlFilteredNotifications = controlFilteredNotifications.filter((notification) => activeFilter.action === "snoozed" ? notification.isSnoozed : !notification.isSnoozed);
+    return controlFilteredNotifications.length === 0 ? (React.createElement(NoNotifications, null)) : (React.createElement(React.Fragment, null,
+        React.createElement(NotificationHeaderRow, null),
+        controlFilteredNotifications.map((notification, index) => {
+            const key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;
+            return (React.createElement(ErrorBoundary, { key: key },
+                React.createElement(NotificationListRow, { key: key, notification: notification, newNotificationHaloPeriodSeconds: newNotificationHaloPeriodSeconds })));
+        })));
+};
+export default ListView;
+//# sourceMappingURL=ListView.js.map

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

@@ -0,0 +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"]}

package/react/components/notifications/components/views/NotificationDetailsView.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { services } from "@finsemble/finsemble-api";
+declare type INotification = services.notification.types.INotification;
+declare const NotificationDetailsView: React.FunctionComponent<{
+    notification: INotification | null;
+}>;
+export default NotificationDetailsView;

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

@@ -0,0 +1,64 @@
+import React, { useContext, useState } from "react";
+import { format } from "date-fns";
+import { NotificationsContext } from "../../notificationsContext";
+import { Button } from "../../../common/Button";
+const translateAction = (actionType) => {
+    switch (actionType) {
+        case "FINSEMBLE:RECEIVED":
+            return "Notification received";
+        case "FINSEMBLE:READ":
+            return "Notification marked as read";
+        case "FINSEMBLE:UNREAD":
+            return "Notification marked as unread";
+        case "SNOOZE":
+            return "Snoozed";
+        case "FINSEMBLE:WAKE":
+            return "Renotified";
+        case "SPAWN":
+            return "Action: Spawn";
+        default:
+            return actionType;
+    }
+};
+const formatTimeStamp = (timestamp, dateFormat = "dd-MM-yyyy HH:mm") => format(Date.parse(timestamp), dateFormat);
+const renderActionHistoryItems = (notificationActionsHistory) => {
+    if (!notificationActionsHistory || notificationActionsHistory.length === 0) {
+        return React.createElement("span", null, "No actions to display");
+    }
+    else {
+        return notificationActionsHistory
+            .sort((a, b) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))
+            .map((actionHistoryItem, index) => {
+            const performedAction = actionHistoryItem;
+            return (React.createElement("div", { key: performedAction.id || index, className: "notification-details__performed-action" },
+                React.createElement("span", { className: "notification-details__performed-action-timestamp" }, formatTimeStamp(performedAction.datePerformed, "HH:mm dd-MM-yyyy")),
+                React.createElement("span", { className: "notification-details__performed-action-translated" }, translateAction(performedAction.type))));
+        });
+    }
+};
+const NotificationDetailsView = ({ notification }) => {
+    const notificationsContext = useContext(NotificationsContext);
+    const [showDefaultIcon, setShowDefaultIcon] = useState(false);
+    const goBack = () => {
+        notificationsContext.setSelectedNotification(null);
+    };
+    return notification ? (React.createElement("div", { className: "notifications-details__container" },
+        React.createElement("div", { style: { paddingRight: 8, marginLeft: -3 } },
+            React.createElement(Button, { onClick: () => goBack(), fashion: "primary", iconBefore: "chevron-left", text: "Back" })),
+        React.createElement("div", { className: "notification-details__header" },
+            React.createElement("img", { src: notification.headerLogo, style: showDefaultIcon ? { display: "none" } : {}, onError: () => setShowDefaultIcon(true) }),
+            showDefaultIcon ? React.createElement("i", { className: "ff-finsemble default-img" }) : null,
+            React.createElement("div", { className: "notification-card__title" }, notification.title)),
+        React.createElement("div", { className: "notification-details__body" }, notification.details),
+        React.createElement("div", { className: "notification-details__section" },
+            React.createElement("div", { className: "notification-details__section-title" }, "History"),
+            renderActionHistoryItems(notification.actionsHistory)),
+        React.createElement("div", { className: "notification-details__section" },
+            React.createElement("div", { className: "notification-details__section-title" }, "App"),
+            notification.source ? notification.source : "Uknown"),
+        notification.type ? (React.createElement("div", { className: "notification-details__section" },
+            React.createElement("div", { className: "notification-details__section-title" }, "Type"),
+            React.createElement("span", { className: "notification-details__section-type-label" }, notification.type))) : null)) : null;
+};
+export default NotificationDetailsView;
+//# sourceMappingURL=NotificationDetailsView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationDetailsView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/NotificationDetailsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useState } from \"react\";\nimport { format } from \"date-fns\";\n\nimport { NotificationsContext } from \"../../notificationsContext\";\nimport { Button } from \"../../../common/Button\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nconst translateAction = (actionType: string): string => {\n\tswitch (actionType) {\n\t\tcase \"FINSEMBLE:RECEIVED\":\n\t\t\treturn \"Notification received\";\n\n\t\tcase \"FINSEMBLE:READ\":\n\t\t\treturn \"Notification marked as read\";\n\n\t\tcase \"FINSEMBLE:UNREAD\":\n\t\t\treturn \"Notification marked as unread\";\n\n\t\tcase \"SNOOZE\":\n\t\t\treturn \"Snoozed\";\n\n\t\tcase \"FINSEMBLE:WAKE\":\n\t\t\treturn \"Renotified\";\n\n\t\tcase \"SPAWN\":\n\t\t\treturn \"Action: Spawn\";\n\n\t\tdefault:\n\t\t\treturn actionType;\n\t}\n};\n\nconst formatTimeStamp = (timestamp: string, dateFormat = \"dd-MM-yyyy HH:mm\") =>\n\tformat(Date.parse(timestamp), dateFormat);\n\nconst renderActionHistoryItems = (notificationActionsHistory: IPerformedAction[] | undefined) => {\n\tif (!notificationActionsHistory || notificationActionsHistory.length === 0) {\n\t\treturn <span>No actions to display</span>;\n\t} else {\n\t\treturn notificationActionsHistory\n\t\t\t.sort((a: IPerformedAction, b: IPerformedAction) => Date.parse(b.datePerformed) - Date.parse(a.datePerformed))\n\t\t\t.map((actionHistoryItem, index) => {\n\t\t\t\tconst performedAction = actionHistoryItem as IPerformedAction;\n\t\t\t\treturn (\n\t\t\t\t\t<div key={performedAction.id || index} className=\"notification-details__performed-action\">\n\t\t\t\t\t\t<span className=\"notification-details__performed-action-timestamp\">\n\t\t\t\t\t\t\t{formatTimeStamp(performedAction.datePerformed, \"HH:mm dd-MM-yyyy\")}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className=\"notification-details__performed-action-translated\">\n\t\t\t\t\t\t\t{translateAction(performedAction.type)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t});\n\t}\n};\n\nconst NotificationDetailsView: React.FunctionComponent<{ notification: INotification | null }> = ({ notification }) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst [showDefaultIcon, setShowDefaultIcon] = useState(false);\n\n\tconst goBack = () => {\n\t\tnotificationsContext.setSelectedNotification(null);\n\t};\n\n\treturn notification ? (\n\t\t<div className=\"notifications-details__container\">\n\t\t\t<div style={{ paddingRight: 8, marginLeft: -3 }}>\n\t\t\t\t<Button onClick={() => goBack()} fashion=\"primary\" iconBefore=\"chevron-left\" text=\"Back\" />\n\t\t\t</div>\n\t\t\t<div className=\"notification-details__header\">\n\t\t\t\t<img\n\t\t\t\t\tsrc={notification.headerLogo}\n\t\t\t\t\tstyle={showDefaultIcon ? { display: \"none\" } : {}}\n\t\t\t\t\tonError={() => setShowDefaultIcon(true)}\n\t\t\t\t/>\n\t\t\t\t{showDefaultIcon ? <i className=\"ff-finsemble default-img\" /> : null}\n\t\t\t\t<div className=\"notification-card__title\">{notification.title}</div>\n\t\t\t</div>\n\t\t\t<div className=\"notification-details__body\">{notification.details}</div>\n\t\t\t<div className=\"notification-details__section\">\n\t\t\t\t<div className=\"notification-details__section-title\">History</div>\n\t\t\t\t{renderActionHistoryItems(notification.actionsHistory)}\n\t\t\t</div>\n\t\t\t<div className=\"notification-details__section\">\n\t\t\t\t<div className=\"notification-details__section-title\">App</div>\n\t\t\t\t{notification.source ? notification.source : \"Uknown\"}\n\t\t\t</div>\n\t\t\t{notification.type ? (\n\t\t\t\t<div className=\"notification-details__section\">\n\t\t\t\t\t<div className=\"notification-details__section-title\">Type</div>\n\t\t\t\t\t<span className=\"notification-details__section-type-label\">{notification.type}</span>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t) : null;\n};\n\nexport default NotificationDetailsView;\n"]}

package/react/components/notifications/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const NOTIFICATIONS_PUBSUB_TOPIC = "notification-ui";
+export declare enum ViewMode {
+    LIST = 0,
+    CARD = 1
+}
+export declare enum SelectionMode {
+    SELECTION = 0,
+    NO_SELECTION = 1
+}

package/react/components/notifications/constants.js

@@ -0,0 +1,12 @@
+export const NOTIFICATIONS_PUBSUB_TOPIC = "notification-ui";
+export var ViewMode;
+(function (ViewMode) {
+    ViewMode[ViewMode["LIST"] = 0] = "LIST";
+    ViewMode[ViewMode["CARD"] = 1] = "CARD";
+})(ViewMode || (ViewMode = {}));
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode[SelectionMode["SELECTION"] = 0] = "SELECTION";
+    SelectionMode[SelectionMode["NO_SELECTION"] = 1] = "NO_SELECTION";
+})(SelectionMode || (SelectionMode = {}));
+//# sourceMappingURL=constants.js.map

package/react/components/notifications/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/notifications/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG,iBAAiB,CAAC;AAE5D,MAAM,CAAN,IAAY,QAGX;AAHD,WAAY,QAAQ;IACnB,uCAAI,CAAA;IACJ,uCAAI,CAAA;AACL,CAAC,EAHW,QAAQ,KAAR,QAAQ,QAGnB;AAED,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACxB,2DAAS,CAAA;IACT,iEAAY,CAAA;AACb,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB","sourcesContent":["export const NOTIFICATIONS_PUBSUB_TOPIC = \"notification-ui\";\n\nexport enum ViewMode {\n\tLIST,\n\tCARD,\n}\n\nexport enum SelectionMode {\n\tSELECTION,\n\tNO_SELECTION,\n}\n"]}

package/react/components/notifications/icons/Card.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Card(props: any): JSX.Element;

package/react/components/notifications/icons/Card.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+export default function Card(props) {
+    const wrapperClasses = `finsemble-notifications_center__control icon ${props.className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, onClick: () => props.onClickHandler(), title: props.tooltip || "List" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ACB2C0", width: "19", height: "16", viewBox: "0 0 19 16" },
+            React.createElement("g", { transform: "translate(-340 -43) translate(339 42)" },
+                React.createElement("path", { d: "M18 .5H3C1.62.5.5 1.62.5 3v12c0 1.38 1.12 2.5 2.5 2.5h15c1.38 0 2.5-1.12 2.5-2.5V3c0-1.38-1.12-2.5-2.5-2.5zm-15 1h15c.828 0 1.5.672 1.5 1.5v12c0 .828-.672 1.5-1.5 1.5H3c-.828 0-1.5-.672-1.5-1.5V3c0-.828.672-1.5 1.5-1.5z" }),
+                React.createElement("circle", { cx: "6.5", cy: "6.5", r: "2.5" }),
+                React.createElement("path", { d: "M16 6c.552 0 1 .448 1 1 0 .513-.386.936-.883.993L16 8h-4c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L12 6h4zM16 11c.552 0 1 .448 1 1 0 .513-.386.936-.883.993L16 13H5c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L5 11h11z" })))));
+}
+//# sourceMappingURL=Card.js.map

package/react/components/notifications/icons/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/notifications/icons/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAU;IACtC,MAAM,cAAc,GAAG,gDAAgD,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACtG,OAAO,CACN,6BAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,MAAM;QACpG,6BAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;YAChG,2BAAG,SAAS,EAAC,uCAAuC;gBACnD,8BAAM,CAAC,EAAC,6NAA6N,GAAG;gBACxO,gCAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,GAAG;gBACpC,8BAAM,CAAC,EAAC,4NAA4N,GAAG,CACpO,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nexport default function Card(props: any) {\n\tconst wrapperClasses = `finsemble-notifications_center__control icon ${props.className || \"\"}`.trim();\n\treturn (\n\t\t<div className={wrapperClasses} onClick={() => props.onClickHandler()} title={props.tooltip || \"List\"}>\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#ACB2C0\" width=\"19\" height=\"16\" viewBox=\"0 0 19 16\">\n\t\t\t\t<g transform=\"translate(-340 -43) translate(339 42)\">\n\t\t\t\t\t<path d=\"M18 .5H3C1.62.5.5 1.62.5 3v12c0 1.38 1.12 2.5 2.5 2.5h15c1.38 0 2.5-1.12 2.5-2.5V3c0-1.38-1.12-2.5-2.5-2.5zm-15 1h15c.828 0 1.5.672 1.5 1.5v12c0 .828-.672 1.5-1.5 1.5H3c-.828 0-1.5-.672-1.5-1.5V3c0-.828.672-1.5 1.5-1.5z\" />\n\t\t\t\t\t<circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\" />\n\t\t\t\t\t<path d=\"M16 6c.552 0 1 .448 1 1 0 .513-.386.936-.883.993L16 8h-4c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L12 6h4zM16 11c.552 0 1 .448 1 1 0 .513-.386.936-.883.993L16 13H5c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L5 11h11z\" />\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

package/react/components/notifications/icons/Chevron.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Chevron(props: any): JSX.Element;

package/react/components/notifications/icons/Chevron.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+export default function Chevron(props) {
+    const wrapperClasses = `finsemble-notifications_center__header icon ${props.className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, onClick: () => props.onClickHandler(), title: props.tooltip || "Dismiss" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "9", height: "14", viewBox: "0 0 9 14" },
+            React.createElement("defs", null,
+                React.createElement("filter", { id: "86g0ee3xia" },
+                    React.createElement("feColorMatrix", { in: "SourceGraphic", values: "0 0 0 0 0.674510 0 0 0 0 0.698039 0 0 0 0 0.752941 0 0 0 1.000000 0" }))),
+            React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                React.createElement("g", { filter: "url(#86g0ee3xia)", transform: "translate(-405 -17)" },
+                    React.createElement("g", null,
+                        React.createElement("path", { fill: "#FFF", d: "M12.329.9c.483-.52 1.282-.535 1.784-.035s.518 1.325.034 1.845L8.201 9.1c-.509.547-1.36.53-1.85-.035l-5.53-6.39c-.464-.537-.42-1.362.1-1.843.519-.48 1.316-.434 1.781.103l4.623 5.342L12.33.9z", transform: "rotate(-90 218 -186.5) matrix(-1 0 0 1 15 0)" })))))));
+}
+//# sourceMappingURL=Chevron.js.map

package/react/components/notifications/icons/Chevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chevron.js","sourceRoot":"","sources":["../../../../src/components/notifications/icons/Chevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAU;IACzC,MAAM,cAAc,GAAG,+CAA+C,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACrG,OAAO,CACN,6BAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS;QACvG,6BAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU;YAC/E;gBACC,gCAAQ,EAAE,EAAC,YAAY;oBACtB,uCACC,EAAE,EAAC,eAAe,EAClB,MAAM,EAAC,qEAAqE,GAC3E,CACM,CACH;YACP,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;gBAChC,2BAAG,MAAM,EAAC,kBAAkB,EAAC,SAAS,EAAC,qBAAqB;oBAC3D;wBACC,8BACC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,+LAA+L,EACjM,SAAS,EAAC,8CAA8C,GACvD,CACC,CACD,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nexport default function Chevron(props: any) {\n\tconst wrapperClasses = `finsemble-notifications_center__header icon ${props.className || \"\"}`.trim();\n\treturn (\n\t\t<div className={wrapperClasses} onClick={() => props.onClickHandler()} title={props.tooltip || \"Dismiss\"}>\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"14\" viewBox=\"0 0 9 14\">\n\t\t\t\t<defs>\n\t\t\t\t\t<filter id=\"86g0ee3xia\">\n\t\t\t\t\t\t<feColorMatrix\n\t\t\t\t\t\t\tin=\"SourceGraphic\"\n\t\t\t\t\t\t\tvalues=\"0 0 0 0 0.674510 0 0 0 0 0.698039 0 0 0 0 0.752941 0 0 0 1.000000 0\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</filter>\n\t\t\t\t</defs>\n\t\t\t\t<g fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t\t<g filter=\"url(#86g0ee3xia)\" transform=\"translate(-405 -17)\">\n\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\t\t\t\td=\"M12.329.9c.483-.52 1.282-.535 1.784-.035s.518 1.325.034 1.845L8.201 9.1c-.509.547-1.36.53-1.85-.035l-5.53-6.39c-.464-.537-.42-1.362.1-1.843.519-.48 1.316-.434 1.781.103l4.623 5.342L12.33.9z\"\n\t\t\t\t\t\t\t\ttransform=\"rotate(-90 218 -186.5) matrix(-1 0 0 1 15 0)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

package/react/components/notifications/icons/CloseIcon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function CloseIcon(props: any): JSX.Element;

package/react/components/notifications/icons/CloseIcon.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+export default function CloseIcon(props) {
+    const wrapperClasses = `finsemble-icon ${props.className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, onClick: () => props.onClickHandler(), title: props.tooltip || "Dismiss" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "3 3 16 16" },
+            React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                React.createElement("g", { stroke: "#ACB2C0", strokeWidth: "1.5" },
+                    React.createElement("path", { d: "M8 8l10 10m0-10L8 18" }))))));
+}
+//# sourceMappingURL=CloseIcon.js.map

package/react/components/notifications/icons/CloseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseIcon.js","sourceRoot":"","sources":["../../../../src/components/notifications/icons/CloseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAU;IAC3C,MAAM,cAAc,GAAG,kBAAkB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;IACxE,OAAO,CACN,6BAAK,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,IAAI,SAAS;QACvG,6BAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;YACjF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;gBAChC,2BAAG,MAAM,EAAC,SAAS,EAAC,WAAW,EAAC,KAAK;oBACpC,8BAAM,CAAC,EAAC,sBAAsB,GAAG,CAC9B,CACD,CACC,CACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import * as React from \"react\";\nexport default function CloseIcon(props: any) {\n\tconst wrapperClasses = `finsemble-icon ${props.className || \"\"}`.trim();\n\treturn (\n\t\t<div className={wrapperClasses} onClick={() => props.onClickHandler()} title={props.tooltip || \"Dismiss\"}>\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"3 3 16 16\">\n\t\t\t\t<g fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t\t<g stroke=\"#ACB2C0\" strokeWidth=\"1.5\">\n\t\t\t\t\t\t<path d=\"M8 8l10 10m0-10L8 18\" />\n\t\t\t\t\t</g>\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"]}

package/react/components/notifications/icons/EnvelopeClose.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function EnvelopeCloseIcon(props: any): JSX.Element;

package/react/components/notifications/icons/EnvelopeClose.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+export default function EnvelopeCloseIcon(props) {
+    const wrapperClasses = `finsemble-icon ${props.className || ""}`.trim();
+    return (React.createElement("div", { className: wrapperClasses, onClick: () => props.onClickHandler(), title: props.tooltip || "Mark Read" },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "12", viewBox: "0 0 18 12" },
+            React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                React.createElement("g", { fill: "#ACB2C0" },
+                    React.createElement("g", null,
+                        React.createElement("path", { d: "M14.604 3.676c.914 0 1.655-.74 1.655-1.656 0-.914-.741-1.655-1.655-1.655s-1.655.741-1.655 1.655c0 .915.74 1.656 1.655 1.656", transform: "translate(-8 -12) translate(8.8 12)" }),
+                        React.createElement("path", { d: "M14.131 4.575v5.582H1.36V3.11l6.338 3.737 5.11-2.933c-.238-.237-.427-.473-.569-.757l-4.54 2.65-5.44-3.265h9.838c-.047-.142-.047-.33-.047-.52s0-.332.047-.52H1.311c-.52 0-.946.425-.946.945V10.11c0 .52.426.945.946.945h12.867c.52 0 .946-.425.946-.945V4.575c-.189.047-.33.047-.52.047-.142 0-.33 0-.473-.047", transform: "translate(-8 -12) translate(8.8 12)" })))))));
+}
+//# sourceMappingURL=EnvelopeClose.js.map