API Reference

interface INovuProviderProps {
  backendUrl?: string;
  socketUrl?: string;
  applicationIdentifier: string;
  subscriberId?: string;
  subscriberHash?: string;
  stores?: IStore[];
  i18n?: I18NLanguage | ITranslationEntry;
  styles?: INotificationCenterStyles;
  initialFetchingStrategy?: Partial<IFetchingStrategy>;
  children: React.ReactNode;
  onLoad?: (data: { organization: IOrganizationEntity }) => void;
}

interface IStore {
  storeId: string;
  query?: IStoreQuery;
}

interface IStoreQuery {
  feedIdentifier?: string | string[];
  seen?: boolean;
  read?: boolean;
  limit?: number; 
  payload?: Record<string, unknown>;
}

type I18NLanguage = 'en' | 'de' ...;

interface ITranslationContent {
  readonly notifications: string;
  readonly markAllAsRead: string;
  readonly poweredBy: string;
  readonly settings: string;
  readonly removeMessage: string;
  readonly markAsRead: string;
  readonly markAsUnRead: string;
}

interface ITranslationEntry {
  readonly translations: Partial<ITranslationContent>;
  readonly lang: string;
}

interface NotificationCenterStyles {
  bellButton?: ObjectWithRoot<{
    dot?: CSSFunctionOrObject;
  }>;
  unseenBadge?: CSSFunctionOrObject;
  popover?: {
    arrow?: CSSFunctionOrObject;
    dropdown?: CSSFunctionOrObject;
  };
  loader?: ObjectWithRoot;
  layout?: ObjectWithRoot;
  header?: ObjectWithRoot<{
    title?: CSSFunctionOrObject;
    markAsRead?: CSSFunctionOrObject;
    cog?: CSSFunctionOrObject;
    backButton?: CSSFunctionOrObject;
  }>;
  tabs?: {
    tabsList?: CSSFunctionOrObject;
    tab?: CSSFunctionOrObject;
    tabLabel?: CSSFunctionOrObject;
    tabIcon?: CSSFunctionOrObject;
  };
  accordion?: {
    item?: CSSFunctionOrObject;
    content?: CSSFunctionOrObject;
    control?: CSSFunctionOrObject;
    chevron?: CSSFunctionOrObject;
  };
  switch?: ObjectWithRoot<{
    input?: CSSFunctionOrObject;
    track?: CSSFunctionOrObject;
    thumb?: CSSFunctionOrObject;
  }>;
  footer?: ObjectWithRoot<{
    title?: CSSFunctionOrObject;
  }>;
  notifications?: ObjectWithRoot<{
    listItem?: {
      read?: CSSFunctionOrObject;
      unread?: CSSFunctionOrObject;
      layout?: CSSFunctionOrObject;
      contentLayout?: CSSFunctionOrObject;
      title?: CSSFunctionOrObject;
      timestamp?: CSSFunctionOrObject;
      dotsButton?: CSSFunctionOrObject;
      buttons?: ObjectWithRoot<{
        primary?: CSSFunctionOrObject;
        secondary?: CSSFunctionOrObject;
      }>;
    };
  }>;
  actionsMenu?: {
    arrow?: CSSFunctionOrObject;
    dropdown?: CSSFunctionOrObject;
    item?: CSSFunctionOrObject;
  };
  preferences?: ObjectWithRoot<{
    item?: {
      title?: CSSFunctionOrObject;
      channels?: CSSFunctionOrObject;
      divider?: CSSFunctionOrObject;
      content?: {
        icon?: CSSFunctionOrObject;
        channelLabel?: CSSFunctionOrObject;
        success?: CSSFunctionOrObject;
      };
    };
  }>;
}

type CSSFunctionInterpolation = (args: {
  theme: INovuTheme;
  common: ICommonTheme;
  colorScheme: ColorScheme;
}) => CSSInterpolation;

type CSSFunctionOrObject = CSSFunctionInterpolation | CSSInterpolation;

type ObjectWithRoot<T = {}> = T & {
  root: CSSFunctionOrObject;
};

interface IFetchingStrategy {
  fetchUnseenCount: boolean;
  fetchOrganization: boolean;
  fetchNotifications: boolean;
  fetchUserPreferences: boolean;
}

interface IPopoverNotificationCenterProps {
  position?: PopoverProps["position"];
  offset?: number;
  colorScheme: ColorScheme;
  theme?: INovuThemePopoverProvider;
  tabs?: ITab[];
  listItem?: ListItem;
  showUserPreferences?: boolean;
  allowedNotificationActions?: boolean;
  onUrlChange?: (url: string) => void;
  onNotificationClick?: (notification: IMessage) => void;
  onUnseenCountChanged?: (unseenCount: number) => void;
  children: (props: INotificationBellProps) => JSX.Element;
  header?: () => JSX.Element;
  footer?: () => JSX.Element;
  emptyState?: JSX.Element;
  onActionClick?: (
    templateIdentifier: string,
    type: ButtonTypeEnum,
    message: IMessage
  ) => void;
  actionsResultBlock?: (
    templateIdentifier: string,
    messageAction: IMessageAction
  ) => JSX.Element;
  onTabClick?: (tab: ITab) => void;
  preferenceFilter?: (userPreference: IUserPreferenceSettings) => boolean;
}

interface ITab {
  name: string;
  storeId: string;
}

type ListItem = (
  message: IMessage,
  onActionButtonClick: (actionButtonType: ButtonTypeEnum) => void,
  onNotificationClick: () => void
) => JSX.Element;

interface INotificationCenterProps {
  colorScheme: ColorScheme;
  theme?: INovuThemeProvider;
  tabs?: ITab[];
  listItem?: ListItem;
  showUserPreferences?: boolean;
  allowedNotificationActions?: boolean;
  onUrlChange?: (url: string) => void;
  onNotificationClick?: (notification: IMessage) => void;
  onUnseenCountChanged?: (unseenCount: number) => void;
  header?: () => JSX.Element;
  footer?: () => JSX.Element;
  emptyState?: JSX.Element;
  onActionClick?: (
    templateIdentifier: string,
    type: ButtonTypeEnum,
    message: IMessage
  ) => void;
  actionsResultBlock?: (
    templateIdentifier: string,
    messageAction: IMessageAction
  ) => JSX.Element;
  onTabClick?: (tab: ITab) => void;
  preferenceFilter?: (userPreference: IUserPreferenceSettings) => boolean;
}

interface INotificationBellProps {
  unseenCount?: number;
  unseenBadgeColor?: string | ISvgStopColor;
  unseenBadgeBackgroundColor?: string;
  colorScheme?: ColorScheme;
}

interface ISvgStopColor {
  stopColor?: string;
  stopColorOffset?: string;
}

const result = useNotifications();

interface INotificationsContext {
  storeId: string;
  storeQuery: IStoreQuery;
  stores: IStore[];
  unseenCount: number;
  notifications: IMessage[];
  hasNextPage: boolean;
  isLoading: boolean;
  isFetching: boolean;
  isFetchingNextPage: boolean;
  setStore: (storeId?: string) => void;
  fetchNextPage: () => void;
  refetch: () => void;
  markNotificationAsRead: (messageId: string) => void;
  markNotificationAsUnRead: (messageId: string) => void;
  markNotificationAsSeen: (messageId: string) => void;
  markFetchedNotificationsAsRead: () => void;
  markFetchedNotificationsAsSeen: () => void;
  markAllNotificationsAsRead: () => void;
  markAllNotificationsAsSeen: () => void;
  removeMessage: (messageId: string) => void;
  removeAllMessages: (feedId?: string) => void;
}

const query: IStoreQuery = {
  limit: 10,
  payload: {
    key: "value"
  }
};

const onSuccess = (data: IPaginatedResponse<IMessage>) => {};

const onError = (error: Error) => {};

const {
  data: notificationsPages,
  hasNextPage,
  isLoading,
  isFetching,
  isFetchingNextPage,
  fetchNextPage,
  refetch,
} = useFetchNotifications({ query }, { onSuccess, onError });

interface IUseFetchNotificationsArgs {
  onSuccess?: (data: IPaginatedResponse<IMessage>) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useInfiniteQuery hook
}

interface InfiniteData<TData> {
  pages: TData[];
  pageParams: unknown[];
}

interface IUseUnseenCountResult {
  data: InfiniteData<IPaginatedResponse<IMessage>>;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useInfiniteQuery hook result
}

interface ICountData {
  count: number;
}

const onSuccess = ({ count }: ICountData) => {};

const onError = (error: Error) => {};

const { data, isLoading, isError, error } = useUnseenCount({ onSuccess, onError });

interface IUseUnseenCountArgs {
  onSuccess?: (data: ICountData) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

interface IUseUnseenCountResult {
  data?: ICountData;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

const { socket } = useSocket();

interface ISocket {
  on: (eventName: string, callback: (data: any) => void) => void;
  off: (eventName: string) => void;
}

const result = useNovuContext();

interface INovuProviderContext {
  backendUrl?: string;
  subscriberId?: string;
  applicationIdentifier?: string;
  isSessionInitialized: boolean;
  socketUrl?: string;
  subscriberHash: string;
  apiService: ApiService;
  socket?: ISocket;
  fetchingStrategy: IFetchingStrategy;
  setFetchingStrategy: (strategy: Partial<IFetchingStrategy>) => void;
  onLoad: (data: { organization: IOrganizationEntity }) => void;
}

interface ICountData {
  count: number;
}

const query: IStoreQuery = {
  feedIdentifier: "product-updates"
};

const onSuccess = (data: ICountData) => {};

const onError = (error: Error) => {};

const result = useFeedUnseenCount({ query }, { onSuccess, onError });

interface IUseFeedUnseenCountArgs {
  onSuccess?: (data: ICountData) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

interface IUseFeedUnseenCountResult {
  data?: ICountData;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

interface IOrganizationEntity {
  _id: string;
  name: string;
  members: {
    _id: string;
    _userId?: string;
    user?: Pick<IUserEntity, 'firstName' | '_id' | 'lastName' | 'email'>;
    roles: MemberRoleEnum[];
    invite?: IMemberInvite;
    memberStatus: MemberStatusEnum;
  }[];
  branding?: {
    color: string;
    logo: string;
    fontColor: string;
    fontFamily: string;
    contentBackground: string;
    direction: 'ltr' | 'rtl';
  };
}

const onSuccess = (data: IOrganizationEntity) => {};

const onError = (error: Error) => {};

const result = useFetchOrganization({ onSuccess, onError });

interface IUseFetchOrganizationArgs {
  onSuccess?: (data: IOrganizationEntity) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

interface IUseFetchOrganizationResult {
  data?: IOrganizationEntity;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

const onSuccess = (data: IUserPreferenceSettings[]) => {};

const onError = (error: Error) => {};

const result = useFetchUserPreferences({ onSuccess, onError });

interface IUseFetchUserPreferencesArgs {
  onSuccess?: (data: IUserPreferenceSettings[]) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useQuery hook
}

interface IUseFetchUserPreferencesResult {
  data?: IUserPreferenceSettings[];
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useQuery hook result
}

interface IPreferenceChannels {
  email?: boolean;
  sms?: boolean;
  in_app?: boolean;
  chat?: boolean;
  push?: boolean;
}

interface IUserPreferenceSettings {
  template: { _id: string; name: string; critical: boolean };
  preference: { enabled: boolean; channels: IPreferenceChannels };
}

const onSuccess = (data: IUserPreferenceSettings) => {};

const onError = (error: Error) => {};

const { updateUserPreferences, isLoading, isError, error } = useUpdateUserPreferences({
  onSuccess,
  onError,
});

interface IUserPreferencesArgs {
  onSuccess?: (data: IUserPreferenceSettings) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

interface IUpdateUserPreferencesVariables {
  templateId: string; // workflowId of mongodbId type
  channelType: string;
  checked: boolean;
}

interface IUserPreferencesResult {
  updateUserPreferences: (variables: IUpdateUserPreferencesVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

const onSuccess = (data: IMessage) => {};

const onError = (error: Error) => {};

const { updateAction, isLoading, isError, error } = useUpdateAction({ onSuccess, onError });

interface IUseUpdateActionArgs {
  onSuccess?: (data: IMessage) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

interface IUpdateActionVariables {
  messageId: string;
  actionButtonType: ButtonTypeEnum;
  status: MessageActionStatusEnum;
  payload?: Record<string, unknown>;
}

interface IUpdateActionResult {
  updateAction: (variables: IUpdateActionVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

const onSuccess = (data: IMessage[]) => {};

const onError = (error: Error) => {};

const { markNotificationsAs, isLoading, isError, error } = useMarkNotificationsAs({
  onSuccess,
  onError,
});

interface IUseMarkNotificationsAsArgs {
  onSuccess?: (data: IMessage[]) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

interface IMarkNotificationsAsVariables {
  messageId: IMessageId;
  seen: boolean;
  read: boolean;
}

interface IUseMarkNotificationsAsResult {
  markNotificationsAs: (args: IMarkNotificationsAsVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

const onSuccess = (data: IMessage) => {};

const onError = (error: Error) => {};

const { removeNotification, isLoading, isError, error } = useRemoveNotification({
  onSuccess,
  onError,
});

interface IUseRemoveNotificationArgs {
  onSuccess?: (data: IMessage) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

interface IRemoveNotificationVariables {
  messageId: IMessageId;
}

interface IUseRemoveNotificationResult {
  removeNotification: (args: IRemoveNotificationVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

const onSuccess = (data: IMessage) => {};

const onError = (error: Error) => {};

const { removeNotifications, isLoading, isError, error } = useRemoveNotifications({
  onSuccess,
  onError,
});

interface IUseRemoveNotificationArgs {
  onSuccess?: (data: IMessage) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

interface IRemoveNotificationsVariables {
  messageIds: string[];
}

interface IUseRemoveNotificationResult {
  removeNotifications: (args: IRemoveNotificationsVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

const onSuccess = (data: IMessage) => {};

const onError = (error: Error) => {};

const { removeAllNotifications, isLoading, isError, error } = useRemoveAllNotifications({
  onSuccess,
  onError,
});

interface IUseRemoveAllNotificationsArgs {
  onSuccess?: (data: IMessage) => void;
  onError?: (error: Error) => void;
  // ... many more from the react-query useMutation hook
}

interface IRemoveAllNotificationsVariables {
  feedId?: string;
}

interface IUseRemoveAllNotificationsResult {
  removeAllNotifications: (args: IRemoveAllNotificationsVariables) => void;
  isLoading: boolean;
  isError: boolean;
  error?: Error;
  // ... many more from the react-query useMutation hook result
}

const result = useTranslations();

interface ITranslations {
  lang: string;
  t: (key: string) => string;
  dateFnsLocale: () => Locale;
}

const result = useNovuTheme();

interface INovuThemeProviderContext {
  theme: INovuTheme;
  common: ICommonTheme;
  colorScheme: ColorScheme;
}

interface INovuTheme {
  layout?: IThemeLayout;
  header?: IThemeHeader;
  popover?: IThemePopover;
  actionsMenu?: IThemeActionsMenu;
  notificationItem?: IThemeNotificationListItem;
  userPreferences?: IThemeUserPreferences;
  footer?: IThemeFooter;
  loaderColor?: string;
}