@notificationapi/react 0.0.33 → 0.0.35

package/dist/components/Provider/index.js

@@ -1,24 +1,24 @@
-import { jsx as B } from "react/jsx-runtime";
-import { createContext as z, useState as N, useCallback as m, useMemo as F, useRef as k, useEffect as U, useContext as G } from "react";
-const J = async (e, s, i, a, f, w, h) => {
-  const p = _(a, f, w), l = await fetch(
-    `https://${s}/${a}/users/${encodeURIComponent(
+import { jsx as z } from "react/jsx-runtime";
+import { createContext as Q, useState as I, useCallback as m, useMemo as X, useRef as T, useEffect as P, useContext as Y } from "react";
+const Z = async (e, r, o, a, f, b, h) => {
+  const l = ee(a, f, b), g = await fetch(
+    `https://${r}/${a}/users/${encodeURIComponent(
       f
-    )}/${i}`,
+    )}/${o}`,
     {
       method: e,
       body: JSON.stringify(h),
       headers: {
-        Authorization: `Basic ${p}`
+        Authorization: `Basic ${l}`
       }
     }
   );
   try {
-    return await l.json();
+    return await g.json();
   } catch {
     return;
   }
-}, _ = (e, s, i) => btoa(i ? e + ":" + s + ":" + i : e + ":" + s), M = {
+}, ee = (e, r, o) => btoa(o ? e + ":" + r + ":" + o : e + ":" + r), H = {
   host: "api.notificationapi.com",
   websocketHost: "ws.notificationapi.com",
   userId: "",
@@ -31,76 +31,79 @@ const J = async (e, s, i, a, f, w, h) => {
   onNewInAppNotifications: void 0,
   keepWebSocketAliveForSeconds: 86400
   // 24 hours
-}, n = {
-  config: M,
+}, i = {
+  config: H,
   init: function(e) {
-    return this.config = { ...M, ...e }, {
+    return this.config = { ...H, ...e }, {
       ...this
     };
   },
   rest: {
-    generic: function(e, s, i) {
-      return J(
+    generic: function(e, r, o) {
+      return Z(
         e,
-        n.config.host,
-        s,
-        n.config.clientId,
-        n.config.userId,
-        n.config.hashedUserId,
-        i
+        i.config.host,
+        r,
+        i.config.clientId,
+        i.config.userId,
+        i.config.hashedUserId,
+        o
       );
     },
     // The functions below are nice wrappers over the generic
     // rest  api function above. They must follow REST API naming:
     // Method + Resource, representing the end-point.
-    getNotifications: function(e, s) {
-      return n.rest.generic(
+    getNotifications: function(e, r) {
+      return i.rest.generic(
         "GET",
-        `notifications/INAPP_WEB?count=${s}&before=${e}`
+        `notifications/INAPP_WEB?count=${r}&before=${e}`
       );
     },
     patchNotifications: function(e) {
-      return n.rest.generic(
+      return i.rest.generic(
         "PATCH",
         "notifications/INAPP_WEB",
         e
       );
     },
     getPreferences: function() {
-      return n.rest.generic("GET", "preferences");
+      return i.rest.generic("GET", "preferences");
     },
     postPreferences: function(e) {
-      return n.rest.generic(
+      return i.rest.generic(
         "POST",
         "preferences",
         e
       );
     },
     postUser: function(e) {
-      return n.rest.generic("POST", "", e);
+      return i.rest.generic("POST", "", e);
+    },
+    getUserAccountMetadata: function() {
+      return i.rest.generic("GET", "account_metadata");
     }
   },
   websocket: {
     object: void 0,
     connect: function() {
-      let e = `wss://${n.config.websocketHost}?userId=${encodeURIComponent(n.config.userId)}&envId=${n.config.clientId}`;
-      return n.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(n.config.hashedUserId)}`), n.websocket.object = new WebSocket(e), n.websocket.object.onmessage = (s) => {
-        const i = JSON.parse(s.data);
-        if (!(!i || !i.route) && i.route === "inapp_web/new_notifications") {
-          const a = i;
-          n.config.onNewInAppNotifications && n.config.onNewInAppNotifications(
+      let e = `wss://${i.config.websocketHost}?userId=${encodeURIComponent(i.config.userId)}&envId=${i.config.clientId}`;
+      return i.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(i.config.hashedUserId)}`), i.websocket.object = new WebSocket(e), i.websocket.object.onmessage = (r) => {
+        const o = JSON.parse(r.data);
+        if (!(!o || !o.route) && o.route === "inapp_web/new_notifications") {
+          const a = o;
+          i.config.onNewInAppNotifications && i.config.onNewInAppNotifications(
             a.payload.notifications
           );
         }
-      }, n.websocket.object;
+      }, i.websocket.object;
     },
     disconnect: function(e) {
-      var s;
-      n.websocket.object && ((s = n.websocket.object) == null || s.close(), e && e(n.websocket.object));
+      var r;
+      i.websocket.object && ((r = i.websocket.object) == null || r.close(), e && e(i.websocket.object));
     }
   },
   openWebSocket: function() {
-    return n.websocket.connect(() => {
+    return i.websocket.connect(() => {
       setTimeout(
         () => {
           this.websocket.disconnect(() => {
@@ -115,198 +118,253 @@ const J = async (e, s, i, a, f, w, h) => {
   // They may or may not do additional tasks.
   // e.g. identify simply maps to postUsers
   getInAppNotifications: async (e) => {
-    const s = e.maxCountNeeded || n.config.getInAppDefaultCount, i = e.oldestNeeded || n.config.getInAppDefaultOldest;
-    let a = [], f = e.before, w = !0, h = !0;
+    const r = e.maxCountNeeded || i.config.getInAppDefaultCount, o = e.oldestNeeded || i.config.getInAppDefaultOldest;
+    let a = [], f = e.before, b = !0, h = !0;
     for (; h; ) {
-      const p = (await n.rest.getNotifications(
+      const l = (await i.rest.getNotifications(
         f,
-        s
+        r
       )).notifications.filter(
-        (l) => !a.find((g) => g.id === l.id)
+        (g) => !a.find((w) => w.id === g.id)
       );
-      f = p.reduce(
-        (l, g) => l < g.date ? l : g.date,
+      f = l.reduce(
+        (g, w) => g < w.date ? g : w.date,
         e.before
-      ), a = [...a, ...p], w = p.length > 0, h = !0, (!w || a.length >= s || f < i) && (h = !1);
+      ), a = [...a, ...l], b = l.length > 0, h = !0, (!b || a.length >= r || f < o) && (h = !1);
     }
     return {
       items: a,
-      hasMore: w,
+      hasMore: b,
       oldestReceived: f
     };
   },
   updateInAppNotifications: async (e) => {
-    const s = {
+    const r = {
       trackingIds: e.ids
     };
-    return e.archived === !0 ? s.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (s.archived = null), e.clicked === !0 ? s.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (s.clicked = null), e.opened === !0 ? s.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (s.opened = null), n.rest.patchNotifications(s);
+    return e.archived === !0 ? r.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (r.archived = null), e.clicked === !0 ? r.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (r.clicked = null), e.opened === !0 ? r.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (r.opened = null), i.rest.patchNotifications(r);
   },
-  getPreferences: async () => n.rest.getPreferences(),
-  updateDeliveryOption: async (e) => n.rest.postPreferences([e]),
+  getPreferences: async () => i.rest.getPreferences(),
+  updateDeliveryOption: async (e) => i.rest.postPreferences([e]),
   identify: async (e) => {
-    if (e.id && e.id !== n.config.userId)
+    if (e.id && e.id !== i.config.userId)
       throw new Error(
         "The id in the parameters does not match the initialized userId."
       );
-    return n.rest.postUser(e);
-  }
-}, E = z(
+    return i.rest.postUser(e);
+  },
+  getUserAccountMetadata: async () => i.rest.getUserAccountMetadata()
+}, F = Q(
   void 0
-), q = (e) => {
-  const i = {
+), te = (e) => {
+  const o = {
     ...{
       apiURL: "https://api.notificationapi.com",
       wsURL: "wss://ws.notificationapi.com",
       initialLoadMaxCount: 1e3,
       initialLoadMaxAge: new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 3)),
       playSoundOnNewNotification: !1,
-      newNotificationSoundPath: "https://proxy.notificationsounds.com/notification-sounds/elegant-notification-sound/download/file-sounds-1233-elegant.mp3"
+      newNotificationSoundPath: "https://proxy.notificationsounds.com/notification-sounds/elegant-notification-sound/download/file-sounds-1233-elegant.mp3",
+      webPushOptInMessage: "AUTOMATIC",
+      customServiceWorkerPath: "/notificationapi-service-worker.js"
     },
     ...e,
     user: "userId" in e ? { id: e.userId } : e.user
-  }, [a, f] = N(), [w, h] = N(), [p, l] = N(!1), [g, y] = N((/* @__PURE__ */ new Date()).toISOString()), [b, P] = N(!0), D = m(() => {
-    i.playSoundOnNewNotification && new Audio(i.newNotificationSoundPath).play().catch((r) => {
-      console.log("Failed to play new notification sound:", r);
+  }, [a, f] = I(), [b, h] = I(), [l, g] = I(), [w, y] = I(!1), [k, C] = I((/* @__PURE__ */ new Date()).toISOString()), [A, U] = I(!0), [v, N] = I(o.webPushOptInMessage), [x, J] = I(!1), W = m(() => {
+    o.playSoundOnNewNotification && new Audio(o.newNotificationSoundPath).play().catch((s) => {
+      console.log("Failed to play new notification sound:", s);
     });
-  }, [i.newNotificationSoundPath, i.playSoundOnNewNotification]), S = m((o) => {
-    const r = (/* @__PURE__ */ new Date()).toISOString();
-    f((t) => (o = o.filter((c) => !(c.expDate && new Date(c.expDate * 1e3).toISOString() > r || c.date > r)), t ? [
-      ...o.filter((c) => !t.find((d) => d.id === c.id)),
-      ...t
-    ] : o));
-  }, []), u = F(() => {
-    const o = e.client ? e.client : n.init({
-      clientId: i.clientId,
-      userId: i.user.id,
-      hashedUserId: i.hashedUserId,
-      onNewInAppNotifications: (r) => {
-        D(), S(r);
+  }, [o.newNotificationSoundPath, o.playSoundOnNewNotification]), S = m((t) => {
+    const s = (/* @__PURE__ */ new Date()).toISOString();
+    f((n) => (t = t.filter((d) => {
+      const p = d.expDate && new Date(d.expDate * 1e3).toISOString() < s, D = new Date(d.date).getTime() > new Date(s).getTime() + 1e3;
+      return !p && !D;
+    }), n ? [
+      ...t.filter((d) => !n.find((D) => D.id === d.id)),
+      ...n
+    ] : t));
+  }, []), u = X(() => {
+    const t = e.client ? e.client : i.init({
+      clientId: o.clientId,
+      userId: o.user.id,
+      hashedUserId: o.hashedUserId,
+      onNewInAppNotifications: (s) => {
+        W(), S(s);
       }
     });
-    return o.identify({
-      email: i.user.email,
-      number: i.user.number
-    }), o;
+    return t.identify({
+      email: o.user.email,
+      number: o.user.number
+    }), t;
   }, [
-    i.clientId,
-    i.user.id,
-    i.user.email,
-    i.user.number,
-    i.hashedUserId,
+    o.clientId,
+    o.user.id,
+    o.user.email,
+    o.user.number,
+    o.hashedUserId,
     S,
-    D,
+    W,
     e.client
-  ]), O = m(
-    async (o, r) => {
-      const t = await u.rest.getNotifications(o, r);
-      y(t.oldestReceived), P(t.couldLoadMore), S(t.notifications);
+  ]), L = m(
+    async (t, s) => {
+      const n = await u.rest.getNotifications(t, s);
+      C(n.oldestReceived), U(n.couldLoadMore), S(n.notifications);
     },
     [S, u.rest]
-  ), v = k(b), C = k(p), x = k(g);
-  U(() => {
-    v.current = b, C.current = p, x.current = g;
-  }, [b, p, g]);
-  const A = m(
-    async (o) => {
-      if (!(!o && (!v.current || C.current))) {
-        l(!0);
+  ), E = T(A), R = T(w), $ = T(k);
+  P(() => {
+    E.current = A, R.current = w, $.current = k;
+  }, [A, w, k]);
+  const O = m(
+    async (t) => {
+      if (!(!t && (!E.current || R.current))) {
+        y(!0);
         try {
-          await O(
-            o ? (/* @__PURE__ */ new Date()).toISOString() : x.current,
-            o ? i.initialLoadMaxCount : 1e3
+          await L(
+            t ? (/* @__PURE__ */ new Date()).toISOString() : $.current,
+            t ? o.initialLoadMaxCount : 1e3
           );
         } finally {
-          l(!1);
+          y(!1);
         }
       }
     },
-    [i.initialLoadMaxCount, O]
-  ), R = async (o) => {
+    [o.initialLoadMaxCount, L]
+  ), q = async (t) => {
     if (!a) return;
-    const r = (/* @__PURE__ */ new Date()).toISOString(), t = a.filter((c) => o.includes(c.id) && !c.clicked).map((c) => c.id);
-    u.updateInAppNotifications({ ids: t, clicked: !0 }), f((c) => {
+    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((c) => t.includes(c.id) && !c.clicked).map((c) => c.id);
+    u.updateInAppNotifications({ ids: n, clicked: !0 }), f((c) => {
       if (!c) return [];
       const d = [...c];
-      return d.filter((I) => t.includes(I.id)).forEach((I) => {
-        I.clicked = r;
+      return d.filter((p) => n.includes(p.id)).forEach((p) => {
+        p.clicked = s;
       }), d;
     });
-  }, $ = async () => {
+  }, B = async () => {
     if (!a) return;
-    const o = (/* @__PURE__ */ new Date()).toISOString(), r = a.filter((t) => !t.opened || !t.seen).map((t) => t.id);
-    r.length !== 0 && (u.updateInAppNotifications({
-      ids: r,
+    const t = (/* @__PURE__ */ new Date()).toISOString(), s = a.filter((n) => !n.opened || !n.seen).map((n) => n.id);
+    s.length !== 0 && (u.updateInAppNotifications({
+      ids: s,
       opened: !0
-    }), f((t) => {
-      if (!t) return [];
-      const c = [...t];
-      return c.filter((d) => r.includes(d.id)).forEach((d) => {
-        d.opened = o, d.seen = !0;
+    }), f((n) => {
+      if (!n) return [];
+      const c = [...n];
+      return c.filter((d) => s.includes(d.id)).forEach((d) => {
+        d.opened = t, d.seen = !0;
       }), c;
     }));
-  }, j = async (o) => {
+  }, G = async (t) => {
     if (!a) return;
-    const r = a.filter((t) => t.archived && (o === "ALL" || o.includes(t.id))).map((t) => t.id);
-    r.length !== 0 && (u.updateInAppNotifications({
-      ids: r,
+    const s = a.filter((n) => n.archived && (t === "ALL" || t.includes(n.id))).map((n) => n.id);
+    s.length !== 0 && (u.updateInAppNotifications({
+      ids: s,
       archived: !1
-    }), f((t) => {
-      if (!t) return [];
-      const c = [...t];
-      return c.filter((d) => r.includes(d.id)).forEach((d) => {
+    }), f((n) => {
+      if (!n) return [];
+      const c = [...n];
+      return c.filter((d) => s.includes(d.id)).forEach((d) => {
         d.archived = void 0;
       }), c;
     }));
-  }, T = async (o) => {
+  }, K = async (t) => {
     if (!a) return;
-    const r = (/* @__PURE__ */ new Date()).toISOString(), t = a.filter((c) => !c.archived && (o === "ALL" || o.includes(c.id))).map((c) => c.id);
-    t.length !== 0 && (u.updateInAppNotifications({ ids: t, archived: !0 }), f((c) => {
+    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((c) => !c.archived && (t === "ALL" || t.includes(c.id))).map((c) => c.id);
+    n.length !== 0 && (u.updateInAppNotifications({ ids: n, archived: !0 }), f((c) => {
       if (!c) return [];
       const d = [...c];
-      return d.filter((I) => t.includes(I.id)).forEach((I) => {
-        I.archived = r;
+      return d.filter((p) => n.includes(p.id)).forEach((p) => {
+        p.archived = s;
       }), d;
     }));
-  }, W = (o, r, t, c) => L([
+  }, V = (t, s, n, c) => j([
     {
-      notificationId: o,
-      channel: r,
-      delivery: t,
+      notificationId: t,
+      channel: s,
+      delivery: n,
       subNotificationId: c
     }
-  ]), L = (o) => {
-    u.rest.postPreferences(o).then(() => {
-      u.getPreferences().then((r) => {
-        h(r);
+  ]), j = (t) => {
+    u.rest.postPreferences(t).then(() => {
+      u.getPreferences().then((s) => {
+        h(s);
       });
     });
-  };
-  U(() => {
-    f([]), l(!1), h(void 0), y((/* @__PURE__ */ new Date()).toISOString()), P(!0), A(!0), u.openWebSocket(), u.getPreferences().then((o) => {
-      h(o);
+  }, M = m(() => {
+    "serviceWorker" in navigator && navigator.serviceWorker.register(o.customServiceWorkerPath).then(async (t) => {
+      N(!1), Notification.requestPermission().then(async (s) => {
+        s === "granted" ? await t.pushManager.subscribe({
+          userVisibleOnly: !0,
+          applicationServerKey: l == null ? void 0 : l.userAccountMetadata.environmentVapidPublicKey
+        }).then(async (n) => {
+          const c = {
+            webPushTokens: [
+              {
+                sub: {
+                  endpoint: n.toJSON().endpoint,
+                  keys: n.toJSON().keys
+                }
+              }
+            ]
+          };
+          await u.identify(c), console.log("index"), localStorage.setItem("hideWebPushOptInMessage", "true");
+        }) : s === "denied" && console.log("Permission for notifications was denied");
+      });
+    }).catch((t) => {
+      t.code === 18 ? console.error(
+        "NotificationAPI guide: Probably you are not setup the service worker correctly. Please check the documentation at https://docs.notificationapi.com/guides/web-push#step-by-step-implementation Step 3: Service Worker Setup."
+      ) : t.code === 19 ? console.error(
+        "The operation is aborted. This can happen if the user denies the permission request."
+      ) : t.code === 20 ? console.error(
+        "The operation is invalid. This can occur if the provided application server key is invalid. Please contact NotificationAPI support."
+      ) : t.code === 21 ? console.error(
+        "The operation is not allowed. This can happen if the user has blocked notifications for the site. Please check your browser site settings Notifications part."
+      ) : t.code === 22 ? console.error(
+        "The operation is not supported. This can occur if the browser does not support the required features."
+      ) : console.error(t);
+    });
+  }, [
+    u,
+    o.customServiceWorkerPath,
+    l == null ? void 0 : l.userAccountMetadata.environmentVapidPublicKey
+  ]);
+  P(() => {
+    f([]), y(!1), h(void 0), C((/* @__PURE__ */ new Date()).toISOString()), U(!0), O(!0), u.openWebSocket(), u.getPreferences().then((t) => {
+      h(t);
     });
-  }, [u, A]);
-  const H = {
+  }, [u, O, M]), P(() => {
+    Notification.permission !== "default" && N(!1), v === "AUTOMATIC" && (N(
+      localStorage.getItem("hideWebPushOptInMessage") !== "true"
+    ), u.getUserAccountMetadata().then((t) => {
+      g(t), N(t.userAccountMetadata.hasWebPushEnabled);
+    }));
+  }, [u, v]), P(() => {
+    x && M();
+  }, [x, M]);
+  const _ = {
     notifications: a,
-    preferences: w,
-    loadNotifications: A,
-    markAsOpened: $,
-    markAsArchived: T,
-    markAsUnarchived: j,
-    markAsClicked: R,
-    updateDelivery: W,
-    updateDeliveries: L,
-    getClient: () => u
+    preferences: b,
+    userAccountMetaData: l,
+    webPushOptInMessage: v,
+    loadNotifications: O,
+    markAsOpened: B,
+    markAsArchived: K,
+    markAsUnarchived: G,
+    markAsClicked: q,
+    updateDelivery: V,
+    updateDeliveries: j,
+    getClient: () => u,
+    setWebPushOptInMessage: N,
+    setWebPushOptIn: J
   };
-  return /* @__PURE__ */ B(E.Provider, { value: H, children: e.children });
-}, K = () => {
-  const e = G(E);
+  return /* @__PURE__ */ z(F.Provider, { value: _, children: e.children });
+}, ne = () => {
+  const e = Y(F);
   if (!e)
     throw new Error("useMyContext must be used within a MyProvider");
   return e;
 };
-q.useNotificationAPIContext = K;
+te.useNotificationAPIContext = ne;
 export {
-  E as NotificationAPIContext,
-  q as NotificationAPIProvider
+  F as NotificationAPIContext,
+  te as NotificationAPIProvider
 };

package/dist/components/WebPush/WebPushOptInMessage.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+interface WebPushOptInMessageProps {
+    hideAfterInteraction?: boolean;
+    alertContainerStyle?: React.CSSProperties;
+    descriptionStyle?: React.CSSProperties;
+    buttonContainerStyle?: React.CSSProperties;
+    yesButtonStyle?: React.CSSProperties;
+    cancelButtonStyle?: React.CSSProperties;
+    description?: string;
+    icon?: React.ReactNode;
+}
+declare const WebPushOptInMessage: React.FC<WebPushOptInMessageProps>;
+export default WebPushOptInMessage;

package/dist/components/WebPush/WebPushOptInMessage.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "react";
+import "../Provider/index.js";
+import { W as a } from "../../assets/WebPushOptInMessage.js";
+import "../../assets/button.js";
+export {
+  a as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -43,7 +43,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@notificationapi/core": "^0.0.10",
+    "@notificationapi/core": "^0.0.12",
     "antd": "^5.17.4",
     "javascript-time-ago": "^2.5.10",
     "liquidjs": "^10.14.0",