invite: Add setup tips to user invite modal.

We include setup tips to the user invite modal for the following
cases:

At the top of the invite modal
- If the org description is missing.
- If the org profile picture is missing.
- If the custom profile fields have not been added, where we also
  provide a link to the default user settings for the time being,
  until we have a better way to compare if the default user settings
  have been changed.

We also use the new banner ui to display these tips. In doing so, we
extract the banner component from `compose_banner.hbs` to
`popover_banner.hbs`, removing any compose specific code from the
banner component.

Fixes: #24262

Co-authored-by: Lalit <lalitkumarsingh3716@gmail.com>

web/src/invite.ts

@@ -7,10 +7,12 @@ import assert from "minimalistic-assert";
 import copy_invite_link from "../templates/copy_invite_link.hbs";
 import render_invitation_failed_error from "../templates/invitation_failed_error.hbs";
 import render_invite_user_modal from "../templates/invite_user_modal.hbs";
+import render_invite_tips_banner from "../templates/modal_banner/invite_tips_banner.hbs";
 import render_settings_dev_env_email_access from "../templates/settings/dev_env_email_access.hbs";
 
 import * as channel from "./channel";
 import * as common from "./common";
+import * as compose_banner from "./compose_banner";
 import {show_copied_confirmation} from "./copied_tooltip";
 import {csrf_token} from "./csrf";
 import * as dialog_widget from "./dialog_widget";
@@ -288,6 +290,18 @@ function set_streams_to_join_list_visibility(): void {
     }
 }
 
+function generate_invite_tips_data(): Record<string, boolean> {
+    const {realm_description, realm_icon_source, custom_profile_fields} = page_params;
+
+    return {
+        realm_has_description:
+            realm_description !== "" &&
+            !/^Organization imported from [A-Za-z]+[!.]$/.test(realm_description),
+        realm_has_user_set_icon: realm_icon_source !== "G",
+        realm_has_custom_profile_fields: custom_profile_fields.length > 0,
+    };
+}
+
 function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void {
     e.stopPropagation();
     e.preventDefault();
@@ -329,6 +343,15 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
         set_expires_on_text();
         set_streams_to_join_list_visibility();
 
+        $("#invite-user-modal").on("click", ".setup-tips-container .banner_content a", () => {
+            dialog_widget.close();
+        });
+
+        $("#invite-user-modal").on("click", ".main-view-banner-close-button", (e) => {
+            e.preventDefault();
+            $(e.target).parent().remove();
+        });
+
         function toggle_invite_submit_button(): void {
             $("#invite-user-modal .dialog_submit_button").prop(
                 "disabled",
@@ -415,6 +438,17 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
             $("#generate_multiuse_invite_radio").prop("checked", true);
             $("#generate_multiuse_invite_radio").trigger("change");
         }
+
+        const invite_tips_data = generate_invite_tips_data();
+
+        const context = {
+            banner_type: compose_banner.WARNING,
+            classname: "setup_tips_warning",
+            banner_html: "",
+            ...invite_tips_data,
+        };
+
+        $("#invite-user-form .setup-tips-container").html(render_invite_tips_banner(context));
     }
 
     function invite_users(): void {

web/src/page_params.ts

@@ -57,6 +57,7 @@ export const page_params: {
     realm_create_public_stream_policy: number;
     realm_create_web_public_stream_policy: number;
     realm_delete_own_message_policy: number;
+    realm_description: string;
     realm_edit_topic_policy: number;
     realm_email_changes_disabled: boolean;
     realm_enable_spectator_access: boolean;

web/templates/invite_user_modal.hbs

@@ -1,4 +1,5 @@
 <form id="invite-user-form">
+    <div class="setup-tips-container {{#unless is_admin}}hide{{/unless}}"></div>
     {{#if development_environment}}
     <div class="alert" id="dev_env_msg"></div>
     {{/if}}

web/templates/modal_banner/invite_tips_banner.hbs

@@ -0,0 +1,30 @@
+{{#unless realm_has_description}}
+    {{#> modal_banner }}
+        <p class="banner_message">
+            {{#tr}}
+                You may want to <z-link>configure</z-link> your organization's login page prior to inviting users.
+                {{#*inline "z-link"}}<a href="#organization/organization-profile">{{> @partial-block}}</a>{{/inline}}
+            {{/tr}}
+        </p>
+    {{/modal_banner}}
+{{else unless realm_has_user_set_icon}}
+    {{#> modal_banner }}
+        <p class="banner_message">
+            {{#tr}}
+                You may want to <z-link>upload a profile picture</z-link> for your organization prior to inviting users.
+                {{#*inline "z-link"}}<a href="#organization/organization-profile">{{> @partial-block}}</a>{{/inline}}
+            {{/tr}}
+        </p>
+    {{/modal_banner}}
+{{/unless}}
+{{#unless realm_has_custom_profile_fields}}
+    {{#> modal_banner }}
+        <p class="banner_message">
+            {{#tr}}
+                You may want to configure <z-link-1>default new user settings</z-link-1> and <z-link-2>custom profile fields</z-link-2> prior to inviting users.
+                {{#*inline "z-link-1"}}<a href="#organization/organization-level-user-defaults">{{> @partial-block}}</a>{{/inline}}
+                {{#*inline "z-link-2"}}<a href="#organization/profile-field-settings">{{> @partial-block}}</a>{{/inline}}
+            {{/tr}}
+        </p>
+    {{/modal_banner}}
+{{/unless}}

web/templates/modal_banner/modal_banner.hbs

@@ -0,0 +1,15 @@
+<div class="main-view-banner {{banner_type}} {{classname}}">
+    <div class="main-view-banner-elements-wrapper {{#if button_text}}banner-contains-button{{/if}}">
+        {{#if banner_text}}
+        <p class="banner_content">{{banner_text}}</p>
+        {{else}}
+        <div class="banner_content">{{> @partial-block}}</div>
+        {{/if}}
+        {{#if button_text}}
+        <button class="main-view-banner-action-button{{#if hide_close_button}} right_edge{{/if}}">{{button_text}}</button>
+        {{/if}}
+    </div>
+    {{#unless hide_close_button}}
+    <a role="button" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
+    {{/unless}}
+</div>