FEATURE: Add detection of post date to use in bookmark modal (#10981)

This PR introduces a feature that will detect a date inside the post that a user is bookmarking, and offer that date as an option in the bookmark modal.

The logic is that we get the first date/time detected in the post. If it does not have a time, just a date, then we default to 8:00am for the time.

app/assets/javascripts/discourse/app/controllers/bookmark.js

@@ -1,6 +1,6 @@
 import I18n from "I18n";
 import { schedule } from "@ember/runloop";
-import { and } from "@ember/object/computed";
+import { and, or } from "@ember/object/computed";
 import { next } from "@ember/runloop";
 import { action } from "@ember/object";
 import { isPresent } from "@ember/utils";
@@ -64,6 +64,8 @@ export default Controller.extend(ModalFunctionality, {
   customReminderTime: null,
   lastCustomReminderDate: null,
   lastCustomReminderTime: null,
+  postDetectedLocalDate: null,
+  postDetectedLocalTime: null,
   mouseTrap: null,
   userTimezone: null,
   showOptions: false,
@@ -78,6 +80,8 @@ export default Controller.extend(ModalFunctionality, {
       customReminderTime: this._defaultCustomReminderTime(),
       lastCustomReminderDate: null,
       lastCustomReminderTime: null,
+      postDetectedLocalDate: null,
+      postDetectedLocalTime: null,
       userTimezone: this.currentUser.resolvedTimezone(this.currentUser),
       showOptions: false,
       model: this.model || {},
@@ -236,6 +240,11 @@ export default Controller.extend(ModalFunctionality, {
 
   showLastCustom: and("lastCustomReminderTime", "lastCustomReminderDate"),
 
+  showPostLocalDate: or(
+    "model.postDetectedLocalDate",
+    "model.postDetectedLocalTime"
+  ),
+
   get showLaterToday() {
     let later = this.laterToday();
     return (
@@ -293,6 +302,10 @@ export default Controller.extend(ModalFunctionality, {
     return this.nextMonth().format(I18n.t("dates.long_no_year"));
   },
 
+  get postLocalDateFormatted() {
+    return this.postLocalDate().format(I18n.t("dates.long_no_year"));
+  },
+
   @discourseComputed("userTimezone")
   userHasTimezoneSet(userTimezone) {
     return !isEmpty(userTimezone);
@@ -316,7 +329,10 @@ export default Controller.extend(ModalFunctionality, {
     let reminderType;
     if (this.selectedReminderType === REMINDER_TYPES.NONE) {
       reminderType = null;
-    } else if (this.selectedReminderType === REMINDER_TYPES.LAST_CUSTOM) {
+    } else if (
+      this.selectedReminderType === REMINDER_TYPES.LAST_CUSTOM ||
+      this.selectedReminderType === REMINDER_TYPES.POST_LOCAL_DATE
+    ) {
       reminderType = REMINDER_TYPES.CUSTOM;
     } else {
       reminderType = this.selectedReminderType;
@@ -419,6 +435,8 @@ export default Controller.extend(ModalFunctionality, {
         return customDateTime;
       case REMINDER_TYPES.LAST_CUSTOM:
         return this.parsedLastCustomReminderDatetime;
+      case REMINDER_TYPES.POST_LOCAL_DATE:
+        return this.postLocalDate();
     }
   },
 
@@ -430,6 +448,19 @@ export default Controller.extend(ModalFunctionality, {
     return this.startOfDay(this.now().add(1, "month"));
   },
 
+  postLocalDate() {
+    let parsedPostLocalDate = this._parseCustomDateTime(
+      this.model.postDetectedLocalDate,
+      this.model.postDetectedLocalTime
+    );
+
+    if (!this.model.postDetectedLocalTime) {
+      return this.startOfDay(parsedPostLocalDate);
+    }
+
+    return parsedPostLocalDate;
+  },
+
   tomorrow() {
     return this.startOfDay(this.now().add(1, "day"));
   },

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

@@ -28,4 +28,5 @@ export const REMINDER_TYPES = {
   NONE: "none",
   START_OF_NEXT_BUSINESS_WEEK: "start_of_next_business_week",
   LATER_THIS_WEEK: "later_this_week",
+  POST_LOCAL_DATE: "post_local_date",
 };

app/assets/javascripts/discourse/app/models/post.js

@@ -305,6 +305,12 @@ const Post = RestModel.extend({
   },
 
   toggleBookmark() {
+    let postEl = document.querySelector(`[data-post-id="${this.id}"]`);
+    let localDateEl = null;
+    if (postEl) {
+      localDateEl = postEl.querySelector(".discourse-local-date");
+    }
+
     return new Promise((resolve) => {
       let controller = showModal("bookmark", {
         model: {
@@ -313,6 +319,8 @@ const Post = RestModel.extend({
           reminderAt: this.bookmark_reminder_at,
           autoDeletePreference: this.bookmark_auto_delete_preference,
           name: this.bookmark_name,
+          postDetectedLocalDate: localDateEl ? localDateEl.dataset.date : null,
+          postDetectedLocalTime: localDateEl ? localDateEl.dataset.time : null,
         },
         title: this.bookmark_id
           ? "post.bookmarks.edit"

app/assets/javascripts/discourse/app/templates/modal/bookmark.hbs

@@ -65,6 +65,12 @@
             <div class="tap-tile-title">{{i18n "bookmarks.reminders.next_month"}}</div>
             <div class="tap-tile-date">{{nextMonthFormatted}}</div>
           {{/tap-tile}}
+          {{#if showPostLocalDate}}
+            {{#tap-tile icon="globe-americas" tileId=reminderTypes.POST_LOCAL_DATE activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+              <div class="tap-tile-title">{{i18n "bookmarks.reminders.post_local_date"}}</div>
+              <div class="tap-tile-date">{{postLocalDateFormatted}}</div>
+            {{/tap-tile}}
+          {{/if}}
           {{#tap-tile icon="calendar-alt" tileId=reminderTypes.CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}}
             <div class="tap-tile-title">{{i18n "bookmarks.reminders.custom"}}</div>
           {{/tap-tile}}

config/locales/client.en.yml

@@ -318,6 +318,7 @@ en:
         next_business_day: "Next business day"
         tomorrow: "Tomorrow"
         next_week: "Next week"
+        post_local_date: "Date in post"
         later_this_week: "Later this week"
         start_of_next_business_week: "Monday"
         start_of_next_business_week_alt: "Next Monday"