DEV: use the only source for time shortcut options on all date pickers (#16366)

app/assets/javascripts/discourse/app/components/future-date-input.js

@@ -1,7 +1,6 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import { and, empty, equal } from "@ember/object/computed";
-import { CLOSE_STATUS_TYPE } from "discourse/controllers/edit-topic-timer";
 import buildTimeframes from "discourse/lib/timeframes-builder";
 import I18n from "I18n";
 import { FORMAT } from "select-kit/components/future-date-input-selector";
@@ -9,17 +8,19 @@ import { FORMAT } from "select-kit/components/future-date-input-selector";
 export default Component.extend({
   selection: null,
   includeDateTime: true,
-  isCustom: equal("selection", "pick_date_and_time"),
+  isCustom: equal("selection", "custom"),
   displayDateAndTimePicker: and("includeDateTime", "isCustom"),
   displayLabel: null,
   labelClasses: null,
   timeInputDisabled: empty("_date"),
+  userTimezone: null,
 
   _date: null,
   _time: null,
 
   init() {
     this._super(...arguments);
+    this.userTimezone = this.currentUser.resolvedTimezone(this.currentUser);
 
     if (this.input) {
       const dateTime = moment(this.input);
@@ -28,7 +29,7 @@ export default Component.extend({
         this.set("selection", closestTimeframe.id);
       } else {
         this.setProperties({
-          selection: "pick_date_and_time",
+          selection: "custom",
           _date: dateTime.format("YYYY-MM-DD"),
           _time: dateTime.format("HH:mm"),
         });
@@ -73,26 +74,16 @@ export default Component.extend({
   },
 
   findClosestTimeframe(dateTime) {
-    const now = moment();
+    const options = {
-
-    const futureDateInputSelectorOptions = {
-      now,
-      day: now.day(),
       includeWeekend: this.includeWeekend,
       includeFarFuture: this.includeFarFuture,
       includeDateTime: this.includeDateTime,
       canScheduleNow: this.includeNow || false,
-      canScheduleToday: 24 - now.hour() > 6,
     };
 
-    return buildTimeframes(futureDateInputSelectorOptions).find((tf) => {
+    return buildTimeframes(this.userTimezone, options).find((tf) => {
-      const tfDateTime = tf.when(
+      if (tf.time) {
-        moment(),
+        const diff = tf.time.diff(dateTime);
-        this.statusType !== CLOSE_STATUS_TYPE ? 8 : 18
-      );
-
-      if (tfDateTime) {
-        const diff = tfDateTime.diff(dateTime);
         return 0 <= diff && diff < 60 * 1000;
       }
     });

app/assets/javascripts/discourse/app/lib/time-shortcut.js

@@ -1,14 +1,19 @@
 import {
   MOMENT_MONDAY,
   MOMENT_SUNDAY,
+  fourMonths,
   laterThisWeek,
   laterToday,
   nextBusinessWeekStart,
   nextMonth,
   now,
+  oneYear,
   sixMonths,
   thisWeekend,
+  thousandYears,
+  threeMonths,
   tomorrow,
+  twoMonths,
   twoWeeks,
 } from "discourse/lib/time-utils";
 
@@ -17,10 +22,13 @@ export const TIME_SHORTCUT_TYPES = {
   TOMORROW: "tomorrow",
   THIS_WEEKEND: "this_weekend",
   NEXT_MONTH: "next_month",
+  ONE_YEAR: "one_year",
+  FOREVER: "forever",
   CUSTOM: "custom",
   RELATIVE: "relative",
   LAST_CUSTOM: "last_custom",
   NONE: "none",
+  NOW: "now",
   START_OF_NEXT_BUSINESS_WEEK: "start_of_next_business_week",
   LATER_THIS_WEEK: "later_this_week",
   POST_LOCAL_DATE: "post_local_date",
@@ -39,36 +47,16 @@ export function defaultTimeShortcuts(timezone) {
 }
 
 export function specialShortcutOptions() {
-  return [
+  const shortcuts = timeShortcuts();
-    {
+  return [shortcuts.lastCustom(), shortcuts.custom(), shortcuts.none()];
-      icon: "undo",
-      id: TIME_SHORTCUT_TYPES.LAST_CUSTOM,
-      label: "time_shortcut.last_custom",
-      time: null,
-      hidden: true,
-    },
-    {
-      icon: "calendar-alt",
-      id: TIME_SHORTCUT_TYPES.CUSTOM,
-      label: "time_shortcut.custom",
-      time: null,
-      isCustomTimeShortcut: true,
-    },
-    {
-      icon: "ban",
-      id: TIME_SHORTCUT_TYPES.NONE,
-      label: "time_shortcut.none",
-      time: null,
-    },
-  ];
 }
 
 export function timeShortcuts(timezone) {
   return {
     laterToday() {
       return {
-        icon: "angle-right",
         id: TIME_SHORTCUT_TYPES.LATER_TODAY,
+        icon: "angle-right",
         label: "time_shortcut.later_today",
         time: laterToday(timezone),
         timeFormatKey: "dates.time",
@@ -76,8 +64,8 @@ export function timeShortcuts(timezone) {
     },
     tomorrow() {
       return {
-        icon: "far-sun",
         id: TIME_SHORTCUT_TYPES.TOMORROW,
+        icon: "far-sun",
         label: "time_shortcut.tomorrow",
         time: tomorrow(timezone),
         timeFormatKey: "dates.time_short_day",
@@ -85,8 +73,8 @@ export function timeShortcuts(timezone) {
     },
     laterThisWeek() {
       return {
-        icon: "angle-double-right",
         id: TIME_SHORTCUT_TYPES.LATER_THIS_WEEK,
+        icon: "angle-double-right",
         label: "time_shortcut.later_this_week",
         time: laterThisWeek(timezone),
         timeFormatKey: "dates.time_short_day",
@@ -94,8 +82,8 @@ export function timeShortcuts(timezone) {
     },
     thisWeekend() {
       return {
-        icon: "bed",
         id: TIME_SHORTCUT_TYPES.THIS_WEEKEND,
+        icon: "bed",
         label: "time_shortcut.this_weekend",
         time: thisWeekend(timezone),
         timeFormatKey: "dates.time_short_day",
@@ -103,8 +91,8 @@ export function timeShortcuts(timezone) {
     },
     monday() {
       return {
-        icon: "briefcase",
         id: TIME_SHORTCUT_TYPES.START_OF_NEXT_BUSINESS_WEEK,
+        icon: "briefcase",
         label:
           now(timezone).day() === MOMENT_MONDAY ||
           now(timezone).day() === MOMENT_SUNDAY
@@ -116,8 +104,8 @@ export function timeShortcuts(timezone) {
     },
     nextMonth() {
       return {
-        icon: "far-calendar-plus",
         id: TIME_SHORTCUT_TYPES.NEXT_MONTH,
+        icon: "far-calendar-plus",
         label: "time_shortcut.next_month",
         time: nextMonth(timezone),
         timeFormatKey: "dates.long_no_year",
@@ -125,20 +113,99 @@ export function timeShortcuts(timezone) {
     },
     twoWeeks() {
       return {
-        icon: "far-clock",
         id: "two_weeks",
+        icon: "far-clock",
         label: "time_shortcut.two_weeks",
         time: twoWeeks(timezone),
         timeFormatKey: "dates.long_no_year",
       };
     },
-    sixMonths() {
+    twoMonths() {
+      return {
+        id: "two_months",
+        icon: "far-calendar-plus",
+        label: "time_shortcut.two_months",
+        time: twoMonths(timezone),
+        timeFormatKey: "dates.long_no_year",
+      };
+    },
+    threeMonths() {
       return {
         icon: "far-calendar-plus",
+        id: "three_months",
+        label: "time_shortcut.three_months",
+        time: threeMonths(timezone),
+        timeFormatKey: "dates.long_no_year",
+      };
+    },
+    fourMonths() {
+      return {
+        id: "four_months",
+        icon: "far-calendar-plus",
+        label: "time_shortcut.four_months",
+        time: fourMonths(timezone),
+        timeFormatKey: "dates.long_no_year",
+      };
+    },
+    sixMonths() {
+      return {
         id: "six_months",
+        icon: "far-calendar-plus",
         label: "time_shortcut.six_months",
         time: sixMonths(timezone),
-        timeFormatKey: "dates.long_no_year",
+        timeFormatKey: "dates.long_with_year",
+      };
+    },
+    oneYear() {
+      return {
+        id: TIME_SHORTCUT_TYPES.ONE_YEAR,
+        icon: "far-calendar-plus",
+        label: "time_shortcut.one_year",
+        time: oneYear(timezone),
+        timeFormatKey: "dates.long_with_year",
+      };
+    },
+    forever() {
+      return {
+        id: TIME_SHORTCUT_TYPES.FOREVER,
+        icon: "gavel",
+        label: "time_shortcut.forever",
+        time: thousandYears(timezone),
+        timeFormatKey: "dates.long_with_year",
+      };
+    },
+    custom() {
+      return {
+        icon: "calendar-alt",
+        id: TIME_SHORTCUT_TYPES.CUSTOM,
+        label: "time_shortcut.custom",
+        time: null,
+        isCustomTimeShortcut: true,
+      };
+    },
+    lastCustom() {
+      return {
+        icon: "undo",
+        id: TIME_SHORTCUT_TYPES.LAST_CUSTOM,
+        label: "time_shortcut.last_custom",
+        time: null,
+        hidden: true,
+      };
+    },
+    none() {
+      return {
+        icon: "ban",
+        id: TIME_SHORTCUT_TYPES.NONE,
+        label: "time_shortcut.none",
+        time: null,
+      };
+    },
+    now() {
+      return {
+        id: TIME_SHORTCUT_TYPES.NOW,
+        icon: "magic",
+        label: "time_shortcut.now",
+        time: now(timezone),
       };
     },
   };

app/assets/javascripts/discourse/app/lib/time-utils.js

@@ -47,10 +47,30 @@ export function twoWeeks(timezone) {
   return startOfDay(now(timezone).add(2, "weeks").day(MOMENT_MONDAY));
 }
 
+export function twoMonths(timezone) {
+  return startOfDay(now(timezone).add(2, "months").startOf("month"));
+}
+
+export function threeMonths(timezone) {
+  return startOfDay(now(timezone).add(3, "months").startOf("month"));
+}
+
+export function fourMonths(timezone) {
+  return startOfDay(now(timezone).add(4, "months").startOf("month"));
+}
+
 export function sixMonths(timezone) {
   return startOfDay(now(timezone).add(6, "months").startOf("month"));
 }
 
+export function oneYear(timezone) {
+  return startOfDay(now(timezone).add(1, "years").startOf("month"));
+}
+
+export function thousandYears(timezone) {
+  return startOfDay(now(timezone).add(1000, "years").startOf("month"));
+}
+
 export function nextBusinessWeekStart(timezone) {
   return startOfDay(now(timezone).add(7, "days")).day(MOMENT_MONDAY);
 }

app/assets/javascripts/discourse/app/lib/timeframes-builder.js

@@ -1,133 +1,89 @@
-const TIMEFRAME_BASE = {
+import {
-  enabled: () => true,
+  TIME_SHORTCUT_TYPES,
-  when: () => null,
+  timeShortcuts,
-  icon: "briefcase",
+} from "discourse/lib/time-shortcut";
-  displayWhen: true,
+import I18n from "I18n";
-};
 
-function buildTimeframe(opts) {
+export default function buildTimeframes(timezone, options = {}) {
-  return Object.assign({}, TIMEFRAME_BASE, opts);
+  const timeframes = allTimeframes(timezone);
+  formatTime(timeframes);
+  processDynamicTimeframes(timeframes, options, timezone);
+  return timeframes.filter((t) => !t.hidden);
 }
 
-const TIMEFRAMES = [
+function allTimeframes(timezone) {
-  buildTimeframe({
+  const shortcuts = timeShortcuts(timezone);
-    id: "now",
-    format: "h:mm a",
-    enabled: (opts) => opts.canScheduleNow,
-    when: (time) => time.add(1, "minute"),
-    icon: "magic",
-  }),
-  buildTimeframe({
-    id: "later_today",
-    format: "h a",
-    enabled: (opts) => opts.canScheduleToday,
-    when: (time) => time.hour(18).minute(0),
-    icon: "far-moon",
-  }),
-  buildTimeframe({
-    id: "tomorrow",
-    format: "ddd, h a",
-    when: (time, timeOfDay) => time.add(1, "day").hour(timeOfDay).minute(0),
-    icon: "far-sun",
-  }),
-  buildTimeframe({
-    id: "later_this_week",
-    format: "ddd, h a",
-    enabled: (opts) => opts.day > 0 && opts.day < 4,
-    when: (time, timeOfDay) => time.add(2, "day").hour(timeOfDay).minute(0),
-  }),
-  buildTimeframe({
-    id: "this_weekend",
-    format: "ddd, h a",
-    enabled: (opts) => opts.day > 0 && opts.day < 5 && opts.includeWeekend,
-    when: (time, timeOfDay) => time.day(6).hour(timeOfDay).minute(0),
-    icon: "bed",
-  }),
-  buildTimeframe({
-    id: "next_week",
-    format: "ddd, h a",
-    enabled: (opts) => opts.day !== 0,
-    when: (time, timeOfDay) =>
-      time.add(1, "week").day(1).hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "two_weeks",
-    format: "MMM D",
-    when: (time, timeOfDay) => time.add(2, "week").hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "next_month",
-    format: "MMM D",
-    enabled: (opts) => opts.now.date() !== moment().endOf("month").date(),
-    when: (time, timeOfDay) =>
-      time.add(1, "month").startOf("month").hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "two_months",
-    format: "MMM D",
-    enabled: () => true,
-    when: (time, timeOfDay) =>
-      time.add(2, "month").startOf("month").hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "three_months",
-    format: "MMM D",
-    enabled: () => true,
-    when: (time, timeOfDay) =>
-      time.add(3, "month").startOf("month").hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "four_months",
-    format: "MMM D",
-    enabled: () => true,
-    when: (time, timeOfDay) =>
-      time.add(4, "month").startOf("month").hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "six_months",
-    format: "MMM D",
-    enabled: () => true,
-    when: (time, timeOfDay) =>
-      time.add(6, "month").startOf("month").hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "one_year",
-    format: "MMM D",
-    enabled: (opts) => opts.includeFarFuture,
-    when: (time, timeOfDay) =>
-      time.add(1, "year").startOf("day").hour(timeOfDay).minute(0),
-    icon: "briefcase",
-  }),
-  buildTimeframe({
-    id: "forever",
-    enabled: (opts) => opts.includeFarFuture,
-    when: (time, timeOfDay) => time.add(1000, "year").hour(timeOfDay).minute(0),
-    icon: "gavel",
-    displayWhen: false,
-  }),
-  buildTimeframe({
-    id: "pick_date_and_time",
-    enabled: (opts) => opts.includeDateTime,
-    icon: "far-calendar-plus",
-  }),
-];
 
-let _timeframeById = null;
+  return [
-export function timeframeDetails(id) {
+    shortcuts.now(),
-  if (!_timeframeById) {
+    shortcuts.laterToday(),
-    _timeframeById = {};
+    shortcuts.tomorrow(),
-    TIMEFRAMES.forEach((t) => (_timeframeById[t.id] = t));
+    shortcuts.laterThisWeek(),
+    shortcuts.thisWeekend(),
+    shortcuts.monday(),
+    shortcuts.twoWeeks(),
+    shortcuts.nextMonth(),
+    shortcuts.twoMonths(),
+    shortcuts.threeMonths(),
+    shortcuts.fourMonths(),
+    shortcuts.sixMonths(),
+    shortcuts.oneYear(),
+    shortcuts.forever(),
+    shortcuts.custom(),
+  ];
+}
+
+function processDynamicTimeframes(timeframes, options, timezone) {
+  const now = moment.tz(timezone);
+
+  if (
+    !options.includeWeekend ||
+    now.day() === 0 ||
+    now.day() === 5 ||
+    now.day() === 6
+  ) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.THIS_WEEKEND);
+  }
+
+  if (now.day() === 0) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.START_OF_NEXT_BUSINESS_WEEK);
+  }
+
+  if (now.date() === moment.tz(timezone).endOf("month").date()) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.NEXT_MONTH);
+  }
+
+  if (24 - now.hour() <= 6) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.LATER_TODAY);
+  }
+
+  if (now.day() === 0 || now.day() >= 4) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.LATER_THIS_WEEK);
+  }
+
+  if (!options.includeFarFuture) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.ONE_YEAR);
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.FOREVER);
+  }
+
+  if (!options.includeDateTime) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.CUSTOM);
+  }
+
+  if (!options.canScheduleNow) {
+    hideTimeframe(timeframes, TIME_SHORTCUT_TYPES.NOW);
   }
-  return _timeframeById[id];
 }
 
-export default function buildTimeframes(options = {}) {
+function hideTimeframe(timeframes, timeframeId) {
-  return TIMEFRAMES.filter((tf) => tf.enabled(options));
+  const timeframe = timeframes.findBy("id", timeframeId);
+  timeframe.hidden = true;
+}
+
+function formatTime(options) {
+  options.forEach((option) => {
+    if (option.time && option.timeFormatKey) {
+      option.timeFormatted = option.time.format(I18n.t(option.timeFormatKey));
+    }
+  });
 }

app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs

@@ -14,7 +14,7 @@
       onChangeInput=onChangeInput
       onChange=(action (mut selection))
       options=(hash
-        none="topic.auto_update_input.none"
+        none="time_shortcut.select_timeframe"
       )
     }}
   </div>

app/assets/javascripts/discourse/tests/acceptance/admin-silence-user-test.js

@@ -1,6 +1,7 @@
 import {
   acceptance,
   fakeTime,
+  loggedInUser,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import { click, visit } from "@ember/test-helpers";
@@ -12,7 +13,7 @@ acceptance("Admin - Silence User", function (needs) {
   needs.user();
 
   needs.hooks.beforeEach(() => {
-    const timezone = moment.tz.guess();
+    const timezone = loggedInUser().resolvedTimezone(loggedInUser());
     clock = fakeTime("2100-05-03T08:00:00", timezone, true); // Monday morning
   });
 
@@ -32,19 +33,19 @@ acceptance("Admin - Silence User", function (needs) {
     );
 
     const expected = [
-      I18n.t("topic.auto_update_input.later_today"),
+      I18n.t("time_shortcut.later_today"),
-      I18n.t("topic.auto_update_input.tomorrow"),
+      I18n.t("time_shortcut.tomorrow"),
-      I18n.t("topic.auto_update_input.later_this_week"),
+      I18n.t("time_shortcut.later_this_week"),
-      I18n.t("topic.auto_update_input.next_week"),
+      I18n.t("time_shortcut.start_of_next_business_week_alt"),
-      I18n.t("topic.auto_update_input.two_weeks"),
+      I18n.t("time_shortcut.two_weeks"),
-      I18n.t("topic.auto_update_input.next_month"),
+      I18n.t("time_shortcut.next_month"),
-      I18n.t("topic.auto_update_input.two_months"),
+      I18n.t("time_shortcut.two_months"),
-      I18n.t("topic.auto_update_input.three_months"),
+      I18n.t("time_shortcut.three_months"),
-      I18n.t("topic.auto_update_input.four_months"),
+      I18n.t("time_shortcut.four_months"),
-      I18n.t("topic.auto_update_input.six_months"),
+      I18n.t("time_shortcut.six_months"),
-      I18n.t("topic.auto_update_input.one_year"),
+      I18n.t("time_shortcut.one_year"),
-      I18n.t("topic.auto_update_input.forever"),
+      I18n.t("time_shortcut.forever"),
-      I18n.t("topic.auto_update_input.pick_date_and_time"),
+      I18n.t("time_shortcut.custom"),
     ];
 
     assert.deepEqual(options, expected, "options are correct");

app/assets/javascripts/discourse/tests/acceptance/admin-suspend-user-test.js

@@ -3,6 +3,7 @@ import {
   count,
   exists,
   fakeTime,
+  loggedInUser,
   query,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -111,7 +112,7 @@ acceptance("Admin - Suspend User - timeframe choosing", function (needs) {
   needs.user();
 
   needs.hooks.beforeEach(() => {
-    const timezone = moment.tz.guess();
+    const timezone = loggedInUser().resolvedTimezone(loggedInUser());
     clock = fakeTime("2100-05-03T08:00:00", timezone, true); // Monday morning
   });
 
@@ -131,19 +132,19 @@ acceptance("Admin - Suspend User - timeframe choosing", function (needs) {
     );
 
     const expected = [
-      I18n.t("topic.auto_update_input.later_today"),
+      I18n.t("time_shortcut.later_today"),
-      I18n.t("topic.auto_update_input.tomorrow"),
+      I18n.t("time_shortcut.tomorrow"),
-      I18n.t("topic.auto_update_input.later_this_week"),
+      I18n.t("time_shortcut.later_this_week"),
-      I18n.t("topic.auto_update_input.next_week"),
+      I18n.t("time_shortcut.start_of_next_business_week_alt"),
-      I18n.t("topic.auto_update_input.two_weeks"),
+      I18n.t("time_shortcut.two_weeks"),
-      I18n.t("topic.auto_update_input.next_month"),
+      I18n.t("time_shortcut.next_month"),
-      I18n.t("topic.auto_update_input.two_months"),
+      I18n.t("time_shortcut.two_months"),
-      I18n.t("topic.auto_update_input.three_months"),
+      I18n.t("time_shortcut.three_months"),
-      I18n.t("topic.auto_update_input.four_months"),
+      I18n.t("time_shortcut.four_months"),
-      I18n.t("topic.auto_update_input.six_months"),
+      I18n.t("time_shortcut.six_months"),
-      I18n.t("topic.auto_update_input.one_year"),
+      I18n.t("time_shortcut.one_year"),
-      I18n.t("topic.auto_update_input.forever"),
+      I18n.t("time_shortcut.forever"),
-      I18n.t("topic.auto_update_input.pick_date_and_time"),
+      I18n.t("time_shortcut.custom"),
     ];
 
     assert.deepEqual(options, expected, "options are correct");

app/assets/javascripts/discourse/tests/acceptance/create-invite-modal-test.js

@@ -4,6 +4,7 @@ import {
   count,
   exists,
   fakeTime,
+  loggedInUser,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "I18n";
@@ -190,7 +191,7 @@ acceptance(
     });
 
     needs.hooks.beforeEach(() => {
-      const timezone = moment.tz.guess();
+      const timezone = loggedInUser().resolvedTimezone(loggedInUser());
       clock = fakeTime("2100-05-03T08:00:00", timezone, true); // Monday morning
     });
 
@@ -211,17 +212,17 @@ acceptance(
       );
 
       const expected = [
-        I18n.t("topic.auto_update_input.later_today"),
+        I18n.t("time_shortcut.later_today"),
-        I18n.t("topic.auto_update_input.tomorrow"),
+        I18n.t("time_shortcut.tomorrow"),
-        I18n.t("topic.auto_update_input.later_this_week"),
+        I18n.t("time_shortcut.later_this_week"),
-        I18n.t("topic.auto_update_input.next_week"),
+        I18n.t("time_shortcut.start_of_next_business_week_alt"),
-        I18n.t("topic.auto_update_input.two_weeks"),
+        I18n.t("time_shortcut.two_weeks"),
-        I18n.t("topic.auto_update_input.next_month"),
+        I18n.t("time_shortcut.next_month"),
-        I18n.t("topic.auto_update_input.two_months"),
+        I18n.t("time_shortcut.two_months"),
-        I18n.t("topic.auto_update_input.three_months"),
+        I18n.t("time_shortcut.three_months"),
-        I18n.t("topic.auto_update_input.four_months"),
+        I18n.t("time_shortcut.four_months"),
-        I18n.t("topic.auto_update_input.six_months"),
+        I18n.t("time_shortcut.six_months"),
-        I18n.t("topic.auto_update_input.pick_date_and_time"),
+        I18n.t("time_shortcut.custom"),
       ];
 
       assert.deepEqual(options, expected, "options are correct");

app/assets/javascripts/discourse/tests/acceptance/topic-set-slow-mode-test.js

@@ -1,6 +1,7 @@
 import {
   acceptance,
   fakeTime,
+  loggedInUser,
   queryAll,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -28,7 +29,7 @@ acceptance("Topic - Set Slow Mode", function (needs) {
   });
 
   needs.hooks.beforeEach(() => {
-    const timezone = moment.tz.guess();
+    const timezone = loggedInUser().resolvedTimezone(loggedInUser());
     clock = fakeTime("2100-05-03T08:00:00", timezone, true); // Monday morning
   });
 
@@ -51,17 +52,17 @@ acceptance("Topic - Set Slow Mode", function (needs) {
     );
 
     const expected = [
-      I18n.t("topic.auto_update_input.later_today"),
+      I18n.t("time_shortcut.later_today"),
-      I18n.t("topic.auto_update_input.tomorrow"),
+      I18n.t("time_shortcut.tomorrow"),
-      I18n.t("topic.auto_update_input.later_this_week"),
+      I18n.t("time_shortcut.later_this_week"),
-      I18n.t("topic.auto_update_input.next_week"),
+      I18n.t("time_shortcut.start_of_next_business_week_alt"),
-      I18n.t("topic.auto_update_input.two_weeks"),
+      I18n.t("time_shortcut.two_weeks"),
-      I18n.t("topic.auto_update_input.next_month"),
+      I18n.t("time_shortcut.next_month"),
-      I18n.t("topic.auto_update_input.two_months"),
+      I18n.t("time_shortcut.two_months"),
-      I18n.t("topic.auto_update_input.three_months"),
+      I18n.t("time_shortcut.three_months"),
-      I18n.t("topic.auto_update_input.four_months"),
+      I18n.t("time_shortcut.four_months"),
-      I18n.t("topic.auto_update_input.six_months"),
+      I18n.t("time_shortcut.six_months"),
-      I18n.t("topic.auto_update_input.pick_date_and_time"),
+      I18n.t("time_shortcut.custom"),
     ];
 
     assert.deepEqual(options, expected, "options are correct");

app/assets/javascripts/discourse/tests/acceptance/topic-slow-mode-test.js

@@ -52,7 +52,7 @@ acceptance("Topic - Slow Mode - enabled", function (needs) {
     // and date picker and time picker wouldn't be rendered)
     assert.strictEqual(
       query("div.enabled-until span.name").innerText,
-      I18n.t("topic.auto_update_input.pick_date_and_time"),
+      I18n.t("time_shortcut.custom"),
       "enabled until combobox is switched to the option Pick Date and Time"
     );
 

app/assets/javascripts/discourse/tests/acceptance/user-preferences-notifications-test.js

@@ -3,6 +3,7 @@ import {
   count,
   exists,
   fakeTime,
+  loggedInUser,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import { click, visit } from "@ember/test-helpers";
@@ -115,7 +116,7 @@ acceptance("User Notifications - Users - Ignore User", function (needs) {
   needs.user();
 
   needs.hooks.beforeEach(() => {
-    const timezone = moment.tz.guess();
+    const timezone = loggedInUser().resolvedTimezone(loggedInUser());
     clock = fakeTime("2100-05-03T08:00:00", timezone, true); // Monday morning
   });
 
@@ -136,19 +137,19 @@ acceptance("User Notifications - Users - Ignore User", function (needs) {
     );
 
     const expected = [
-      I18n.t("topic.auto_update_input.later_today"),
+      I18n.t("time_shortcut.later_today"),
-      I18n.t("topic.auto_update_input.tomorrow"),
+      I18n.t("time_shortcut.tomorrow"),
-      I18n.t("topic.auto_update_input.later_this_week"),
+      I18n.t("time_shortcut.later_this_week"),
-      I18n.t("topic.auto_update_input.this_weekend"),
+      I18n.t("time_shortcut.this_weekend"),
-      I18n.t("topic.auto_update_input.next_week"),
+      I18n.t("time_shortcut.start_of_next_business_week_alt"),
-      I18n.t("topic.auto_update_input.two_weeks"),
+      I18n.t("time_shortcut.two_weeks"),
-      I18n.t("topic.auto_update_input.next_month"),
+      I18n.t("time_shortcut.next_month"),
-      I18n.t("topic.auto_update_input.two_months"),
+      I18n.t("time_shortcut.two_months"),
-      I18n.t("topic.auto_update_input.three_months"),
+      I18n.t("time_shortcut.three_months"),
-      I18n.t("topic.auto_update_input.four_months"),
+      I18n.t("time_shortcut.four_months"),
-      I18n.t("topic.auto_update_input.six_months"),
+      I18n.t("time_shortcut.six_months"),
-      I18n.t("topic.auto_update_input.one_year"),
+      I18n.t("time_shortcut.one_year"),
-      I18n.t("topic.auto_update_input.forever"),
+      I18n.t("time_shortcut.forever"),
     ];
 
     assert.deepEqual(options, expected, "options are correct");

app/assets/javascripts/discourse/tests/integration/components/future-date-input-selector-test.js

@@ -29,7 +29,7 @@ discourseModule(
       template: hbs`
         {{future-date-input-selector
           options=(hash
-            none="topic.auto_update_input.none"
+            none="time_shortcut.select_timeframe"
           )
         }}
       `,
@@ -42,7 +42,7 @@ discourseModule(
 
         assert.ok(
           this.subject.header().label() ===
-            I18n.t("topic.auto_update_input.none"),
+            I18n.t("time_shortcut.select_timeframe"),
           "Default text is rendered"
         );
 
@@ -65,9 +65,7 @@ discourseModule(
       async test(assert) {
         await this.subject.expand();
         const options = getOptions();
-        const customDateAndTime = I18n.t(
+        const customDateAndTime = I18n.t("time_shortcut.custom");
-          "topic.auto_update_input.pick_date_and_time"
-        );
 
         assert.ok(options.includes(customDateAndTime));
       },

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

@@ -2,22 +2,6 @@ import { module, test } from "qunit";
 import { fakeTime } from "discourse/tests/helpers/qunit-helpers";
 import buildTimeframes from "discourse/lib/timeframes-builder";
 
-const DEFAULT_OPTIONS = {
-  includeWeekend: null,
-  includeFarFuture: null,
-  includeDateTime: null,
-  canScheduleNow: false,
-};
-
-function buildOptions(now, opts) {
-  return Object.assign(
-    {},
-    DEFAULT_OPTIONS,
-    { now, day: now.day(), canScheduleToday: 24 - now.hour() > 6 },
-    opts
-  );
-}
-
 module("Unit | Lib | timeframes-builder", function (hooks) {
   hooks.afterEach(function () {
     if (this.clock) {
@@ -33,7 +17,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
       "later_today",
       "tomorrow",
       "later_this_week",
-      "next_week",
+      "start_of_next_business_week",
       "two_weeks",
       "next_month",
       "two_months",
@@ -42,10 +26,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
       "six_months",
     ];
 
-    assert.deepEqual(
+    assert.deepEqual(buildTimeframes(timezone).mapBy("id"), expected);
-      buildTimeframes(buildOptions(moment())).mapBy("id"),
-      expected
-    );
   });
 
   test("doesn't output 'Next Week' on Sundays", function (assert) {
@@ -53,7 +34,9 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
     this.clock = fakeTime("2100-06-13T08:00:00", timezone, true); // Sunday
 
     assert.ok(
-      !buildTimeframes(buildOptions(moment())).mapBy("id").includes("next_week")
+      !buildTimeframes(timezone)
+        .mapBy("id")
+        .includes("start_of_next_business_week")
     );
   });
 
@@ -62,7 +45,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
     this.clock = fakeTime("2100-06-07T08:00:00", timezone, true); // Monday
 
     assert.ok(
-      buildTimeframes(buildOptions(moment(), { includeWeekend: true }))
+      buildTimeframes(timezone, { includeWeekend: true })
         .mapBy("id")
         .includes("this_weekend")
     );
@@ -73,7 +56,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
     this.clock = fakeTime("2100-04-23 18:00:00", timezone, true); // Friday
 
     assert.ok(
-      !buildTimeframes(buildOptions(moment(), { includeWeekend: true }))
+      !buildTimeframes(timezone, { includeWeekend: true })
         .mapBy("id")
         .includes("this_weekend")
     );
@@ -98,7 +81,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
     this.clock = fakeTime("2100-04-25 18:00:00", timezone, true); // Sunday
 
     assert.ok(
-      !buildTimeframes(buildOptions(moment(), { includeWeekend: true }))
+      !buildTimeframes(timezone, { includeWeekend: true })
         .mapBy("id")
         .includes("this_weekend")
     );
@@ -107,7 +90,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
   test("outputs 'Later This Week' instead of 'Later Today' at the end of the day", function (assert) {
     const timezone = moment.tz.guess();
     this.clock = fakeTime("2100-04-19 18:00:00", timezone, true); // Monday evening
-    const timeframes = buildTimeframes(buildOptions(moment())).mapBy("id");
+    const timeframes = buildTimeframes(timezone).mapBy("id");
 
     assert.notOk(timeframes.includes("later_today"));
     assert.ok(timeframes.includes("later_this_week"));
@@ -116,7 +99,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
   test("doesn't output 'Later This Week' on Thursdays", function (assert) {
     const timezone = moment.tz.guess();
     this.clock = fakeTime("2100-04-22 18:00:00", timezone, true); // Thursday evening
-    const timeframes = buildTimeframes(buildOptions(moment())).mapBy("id");
+    const timeframes = buildTimeframes(timezone).mapBy("id");
 
     assert.notOk(timeframes.includes("later_this_week"));
   });
@@ -137,7 +120,7 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
     */
     const timezone = moment.tz.guess();
     this.clock = fakeTime("2100-04-25 18:00:00", timezone, true); // Sunday evening
-    const timeframes = buildTimeframes(buildOptions(moment())).mapBy("id");
+    const timeframes = buildTimeframes(timezone).mapBy("id");
 
     assert.notOk(timeframes.includes("later_this_week"));
   });
@@ -145,8 +128,42 @@ module("Unit | Lib | timeframes-builder", function (hooks) {
   test("doesn't output 'Next Month' on the last day of the month", function (assert) {
     const timezone = moment.tz.guess();
     this.clock = fakeTime("2100-04-30 18:00:00", timezone, true); // The last day of April
-    const timeframes = buildTimeframes(buildOptions(moment())).mapBy("id");
+    const timeframes = buildTimeframes(timezone).mapBy("id");
 
     assert.notOk(timeframes.includes("next_month"));
   });
+
+  test("shows far future options if enabled", function (assert) {
+    const timezone = moment.tz.guess();
+    this.clock = fakeTime("2100-06-07T08:00:00", timezone, true); // Monday
+
+    const timeframes = buildTimeframes(timezone, {
+      includeFarFuture: true,
+    }).mapBy("id");
+
+    assert.ok(timeframes.includes("one_year"));
+    assert.ok(timeframes.includes("forever"));
+  });
+
+  test("shows the pick-date-and-time option if enabled", function (assert) {
+    const timezone = moment.tz.guess();
+    this.clock = fakeTime("2100-06-07T08:00:00", timezone, true); // Monday
+
+    const timeframes = buildTimeframes(timezone, {
+      includeDateTime: true,
+    }).mapBy("id");
+
+    assert.ok(timeframes.includes("custom"));
+  });
+
+  test("shows the now option if enabled", function (assert) {
+    const timezone = moment.tz.guess();
+    this.clock = fakeTime("2100-06-07T08:00:00", timezone, true); // Monday
+
+    const timeframes = buildTimeframes(timezone, {
+      canScheduleNow: true,
+    }).mapBy("id");
+
+    assert.ok(timeframes.includes("now"));
+  });
 });

app/assets/javascripts/select-kit/addon/components/future-date-input-selector.js

@@ -1,5 +1,4 @@
 import ComboBoxComponent from "select-kit/components/combo-box";
-import DatetimeMixin from "select-kit/components/future-date-input-selector/mixin";
 import { computed } from "@ember/object";
 import { equal } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
@@ -8,10 +7,11 @@ import I18n from "I18n";
 
 export const FORMAT = "YYYY-MM-DD HH:mmZ";
 
-export default ComboBoxComponent.extend(DatetimeMixin, {
+export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["future-date-input-selector"],
   classNames: ["future-date-input-selector"],
-  isCustom: equal("value", "pick_date_and_time"),
+  isCustom: equal("value", "custom"),
+  userTimezone: null,
 
   selectKitOptions: {
     autoInsertNoneItem: false,
@@ -19,37 +19,38 @@ export default ComboBoxComponent.extend(DatetimeMixin, {
       "future-date-input-selector/future-date-input-selector-header",
   },
 
+  init() {
+    this._super(...arguments);
+    this.userTimezone = this.currentUser.resolvedTimezone(this.currentUser);
+  },
+
   modifyComponentForRow() {
     return "future-date-input-selector/future-date-input-selector-row";
   },
 
   content: computed("statusType", function () {
-    const now = moment();
     const opts = {
-      now,
-      day: now.day(),
       includeWeekend: this.includeWeekend,
       includeFarFuture: this.includeFarFuture,
       includeDateTime: this.includeDateTime,
       canScheduleNow: this.includeNow || false,
-      canScheduleToday: 24 - now.hour() > 6,
     };
 
-    return buildTimeframes(opts).map((tf) => {
+    return buildTimeframes(this.userTimezone, opts).map((tf) => {
       return {
         id: tf.id,
-        name: I18n.t(`topic.auto_update_input.${tf.id}`),
+        name: I18n.t(tf.label),
-        datetime: this._computeDatetimeForValue(tf.id),
+        time: tf.time,
-        icons: this._computeIconsForValue(tf.id),
+        timeFormatted: tf.timeFormatted,
       };
     });
   }),
 
   actions: {
     onChange(value) {
-      if (value !== "pick_date_and_time") {
+      if (value !== "custom" && !isEmpty(value)) {
-        const { time } = this._updateAt(value);
+        const { time } = this.content.find((x) => x.id === value);
-        if (time && !isEmpty(value)) {
+        if (time) {
           this.attrs.onChangeInput &&
             this.attrs.onChangeInput(time.locale("en").format(FORMAT));
         }

app/assets/javascripts/select-kit/addon/components/future-date-input-selector/mixin.js

@@ -1,50 +0,0 @@
-import { CLOSE_STATUS_TYPE } from "discourse/controllers/edit-topic-timer";
-import Mixin from "@ember/object/mixin";
-import { isNone } from "@ember/utils";
-import { timeframeDetails } from "discourse/lib/timeframes-builder";
-
-export default Mixin.create({
-  _computeIconsForValue(value) {
-    let { icon } = this._updateAt(value);
-
-    if (icon) {
-      return icon.split(",");
-    }
-
-    return [];
-  },
-
-  _computeDatetimeForValue(value) {
-    if (isNone(value)) {
-      return null;
-    }
-
-    let { time } = this._updateAt(value);
-    if (time) {
-      let details = timeframeDetails(value);
-      if (!details.displayWhen) {
-        time = null;
-      }
-      if (time && details.format) {
-        return time.format(details.format);
-      }
-    }
-    return time;
-  },
-
-  _updateAt(selection) {
-    const details = timeframeDetails(selection);
-
-    if (details) {
-      return {
-        time: details.when(
-          moment(),
-          this.statusType !== CLOSE_STATUS_TYPE ? 8 : 18
-        ),
-        icon: details.icon,
-      };
-    }
-
-    return { time: moment() };
-  },
-});

app/assets/javascripts/select-kit/addon/templates/components/future-date-input-selector/future-date-input-selector-header.hbs

@@ -11,9 +11,9 @@
     selectKit=selectKit
   }}
 
-  {{#if selectedContent.datetime}}
+  {{#if selectedContent.timeFormatted}}
     <span class="future-date-input-selector-datetime">
-      {{selectedContent.datetime}}
+      {{selectedContent.timeFormatted}}
     </span>
   {{/if}}
 

app/assets/javascripts/select-kit/addon/templates/components/future-date-input-selector/future-date-input-selector-row.hbs

@@ -1,13 +1,13 @@
 {{#if item.icons}}
   <div class="future-date-input-selector-icons">
-    {{#each item.icons as |icon|}} {{d-icon icon}} {{/each}}
+    {{d-icon item.icon}}
   </div>
 {{/if}}
 
 <span class="name">{{label}}</span>
 
-{{#if item.datetime}}
+{{#if item.timeFormatted}}
   <span class="future-date-input-selector-datetime">
-    {{item.datetime}}
+    {{item.timeFormatted}}
   </span>
 {{/if}}

config/locales/client.en.yml

@@ -651,11 +651,17 @@ en:
       start_of_next_business_week_alt: "Next Monday"
       two_weeks: "Two weeks"
       next_month: "Next month"
+      two_months: "Two months"
+      three_months: "Three months"
+      four_months: "Four months"
       six_months: "Six months"
-      custom: "Custom date and time"
+      one_year: "One year"
+      forever: "Forever"
       relative: "Relative time"
       none: "None needed"
       last_custom: "Last custom datetime"
+      custom: "Custom date and time"
+      select_timeframe: "Select a timeframe"
 
     user_action:
       user_posted_topic: "<a href='%{userUrl}'>%{user}</a> posted <a href='%{topicUrl}'>the topic</a>"
@@ -2713,24 +2719,6 @@ en:
         min_duration: "Duration must be greater than 0"
         max_duration: "Duration must be less than 20 years"
         duration: "Duration"
-      auto_update_input:
-        none: "Select a timeframe"
-        now: "Now"
-        later_today: "Later today"
-        tomorrow: "Tomorrow"
-        later_this_week: "Later this week"
-        this_weekend: "This weekend"
-        next_week: "Next week"
-        two_weeks: "Two weeks"
-        next_month: "Next month"
-        two_months: "Two months"
-        three_months: "Three months"
-        four_months: "Four months"
-        six_months: "Six months"
-        one_year: "One year"
-        forever: "Forever"
-        pick_date_and_time: "Pick date and time"
-        set_based_on_last_post: "Close based on last post"
       publish_to_category:
         title: "Schedule Publishing"
       temp_open:

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs

@@ -62,7 +62,7 @@
     input=dummy.topicTimerUpdateDate
     includeWeekend=true
     includeForever=true
-    options=(hash none="topic.auto_update_input.none")
+    options=(hash none="time_shortcut.select_timeframe")
   }}
 {{/styleguide-example}}