invites: Use shared custom time helper function.

Moves `set_custom_time_inputs_visibility` function to
settings_components.ts so that it can be reused in
other modals with user set custom time inputs.

Updates user_invite_modal.hbs to use the class name
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

@@ -24,6 +24,7 @@ import * as input_pill from "./input_pill";
 import * as invite_stream_picker_pill from "./invite_stream_picker_pill";
 import {page_params} from "./page_params";
 import * as peer_data from "./peer_data";
+import * as settings_components from "./settings_components";
 import * as settings_config from "./settings_config";
 import * as settings_data from "./settings_data";
 import {current_user, realm} from "./state_data";
@@ -293,19 +294,6 @@ function set_expires_on_text(): void {
     }
 }
 
-function set_custom_time_inputs_visibility(): void {
-    const $expires_in = $<HTMLSelectOneElement>("select:not([multiple])#expires_in");
-    if ($expires_in.val() === "custom") {
-        $("#custom-expiration-time-input").val(custom_expiration_time_input);
-        $<HTMLSelectOneElement>("select:not([multiple])#custom-expiration-time-unit").val(
-            custom_expiration_time_unit,
-        );
-        $("#custom-invite-expiration-time").show();
-    } else {
-        $("#custom-invite-expiration-time").hide();
-    }
-}
-
 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 =
@@ -385,7 +373,11 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
 
         const user_has_email_set = !settings_data.user_email_not_configured();
 
-        set_custom_time_inputs_visibility();
+        settings_components.set_custom_time_inputs_visibility(
+            $expires_in,
+            custom_expiration_time_unit,
+            custom_expiration_time_input,
+        );
         set_expires_on_text();
 
         if (settings_data.user_can_subscribe_other_users()) {
@@ -439,7 +431,11 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
         pills.onTextInputHook(toggle_invite_submit_button);
 
         $expires_in.on("change", () => {
-            set_custom_time_inputs_visibility();
+            settings_components.set_custom_time_inputs_visibility(
+                $expires_in,
+                custom_expiration_time_unit,
+                custom_expiration_time_input,
+            );
             set_expires_on_text();
             toggle_invite_submit_button();
         });

web/src/settings_components.ts

@@ -1636,3 +1636,17 @@ export function create_realm_group_setting_widget({
         save_discard_realm_settings_widget_status_handler($save_discard_widget_container);
     });
 }
+
+export function set_custom_time_inputs_visibility(
+    $time_select_elem: JQuery,
+    time_unit: string,
+    time_value: number,
+): void {
+    if ($time_select_elem.val() === "custom") {
+        $time_select_elem.parent().find(".custom-time-input-value").val(time_value);
+        $time_select_elem.parent().find(".custom-time-input-unit").val(time_unit);
+        $time_select_elem.parent().find(".custom-time-input-container").show();
+    } else {
+        $time_select_elem.parent().find(".custom-time-input-container").hide();
+    }
+}

web/templates/invite_user_modal.hbs

@@ -41,7 +41,7 @@
             {{/each}}
         </select>
         <p id="expires_on"></p>
-        <div id="custom-invite-expiration-time" class="dependent-settings-block">
+        <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"/>
             <select class="custom-time-input-unit invite-user-select modal_select bootstrap-focus-style" id="custom-expiration-time-unit">