@everymatrix/nuts-inbox-widget 1.74.1 → 1.74.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nuts-inbox-widget.cjs.js +1 -1
- package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js +128 -67
- package/dist/collection/api/methods/index.js +3 -5
- package/dist/collection/cache/index.js +1 -0
- package/dist/collection/cache/notification-cache.js +68 -0
- package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.js +3 -1
- package/dist/collection/components/nuts-notification/nuts-notification.js +18 -2
- package/dist/collection/components/nuts-popover/nuts-popover.css +17 -0
- package/dist/collection/components/nuts-popover/nuts-popover.js +51 -67
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nuts-inbox-widget.js +1 -1
- package/dist/esm/nuts-inbox-widget_3.entry.js +128 -67
- package/dist/nuts-inbox-widget/nuts-inbox-widget.esm.js +1 -1
- package/dist/nuts-inbox-widget/nuts-inbox-widget_3.entry.js +1 -1
- package/dist/types/api/methods/index.d.ts +2 -0
- package/dist/types/api/methods/types.d.ts +0 -1
- package/dist/types/cache/index.d.ts +1 -0
- package/dist/types/cache/notification-cache.d.ts +23 -0
- package/dist/types/components/nuts-notification/nuts-notification.d.ts +1 -0
- package/dist/types/components/nuts-popover/nuts-popover.d.ts +5 -6
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/stencil.config.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/stencil.config.dev.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/storybook/main.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/storybook/preview.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/index.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
- /package/dist/types/Users/{adrian.pripon/Documents/Work → StefanO/Desktop/Proj}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32],"limitStylingAppends":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","
|
|
11
|
+
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32],"limitStylingAppends":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32],"limitStylingAppends":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","
|
|
22
|
+
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32],"limitStylingAppends":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -4093,7 +4093,6 @@ Object.assign(lookup, {
|
|
|
4093
4093
|
});
|
|
4094
4094
|
|
|
4095
4095
|
const initializeSession = async ({ baseUrl, body, sessionId }) => {
|
|
4096
|
-
var _a;
|
|
4097
4096
|
const url = new URL(`${baseUrl}/widgets/session/initialize`);
|
|
4098
4097
|
const headers = new Headers();
|
|
4099
4098
|
headers.append('Content-Type', 'application/json');
|
|
@@ -4105,8 +4104,8 @@ const initializeSession = async ({ baseUrl, body, sessionId }) => {
|
|
|
4105
4104
|
};
|
|
4106
4105
|
try {
|
|
4107
4106
|
const res = await fetch(url.href, options);
|
|
4108
|
-
const data = await res.json();
|
|
4109
|
-
const newToken =
|
|
4107
|
+
const { data } = await res.json();
|
|
4108
|
+
const newToken = data === null || data === void 0 ? void 0 : data.token;
|
|
4110
4109
|
headers.append('Widget-Authorization', `Bearer ${newToken}`);
|
|
4111
4110
|
const unseenCounter = await getUnseenCount({
|
|
4112
4111
|
baseUrl,
|
|
@@ -4203,7 +4202,6 @@ const getNotifications = async ({ baseUrl, page, token }) => {
|
|
|
4203
4202
|
const res = await fetch(url.href, options);
|
|
4204
4203
|
const data = await res.json();
|
|
4205
4204
|
return {
|
|
4206
|
-
isLoading: false,
|
|
4207
4205
|
numberOfNotifications: data.totalCount,
|
|
4208
4206
|
notifications: data.data,
|
|
4209
4207
|
hasMore: data.hasMore
|
|
@@ -4212,7 +4210,6 @@ const getNotifications = async ({ baseUrl, page, token }) => {
|
|
|
4212
4210
|
catch (error) {
|
|
4213
4211
|
console.log(error);
|
|
4214
4212
|
return {
|
|
4215
|
-
isLoading: false,
|
|
4216
4213
|
numberOfNotifications: 0,
|
|
4217
4214
|
notifications: [],
|
|
4218
4215
|
hasMore: undefined
|
|
@@ -4256,6 +4253,75 @@ const deleteAll = async ({ baseUrl, token }) => {
|
|
|
4256
4253
|
}
|
|
4257
4254
|
};
|
|
4258
4255
|
|
|
4256
|
+
class NotificationCache {
|
|
4257
|
+
constructor() {
|
|
4258
|
+
this.PAGE_SIZE = 10;
|
|
4259
|
+
this.cache = new Map();
|
|
4260
|
+
this.currentPage = 0;
|
|
4261
|
+
}
|
|
4262
|
+
observePageUpdate(callback) {
|
|
4263
|
+
this.onPageUpdate = callback;
|
|
4264
|
+
}
|
|
4265
|
+
setCurrentPage(page) {
|
|
4266
|
+
this.currentPage = page;
|
|
4267
|
+
this.syncCurrentPage();
|
|
4268
|
+
}
|
|
4269
|
+
updateCache(notifications) {
|
|
4270
|
+
this.cache.clear();
|
|
4271
|
+
const pageCount = Math.ceil(notifications.length / this.PAGE_SIZE);
|
|
4272
|
+
for (let i = 0; i < pageCount; i++) {
|
|
4273
|
+
const pageNotifications = notifications.slice(i * this.PAGE_SIZE, (i + 1) * this.PAGE_SIZE);
|
|
4274
|
+
const hasMore = i < pageCount - 1;
|
|
4275
|
+
this.cache.set(i, { notifications: pageNotifications, hasMore });
|
|
4276
|
+
}
|
|
4277
|
+
this.syncCurrentPage();
|
|
4278
|
+
}
|
|
4279
|
+
syncCurrentPage() {
|
|
4280
|
+
var _a;
|
|
4281
|
+
const entry = this.cache.get(this.currentPage);
|
|
4282
|
+
const notifications = (_a = entry === null || entry === void 0 ? void 0 : entry.notifications) !== null && _a !== void 0 ? _a : [];
|
|
4283
|
+
const hasMore = entry === null || entry === void 0 ? void 0 : entry.hasMore;
|
|
4284
|
+
this.onPageUpdate([...notifications], hasMore);
|
|
4285
|
+
}
|
|
4286
|
+
deleteById(id) {
|
|
4287
|
+
const updatedNotifications = this.getAllFromCache().filter((n) => n.id !== id);
|
|
4288
|
+
this.updateCache(updatedNotifications);
|
|
4289
|
+
}
|
|
4290
|
+
addToFront(notification) {
|
|
4291
|
+
if (!this.cache.get(0)) {
|
|
4292
|
+
return;
|
|
4293
|
+
}
|
|
4294
|
+
const updatedNotifications = [notification, ...this.getAllFromCache()];
|
|
4295
|
+
this.updateCache(updatedNotifications);
|
|
4296
|
+
}
|
|
4297
|
+
markAsRead(id, mark) {
|
|
4298
|
+
const updatedNotifications = this.getAllFromCache().map((n) => (n.id === id ? Object.assign(Object.assign({}, n), mark) : n));
|
|
4299
|
+
this.updateCache(updatedNotifications);
|
|
4300
|
+
}
|
|
4301
|
+
markAllAsRead() {
|
|
4302
|
+
const updatedNotifications = this.getAllFromCache().map((n) => (Object.assign(Object.assign({}, n), { read: true, seen: true })));
|
|
4303
|
+
this.updateCache(updatedNotifications);
|
|
4304
|
+
}
|
|
4305
|
+
clearAll() {
|
|
4306
|
+
this.cache.clear();
|
|
4307
|
+
this.currentPage = 0;
|
|
4308
|
+
this.syncCurrentPage();
|
|
4309
|
+
}
|
|
4310
|
+
async loadPageFromApi(page, loader) {
|
|
4311
|
+
if (this.cache.has(page)) {
|
|
4312
|
+
this.setCurrentPage(page);
|
|
4313
|
+
return;
|
|
4314
|
+
}
|
|
4315
|
+
const data = await loader();
|
|
4316
|
+
this.cache.set(page, { notifications: data.notifications, hasMore: data.hasMore });
|
|
4317
|
+
this.setCurrentPage(page);
|
|
4318
|
+
}
|
|
4319
|
+
getAllFromCache() {
|
|
4320
|
+
return Array.from(this.cache.values()).flatMap((entry) => entry.notifications);
|
|
4321
|
+
}
|
|
4322
|
+
}
|
|
4323
|
+
const notificationCache = new NotificationCache();
|
|
4324
|
+
|
|
4259
4325
|
const nutsInboxWidgetCss = ":host{display:block;font-family:\"Roboto\", \"Arial\", sans-serif}.BellIconWrapper{width:100%;height:40px;display:flex}.BellIconWrapper :hover{cursor:pointer}.BellIcon{width:40px;height:40px;display:flex;justify-content:center;align-items:center}";
|
|
4260
4326
|
const NutsInboxWidgetStyle0 = nutsInboxWidgetCss;
|
|
4261
4327
|
|
|
@@ -4383,6 +4449,7 @@ const NutsInboxWidget = class {
|
|
|
4383
4449
|
});
|
|
4384
4450
|
this.socketRef.on('notification_received', (data) => {
|
|
4385
4451
|
this.newNotification.emit(data.message);
|
|
4452
|
+
notificationCache.addToFront(data.message);
|
|
4386
4453
|
});
|
|
4387
4454
|
this.socketRef.on('unseen_count_changed', (data) => {
|
|
4388
4455
|
this.unseenCount = data.unseenCount;
|
|
@@ -4441,7 +4508,7 @@ const NutsInboxWidget = class {
|
|
|
4441
4508
|
return (index.h("div", { onClick: this.togglePopover, class: "BellIcon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", class: "bi bi-bell", viewBox: "0 0 16 16" }, ' ', index.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 ? (index.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" }, index.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" }), index.h("defs", null, index.h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" }, index.h("stop", { "stop-color": "#FF512F" }), index.h("stop", { offset: "1", "stop-color": "#DD2476" }))))) : ('')));
|
|
4442
4509
|
}
|
|
4443
4510
|
render() {
|
|
4444
|
-
return (index.h("div", { key: '
|
|
4511
|
+
return (index.h("div", { key: '15e43d27da4718c321f1d498b79b8491b8e298f5', ref: this.assignRefToStylingContainer, class: "Wrapper" }, index.h("div", { key: '29f955f1cab9088c6c52f55637ae64f4138c1a7c', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.token && this.popoverVisible && (index.h("nuts-popover", { key: '6859355573c32c22d69156d8ca04045bee6bc020', "notification-action": this.notificationAction, sessionId: this.sessionId, "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, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
|
|
4445
4512
|
}
|
|
4446
4513
|
get el() { return index.getElement(this); }
|
|
4447
4514
|
static get watchers() { return {
|
|
@@ -42182,6 +42249,10 @@ const DownOutlined$1 = DownOutlined;
|
|
|
42182
42249
|
var InfoCircleFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" } }] }, "name": "info-circle", "theme": "filled" };
|
|
42183
42250
|
const InfoCircleFilled$1 = InfoCircleFilled;
|
|
42184
42251
|
|
|
42252
|
+
// This icon file is generated automatically.
|
|
42253
|
+
var LoadingOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" } }] }, "name": "loading", "theme": "outlined" };
|
|
42254
|
+
const LoadingOutlined$1 = LoadingOutlined;
|
|
42255
|
+
|
|
42185
42256
|
// This icon file is generated automatically.
|
|
42186
42257
|
var QuestionCircleFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z" } }] }, "name": "question-circle", "theme": "filled" };
|
|
42187
42258
|
const QuestionCircleFilled$1 = QuestionCircleFilled;
|
|
@@ -42296,6 +42367,7 @@ const NutsNotification = class {
|
|
|
42296
42367
|
index.registerInstance(this, hostRef);
|
|
42297
42368
|
this.messageDeteled = index.createEvent(this, "messageDeleted", 7);
|
|
42298
42369
|
this.settingsOpened = index.createEvent(this, "settingsOpened", 7);
|
|
42370
|
+
this.messageReadEmitter = index.createEvent(this, "messageRead", 7);
|
|
42299
42371
|
this.toggleSettingsModal = (e) => {
|
|
42300
42372
|
e.stopImmediatePropagation();
|
|
42301
42373
|
this.showSettingsModal = !this.showSettingsModal;
|
|
@@ -42317,6 +42389,7 @@ const NutsNotification = class {
|
|
|
42317
42389
|
token: this.token,
|
|
42318
42390
|
unread
|
|
42319
42391
|
});
|
|
42392
|
+
this.messageReadEmitter.emit(markAsReadBody);
|
|
42320
42393
|
this.messageRead = notificationData.messageRead;
|
|
42321
42394
|
this.messageSeen = notificationData.messageSeen;
|
|
42322
42395
|
this.showSettingsModal = notificationData.showSettingsModal;
|
|
@@ -42460,10 +42533,10 @@ const NutsNotification = class {
|
|
|
42460
42533
|
ADD_ATTR: ['target'],
|
|
42461
42534
|
ALLOWED_TAGS: ['b', 'u', 'i', 'br']
|
|
42462
42535
|
});
|
|
42463
|
-
return (index.h("div", { key: '
|
|
42536
|
+
return (index.h("div", { key: '279afad3d2acc4ee86cc381bd1d59e0625fdb055', class: "Wrapper" }, index.h("div", { key: '0352b9daa3da0cfb46b93c45956d52d6668fd0ca', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (index.h("div", { class: "AvatarContainer" }, index.h("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (index.h("div", { innerHTML: systemIcons[this.badge].icon })) : (index.h("img", { class: "AvatarImage", src: this.badge }))))) : (''), index.h("div", { key: '583209e9dbd0358dece085b567717ddb7815b290', class: "ContentContainer" }, index.h("div", { key: '129e6b29b5161d27771a5fc8d5680ed919c34bd0', innerHTML: sanitizedNotificationBody }), index.h("p", { key: 'ba1cd34a379a348be281977db374794080e8e3ec', class: "Date" }, formatDistanceToNow(new Date(this.date), {
|
|
42464
42537
|
addSuffix: true,
|
|
42465
42538
|
locale: dateFnsLocale(this.language)
|
|
42466
|
-
}))), index.h("div", { key: '
|
|
42539
|
+
}))), index.h("div", { key: '61ae939165abefe752e71907f45c285dcf2a5f6b', class: "RightActionsContainer" }, index.h("div", { key: '29307a2f36682630d9b1dbba05d79cb88ad18902', class: "Settings", onClick: this.toggleSettingsModal }, index.h("svg", { key: '24af08900c8e75d671bbea1fc0c20f2b168fbd22', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '22f67fc5fcde87dc8bd582199eecb0bc41892dee', 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 && (index.h("div", { key: '0a4f7bd20de25d3819439bb33e46bd57e9378d4b', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow })))), this.showSettingsModal ? (index.h("div", { class: "SettingsDropdown" }, index.h("button", { onClick: this.toggleNotificationRead }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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$1(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), index.h("button", { onClick: this.deleteNotification }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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$1('removeMessage', this.language)))) : ('')));
|
|
42467
42540
|
}
|
|
42468
42541
|
get el() { return index.getElement(this); }
|
|
42469
42542
|
static get watchers() { return {
|
|
@@ -42474,7 +42547,7 @@ const NutsNotification = class {
|
|
|
42474
42547
|
};
|
|
42475
42548
|
NutsNotification.style = NutsNotificationStyle0;
|
|
42476
42549
|
|
|
42477
|
-
const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emw--color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emw--color-gray-300, rgb(30, 30, 38));margin:0px;font-family:inherit;color:var(--emw--color-gray-200, rgb(51, 55, 55));direction:ltr;width:420px;z-index:999;position:absolute;right:0}.Popover .Header{display:flex;padding:0 20px 10px 20px;align-items:center;box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emw--color-white, rgb(255, 255, 255));font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px;display:flex;align-items:center;gap:5px}.Popover .Header .Title .UnseenCounter{margin-right:5px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px);letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%);font-family:inherit;line-height:14px;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .Header .ActionButtons{margin-left:auto;display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll,.Popover .Header .ClosePopover{font-style:normal;border:none;background:transparent;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .DeleteAll svg,.Popover .Header .ClosePopover svg{width:25px;height:25px}.Popover .Header .DeleteAll:hover,.Popover .Header .ClosePopover:hover{opacity:0.7;transition:250ms}.Popover .Header .ClosePopover div{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll svg{width:30px;height:30px}.Popover .Header .DeleteAll.Active{opacity:1}.Popover .Header .DeleteAll:disabled{opacity:0.5;cursor:not-allowed}.Popover .DeleteAllDropdown{z-index:999;position:absolute;background:var(--emw--color-gray-400, rgb(41, 41, 51));box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;right:100px;top:50px}.Popover .DeleteAllDropdown svg{margin-right:10px}.Popover .DeleteAllDropdown 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:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.Popover .DeleteAllDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.Popover .NotificationList{height:400px;overflow:auto;box-shadow:0px 20px 10px -20px rgba(0, 0, 0, 0.45) inset, 0px -20px 10px -20px rgba(0, 0, 0, 0.45) inset}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emw--color-white, #fff);opacity:0.7}.Popover .Pagination{display:flex;justify-content:space-around;margin-top:13px}.Popover .Pagination .Button{width:43%}.Popover .Pagination .Button 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:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px;justify-content:center}.Popover .Pagination .Button button svg{width:15px;height:15px;fill:white}.Popover .Pagination .Button button:disabled{cursor:default;opacity:0.5}.Popover .Pagination .Button button:hover:enabled{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}";
|
|
42550
|
+
const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emw--color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emw--color-gray-300, rgb(30, 30, 38));margin:0px;font-family:inherit;color:var(--emw--color-gray-200, rgb(51, 55, 55));direction:ltr;width:420px;z-index:999;position:absolute;right:0}.Popover .Header{display:flex;padding:0 20px 10px 20px;align-items:center;box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emw--color-white, rgb(255, 255, 255));font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px;display:flex;align-items:center;gap:5px}.Popover .Header .Title .UnseenCounter{margin-right:5px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px);letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%);font-family:inherit;line-height:14px;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .Header .ActionButtons{margin-left:auto;display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll,.Popover .Header .ClosePopover{font-style:normal;border:none;background:transparent;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .DeleteAll svg,.Popover .Header .ClosePopover svg{width:25px;height:25px}.Popover .Header .DeleteAll:hover,.Popover .Header .ClosePopover:hover{opacity:0.7;transition:250ms}.Popover .Header .ClosePopover div{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll svg{width:30px;height:30px}.Popover .Header .DeleteAll.Active{opacity:1}.Popover .Header .DeleteAll:disabled{opacity:0.5;cursor:not-allowed}.Popover .DeleteAllDropdown{z-index:999;position:absolute;background:var(--emw--color-gray-400, rgb(41, 41, 51));box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;right:100px;top:50px}.Popover .DeleteAllDropdown svg{margin-right:10px}.Popover .DeleteAllDropdown 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:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.Popover .DeleteAllDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.Popover .NotificationList{height:400px;overflow:auto;box-shadow:0px 20px 10px -20px rgba(0, 0, 0, 0.45) inset, 0px -20px 10px -20px rgba(0, 0, 0, 0.45) inset}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emw--color-white, #fff);opacity:0.7}.Popover .Loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.Popover .Loading svg{animation:spin 1s linear infinite;transform-origin:center}.Popover .Pagination{display:flex;justify-content:space-around;margin-top:13px}.Popover .Pagination .Button{width:43%}.Popover .Pagination .Button 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:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px;justify-content:center}.Popover .Pagination .Button button svg{width:15px;height:15px;fill:white}.Popover .Pagination .Button button:disabled{cursor:default;opacity:0.5}.Popover .Pagination .Button button:hover:enabled{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}@keyframes spin{100%{transform:rotate(360deg)}}";
|
|
42478
42551
|
const NutsPopoverStyle0 = nutsPopoverCss;
|
|
42479
42552
|
|
|
42480
42553
|
const NutsPopover = class {
|
|
@@ -42484,33 +42557,15 @@ const NutsPopover = class {
|
|
|
42484
42557
|
this.allMessagesDeteled = index.createEvent(this, "allMessagesDeleted", 7);
|
|
42485
42558
|
this.closePopoverEmmiter = index.createEvent(this, "closePopover", 7);
|
|
42486
42559
|
this.currentPage = 0;
|
|
42487
|
-
this.updateNotificationsDataAfterPageChange = (getNotificationsData) => {
|
|
42488
|
-
this.notifications = getNotificationsData.notifications;
|
|
42489
|
-
this.hasMore = getNotificationsData.hasMore;
|
|
42490
|
-
this.isLoading = getNotificationsData.isLoading;
|
|
42491
|
-
};
|
|
42492
42560
|
this.nextPage = async () => {
|
|
42493
|
-
if (!this.hasMore) {
|
|
42494
|
-
return;
|
|
42495
|
-
}
|
|
42496
42561
|
this.currentPage++;
|
|
42497
|
-
|
|
42498
|
-
baseUrl: this.baseUrl,
|
|
42499
|
-
token: this.token,
|
|
42500
|
-
page: this.currentPage
|
|
42501
|
-
}).then((data) => {
|
|
42502
|
-
return this.updateNotificationsDataAfterPageChange(data);
|
|
42503
|
-
});
|
|
42562
|
+
this.triggerGetNotifications();
|
|
42504
42563
|
};
|
|
42505
|
-
this.prevPage = () => {
|
|
42564
|
+
this.prevPage = async () => {
|
|
42506
42565
|
if (this.currentPage > 0) {
|
|
42507
42566
|
this.currentPage--;
|
|
42567
|
+
this.triggerGetNotifications();
|
|
42508
42568
|
}
|
|
42509
|
-
getNotifications({
|
|
42510
|
-
baseUrl: this.baseUrl,
|
|
42511
|
-
token: this.token,
|
|
42512
|
-
page: this.currentPage
|
|
42513
|
-
}).then((data) => this.updateNotificationsDataAfterPageChange(data));
|
|
42514
42569
|
};
|
|
42515
42570
|
this.setClientStyling = () => {
|
|
42516
42571
|
let sheet = document.createElement('style');
|
|
@@ -42540,6 +42595,7 @@ const NutsPopover = class {
|
|
|
42540
42595
|
if (markedAllNotificationsAsRead) {
|
|
42541
42596
|
this.allNotificationsRead.emit();
|
|
42542
42597
|
this.unseenCount = 0;
|
|
42598
|
+
notificationCache.markAllAsRead();
|
|
42543
42599
|
}
|
|
42544
42600
|
};
|
|
42545
42601
|
this.deleteAllNotifications = async () => {
|
|
@@ -42550,6 +42606,8 @@ const NutsPopover = class {
|
|
|
42550
42606
|
if (allNotificationsDeleted) {
|
|
42551
42607
|
this.allMessagesDeteled.emit();
|
|
42552
42608
|
this.unseenCount = 0;
|
|
42609
|
+
this.currentPage = 0;
|
|
42610
|
+
notificationCache.clearAll();
|
|
42553
42611
|
this.showDeleteAllPopup = false;
|
|
42554
42612
|
}
|
|
42555
42613
|
};
|
|
@@ -42578,36 +42636,19 @@ const NutsPopover = class {
|
|
|
42578
42636
|
this.clientStyling = '';
|
|
42579
42637
|
this.translationUrl = '';
|
|
42580
42638
|
this.notifications = undefined;
|
|
42581
|
-
this.isLoading =
|
|
42639
|
+
this.isLoading = false;
|
|
42640
|
+
this.isNotificationsLoading = true;
|
|
42582
42641
|
this.showMarkAll = false;
|
|
42583
42642
|
this.limitStylingAppends = false;
|
|
42584
42643
|
this.showDeleteAllPopup = false;
|
|
42585
42644
|
this.hasMore = true;
|
|
42586
42645
|
}
|
|
42587
|
-
|
|
42588
|
-
|
|
42589
|
-
|
|
42590
|
-
|
|
42591
|
-
|
|
42592
|
-
|
|
42593
|
-
token: this.token,
|
|
42594
|
-
page: this.currentPage
|
|
42595
|
-
}).then((data) => this.updateNotificationsDataAfterPageChange(data));
|
|
42596
|
-
}
|
|
42597
|
-
allMessagesDeletedHandler() {
|
|
42598
|
-
this.notifications = [];
|
|
42599
|
-
getNotifications({
|
|
42600
|
-
baseUrl: this.baseUrl,
|
|
42601
|
-
token: this.token,
|
|
42602
|
-
page: this.currentPage
|
|
42603
|
-
}).then((data) => this.updateNotificationsDataAfterPageChange(data));
|
|
42604
|
-
}
|
|
42605
|
-
newNotificationHandler(event) {
|
|
42606
|
-
if (Array.isArray(this.notifications)) {
|
|
42607
|
-
this.notifications = [event.detail, ...this.notifications];
|
|
42608
|
-
return;
|
|
42609
|
-
}
|
|
42610
|
-
this.notifications = [event.detail];
|
|
42646
|
+
messageDeletedHandler(event) {
|
|
42647
|
+
notificationCache.deleteById(event.detail);
|
|
42648
|
+
}
|
|
42649
|
+
messageReadHandler(event) {
|
|
42650
|
+
const { messageId, mark } = event.detail;
|
|
42651
|
+
notificationCache.markAsRead(messageId, mark);
|
|
42611
42652
|
}
|
|
42612
42653
|
clickOutsideHandle(ev) {
|
|
42613
42654
|
var _a;
|
|
@@ -42654,26 +42695,46 @@ const NutsPopover = class {
|
|
|
42654
42695
|
}
|
|
42655
42696
|
// end custom styling area
|
|
42656
42697
|
}
|
|
42698
|
+
async triggerGetNotifications() {
|
|
42699
|
+
this.isNotificationsLoading = true;
|
|
42700
|
+
try {
|
|
42701
|
+
await notificationCache.loadPageFromApi(this.currentPage, async () => getNotifications({
|
|
42702
|
+
baseUrl: this.baseUrl,
|
|
42703
|
+
token: this.token,
|
|
42704
|
+
page: this.currentPage
|
|
42705
|
+
}));
|
|
42706
|
+
}
|
|
42707
|
+
finally {
|
|
42708
|
+
this.isNotificationsLoading = false;
|
|
42709
|
+
}
|
|
42710
|
+
}
|
|
42657
42711
|
connectedCallback() {
|
|
42658
42712
|
this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
|
|
42659
|
-
|
|
42660
|
-
|
|
42661
|
-
|
|
42662
|
-
|
|
42663
|
-
|
|
42713
|
+
notificationCache.observePageUpdate((notifications, hasMore) => {
|
|
42714
|
+
if ((notifications === null || notifications === void 0 ? void 0 : notifications.length) === 0 && this.currentPage > 0) {
|
|
42715
|
+
// if it's last notification on it's page go back a page and retrigger
|
|
42716
|
+
this.currentPage--;
|
|
42717
|
+
this.triggerGetNotifications();
|
|
42718
|
+
return;
|
|
42719
|
+
}
|
|
42720
|
+
this.notifications = notifications;
|
|
42721
|
+
this.hasMore = hasMore;
|
|
42722
|
+
});
|
|
42723
|
+
this.triggerGetNotifications();
|
|
42664
42724
|
if (this.unseenCount != 0) {
|
|
42665
42725
|
this.showMarkAll = true;
|
|
42666
42726
|
}
|
|
42667
42727
|
}
|
|
42668
42728
|
render() {
|
|
42669
|
-
var _a, _b
|
|
42670
|
-
return (index.h("div", { key: '
|
|
42729
|
+
var _a, _b;
|
|
42730
|
+
return (index.h("div", { key: 'f1e94beefef26d3934955020552014a30b0544ed', class: "Popover", ref: this.assignRefToStylingContainer }, index.h("div", { key: '7cf55accedb0b20be815f8755ae8b9f316ce2416', class: "Header" }, index.h("div", { key: '11092950fc491f1b6e8ee60ae23703f9981ec2fa', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? index.h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (index.h("div", { key: '8d041cdbc51818c8a5119569dd919c6ab5daa0c0', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), index.h("div", { key: 'b8865c62341b0fc4db24741cb46bd0edc308a935', class: "ActionButtons" }, index.h("button", { key: 'a074740e1641941d35b9facf1796371da126530f', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) }, index.h("svg", { key: 'a543450f4ff6261d140a26ca5a97b988389ff982', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '0eed6954821bea3d392b21446894fd5651fb1674', 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" }))), index.h("button", { key: 'f79e2a36a88b8b29c542ecb631d401258fbc606b', class: "ClosePopover", onClick: this.closePopover }, index.h("div", { key: '06ca6ddd2d1c402f05cdb74986c85c50780ee829', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined$1, {
|
|
42671
42731
|
extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
|
|
42672
|
-
}) }))), this.showDeleteAllPopup && (index.h("div", { key: '
|
|
42673
|
-
|
|
42674
|
-
|
|
42675
|
-
|
|
42676
|
-
|
|
42732
|
+
}) }))), this.showDeleteAllPopup && (index.h("div", { key: '0185c7fba8fbd79ebba6247e01a7ce85652b755f', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, index.h("button", { key: 'f183425b99dcb14758eea42e165ec628fb97a421', onClick: this.deleteAllNotifications }, translate$1('deleteAllMessages', this.language))))), !this.isLoading && (index.h("div", { key: 'ff6474f5107c9cd28cf61eaf8db3fe06cfe51fae', class: "NotificationList" }, this.isNotificationsLoading ? (index.h("div", { class: "Loading", innerHTML: renderIconDefinitionToSVGElement(LoadingOutlined$1, {
|
|
42733
|
+
extraSVGAttrs: { width: '30px', height: '30px', fill: '#A1A1B2' }
|
|
42734
|
+
}) })) : ((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (this.notifications.map((item) => {
|
|
42735
|
+
var _a;
|
|
42736
|
+
return (index.h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl }));
|
|
42737
|
+
})) : (index.h("div", { class: "NoMessages" }, index.h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, index.h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), index.h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), index.h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), index.h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), index.h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", null, translate$1('noMessages', this.language)))))), !this.isLoading && (index.h("div", { key: '2f6963fcdbde521150bcdf1a74df14c1c83c0590', class: "Pagination" }, index.h("div", { key: '50b7efd6616498cb39545f34748fe8ccfd044928', class: "Button" }, index.h("button", { key: '936b5f460c7d68a3388b3b1c463001302156c4f0', disabled: this.isNotificationsLoading || this.currentPage <= 0, onClick: this.prevPage }, index.h("svg", { key: '66c1f5220c386baa75dc639765cc8ff2be56cf13', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: '59cf1db0cedb6380700afae53a79cdd55bc4aca4', d: "M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z" })), translate$1('prev', this.language))), index.h("div", { key: 'b3deb3012ec1ce92a96b4cc1f4ae13b495d5792d', class: "Button" }, index.h("button", { key: '063fc0d76d6ca06eccc0129e8edcfa40e7cc8f4c', disabled: this.isNotificationsLoading || !this.hasMore, onClick: this.nextPage }, translate$1('next', this.language), index.h("svg", { key: '1a36392bd201328cd17fe6fa235450f54ac134bc', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: 'a66894d1ab1713d32c604a00251d2100da32c063', d: "M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z" }))))))));
|
|
42677
42738
|
}
|
|
42678
42739
|
static get watchers() { return {
|
|
42679
42740
|
"unseenCount": ["unseenCountHandler"],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
export const notificationCache = new Map();
|
|
1
2
|
export const initializeSession = async ({ baseUrl, body, sessionId }) => {
|
|
2
|
-
var _a;
|
|
3
3
|
const url = new URL(`${baseUrl}/widgets/session/initialize`);
|
|
4
4
|
const headers = new Headers();
|
|
5
5
|
headers.append('Content-Type', 'application/json');
|
|
@@ -11,8 +11,8 @@ export const initializeSession = async ({ baseUrl, body, sessionId }) => {
|
|
|
11
11
|
};
|
|
12
12
|
try {
|
|
13
13
|
const res = await fetch(url.href, options);
|
|
14
|
-
const data = await res.json();
|
|
15
|
-
const newToken =
|
|
14
|
+
const { data } = await res.json();
|
|
15
|
+
const newToken = data === null || data === void 0 ? void 0 : data.token;
|
|
16
16
|
headers.append('Widget-Authorization', `Bearer ${newToken}`);
|
|
17
17
|
const unseenCounter = await getUnseenCount({
|
|
18
18
|
baseUrl,
|
|
@@ -109,7 +109,6 @@ export const getNotifications = async ({ baseUrl, page, token }) => {
|
|
|
109
109
|
const res = await fetch(url.href, options);
|
|
110
110
|
const data = await res.json();
|
|
111
111
|
return {
|
|
112
|
-
isLoading: false,
|
|
113
112
|
numberOfNotifications: data.totalCount,
|
|
114
113
|
notifications: data.data,
|
|
115
114
|
hasMore: data.hasMore
|
|
@@ -118,7 +117,6 @@ export const getNotifications = async ({ baseUrl, page, token }) => {
|
|
|
118
117
|
catch (error) {
|
|
119
118
|
console.log(error);
|
|
120
119
|
return {
|
|
121
|
-
isLoading: false,
|
|
122
120
|
numberOfNotifications: 0,
|
|
123
121
|
notifications: [],
|
|
124
122
|
hasMore: undefined
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './notification-cache';
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
class NotificationCache {
|
|
2
|
+
constructor() {
|
|
3
|
+
this.PAGE_SIZE = 10;
|
|
4
|
+
this.cache = new Map();
|
|
5
|
+
this.currentPage = 0;
|
|
6
|
+
}
|
|
7
|
+
observePageUpdate(callback) {
|
|
8
|
+
this.onPageUpdate = callback;
|
|
9
|
+
}
|
|
10
|
+
setCurrentPage(page) {
|
|
11
|
+
this.currentPage = page;
|
|
12
|
+
this.syncCurrentPage();
|
|
13
|
+
}
|
|
14
|
+
updateCache(notifications) {
|
|
15
|
+
this.cache.clear();
|
|
16
|
+
const pageCount = Math.ceil(notifications.length / this.PAGE_SIZE);
|
|
17
|
+
for (let i = 0; i < pageCount; i++) {
|
|
18
|
+
const pageNotifications = notifications.slice(i * this.PAGE_SIZE, (i + 1) * this.PAGE_SIZE);
|
|
19
|
+
const hasMore = i < pageCount - 1;
|
|
20
|
+
this.cache.set(i, { notifications: pageNotifications, hasMore });
|
|
21
|
+
}
|
|
22
|
+
this.syncCurrentPage();
|
|
23
|
+
}
|
|
24
|
+
syncCurrentPage() {
|
|
25
|
+
var _a;
|
|
26
|
+
const entry = this.cache.get(this.currentPage);
|
|
27
|
+
const notifications = (_a = entry === null || entry === void 0 ? void 0 : entry.notifications) !== null && _a !== void 0 ? _a : [];
|
|
28
|
+
const hasMore = entry === null || entry === void 0 ? void 0 : entry.hasMore;
|
|
29
|
+
this.onPageUpdate([...notifications], hasMore);
|
|
30
|
+
}
|
|
31
|
+
deleteById(id) {
|
|
32
|
+
const updatedNotifications = this.getAllFromCache().filter((n) => n.id !== id);
|
|
33
|
+
this.updateCache(updatedNotifications);
|
|
34
|
+
}
|
|
35
|
+
addToFront(notification) {
|
|
36
|
+
if (!this.cache.get(0)) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
const updatedNotifications = [notification, ...this.getAllFromCache()];
|
|
40
|
+
this.updateCache(updatedNotifications);
|
|
41
|
+
}
|
|
42
|
+
markAsRead(id, mark) {
|
|
43
|
+
const updatedNotifications = this.getAllFromCache().map((n) => (n.id === id ? Object.assign(Object.assign({}, n), mark) : n));
|
|
44
|
+
this.updateCache(updatedNotifications);
|
|
45
|
+
}
|
|
46
|
+
markAllAsRead() {
|
|
47
|
+
const updatedNotifications = this.getAllFromCache().map((n) => (Object.assign(Object.assign({}, n), { read: true, seen: true })));
|
|
48
|
+
this.updateCache(updatedNotifications);
|
|
49
|
+
}
|
|
50
|
+
clearAll() {
|
|
51
|
+
this.cache.clear();
|
|
52
|
+
this.currentPage = 0;
|
|
53
|
+
this.syncCurrentPage();
|
|
54
|
+
}
|
|
55
|
+
async loadPageFromApi(page, loader) {
|
|
56
|
+
if (this.cache.has(page)) {
|
|
57
|
+
this.setCurrentPage(page);
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const data = await loader();
|
|
61
|
+
this.cache.set(page, { notifications: data.notifications, hasMore: data.hasMore });
|
|
62
|
+
this.setCurrentPage(page);
|
|
63
|
+
}
|
|
64
|
+
getAllFromCache() {
|
|
65
|
+
return Array.from(this.cache.values()).flatMap((entry) => entry.notifications);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
export const notificationCache = new NotificationCache();
|
|
@@ -2,6 +2,7 @@ import { getTranslations } from "../../utils/locale.utils";
|
|
|
2
2
|
import { h } from "@stencil/core";
|
|
3
3
|
import { io } from "socket.io-client";
|
|
4
4
|
import { initializeSession } from "../../api/methods";
|
|
5
|
+
import { notificationCache } from "../../cache";
|
|
5
6
|
export class NutsInboxWidget {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.token = null;
|
|
@@ -123,6 +124,7 @@ export class NutsInboxWidget {
|
|
|
123
124
|
});
|
|
124
125
|
this.socketRef.on('notification_received', (data) => {
|
|
125
126
|
this.newNotification.emit(data.message);
|
|
127
|
+
notificationCache.addToFront(data.message);
|
|
126
128
|
});
|
|
127
129
|
this.socketRef.on('unseen_count_changed', (data) => {
|
|
128
130
|
this.unseenCount = data.unseenCount;
|
|
@@ -181,7 +183,7 @@ export class NutsInboxWidget {
|
|
|
181
183
|
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" }))))) : ('')));
|
|
182
184
|
}
|
|
183
185
|
render() {
|
|
184
|
-
return (h("div", { key: '
|
|
186
|
+
return (h("div", { key: '15e43d27da4718c321f1d498b79b8491b8e298f5', ref: this.assignRefToStylingContainer, class: "Wrapper" }, h("div", { key: '29f955f1cab9088c6c52f55637ae64f4138c1a7c', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.token && this.popoverVisible && (h("nuts-popover", { key: '6859355573c32c22d69156d8ca04045bee6bc020', "notification-action": this.notificationAction, sessionId: this.sessionId, "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, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
|
|
185
187
|
}
|
|
186
188
|
static get is() { return "nuts-inbox-widget"; }
|
|
187
189
|
static get encapsulation() { return "shadow"; }
|