Add new device in-app notification

2 files changed, 36 insertions, 0 deletions

diff --git a/gui/src/shared/notifications/new-device.ts b/gui/src/shared/notifications/new-device.ts
new file mode 100644
index 0000000000..7d0fe9f299
--- /dev/null
+++ b/gui/src/shared/notifications/new-device.ts
@@ -0,0 +1,32 @@
+import { sprintf } from 'sprintf-js';
+
+import { messages } from '../../shared/gettext';
+import { capitalizeEveryWord } from '../string-helpers';
+import { InAppNotification, InAppNotificationProvider } from './notification';
+
+interface NewDeviceNotificationContext {
+  shouldDisplay: boolean;
+  deviceName: string;
+  close: () => void;
+}
+
+export class NewDeviceNotificationProvider implements InAppNotificationProvider {
+  public constructor(private context: NewDeviceNotificationContext) {}
+
+  public mayDisplay = () => this.context.shouldDisplay;
+
+  public getInAppNotification(): InAppNotification {
+    return {
+      indicator: 'success',
+      title: messages.pgettext('in-app-notifications', 'NEW DEVICE CREATED'),
+      subtitle: sprintf(
+        messages.pgettext(
+          'in-app-notifications',
+          'Welcome, this device is now called <b>%(deviceName)s</b>. For more details see the info button in Account.',
+        ),
+        { deviceName: capitalizeEveryWord(this.context.deviceName) },
+      ),
+      action: { type: 'close', close: this.context.close },
+    };
+  }
+}
diff --git a/gui/src/shared/notifications/notification.ts b/gui/src/shared/notifications/notification.ts
index 88bddfa9f5..b8727739ef 100644
--- a/gui/src/shared/notifications/notification.ts
+++ b/gui/src/shared/notifications/notification.ts
@@ -15,6 +15,10 @@ export type InAppNotificationAction =
   | {
       type: 'troubleshoot-dialog';
       troubleshoot: InAppNotificationTroubleshootInfo;
+    }
+  | {
+      type: 'close';
+      close: () => void;
     };
 
 export type InAppNotificationIndicatorType = 'success' | 'warning' | 'error';