FEATURE: Bookmark reminder type changes and bugfixes (#9329)

FEATURE: Bookmark reminder type changes and bugfixes (#9329)

New Reminder Types

  • Add a “later this week” reminder which is today + 2 days, will not show if we are on the days Thu-Sun
  • Add a “start of next business week” reminder which is 8am Monday

Bugfixes and Tweaks

  • Move dates out of translation for reminder types and yield HTML for tap-tile for more customizable content and styling
  • Make sure double clicking the bookmark icon in quick access takes users to the new bookmarks-with-reminders page
  • Sane default to 8am (start of day) for custom reminder with no time
diff --git a/app/assets/javascripts/discourse/controllers/bookmark.js b/app/assets/javascripts/discourse/controllers/bookmark.js
index 18a6112..c14329d 100644
--- a/app/assets/javascripts/discourse/controllers/bookmark.js
+++ b/app/assets/javascripts/discourse/controllers/bookmark.js
@@ -3,7 +3,6 @@ import { Promise } from "rsvp";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { htmlSafe } from "@ember/template";
 import { ajax } from "discourse/lib/ajax";
 
 const START_OF_DAY_HOUR = 8;
@@ -17,7 +16,9 @@ const REMINDER_TYPES = {
   NEXT_MONTH: "next_month",
   CUSTOM: "custom",
   LAST_CUSTOM: "last_custom",
-  NONE: "none"
+  NONE: "none",
+  START_OF_NEXT_BUSINESS_WEEK: "start_of_next_business_week",
+  LATER_THIS_WEEK: "later_this_week"
 };
 
 export default Controller.extend(ModalFunctionality, {
@@ -115,60 +116,48 @@ export default Controller.extend(ModalFunctionality, {
     );
   },
 
+  @discourseComputed()
+  showLaterThisWeek() {
+    return this.now().day() < 4; // 4 is Thursday
+  },
+
   @discourseComputed("parsedLastCustomReminderDatetime")
   lastCustomFormatted(parsedLastCustomReminderDatetime) {
-    return htmlSafe(
-      I18n.t("bookmarks.reminders.last_custom", {
-        date: parsedLastCustomReminderDatetime.format(
-          I18n.t("dates.long_no_year")
-        )
-      })
+    return parsedLastCustomReminderDatetime.format(
+      I18n.t("dates.long_no_year")
     );
   },
 
   @discourseComputed()
+  startNextBusinessWeekFormatted() {
+    return this.nextWeek()
+      .day("Monday")
+      .format(I18n.t("dates.long_no_year"));
+  },
+
+  @discourseComputed()
   laterTodayFormatted() {
-    return htmlSafe(
-      I18n.t("bookmarks.reminders.later_today", {
-        date: this.laterToday().format(I18n.t("dates.time"))
-      })
-    );
+    return this.laterToday().format(I18n.t("dates.time"));
   },
 
   @discourseComputed()
   tomorrowFormatted() {
-    return htmlSafe(
-      I18n.t("bookmarks.reminders.tomorrow", {
-        date: this.tomorrow().format(I18n.t("dates.time_short_day"))
-      })
-    );
+    return this.tomorrow().format(I18n.t("dates.time_short_day"));
   },
 
   @discourseComputed()
-  nextBusinessDayFormatted() {
-    return htmlSafe(
-      I18n.t("bookmarks.reminders.next_business_day", {
-        date: this.nextBusinessDay().format(I18n.t("dates.time_short_day"))
-      })
-    );
+  nextWeekFormatted() {
+    return this.nextWeek().format(I18n.t("dates.long_no_year"));
   },
 
   @discourseComputed()
-  nextWeekFormatted() {
-    return htmlSafe(
-      I18n.t("bookmarks.reminders.next_week", {
-        date: this.nextWeek().format(I18n.t("dates.long_no_year"))
-      })
-    );
+  laterThisWeekFormatted() {
+    return this.laterThisWeek().format(I18n.t("dates.time_short_day"));
   },
 
   @discourseComputed()
   nextMonthFormatted() {
-    return htmlSafe(
-      I18n.t("bookmarks.reminders.next_month", {
-        date: this.nextMonth().format(I18n.t("dates.long_no_year"))
-      })
-    );
+    return this.nextMonth().format(I18n.t("dates.long_no_year"));
   },
 
   @discourseComputed()
@@ -237,9 +226,17 @@ export default Controller.extend(ModalFunctionality, {
         return this.tomorrow();
       case REMINDER_TYPES.NEXT_WEEK:
         return this.nextWeek();
+      case REMINDER_TYPES.START_OF_NEXT_BUSINESS_WEEK:
+        return this.nextWeek().day("Monday");
+      case REMINDER_TYPES.LATER_THIS_WEEK:
+        return this.laterThisWeek();
       case REMINDER_TYPES.NEXT_MONTH:
         return this.nextMonth();
       case REMINDER_TYPES.CUSTOM:
+        this.set(
+          "customReminderTime",
+          this.customReminderTime || `0${START_OF_DAY_HOUR}:00`
+        );
         const customDateTime = this.parseCustomDateTime(
           this.customReminderDate,
           this.customReminderTime
@@ -265,23 +262,6 @@ export default Controller.extend(ModalFunctionality, {
     return this.startOfDay(this.now().add(1, "month"));
   },
 
-  nextBusinessDay() {
-    const currentDay = this.now().isoWeekday(); // 1=Mon, 7=Sun
-    let next = null;
-
-    // friday
-    if (currentDay === 5) {
-      next = this.now().add(3, "days");
-      // saturday
-    } else if (currentDay === 6) {
-      next = this.now().add(2, "days");
-    } else {
-      next = this.now().add(1, "day");
-    }
-
-    return this.startOfDay(next);
-  },
-
   tomorrow() {
     return this.startOfDay(this.now().add(1, "day"));
   },
@@ -301,6 +281,13 @@ export default Controller.extend(ModalFunctionality, {
       : later.add(30, "minutes").startOf("hour");
   },
 
+  laterThisWeek() {
+    if (!this.showLaterThisWeek) {
+      return;
+    }
+    return this.startOfDay(this.now().add(2, "days"));
+  },
+
   handleSaveError(e) {
     this.isSavingBookmarkManually = false;
     if (typeof e === "string") {
diff --git a/app/assets/javascripts/discourse/templates/components/tap-tile.hbs b/app/assets/javascripts/discourse/templates/components/tap-tile.hbs
index 4e04200..df17a2f 100644
--- a/app/assets/javascripts/discourse/templates/components/tap-tile.hbs
+++ b/app/assets/javascripts/discourse/templates/components/tap-tile.hbs
@@ -1,2 +1,2 @@
 {{d-icon icon}}
-{{text}}
+{{ yield }}
diff --git a/app/assets/javascripts/discourse/templates/modal/bookmark.hbs b/app/assets/javascripts/discourse/templates/modal/bookmark.hbs
index 2fa0345..5a1082c 100644
--- a/app/assets/javascripts/discourse/templates/modal/bookmark.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/bookmark.hbs
@@ -21,21 +21,51 @@
       {{#if userHasTimezoneSet}}
         {{#tap-tile-grid activeTile=selectedReminderType as |grid|}}
           {{#if showAtDesktop}}
-            {{tap-tile icon="desktop" text=(i18n "bookmarks.reminders.at_desktop") tileId=reminderTypes.AT_DESKTOP activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+            {{#tap-tile icon="desktop" tileId=reminderTypes.AT_DESKTOP activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+              {{i18n "bookmarks.reminders.at_desktop"}}
+            {{/tap-tile}}
           {{/if}}
 
           {{#if showLaterToday}}
-            {{tap-tile icon="far-moon" text=laterTodayFormatted tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+            {{#tap-tile icon="far-moon" tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+              {{i18n "bookmarks.reminders.later_today"}}<br>
+              {{laterTodayFormatted}}
+            {{/tap-tile}}
           {{/if}}
-          {{tap-tile icon="briefcase" text=nextBusinessDayFormatted tileId=reminderTypes.NEXT_BUSINESS_DAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-          {{tap-tile icon="far-sun" text=tomorrowFormatted tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-          {{tap-tile icon="far-clock" text=nextWeekFormatted tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-          {{tap-tile icon="far-calendar-plus" text=nextMonthFormatted tileId=reminderTypes.NEXT_MONTH activeTile=grid.activeTile onChange=(action "selectReminderType")}}
-          {{tap-tile icon="calendar-alt" text=(I18n "bookmarks.reminders.custom") tileId=reminderTypes.CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+          {{#tap-tile icon="far-sun" tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+            {{i18n "bookmarks.reminders.tomorrow"}}<br>
+            {{tomorrowFormatted}}
+          {{/tap-tile}}
+          {{#if showLaterThisWeek}}

[... diff too long, it was truncated ...]

GitHub sha: d261a809

This commit appears in #9329 which was merged by martin.