Add system notification for when account has expired

3 files changed, 41 insertions, 6 deletions

diff --git a/gui/src/shared/notifications/account-expired.ts b/gui/src/shared/notifications/account-expired.ts
new file mode 100644
index 0000000000..ea600aa577
--- /dev/null
+++ b/gui/src/shared/notifications/account-expired.ts
@@ -0,0 +1,34 @@
+import { links } from '../../config.json';
+import { hasExpired } from '../account-expiry';
+import { TunnelState } from '../daemon-rpc-types';
+import { messages } from '../gettext';
+import { SystemNotification, SystemNotificationProvider } from './notification';
+
+interface AccountExpiredNotificaitonContext {
+  accountExpiry: string;
+  tunnelState: TunnelState;
+}
+
+export class AccountExpiredNotificationProvider implements SystemNotificationProvider {
+  public constructor(private context: AccountExpiredNotificaitonContext) {}
+
+  public mayDisplay() {
+    // Only show when disconnected since the error state handles this if the connection is closed
+    // due to account expiry.
+    return (
+      this.context.tunnelState.state === 'disconnected' && hasExpired(this.context.accountExpiry)
+    );
+  }
+
+  public getSystemNotification(): SystemNotification {
+    return {
+      message: messages.pgettext(
+        'notifications',
+        'You have no more VPN time left on this account.',
+      ),
+      critical: true,
+      presentOnce: { value: true, name: this.constructor.name },
+      action: { type: 'open-url', url: links.purchase, withAuth: true },
+    };
+  }
+}
diff --git a/gui/src/shared/notifications/account-expiry.ts b/gui/src/shared/notifications/close-to-account-expiry.ts
index db536c7405..3cf3d82826 100644
--- a/gui/src/shared/notifications/account-expiry.ts
+++ b/gui/src/shared/notifications/close-to-account-expiry.ts
@@ -2,7 +2,7 @@ import moment from 'moment';
 import { sprintf } from 'sprintf-js';
 import { links } from '../../config.json';
 import { messages } from '../../shared/gettext';
-import { hasExpired, formatRemainingTime } from '../account-expiry';
+import { formatDurationUntilExpiry, formatRemainingTime, hasExpired } from '../account-expiry';
 import {
   InAppNotification,
   InAppNotificationProvider,
@@ -10,15 +10,15 @@ import {
   SystemNotificationProvider,
 } from './notification';
 
-interface AccountExpiryContext {
+interface CloseToAccountExpiryNotificationContext {
   accountExpiry: string;
   locale: string;
   tooSoon?: boolean;
 }
 
-export class AccountExpiryNotificationProvider
+export class CloseToAccountExpiryNotificationProvider
   implements InAppNotificationProvider, SystemNotificationProvider {
-  public constructor(private context: AccountExpiryContext) {}
+  public constructor(private context: CloseToAccountExpiryNotificationContext) {}
 
   public mayDisplay() {
     const willHaveExpiredInThreeDays = moment(this.context.accountExpiry).isSameOrBefore(
@@ -37,7 +37,7 @@ export class AccountExpiryNotificationProvider
       // TRANSLATORS: %(duration)s - remaining time, e.g. "2 days"
       messages.pgettext('notifications', 'Account credit expires in %(duration)s'),
       {
-        duration: formatRemainingTime(this.context.accountExpiry, this.context.locale),
+        duration: formatDurationUntilExpiry(this.context.accountExpiry, this.context.locale),
       },
     );
 
diff --git a/gui/src/shared/notifications/notification.ts b/gui/src/shared/notifications/notification.ts
index ea067ea45b..98b50d4d24 100644
--- a/gui/src/shared/notifications/notification.ts
+++ b/gui/src/shared/notifications/notification.ts
@@ -29,7 +29,8 @@ export interface InAppNotificationProvider extends NotificationProvider {
   getInAppNotification(): InAppNotification | undefined;
 }
 
-export * from './account-expiry';
+export * from './account-expired';
+export * from './close-to-account-expiry';
 export * from './block-when-disconnected';
 export * from './connected';
 export * from './connecting';