@everymatrix/nuts-inbox-widget 1.45.10 → 1.45.13

package/dist/collection/components/nuts-notification/nuts-notification.js

@@ -0,0 +1,596 @@
+import { h, } from "@stencil/core";
+import { formatDistanceToNow } from "date-fns";
+import { translate, getTranslations } from "../../utils/locale.utils";
+import * as dateFnsLocales from "date-fns/locale";
+import { WarningFilled, InfoCircleFilled, CheckCircleFilled, CloseCircleFilled, UpCircleFilled, QuestionCircleFilled, DownOutlined, } from "@ant-design/icons-svg";
+import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
+import { MAX_NOTIFICATION_TEXT_LENGTH } from "./constants";
+import { truncate } from "../../utils/utils";
+import { deleteMessage, markAsRead } from "../../api/methods";
+const systemIcons = {
+    warning: {
+        icon: renderIconDefinitionToSVGElement(WarningFilled, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: '#FFF000' },
+        }),
+    },
+    info: {
+        icon: renderIconDefinitionToSVGElement(InfoCircleFilled, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: '#0000FF' },
+        }),
+    },
+    up: {
+        icon: renderIconDefinitionToSVGElement(UpCircleFilled, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' },
+        }),
+    },
+    question: {
+        icon: renderIconDefinitionToSVGElement(QuestionCircleFilled, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' },
+        }),
+    },
+    success: {
+        icon: renderIconDefinitionToSVGElement(CheckCircleFilled, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: '#4D9980' },
+        }),
+    },
+    error: {
+        icon: renderIconDefinitionToSVGElement(CloseCircleFilled, {
+            extraSVGAttrs: { width: '20px', height: '20px', fill: '#E54545' },
+        }),
+    },
+    arrowDown: {
+        icon: renderIconDefinitionToSVGElement(DownOutlined, {
+            extraSVGAttrs: { width: '16px', height: '16px', fill: '#A1A1B2' },
+        }),
+    },
+};
+const dateFnsLocale = (lang) => {
+    return lang in dateFnsLocales ? dateFnsLocales[lang] : dateFnsLocales.enUS;
+};
+export class NutsNotification {
+    constructor() {
+        this.toggleSettingsModal = (e) => {
+            e.stopImmediatePropagation();
+            this.showSettingsModal = !this.showSettingsModal;
+            this.settingsOpened.emit(this.messageId);
+        };
+        this.toggleNotificationRead = async (event) => {
+            event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
+            const unread = this.messageRead;
+            const markAsReadBody = {
+                messageId: `${this.messageId}`,
+                mark: {
+                    seen: !unread,
+                    read: !unread,
+                },
+            };
+            const notificationData = await markAsRead({
+                baseUrl: this.baseUrl,
+                body: markAsReadBody,
+                token: this.token,
+                unread,
+            });
+            this.messageRead = notificationData.messageRead;
+            this.messageSeen = notificationData.messageSeen;
+            this.showSettingsModal = notificationData.showSettingsModal;
+        };
+        this.deleteNotification = async () => {
+            const deleteMessageResponse = await deleteMessage({
+                baseUrl: this.baseUrl,
+                token: this.token,
+                messageId: this.messageId,
+            });
+            this.showSettingsModal = deleteMessageResponse;
+            if (deleteMessageResponse) {
+                return;
+            }
+            this.messageDeteled.emit(this.messageId);
+        };
+        this.notificationActionHandler = () => {
+            var _a, _b, _c;
+            if (this.notificationAction == 'default' || !this.notificationAction) {
+                if (this.redirectUrl.length > 0) {
+                    window.location.href = this.redirectUrl;
+                }
+            }
+            if (this.notificationAction == 'postMessage') {
+                window.postMessage({ type: 'NotificationRedirect', url: this.redirectUrl }, window.location.href);
+            }
+            if (!this.messageRead) {
+                this.toggleNotificationRead();
+            }
+            if (((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) <= MAX_NOTIFICATION_TEXT_LENGTH) {
+                return;
+            }
+            if (((_b = this.displayedContent) === null || _b === void 0 ? void 0 : _b.length) !== ((_c = this.content) === null || _c === void 0 ? void 0 : _c.length) &&
+                this.displayedContent !== this.content) {
+                this.displayedContent = this.content;
+                this.dropdownArrowRef.classList.add('FlipX');
+                return;
+            }
+            this.displayedContent = truncate(this.content, MAX_NOTIFICATION_TEXT_LENGTH);
+            this.dropdownArrowRef.classList.remove('FlipX');
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let url = new URL(this.clientStylingUrl);
+            let cssFile = document.createElement('style');
+            fetch(url.href)
+                .then((res) => res.text())
+                .then((data) => {
+                cssFile.innerHTML = data;
+                setTimeout(() => {
+                    this.stylingContainer.prepend(cssFile);
+                }, 1);
+            })
+                .catch((err) => {
+                console.log('error ', err);
+            });
+        };
+        this.assignRefToStylingContainer = (ref) => {
+            this.stylingContainer = ref;
+        };
+        this.assignRefToDropdownArrow = (ref) => {
+            this.dropdownArrowRef = ref;
+        };
+        this.badge = undefined;
+        this.content = undefined;
+        this.date = undefined;
+        this.showSettings = undefined;
+        this.read = undefined;
+        this.seen = undefined;
+        this.language = undefined;
+        this.sessionId = undefined;
+        this.subscriberId = undefined;
+        this.userId = undefined;
+        this.messageId = undefined;
+        this.operatorId = undefined;
+        this.token = undefined;
+        this.backendUrl = undefined;
+        this.redirectUrl = undefined;
+        this.notificationAction = undefined;
+        this.clientStylingUrl = undefined;
+        this.translationUrl = '';
+        this.clientStyling = '';
+        this.showSettingsModal = false;
+        this.messageSeen = false;
+        this.messageRead = false;
+        this.displayedContent = undefined;
+    }
+    allNotificationsReadHandler() {
+        this.messageSeen = true;
+        this.messageRead = true;
+    }
+    settingsOpenedHandler(event) {
+        if (event.detail != this.messageId) {
+            this.showSettingsModal = false;
+        }
+    }
+    handleNewTranslations() {
+        getTranslations(this.translationUrl);
+    }
+    async componentWillLoad() {
+        if (this.translationUrl.length > 2) {
+            await getTranslations(this.translationUrl);
+        }
+    }
+    connectedCallback() {
+        this.messageSeen = this.seen;
+        this.messageRead = this.read;
+        this.displayedContent = truncate(this.content, MAX_NOTIFICATION_TEXT_LENGTH);
+        this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
+    }
+    render() {
+        var _a, _b;
+        return (h("div", { key: '241e3882d506155469e1866c2e6c08295bf8b96a', class: "Wrapper" }, h("div", { key: 'd56153f521f757b11b129d555f4b197b581c3d70', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (h("div", { class: "AvatarContainer" }, h("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (h("div", { innerHTML: systemIcons[this.badge].icon })) : (h("img", { class: "AvatarImage", src: this.badge }))))) : (''), h("div", { key: 'c2d991cd04f17af75dedf0fce2d2febc51c361a4', class: "ContentContainer" }, h("p", { key: '57d8abcab3a9b3b721a4cdc01112ef5ed7357e71' }, this.displayedContent), h("p", { key: '8360147cbc1500b48644e4680b125419234e6989', class: "Date" }, formatDistanceToNow(new Date(this.date), {
+            addSuffix: true,
+            locale: dateFnsLocale(this.language),
+        }))), h("div", { key: '5ae9c01ea52240f0a7d5e79ea13a9b5eb56154f5', class: "RightActionsContainer" }, h("div", { key: 'f4d270028375dfed98c5671e5d505ae88621d83e', class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { key: '9d6755cd6d73809bdf7dd5feab94a0b7e2a9997d', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '668350d8c765ecdfed6fa23abffd11ff9b9848c2', d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), ((_b = this.content) === null || _b === void 0 ? void 0 : _b.length) > MAX_NOTIFICATION_TEXT_LENGTH && (h("div", { key: 'f41b92bb595e6e43875dba4ad098764f55adb52f', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow })))), this.showSettingsModal ? (h("div", { class: "SettingsDropdown" }, h("button", { onClick: this.toggleNotificationRead }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), h("button", { onClick: this.deleteNotification }, h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate('removeMessage', this.language)))) : ('')));
+    }
+    static get is() { return "nuts-notification"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nuts-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nuts-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Src for badge / avatar"
+                },
+                "attribute": "badge",
+                "reflect": true
+            },
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text content of the notification"
+                },
+                "attribute": "content",
+                "reflect": true
+            },
+            "date": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Date of the notification"
+                },
+                "attribute": "date",
+                "reflect": true
+            },
+            "showSettings": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether or not to show notification settings"
+                },
+                "attribute": "show-settings",
+                "reflect": true
+            },
+            "read": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether or not the item has been read"
+                },
+                "attribute": "read",
+                "reflect": true
+            },
+            "seen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether or not the item has been seen"
+                },
+                "attribute": "seen",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language code of the content"
+                },
+                "attribute": "language",
+                "reflect": true
+            },
+            "sessionId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The sessionID of the user"
+                },
+                "attribute": "session-id",
+                "reflect": true
+            },
+            "subscriberId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The subscriberID"
+                },
+                "attribute": "subscriber-id",
+                "reflect": true
+            },
+            "userId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique ID of the user who receives the notification"
+                },
+                "attribute": "user-id",
+                "reflect": true
+            },
+            "messageId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique ID of the notification content"
+                },
+                "attribute": "message-id",
+                "reflect": true
+            },
+            "operatorId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique ID of the operator domain"
+                },
+                "attribute": "operator-id",
+                "reflect": true
+            },
+            "token": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Token used in authorization of notification transactions"
+                },
+                "attribute": "token",
+                "reflect": true
+            },
+            "backendUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint for notification transactions"
+                },
+                "attribute": "backend-url",
+                "reflect": true
+            },
+            "redirectUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Redirect address in case of external url"
+                },
+                "attribute": "redirect-url",
+                "reflect": true
+            },
+            "notificationAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines notification behaviour onClick"
+                },
+                "attribute": "notification-action",
+                "reflect": true
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom styling passed as a URL"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translations via URL"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Clienty styling passed as a string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showSettingsModal": {},
+            "messageSeen": {},
+            "messageRead": {},
+            "displayedContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "messageDeteled",
+                "name": "messageDeleted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "settingsOpened",
+                "name": "settingsOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "translationUrl",
+                "methodName": "handleNewTranslations"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "allNotificationsRead",
+                "method": "allNotificationsReadHandler",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "settingsOpened",
+                "method": "settingsOpenedHandler",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}