@everymatrix/nuts-inbox-widget 0.0.1

package/dist/collection/collection-manifest.json

@@ -0,0 +1,14 @@
+{
+  "entries": [
+    "./components/nuts-inbox-widget/nuts-inbox-widget.js",
+    "./components/nuts-notification/nuts-notification.js",
+    "./components/nuts-popover/nuts-popover.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  font-family: "Roboto", "Arial", sans-serif;
+}
+
+.BellIconWrapper {
+  width: 40px;
+  height: 40px;
+}
+
+.BellIcon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+}

package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.js

@@ -0,0 +1,450 @@
+import { __decorate, __metadata } from "tslib";
+import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
+import { io } from 'socket.io-client';
+import { ClickOutside } from "stencil-click-outside";
+export class NutsInboxWidget {
+  constructor() {
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Environment on which the widget is used (possible values: `stage`, `prod`)
+     */
+    this.environment = 'stage';
+    /**
+     * Client custom styling via inline styles
+     */
+    this.clientStyling = '';
+    this.isLoading = true;
+    this.popoverVisible = false;
+    this.ntsEndpoint = 'https://nts.everymatrix.com/ss';
+    this.token = null;
+    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;
+        this.clientStyling = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  paramChangeHandler(newValue, oldValue) {
+    if (newValue != oldValue) {
+      if (this.userId && this.sessionId && this.operatorId) {
+        this.callSS();
+      }
+    }
+  }
+  initializeHandler(newValue, oldValue) {
+    if (newValue != oldValue) {
+      if (this.userId && this.operatorId && this.applicationIdentifier) {
+        this.initializeSession();
+      }
+    }
+  }
+  clickOutsideHandle() {
+    this.popoverVisible = false;
+  }
+  callSS() {
+    const url = new URL(`${this.ntsEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}`);
+    if (this.deviceId) {
+      url.searchParams.append('deviceToken', this.deviceId);
+    }
+    url.searchParams.append('language', this.language);
+    const headers = new Headers();
+    headers.append('authorization', this.sessionId);
+    headers.append('Content-Type', 'application/json');
+    const options = {
+      method: 'GET',
+      headers,
+    };
+    fetch(url.href, options)
+      .then((res) => {
+      if (res.status < 300) {
+        return res.json();
+      }
+    })
+      .catch((err) => {
+      console.error('There was an error while trying to connect to the Notification System', err);
+    })
+      .finally(() => {
+      this.isLoading = false;
+    });
+  }
+  setupSocket() {
+    if (this.token) {
+      this.socketRef = io(this.socketUrl, {
+        reconnectionDelayMax: 10000,
+        transports: ['websocket'],
+        auth: {
+          token: `${this.token}`,
+        },
+      });
+      this.socketRef.on('connect_error', (error) => {
+        console.error('WebSocket error', error);
+      });
+      this.socketRef.on('notification_received', (data) => {
+        this.newNotification.emit(data.message);
+      });
+      this.socketRef.on('unseen_count_changed', (data) => {
+        this.unseenCount = data.unseenCount;
+      });
+    }
+  }
+  getUnseenCounter() {
+    let url = new URL(`${this.backendUrl}/v1/widgets/notifications/unseen?limit=100`);
+    const headers = new Headers();
+    headers.append('Authorization', `Bearer ${this.token || ''}`);
+    const options = {
+      method: 'GET',
+      headers,
+    };
+    fetch(url.href, options)
+      .then((res) => res.json())
+      .then((data) => {
+      this.unseenCount = data.data.count;
+    });
+  }
+  async initializeSession() {
+    return new Promise((resolve, reject) => {
+      let url = new URL(`${this.backendUrl}/v1/widgets/session/initialize`);
+      const headers = new Headers();
+      headers.append('Authorization', `Bearer ${this.token || ''}`);
+      headers.append('Content-Type', 'application/json');
+      const body = {
+        applicationIdentifier: this.applicationIdentifier,
+        subscriberId: `${this.operatorId}-${this.userId}`,
+        hmacHash: null
+      };
+      const options = {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers,
+      };
+      fetch(url.href, options)
+        .then(res => res.json())
+        .then((data) => {
+        this.token = data.data.token;
+        this.setupSocket();
+        this.getUnseenCounter();
+        resolve(data);
+      })
+        .catch((err) => {
+        reject(err);
+      });
+    });
+  }
+  togglePopover() {
+    this.popoverVisible = !this.popoverVisible;
+  }
+  async connectedCallback() {
+    if (this.userId && this.operatorId && this.applicationIdentifier) {
+      this.initializeSession();
+    }
+    if (this.userId && this.operatorId && this.sessionId) {
+      this.callSS();
+    }
+    if (this.clientStylingUrl) {
+      this.setClientStylingURL();
+    }
+  }
+  renderBellIcon() {
+    return (h("div", { onClick: () => this.togglePopover(), class: "BellIcon" },
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", class: "bi bi-bell", viewBox: "0 0 16 16" },
+        " ",
+        h("path", { d: "M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" }),
+        " "),
+      this.unseenCount > 0 ? h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "nc-bell-button-dot css-0 css-1eg2znq" },
+        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" })))) : ''));
+  }
+  render() {
+    return (h("div", { class: "BellIconWrapper", ref: el => this.stylingContainer = el },
+      !this.isLoading && this.renderBellIcon(),
+      this.popoverVisible && h("nuts-popover", { "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling })));
+  }
+  static get is() { return "nuts-inbox-widget"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["nuts-inbox-widget.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["nuts-inbox-widget.css"]
+  }; }
+  static get properties() { return {
+    "backendUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "HTTP Endpoint URL for NuTS"
+      },
+      "attribute": "backend-url",
+      "reflect": true
+    },
+    "socketUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Socket Endpoint URL for NuTS"
+      },
+      "attribute": "socket-url",
+      "reflect": true
+    },
+    "userId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ID of the user"
+      },
+      "attribute": "user-id",
+      "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
+    },
+    "operatorId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The operatorID on which we can find the user"
+      },
+      "attribute": "operator-id",
+      "reflect": true
+    },
+    "deviceId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The deviceID from which the user access the website"
+      },
+      "attribute": "device-id",
+      "reflect": true
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language of the widget"
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "'en'"
+    },
+    "environment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Environment on which the widget is used (possible values: `stage`, `prod`)"
+      },
+      "attribute": "environment",
+      "reflect": true,
+      "defaultValue": "'stage'"
+    },
+    "applicationIdentifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Novu application identifier"
+      },
+      "attribute": "application-identifier",
+      "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 {
+    "isLoading": {},
+    "popoverVisible": {},
+    "unseenCount": {}
+  }; }
+  static get events() { return [{
+      "method": "notificationFeed",
+      "name": "notificationFeed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Notifications[]",
+        "resolved": "Notifications[]",
+        "references": {
+          "Notifications": {
+            "location": "import",
+            "path": "../../types/nuts-inbox-widget.types"
+          }
+        }
+      }
+    }, {
+      "method": "newNotification",
+      "name": "newNotification",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "userId",
+      "methodName": "paramChangeHandler"
+    }, {
+      "propName": "sessionId",
+      "methodName": "paramChangeHandler"
+    }, {
+      "propName": "operatorId",
+      "methodName": "paramChangeHandler"
+    }, {
+      "propName": "deviceId",
+      "methodName": "paramChangeHandler"
+    }, {
+      "propName": "userId",
+      "methodName": "initializeHandler"
+    }, {
+      "propName": "operatorId",
+      "methodName": "initializeHandler"
+    }, {
+      "propName": "applicationIdentifier",
+      "methodName": "initializeHandler"
+    }]; }
+}
+__decorate([
+  ClickOutside(),
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], NutsInboxWidget.prototype, "clickOutsideHandle", null);

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

@@ -0,0 +1,147 @@
+:host {
+  display: block;
+}
+
+p {
+  display: block;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+
+.NotificationContainer {
+  animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+  opacity: 0;
+  transform-origin: top center;
+  padding: 15px;
+  position: relative;
+  display: flex;
+  line-height: 20px;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 7px;
+  margin: 10px 15px;
+  color: white;
+  background: #23232b;
+  font-weight: 400;
+  font-size: 14px;
+}
+@keyframes show {
+  100% {
+    opacity: 1;
+    transform: none;
+  }
+}
+.NotificationContainer .AvatarContainer {
+  margin-right: 10px;
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40px;
+  border: 1px solid #525266;
+  overflow: hidden;
+}
+.NotificationContainer .AvatarContainer .Avatar {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  user-select: none;
+  overflow: hidden;
+  width: 38px;
+  min-width: 38px;
+  height: 38px;
+  border-radius: 32px;
+  text-decoration: none;
+  border: 0px;
+  background-color: transparent;
+  padding: 0px;
+}
+.NotificationContainer .AvatarContainer .Avatar .AvatarImage {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.NotificationContainer .ContentContainer {
+  display: flex;
+  flex-direction: column;
+}
+.NotificationContainer .Date {
+  min-width: 55px;
+  font-size: 12px;
+  font-weight: 400;
+  opacity: 0.5;
+  line-height: 14.4px;
+  color: #525266;
+}
+.NotificationContainer .Settings {
+  opacity: 0;
+  margin-left: auto;
+  cursor: pointer;
+}
+.NotificationContainer .SettingsDropdown {
+  z-index: 999;
+  position: absolute;
+  background: #292933;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px;
+  border-radius: 7px;
+  padding: 4px;
+  border: none;
+  left: 200px;
+  top: 40px;
+  transition-property: opacity;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+  opacity: 1;
+  z-index: 300;
+  width: max-content;
+  display: flex;
+  flex-direction: column;
+}
+.NotificationContainer .SettingsDropdown svg {
+  margin-right: 10px;
+}
+.NotificationContainer .SettingsDropdown button {
+  font-family: inherit;
+  border: 0px;
+  background-color: transparent;
+  outline: 0px;
+  width: 100%;
+  text-align: left;
+  text-decoration: none;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  cursor: pointer;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  color: white;
+  font-weight: 400;
+  font-size: 14px;
+}
+.NotificationContainer .SettingsDropdown button:hover {
+  background: #3d3d4d;
+  transition: 300ms;
+}
+.NotificationContainer:hover .Settings {
+  opacity: 0.5;
+}
+
+.Unseen::before {
+  content: "";
+  position: absolute;
+  inset: 0px;
+  width: 5px;
+  border-radius: 7px 0px 0px 7px;
+  background: linear-gradient(0deg, #ff512f 0%, #dd2476 100%);
+}
+
+.Unseen:hover .UnseenButton {
+  opacity: 0;
+  width: 0px;
+}