From d6aae75f049f5d990aebd37fed02c5371c08c238 Mon Sep 17 00:00:00 2001
From: opmkumar <sachinaniket2004@gmail.com>
Date: Thu, 31 Oct 2024 01:43:53 +0530
Subject: [PATCH] invites: Use shared helper function for setting expiration
 text.

Moves and renames `set_expires_on_text` to settings_components.ts,
so that it can be used in other modals with user set time inputs
that show a formatted string of that time input.

Updates invite_user_modal.hbs for the class names used in the new
shared helper function.

Co-authored-by: Ujjawal Modi <umodi2003@gmail.com>
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
---
 web/src/invite.ts                   | 21 ++++++---------------
 web/src/settings_components.ts      | 16 ++++++++++++++++
 web/templates/invite_user_modal.hbs |  4 ++--
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/web/src/invite.ts b/web/src/invite.ts
index abc357557b..1b13a87d91 100644
--- a/web/src/invite.ts
+++ b/web/src/invite.ts
@@ -284,18 +284,6 @@ function valid_to(): string {
     return $t({defaultMessage: "Expires on {date} at {time}"}, {date, time});
 }
 
-function set_expires_on_text(): void {
-    const $expires_in = $<HTMLSelectOneElement>("select:not([multiple])#expires_in");
-    const valid_to_text = valid_to();
-    if ($expires_in.val() === "custom") {
-        $("#expires_on").hide();
-        $("#custom_expires_on").text(valid_to_text);
-    } else {
-        $("#expires_on").show();
-        $("#expires_on").text(valid_to_text);
-    }
-}
-
 function set_streams_to_join_list_visibility(): void {
     const realm_has_default_streams = stream_data.get_default_stream_ids().length !== 0;
     const hide_streams_list =
@@ -380,7 +368,8 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
             custom_expiration_time_unit,
             custom_expiration_time_input,
         );
-        set_expires_on_text();
+        const valid_to_text = valid_to();
+        settings_components.set_time_input_formatted_text($expires_in, valid_to_text);
 
         if (settings_data.user_can_subscribe_other_users()) {
             set_streams_to_join_list_visibility();
@@ -438,7 +427,8 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
                 custom_expiration_time_unit,
                 custom_expiration_time_input,
             );
-            set_expires_on_text();
+            const valid_to_text = valid_to();
+            settings_components.set_time_input_formatted_text($expires_in, valid_to_text);
             toggle_invite_submit_button();
         });
 
@@ -456,7 +446,8 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
             custom_expiration_time_unit = $<HTMLSelectOneElement>(
                 "select:not([multiple])#custom-expiration-time-unit",
             ).val()!;
-            set_expires_on_text();
+            const valid_to_text = valid_to();
+            settings_components.set_time_input_formatted_text($expires_in, valid_to_text);
             toggle_invite_submit_button();
         });
 
diff --git a/web/src/settings_components.ts b/web/src/settings_components.ts
index 4c08f8fe35..70c5b099bf 100644
--- a/web/src/settings_components.ts
+++ b/web/src/settings_components.ts
@@ -1637,6 +1637,22 @@ export function create_realm_group_setting_widget({
     });
 }
 
+export function set_time_input_formatted_text(
+    $time_select_elem: JQuery,
+    formatted_text: string,
+): void {
+    if ($time_select_elem.val() === "custom") {
+        $time_select_elem.parent().find(".time-input-formatted-description").hide();
+        $time_select_elem
+            .parent()
+            .find(".custom-time-input-formatted-description")
+            .text(formatted_text);
+    } else {
+        $time_select_elem.parent().find(".time-input-formatted-description").show();
+        $time_select_elem.parent().find(".time-input-formatted-description").text(formatted_text);
+    }
+}
+
 export function set_custom_time_inputs_visibility(
     $time_select_elem: JQuery,
     time_unit: string,
diff --git a/web/templates/invite_user_modal.hbs b/web/templates/invite_user_modal.hbs
index 1ab5c0f073..9bd7217603 100644
--- a/web/templates/invite_user_modal.hbs
+++ b/web/templates/invite_user_modal.hbs
@@ -40,7 +40,7 @@
                 <option {{#if this.default }}selected{{/if}} name="expires_in" value="{{this.value}}">{{this.description}}</option>
             {{/each}}
         </select>
-        <p id="expires_on"></p>
+        <p class="time-input-formatted-description"></p>
         <div id="custom-invite-expiration-time" class="dependent-settings-block custom-time-input-container">
             <label for="expires_in" class="modal-field-label">{{t "Custom time" }}</label>
             <input type="text" autocomplete="off" name="custom-expiration-time" id="custom-expiration-time-input" class="custom-time-input-value inline-block" value="" maxlength="3"/>
@@ -49,7 +49,7 @@
                     <option name="custom_time_choice" class="custom_time_choice" value="{{this.name}}">{{this.description}}</option>
                 {{/each}}
             </select>
-            <p id="custom_expires_on"></p>
+            <p class="custom-time-input-formatted-description"></p>
         </div>
     </div>
     <div class="input-group">