reminders: Add UI for setting up reminders for messages in the feed.

frontend_tests/node_tests/templates.js

@@ -975,6 +975,28 @@ function render(template_name, args) {
     assert.equal(button_area.find(".no_propagate_notifications").text().trim(), 'translated: No');
 }());
 
+(function reminder_popover_content() {
+    var args = {
+        message: {
+            is_stream: true,
+            id: "420",
+            stream: "devel",
+            subject: "testing",
+            sender_full_name: "Iago",
+        },
+        can_edit_message: true,
+        can_mute_topic: true,
+        narrowed: true,
+    };
+
+    var html = '<div style="height: 250px">';
+    html += render('remind_me_popover_content', args);
+    html += "</div>";
+    var link = $(html).find("a.remind.custom");
+    assert.equal(link.text().trim(), 'translated: Select date and time');
+    global.write_handlebars_output("remind_me_popover_content", html);
+}());
+
 (function settings_tab() {
     var page_param_checkbox_options = {
         enable_stream_desktop_notifications: true,

static/js/popovers.js

@@ -3,6 +3,7 @@ var popovers = (function () {
 var exports = {};
 
 var current_actions_popover_elem;
+var current_flatpickr_instance;
 var current_message_info_popover_elem;
 var userlist_placement = "right";
 
@@ -206,6 +207,58 @@ exports.toggle_actions_popover = function (element, id) {
     }
 };
 
+function do_set_reminder(msgid, timestamp) {
+    var message = current_msg_list.get(msgid);
+    var link_to_msg = narrow.by_conversation_and_time_uri(message, true);
+    var command = compose.deferred_message_types.reminders.slash_command;
+    var reminder_timestamp = timestamp;
+    var custom_msg = '[this message](' + link_to_msg + ') at ' + reminder_timestamp;
+    var reminder_msg_content = command + ' ' + reminder_timestamp + '\n' + custom_msg;
+    var reminder_message = {
+        type: "private",
+        content: reminder_msg_content,
+        sender_id: page_params.user_id,
+        stream: '',
+        subject: '',
+    };
+    var recipient = page_params.email;
+    var emails = util.extract_pm_recipients(recipient);
+    reminder_message.to = emails;
+    reminder_message.reply_to = recipient;
+    reminder_message.private_message_recipient = recipient;
+    reminder_message.to_user_ids = people.email_list_to_user_ids_string(emails);
+    compose.schedule_message(reminder_message);
+}
+
+exports.render_actions_remind_popover = function (element, id) {
+    popovers.hide_all();
+    $(element).closest('.message_row').toggleClass('has_popover has_actions_popover');
+    current_msg_list.select_id(id);
+    var elt = $(element);
+    if (elt.data('popover') === undefined) {
+        var message = current_msg_list.get(id);
+        var args = {
+            message: message,
+        };
+        var ypos = elt.offset().top;
+        elt.popover({
+            // Popover height with 7 items in it is ~190 px
+            placement: ((message_viewport.height() - ypos) < 220) ? 'top' : 'bottom',
+            title:     "",
+            content:   templates.render('remind_me_popover_content', args),
+            trigger:   "manual",
+        });
+        elt.popover("show");
+        current_flatpickr_instance = $('.remind.custom[data-message-id="'+message.id+'"]').flatpickr({
+            enableTime: true,
+            clickOpens: false,
+            minDate: 'today',
+            plugins: [new confirmDatePlugin({})], // eslint-disable-line new-cap, no-undef
+        });
+        current_actions_popover_elem = elt;
+    }
+};
+
 function get_action_menu_menu_items() {
     if (!current_actions_popover_elem) {
         blueslip.error('Trying to get menu items when action popover is closed.');
@@ -279,6 +332,10 @@ exports.hide_actions_popover = function () {
         current_actions_popover_elem.popover("destroy");
         current_actions_popover_elem = undefined;
     }
+    if (current_flatpickr_instance !== undefined) {
+        current_flatpickr_instance.destroy();
+        current_flatpickr_instance = undefined;
+    }
 };
 
 function message_info_popped() {
@@ -522,6 +579,34 @@ exports.register_click_handlers = function () {
         e.stopPropagation();
         e.preventDefault();
     });
+
+    $('body').on('click', '.reminder_button', function (e) {
+        var msgid = $(e.currentTarget).data('message-id');
+        popovers.render_actions_remind_popover($(".selected_message .actions_hover")[0], msgid);
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
+    $('body').on('click', '.remind.custom', function (e) {
+        $(e.currentTarget)[0]._flatpickr.toggle();
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
+    $('body').on('click', '.flatpickr-calendar', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
+    $('body').on('click', '.flatpickr-confirm', function (e) {
+        var id = $(".remind.custom").data('message-id');
+        var datestr = $(".remind.custom")[0].value;
+        do_set_reminder(id, datestr);
+        popovers.hide_all();
+        e.stopPropagation();
+        e.preventDefault();
+    });
+
     $('body').on('click', '.respond_personal_button', function (e) {
         var user_id = $(e.target).parents('ul').attr('data-user-id');
         var email = people.get_person_from_user_id(user_id).email;

static/styles/popovers.css

@@ -80,6 +80,10 @@ ul.actions_popover i {
     margin-right: 3px;
 }
 
+ul.remind_me_popover .remind_icon {
+    text-align: center;
+}
+
 .user_popover {
     width: 240px;
     top: 100px!important;

static/templates/actions_popover_content.handlebars

@@ -13,6 +13,11 @@
         </a>
     </li>
 
+    <li>
+        <a href="#" class='reminder_button' data-message-id="{{message.id}}">
+            <i class="fa fa-bell" aria-hidden="true"></i> {{t "Remind me about this" }}
+        </a>
+    </li>
 
     {{#if should_display_collapse}}
     <li>

static/templates/remind_me_popover_content.handlebars

@@ -0,0 +1,44 @@
+{{! Contents of the "remind me about this actions" popup }}
+<ul class="nav nav-list remind_me_popover">
+    <li>
+        <a href="#" class="remind_icon" data-message-id="{{message.id}}">
+            <i class="fa fa-bell" aria-hidden="true"></i>
+        </a>
+    </li>
+    <li>
+        <a href="#" class="remind in_20m" data-message-id="{{message.id}}">
+            {{t "In 20 minutes" }}
+        </a>
+    </li>
+
+    <li>
+        <a href="#" class="remind in_1h" data-message-id="{{message.id}}">
+            {{t "In 1 hour" }}
+        </a>
+    </li>
+
+    <li>
+        <a href="#" class="remind in_3h" data-message-id="{{message.id}}">
+            {{t "In 3 hour" }}
+        </a>
+    </li>
+
+    <li>
+        <a href="#" class="remind tomo" data-message-id="{{message.id}}">
+            {{t "Tomorrow" }}
+        </a>
+    </li>
+
+    <li>
+        <a href="#" class="remind nxtw" data-message-id="{{message.id}}">
+            {{t "Next week" }}
+        </a>
+    </li>
+
+    <li>
+        <a href="#" class='remind custom' data-message-id="{{message.id}}">
+            {{t "Select date and time" }}
+        </a>
+    </li>
+
+</ul>