banners: Redesign "configure your email" demo organization banners.

Fixes: #34448.

web/src/demo_organizations_ui.ts

@@ -69,6 +69,30 @@ export function insert_demo_organization_warning(): void {
     banners.append(demo_organization_warning_banner, $(".demo-organization-warning"));
 }
 
+export function show_configure_email_banner(): void {
+    const $configure_email_banner_container = $(".demo-organization-add-email-banner");
+    if ($configure_email_banner_container.length > 0) {
+        const CONFIGURE_EMAIL_BANNER: banners.Banner = {
+            intent: "warning",
+            label: $t({defaultMessage: "Add your email to access this feature."}),
+            buttons: [
+                {
+                    attention: "primary",
+                    label: $t({defaultMessage: "Add"}),
+                    custom_classes: "demo-organization-add-email",
+                },
+            ],
+            close_button: false,
+        };
+        banners.open(CONFIGURE_EMAIL_BANNER, $configure_email_banner_container);
+    }
+
+    $configure_email_banner_container.on("click", ".demo-organization-add-email", (e) => {
+        e.preventDefault();
+        window.location.href = "/#settings/account-and-privacy";
+    });
+}
+
 export function do_convert_demo_organization(): void {
     if (!current_user.is_owner) {
         return;
@@ -95,6 +119,8 @@ export function do_convert_demo_organization(): void {
             // Disable form fields if demo organization owner email not set.
             $("#add_organization_type").prop("disabled", true);
             $("#new_subdomain").prop("disabled", true);
+            // Show banner for adding email to account.
+            show_configure_email_banner();
         } else {
             // Disable submit button if either form field blank.
             $("#convert-demo-organization-form").on("input change", () => {

web/src/invite.ts

@@ -16,6 +16,7 @@ import * as components from "./components.ts";
 import * as compose_banner from "./compose_banner.ts";
 import {show_copied_confirmation} from "./copied_tooltip.ts";
 import {csrf_token} from "./csrf.ts";
+import * as demo_organizations_ui from "./demo_organizations_ui.ts";
 import * as dialog_widget from "./dialog_widget.ts";
 import * as email_pill from "./email_pill.ts";
 import {$t, $t_html} from "./i18n.ts";
@@ -516,6 +517,7 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
                 "disabled",
                 true,
             );
+            demo_organizations_ui.show_configure_email_banner();
         }
 
         // Render organization settings tips for non-demo organizations

web/styles/app_components.css

@@ -531,6 +531,17 @@ input.settings_text_input {
     margin: 10px 0;
 }
 
+.demo-organization-add-email-banner {
+    margin-bottom: 10px;
+}
+
+#convert-demo-organization-form,
+#invite-user-form {
+    .banner-action-buttons {
+        padding: 0.085em 0;
+    }
+}
+
 .invite-stream-notice {
     margin-bottom: 20px;
 }

web/templates/invite_user_modal.hbs

@@ -4,12 +4,7 @@
     <div class="alert" id="dev_env_msg"></div>
     {{/if}}
     {{#if (not user_has_email_set) }}
-    <div class="tip">
-        {{#tr}}
-            You must <z-link>configure your email</z-link> to access this feature.
-            {{#*inline "z-link"}}<a href="/help/demo-organizations#configure-email-for-demo-organization-owner" target="_blank" rel="noopener noreferrer">{{> @partial-block }}</a>{{/inline}}
-        {{/tr}}
-    </div>
+    <div class="demo-organization-add-email-banner"></div>
     {{/if}}
     <div class="input-group">
         <div id="invite_users_option_tabs_container"></div>

web/templates/settings/convert_demo_organization_form.hbs

@@ -1,11 +1,6 @@
 <div id="convert-demo-organization-form">
     {{#unless user_has_email_set}}
-    <div class="tip">
-        {{#tr}}
-            You must <z-link>configure your email</z-link> to access this feature.
-            {{#*inline "z-link"}}<a href="/help/demo-organizations#configure-email-for-demo-organization-owner" target="_blank" rel="noopener noreferrer">{{> @partial-block }}</a>{{/inline}}
-        {{/tr}}
-    </div>
+    <div class="demo-organization-add-email-banner"></div>
     {{/unless}}
     <p>{{t "Everyone will need to log in again at the new URL for your organization." }}</p>
     <form class="subdomain-setting">