feat: enable dismiss button to hide notification in header

apps/OpenSign/src/components/Header.js

@@ -20,6 +20,9 @@ const Header = ({ showSidebar }) => {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const { width } = useWindowSize();
+  const current_notification_version = "1"; // Update this with each new feature release
+  // Get the dismissed version from local storage
+  const dismissedVersion = localStorage.getItem("notificationDismissedVersion");
   const username = localStorage.getItem("username") || "";
   const image = localStorage.getItem("profileImg") || dp;
   const [isOpen, setIsOpen] = useState(false);
@@ -30,7 +33,10 @@ const Header = ({ showSidebar }) => {
   );
   const [emailUsed, setEmailUsed] = useState(0);
   const [isModal, setIsModal] = useState(false);
-
+  const [showNotification, setShowNotification] = useState(
+    (!dismissedVersion || dismissedVersion !== current_notification_version) &&
+      true
+  );
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
@@ -115,17 +121,34 @@ const Header = ({ showSidebar }) => {
   const handleMailUsed = () => {
     setIsModal(!isModal);
   };
+  // Handle dismissing the notification
+  const dismissNotification = () => {
+    // Store the current version as dismissed in local storage
+    localStorage.setItem(
+      "notificationDismissedVersion",
+      current_notification_version
+    );
+    setShowNotification(false);
+  };
   return (
     <div>
-      {isEnableSubscription && (
-        <div className="shadow py-1 text-center bg-[#CAE4FA] text-[14px] p-1">
-          {t("header-news")} —
-          <span
-            className="cursor-pointer font-medium underline text-blue-800"
-            onClick={() => navigate("/profile")}
+      {isEnableSubscription && showNotification && (
+        <div className="flex justify-between items-center shadow py-1 bg-[#CAE4FA]  p-1">
+          <div className="text-center text-[14px] ml-auto">
+            {t("header-news")} —
+            <span
+              className="cursor-pointer font-medium underline text-blue-800"
+              onClick={() => navigate("/profile")}
+            >
+              {" " + t("header-news-btn") + "."}
+            </span>
+          </div>
+          <div
+            className="ml-auto mr-1 cursor-pointer"
+            onClick={() => dismissNotification()}
           >
-            {" " + t("header-news-btn") + "."}
-          </span>
+            <i className="fa-light fa-xmark"></i>
+          </div>
         </div>
       )}
       <div className="op-navbar bg-base-100 shadow">