Add duration unit format (#2483)

* chore: 🤖 add @formatjs/intl-durationformat to addons/core

* refactor: 💡 replace old duration format with new package

* chore: 🤖 remove intl-unofficial-duration-unit-format

* Add missing copyright headers

* test: 💍 add more test cases

---------

Co-authored-by: cameronperera <cameronperera@users.noreply.github.com>

addons/core/addon/helpers/format-time-duration.js

@@ -5,7 +5,8 @@
 
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
-import DurationUnitFormat from 'intl-unofficial-duration-unit-format';
+import { DurationFormat } from '@formatjs/intl-durationformat';
+import { secondsToDuration } from 'core/utils/seconds-to-duration';
 
 export default class extends Helper {
   // =services
@@ -19,12 +20,10 @@ export default class extends Helper {
    */
   compute([durationInMs]) {
     const durationInSeconds = durationInMs / 1000;
-    const durationFormat = new DurationUnitFormat(this.intl.primaryLocale, {
+    const durationFormat = new DurationFormat(this.intl.primaryLocale, {
       style: 'narrow',
-      format: '{days} {hours} {minutes} {seconds}',
-      round: true,
     });
 
-    return durationFormat.format(durationInSeconds);
+    return durationFormat.format(secondsToDuration(durationInSeconds));
   }
 }

addons/core/addon/helpers/time-remaining.js

@@ -5,7 +5,8 @@
 
 import Helper from '@ember/component/helper';
 import { inject as service } from '@ember/service';
-import DurationUnitFormat from 'intl-unofficial-duration-unit-format';
+import { DurationFormat } from '@formatjs/intl-durationformat';
+import { secondsToDuration } from 'core/utils/seconds-to-duration';
 
 export default class extends Helper {
   // =services
@@ -29,14 +30,13 @@ export default class extends Helper {
       difference > 0 ? Math.floor(difference / 1000) : 0;
 
     // Format the duration
-    const duration = new DurationUnitFormat(this.intl.primaryLocale, {
-      style: 'timer',
-      format: `{hours}:{minutes}:{seconds} ${this.intl.t(
-        'resources.session.remaining',
-      )}`,
+    const duration = new DurationFormat(this.intl.primaryLocale, {
+      style: 'digital',
     });
+    const formattedTime = duration.format(
+      secondsToDuration(differenceInSeconds),
+    );
 
-    // Return the formatted duration
-    return duration.format(differenceInSeconds);
+    return `${formattedTime} ${this.intl.t('resources.session.remaining')}`;
   }
 }

addons/core/addon/utils/seconds-to-duration.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+/**
+ * Takes in the number of seconds and converts to an object with corresponding
+ * values for each time duration. For example:
+ * { weeks: 0, days: 0, hours: 22, minutes: 15, seconds: 11 }
+ * @param {number} value
+ * @returns {object}
+ */
+export const secondsToDuration = (value) => {
+  const second = 1;
+  const minute = second * 60;
+  const hour = minute * 60;
+  const day = hour * 24;
+  const week = day * 7;
+
+  const weeks = Math.max(Math.floor(value / week), 0);
+  const days = Math.max(Math.floor((value % week) / day), 0);
+  const hours = Math.max(Math.floor((value % day) / hour), 0);
+  const minutes = Math.max(Math.floor((value % hour) / minute), 0);
+  const seconds = Math.max(Math.floor((value % minute) / second), 0);
+
+  return { weeks, days, hours, minutes, seconds };
+};