From ce97244fd875ebed58e32d034fe71ced2504d975 Mon Sep 17 00:00:00 2001
From: Sayam Samal <sayam@zulip.com>
Date: Fri, 14 Mar 2025 17:29:59 +0530
Subject: [PATCH] popup_banners: Add fade-out and close logic to banner close
 button.

This commit adds the fade-out and close logic to the banner close button
and also moves the `fade_out_popup_banner` method to `popup_banners.ts`.
---
 web/src/banners.ts       |  8 --------
 web/src/popup_banners.ts | 20 ++++++++++++--------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/web/src/banners.ts b/web/src/banners.ts
index c505766799..f550d6345e 100644
--- a/web/src/banners.ts
+++ b/web/src/banners.ts
@@ -39,14 +39,6 @@ export function close($banner: JQuery): void {
     $banner.remove();
 }
 
-export function fade_out_popup_banner($banner: JQuery): void {
-    $banner.addClass("fade-out");
-    // The delay is the same as the animation duration for fade-out.
-    setTimeout(() => {
-        close($banner);
-    }, 300);
-}
-
 export function initialize(): void {
     $("body").on("click", ".banner .banner-close-action", function (this: HTMLElement, e) {
         e.preventDefault();
diff --git a/web/src/popup_banners.ts b/web/src/popup_banners.ts
index b80c3ae43b..b494cfd17d 100644
--- a/web/src/popup_banners.ts
+++ b/web/src/popup_banners.ts
@@ -5,6 +5,14 @@ import type {Banner} from "./banners.ts";
 import * as buttons from "./buttons.ts";
 import {$t} from "./i18n.ts";
 
+function fade_out_popup_banner($banner: JQuery): void {
+    $banner.addClass("fade-out");
+    // The delay is the same as the animation duration for fade-out.
+    setTimeout(() => {
+        banners.close($banner);
+    }, 300);
+}
+
 const CONNECTION_ERROR_POPUP_BANNER: Banner = {
     intent: "danger",
     label: $t({
@@ -50,7 +58,7 @@ export function open_found_missing_unreads_banner(on_jump_to_first_unread: () =>
             e.stopPropagation();
 
             const $banner = $(this).closest(".banner");
-            banners.fade_out_popup_banner($banner);
+            fade_out_popup_banner($banner);
             on_jump_to_first_unread();
         },
     );
@@ -58,7 +66,7 @@ export function open_found_missing_unreads_banner(on_jump_to_first_unread: () =>
 
 export function close_found_missing_unreads_banner(): void {
     const $banner = $("#popup_banners_wrapper").find(".found-missing-unreads");
-    banners.fade_out_popup_banner($banner);
+    fade_out_popup_banner($banner);
 }
 
 export function open_connection_error_popup_banner(opts: {
@@ -104,7 +112,7 @@ export function close_connection_error_popup_banner(check_if_get_events_error =
     if (check_if_get_events_error && $banner.hasClass("get-events-error")) {
         return;
     }
-    banners.fade_out_popup_banner($banner);
+    fade_out_popup_banner($banner);
 }
 
 export function initialize(): void {
@@ -117,11 +125,7 @@ export function initialize(): void {
             e.preventDefault();
             e.stopPropagation();
             const $banner = $(this).closest(".banner");
-            $banner.addClass("fade-out");
-            // The delay is the same as the animation duration for fade-out.
-            setTimeout(() => {
-                banners.close($banner);
-            }, 300);
+            fade_out_popup_banner($banner);
         },
     );
 }