fix(js): Inbox DX fixes (#7396)

packages/js/src/api/http-client.ts

@@ -1,6 +1,6 @@
 export type HttpClientOptions = {
   apiVersion?: string;
-  backendUrl?: string;
+  apiUrl?: string;
   userAgent?: string;
 };
 
@@ -9,18 +9,18 @@ const DEFAULT_BACKEND_URL = 'https://api.novu.co';
 const DEFAULT_USER_AGENT = `${PACKAGE_NAME}@${PACKAGE_VERSION}`;
 
 export class HttpClient {
-  private backendUrl: string;
+  private apiUrl: string;
   private apiVersion: string;
   private headers: Record<string, string>;
 
   constructor(options: HttpClientOptions = {}) {
     const {
       apiVersion = DEFAULT_API_VERSION,
-      backendUrl = DEFAULT_BACKEND_URL,
+      apiUrl = DEFAULT_BACKEND_URL,
       userAgent = DEFAULT_USER_AGENT,
     } = options || {};
     this.apiVersion = apiVersion;
-    this.backendUrl = `${backendUrl}/${this.apiVersion}`;
+    this.apiUrl = `${apiUrl}/${this.apiVersion}`;
     this.headers = {
       'Novu-API-Version': NOVU_API_VERSION,
       'Content-Type': 'application/json',
@@ -91,7 +91,7 @@ export class HttpClient {
     options?: RequestInit;
     unwrapEnvelope?: boolean;
   }) {
-    const fullUrl = combineUrl(this.backendUrl, path, searchParams ? `?${searchParams.toString()}` : '');
+    const fullUrl = combineUrl(this.apiUrl, path, searchParams ? `?${searchParams.toString()}` : '');
     const reqInit = {
       method: options?.method || 'GET',
       headers: { ...this.headers, ...(options?.headers || {}) },

packages/js/src/api/inbox-service.ts

@@ -154,17 +154,17 @@ export class InboxService {
     return this.#httpClient.get(`${INBOX_ROUTE}/preferences${query}`);
   }
 
-  updateGlobalPreferences(channelPreferences: ChannelPreference): Promise<PreferencesResponse> {
-    return this.#httpClient.patch(`${INBOX_ROUTE}/preferences`, channelPreferences);
+  updateGlobalPreferences(channels: ChannelPreference): Promise<PreferencesResponse> {
+    return this.#httpClient.patch(`${INBOX_ROUTE}/preferences`, channels);
   }
 
   updateWorkflowPreferences({
     workflowId,
-    channelPreferences,
+    channels,
   }: {
     workflowId: string;
-    channelPreferences: ChannelPreference;
+    channels: ChannelPreference;
   }): Promise<PreferencesResponse> {
-    return this.#httpClient.patch(`${INBOX_ROUTE}/preferences/${workflowId}`, channelPreferences);
+    return this.#httpClient.patch(`${INBOX_ROUTE}/preferences/${workflowId}`, channels);
   }
 }

packages/js/src/novu.ts

@@ -4,7 +4,6 @@ import { Notifications } from './notifications';
 import { Session } from './session';
 import { Preferences } from './preferences';
 import { Socket } from './ws';
-import { PRODUCTION_BACKEND_URL } from './utils/config';
 import type { NovuOptions } from './types';
 import { InboxService } from './api';
 
@@ -25,7 +24,7 @@ export class Novu implements Pick<NovuEventEmitter, 'on'> {
 
   constructor(options: NovuOptions) {
     this.#inboxService = new InboxService({
-      backendUrl: options.backendUrl ?? PRODUCTION_BACKEND_URL,
+      apiUrl: options.apiUrl || options.backendUrl,
       userAgent: options.__userAgent,
     });
     this.#emitter = new NovuEventEmitter();

packages/js/src/preferences/helpers.ts

@@ -22,7 +22,7 @@ export const updatePreference = async ({
   useCache,
   args,
 }: UpdatePreferenceParams): Result<Preference> => {
-  const { workflowId, channelPreferences } = args;
+  const { workflowId, channels } = args;
   try {
     emitter.emit('preference.update.pending', {
       args,
@@ -32,7 +32,7 @@ export const updatePreference = async ({
               ...args.preference,
               channels: {
                 ...args.preference.channels,
-                ...channelPreferences,
+                ...channels,
               },
             },
             {
@@ -47,10 +47,10 @@ export const updatePreference = async ({
 
     let response;
     if (workflowId) {
-      response = await apiService.updateWorkflowPreferences({ workflowId, channelPreferences });
+      response = await apiService.updateWorkflowPreferences({ workflowId, channels });
     } else {
       optimisticUpdateWorkflowPreferences({ emitter, apiService, cache, useCache, args });
-      response = await apiService.updateGlobalPreferences(channelPreferences);
+      response = await apiService.updateGlobalPreferences(channels);
     }
 
     const preference = new Preference(response, {
@@ -84,7 +84,7 @@ const optimisticUpdateWorkflowPreferences = ({
         ...el,
         channels: Object.entries(el.channels).reduce((acc, [key, value]) => {
           const channelType = key as ChannelType;
-          acc[channelType] = args.channelPreferences[channelType] ?? value;
+          acc[channelType] = args.channels[channelType] ?? value;
 
           return acc;
         }, {} as ChannelPreference),
@@ -102,7 +102,7 @@ const optimisticUpdateWorkflowPreferences = ({
         emitter.emit('preference.update.pending', {
           args: {
             workflowId: el.workflow?.id,
-            channelPreferences: updatedPreference.channels,
+            channels: updatedPreference.channels,
           },
           data: updatedPreference,
         });

packages/js/src/preferences/preference.ts

@@ -1,9 +1,10 @@
 import { InboxService } from '../api';
 
 import { NovuEventEmitter } from '../event-emitter';
-import { ChannelPreference, PreferenceLevel, Result, Workflow } from '../types';
+import { ChannelPreference, PreferenceLevel, Result, Workflow, Prettify } from '../types';
 import { updatePreference } from './helpers';
 import { PreferencesCache } from '../cache/preferences-cache';
+import { UpdatePreferencesArgs } from './types';
 
 type PreferenceLike = Pick<Preference, 'level' | 'enabled' | 'channels' | 'workflow'>;
 
@@ -42,15 +43,19 @@ export class Preference {
     this.workflow = preference.workflow;
   }
 
-  update({ channelPreferences }: { channelPreferences: ChannelPreference }): Result<Preference> {
+  update({
+    channels,
+    // @deprecated use channels instead
+    channelPreferences,
+  }: Prettify<Pick<UpdatePreferencesArgs, 'channels' | 'channelPreferences'>>): Result<Preference> {
     return updatePreference({
       emitter: this.#emitter,
       apiService: this.#apiService,
       cache: this.#cache,
       useCache: this.#useCache,
       args: {
         workflowId: this.workflow?.id,
-        channelPreferences,
+        channels: channels || channelPreferences,
         preference: {
           level: this.level,
           enabled: this.enabled,

packages/js/src/preferences/preferences.ts

@@ -1,9 +1,8 @@
 import { InboxService } from '../api';
 import { NovuEventEmitter } from '../event-emitter';
 import { BaseModule } from '../base-module';
-import { updatePreference } from './helpers';
 import { Preference } from './preference';
-import type { ListPreferencesArgs, UpdatePreferencesArgs } from './types';
+import type { ListPreferencesArgs } from './types';
 import { Result } from '../types';
 import { PreferencesCache } from '../cache/preferences-cache';
 

packages/js/src/preferences/types.ts

@@ -11,7 +11,9 @@ export type ListPreferencesArgs = {
 
 export type UpdatePreferencesArgs = {
   workflowId?: string;
-  channelPreferences: ChannelPreference;
+  channels: ChannelPreference;
+  // @deprecated use channels instead
+  channelPreferences?: ChannelPreference;
   preference?: {
     level: PreferenceLevel;
     enabled: boolean;

packages/js/src/types.ts

@@ -176,11 +176,15 @@ export type NovuOptions = {
   applicationIdentifier: string;
   subscriberId: string;
   subscriberHash?: string;
+  // @deprecated use apiUrl instead
   backendUrl?: string;
+  apiUrl?: string;
   socketUrl?: string;
   useCache?: boolean;
   /**
    * @internal Should be used internally
    */
   __userAgent?: string;
 };
+
+export type Prettify<T> = { [K in keyof T]: T[K] } & {};

packages/js/src/ui/components/elements/Preferences/Preferences.tsx

@@ -42,7 +42,7 @@ export const Preferences = () => {
     (preference?: Preference) =>
     ({ channel, enabled }: { channel: ChannelType; enabled: boolean }) => {
       preference?.update({
-        channelPreferences: {
+        channels: {
           [channel]: enabled,
         },
       });