Update display of time left. Add unit and e2e tests

2 files changed, 26 insertions, 2 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);
+};