DEV: extract until date formatting in a library function (#18003)

app/assets/javascripts/discourse/app/components/user-status-message.js

@@ -1,6 +1,6 @@
 import Component from "@ember/component";
 import { computed } from "@ember/object";
-import I18n from "I18n";
+import { until } from "discourse/lib/formatter";
 
 export default class UserStatusMessage extends Component {
   tagName = "";
@@ -12,16 +12,10 @@ export default class UserStatusMessage extends Component {
       return null;
     }
 
-    const timezone = this.currentUser.timezone;
+    return until(
-    const endsAt = moment.tz(this.status.ends_at, timezone);
+      this.status.ends_at,
-    const now = moment.tz(timezone);
+      this.currentUser.timezone,
-    const until = I18n.t("user_status.until");
+      this.currentUser.locale
-
+    );
-    if (now.isSame(endsAt, "day")) {
-      const localeData = moment.localeData(this.currentUser.locale);
-      return `${until} ${endsAt.format(localeData.longDateFormat("LT"))}`;
-    } else {
-      return `${until} ${endsAt.format("MMM D")}`;
-    }
   }
 }

app/assets/javascripts/discourse/app/lib/formatter.js

@@ -114,6 +114,21 @@ export function autoUpdatingRelativeAge(date, options) {
   );
 }
 
+export function until(untilDate, timezone, locale) {
+  const untilMoment = moment.tz(untilDate, timezone);
+  const now = moment.tz(timezone);
+
+  let untilFormatted;
+  if (now.isSame(untilMoment, "day")) {
+    const localeData = moment.localeData(locale);
+    untilFormatted = untilMoment.format(localeData.longDateFormat("LT"));
+  } else {
+    untilFormatted = untilMoment.format(I18n.t("dates.long_no_year_no_time"));
+  }
+
+  return `${I18n.t("until")} ${untilFormatted}`;
+}
+
 function wrapAgo(dateStr) {
   return I18n.t("dates.wrap_ago", { date: dateStr });
 }

app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js

@@ -5,6 +5,7 @@ import {
   longDate,
   number,
   relativeAge,
+  until,
   updateRelativeAge,
 } from "discourse/lib/formatter";
 import {
@@ -472,3 +473,36 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
     );
   });
 });
+
+discourseModule("Unit | Utility | formatter | until", function (hooks) {
+  hooks.afterEach(function () {
+    if (this.clock) {
+      this.clock.restore();
+    }
+  });
+
+  test("shows time if until moment is today", function (assert) {
+    const timezone = "UTC";
+    this.clock = fakeTime("2100-01-01 12:00:00.000Z", timezone);
+    const result = until("2100-01-01 13:00:00.000Z", timezone, "en");
+    assert.equal(result, "Until: 1:00 PM");
+  });
+
+  test("shows date if until moment is tomorrow", function (assert) {
+    const timezone = "UTC";
+    this.clock = fakeTime("2100-01-01 12:00:00.000Z", timezone);
+    const result = until("2100-01-02 12:00:00.000Z", timezone, "en");
+    assert.equal(result, "Until: Jan 2");
+  });
+
+  test("shows until moment in user's timezone", function (assert) {
+    const timezone = "Asia/Tbilisi";
+    const untilUTC = "13:00";
+    const untilTbilisi = "5:00 PM";
+
+    this.clock = fakeTime("2100-01-01 12:00:00.000Z", timezone);
+    const result = until(`2100-01-01 ${untilUTC}:00.000Z`, timezone, "en");
+
+    assert.equal(result, `Until: ${untilTbilisi}`);
+  });
+});

config/locales/client.en.yml

@@ -1803,7 +1803,6 @@ en:
       set_custom_status: "Set custom status"
       what_are_you_doing: "What are you doing?"
       remove_status: "Remove status"
-      until: "Until:"
 
     loading: "Loading..."
     errors:
@@ -4152,6 +4151,8 @@ en:
       description: 'Your welcome topic is the first thing new arrivals will read. Think of it as your one paragraph "elevator pitch" or "mission statement"'
       button_title: "Start Editing"
 
+    until: "Until:"
+
   # This section is exported to the javascript for i18n in the admin section
   admin_js:
     type_to_filter: "type to filter..."