diff --git a/web/src/settings_notifications.ts b/web/src/settings_notifications.ts index d6b9c529ad..c30e3d7423 100644 --- a/web/src/settings_notifications.ts +++ b/web/src/settings_notifications.ts @@ -5,6 +5,7 @@ import {z} from "zod"; import render_confirm_disable_all_notifications from "../templates/confirm_dialog/confirm_disable_all_notifications.hbs"; import render_stream_specific_notification_row from "../templates/settings/stream_specific_notification_row.hbs"; +import * as banners from "./banners.ts"; import * as blueslip from "./blueslip.ts"; import * as channel from "./channel.ts"; import * as confirm_dialog from "./confirm_dialog.ts"; @@ -33,6 +34,22 @@ import * as util from "./util.ts"; export let user_settings_panel: SettingsPanel | undefined; +const DESKTOP_NOTIFICATIONS_BANNER: banners.Banner = { + intent: "warning", + label: $t({ + defaultMessage: "Zulip needs your permission to enable desktop notifications.", + }), + buttons: [ + { + label: $t({defaultMessage: "Enable notifications"}), + custom_classes: "request-desktop-notifications", + attention: "primary", + }, + ], + close_button: true, + custom_classes: "desktop-setting-notifications", +}; + function rerender_ui(): void { const $unmatched_streams_table = $("#stream-specific-notify-table"); if ($unmatched_streams_table.length === 0) { @@ -68,6 +85,18 @@ function rerender_ui(): void { } else { $unmatched_streams_table.css("display", "table-row-group"); } + update_notification_banner(); +} + +function update_notification_banner(): void { + const permission = Notification.permission; + if (permission === "granted") { + banners.close($(".desktop-notification-settings-banners .desktop-setting-notifications")); + $(".send_test_notification").show(); + } else { + banners.append(DESKTOP_NOTIFICATIONS_BANNER, $(".desktop-notification-settings-banners")); + $(".send_test_notification").hide(); + } } function change_notification_setting( @@ -336,6 +365,26 @@ export function set_up(settings_panel: SettingsPanel): void { ); }); + $("#settings_content").on("click", ".request-desktop-notifications", (e) => { + e.preventDefault(); + void Notification.requestPermission().then((permission) => { + if (permission === "granted") { + update_notification_banner(); + } else if (permission === "denied") { + window.open( + "/help/desktop-notifications#check-platform-settings", + "_blank", + "noopener noreferrer", + ); + } + }); + }); + + $("#settings_content").on("click", ".banner-close-button", (e) => { + e.preventDefault(); + $(".banner-wrapper").remove(); + }); + set_enable_marketing_emails_visibility(); rerender_ui(); } diff --git a/web/templates/settings/notification_settings.hbs b/web/templates/settings/notification_settings.hbs index a01cde7aa7..07f018ae72 100644 --- a/web/templates/settings/notification_settings.hbs +++ b/web/templates/settings/notification_settings.hbs @@ -107,6 +107,8 @@ {{> settings_save_discard_widget section_name="desktop-message-settings" show_only_indicator=(not for_realm_settings) }} +
+ {{#unless for_realm_settings}}

{{t "Send a test notification" }}

{{/unless}}