@novu/react 2.0.0-canary.3 → 2.1.0

package/dist/client/index.d.mts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
-import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
+import React$1, { ReactNode } from 'react';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab, RouterPush } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
+import { Novu, NovuOptions, Notification as Notification$1, NovuError, Preference, NotificationFilter } from '@novu/js';
 
 type NotificationsRenderer = (notification: Notification) => React.ReactNode;
 type BellRenderer = (unreadCount: number) => React.ReactNode;
@@ -22,6 +23,7 @@ type BaseProps = {
     appearance?: Appearance;
     localization?: Localization;
     tabs?: Array<Tab>;
+    routerPush?: RouterPush;
 };
 type DefaultProps = BaseProps & DefaultInboxProps & {
     children?: never;
@@ -37,6 +39,7 @@ declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_
 
 type InboxProps = DefaultProps | WithChildrenProps;
 declare const Inbox: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
+declare const InboxChild: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
 
 declare const Preferences: () => react_jsx_runtime.JSX.Element;
 
@@ -48,4 +51,72 @@ type NotificationProps = {
 };
 declare const Notifications: React$1.MemoExoticComponent<(props: NotificationProps) => react_jsx_runtime.JSX.Element>;
 
-export { type BaseProps, Bell, type BellProps, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderer, Preferences, type WithChildrenProps };
+type NovuProviderProps = NovuOptions & {
+    children: ReactNode;
+};
+declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
+declare const useNovu: () => Novu;
+declare const useUnsafeNovu: () => Novu | undefined;
+
+type UseNotificationsProps = {
+    tags?: string[];
+    read?: boolean;
+    archived?: boolean;
+    limit?: number;
+    onSuccess?: (data: Notification$1[]) => void;
+    onError?: (error: NovuError) => void;
+};
+declare const useNotifications: (props?: UseNotificationsProps) => {
+    readAll: () => Promise<{
+        data?: void | undefined;
+        error?: NovuError | undefined;
+    }>;
+    archiveAll: () => Promise<{
+        data?: void | undefined;
+        error?: NovuError | undefined;
+    }>;
+    archiveAllRead: () => Promise<{
+        data?: void | undefined;
+        error?: NovuError | undefined;
+    }>;
+    notifications: Notification$1[] | undefined;
+    error: NovuError | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    refetch: () => Promise<void>;
+    fetchMore: () => Promise<void>;
+    hasMore: boolean;
+};
+
+type UsePreferencesProps = {
+    onSuccess?: (data: Preference[]) => void;
+    onError?: (error: NovuError) => void;
+};
+type UsePreferencesResult = {
+    preferences?: Preference[];
+    error?: NovuError;
+    isLoading: boolean;
+    isFetching: boolean;
+    refetch: () => Promise<void>;
+};
+declare const usePreferences: (props?: UsePreferencesProps) => UsePreferencesResult;
+
+type Count = {
+    count: number;
+    filter: NotificationFilter;
+};
+type UseCountsProps = {
+    filters: NotificationFilter[];
+    onSuccess?: (data: Count[]) => void;
+    onError?: (error: NovuError) => void;
+};
+type UseCountsResult = {
+    counts?: Count[];
+    error?: NovuError;
+    isLoading: boolean;
+    isFetching: boolean;
+    refetch: () => Promise<void>;
+};
+declare const useCounts: (props: UseCountsProps) => UseCountsResult;
+
+export { type BaseProps, Bell, type BellProps, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, InboxChild, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderer, NovuProvider, Preferences, type UseNotificationsProps, type WithChildrenProps, useCounts, useNotifications, useNovu, usePreferences, useUnsafeNovu };

package/dist/client/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
-import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab } from '@novu/js/ui';
+import React$1, { ReactNode } from 'react';
+import { Notification, NotificationClickHandler, NotificationActionClickHandler, Appearance, Localization, Tab, RouterPush } from '@novu/js/ui';
 export { Notification } from '@novu/js/ui';
+import { Novu, NovuOptions, Notification as Notification$1, NovuError, Preference, NotificationFilter } from '@novu/js';
 
 type NotificationsRenderer = (notification: Notification) => React.ReactNode;
 type BellRenderer = (unreadCount: number) => React.ReactNode;
@@ -22,6 +23,7 @@ type BaseProps = {
     appearance?: Appearance;
     localization?: Localization;
     tabs?: Array<Tab>;
+    routerPush?: RouterPush;
 };
 type DefaultProps = BaseProps & DefaultInboxProps & {
     children?: never;
@@ -37,6 +39,7 @@ declare const Bell: React$1.MemoExoticComponent<(props: BellProps) => react_jsx_
 
 type InboxProps = DefaultProps | WithChildrenProps;
 declare const Inbox: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
+declare const InboxChild: React$1.MemoExoticComponent<(props: InboxProps) => react_jsx_runtime.JSX.Element>;
 
 declare const Preferences: () => react_jsx_runtime.JSX.Element;
 
@@ -48,4 +51,72 @@ type NotificationProps = {
 };
 declare const Notifications: React$1.MemoExoticComponent<(props: NotificationProps) => react_jsx_runtime.JSX.Element>;
 
-export { type BaseProps, Bell, type BellProps, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderer, Preferences, type WithChildrenProps };
+type NovuProviderProps = NovuOptions & {
+    children: ReactNode;
+};
+declare const NovuProvider: ({ children, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache, }: NovuProviderProps) => react_jsx_runtime.JSX.Element;
+declare const useNovu: () => Novu;
+declare const useUnsafeNovu: () => Novu | undefined;
+
+type UseNotificationsProps = {
+    tags?: string[];
+    read?: boolean;
+    archived?: boolean;
+    limit?: number;
+    onSuccess?: (data: Notification$1[]) => void;
+    onError?: (error: NovuError) => void;
+};
+declare const useNotifications: (props?: UseNotificationsProps) => {
+    readAll: () => Promise<{
+        data?: void | undefined;
+        error?: NovuError | undefined;
+    }>;
+    archiveAll: () => Promise<{
+        data?: void | undefined;
+        error?: NovuError | undefined;
+    }>;
+    archiveAllRead: () => Promise<{
+        data?: void | undefined;
+        error?: NovuError | undefined;
+    }>;
+    notifications: Notification$1[] | undefined;
+    error: NovuError | undefined;
+    isLoading: boolean;
+    isFetching: boolean;
+    refetch: () => Promise<void>;
+    fetchMore: () => Promise<void>;
+    hasMore: boolean;
+};
+
+type UsePreferencesProps = {
+    onSuccess?: (data: Preference[]) => void;
+    onError?: (error: NovuError) => void;
+};
+type UsePreferencesResult = {
+    preferences?: Preference[];
+    error?: NovuError;
+    isLoading: boolean;
+    isFetching: boolean;
+    refetch: () => Promise<void>;
+};
+declare const usePreferences: (props?: UsePreferencesProps) => UsePreferencesResult;
+
+type Count = {
+    count: number;
+    filter: NotificationFilter;
+};
+type UseCountsProps = {
+    filters: NotificationFilter[];
+    onSuccess?: (data: Count[]) => void;
+    onError?: (error: NovuError) => void;
+};
+type UseCountsResult = {
+    counts?: Count[];
+    error?: NovuError;
+    isLoading: boolean;
+    isFetching: boolean;
+    refetch: () => Promise<void>;
+};
+declare const useCounts: (props: UseCountsProps) => UseCountsResult;
+
+export { type BaseProps, Bell, type BellProps, type BellRenderer, type DefaultInboxProps, type DefaultProps, Inbox, InboxChild, type InboxProps, type NotificationProps, Notifications, type NotificationsRenderer, NovuProvider, Preferences, type UseNotificationsProps, type WithChildrenProps, useCounts, useNotifications, useNovu, usePreferences, useUnsafeNovu };

package/dist/client/index.js

@@ -32,8 +32,15 @@ var src_exports = {};
 __export(src_exports, {
   Bell: () => Bell,
   Inbox: () => Inbox,
+  InboxChild: () => InboxChild,
   Notifications: () => Notifications,
-  Preferences: () => Preferences
+  NovuProvider: () => NovuProvider,
+  Preferences: () => Preferences,
+  useCounts: () => useCounts,
+  useNotifications: () => useNotifications,
+  useNovu: () => useNovu,
+  usePreferences: () => usePreferences,
+  useUnsafeNovu: () => useUnsafeNovu
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -119,7 +126,7 @@ var import_react5 = require("react");
 var import_react_dom = __toESM(require("react-dom"));
 var import_ui = require("@novu/js/ui");
 
-// src/hooks/useDataRef.ts
+// src/hooks/internal/useDataRef.ts
 var import_react4 = require("react");
 var useDataRef = (data) => {
   const ref = (0, import_react4.useRef)(data);
@@ -129,8 +136,8 @@ var useDataRef = (data) => {
 
 // src/components/Renderer.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Renderer = ({ options, children }) => {
-  const optionsRef = useDataRef(options);
+var Renderer = ({ options, novu, children }) => {
+  const optionsRef = useDataRef({ ...options, novu });
   const [novuUI, setNovuUI] = (0, import_react5.useState)();
   const [mountedElements, setMountedElements] = (0, import_react5.useState)(/* @__PURE__ */ new Map());
   const mountElement = (0, import_react5.useCallback)(
@@ -151,10 +158,10 @@ var Renderer = ({ options, children }) => {
     [setMountedElements]
   );
   (0, import_react5.useEffect)(() => {
-    const novu = new import_ui.NovuUI(optionsRef.current);
-    setNovuUI(novu);
+    const novu2 = new import_ui.NovuUI(optionsRef.current);
+    setNovuUI(novu2);
     return () => {
-      novu.unmount();
+      novu2.unmount();
     };
   }, []);
   (0, import_react5.useEffect)(() => {
@@ -165,6 +172,7 @@ var Renderer = ({ options, children }) => {
     novuUI.updateLocalization(options.localization);
     novuUI.updateTabs(options.tabs);
     novuUI.updateOptions(options.options);
+    novuUI.updateRouterPush(options.routerPush);
   }, [options]);
   if (!novuUI) {
     return null;
@@ -202,20 +210,50 @@ var DefaultInbox = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Mounter, { mount });
 };
 var Inbox = import_react6.default.memo((props) => {
-  const { localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
+  const { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl } = props;
+  const novu = useUnsafeNovu();
+  if (novu) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InboxChild, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    NovuProvider,
+    {
+      applicationIdentifier,
+      subscriberId,
+      subscriberHash,
+      backendUrl,
+      socketUrl,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InboxChild, { ...props })
+    }
+  );
+});
+var InboxChild = import_react6.default.memo((props) => {
+  const {
+    localization,
+    appearance,
+    tabs,
+    routerPush,
+    applicationIdentifier,
+    subscriberId,
+    subscriberHash,
+    backendUrl,
+    socketUrl
+  } = props;
+  const novu = useNovu();
   const options = (0, import_react6.useMemo)(() => {
     return {
       localization,
       appearance,
       tabs,
+      routerPush,
       options: { applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl }
     };
   }, [localization, appearance, tabs, applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl]);
   if (isWithChildrenProps(props)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, novu, children: props.children });
   }
   const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { options, novu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     DefaultInbox,
     {
       open,
@@ -268,4 +306,325 @@ var Notifications = import_react8.default.memo((props) => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Mounter, { mount });
 });
+
+// src/hooks/NovuProvider.tsx
+var import_js = require("@novu/js");
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var NovuContext = (0, import_react9.createContext)(void 0);
+var NovuProvider = ({
+  children,
+  applicationIdentifier,
+  subscriberId,
+  subscriberHash,
+  backendUrl,
+  socketUrl,
+  useCache
+}) => {
+  const novu = (0, import_react9.useMemo)(
+    () => new import_js.Novu({ applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache }),
+    [applicationIdentifier, subscriberId, subscriberHash, backendUrl, socketUrl, useCache]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NovuContext.Provider, { value: novu, children });
+};
+var useNovu = () => {
+  const context = (0, import_react9.useContext)(NovuContext);
+  if (!context) {
+    throw new Error("useNovu must be used within a <NovuProvider />");
+  }
+  return context;
+};
+var useUnsafeNovu = () => {
+  const context = (0, import_react9.useContext)(NovuContext);
+  return context;
+};
+
+// src/hooks/useNotifications.ts
+var import_react10 = require("react");
+var import_js2 = require("@novu/js");
+var useNotifications = (props) => {
+  const { tags, read, archived = false, limit, onSuccess, onError } = props || {};
+  const filterRef = (0, import_react10.useRef)(void 0);
+  const { notifications, on, off } = useNovu();
+  const [data, setData] = (0, import_react10.useState)();
+  const [error, setError] = (0, import_react10.useState)();
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react10.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react10.useState)(false);
+  const length = data?.length;
+  const after = length ? data[length - 1].id : void 0;
+  const sync = (event) => {
+    if (!event.data || filterRef.current && !(0, import_js2.isSameFilter)(filterRef.current, event.data.filter)) {
+      return;
+    }
+    setData(event.data.notifications);
+    setHasMore(event.data.hasMore);
+  };
+  (0, import_react10.useEffect)(() => {
+    on("notifications.list.updated", sync);
+    return () => {
+      off("notifications.list.updated", sync);
+    };
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    const newFilter = { tags, read, archived };
+    if (filterRef.current && (0, import_js2.isSameFilter)(filterRef.current, newFilter)) {
+      return;
+    }
+    notifications.clearCache({ filter: filterRef.current });
+    filterRef.current = newFilter;
+    fetchNotifications({ refetch: true });
+  }, [tags, read, archived]);
+  const fetchNotifications = async (options) => {
+    if (options?.refetch) {
+      setError(void 0);
+      setIsLoading(true);
+      setIsFetching(false);
+    }
+    setIsFetching(true);
+    const response = await notifications.list({
+      tags,
+      read,
+      archived,
+      limit,
+      after: options?.refetch ? void 0 : after
+    });
+    if (response.error) {
+      setError(response.error);
+      onError?.(response.error);
+    } else {
+      onSuccess?.(response.data.notifications);
+      setData(response.data.notifications);
+      setHasMore(response.data.hasMore);
+    }
+    setIsLoading(false);
+    setIsFetching(false);
+  };
+  const refetch = () => {
+    notifications.clearCache({ filter: { tags, read, archived } });
+    return fetchNotifications({ refetch: true });
+  };
+  const fetchMore = async () => {
+    if (!hasMore || isFetching) return;
+    return fetchNotifications();
+  };
+  const readAll = async () => {
+    return await notifications.readAll({ tags });
+  };
+  const archiveAll = async () => {
+    return await notifications.archiveAll({ tags });
+  };
+  const archiveAllRead = async () => {
+    return await notifications.archiveAllRead({ tags });
+  };
+  return {
+    readAll,
+    archiveAll,
+    archiveAllRead,
+    notifications: data,
+    error,
+    isLoading,
+    isFetching,
+    refetch,
+    fetchMore,
+    hasMore
+  };
+};
+
+// src/hooks/usePreferences.ts
+var import_react11 = require("react");
+var usePreferences = (props) => {
+  const { onSuccess, onError } = props || {};
+  const [data, setData] = (0, import_react11.useState)();
+  const { preferences, on, off } = useNovu();
+  const [error, setError] = (0, import_react11.useState)();
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react11.useState)(false);
+  const sync = (event) => {
+    if (!event.data) {
+      return;
+    }
+    setData(event.data);
+  };
+  (0, import_react11.useEffect)(() => {
+    fetchPreferences();
+    on("preferences.list.updated", sync);
+    on("preferences.list.pending", sync);
+    on("preferences.list.resolved", sync);
+    return () => {
+      off("preferences.list.updated", sync);
+      off("preferences.list.pending", sync);
+      off("preferences.list.resolved", sync);
+    };
+  }, []);
+  const fetchPreferences = async () => {
+    setIsFetching(true);
+    const response = await preferences.list();
+    if (response.error) {
+      setError(response.error);
+      onError?.(response.error);
+    } else {
+      onSuccess?.(response.data);
+    }
+    setIsLoading(false);
+    setIsFetching(false);
+  };
+  const refetch = () => {
+    preferences.cache.clearAll();
+    return fetchPreferences();
+  };
+  return {
+    preferences: data,
+    error,
+    isLoading,
+    isFetching,
+    refetch
+  };
+};
+
+// src/hooks/useCounts.ts
+var import_react14 = require("react");
+var import_js3 = require("@novu/js");
+
+// src/hooks/internal/useWebsocketEvent.ts
+var import_react13 = require("react");
+
+// src/utils/requestLock.ts
+function requestLock(id, cb) {
+  if (!("locks" in navigator)) {
+    cb(id);
+    return () => {
+    };
+  }
+  let isFulfilled = false;
+  let promiseResolve;
+  const promise = new Promise((resolve) => {
+    promiseResolve = resolve;
+  });
+  navigator.locks.request(id, () => {
+    if (!isFulfilled) {
+      cb(id);
+    }
+    return promise;
+  });
+  return () => {
+    isFulfilled = true;
+    promiseResolve();
+  };
+}
+
+// src/hooks/internal/useBrowserTabsChannel.ts
+var import_react12 = require("react");
+var useBrowserTabsChannel = ({
+  channelName,
+  onMessage
+}) => {
+  const [tabsChannel] = (0, import_react12.useState)(
+    typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(channelName) : void 0
+  );
+  const postMessage = (data) => {
+    tabsChannel?.postMessage(data);
+  };
+  (0, import_react12.useEffect)(() => {
+    const listener = (event) => {
+      onMessage(event.data);
+    };
+    tabsChannel?.addEventListener("message", listener);
+    return () => {
+      tabsChannel?.removeEventListener("message", listener);
+    };
+  }, []);
+  return { postMessage };
+};
+
+// src/hooks/internal/useWebsocketEvent.ts
+var useWebSocketEvent = ({
+  event: webSocketEvent,
+  eventHandler: onMessage
+}) => {
+  const novu = useNovu();
+  const { postMessage } = useBrowserTabsChannel({ channelName: `nv.${webSocketEvent}`, onMessage });
+  const updateReadCount = (data) => {
+    onMessage(data);
+    postMessage(data);
+  };
+  (0, import_react13.useEffect)(() => {
+    const resolveLock = requestLock(`nv.${webSocketEvent}`, () => {
+      novu.on(webSocketEvent, updateReadCount);
+    });
+    return () => {
+      novu.off(webSocketEvent, updateReadCount);
+      resolveLock();
+    };
+  }, []);
+};
+
+// src/hooks/useCounts.ts
+var useCounts = (props) => {
+  const { filters, onSuccess, onError } = props;
+  const { notifications } = useNovu();
+  const [error, setError] = (0, import_react14.useState)();
+  const [counts, setCounts] = (0, import_react14.useState)();
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react14.useState)(false);
+  const sync = async (notification) => {
+    const existingCounts = counts ?? new Array(filters.length).fill(void 0);
+    let countFiltersToFetch = [];
+    if (notification) {
+      for (let i = 0; i < existingCounts.length; i++) {
+        const filter = filters[i];
+        if ((0, import_js3.areTagsEqual)(filter.tags, notification.tags)) {
+          countFiltersToFetch.push(filter);
+        }
+      }
+    } else {
+      countFiltersToFetch = filters;
+    }
+    if (countFiltersToFetch.length === 0) {
+      return;
+    }
+    setIsFetching(true);
+    const countsRes = await notifications.count({ filters: countFiltersToFetch });
+    setIsFetching(false);
+    setIsLoading(false);
+    if (countsRes.error) {
+      setError(countsRes.error);
+      onError?.(countsRes.error);
+      return;
+    }
+    const data = countsRes.data;
+    onSuccess?.(data.counts);
+    setCounts((oldCounts) => {
+      const newCounts = [];
+      const countsReceived = data.counts;
+      for (let i = 0; i < existingCounts.length; i++) {
+        const countReceived = countsReceived.find((c) => (0, import_js3.areTagsEqual)(c.filter.tags, existingCounts[i]?.filter.tags));
+        newCounts.push(countReceived || oldCounts[i]);
+      }
+      return newCounts;
+    });
+  };
+  useWebSocketEvent({
+    event: "notifications.notification_received",
+    eventHandler: (data) => {
+      sync(data.result);
+    }
+  });
+  useWebSocketEvent({
+    event: "notifications.unread_count_changed",
+    eventHandler: () => {
+      sync();
+    }
+  });
+  (0, import_react14.useEffect)(() => {
+    setError(void 0);
+    setIsLoading(true);
+    setIsFetching(false);
+    sync();
+  }, [JSON.stringify(filters)]);
+  const refetch = async () => {
+    await sync();
+  };
+  return { counts, error, refetch, isLoading, isFetching };
+};
 //# sourceMappingURL=index.js.map