Add app upgrade error notification

2 files changed, 105 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 4004d0cea9..fb1dfbdeb5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx
@@ -15,6 +15,7 @@ import {
   UpdateAvailableNotificationProvider,
 } from '../../shared/notifications';
 import { useAppContext } from '../context';
+import { useHasAppUpgradeError } from '../hooks';
 import useActions from '../lib/actionsHook';
 import { Button } from '../lib/components';
 import { TransitionType, useHistory } from '../lib/history';
@@ -25,9 +26,11 @@ import {
   OpenVpnSupportEndingNotificationProvider,
   UnsupportedWireGuardPortNotificationProvider,
 } from '../lib/notifications';
+import { AppUpgradeErrorNotificationProvider } from '../lib/notifications/app-upgrade-error';
 import { useTunnelProtocol } from '../lib/relay-settings-hooks';
 import { RoutePath } from '../lib/routes';
 import accountActions from '../redux/account/actions';
+import { useAppUpgradeError } from '../redux/hooks';
 import { IReduxState, useSelector } from '../redux/store';
 import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from './Modal';
 import {
@@ -69,7 +72,7 @@ export default function NotificationArea(props: IProps) {
 
   const { hideNewDeviceBanner } = useActions(accountActions);
 
-  const { setDisplayedChangelog } = useAppContext();
+  const { setDisplayedChangelog, appUpgrade } = useAppContext();
 
   const currentVersion = useSelector((state) => state.version.current);
   const displayedForVersion = useSelector(
@@ -89,6 +92,13 @@ export default function NotificationArea(props: IProps) {
     await setSplitTunnelingState(false);
   }, [setSplitTunnelingState]);
 
+  const hasAppUpgradeError = useHasAppUpgradeError();
+  const { appUpgradeError } = useAppUpgradeError();
+
+  const restartAppUpgrade = useCallback(() => {
+    appUpgrade();
+  }, [appUpgrade]);
+
   const notificationProviders: InAppNotificationProvider[] = [
     new ConnectingNotificationProvider({ tunnelState }),
     new ReconnectingNotificationProvider(tunnelState),
@@ -97,6 +107,11 @@ export default function NotificationArea(props: IProps) {
       blockWhenDisconnectedSetting,
       hasExcludedApps,
     }),
+    new AppUpgradeErrorNotificationProvider({
+      hasAppUpgradeError,
+      appUpgradeError,
+      restartAppUpgrade,
+    }),
     new NoOpenVpnServerAvailableNotificationProvider({
       connection,
       tunnelProtocol,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/app-upgrade-error.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/app-upgrade-error.ts
new file mode 100644
index 0000000000..8b3af6faf6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/notifications/app-upgrade-error.ts
@@ -0,0 +1,89 @@
+import { AppUpgradeError } from '../../../shared/app-upgrade';
+import { messages } from '../../../shared/gettext';
+import {
+  InAppNotification,
+  InAppNotificationProvider,
+  InAppNotificationSubtitle,
+} from '../../../shared/notifications';
+
+interface AppUpgradeErrorNotificationContext {
+  hasAppUpgradeError: boolean;
+  appUpgradeError?: AppUpgradeError;
+  restartAppUpgrade: () => void;
+}
+
+export class AppUpgradeErrorNotificationProvider implements InAppNotificationProvider {
+  public constructor(private context: AppUpgradeErrorNotificationContext) {}
+
+  public mayDisplay = () => {
+    return this.context.hasAppUpgradeError;
+  };
+
+  public getInAppNotification(): InAppNotification {
+    const { appUpgradeError } = this.context;
+    const retrySubtitle: InAppNotificationSubtitle = {
+      content:
+        // TRANSLATORS: Notification subtitle when the installer verification failed.
+        messages.pgettext('in-app-notifications', 'Click here to retry download'),
+      action: {
+        type: 'run-function',
+        button: {
+          onClick: () => this.context.restartAppUpgrade(),
+          'aria-label':
+            // TRANSLATORS: Accessibility label for the button to retry download of the installer.
+            messages.pgettext('in-app-notifications', 'Retry download of the installer'),
+        },
+      },
+    };
+
+    if (appUpgradeError) {
+      if (appUpgradeError === 'VERIFICATION_FAILED') {
+        return {
+          indicator: 'error',
+          title:
+            // TRANSLATORS: Notification title when the installer verification failed.
+            messages.pgettext('in-app-notifications', 'VERIFICATION FAILED'),
+          subtitle: [
+            {
+              content:
+                // TRANSLATORS: Notification subtitle when the installer verification failed.
+                messages.pgettext('in-app-notifications', 'Installer could not be verified.'),
+            },
+            retrySubtitle,
+          ],
+        };
+      }
+      if (appUpgradeError === 'DOWNLOAD_FAILED') {
+        return {
+          indicator: 'error',
+          title:
+            // TRANSLATORS: Notification title when the installer download failed.
+            messages.pgettext('in-app-notifications', 'DOWNLOAD FAILED'),
+          subtitle: [
+            {
+              content:
+                // TRANSLATORS: Notification subtitle when the installer download failed.
+                messages.pgettext('in-app-notifications', 'Could not download installer.'),
+            },
+            retrySubtitle,
+          ],
+        };
+      }
+    }
+
+    return {
+      indicator: 'error',
+      title:
+        // TRANSLATORS: Generic notification title when the app upgrade failed.
+        messages.pgettext('in-app-notifications', 'UPDATE FAILED'),
+      subtitle: [
+        {
+          content:
+            // TRANSLATORS: Generic notification subtitle when the app upgrade failed.
+            messages.pgettext('in-app-notifications', 'Could not upgrade the app.'),
+        },
+        retrySubtitle,
+      ],
+    };
+  }
+}