banners: Redesign bankruptcy navbar banner.

As part of the banner redesign project, this commit applies the new
banner styles to the bankruptcy navbar banner.

web/src/navbar_alerts.ts

@@ -2,7 +2,6 @@ import {addDays} from "date-fns";
 import $ from "jquery";
 import assert from "minimalistic-assert";
 
-import render_bankruptcy_alert_content from "../templates/navbar_alerts/bankruptcy.hbs";
 import render_configure_email_alert_content from "../templates/navbar_alerts/configure_outgoing_email.hbs";
 import render_demo_organization_deadline_content from "../templates/navbar_alerts/demo_organization_deadline.hbs";
 import render_empty_required_profile_fields from "../templates/navbar_alerts/empty_required_profile_fields.hbs";
@@ -28,18 +27,9 @@ import * as timerender from "./timerender.ts";
 import {should_display_profile_incomplete_alert} from "./timerender.ts";
 import * as unread from "./unread.ts";
 import * as unread_ops from "./unread_ops.ts";
-import * as unread_ui from "./unread_ui.ts";
 import {user_settings} from "./user_settings.ts";
 import * as util from "./util.ts";
 
-const show_step = function ($process: JQuery, step: number): void {
-    $process
-        .find("[data-step]")
-        .hide()
-        .filter("[data-step=" + step + "]")
-        .show();
-};
-
 export function should_show_desktop_notifications_banner(ls: LocalStorage): boolean {
     // if the user said to never show banner on this computer again, it will
     // be stored as `true` so we want to negate that.
@@ -62,6 +52,29 @@ export function should_show_desktop_notifications_banner(ls: LocalStorage): bool
     );
 }
 
+export function should_show_bankruptcy_banner(): boolean {
+    // Until we've handled possibly declaring bankruptcy, don't show
+    // unread counts since they only consider messages that are loaded
+    // client side and may be different from the numbers reported by
+    // the server.
+
+    if (!page_params.furthest_read_time) {
+        // We've never read a message.
+        return false;
+    }
+
+    const now = Date.now() / 1000;
+    if (
+        unread.get_unread_message_count() > 500 &&
+        now - page_params.furthest_read_time > 60 * 60 * 24 * 2
+    ) {
+        // 2 days.
+        return true;
+    }
+
+    return false;
+}
+
 export function should_show_server_upgrade_notification(ls: LocalStorage): boolean {
     // We do not show the server upgrade nag for a week after the user
     // clicked "dismiss".
@@ -187,6 +200,52 @@ const DESKTOP_NOTIFICATIONS_BANNER: AlertBanner = {
     custom_classes: "navbar-alert-banner",
 };
 
+const bankruptcy_banner = (): AlertBanner => {
+    const old_unreads_missing = unread.old_unreads_missing;
+    const unread_msgs_count = unread.get_unread_message_count();
+    let label = "";
+    if (old_unreads_missing) {
+        label = $t(
+            {
+                defaultMessage:
+                    "Welcome back! You have at least {unread_msgs_count} unread messages. Do you want to mark them all as read?",
+            },
+            {
+                unread_msgs_count,
+            },
+        );
+    } else {
+        label = $t(
+            {
+                defaultMessage:
+                    "Welcome back! You have {unread_msgs_count} unread messages. Do you want to mark them all as read?",
+            },
+            {
+                unread_msgs_count,
+            },
+        );
+    }
+    return {
+        process: "bankruptcy",
+        intent: "info",
+        label,
+        buttons: [
+            {
+                type: "quiet",
+                label: $t({defaultMessage: "Yes, please!"}),
+                custom_classes: "accept-bankruptcy",
+            },
+            {
+                type: "borderless",
+                label: $t({defaultMessage: "No, I'll catch up."}),
+                custom_classes: "banner-close-action",
+            },
+        ],
+        close_button: true,
+        custom_classes: "navbar-alert-banner",
+    };
+};
+
 export function initialize(): void {
     const ls = localstorage();
     const browser_time_zone = timerender.browser_time_zone();
@@ -230,17 +289,8 @@ export function initialize(): void {
         });
     } else if (should_show_desktop_notifications_banner(ls)) {
         banners.open(DESKTOP_NOTIFICATIONS_BANNER, $("#navbar_alerts_wrapper"));
-    } else if (unread_ui.should_display_bankruptcy_banner()) {
-        const old_unreads_missing = unread.old_unreads_missing;
-        const unread_msgs_count = unread.get_unread_message_count();
-        open({
-            data_process: "bankruptcy",
-            custom_class: "bankruptcy",
-            rendered_alert_content_html: render_bankruptcy_alert_content({
-                old_unreads_missing,
-                unread_msgs_count,
-            }),
-        });
+    } else if (should_show_bankruptcy_banner()) {
+        banners.open(bankruptcy_banner(), $("#navbar_alerts_wrapper"));
     } else if (check_profile_incomplete()) {
         open({
             data_process: "profile-incomplete",
@@ -280,12 +330,14 @@ export function initialize(): void {
         },
     );
 
-    $(".accept-bankruptcy").on("click", function (e) {
-        e.preventDefault();
-        const $process = $(this).closest("[data-process]");
-        show_step($process, 2);
-        setTimeout(unread_ops.mark_all_as_read, 1000);
-        $(window).trigger("resize");
+    $("#navbar_alerts_wrapper").on("click", ".accept-bankruptcy", function (this: HTMLElement) {
+        const $accept_button = $(this);
+        $accept_button.prop("disabled", true).css("pointer-events", "none");
+        const $banner = $(this).closest(".banner");
+        unread_ops.mark_all_as_read();
+        setTimeout(() => {
+            banners.close($banner);
+        }, 2000);
     });
 
     $(".dismiss-upgrade-nag").on("click", (e: JQuery.ClickEvent) => {

web/src/unread_ui.ts

@@ -8,7 +8,6 @@ import render_mark_as_read_turned_off_banner from "../templates/unread_banner/ma
 import * as message_lists from "./message_lists.ts";
 import type {Message} from "./message_store.ts";
 import * as narrow_state from "./narrow_state.ts";
-import {page_params} from "./page_params.ts";
 import {web_mark_read_on_scroll_policy_values} from "./settings_config.ts";
 import * as unread from "./unread.ts";
 import type {FullUnreadCountsData} from "./unread.ts";
@@ -104,29 +103,6 @@ export function update_unread_counts(skip_animations = false): void {
     set_count_toggle_button($(".left-sidebar-toggle-unreadcount"), res.home_unread_messages);
 }
 
-export function should_display_bankruptcy_banner(): boolean {
-    // Until we've handled possibly declaring bankruptcy, don't show
-    // unread counts since they only consider messages that are loaded
-    // client side and may be different from the numbers reported by
-    // the server.
-
-    if (!page_params.furthest_read_time) {
-        // We've never read a message.
-        return false;
-    }
-
-    const now = Date.now() / 1000;
-    if (
-        unread.get_unread_message_count() > 500 &&
-        now - page_params.furthest_read_time > 60 * 60 * 24 * 2
-    ) {
-        // 2 days.
-        return true;
-    }
-
-    return false;
-}
-
 export function initialize({
     notify_server_messages_read,
 }: {

web/templates/navbar_alerts/bankruptcy.hbs

@@ -1,23 +0,0 @@
-<div data-step="1">
-    {{t "Welcome back!" }}
-    {{#if old_unreads_missing}}
-        {{#tr}}
-            You have <z-link>at least {unread_msgs_count}</z-link> unread messages.
-            {{#*inline "z-link"}}<a href="/help/marking-messages-as-read" class="alert-link bankruptcy_unread_count" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
-        {{/tr}}
-    {{else}}
-        {{#tr}}
-            You have <z-link>{unread_msgs_count}</z-link> unread messages.
-            {{#*inline "z-link"}}<span class="bankruptcy_unread_count">{{> @partial-block}}</span>{{/inline}}
-        {{/tr}}
-    {{/if}}
-    {{t "Do you want to mark them all as read?" }}
-    <span class="buttons">
-        <a class="alert-link accept-bankruptcy" role="button" tabindex=0>{{t "Yes, please!" }}</a>
-        &bull;
-        <a class="alert-link exit" role="button" tabindex=0>{{t "No, I'll catch up." }}</a>
-    </span>
-</div>
-<div data-step="2" style="display: none;">
-    {{t "Marking all messages as read…" }}
-</div>

web/tests/navbar_alerts.test.cjs

@@ -9,6 +9,7 @@ const {run_test} = require("./lib/test.cjs");
 const {page_params} = require("./lib/zpage_params.cjs");
 
 const desktop_notifications = mock_esm("../src/desktop_notifications");
+const unread = mock_esm("../src/unread");
 const util = mock_esm("../src/util");
 const timerender = mock_esm("../src/timerender");
 
@@ -67,6 +68,31 @@ test("should_show_desktop_notifications_banner", ({override}) => {
     assert.equal(navbar_alerts.should_show_desktop_notifications_banner(ls), false);
 });
 
+test("should_show_bankruptcy_banner", ({override}) => {
+    // Show bankruptcy banner when following conditions are suitable:
+    // - The user has read at least one message, i.e., furthest_read_time is defined.
+    // - The user has more than 500 unread messages.
+    // - The user has not read any message in the last 2 days.
+    const start_time = new Date("2024-01-01T10:00:00.000Z"); // Wednesday 1/1/2024 10:00:00 AM (UTC+0)
+    override(page_params, "furthest_read_time", start_time.getTime() / 1000);
+    override(Date, "now", () => addDays(start_time, 3).getTime()); // Saturday 1/4/2024 10:00:00 AM (UTC+0)
+    override(unread, "get_unread_message_count", () => 501);
+    assert.equal(navbar_alerts.should_show_bankruptcy_banner(), true);
+
+    // Don't show bankruptcy banner if user has not read any message.
+    override(page_params, "furthest_read_time", undefined);
+    assert.equal(navbar_alerts.should_show_bankruptcy_banner(), false);
+    override(page_params, "furthest_read_time", start_time.getTime() / 1000);
+
+    // Don't show bankruptcy banner if user has read any message in the last 2 days.
+    override(Date, "now", () => addDays(start_time, 1).getTime()); // Thursday 1/2/2024 10:00:00 AM (UTC+0)
+    assert.equal(navbar_alerts.should_show_bankruptcy_banner(), false);
+
+    // Don't show bankruptcy banner if user has less <= 500 unread messages.
+    override(unread, "get_unread_message_count", () => 500);
+    assert.equal(navbar_alerts.should_show_bankruptcy_banner(), false);
+});
+
 test("profile_incomplete_alert", ({override}) => {
     // Don't test time related conditions
     override(timerender, "should_display_profile_incomplete_alert", () => true);