@notificationapi/react 0.0.12 → 0.0.14

package/dist/assets/Notification.js

@@ -4492,7 +4492,7 @@ const pu = Un.div`
   &:hover .notification-archive-button {
     visibility: ${(e) => e.$archived ? "hidden" : "visible"};
   }
-`, wu = (e) => /* @__PURE__ */ lt(
+`, wu = (e) => e.renderer ? e.renderer(e.notification) : /* @__PURE__ */ lt(
   pu,
   {
     $redirect: !!e.notification.redirectURL,

package/dist/components/Notifications/Inbox.d.ts

@@ -1,17 +1,18 @@
 import { ImageShape } from './Notification';
 import { NotificationPopupProps } from './NotificationPopup';
+import { InAppNotification } from '../../interface';
 
 export declare enum Pagination {
     INFINITE_SCROLL = "infinite_scroll",
     PAGINATED = "paginated"
 }
-type InboxProps = {
+export type InboxProps = {
     pagination: keyof typeof Pagination;
     maxHeight: number;
     filter: NotificationPopupProps["filter"];
     imageShape: keyof typeof ImageShape;
     pageSize: number;
     pagePosition: NotificationPopupProps["pagePosition"];
+    notificationRenderer: ((notification: InAppNotification) => JSX.Element) | undefined;
 };
 export declare const Inbox: React.FC<InboxProps>;
-export {};

package/dist/components/Notifications/Notification.d.ts

@@ -4,9 +4,11 @@ export declare enum ImageShape {
     square = "square",
     circle = "circle"
 }
-export declare const Notification: (props: {
+export type NotificationProps = {
     notification: InAppNotification;
     markAsArchived: (ids: string[] | "ALL") => void;
     markAsClicked: (id: string) => void;
     imageShape: keyof typeof ImageShape;
-}) => JSX.Element;
+    renderer?: (notification: InAppNotification) => JSX.Element;
+};
+export declare const Notification: (props: NotificationProps) => JSX.Element;

package/dist/components/Notifications/NotificationCounter.d.ts

@@ -2,6 +2,6 @@ import { PropsWithChildren } from 'react';
 import { UnreadBadgeProps } from './UnreadBadge';
 
 export type NotificationCounterProps = Omit<UnreadBadgeProps, "count"> & {
-    counting?: UnreadBadgeProps["count"];
+    count?: UnreadBadgeProps["count"];
 };
 export declare const NotificationCounter: React.FC<PropsWithChildren<NotificationCounterProps>>;

package/dist/components/Notifications/NotificationCounter.js

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
 import { UnreadBadge as r } from "./UnreadBadge.js";
-const N = (o) => {
-  const t = o.counting || "COUNT_UNOPENED_NOTIFICATIONS";
+const e = (o) => {
+  const t = o.count || "COUNT_UNOPENED_NOTIFICATIONS";
   return /* @__PURE__ */ n(r, { ...o, count: t });
 };
 export {
-  N as NotificationCounter
+  e as NotificationCounter
 };

package/dist/components/Notifications/NotificationFeed.d.ts

@@ -1,5 +1,5 @@
 import { Pagination } from './Inbox';
-import { ImageShape } from './Notification';
+import { ImageShape, NotificationProps } from './Notification';
 import { Filter } from './NotificationPopup';
 import { InAppNotification } from '../../interface';
 
@@ -11,5 +11,8 @@ export type NotificationFeedProps = {
     infiniteScrollHeight?: number;
     style?: React.CSSProperties;
     filter?: keyof typeof Filter | ((n: InAppNotification) => boolean);
+    renderers?: {
+        notification?: NotificationProps["renderer"];
+    };
 };
 export declare const NotificationFeed: React.FC<NotificationFeedProps>;

package/dist/components/Notifications/NotificationFeed.js

@@ -1,24 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useContext as o, useEffect as r } from "react";
-import { F as g, I as l } from "../../assets/Inbox.js";
-import { NotificationAPIContext as f } from "../Provider/index.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as r, useEffect as g } from "react";
+import { F as f, I as l } from "../../assets/Inbox.js";
+import { NotificationAPIContext as c } from "../Provider/index.js";
 const h = (i) => {
+  var n;
   const e = {
     imageShape: i.imageShape || "circle",
     pagination: i.pagination || "INFINITE_SCROLL",
     pageSize: i.pageSize || 10,
     pagePosition: i.pagePosition || "top",
     style: i.style || {},
-    filter: i.filter || g.ALL,
-    infiniteScrollHeight: i.infiniteScrollHeight ? i.infiniteScrollHeight : window.innerHeight * 0.75
-  }, t = o(f);
-  return t ? (r(() => {
+    filter: i.filter || f.ALL,
+    infiniteScrollHeight: i.infiniteScrollHeight ? i.infiniteScrollHeight : window.innerHeight * 0.75,
+    renderers: {
+      notification: (n = i.renderers) == null ? void 0 : n.notification
+    }
+  }, t = r(c);
+  return t ? (g(() => {
     t.markAsOpened();
     const a = setInterval(() => {
       t.markAsOpened();
     }, 5e3);
     return () => clearInterval(a);
-  }, []), /* @__PURE__ */ n(
+  }, []), /* @__PURE__ */ o(
     "div",
     {
       style: {
@@ -27,7 +31,7 @@ const h = (i) => {
         background: "#fff",
         ...i.style
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ o(
         l,
         {
           maxHeight: e.infiniteScrollHeight,
@@ -35,7 +39,8 @@ const h = (i) => {
           filter: e.filter,
           imageShape: e.imageShape,
           pageSize: e.pageSize,
-          pagePosition: e.pagePosition
+          pagePosition: e.pagePosition,
+          notificationRenderer: e.renderers.notification
         }
       )
     }

package/dist/components/Notifications/NotificationLauncher.js

@@ -1,13 +1,14 @@
 import { jsx as i } from "react/jsx-runtime";
-import { I as a } from "../../assets/Inbox.js";
+import { I as r } from "../../assets/Inbox.js";
 import { UnreadBadge as f } from "./UnreadBadge.js";
-import { useContext as r } from "react";
+import { useContext as d } from "react";
 import { NotificationAPIContext as g } from "../Provider/index.js";
 import { P as u } from "../../assets/index.js";
-import { B as h } from "../../assets/button.js";
-import { R as d } from "../../assets/BellOutlined.js";
+import { B as c } from "../../assets/button.js";
+import { R as h } from "../../assets/BellOutlined.js";
 var l = /* @__PURE__ */ ((t) => (t.TOP_LEFT = "top-left", t.TOP_RIGHT = "top-right", t.BOTTOM_LEFT = "bottom-left", t.BOTTOM_RIGHT = "bottom-right", t))(l || {});
-const S = (t) => {
+const y = (t) => {
+  var n;
   const e = {
     buttonWidth: t.buttonWidth || 40,
     buttonHeight: t.buttonHeight || 40,
@@ -27,8 +28,11 @@ const S = (t) => {
     offsetY: t.offsetY || 16,
     position: t.position || "BOTTOM_RIGHT",
     count: t.count || "COUNT_UNOPENED_NOTIFICATIONS",
-    filter: t.filter || "ALL"
-  }, o = r(g);
+    filter: t.filter || "ALL",
+    renderers: {
+      notification: (n = t.renderers) == null ? void 0 : n.notification
+    }
+  }, o = d(g);
   return o ? /* @__PURE__ */ i(
     "div",
     {
@@ -44,14 +48,15 @@ const S = (t) => {
           autoAdjustOverflow: !0,
           trigger: "click",
           content: /* @__PURE__ */ i(
-            a,
+            r,
             {
               maxHeight: 500,
               pagination: e.pagination,
               filter: e.filter,
               imageShape: e.imageShape,
               pageSize: e.pageSize,
-              pagePosition: e.pagePosition
+              pagePosition: e.pagePosition,
+              notificationRenderer: e.renderers.notification
             }
           ),
           arrow: !1,
@@ -59,8 +64,8 @@ const S = (t) => {
             padding: "0 16px",
             minWidth: e.popupWidth
           },
-          onOpenChange: (n) => {
-            n && o.markAsOpened();
+          onOpenChange: (a) => {
+            a && o.markAsOpened();
           },
           children: /* @__PURE__ */ i(
             "div",
@@ -78,10 +83,10 @@ const S = (t) => {
                   },
                   count: e.count,
                   children: /* @__PURE__ */ i(
-                    h,
+                    c,
                     {
                       icon: /* @__PURE__ */ i(
-                        d,
+                        h,
                         {
                           style: {
                             fontSize: e.buttonIconSize
@@ -106,6 +111,6 @@ const S = (t) => {
   ) : null;
 };
 export {
-  S as NotificationLauncher,
+  y as NotificationLauncher,
   l as Position
 };

package/dist/components/Notifications/NotificationPopup.d.ts

@@ -1,6 +1,6 @@
 import { Pagination } from './Inbox';
 import { UnreadBadgeProps } from './UnreadBadge';
-import { ImageShape } from './Notification';
+import { ImageShape, NotificationProps } from './Notification';
 import { InAppNotification } from '../../interface';
 
 export declare enum Filter {
@@ -21,5 +21,8 @@ export type NotificationPopupProps = {
     unreadBadgeProps?: UnreadBadgeProps;
     count?: UnreadBadgeProps["count"];
     filter?: keyof typeof Filter | ((n: InAppNotification) => boolean);
+    renderers?: {
+        notification?: NotificationProps["renderer"];
+    };
 };
 export declare const NotificationPopup: React.FC<NotificationPopupProps>;

package/dist/components/Notifications/UnreadBadge.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { NotificationPopupProps } from './NotificationPopup';
+import { InAppNotification } from '../../interface';
 
 export type UnreadBadgeProps = {
     color?: "blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "lime" | "gold" | undefined;
@@ -8,7 +9,7 @@ export type UnreadBadgeProps = {
     showZero?: boolean;
     size?: "default" | "small";
     style?: React.CSSProperties;
-    count?: keyof typeof COUNT_TYPE | ((notification: any) => boolean);
+    count?: keyof typeof COUNT_TYPE | ((notification: InAppNotification) => boolean);
     filter?: NotificationPopupProps["filter"];
 };
 export declare enum COUNT_TYPE {

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

@@ -1,15 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { InAppNotification } from '../../interface';
 
-type Props = {
-    clientId: string;
-    userId: string;
-    hashedUserId?: string;
-    apiURL?: string;
-    wsURL?: string;
-    initialLoadMaxCount?: number;
-    initialLoadMaxAge?: Date;
-};
 export declare const NOTIFICATION_ACTIONS: {
     opened: string;
     clicked: string;
@@ -34,7 +25,7 @@ export declare enum DeliveryOptions {
     WEEKLY = "weekly",
     MONTHLY = "monthly"
 }
-export interface Notification {
+export interface NotificationConfig {
     envId: string;
     notificationId: string;
     title: string;
@@ -91,7 +82,7 @@ export interface Preferences {
         notificationId: string;
         title: string;
         channels: Channels[];
-        options: Notification["options"];
+        options: NotificationConfig["options"];
     }[];
     subNotifications: {
         notificationId: string;
@@ -109,5 +100,17 @@ export type Context = {
     updateDelivery: (notificationId: string, channel: Channels, delivery: DeliveryOptions, subNotificationId?: string) => void;
 };
 export declare const NotificationAPIContext: import('react').Context<Context | undefined>;
-export declare const NotificationAPIProvider: React.FunctionComponent<PropsWithChildren<Props>>;
+type Props = {
+    clientId: string;
+    userId: string;
+    hashedUserId?: string;
+    apiURL?: string;
+    wsURL?: string;
+    initialLoadMaxCount?: number;
+    initialLoadMaxAge?: Date;
+};
+export declare const NotificationAPIProvider: React.FunctionComponent<PropsWithChildren<Props>> & {
+    useNotificationAPIContext: typeof useNotificationAPIContext;
+};
+declare const useNotificationAPIContext: () => Context;
 export {};

package/dist/components/Provider/index.js

@@ -1,7 +1,7 @@
-import { jsx as _ } from "react/jsx-runtime";
-import { createContext as x, useState as f, useEffect as B } from "react";
-import { api as r } from "../../api.js";
-const j = {
+import { jsx as W } from "react/jsx-runtime";
+import { createContext as _, useState as f, useEffect as y, useContext as v } from "react";
+import { api as s } from "../../api.js";
+const q = {
   opened: "opened",
   clicked: "clicked",
   archived: "archived",
@@ -9,10 +9,10 @@ const j = {
   actioned1: "actioned1",
   actioned2: "actioned2"
 };
-var $ = /* @__PURE__ */ ((e) => (e.EMAIL = "EMAIL", e.INAPP_WEB = "INAPP_WEB", e.SMS = "SMS", e.CALL = "CALL", e.PUSH = "PUSH", e.WEB_PUSH = "WEB_PUSH", e))($ || {}), v = /* @__PURE__ */ ((e) => (e.OFF = "off", e.INSTANT = "instant", e.HOURLY = "hourly", e.DAILY = "daily", e.WEEKLY = "weekly", e.MONTHLY = "monthly", e))(v || {});
-const y = x(
+var B = /* @__PURE__ */ ((e) => (e.EMAIL = "EMAIL", e.INAPP_WEB = "INAPP_WEB", e.SMS = "SMS", e.CALL = "CALL", e.PUSH = "PUSH", e.WEB_PUSH = "WEB_PUSH", e))(B || {}), $ = /* @__PURE__ */ ((e) => (e.OFF = "off", e.INSTANT = "instant", e.HOURLY = "hourly", e.DAILY = "daily", e.WEEKLY = "weekly", e.MONTHLY = "monthly", e))($ || {});
+const g = _(
   void 0
-), J = (e) => {
+), b = (e) => {
   const c = {
     ...{
       apiURL: "https://api.notificationapi.com",
@@ -21,51 +21,51 @@ const y = x(
       initialLoadMaxAge: new Date((/* @__PURE__ */ new Date()).setMonth((/* @__PURE__ */ new Date()).getMonth() - 3))
     },
     ...e
-  }, [s, u] = f(), [P, S] = f(), [U, w] = f(!1), [N, E] = f((/* @__PURE__ */ new Date()).toISOString()), [m, M] = f(!0), g = (a) => {
+  }, [d, u] = f(), [N, w] = f(), [U, S] = f(!1), [E, M] = f((/* @__PURE__ */ new Date()).toISOString()), [m, T] = f(!0), A = (o) => {
     const n = (/* @__PURE__ */ new Date()).toISOString();
-    u((t) => (a = a.filter((i) => !(i.expDate && new Date(i.expDate * 1e3).toISOString() > n || i.date > n)), t ? [
-      ...a.filter((i) => !t.find((o) => o.id === i.id)),
+    u((t) => (o = o.filter((i) => !(i.expDate && new Date(i.expDate * 1e3).toISOString() > n || i.date > n)), t ? [
+      ...o.filter((i) => !t.find((a) => a.id === i.id)),
       ...t
-    ] : a));
-  }, T = async (a, n) => (await r(
+    ] : o));
+  }, k = async (o, n) => (await s(
     c.apiURL,
     "GET",
-    `notifications/INAPP_WEB?count=${a}&before=${n}`,
+    `notifications/INAPP_WEB?count=${o}&before=${n}`,
     e.clientId,
     e.userId,
     e.hashedUserId
-  )).notifications, k = async (a, n, t) => {
-    let i = [], o = a, d = !0, h = !0;
+  )).notifications, x = async (o, n, t) => {
+    let i = [], a = o, r = !0, h = !0;
     for (; h; ) {
-      const L = (await T(
+      const L = (await k(
         n,
-        new Date(o).getTime()
+        new Date(a).getTime()
       )).filter(
         (I) => !i.find((l) => l.id === I.id)
       );
-      o = L.reduce(
+      a = L.reduce(
         (I, l) => I < l.date ? I : l.date,
-        a
-      ), i = [...i, ...L], d = L.length > 0, h = !0, (!d || i.length >= n || t && o < t) && (h = !1);
+        o
+      ), i = [...i, ...L], r = L.length > 0, h = !0, (!r || i.length >= n || t && a < t) && (h = !1);
     }
     return {
       notifications: i,
-      couldLoadMore: d,
-      oldestReceived: o
+      couldLoadMore: r,
+      oldestReceived: a
     };
-  }, A = async (a) => {
+  }, P = async (o) => {
     if (!m || U)
       return;
-    w(!0);
-    const n = await k(
-      N,
-      a ? c.initialLoadMaxCount : 1e3,
-      a ? c.initialLoadMaxAge.toISOString() : void 0
+    S(!0);
+    const n = await x(
+      E,
+      o ? c.initialLoadMaxCount : 1e3,
+      o ? c.initialLoadMaxAge.toISOString() : void 0
     );
-    E(n.oldestReceived), M(n.couldLoadMore), g(n.notifications), w(!1);
-  }, R = async (a) => {
+    M(n.oldestReceived), T(n.couldLoadMore), A(n.notifications), S(!1);
+  }, R = async (o) => {
     const n = (/* @__PURE__ */ new Date()).toISOString();
-    r(
+    s(
       c.apiURL,
       "PATCH",
       "notifications/INAPP_WEB",
@@ -73,20 +73,20 @@ const y = x(
       e.userId,
       e.hashedUserId,
       {
-        trackingIds: [a],
+        trackingIds: [o],
         clicked: n
       }
     ), u((t) => {
       if (!t)
         return [];
-      const i = [...t], o = i.find((d) => d.id === a);
-      return o && (o.clicked = n), i;
+      const i = [...t], a = i.find((r) => r.id === o);
+      return a && (a.clicked = n), i;
     });
-  }, O = async () => {
-    if (!s)
+  }, C = async () => {
+    if (!d)
       return;
-    const a = (/* @__PURE__ */ new Date()).toISOString(), n = s.filter((t) => !t.opened || !t.seen).map((t) => t.id);
-    n.length !== 0 && (r(
+    const o = (/* @__PURE__ */ new Date()).toISOString(), n = d.filter((t) => !t.opened || !t.seen).map((t) => t.id);
+    n.length !== 0 && (s(
       c.apiURL,
       "PATCH",
       "notifications/INAPP_WEB",
@@ -95,21 +95,21 @@ const y = x(
       e.hashedUserId,
       {
         trackingIds: n,
-        opened: a
+        opened: o
       }
     ), u((t) => {
       if (!t)
         return [];
       const i = [...t];
-      return i.filter((o) => n.includes(o.id)).forEach((o) => {
-        o.opened = a, o.seen = !0;
+      return i.filter((a) => n.includes(a.id)).forEach((a) => {
+        a.opened = o, a.seen = !0;
       }), i;
     }));
-  }, D = async (a) => {
-    if (!s)
+  }, O = async (o) => {
+    if (!d)
       return;
-    const n = (/* @__PURE__ */ new Date()).toISOString(), t = s.filter((i) => !i.archived && (a === "ALL" || a.includes(i.id))).map((i) => i.id);
-    t.length !== 0 && (r(
+    const n = (/* @__PURE__ */ new Date()).toISOString(), t = d.filter((i) => !i.archived && (o === "ALL" || o.includes(i.id))).map((i) => i.id);
+    t.length !== 0 && (s(
       c.apiURL,
       "PATCH",
       "notifications/INAPP_WEB",
@@ -123,13 +123,13 @@ const y = x(
     ), u((i) => {
       if (!i)
         return [];
-      const o = [...i];
-      return o.filter((d) => t.includes(d.id)).forEach((d) => {
-        d.archived = n;
-      }), o;
+      const a = [...i];
+      return a.filter((r) => t.includes(r.id)).forEach((r) => {
+        r.archived = n;
+      }), a;
     }));
-  }, H = (a, n, t, i) => {
-    r(
+  }, D = (o, n, t, i) => {
+    s(
       c.apiURL,
       "POST",
       "preferences",
@@ -138,34 +138,34 @@ const y = x(
       e.hashedUserId,
       [
         {
-          notificationId: a,
+          notificationId: o,
           subNotificationId: i,
           channel: n,
           delivery: t
         }
       ]
     ).then(() => {
-      r(
+      s(
         c.apiURL,
         "GET",
         "preferences",
         e.clientId,
         e.userId,
         e.hashedUserId
-      ).then((o) => {
-        S(o);
+      ).then((a) => {
+        w(a);
       });
     });
   };
-  B(() => {
-    A(!0);
-    const a = new WebSocket(
+  y(() => {
+    P(!0);
+    const o = new WebSocket(
       c.hashedUserId ? `${c.wsURL}?userId=${c.userId}&envId=${c.clientId}&userIdHash=${c.hashedUserId}` : `${c.wsURL}?userId=${c.userId}&envId=${c.clientId}`
     );
-    a.onmessage = (n) => {
+    o.onmessage = (n) => {
       const t = JSON.parse(n.data);
-      !t || !t.route || t.route === "inapp_web/new_notifications" && g(t.payload.notifications);
-    }, r(
+      !t || !t.route || t.route === "inapp_web/new_notifications" && A(t.payload.notifications);
+    }, s(
       c.apiURL,
       "GET",
       "preferences",
@@ -173,24 +173,30 @@ const y = x(
       e.userId,
       e.hashedUserId
     ).then((n) => {
-      S(n);
+      w(n);
     });
   }, []);
-  const W = {
-    notifications: s,
-    preferences: P,
-    loadNotifications: A,
-    markAsOpened: O,
-    markAsArchived: D,
+  const H = {
+    notifications: d,
+    preferences: N,
+    loadNotifications: P,
+    markAsOpened: C,
+    markAsArchived: O,
     markAsClicked: R,
-    updateDelivery: H
+    updateDelivery: D
   };
-  return /* @__PURE__ */ _(y.Provider, { value: W, children: e.children });
+  return /* @__PURE__ */ W(g.Provider, { value: H, children: e.children });
+}, Y = () => {
+  const e = v(g);
+  if (!e)
+    throw new Error("useMyContext must be used within a MyProvider");
+  return e;
 };
+b.useNotificationAPIContext = Y;
 export {
-  $ as Channels,
-  v as DeliveryOptions,
-  j as NOTIFICATION_ACTIONS,
-  y as NotificationAPIContext,
-  J as NotificationAPIProvider
+  B as Channels,
+  $ as DeliveryOptions,
+  q as NOTIFICATION_ACTIONS,
+  g as NotificationAPIContext,
+  b as NotificationAPIProvider
 };

package/dist/interface.d.ts

@@ -1,5 +1,6 @@
 export interface InAppNotification {
     id: string;
+    notificationId: string;
     seen: boolean;
     title: string;
     redirectURL?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notificationapi/react",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "scripts": {
     "dev": "vite",