4 files changed, 90 insertions, 5 deletions
diff --git a/gui/src/shared/account-expiry.ts b/gui/src/shared/account-expiry.ts
index c6fa0c6d07..85d0d78315 100644
--- a/gui/src/shared/account-expiry.ts
+++ b/gui/src/shared/account-expiry.ts
@@ -1,4 +1,4 @@
-import { dateByAddingComponent, DateComponent, DateType, formatRelativeDate } from './date-helper';
+import { dateByAddingComponent, DateComponent, DateType, formatTimeLeft } from './date-helper';
 import { capitalize } from './string-helpers';
 
 export function hasExpired(expiry: DateType): boolean {
@@ -22,6 +22,6 @@ export function formatRemainingTime(
   expiry: DateType,
   shouldCapitalizeFirstLetter?: boolean,
 ): string {
-  const remaining = formatRelativeDate(new Date(), expiry, true);
+  const remaining = formatTimeLeft(new Date(), expiry);
   return shouldCapitalizeFirstLetter ? capitalize(remaining) : remaining;
 }
diff --git a/gui/src/shared/date-helper.ts b/gui/src/shared/date-helper.ts
index 7f232552b3..aeffb9a7e5 100644
--- a/gui/src/shared/date-helper.ts
+++ b/gui/src/shared/date-helper.ts
@@ -120,3 +120,27 @@ export function formatRelativeDate(
     }
   }
 }
+
+/**
+ * If a user has more than 2 years (730 days) left of time it should be displayed in whole years rounded down
+ * If a user has less than 2 years left (e.g. 729 days) then this should be displayed in days.
+ *
+ * @param fromDate
+ * @param toDate
+ */
+export const formatTimeLeft = (fromDate: DateType, toDate: DateType): string => {
+  const diff = new DateDiff(fromDate, toDate);
+  const years = Math.abs(diff.years);
+  const days = Math.abs(diff.days);
+
+  let suffix = 'left';
+  if (diff.milliseconds < 0) {
+    suffix = 'ago';
+  }
+
+  if (days < 730) {
+    return sprintf(messages.ngettext(`1 day ${suffix}`, `%d days ${suffix}`, days), days);
+  }
+
+  return sprintf(messages.ngettext(`1 year ${suffix}`, `%d years ${suffix}`, years), years);
+};
diff --git a/gui/test/e2e/settings.spec.ts b/gui/test/e2e/settings.spec.ts
index 6e6aef1d4b..e4b1f47108 100644
--- a/gui/test/e2e/settings.spec.ts
+++ b/gui/test/e2e/settings.spec.ts
@@ -1,7 +1,8 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { startApp } from './utils';
+import { sendMockIpcResponse, startApp } from './utils';
+import { IAccountData } from '../../src/shared/daemon-rpc-types';
 
 let appWindow: Page;
 
@@ -16,9 +17,47 @@ test.afterAll(async () => {
 });
 
 test('Settings Page', async () => {
-  const title = await appWindow.locator('h1');
+  const title = appWindow.locator('h1');
   await expect(title).toContainText('Settings');
 
-  const closeButton = await appWindow.locator('button[aria-label="Close"]');
+  const closeButton = appWindow.locator('button[aria-label="Close"]');
   await expect(closeButton).toBeVisible();
 });
+
+test('Account button should be displayed correctly', async () => {
+  const accountButton = appWindow.locator('button:has-text("Account")');
+  await expect(accountButton).toBeVisible();
+
+  let expiryText = accountButton.locator('span');
+  await expect(expiryText).toContainText(/29 days left/i);
+
+  /**
+   * 729 days left
+   */
+  await sendMockIpcResponse<IAccountData>({
+    channel: 'account-',
+    response: { expiry: new Date(Date.now() + 730 * 24 * 60 * 60 * 1000).toISOString() },
+  });
+  expiryText = accountButton.locator('span');
+  await expect(expiryText).toContainText(/729 days left/i);
+
+  /**
+   * 2 years left
+   */
+  await sendMockIpcResponse<IAccountData>({
+    channel: 'account-',
+    response: { expiry: new Date(Date.now() + 731 * 24 * 60 * 60 * 1000).toISOString() },
+  });
+  expiryText = accountButton.locator('span');
+  await expect(expiryText).toContainText(/2 years left/i);
+
+  /**
+   * Expiry 1 day ago should show 'out of time'
+   */
+  await sendMockIpcResponse<IAccountData>({
+    channel: 'account-',
+    response: { expiry: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString() },
+  });
+  expiryText = accountButton.locator('span');
+  await expect(expiryText).toContainText(/out of time/i);
+});
diff --git a/gui/test/unit/date-helper.spec.ts b/gui/test/unit/date-helper.spec.ts
index f86112a9a7..940751bb78 100644
--- a/gui/test/unit/date-helper.spec.ts
+++ b/gui/test/unit/date-helper.spec.ts
@@ -149,4 +149,26 @@ describe('Date helper', () => {
     const diff5 = date.formatRelativeDate('2031-04-25 13:37:20', '2021-01-01 13:37:10', true);
     expect(diff5).to.equal('10 years ago');
   });
+
+  it('should format time left correctly', () => {
+    expect(date.formatTimeLeft('2022-09-01', '2022-09-02')).to.equal('1 day left');
+    expect(date.formatTimeLeft('2022-09-01', '2022-09-05')).to.equal('4 days left');
+    expect(date.formatTimeLeft('2022-09-01', '2022-09-30')).to.equal('29 days left');
+    expect(date.formatTimeLeft('2022-09-01', '2023-09-01')).to.equal('365 days left');
+    expect(date.formatTimeLeft('2022-09-01', '2024-08-30')).to.equal('729 days left');
+    expect(date.formatTimeLeft('2022-09-01', '2024-08-31')).to.equal('2 years left');
+    expect(date.formatTimeLeft('2022-09-01', '2024-09-05')).to.equal('2 years left');
+    expect(date.formatTimeLeft('2022-09-01', '2025-08-31')).to.equal('2 years left');
+    expect(date.formatTimeLeft('2022-09-01', '2025-09-01')).to.equal('3 years left');
+
+    expect(date.formatTimeLeft('2022-09-02', '2022-09-01')).to.equal('1 day ago');
+    expect(date.formatTimeLeft('2022-09-05', '2022-09-01')).to.equal('4 days ago');
+    expect(date.formatTimeLeft('2022-09-30', '2022-09-01')).to.equal('29 days ago');
+    expect(date.formatTimeLeft('2023-09-01', '2022-09-01')).to.equal('365 days ago');
+    expect(date.formatTimeLeft('2024-08-30', '2022-09-01')).to.equal('729 days ago');
+    expect(date.formatTimeLeft('2024-08-31', '2022-09-01')).to.equal('2 years ago');
+    expect(date.formatTimeLeft('2024-09-05', '2022-09-01')).to.equal('2 years ago');
+    expect(date.formatTimeLeft('2025-08-31', '2022-09-01')).to.equal('2 years ago');
+    expect(date.formatTimeLeft('2025-09-01', '2022-09-01')).to.equal('3 years ago');
+  });
 });