Add app upgrade ready notification

3 files changed, 70 insertions, 1 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
index c23e576021..3fabd86320 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
@@ -20,6 +20,7 @@ import {
   useAppUpgradeEventType,
   useHasAppUpgradeError,
   useIsAppUpgradeInProgress,
+  useShouldAppUpgradeInstallManually,
 } from '../hooks';
 import useActions from '../lib/actionsHook';
 import { Button } from '../lib/components';
@@ -27,6 +28,7 @@ import { TransitionType, useHistory } from '../lib/history';
 import {
   AppUpgradeErrorNotificationProvider,
   AppUpgradeProgressNotificationProvider,
+  AppUpgradeReadyNotificationProvider,
   NewDeviceNotificationProvider,
   NewVersionNotificationProvider,
   NoOpenVpnServerAvailableNotificationProvider,
@@ -36,7 +38,7 @@ import {
 import { useTunnelProtocol } from '../lib/relay-settings-hooks';
 import { RoutePath } from '../lib/routes';
 import accountActions from '../redux/account/actions';
-import { useAppUpgradeError } from '../redux/hooks';
+import { useAppUpgradeError, useVersionSuggestedUpgrade } from '../redux/hooks';
 import { IReduxState, useSelector } from '../redux/store';
 import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from './Modal';
 import {
@@ -104,6 +106,10 @@ export default function NotificationArea(props: IProps) {
   const restartAppUpgrade = useCallback(() => {
     appUpgrade();
   }, [appUpgrade]);
+
+  const shouldAppUpgradeInstallManually = useShouldAppUpgradeInstallManually();
+  const { suggestedUpgrade } = useVersionSuggestedUpgrade();
+
   const appUpgradeDownloadProgressValue = useAppUpgradeDownloadProgressValue();
   const appUpgradeEventType = useAppUpgradeEventType();
   const isAppUpgradeInProgress = useIsAppUpgradeInProgress();
@@ -121,6 +127,10 @@ export default function NotificationArea(props: IProps) {
       appUpgradeError,
       restartAppUpgrade,
     }),
+    new AppUpgradeReadyNotificationProvider({
+      shouldAppUpgradeInstallManually,
+      suggestedUpgradeVersion: suggestedUpgrade?.version,
+    }),
     new AppUpgradeProgressNotificationProvider({
       isAppUpgradeInProgress,
       appUpgradeEventType,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/app-upgrade-ready.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/app-upgrade-ready.ts
new file mode 100644
index 0000000000..eff2935cc5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/app-upgrade-ready.ts
@@ -0,0 +1,58 @@
+import { sprintf } from 'sprintf-js';
+
+import { messages } from '../../../shared/gettext';
+import { InAppNotification, InAppNotificationProvider } from '../../../shared/notifications';
+import { RoutePath } from '../routes';
+
+interface AppUpgradeReadyNotificationContext {
+  shouldAppUpgradeInstallManually: boolean;
+  suggestedUpgradeVersion?: string;
+}
+
+export class AppUpgradeReadyNotificationProvider implements InAppNotificationProvider {
+  public constructor(private context: AppUpgradeReadyNotificationContext) {}
+
+  public mayDisplay = () => {
+    return this.context.shouldAppUpgradeInstallManually;
+  };
+
+  public getInAppNotification(): InAppNotification {
+    return {
+      indicator: 'warning',
+      title:
+        // TRANSLATORS: Notification title when the app upgrade is ready to install.
+        messages.pgettext('in-app-notifications', 'READY TO INSTALL UPDATE'),
+      subtitle: [
+        {
+          content: sprintf(
+            // TRANSLATORS: Notification subtitle when the app upgrade is ready to install.
+            // TRANSLATORS: Available placeholders:
+            // TRANSLATORS: - %(suggestedUpgradeVersion)s: Upgrade version to be installed.
+            messages.pgettext(
+              'in-app-notifications',
+              '%(suggestedUpgradeVersion)s is ready to be installed.',
+            ),
+            {
+              suggestedUpgradeVersion: this.context.suggestedUpgradeVersion,
+            },
+          ),
+        },
+        {
+          content:
+            // TRANSLATORS: Notification subtitle when the app upgrade is ready to install.
+            messages.pgettext('in-app-notifications', 'Click here to install update.'),
+          action: {
+            type: 'navigate-internal',
+            link: {
+              // TODO: Change route
+              to: RoutePath.changelog,
+              'aria-label':
+                // TRANSLATORS: Accessibility label for link to app upgrade view.
+                messages.pgettext('accessibility', 'Go to app update page'),
+            },
+          },
+        },
+      ],
+    };
+  }
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts
index 91f88cd352..2a90aaae4f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/index.ts
@@ -5,3 +5,4 @@ export * from './no-open-vpn-server-available';
 export * from './unsupported-wireguard-port';
 export * from './app-upgrade-progress';
 export * from './app-upgrade-error';
+export * from './app-upgrade-ready';