compose: Add notice to confirmation banner.

This commit adds a note to the confirmation banner when a message is
scheduled for less than the MINIMUM_SCHEDULED_MESSAGE_DELAY_SECONDS.
The approach here is to use the flatpickr's onClose method.
onClose callback is triggered when the user selects a date. We compare
the selected date with the minDate set in the flatpickr and based on the
time set by the user we update the flag
minimum_scheduled_message_delay_minutes_note.

Fixes: #28503.

Co-authored-by: ankur prabhu <ankurprabhu0531@gmail.com>

web/src/compose.js

@@ -368,7 +368,11 @@ function schedule_message_to_custom_date() {
         clear_compose_box();
         const new_row_html = render_success_message_scheduled_banner({
             scheduled_message_id: data.scheduled_message_id,
+            minimum_scheduled_message_delay_minutes:
+                scheduled_messages.MINIMUM_SCHEDULED_MESSAGE_DELAY_SECONDS / 60,
             deliver_at,
+            minimum_scheduled_message_delay_minutes_note:
+                scheduled_messages.show_minimum_scheduled_message_delay_minutes_note,
         });
         compose_banner.clear_message_sent_banners();
         compose_banner.append_compose_banner_to_banner_list($(new_row_html), $banner_container);

web/src/compose_send_menu_popover.js

@@ -74,9 +74,20 @@ export function open_send_later_menu() {
                             current_time.getTime() +
                                 scheduled_messages.MINIMUM_SCHEDULED_MESSAGE_DELAY_SECONDS * 1000,
                         ),
-                        onClose() {
+                        onClose(selectedDates, _dateStr, instance) {
                             // Return to normal state.
                             $send_later_modal_content.css("pointer-events", "all");
+                            const selected_date = selectedDates[0];
+
+                            if (selected_date && selected_date < instance.config.minDate) {
+                                scheduled_messages.set_minimum_scheduled_message_delay_minutes_note(
+                                    true,
+                                );
+                            } else {
+                                scheduled_messages.set_minimum_scheduled_message_delay_minutes_note(
+                                    false,
+                                );
+                            }
                         },
                     },
                 );

web/src/scheduled_messages.ts

@@ -23,6 +23,11 @@ export const scheduled_messages_data = new Map<number, ScheduledMessage>();
 
 let selected_send_later_timestamp: number | undefined;
 
+// show_minimum_scheduled_message_delay_minutes_note is a flag to show the user a note in the
+// confirmation banner if the message is scheduled for the minimal 5 minutes ahead time,
+// regardless of whether the user tried to schedule it for sooner or not.
+export let show_minimum_scheduled_message_delay_minutes_note = false;
+
 function compute_send_times(now = new Date()): Record<TimeKey, number> {
     const send_times: Record<string, number> = {};
 
@@ -215,3 +220,7 @@ export function reset_selected_schedule_timestamp(): void {
 export function initialize(scheduled_messages_params: StateData["scheduled_messages"]): void {
     add_scheduled_messages(scheduled_messages_params.scheduled_messages);
 }
+
+export function set_minimum_scheduled_message_delay_minutes_note(flag: boolean): void {
+    show_minimum_scheduled_message_delay_minutes_note = flag;
+}

web/templates/compose_banner/success_message_scheduled_banner.hbs

@@ -2,7 +2,11 @@
   class="main-view-banner success message_scheduled_success_compose_banner"
   data-scheduled-message-id="{{scheduled_message_id}}">
     <div class="main-view-banner-elements-wrapper">
-        <p class="banner_content">{{t 'Your message has been scheduled for {deliver_at}.' }}
+        <p class="banner_content">
+            {{#if minimum_scheduled_message_delay_minutes_note}}
+                {{t 'Messages must be scheduled at least {minimum_scheduled_message_delay_minutes} minutes in the future.'}}
+            {{/if}}
+            {{t 'Your message has been scheduled for {deliver_at}.'}}
             <a href="#scheduled">{{t "View scheduled messages"}}</a>
         </p>
         <button class="main-view-banner-action-button undo_scheduled_message" >{{t "Undo"}}</button>