@servicetitan/notifications 28.5.0 → 29.0.0

package/src/components/__tests__/notifications.test.tsx

@@ -0,0 +1,107 @@
+import { injectable, useOptionalDependencies } from '@servicetitan/react-ioc';
+import { mockComponent } from '@servicetitan/testing-library';
+import { render, screen } from '@testing-library/react';
+import { FC, Fragment } from 'react';
+
+import { NotificationsApi } from '../../api/notifications.api';
+import { NotificationsStore } from '../../stores/notifications.store';
+import { NotificationsService } from '../../notifications-service';
+import { useCompatibleNavigate } from '../../utils/use-compatible-navigate';
+
+import { Notifications } from '../notifications';
+
+jest.mock('@servicetitan/anvil2', () => mockComponent('Toaster', { renderProps: false }));
+jest.mock('../../utils/use-compatible-navigate', () => ({
+    useCompatibleNavigate: jest.fn(),
+}));
+
+@injectable()
+class MockNotificationsApi implements NotificationsApi {
+    getNotification = jest.fn();
+    getNotifications = jest.fn();
+    changeIsReadProperty = jest.fn();
+}
+
+describe(Notifications.name, () => {
+    let providedApi: NotificationsApi | undefined;
+    let providedService: NotificationsService | undefined;
+    let providedStore: NotificationsStore | undefined;
+    let props: Parameters<typeof Notifications>[0];
+
+    const Component: FC = () => {
+        [providedApi, providedService, providedStore] = useOptionalDependencies(
+            NotificationsApi,
+            NotificationsService,
+            NotificationsStore
+        );
+        return null;
+    };
+
+    beforeEach(() => (props = {}));
+
+    const subject = () =>
+        render(
+            <Notifications {...props}>
+                <Component />
+            </Notifications>
+        );
+
+    test('renders Toaster', () => {
+        subject();
+
+        expect(screen).toContainComponent('Toaster');
+    });
+
+    test('provides NotificationService', () => {
+        subject();
+
+        expect(providedService).toBeInstanceOf(NotificationsService);
+    });
+
+    test('provides NotificationStore', () => {
+        subject();
+
+        expect(providedStore).toBeInstanceOf(NotificationsStore);
+    });
+
+    test('sets store.navigate to useCompatibleNavigate result', () => {
+        const navigate = jest.fn();
+        jest.mocked(useCompatibleNavigate).mockReturnValue(navigate);
+
+        subject();
+
+        expect(providedStore!.navigate).toBe(navigate);
+    });
+
+    test('disposes store when component is unmounted', () => {
+        const { unmount } = subject();
+        const disposeSpy = jest.spyOn(providedStore!, 'dispose');
+
+        unmount();
+
+        expect(disposeSpy).toHaveBeenCalled();
+    });
+
+    test('renders one Toaster when there are are multiple notifications', () => {
+        render(
+            <Fragment>
+                <Notifications>
+                    <Notifications />
+                </Notifications>
+                <Notifications />
+            </Fragment>
+        );
+
+        expect(screen.getAllByText('<Toaster />')).toHaveLength(1);
+    });
+
+    describe('when given an apiService', () => {
+        beforeEach(() => (props.apiService = MockNotificationsApi));
+
+        test('provides NotificationsApi', () => {
+            subject();
+
+            expect(providedApi).toBeInstanceOf(MockNotificationsApi);
+        });
+    });
+});

package/src/components/notifications.tsx

@@ -1,25 +1,19 @@
-import { FC, PropsWithChildren } from 'react';
-
-import { Provider, interfaces } from '@servicetitan/react-ioc';
-
+import { Toaster } from '@servicetitan/anvil2';
+import { Provider, interfaces, useDependencies } from '@servicetitan/react-ioc';
 import {
-    NotificationsApi,
-    DefaultServerNotificationPayload,
-    NotificationProcessStatus,
-} from '../api/notifications.api';
+    FC,
+    PropsWithChildren,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+    useSyncExternalStore,
+} from 'react';
+
+import { NotificationsApi } from '../api/notifications.api';
 import { NotificationsStore } from '../stores/notifications.store';
+import { useCompatibleNavigate } from '../utils/use-compatible-navigate';
 import { NotificationsService } from '../notifications-service';
-import { register } from '../register';
-
-import {
-    DEFAULT_CLIENT_NOTIFICATION_TYPE,
-    DEFAULT_SERVER_NOTIFICATION_TYPE,
-    DefaultNotificationOptions,
-    Status,
-} from '../common';
-
-import { DefaultNotification } from './default-notification';
-import { NotificationsUnwrapped } from './notifications-unwrapped';
 
 export interface NotificationsProps extends PropsWithChildren<{}> {
     apiService?: interfaces.Newable<NotificationsApi>;
@@ -38,26 +32,55 @@ export const Notifications: FC<NotificationsProps> = ({ apiService, children })
     </Provider>
 );
 
-register(DEFAULT_CLIENT_NOTIFICATION_TYPE, ({ notification, onClose }) => {
-    const payload = notification.payload as DefaultNotificationOptions;
+declare global {
+    /**
+     * This variable ensures there is one and only one \<Toaster />.
+     * It contains the unique id of the instance that owns the Toaster.
+     */
+    // eslint-disable-next-line no-var
+    var STNotificationsActiveId: string | undefined;
+}
+
+const NotificationsUnwrapped: FC = () => {
+    // Configure and clean up store
 
-    return <DefaultNotification {...payload} onClose={onClose} />;
-});
+    const [store] = useDependencies(NotificationsStore);
+    const navigate = useCompatibleNavigate();
+    useEffect(() => {
+        store.navigate = navigate;
+        return () => {
+            store.dispose();
+        };
+    }, [store, navigate]);
 
-register(DEFAULT_SERVER_NOTIFICATION_TYPE, ({ notification, onClose }) => {
-    const payload = notification.payload as DefaultServerNotificationPayload;
+    // Use useSyncExternalStore to ensure we re-render when the active id changes
 
-    switch (notification.status) {
-        case NotificationProcessStatus.Info:
-            return <DefaultNotification {...payload} onClose={onClose} />;
+    const [thisId] = useState(() => makeId());
+    const syncExternalStoreCallback = useRef<Function>();
+    const subscribe = useCallback((callback: Function) => {
+        syncExternalStoreCallback.current = callback;
+        return () => (syncExternalStoreCallback.current = undefined);
+    }, []);
+    const activeId = useSyncExternalStore(subscribe, () => globalThis.STNotificationsActiveId);
 
-        case NotificationProcessStatus.InProgress:
-            return <DefaultNotification {...payload} duration={0} onClose={onClose} />;
+    // Set and clean up active id
 
-        case NotificationProcessStatus.Success:
-            return <DefaultNotification {...payload} status={Status.Success} onClose={onClose} />;
+    useEffect(() => {
+        if (globalThis.STNotificationsActiveId === undefined) {
+            globalThis.STNotificationsActiveId = thisId;
+            syncExternalStoreCallback.current?.();
+        }
+        return () => {
+            if (globalThis.STNotificationsActiveId === thisId) {
+                globalThis.STNotificationsActiveId = undefined;
+                syncExternalStoreCallback.current?.();
+            }
+        };
+    }, [syncExternalStoreCallback, thisId]);
 
-        case NotificationProcessStatus.Failure:
-            return <DefaultNotification {...payload} status={Status.Error} onClose={onClose} />;
-    }
-});
+    return activeId === thisId ? <Toaster id={'st-notifications-' + thisId} /> : null;
+};
+
+function makeId() {
+    return Math.round(1e8 * Math.random()).toString(36);
+}

package/src/demo/action-button-preview.tsx

@@ -1,8 +1,6 @@
-import { FC } from 'react';
-
+import { Button, Flex } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
-
-import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { FC } from 'react';
 
 import { NotificationsService } from '..';
 
@@ -38,10 +36,10 @@ export const ActionButtonPreview: FC = () => {
         });
 
     return (
-        <ButtonGroup>
+        <Flex direction="row" gap="2">
             <Button onClick={handleWithLinkClick}>With Link</Button>
             <Button onClick={handleWithExternalLinkClick}>With Link (new tab)</Button>
             <Button onClick={handleWithHandlerClick}>With Handler</Button>
-        </ButtonGroup>
+        </Flex>
     );
 };

package/src/demo/basic-preview.tsx

@@ -1,8 +1,6 @@
-import { FC } from 'react';
-
+import { Button } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
-
-import { Button } from '@servicetitan/design-system';
+import { FC } from 'react';
 
 import { NotificationsService } from '..';
 

package/src/demo/container.tsx

@@ -3,12 +3,9 @@ import { useEffect, useMemo, FC } from 'react';
 import { Provider, useDependencies } from '@servicetitan/react-ioc';
 
 import { Notification } from '../api/notifications.api';
-
 import { NOTIFICATIONS_CHANNEL_TOKEN, Notifications, NotificationsService } from '..';
 
-interface EventCallback {
-    (notification: Notification): void;
-}
+type EventCallback = (notification: Notification) => void;
 
 class Publisher {
     // eslint-disable-next-line @typescript-eslint/naming-convention

package/src/demo/duration-preview.tsx

@@ -1,8 +1,6 @@
-import { FC } from 'react';
-
+import { Button, Flex } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
-
-import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { FC } from 'react';
 
 import { NotificationsService } from '..';
 
@@ -22,9 +20,9 @@ export const DurationPreview: FC = () => {
         });
 
     return (
-        <ButtonGroup>
+        <Flex direction="row" gap="2">
             <Button onClick={handleOneSecondClick}>1 second</Button>
             <Button onClick={handleUnlimitedClick}>Unlimited</Button>
-        </ButtonGroup>
+        </Flex>
     );
 };

package/src/demo/multiline-message-preview.tsx

@@ -1,8 +1,6 @@
-import { FC } from 'react';
-
+import { Button } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
-
-import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { FC } from 'react';
 
 import { NotificationsService } from '..';
 
@@ -15,9 +13,5 @@ export const MultilineMessagePreview: FC = () => {
             message: '1. First\r\n2. Second\r\n3. Third',
         });
 
-    return (
-        <ButtonGroup>
-            <Button onClick={handleClick}>Show</Button>
-        </ButtonGroup>
-    );
+    return <Button onClick={handleClick}>Show</Button>;
 };

package/src/demo/prevent-duplicates-preview.tsx

@@ -1,8 +1,6 @@
-import { FC } from 'react';
-
+import { Button } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
-
-import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { FC } from 'react';
 
 import { NotificationsService } from '..';
 
@@ -17,9 +15,5 @@ export const PreventDuplicatesPreview: FC = () => {
             true
         );
 
-    return (
-        <ButtonGroup>
-            <Button onClick={handleClick}>Show</Button>
-        </ButtonGroup>
-    );
+    return <Button onClick={handleClick}>Show</Button>;
 };

package/src/demo/progress-preview.tsx

@@ -1,8 +1,6 @@
-import { FC } from 'react';
-
+import { Button } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
-
-import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { FC } from 'react';
 
 import { NotificationsService } from '..';
 
@@ -15,9 +13,5 @@ export const ProgressPreview: FC = () => {
             progress: 25,
         });
 
-    return (
-        <ButtonGroup>
-            <Button onClick={handleClick}>Show</Button>
-        </ButtonGroup>
-    );
+    return <Button onClick={handleClick}>Show</Button>;
 };

package/src/demo/server-custom-preview.tsx

@@ -1,16 +1,19 @@
-import { Toast, Avatar, Stack } from '@servicetitan/design-system';
+import { intercept } from '../intercept';
 
-import { register } from '..';
+export function setupIntercept() {
+    intercept<{ username: string }>('CustomServerNotification', notification => {
+        const { username, ...payload } = notification.payload;
 
-register('CustomServerNotification', ({ notification, onClose }) => {
-    const { username, message } = notification.payload;
-
-    return (
-        <Toast title="You have a new message" portal={false} onClose={onClose}>
-            <Stack alignItems="center">
-                <Avatar name={username} className="m-r-1" />
-                <Stack.Item fill>{message}</Stack.Item>
-            </Stack>
-        </Toast>
-    );
-});
+        return {
+            ...notification,
+            payload: {
+                ...payload,
+                title: `Hi ${username}!`,
+                action: {
+                    label: 'Thanks!',
+                    onClick: () => window.alert("You're welcome!"),
+                },
+            },
+        };
+    });
+}

package/src/demo/server-custom.tsx

@@ -1,36 +1,37 @@
-import { FC } from 'react';
-
-import { Button } from '@servicetitan/design-system';
+import { Button } from '@servicetitan/anvil2';
+import { FC, useEffect } from 'react';
 
 import { NotificationProcessStatus } from '..';
-
 import { Container } from './container';
+import { setupIntercept } from './server-custom-preview';
 
-import './server-custom-preview';
+export const ServerCustomExample: FC = () => {
+    useEffect(setupIntercept, []);
 
-export const ServerCustomExample: FC = () => (
-    <Container>
-        {publisher => {
-            const handleClick = () => {
-                const notification = {
-                    id: Date.now(),
-                    userId: 0,
-                    type: 'CustomServerNotification',
-                    status: NotificationProcessStatus.Info,
-                    isRead: false,
-                    createdOn: new Date(),
-                    modifiedOn: new Date(),
-                    version: NotificationProcessStatus.Info,
-                    payload: JSON.stringify({
-                        username: 'Jane',
-                        message: 'Hello, your order completed.',
-                    }),
-                };
+    return (
+        <Container>
+            {publisher => {
+                const handleClick = () => {
+                    const notification = {
+                        id: Date.now(),
+                        userId: 0,
+                        type: 'CustomServerNotification',
+                        status: NotificationProcessStatus.Info,
+                        isRead: false,
+                        createdOn: new Date(),
+                        modifiedOn: new Date(),
+                        version: NotificationProcessStatus.Info,
+                        payload: JSON.stringify({
+                            username: 'Jane',
+                            message: 'Your order is completed.',
+                        }),
+                    };
 
-                publisher.fire(notification);
-            };
+                    publisher.fire(notification);
+                };
 
-            return <Button onClick={handleClick}>Show</Button>;
-        }}
-    </Container>
-);
+                return <Button onClick={handleClick}>Show</Button>;
+            }}
+        </Container>
+    );
+};

package/src/demo/server-default.tsx

@@ -1,9 +1,7 @@
+import { Button } from '@servicetitan/anvil2';
 import { FC } from 'react';
 
-import { Button } from '@servicetitan/design-system';
-
 import { NotificationProcessStatus } from '..';
-
 import { Container } from './container';
 
 export const ServerDefaultExample: FC = () => (

package/src/demo/status-variations-preview.tsx

@@ -1,8 +1,6 @@
-import { FC } from 'react';
-
+import { Button, Flex } from '@servicetitan/anvil2';
 import { useDependencies } from '@servicetitan/react-ioc';
-
-import { ButtonGroup, Button } from '@servicetitan/design-system';
+import { FC } from 'react';
 
 import { NotificationsService } from '..';
 
@@ -30,11 +28,11 @@ export const StatusVariationsPreview: FC = () => {
         });
 
     return (
-        <ButtonGroup>
+        <Flex direction="row" gap="2">
             <Button onClick={handleInfoClick}>Info</Button>
             <Button onClick={handleSuccessClick}>Success</Button>
             <Button onClick={handleWarningClick}>Warning</Button>
             <Button onClick={handleErrorClick}>Error</Button>
-        </ButtonGroup>
+        </Flex>
     );
 };

package/src/demo/status-variations.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 
 import { Container } from './container';
-
 import { StatusVariationsPreview } from './status-variations-preview';
 
 export const StatusVariationsExample: FC = () => (

package/src/index.ts

@@ -1,7 +1,16 @@
-export { NotificationProcessStatus } from './api/notifications.api';
-export { DefaultNotification, DefaultNotificationProps } from './components/default-notification';
+export {
+    NotificationsApi,
+    NotificationProcessStatus,
+    DefaultServerNotificationPayload,
+} from './api/notifications.api';
 export { Notifications, NotificationsProps } from './components/notifications';
-export { DefaultNotificationOptions, Status } from './common';
+export {
+    DefaultNotificationOptions,
+    LinkAction,
+    FunctionAction,
+    Notification,
+    Status,
+} from './common';
+export { intercept, NotificationInterceptor } from './intercept';
 export { NotificationsChannel, NOTIFICATIONS_CHANNEL_TOKEN } from './notifications-channel';
 export { INotificationsService, NotificationsService } from './notifications-service';
-export { register } from './register';

package/src/intercept.ts

@@ -0,0 +1,14 @@
+import { DefaultNotificationOptions, Notification } from './common';
+import { NotificationsStore } from './stores/notifications.store';
+
+export type NotificationInterceptor<T extends Record<keyof any, any> = {}> = (
+    notification: Notification<T>,
+    dismiss: () => void
+) => Notification<DefaultNotificationOptions> | undefined;
+
+export function intercept<T extends Record<keyof any, any> = {}>(
+    type: string,
+    fn?: NotificationInterceptor<T>
+) {
+    NotificationsStore.intercept(type, fn);
+}

package/src/notifications-channel.ts

@@ -1,8 +1,6 @@
 import { symbolToken } from '@servicetitan/react-ioc';
 
-interface EventCallback {
-    (context: any, data: any): void;
-}
+type EventCallback = (data: any, context: any) => void;
 
 interface EventsDispatcher {
     bind(eventName: string, callback: EventCallback, context?: any): this;
@@ -14,9 +12,7 @@ interface Publisher extends EventsDispatcher {
     global_emitter: EventsDispatcher;
 }
 
-export interface NotificationsChannel {
-    (): Publisher;
-}
+export type NotificationsChannel = () => Publisher;
 
 export const NOTIFICATIONS_CHANNEL_TOKEN = symbolToken<NotificationsChannel>(
     'NOTIFICATIONS_CHANNEL_TOKEN'

package/src/notifications-service.ts

@@ -4,13 +4,15 @@ import { DefaultNotificationOptions, Status } from './common';
 
 import { NotificationsStore } from './stores/notifications.store';
 
+type OptionsWithoutStatus = Omit<DefaultNotificationOptions, 'status'>;
+
 export interface INotificationsService {
     initialize(userId?: number): Promise<void>;
     show(options: DefaultNotificationOptions, preventDuplicates?: boolean): void;
-    info(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
-    success(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
-    warning(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
-    error(options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean): void;
+    info(options: OptionsWithoutStatus, preventDuplicates?: boolean): void;
+    success(options: OptionsWithoutStatus, preventDuplicates?: boolean): void;
+    warning(options: OptionsWithoutStatus, preventDuplicates?: boolean): void;
+    error(options: OptionsWithoutStatus, preventDuplicates?: boolean): void;
 }
 
 @injectable()
@@ -25,49 +27,19 @@ export class NotificationsService implements INotificationsService {
         this.store.add(options, preventDuplicates);
     };
 
-    info = (options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean) => {
-        this.store.add(
-            {
-                ...options,
-                status: Status.Info,
-            },
-            preventDuplicates
-        );
+    info = (options: OptionsWithoutStatus, preventDuplicates?: boolean) => {
+        this.store.add({ ...options, status: Status.Info }, preventDuplicates);
     };
 
-    success = (
-        options: Omit<DefaultNotificationOptions, 'status'>,
-        preventDuplicates?: boolean
-    ) => {
-        this.store.add(
-            {
-                ...options,
-                status: Status.Success,
-            },
-            preventDuplicates
-        );
+    success = (options: OptionsWithoutStatus, preventDuplicates?: boolean) => {
+        this.store.add({ ...options, status: Status.Success }, preventDuplicates);
     };
 
-    warning = (
-        options: Omit<DefaultNotificationOptions, 'status'>,
-        preventDuplicates?: boolean
-    ) => {
-        this.store.add(
-            {
-                ...options,
-                status: Status.Warning,
-            },
-            preventDuplicates
-        );
+    warning = (options: OptionsWithoutStatus, preventDuplicates?: boolean) => {
+        this.store.add({ ...options, status: Status.Warning }, preventDuplicates);
     };
 
-    error = (options: Omit<DefaultNotificationOptions, 'status'>, preventDuplicates?: boolean) => {
-        this.store.add(
-            {
-                ...options,
-                status: Status.Error,
-            },
-            preventDuplicates
-        );
+    error = (options: OptionsWithoutStatus, preventDuplicates?: boolean) => {
+        this.store.add({ ...options, status: Status.Error }, preventDuplicates);
     };
 }