@everymatrix/nuts-inbox-widget 0.0.1

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

@@ -0,0 +1,426 @@
+import { Component, h, Prop, State, Event, Listen } from '@stencil/core';
+import { formatDistanceToNow } from 'date-fns';
+import * as dateFnsLocales from 'date-fns/locale';
+const dateFnsLocale = (lang) => {
+  return lang in dateFnsLocales ? dateFnsLocales[lang] : dateFnsLocales.enUS;
+};
+export class NutsNotification {
+  constructor() {
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    this.showSettingsModal = false;
+    this.messageSeen = false;
+    this.messageRead = false;
+    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);
+      });
+    };
+  }
+  allNotificationsReadHandler() {
+    this.messageSeen = true;
+    this.messageRead = true;
+  }
+  settingsOpenedHandler(event) {
+    if (event.detail != this.messageId) {
+      this.showSettingsModal = false;
+    }
+  }
+  connectedCallback() {
+    this.messageSeen = this.seen;
+    this.messageRead = this.read;
+  }
+  deleteMessage(messageId) {
+    let url = new URL(`${this.backendUrl}/v1/widgets/messages/${messageId}`);
+    const headers = new Headers();
+    headers.append('Authorization', `Bearer ${this.token || ''}`);
+    const options = {
+      method: 'DELETE',
+      headers,
+    };
+    fetch(url.href, options)
+      .then((res) => res.json())
+      .then(() => {
+      this.showSettingsModal = false;
+      this.messageDeteled.emit(messageId);
+    })
+      .catch((err) => {
+      console.error('err', err);
+    });
+  }
+  markAsRead(messageId) {
+    let url = new URL(`${this.backendUrl}/v1/widgets/messages/markAs`);
+    const headers = new Headers();
+    headers.append('Authorization', `Bearer ${this.token || ''}`);
+    headers.append('Content-Type', 'application/json');
+    const body = {
+      messageId: `${messageId}`,
+      mark: {
+        seen: true,
+        read: true
+      }
+    };
+    const options = {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(body)
+    };
+    fetch(url.href, options)
+      .then((res) => res.json())
+      .then((response) => {
+      this.messageSeen = response.data[0].seen;
+      this.messageRead = response.data[0].read;
+      this.showSettingsModal = false;
+    })
+      .catch((err) => {
+      console.error('err', err);
+    });
+  }
+  toggleSettingsModal() {
+    this.showSettingsModal = !this.showSettingsModal;
+    ;
+    if (this.showSettingsModal) {
+      this.settingsOpened.emit(this.messageId);
+    }
+  }
+  render() {
+    return (h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el },
+      this.badge ? h("div", { class: "AvatarContainer" },
+        h("div", { class: "Avatar" },
+          h("img", { class: "AvatarImage", src: this.badge }))) : '',
+      h("div", { class: "ContentContainer" },
+        h("p", null, this.content),
+        h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))),
+      h("div", { class: "Settings", onClick: () => this.toggleSettingsModal() },
+        h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+          h("path", { 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" }))),
+      this.showSettingsModal ? h("div", { class: "SettingsDropdown" },
+        h("button", { onClick: () => this.markAsRead(this.messageId) },
+          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" })),
+          "Mark as read"),
+        h("button", { onClick: () => this.deleteMessage(this.messageId) },
+          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" })),
+          "Remove the message")) : '',
+      this.messageSeen ? '' : h("div", { class: "UnseenButton" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" },
+          h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }),
+          h("defs", null,
+            h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" },
+              h("stop", { "stop-color": "#FF512F" }),
+              h("stop", { offset: "1", "stop-color": "#DD2476" })))))));
+  }
+  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": ""
+      },
+      "attribute": "badge",
+      "reflect": true
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "content",
+      "reflect": true
+    },
+    "date": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "date",
+      "reflect": true
+    },
+    "showSettings": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-settings",
+      "reflect": true
+    },
+    "read": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "read",
+      "reflect": true
+    },
+    "seen": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "seen",
+      "reflect": true
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": true
+    },
+    "userId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "user-id",
+      "reflect": true
+    },
+    "messageId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "message-id",
+      "reflect": true
+    },
+    "operatorId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "operator-id",
+      "reflect": true
+    },
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "token",
+      "reflect": true
+    },
+    "backendUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "backend-url",
+      "reflect": true
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via inline styles"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Custom styling url for the novu iFrame, formatted as a JSON object according to the documentation: https://docs.novu.co/notification-center/custom-styling/"
+      },
+      "attribute": "client-styling-url",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "showSettingsModal": {},
+    "messageSeen": {},
+    "messageRead": {}
+  }; }
+  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 listeners() { return [{
+      "name": "allNotificationsRead",
+      "method": "allNotificationsReadHandler",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "settingsOpened",
+      "method": "settingsOpenedHandler",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/nuts-popover/nuts-popover.css

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+}
+
+.Popover {
+  padding: 15px 0px;
+  height: auto;
+  border-radius: 7px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px;
+  background: #1e1e26;
+  margin: 0px;
+  font-family: inherit;
+  color: #333737;
+  direction: ltr;
+  width: 420px;
+  z-index: 999;
+}
+.Popover .Header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px 10px 20px;
+  box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.55);
+}
+.Popover .Header .Title {
+  color: white;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  text-align: center;
+}
+.Popover .Header .Title .UnseenCounter {
+  text-decoration: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  border-radius: 10px;
+  letter-spacing: 0.25px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0px;
+  margin-left: 10px;
+  width: 25px;
+  height: 20px;
+  pointer-events: none;
+  border: none;
+  background: linear-gradient(0deg, #ff512f 0%, #dd2476 100%);
+  font-family: inherit;
+  line-height: 14px;
+  color: white;
+  font-weight: bold;
+  font-size: 12px;
+}
+.Popover .Header .MarkAsRead {
+  margin-top: 5px;
+  margin-right: 10px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 17px;
+  color: #828299;
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 0.5;
+}
+.Popover .Header .MarkAsRead:hover {
+  opacity: 0.7;
+  transition: 250ms;
+}
+.Popover .NotificationList {
+  height: 400px;
+  overflow: auto;
+}