@everymatrix/nuts-inbox-widget 0.0.9 → 1.44.0

package/dist/collection/api/methods/index.js

@@ -0,0 +1,135 @@
+export const initializeSession = async ({ baseUrl, body, headers, }) => {
+  var _a;
+  const url = new URL(`${baseUrl}/widgets/session/initialize`);
+  const localHeaders = new Headers(headers);
+  localHeaders.append('Content-Type', 'application/json');
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: localHeaders,
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    const newToken = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.token;
+    headers.append('Widget-Authorization', `Bearer ${newToken}`);
+    const unseenCounter = await getUnseenCount({
+      baseUrl,
+      headers,
+    });
+    return {
+      token: newToken,
+      unseenCounter,
+    };
+  }
+  catch (error) {
+    console.log(error);
+    return {
+      token: null,
+      unseenCounter: 0,
+    };
+  }
+};
+export const getUnseenCount = async ({ baseUrl, headers, }) => {
+  var _a;
+  const url = new URL(`${baseUrl}/widgets/notifications/unseen?limit=100`);
+  const options = {
+    method: 'GET',
+    headers,
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    const unseenCount = ((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.count) || 0;
+    return unseenCount;
+  }
+  catch (error) {
+    console.log(error);
+    return 0;
+  }
+};
+export const deleteMessage = async ({ baseUrl, headers, messageId, }) => {
+  const url = new URL(`${baseUrl}/widgets/messages/${messageId}`);
+  const options = {
+    method: 'DELETE',
+    headers,
+  };
+  try {
+    await fetch(url.href, options);
+    return false;
+  }
+  catch (error) {
+    console.log(error);
+    return true;
+  }
+};
+export const markAsRead = async ({ baseUrl, body, headers, unread, }) => {
+  const url = new URL(`${baseUrl}/widgets/messages/markAs`);
+  const localHeaders = new Headers(headers);
+  localHeaders.append('Content-Type', 'application/json');
+  const options = {
+    method: 'POST',
+    headers: localHeaders,
+    body: JSON.stringify(body),
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    return {
+      messageSeen: data.data[0].seen,
+      messageRead: data.data[0].read,
+      showSettingsModal: false,
+    };
+  }
+  catch (err) {
+    console.error('err', err);
+    return {
+      messageSeen: unread,
+      messageRead: unread,
+      showSettingsModal: true,
+    };
+  }
+};
+export const getNotifications = async ({ baseUrl, headers, page, }) => {
+  const url = new URL(`${baseUrl}/widgets/notifications/feed`);
+  url.searchParams.append('page', page.toString());
+  const options = {
+    method: 'GET',
+    headers,
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    return {
+      isLoading: false,
+      numberOfNotifications: data.totalCount,
+      notifications: data.data,
+    };
+  }
+  catch (error) {
+    console.log(error);
+    return {
+      isLoading: false,
+      numberOfNotifications: 0,
+      notifications: [],
+    };
+  }
+};
+export const markAllAsRead = async ({ baseUrl, headers, }) => {
+  const url = new URL(`${baseUrl}/widgets/messages/read`);
+  const localHeaders = new Headers(headers);
+  localHeaders.append('Content-Type', 'application/json');
+  const options = {
+    method: 'POST',
+    body: JSON.stringify({}),
+    headers: localHeaders,
+  };
+  try {
+    await fetch(url.href, options);
+    return true;
+  }
+  catch (error) {
+    console.log(error);
+    return false;
+  }
+};

package/dist/collection/api/methods/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -8,9 +8,14 @@
   height: 40px;
   display: flex;
 }
+.BellIconWrapper :hover {
+  cursor: pointer;
+}
 
 .BellIcon {
   width: 40px;
   height: 40px;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }

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

@@ -1,8 +1,8 @@
-import { __decorate, __metadata } from "tslib";
 import { getTranslations } from '../../utils/locale.utils';
-import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
+import { Component, h, Prop, State, Watch, Event, Listen, Element, } from '@stencil/core';
 import { io } from 'socket.io-client';
-import { ClickOutside } from "stencil-click-outside";
+import { initializeSession } from '../../api/methods';
+import { createAuthHeaders } from '../../utils/utils';
 export class NutsInboxWidget {
   constructor() {
     /**
@@ -29,10 +29,20 @@ export class NutsInboxWidget {
      * Translations via URL
      */
     this.translationUrl = '';
-    this.isLoading = true;
+    this.isLoading = false;
     this.popoverVisible = false;
-    this.ssEndpoint = 'https://nts.everymatrix.com/ss';
     this.token = null;
+    this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
+    this.initializeSessionBody = {
+      applicationIdentifier: this.applicationIdentifier,
+      subscriberId: this.subscriberId || `${this.operatorId}-${this.userId}`,
+      hmacHash: null,
+    };
+    this.defaultHeaders = createAuthHeaders(this.token, this.sessionId, this.admin);
+    this.togglePopover = () => {
+      this.popoverVisible = !this.popoverVisible;
+      window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -46,28 +56,40 @@ export class NutsInboxWidget {
         .then((data) => {
         cssFile.innerHTML = data;
         this.clientStyling = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+        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();
-      }
-    }
+    this.assignRefToStylingContainer = (ref) => {
+      this.stylingContainer = ref;
+    };
+    this.assignRefToBell = (ref) => {
+      this.bellIconRef = ref;
+    };
   }
   initializeHandler(newValue, oldValue) {
     if (newValue != oldValue) {
       if (this.userId && this.operatorId && this.applicationIdentifier) {
-        this.initializeSession();
+        initializeSession({
+          baseUrl: this.baseUrl,
+          body: this.initializeSessionBody,
+          headers: this.defaultHeaders,
+        }).then((initializeSessionResult) => {
+          this.token = initializeSessionResult.token;
+          this.unseenCount = initializeSessionResult.unseenCounter;
+          this.setupSocket();
+        });
       }
     }
   }
-  clickOutsideHandle() {
+  clickOutsideHandle(ev) {
+    if (ev.composedPath().some((elem) => this.el === elem)) {
+      return;
+    }
     this.popoverVisible = false;
     window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
   }
@@ -79,33 +101,6 @@ export class NutsInboxWidget {
       this.bellIconRef.style.justifyContent = 'flex-end';
     }
   }
-  callSS() {
-    const url = new URL(`${this.ssEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}/initialize`);
-    const headers = new Headers();
-    headers.append('authorization', this.sessionId);
-    headers.append('Content-Type', 'application/json');
-    const body = {
-      deviceId: this.deviceId,
-      language: this.language
-    };
-    const options = {
-      method: 'POST',
-      headers,
-      body: JSON.stringify(body)
-    };
-    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, {
@@ -127,63 +122,21 @@ export class NutsInboxWidget {
       });
       this.socketRef.on('unseen_count_changed', (data) => {
         this.unseenCount = data.unseenCount;
-        this.unseenCount > 0 && window.postMessage({ type: 'nuts-new-notifications', value: this.unseenCount }, window.location.href);
+        this.unseenCount > 0 &&
+          window.postMessage({ type: 'nuts-new-notifications', value: this.unseenCount }, window.location.href);
       });
     }
   }
-  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;
-    window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
-  }
   async connectedCallback() {
     if (this.userId && this.operatorId && this.applicationIdentifier) {
-      this.initializeSession();
-    }
-    if (this.userId && this.operatorId && this.sessionId) {
-      this.callSS();
+      const initializeSessionResult = await initializeSession({
+        baseUrl: this.baseUrl,
+        headers: this.defaultHeaders,
+        body: this.initializeSessionBody,
+      });
+      this.token = initializeSessionResult.token;
+      this.unseenCount = initializeSessionResult.unseenCounter;
+      this.setupSocket();
     }
     if (this.clientStylingUrl) {
       this.setClientStylingURL();
@@ -204,22 +157,22 @@ export class NutsInboxWidget {
     this.positionIcon();
   }
   renderBellIcon() {
-    return (h("div", { onClick: () => this.togglePopover(), class: "BellIcon" },
+    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" },
+        ' '),
+      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" })))) : ''));
+            h("stop", { offset: "1", "stop-color": "#DD2476" }))))) : ('')));
   }
   render() {
-    return (h("div", { ref: el => this.stylingContainer = el, class: "Wrapper" },
-      h("div", { ref: el => this.bellIconRef = el, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()),
-      this.popoverVisible && h("nuts-popover", { "notification-action": this.notificationAction, "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, "translation-url": this.translationUrl })));
+    return (h("div", { ref: this.assignRefToStylingContainer, class: "Wrapper" },
+      h("div", { ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()),
+      this.popoverVisible && (h("nuts-popover", { "notification-action": this.notificationAction, sessionId: this.sessionId, admin: this.admin, "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, "translation-url": this.translationUrl }))));
   }
   static get is() { return "nuts-inbox-widget"; }
   static get encapsulation() { return "shadow"; }
@@ -298,6 +251,23 @@ export class NutsInboxWidget {
       "attribute": "session-id",
       "reflect": true
     },
+    "admin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Indicates if the associated sessionId is an admin or a player sessionId"
+      },
+      "attribute": "admin",
+      "reflect": true
+    },
     "operatorId": {
       "type": "string",
       "mutable": false,
@@ -315,6 +285,23 @@ export class NutsInboxWidget {
       "attribute": "operator-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
+    },
     "deviceId": {
       "type": "string",
       "mutable": false,
@@ -491,10 +478,10 @@ export class NutsInboxWidget {
         "text": ""
       },
       "complexType": {
-        "original": "Notifications[]",
-        "resolved": "Notifications[]",
+        "original": "Notification[]",
+        "resolved": "Notification[]",
         "references": {
-          "Notifications": {
+          "Notification": {
             "location": "import",
             "path": "../../types/nuts-inbox-widget.types"
           }
@@ -516,19 +503,8 @@ export class NutsInboxWidget {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "userId",
-      "methodName": "paramChangeHandler"
-    }, {
-      "propName": "sessionId",
-      "methodName": "paramChangeHandler"
-    }, {
-      "propName": "operatorId",
-      "methodName": "paramChangeHandler"
-    }, {
-      "propName": "deviceId",
-      "methodName": "paramChangeHandler"
-    }, {
       "propName": "userId",
       "methodName": "initializeHandler"
     }, {
@@ -541,10 +517,11 @@ export class NutsInboxWidget {
       "propName": "translationUrl",
       "methodName": "handleNewTranslations"
     }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "clickOutsideHandle",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
 }
-__decorate([
-  ClickOutside(),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", []),
-  __metadata("design:returntype", void 0)
-], NutsInboxWidget.prototype, "clickOutsideHandle", null);

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

@@ -0,0 +1 @@
+export const MAX_NOTIFICATION_TEXT_LENGTH = 150;

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

@@ -18,14 +18,16 @@ p {
   position: relative;
   display: flex;
   line-height: 20px;
-  justify-content: flex-start;
-  align-items: center;
+  justify-content: space-between;
+  align-items: flex-start;
   border-radius: 7px;
   margin: 10px 15px;
   color: var(--emfe-w-color-white, white);
   background: var(--emfe-w-color-gray-400, #23232b);
   font-weight: 400;
   font-size: 14px;
+  gap: 8px;
+  cursor: pointer;
 }
 @keyframes show {
   100% {
@@ -76,6 +78,19 @@ p {
 .NotificationContainer .ContentContainer {
   display: flex;
   flex-direction: column;
+  word-break: break-all;
+}
+.NotificationContainer .RightActionsContainer {
+  display: flex;
+  flex-direction: column;
+}
+.NotificationContainer .FlipX {
+  transform: rotateX(180deg) translate(0, 4px);
+}
+.NotificationContainer .AccordionArrow {
+  margin-left: 4px;
+  transition-duration: 0.2s;
+  transition-property: transform;
 }
 .NotificationContainer .Date {
   min-width: 55px;
@@ -86,12 +101,9 @@ p {
   color: var(--emfe-w-color-gray-200, #525266);
 }
 .NotificationContainer .Settings {
-  opacity: 0;
-  margin-left: auto;
-  cursor: pointer;
-}
-.NotificationContainer:hover .Settings {
   opacity: 0.5;
+  display: inline;
+  cursor: pointer;
 }
 
 .Unseen::before {
@@ -104,8 +116,7 @@ p {
 }
 
 .Unseen:hover .UnseenButton {
-  opacity: 0;
-  width: 0px;
+  display: none;
 }
 
 .SettingsDropdown {
@@ -123,8 +134,8 @@ p {
   width: max-content;
   display: flex;
   flex-direction: column;
-  margin-left: 195px;
-  margin-top: -30px;
+  right: 50px;
+  top: 50px;
 }
 .SettingsDropdown svg {
   margin-right: 10px;
@@ -150,4 +161,8 @@ p {
 .SettingsDropdown button:hover {
   background: var(--emfe-w-color-gray-300, #3d3d4d);
   transition: 300ms;
+}
+
+.Wrapper {
+  position: relative;
 }