From 800efeb784176b3e1ab924b45279dab44f5c5086 Mon Sep 17 00:00:00 2001
From: soheil khaledabadi <soheilkhaledabdi@gmail.com>
Date: Sun, 27 Sep 2026 22:05:40 +0330
Subject: [PATCH] feat: show the admin-managed announcement popup when the site
 opens

Fetch the live notice from the API so users see maintenance updates without a hardcoded toast.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/App.tsx                                   |   2 +
 .../SiteAnnouncementModal.tsx                 | 128 ++++++++++++++++++
 2 files changed, 130 insertions(+)
 create mode 100644 src/components/siteAnnouncement/SiteAnnouncementModal.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 896e312..3759805 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,7 @@ import { useSelector } from "react-redux";
 import { RootState } from "./redux/store";
 import Page404 from "./pages/404";
 import RedirectToHome from "./utils/redirect-to-home ";
+import SiteAnnouncementModal from "./components/siteAnnouncement/SiteAnnouncementModal";
 // import LandingLayout from "./layout/LandingLayout";
 // import Landing from "./pages/landing";
 
@@ -40,6 +41,7 @@ const App = () => {
           }}
         />
         <ProgressBar />
+        <SiteAnnouncementModal />
         <Routes>
           {/* <Route path="/" element={<LandingLayout />}>
             <Route index element={<Landing />}></Route>
diff --git a/src/components/siteAnnouncement/SiteAnnouncementModal.tsx b/src/components/siteAnnouncement/SiteAnnouncementModal.tsx
new file mode 100644
index 0000000..5439473
--- /dev/null
+++ b/src/components/siteAnnouncement/SiteAnnouncementModal.tsx
@@ -0,0 +1,128 @@
+import Modal from "@mui/material/Modal";
+import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { FaTelegram } from "react-icons/fa6";
+import { IoClose } from "react-icons/io5";
+import { MdCampaign } from "react-icons/md";
+import useAxios from "../../hooks/useAxios";
+import Button from "../button";
+
+type SiteAnnouncement = {
+  enabled: boolean;
+  title?: string;
+  body?: string;
+  support_url?: string;
+  support_label?: string;
+  version?: string;
+};
+
+const STORAGE_KEY = "site_announcement_dismissed_version";
+
+const SiteAnnouncementModal = () => {
+  const axios = useAxios();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { data } = useQuery({
+    queryKey: ["site-announcement"],
+    queryFn: () => axios.get("/home/announcement"),
+  });
+
+  const announcement = data?.data?.result as SiteAnnouncement | undefined;
+
+  useEffect(() => {
+    if (!announcement?.enabled) {
+      setIsOpen(false);
+      return;
+    }
+
+    const dismissedVersion = sessionStorage.getItem(STORAGE_KEY);
+    if (dismissedVersion && dismissedVersion === String(announcement.version)) {
+      setIsOpen(false);
+      return;
+    }
+
+    setIsOpen(true);
+  }, [announcement]);
+
+  const handleClose = () => {
+    if (announcement?.version) {
+      sessionStorage.setItem(STORAGE_KEY, String(announcement.version));
+    }
+    setIsOpen(false);
+  };
+
+  if (!announcement?.enabled) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={isOpen}
+      onClose={handleClose}
+      aria-labelledby="site-announcement-title"
+      aria-describedby="site-announcement-body"
+      className="relative w-full h-full flex justify-center items-center p-4"
+    >
+      <motion.div
+        role="dialog"
+        aria-modal="true"
+        className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border border-secondTheme/20 bg-[rgb(18,18,18,0.98)] p-5 md:p-6 shadow-2xl shadow-black/50 outline-none"
+        initial={{ opacity: 0, y: 24 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.28 }}
+      >
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex items-center gap-2 text-secondTheme">
+            <MdCampaign className="w-7 h-7 shrink-0" aria-hidden="true" />
+            <h2
+              id="site-announcement-title"
+              className="text-xl md:text-2xl font-bold text-white"
+            >
+              {announcement.title}
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={handleClose}
+            aria-label="بستن اطلاعیه"
+            className="min-w-11 min-h-11 rounded-lg flex items-center justify-center text-gray-300 hover:text-white hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-secondTheme"
+          >
+            <IoClose className="w-7 h-7" />
+          </button>
+        </div>
+
+        <p
+          id="site-announcement-body"
+          className="mt-5 text-sm md:text-base leading-8 text-gray-200 whitespace-pre-line text-right"
+        >
+          {announcement.body}
+        </p>
+
+        <div className="mt-6 flex flex-col sm:flex-row gap-3">
+          {announcement.support_url && (
+            <a
+              href={announcement.support_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex-1 min-h-11 px-4 py-2 rounded-md bg-[#229ED9] text-white hover:bg-[#1b8bc0] focus-visible:ring-2 focus-visible:ring-sky-300 flex items-center justify-center gap-2"
+            >
+              <FaTelegram className="w-5 h-5" aria-hidden="true" />
+              <span>
+                Support: {announcement.support_label || "@PersianPingSupport"}
+              </span>
+            </a>
+          )}
+          <Button
+            extra="!flex-1 !min-h-11 !bg-gray-800 !text-white hover:!bg-gray-700 focus-visible:ring-2 focus-visible:ring-secondTheme"
+            onClick={handleClose}
+          >
+            متوجه شدم
+          </Button>
+        </div>
+      </motion.div>
+    </Modal>
+  );
+};
+
+export default SiteAnnouncementModal;