From 2cb42103198c61b8f1934c816aefd4214edf9d4a Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Thu, 2 Feb 2023 21:59:51 +0530 Subject: [PATCH] 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 --- web/src/invite.ts | 34 +++++++++++++++++++ web/src/page_params.ts | 1 + web/templates/invite_user_modal.hbs | 1 + .../modal_banner/invite_tips_banner.hbs | 30 ++++++++++++++++ web/templates/modal_banner/modal_banner.hbs | 15 ++++++++ 5 files changed, 81 insertions(+) create mode 100644 web/templates/modal_banner/invite_tips_banner.hbs create mode 100644 web/templates/modal_banner/modal_banner.hbs diff --git a/web/src/invite.ts b/web/src/invite.ts index 5d07dd03ec..e0d3b95f17 100644 --- a/web/src/invite.ts +++ b/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 { + 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): void { e.stopPropagation(); e.preventDefault(); @@ -329,6 +343,15 @@ function open_invite_user_modal(e: JQuery.ClickEvent): 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): 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 { diff --git a/web/src/page_params.ts b/web/src/page_params.ts index 812dc18563..f0c870f752 100644 --- a/web/src/page_params.ts +++ b/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; diff --git a/web/templates/invite_user_modal.hbs b/web/templates/invite_user_modal.hbs index 20aaf00185..f2e78075a1 100644 --- a/web/templates/invite_user_modal.hbs +++ b/web/templates/invite_user_modal.hbs @@ -1,4 +1,5 @@
+
{{#if development_environment}}
{{/if}} diff --git a/web/templates/modal_banner/invite_tips_banner.hbs b/web/templates/modal_banner/invite_tips_banner.hbs new file mode 100644 index 0000000000..04fd0aa260 --- /dev/null +++ b/web/templates/modal_banner/invite_tips_banner.hbs @@ -0,0 +1,30 @@ +{{#unless realm_has_description}} + {{#> modal_banner }} + + {{/modal_banner}} +{{else unless realm_has_user_set_icon}} + {{#> modal_banner }} + + {{/modal_banner}} +{{/unless}} +{{#unless realm_has_custom_profile_fields}} + {{#> modal_banner }} + + {{/modal_banner}} +{{/unless}} diff --git a/web/templates/modal_banner/modal_banner.hbs b/web/templates/modal_banner/modal_banner.hbs new file mode 100644 index 0000000000..24dd38e192 --- /dev/null +++ b/web/templates/modal_banner/modal_banner.hbs @@ -0,0 +1,15 @@ +
+
+ {{#if banner_text}} + + {{else}} + + {{/if}} + {{#if button_text}} + + {{/if}} +
+ {{#unless hide_close_button}} + + {{/unless}} +