From b7853d9eb234da7c46b61b86295cdb2674b54ecb Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Mon, 20 Jan 2025 10:14:01 +0530 Subject: [PATCH] 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 | 106 +++++++++++++++------ web/src/unread_ui.ts | 24 ----- web/templates/navbar_alerts/bankruptcy.hbs | 23 ----- web/tests/navbar_alerts.test.cjs | 26 +++++ 4 files changed, 105 insertions(+), 74 deletions(-) delete mode 100644 web/templates/navbar_alerts/bankruptcy.hbs diff --git a/web/src/navbar_alerts.ts b/web/src/navbar_alerts.ts index ca284fd7e1..456831b706 100644 --- a/web/src/navbar_alerts.ts +++ b/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) => { diff --git a/web/src/unread_ui.ts b/web/src/unread_ui.ts index 7463df327b..609c3d90ca 100644 --- a/web/src/unread_ui.ts +++ b/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, }: { diff --git a/web/templates/navbar_alerts/bankruptcy.hbs b/web/templates/navbar_alerts/bankruptcy.hbs deleted file mode 100644 index a9d254d30b..0000000000 --- a/web/templates/navbar_alerts/bankruptcy.hbs +++ /dev/null @@ -1,23 +0,0 @@ -
- {{t "Welcome back!" }} - {{#if old_unreads_missing}} - {{#tr}} - You have at least {unread_msgs_count} unread messages. - {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} - {{/tr}} - {{else}} - {{#tr}} - You have {unread_msgs_count} unread messages. - {{#*inline "z-link"}}{{> @partial-block}}{{/inline}} - {{/tr}} - {{/if}} - {{t "Do you want to mark them all as read?" }} - - {{t "Yes, please!" }} - • - {{t "No, I'll catch up." }} - -
-
- {{t "Marking all messages as read…" }} -
diff --git a/web/tests/navbar_alerts.test.cjs b/web/tests/navbar_alerts.test.cjs index 277ec12b30..a331e90a51 100644 --- a/web/tests/navbar_alerts.test.cjs +++ b/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);