@notificationapi/react 1.2.0 → 1.4.0

package/README.md

@@ -6,6 +6,22 @@ The React SDK is mainly used for displaying In-App Notifications, allowing users
 
 Please refer to our [documentations](https://docs.notificationapi.com).
 
+# Debug Mode
+
+The SDK includes a comprehensive debug mode to help troubleshoot issues and understand SDK behavior. Enable it by adding the `debug` prop:
+
+```jsx
+<NotificationAPIProvider
+  clientId="your-client-id"
+  userId="your-user-id"
+  debug={true}
+>
+  {/* Your app components */}
+</NotificationAPIProvider>
+```
+
+For detailed information about debug mode, see [DEBUG.md](./DEBUG.md).
+
 # Development
 
 1. Install dependencies:
@@ -20,6 +36,8 @@ npm install
 npm run dev
 ```
 
+The example application includes a debug mode toggle to demonstrate the feature.
+
 # React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
@@ -100,7 +118,7 @@ We welcome contributions! To ensure smooth collaboration, please follow these st
 
 5. **Commit and Push**
 
-   - Once you’ve made and tested your changes, commit them with a meaningful message:
+   - Once you've made and tested your changes, commit them with a meaningful message:
 
      ```bash
      git add .

package/dist/components/Provider/index.d.ts

@@ -19,6 +19,7 @@ type Props = ({
     client?: typeof NotificationAPIClientSDK;
     webPushOptInMessage?: 'AUTOMATIC' | boolean;
     customServiceWorkerPath?: string;
+    debug?: boolean;
 };
 export declare const NotificationAPIProvider: React.FunctionComponent<PropsWithChildren<Props>> & {
     useNotificationAPIContext: typeof useNotificationAPIContext;

package/dist/components/Provider/index.js

@@ -1,25 +1,59 @@
-import { jsx as Q } from "react/jsx-runtime";
-import { useState as I, useCallback as m, useMemo as X, useRef as U, useEffect as y, useContext as Y } from "react";
-import { NotificationAPIContext as H } from "./context.js";
-const Z = async (e, c, i, a, f, b, h) => {
-  const l = ee(a, f, b), g = await fetch(
-    `https://${c}/${a}/users/${encodeURIComponent(
-      f
-    )}/${i}`,
-    {
-      method: e,
-      body: JSON.stringify(h),
-      headers: {
-        Authorization: `Basic ${l}`
-      }
-    }
-  );
+import { jsx as oe } from "react/jsx-runtime";
+import { useMemo as z, useState as N, useCallback as A, useRef as F, useEffect as E, useContext as ie } from "react";
+import { NotificationAPIContext as V } from "./context.js";
+import { createDebugLogger as ne, formatApiCall as C } from "../../utils/debug.js";
+const re = async (o, e, u, a, c, h, I, l) => {
+  const p = se(a, c, h), b = `https://${e}/${a}/users/${encodeURIComponent(
+    c
+  )}/${u}`, w = {
+    Authorization: `Basic ${p}`
+  };
+  l && l.log("HTTP Request:", {
+    method: o,
+    host: e,
+    url: b,
+    body: I
+  });
+  const v = Date.now();
   try {
-    return await g.json();
-  } catch {
-    return;
+    const m = await fetch(b, {
+      method: o,
+      body: JSON.stringify(I),
+      headers: w
+    });
+    l && l.log("HTTP Response:", m);
+    try {
+      const P = await m.json();
+      return l && l.log("Response Data:", P), P;
+    } catch (P) {
+      l && l.warn("Failed to parse response as JSON:", P);
+      return;
+    }
+  } catch (m) {
+    const P = Date.now() - v;
+    throw l && l.error("HTTP Request Failed:", {
+      error: m,
+      url: b,
+      headers: w,
+      duration: `${P}ms`
+    }), m;
+  }
+}, se = (o, e, u) => btoa(u ? o + ":" + e + ":" + u : o + ":" + e);
+class B {
+  constructor(e = !1) {
+    this.debug = e;
   }
-}, ee = (e, c, i) => btoa(i ? e + ":" + c + ":" + i : e + ":" + c), q = {
+  log(...e) {
+    this.debug && console.log("[NotificationAPI js core SDK Debug]", ...e);
+  }
+  warn(...e) {
+    this.debug && console.warn("[NotificationAPI js core SDK Debug]", ...e);
+  }
+  error(...e) {
+    this.debug && console.error("[NotificationAPI js core SDK Debug]", ...e);
+  }
+}
+const J = {
   host: "api.notificationapi.com",
   websocketHost: "ws.notificationapi.com",
   userId: "",
@@ -27,84 +61,114 @@ const Z = async (e, c, i, a, f, b, h) => {
   hashedUserId: "",
   getInAppDefaultCount: 100,
   getInAppDefaultOldest: new Date(
-    Date.now() - 2592e6
+    Date.now() - 30 * 24 * 60 * 60 * 1e3
   ).toISOString(),
   onNewInAppNotifications: void 0,
-  keepWebSocketAliveForSeconds: 86400
+  keepWebSocketAliveForSeconds: 24 * 60 * 60,
   // 24 hours
-}, o = {
-  config: q,
-  init: function(e) {
-    return this.config = { ...q, ...e }, {
+  debug: !1
+}, s = {
+  config: J,
+  logger: new B(!1),
+  init: function(o) {
+    return this.config = { ...J, ...o }, this.logger = new B(this.config.debug), this.logger.log("Initialized with config:", {
+      userId: this.config.userId,
+      clientId: this.config.clientId,
+      host: this.config.host,
+      websocketHost: this.config.websocketHost,
+      debug: this.config.debug,
+      hasHashedUserId: !!this.config.hashedUserId
+    }), {
       ...this
     };
   },
   rest: {
-    generic: function(e, c, i) {
-      return Z(
+    generic: function(o, e, u) {
+      return s.logger.log(
+        `API Call: ${o} ${e}`,
+        u ? { body: u } : ""
+      ), re(
+        o,
+        s.config.host,
         e,
-        o.config.host,
-        c,
-        o.config.clientId,
-        o.config.userId,
-        o.config.hashedUserId,
-        i
+        s.config.clientId,
+        s.config.userId,
+        s.config.hashedUserId,
+        u,
+        s.logger
       );
     },
     // 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, c) {
-      return o.rest.generic(
+    getNotifications: function(o, e) {
+      return s.rest.generic(
         "GET",
-        `notifications/INAPP_WEB?count=${c}&before=${e}`
+        `notifications/INAPP_WEB?count=${e}&before=${o}`
       );
     },
-    patchNotifications: function(e) {
-      return o.rest.generic(
+    patchNotifications: function(o) {
+      return s.rest.generic(
         "PATCH",
         "notifications/INAPP_WEB",
-        e
+        o
       );
     },
     getPreferences: function() {
-      return o.rest.generic("GET", "preferences");
+      return s.rest.generic("GET", "preferences");
     },
-    postPreferences: function(e) {
-      return o.rest.generic(
+    postPreferences: function(o) {
+      return s.rest.generic(
         "POST",
         "preferences",
-        e
+        o
       );
     },
-    postUser: function(e) {
-      return o.rest.generic("POST", "", e);
+    postUser: function(o) {
+      return s.rest.generic("POST", "", o);
     },
     getUserAccountMetadata: function() {
-      return o.rest.generic("GET", "account_metadata");
+      return s.rest.generic("GET", "account_metadata");
     }
   },
   websocket: {
     object: void 0,
     connect: function() {
-      let e = `wss://${o.config.websocketHost}?userId=${encodeURIComponent(o.config.userId)}&envId=${o.config.clientId}`;
-      return o.config.hashedUserId && (e += `&userIdHash=${encodeURIComponent(o.config.hashedUserId)}`), o.websocket.object = new WebSocket(e), o.websocket.object.onmessage = (c) => {
-        const i = JSON.parse(c.data);
-        if (!(!i || !i.route) && i.route === "inapp_web/new_notifications") {
-          const a = i;
-          o.config.onNewInAppNotifications && o.config.onNewInAppNotifications(
+      let o = `wss://${s.config.websocketHost}?userId=${encodeURIComponent(s.config.userId)}&envId=${s.config.clientId}`;
+      return s.config.hashedUserId && (o += `&userIdHash=${encodeURIComponent(s.config.hashedUserId)}`), s.logger.log("WebSocket connecting to:", o), s.websocket.object = new WebSocket(o), s.websocket.object.onopen = () => {
+        s.logger.log("WebSocket connection opened");
+      }, s.websocket.object.onclose = (e) => {
+        s.logger.log("WebSocket connection closed:", {
+          code: e.code,
+          reason: e.reason,
+          wasClean: e.wasClean
+        });
+      }, s.websocket.object.onerror = (e) => {
+        s.logger.error("WebSocket error:", e);
+      }, s.websocket.object.onmessage = (e) => {
+        s.logger.log(
+          "WebSocket message received:",
+          e.data
+        );
+        const u = JSON.parse(e.data);
+        if (!(!u || !u.route) && u.route === "inapp_web/new_notifications") {
+          const a = u;
+          s.logger.log(
+            "New notifications received:",
+            a.payload.notifications
+          ), s.config.onNewInAppNotifications && s.config.onNewInAppNotifications(
             a.payload.notifications
           );
         }
-      }, o.websocket.object;
+      }, s.websocket.object;
     },
-    disconnect: function(e) {
-      var c;
-      o.websocket.object && ((c = o.websocket.object) == null || c.close(), e && e(o.websocket.object));
+    disconnect: function(o) {
+      var e;
+      s.websocket.object && (s.logger.log("WebSocket disconnecting"), (e = s.websocket.object) == null || e.close(), o && o(s.websocket.object));
     }
   },
   openWebSocket: function() {
-    return o.websocket.connect(() => {
+    return s.websocket.connect(() => {
       setTimeout(
         () => {
           this.websocket.disconnect(() => {
@@ -118,45 +182,83 @@ const Z = async (e, c, i, a, f, b, h) => {
   // These functions are developer friendly wrappers over the rest APIs
   // They may or may not do additional tasks.
   // e.g. identify simply maps to postUsers
-  getInAppNotifications: async (e) => {
-    const c = e.maxCountNeeded || o.config.getInAppDefaultCount, i = e.oldestNeeded || o.config.getInAppDefaultOldest;
-    let a = [], f = e.before, b = !0, h = !0;
-    for (; h; ) {
-      const l = (await o.rest.getNotifications(
-        f,
-        c
-      )).notifications.filter(
-        (g) => !a.find((w) => w.id === g.id)
+  getInAppNotifications: async (o) => {
+    s.logger.log(
+      "getInAppNotifications called with params:",
+      o
+    );
+    const e = o.maxCountNeeded || s.config.getInAppDefaultCount, u = o.oldestNeeded || s.config.getInAppDefaultOldest;
+    s.logger.log("Fetching notifications with:", {
+      maxCountNeeded: e,
+      oldestNeeded: u,
+      before: o.before
+    });
+    let a = [], c = o.before, h = !0, I = !0;
+    for (; I; ) {
+      const l = (await s.rest.getNotifications(
+        c,
+        e
+      )).notifications, p = l.filter(
+        (b) => !a.find((w) => w.id === b.id)
       );
-      f = l.reduce(
-        (g, w) => g < w.date ? g : w.date,
-        e.before
-      ), a = [...a, ...l], b = l.length > 0, h = !0, (!b || a.length >= c || f < i) && (h = !1);
+      s.logger.log(
+        `Received ${l.length} notifications, ${p.length} unique`
+      ), c = p.reduce(
+        (b, w) => b < w.date ? b : w.date,
+        o.before
+      ), a = [...a, ...p], h = p.length > 0, I = !0, (!h || a.length >= e || c < u) && (I = !1, s.logger.log("Stopping fetch loop:", {
+        hasMore: h,
+        totalResults: a.length,
+        maxCountNeeded: e,
+        oldestReceived: c,
+        oldestNeeded: u
+      }));
     }
-    return {
+    return s.logger.log("getInAppNotifications completed:", {
+      totalItems: a.length,
+      hasMore: h,
+      oldestReceived: c
+    }), {
       items: a,
-      hasMore: b,
-      oldestReceived: f
+      hasMore: h,
+      oldestReceived: c
     };
   },
-  updateInAppNotifications: async (e) => {
-    const c = {
-      trackingIds: e.ids
+  updateInAppNotifications: async (o) => {
+    s.logger.log(
+      "updateInAppNotifications called with params:",
+      o
+    );
+    const e = {
+      trackingIds: o.ids
     };
-    return e.archived === !0 ? c.archived = (/* @__PURE__ */ new Date()).toISOString() : e.archived === !1 && (c.archived = null), e.clicked === !0 ? c.clicked = (/* @__PURE__ */ new Date()).toISOString() : e.clicked === !1 && (c.clicked = null), e.opened === !0 ? c.opened = (/* @__PURE__ */ new Date()).toISOString() : e.opened === !1 && (c.opened = null), o.rest.patchNotifications(c);
+    return o.archived === !0 ? e.archived = (/* @__PURE__ */ new Date()).toISOString() : o.archived === !1 && (e.archived = null), o.clicked === !0 ? e.clicked = (/* @__PURE__ */ new Date()).toISOString() : o.clicked === !1 && (e.clicked = null), o.opened === !0 ? e.opened = (/* @__PURE__ */ new Date()).toISOString() : o.opened === !1 && (e.opened = null), s.logger.log(
+      "Updating notifications with body:",
+      e
+    ), s.rest.patchNotifications(e);
   },
-  getPreferences: async () => o.rest.getPreferences(),
-  updateDeliveryOption: async (e) => o.rest.postPreferences([e]),
-  identify: async (e) => {
-    if (e.id && e.id !== o.config.userId)
+  getPreferences: async () => s.rest.getPreferences(),
+  updateDeliveryOption: async (o) => s.rest.postPreferences([o]),
+  identify: async (o) => {
+    if (o.id && o.id !== s.config.userId)
       throw new Error(
         "The id in the parameters does not match the initialized userId."
       );
-    return o.rest.postUser(e);
+    return s.rest.postUser(o);
   },
-  getUserAccountMetadata: async () => o.rest.getUserAccountMetadata()
-}, F = typeof window < "u", te = (e) => {
-  const i = {
+  getUserAccountMetadata: async () => s.rest.getUserAccountMetadata()
+}, G = typeof window < "u", ae = (o) => {
+  const e = z(
+    () => ne(o.debug || !1),
+    [o.debug]
+  );
+  e.log("NotificationAPI Provider initializing", {
+    clientId: o.clientId,
+    userId: "userId" in o ? o.userId : o.user.id,
+    debug: o.debug || !1,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString()
+  });
+  const a = {
     ...{
       apiURL: "api.notificationapi.com",
       wsURL: "ws.notificationapi.com",
@@ -167,153 +269,315 @@ const Z = async (e, c, i, a, f, b, h) => {
       webPushOptInMessage: "AUTOMATIC",
       customServiceWorkerPath: "/notificationapi-service-worker.js"
     },
-    ...e,
-    user: "userId" in e ? { id: e.userId } : e.user
-  }, [a, f] = I(), [b, h] = I(), [l, g] = I(), [w, S] = I(!1), [k, T] = I((/* @__PURE__ */ new Date()).toISOString()), [A, C] = I(!0), [v, N] = I(i.webPushOptInMessage), [L, J] = I(!1), W = m(() => {
-    i.playSoundOnNewNotification && new Audio(i.newNotificationSoundPath).play().catch((s) => {
-      console.log("Failed to play new notification sound:", s);
-    });
-  }, [i.newNotificationSoundPath, i.playSoundOnNewNotification]), P = m((t) => {
-    const s = (/* @__PURE__ */ new Date()).toISOString();
-    f((n) => (t = Array.isArray(t) ? t : [], t = t.filter((d) => {
-      const p = d.expDate && new Date(d.expDate).toISOString() > s, D = new Date(d.date).getTime() > new Date(s).getTime() + 1e3;
-      return !p && !D;
-    }), n = Array.isArray(n) ? n : [], [
-      ...t.filter((d) => !n.find((D) => D.id === d.id)),
-      ...n
-    ]));
-  }, []), u = X(() => {
-    const t = e.client ? e.client : o.init({
-      clientId: i.clientId,
-      userId: i.user.id,
-      hashedUserId: i.hashedUserId,
-      onNewInAppNotifications: (s) => {
-        W(), P(s);
-      },
-      host: i.apiURL,
-      websocketHost: i.wsURL
-    });
-    return t.identify({
-      email: i.user.email,
-      number: i.user.number
-    }), t;
+    ...o,
+    user: "userId" in o ? { id: o.userId } : o.user
+  };
+  e.log("Configuration loaded", a);
+  const [c, h] = N(), [I, l] = N(), [p, b] = N(), [w, v] = N(!1), [m, P] = N((/* @__PURE__ */ new Date()).toISOString()), [D, x] = N(!0), [k, y] = N(a.webPushOptInMessage), [M, Q] = N(!1), $ = A(() => {
+    a.playSoundOnNewNotification && (e.log("Playing notification sound", {
+      soundPath: a.newNotificationSoundPath
+    }), new Audio(a.newNotificationSoundPath).play().catch((n) => {
+      e.error("Failed to play new notification sound", n), console.log("Failed to play new notification sound:", n);
+    }));
   }, [
-    i.clientId,
-    i.user.id,
-    i.user.email,
-    i.user.number,
-    i.hashedUserId,
-    P,
-    W,
-    e.client,
-    i.apiURL,
-    i.wsURL
-  ]), x = m(
-    async (t, s) => {
-      const n = await u.rest.getNotifications(t, s);
-      T(n.oldestReceived), C(n.couldLoadMore), P(n.notifications);
+    a.newNotificationSoundPath,
+    a.playSoundOnNewNotification,
+    e
+  ]), O = A(
+    (t) => {
+      e.group("Adding notifications to state"), e.log("Received notifications", {
+        count: (t == null ? void 0 : t.length) || 0,
+        notifications: t
+      });
+      const n = (/* @__PURE__ */ new Date()).toISOString();
+      h((i) => {
+        const r = (i == null ? void 0 : i.length) || 0;
+        e.log("Current notifications count", r), t = Array.isArray(t) ? t : [], t = t.filter((g) => {
+          const S = g.expDate && new Date(g.expDate).toISOString() > n, L = new Date(g.date).getTime() > new Date(n).getTime() + 1e3, K = !S && !L;
+          return K || e.log("Filtering out notification", {
+            id: g.id,
+            reason: S ? "expired" : "future",
+            expDate: g.expDate,
+            date: g.date
+          }), K;
+        }), i = Array.isArray(i) ? i : [];
+        const d = [
+          ...t.filter((g) => {
+            const S = i.find((L) => L.id === g.id);
+            return S && e.log("Filtering out duplicate notification", { id: g.id }), !S;
+          }),
+          ...i
+        ];
+        return e.log("State updated", {
+          previousCount: r,
+          newCount: d.length,
+          addedCount: t.length
+        }), e.groupEnd(), d;
+      });
+    },
+    [e]
+  ), f = z(() => {
+    e.group("Initializing NotificationAPI client");
+    const t = {
+      clientId: a.clientId,
+      userId: a.user.id,
+      hashedUserId: a.hashedUserId,
+      host: a.apiURL,
+      websocketHost: a.wsURL,
+      debug: a.debug
+    };
+    e.log("Client configuration", t);
+    const n = o.client ? o.client : s.init({
+      ...t,
+      onNewInAppNotifications: (r) => {
+        e.log("Received new in-app notifications via WebSocket", {
+          count: (r == null ? void 0 : r.length) || 0,
+          notifications: r
+        }), $(), O(r);
+      }
+    }), i = {
+      email: a.user.email,
+      number: a.user.number
+    };
+    return e.log("Identifying user", i), n.identify(i), e.groupEnd(), n;
+  }, [
+    a.clientId,
+    a.user.id,
+    a.user.email,
+    a.user.number,
+    a.hashedUserId,
+    a.debug,
+    O,
+    $,
+    o.client,
+    a.apiURL,
+    a.wsURL,
+    e
+  ]), j = A(
+    async (t, n) => {
+      var i;
+      e.group("Fetching notifications"), e.log(
+        "Fetch parameters",
+        C("GET", "/notifications", { date: t, count: n })
+      );
+      try {
+        const r = await f.rest.getNotifications(t, n);
+        e.log("Fetch successful", {
+          notificationsCount: ((i = r.notifications) == null ? void 0 : i.length) || 0,
+          oldestReceived: r.oldestReceived,
+          couldLoadMore: r.couldLoadMore
+        }), P(r.oldestReceived), x(r.couldLoadMore), O(r.notifications), e.groupEnd();
+      } catch (r) {
+        throw e.error("Failed to fetch notifications", r, { date: t, count: n }), e.groupEnd(), r;
+      }
     },
-    [P, u.rest]
-  ), E = U(A), R = U(w), $ = U(k);
-  y(() => {
-    E.current = A, R.current = w, $.current = k;
-  }, [A, w, k]);
-  const O = m(
+    [O, f.rest, e]
+  ), U = F(D), W = F(w), q = F(m);
+  E(() => {
+    U.current = D, W.current = w, q.current = m;
+  }, [D, w, m]);
+  const T = A(
     async (t) => {
-      if (!(!t && (!E.current || R.current))) {
-        S(!0);
-        try {
-          await x(
-            t ? (/* @__PURE__ */ new Date()).toISOString() : $.current,
-            t ? i.initialLoadMaxCount : 1e3
-          );
-        } finally {
-          S(!1);
-        }
+      if (e.group(`Loading notifications (${t ? "initial" : "more"})`), e.log("Load conditions", {
+        initial: t,
+        hasMore: U.current,
+        loading: W.current
+      }), !t && (!U.current || W.current)) {
+        e.log("Skipping load - conditions not met"), e.groupEnd();
+        return;
+      }
+      v(!0), e.log("Loading started");
+      try {
+        await j(
+          t ? (/* @__PURE__ */ new Date()).toISOString() : q.current,
+          t ? a.initialLoadMaxCount : 1e3
+        ), e.log("Loading completed successfully");
+      } catch (n) {
+        throw e.error("Loading failed", n), n;
+      } finally {
+        v(!1), e.groupEnd();
       }
     },
-    [i.initialLoadMaxCount, x]
-  ), B = async (t) => {
-    if (!a) return;
-    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((r) => t.includes(r.id) && !r.clicked).map((r) => r.id);
-    u.updateInAppNotifications({ ids: n, clicked: !0 }), f((r) => {
-      if (!r) return [];
-      const d = [...r];
-      return d.filter((p) => n.includes(p.id)).forEach((p) => {
-        p.clicked = s;
-      }), d;
-    });
-  }, G = async () => {
-    if (!a) return;
-    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((n) => {
-      if (!n) return [];
-      const r = [...n];
-      return r.filter((d) => s.includes(d.id)).forEach((d) => {
-        d.opened = t, d.seen = !0;
-      }), r;
-    }));
-  }, K = async (t) => {
-    if (!a) return;
-    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((n) => {
-      if (!n) return [];
-      const r = [...n];
-      return r.filter((d) => s.includes(d.id)).forEach((d) => {
-        d.archived = void 0;
-      }), r;
-    }));
-  }, V = async (t) => {
-    if (!a) return;
-    const s = (/* @__PURE__ */ new Date()).toISOString(), n = a.filter((r) => !r.archived && (t === "ALL" || t.includes(r.id))).map((r) => r.id);
-    n.length !== 0 && (u.updateInAppNotifications({ ids: n, archived: !0 }), f((r) => {
-      if (!r) return [];
-      const d = [...r];
-      return d.filter((p) => n.includes(p.id)).forEach((p) => {
-        p.archived = s;
-      }), d;
-    }));
-  }, _ = (t, s, n, r) => j([
+    [a.initialLoadMaxCount, j, e]
+  ), X = async (t) => {
+    if (e.group("Marking notifications as clicked"), e.log("Requested IDs", t), !c) {
+      e.warn("No notifications available"), e.groupEnd();
+      return;
+    }
+    const n = (/* @__PURE__ */ new Date()).toISOString(), i = c.filter((r) => t.includes(r.id) && !r.clicked).map((r) => r.id);
+    if (e.log("Filtered IDs for update", {
+      requestedCount: t.length,
+      actualCount: i.length,
+      ids: i
+    }), i.length === 0) {
+      e.log("No notifications to update"), e.groupEnd();
+      return;
+    }
+    try {
+      e.log(
+        "Updating notifications via API",
+        C("PUT", "/notifications/clicked", { ids: i })
+      ), f.updateInAppNotifications({ ids: i, clicked: !0 }), h((r) => {
+        if (!r) return [];
+        const d = [...r];
+        return d.filter((g) => i.includes(g.id)).forEach((g) => {
+          g.clicked = n;
+        }), e.log("Local state updated", { updatedCount: i.length }), d;
+      }), e.groupEnd();
+    } catch (r) {
+      throw e.error("Failed to mark notifications as clicked", r, { ids: i }), e.groupEnd(), r;
+    }
+  }, Y = async () => {
+    if (e.group("Marking notifications as opened"), !c) {
+      e.warn("No notifications available"), e.groupEnd();
+      return;
+    }
+    const t = (/* @__PURE__ */ new Date()).toISOString(), n = c.filter((i) => !i.opened || !i.seen).map((i) => i.id);
+    if (e.log("Notifications to mark as opened", { count: n.length, ids: n }), n.length === 0) {
+      e.log("All notifications already opened"), e.groupEnd();
+      return;
+    }
+    try {
+      e.log(
+        "Updating notifications via API",
+        C("PUT", "/notifications/opened", { ids: n })
+      ), f.updateInAppNotifications({
+        ids: n,
+        opened: !0
+      }), h((i) => {
+        if (!i) return [];
+        const r = [...i];
+        return r.filter((d) => n.includes(d.id)).forEach((d) => {
+          d.opened = t, d.seen = !0;
+        }), e.log("Local state updated", { updatedCount: n.length }), r;
+      }), e.groupEnd();
+    } catch (i) {
+      throw e.error("Failed to mark notifications as opened", i, { ids: n }), e.groupEnd(), i;
+    }
+  }, Z = async (t) => {
+    if (e.group("Marking notifications as unarchived"), e.log("Requested operation", { ids: t }), !c) {
+      e.warn("No notifications available"), e.groupEnd();
+      return;
+    }
+    const n = c.filter((i) => i.archived && (t === "ALL" || t.includes(i.id))).map((i) => i.id);
+    if (e.log("Filtered notifications for unarchiving", {
+      count: n.length,
+      ids: n
+    }), n.length === 0) {
+      e.log("No archived notifications to unarchive"), e.groupEnd();
+      return;
+    }
+    try {
+      e.log(
+        "Updating notifications via API",
+        C("PUT", "/notifications/unarchived", { ids: n })
+      ), f.updateInAppNotifications({
+        ids: n,
+        archived: !1
+      }), h((i) => {
+        if (!i) return [];
+        const r = [...i];
+        return r.filter((d) => n.includes(d.id)).forEach((d) => {
+          d.archived = void 0;
+        }), e.log("Local state updated", { unarchivedCount: n.length }), r;
+      }), e.groupEnd();
+    } catch (i) {
+      throw e.error("Failed to unarchive notifications", i, { ids: n }), e.groupEnd(), i;
+    }
+  }, _ = async (t) => {
+    if (e.group("Marking notifications as archived"), e.log("Requested operation", { ids: t }), !c) {
+      e.warn("No notifications available"), e.groupEnd();
+      return;
+    }
+    const n = (/* @__PURE__ */ new Date()).toISOString(), i = c.filter((r) => !r.archived && (t === "ALL" || t.includes(r.id))).map((r) => r.id);
+    if (e.log("Filtered notifications for archiving", {
+      count: i.length,
+      ids: i
+    }), i.length === 0) {
+      e.log("No unarchived notifications to archive"), e.groupEnd();
+      return;
+    }
+    try {
+      e.log(
+        "Updating notifications via API",
+        C("PUT", "/notifications/archived", { ids: i })
+      ), f.updateInAppNotifications({ ids: i, archived: !0 }), h((r) => {
+        if (!r) return [];
+        const d = [...r];
+        return d.filter((g) => i.includes(g.id)).forEach((g) => {
+          g.archived = n;
+        }), e.log("Local state updated", { archivedCount: i.length }), d;
+      }), e.groupEnd();
+    } catch (r) {
+      throw e.error("Failed to archive notifications", r, { ids: i }), e.groupEnd(), r;
+    }
+  }, ee = (t, n, i, r) => (e.log("Updating single delivery preference", {
+    notificationId: t,
+    channel: n,
+    delivery: i,
+    subNotificationId: r
+  }), H([
     {
       notificationId: t,
-      channel: s,
-      delivery: n,
+      channel: n,
+      delivery: i,
       subNotificationId: r
     }
-  ]), j = (t) => {
-    u.rest.postPreferences(t).then(() => {
-      u.getPreferences().then((s) => {
-        h(s);
+  ])), H = (t) => {
+    e.group("Updating delivery preferences"), e.log("Preference updates", { count: t.length, params: t });
+    try {
+      f.rest.postPreferences(t).then(() => {
+        e.log(
+          "Preferences updated successfully, fetching latest preferences"
+        ), f.getPreferences().then((n) => {
+          var i, r, d;
+          e.log("Latest preferences fetched", {
+            preferencesCount: ((i = n.preferences) == null ? void 0 : i.length) || 0,
+            notificationsCount: ((r = n.notifications) == null ? void 0 : r.length) || 0,
+            subNotificationsCount: ((d = n.subNotifications) == null ? void 0 : d.length) || 0
+          }), l(n), e.groupEnd();
+        }).catch((n) => {
+          e.error("Failed to fetch updated preferences", n), e.groupEnd();
+        });
+      }).catch((n) => {
+        e.error("Failed to update preferences", n, { params: t }), e.groupEnd();
       });
-    });
-  }, M = m(() => {
-    "serviceWorker" in navigator && navigator.serviceWorker.register(i.customServiceWorkerPath).then(async (t) => {
-      N(!1), ne().then(async (s) => {
-        s === "granted" ? await t.pushManager.subscribe({
+    } catch (n) {
+      throw e.error("Error in updateDeliveries", n, { params: t }), e.groupEnd(), n;
+    }
+  }, R = A(() => {
+    e.group("Requesting web push permission"), e.log("Service worker support check", {
+      supported: "serviceWorker" in navigator,
+      customServiceWorkerPath: a.customServiceWorkerPath
+    }), "serviceWorker" in navigator ? (e.log("Registering service worker"), navigator.serviceWorker.register(a.customServiceWorkerPath).then(async (t) => {
+      e.log("Service worker registered successfully"), y(!1), de().then(async (n) => {
+        e.log("Notification permission result", { permission: n }), n === "granted" ? (e.log("Permission granted, subscribing to push manager"), await t.pushManager.subscribe({
           userVisibleOnly: !0,
-          applicationServerKey: l == null ? void 0 : l.userAccountMetadata.environmentVapidPublicKey
-        }).then(async (n) => {
+          applicationServerKey: p == null ? void 0 : p.userAccountMetadata.environmentVapidPublicKey
+        }).then(async (i) => {
+          e.log("Push subscription successful");
           const r = {
             webPushTokens: [
               {
                 sub: {
-                  endpoint: n.toJSON().endpoint,
-                  keys: n.toJSON().keys
+                  endpoint: i.toJSON().endpoint,
+                  keys: i.toJSON().keys
                 }
               }
             ]
           };
-          await u.identify(r), localStorage.setItem("hideWebPushOptInMessage", "true");
-        }) : s === "denied" && console.log("Permission for notifications was denied");
+          e.log("Identifying user with web push tokens"), await f.identify(r), localStorage.setItem("hideWebPushOptInMessage", "true"), e.log("Web push setup completed successfully"), e.groupEnd();
+        })) : n === "denied" && (e.warn("Permission for notifications was denied"), console.log("Permission for notifications was denied"), e.groupEnd());
       });
     }).catch((t) => {
-      t.code === 18 ? console.error(
+      e.error(
+        "Service worker registration or push subscription failed",
+        t,
+        {
+          errorCode: t.code,
+          customServiceWorkerPath: a.customServiceWorkerPath
+        }
+      ), 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."
@@ -323,62 +587,95 @@ const Z = async (e, c, i, a, f, b, h) => {
         "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);
-    });
+      ) : console.error(t), e.groupEnd();
+    })) : (e.warn("Service worker not supported in this browser"), e.groupEnd());
   }, [
-    u,
-    i.customServiceWorkerPath,
-    l == null ? void 0 : l.userAccountMetadata.environmentVapidPublicKey
+    f,
+    a.customServiceWorkerPath,
+    p == null ? void 0 : p.userAccountMetadata.environmentVapidPublicKey,
+    e
   ]);
-  y(() => {
-    f([]), S(!1), h(void 0), T((/* @__PURE__ */ new Date()).toISOString()), C(!0), O(!0), u.openWebSocket(), u.getPreferences().then((t) => {
-      h(t);
+  E(() => {
+    e.group("Provider initialization effect"), e.log("Resetting state and loading initial data"), h([]), v(!1), l(void 0), P((/* @__PURE__ */ new Date()).toISOString()), x(!0), T(!0), e.log("Opening WebSocket connection"), f.openWebSocket(), e.log("Fetching user preferences"), f.getPreferences().then((t) => {
+      var n, i, r;
+      e.log("Initial preferences loaded", {
+        preferencesCount: ((n = t.preferences) == null ? void 0 : n.length) || 0,
+        notificationsCount: ((i = t.notifications) == null ? void 0 : i.length) || 0,
+        subNotificationsCount: ((r = t.subNotifications) == null ? void 0 : r.length) || 0
+      }), l(t), e.groupEnd();
+    }).catch((t) => {
+      e.error("Failed to fetch initial preferences", t), e.groupEnd();
     });
-  }, [u, O, M]), y(() => {
-    u.getUserAccountMetadata().then((t) => {
-      g(t), F && "Notification" in window && typeof Notification.requestPermission == "function" ? Notification.permission !== "default" && N(!1) : N(t.userAccountMetadata.hasWebPushEnabled);
+  }, [f, T, R, e]), E(() => {
+    e.group("Fetching user account metadata"), f.getUserAccountMetadata().then((t) => {
+      e.log("User account metadata loaded", {
+        hasWebPushEnabled: t.userAccountMetadata.hasWebPushEnabled,
+        environmentVapidPublicKey: t.userAccountMetadata.environmentVapidPublicKey ? "present" : "missing"
+      }), b(t), G && "Notification" in window && typeof Notification.requestPermission == "function" ? (e.log("Browser notification support detected", {
+        permission: Notification.permission
+      }), Notification.permission !== "default" && (e.log(
+        "Setting webPushOptInMessage to false (permission already set)"
+      ), y(!1))) : (e.log(
+        "Browser notification not supported, using server setting",
+        {
+          hasWebPushEnabled: t.userAccountMetadata.hasWebPushEnabled
+        }
+      ), y(t.userAccountMetadata.hasWebPushEnabled)), e.groupEnd();
+    }).catch((t) => {
+      e.error("Failed to fetch user account metadata", t), e.groupEnd();
     });
-  }, [u]), y(() => {
-    v === "AUTOMATIC" && N(
-      localStorage.getItem("hideWebPushOptInMessage") !== "true"
-    );
-  }, [v]), y(() => {
-    L && M();
-  }, [L, M]);
-  const z = {
-    notifications: a,
-    preferences: b,
-    userAccountMetaData: l,
-    webPushOptInMessage: v,
-    loadNotifications: O,
-    markAsOpened: G,
-    markAsArchived: V,
-    markAsUnarchived: K,
-    markAsClicked: B,
-    updateDelivery: _,
-    updateDeliveries: j,
-    getClient: () => u,
-    setWebPushOptInMessage: N,
-    setWebPushOptIn: J
+  }, [f, e]), E(() => {
+    if (e.group("Handling webPushOptInMessage state"), e.log("webPushOptInMessage value", k), k === "AUTOMATIC") {
+      const t = localStorage.getItem("hideWebPushOptInMessage") === "true";
+      e.log("Automatic mode - checking localStorage", {
+        hideMessage: t,
+        shouldShow: !t
+      }), y(!t);
+    }
+    e.groupEnd();
+  }, [k, e]), E(() => {
+    e.group("Handling webPushOptIn state"), e.log("webPushOptIn state", M), M && (e.log("User opted in for web push, requesting permission"), R()), e.groupEnd();
+  }, [M, R, e]);
+  const te = {
+    notifications: c,
+    preferences: I,
+    userAccountMetaData: p,
+    webPushOptInMessage: k,
+    loadNotifications: T,
+    markAsOpened: Y,
+    markAsArchived: _,
+    markAsUnarchived: Z,
+    markAsClicked: X,
+    updateDelivery: ee,
+    updateDeliveries: H,
+    getClient: () => f,
+    setWebPushOptInMessage: y,
+    setWebPushOptIn: Q
   };
-  return /* @__PURE__ */ Q(H.Provider, { value: z, children: e.children });
-}, ie = () => {
-  const e = Y(H);
-  if (!e)
+  return e.log("NotificationAPI Provider rendering", {
+    notificationsCount: (c == null ? void 0 : c.length) || 0,
+    hasPreferences: !!I,
+    hasUserAccountMetaData: !!p,
+    webPushOptInMessage: k,
+    webPushOptIn: M
+  }), /* @__PURE__ */ oe(V.Provider, { value: te, children: o.children });
+}, ce = () => {
+  const o = ie(V);
+  if (!o)
     throw new Error("useMyContext must be used within a MyProvider");
-  return e;
+  return o;
 };
-te.useNotificationAPIContext = ie;
-const ne = async () => {
-  if (F && "Notification" in window && typeof Notification.requestPermission == "function")
+ae.useNotificationAPIContext = ce;
+const de = async () => {
+  if (G && "Notification" in window && typeof Notification.requestPermission == "function")
     try {
       return await Notification.requestPermission();
-    } catch (e) {
-      return console.error("Error requesting notification permission:", e), "default";
+    } catch (o) {
+      return console.error("Error requesting notification permission:", o), "default";
     }
   else
     return console.warn("Web Push Notifications are not supported in this browser."), "default";
 };
 export {
-  te as NotificationAPIProvider
+  ae as NotificationAPIProvider
 };

package/dist/main.d.ts

@@ -2,3 +2,4 @@
 export { NotificationFeed, NotificationPopup, NotificationLauncher, NotificationCounter } from './components/Notifications';
 export { NotificationPreferencesInline, NotificationPreferencesPopup } from './components/Preferences';
 export { NotificationAPIProvider } from './components/Provider';
+export { createDebugLogger, type DebugLogger } from './utils/debug';

package/dist/main.js

@@ -1,16 +1,18 @@
 import { NotificationFeed as r } from "./components/Notifications/NotificationFeed.js";
-import { NotificationPopup as e } from "./components/Notifications/NotificationPopup.js";
+import { NotificationPopup as i } from "./components/Notifications/NotificationPopup.js";
 import { NotificationLauncher as n } from "./components/Notifications/NotificationLauncher.js";
 import { NotificationCounter as c } from "./components/Notifications/NotificationCounter.js";
-import { N } from "./assets/NotificationPreferencesPopup.js";
-import { NotificationPreferencesInline as x } from "./components/Preferences/NotificationPreferencesInline.js";
+import { N as m } from "./assets/NotificationPreferencesPopup.js";
+import { NotificationPreferencesInline as N } from "./components/Preferences/NotificationPreferencesInline.js";
 import { NotificationAPIProvider as u } from "./components/Provider/index.js";
+import { createDebugLogger as s } from "./utils/debug.js";
 export {
   u as NotificationAPIProvider,
   c as NotificationCounter,
   r as NotificationFeed,
   n as NotificationLauncher,
-  e as NotificationPopup,
-  x as NotificationPreferencesInline,
-  N as NotificationPreferencesPopup
+  i as NotificationPopup,
+  N as NotificationPreferencesInline,
+  m as NotificationPreferencesPopup,
+  s as createDebugLogger
 };

package/dist/utils/debug.d.ts

@@ -0,0 +1,26 @@
+export interface DebugLogger {
+    log: (message: string, data?: unknown) => void;
+    warn: (message: string, data?: unknown) => void;
+    error: (message: string, error?: Error | unknown, context?: Record<string, unknown>) => void;
+    group: (label: string) => void;
+    groupEnd: () => void;
+    table: (data: Record<string, unknown> | unknown[]) => void;
+}
+export declare const createDebugLogger: (enabled: boolean) => DebugLogger;
+export declare const formatApiCall: (method: string, endpoint: string, params?: Record<string, unknown>) => {
+    method: string;
+    endpoint: string;
+    params: Record<string, unknown> | undefined;
+    timestamp: string;
+};
+export declare const formatWebSocketEvent: (event: string, data?: unknown) => {
+    event: string;
+    data: unknown;
+    timestamp: string;
+};
+export declare const formatStateChange: (stateName: string, oldValue: unknown, newValue: unknown) => {
+    stateName: string;
+    oldValue: unknown;
+    newValue: unknown;
+    timestamp: string;
+};

package/dist/utils/debug.js

@@ -0,0 +1,61 @@
+var s = Object.defineProperty;
+var a = (t, o, e) => o in t ? s(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e;
+var n = (t, o, e) => a(t, typeof o != "symbol" ? o + "" : o, e);
+class c {
+  log() {
+  }
+  warn() {
+  }
+  error() {
+  }
+  group() {
+  }
+  groupEnd() {
+  }
+  table() {
+  }
+}
+class g {
+  constructor() {
+    n(this, "prefix", "[NotificationAPI Debug]");
+  }
+  log(o, e) {
+    console.log(`${this.prefix} ${o}`, e || "");
+  }
+  warn(o, e) {
+    console.warn(`${this.prefix} ${o}`, e || "");
+  }
+  error(o, e, r) {
+    console.group(`${this.prefix} ERROR: ${o}`), e && console.error("Error:", e), r && console.error("Context:", r), e instanceof Error && e.stack && console.error("Stack trace:", e.stack), console.groupEnd();
+  }
+  group(o) {
+    console.group(`${this.prefix} ${o}`);
+  }
+  groupEnd() {
+    console.groupEnd();
+  }
+  table(o) {
+    console.table(o);
+  }
+}
+const l = (t) => t ? new g() : new c(), p = (t, o, e) => ({
+  method: t,
+  endpoint: o,
+  params: e,
+  timestamp: (/* @__PURE__ */ new Date()).toISOString()
+}), u = (t, o) => ({
+  event: t,
+  data: o,
+  timestamp: (/* @__PURE__ */ new Date()).toISOString()
+}), f = (t, o, e) => ({
+  stateName: t,
+  oldValue: o,
+  newValue: e,
+  timestamp: (/* @__PURE__ */ new Date()).toISOString()
+});
+export {
+  l as createDebugLogger,
+  p as formatApiCall,
+  f as formatStateChange,
+  u as formatWebSocketEvent
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "overrides": {
     "esbuild": "^0.25.0",
@@ -25,7 +25,10 @@
     "format": "prettier --write \"{src,lib}/**/*.{ts,tsx,js,jsx,json,css,md,html}\"",
     "prettier-check": "prettier --check \"{src,lib}/**/*.{ts,tsx,js,jsx,json,css,md,html}\"",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed"
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
@@ -45,9 +48,10 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "faker-js": "^1.0.0",
     "glob": "^10.4.1",
+    "@playwright/test": "^1.48.0",
     "prettier": "^3.3.3",
     "typescript": "^5.2.2",
-    "vite": "^5.4.18",
+    "vite": "^5.4.19",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1"
   },
@@ -63,7 +67,7 @@
     "@fontsource/roboto": "^5.1.1",
     "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
-    "@notificationapi/core": "^0.0.16",
+    "@notificationapi/core": "^0.0.17",
     "javascript-time-ago": "^2.5.10",
     "liquidjs": "^10.14.0",
     "rc-virtual-list": "^3.11.5",