From 4a8fa210a36650e42eff28a3fee26a3c9467ec62 Mon Sep 17 00:00:00 2001
From: Saurabh <103saurabhshukla@gmail.com>
Date: Wed, 14 Jan 2026 12:28:39 +0530
Subject: [PATCH] feat: add cancel button to guest banner

Allows users in guest mode to dismiss the banner for the current session
---
 .../components/commonUI/GuestModeNotice.tsx   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/commonUI/GuestModeNotice.tsx b/frontend/src/components/commonUI/GuestModeNotice.tsx
index b30f114..e3b360c 100644
--- a/frontend/src/components/commonUI/GuestModeNotice.tsx
+++ b/frontend/src/components/commonUI/GuestModeNotice.tsx
@@ -1,19 +1,35 @@
 import { useAuthContext } from '@/hooks/useAuthContext'
 import { HStack, Text } from '@chakra-ui/react'
 import { useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { DefaultButton } from './Button'
+import { DefaultButton, RedButton } from './Button'
+
+const GUEST_MODE_NOTIFICATION = 'guest_mode_notification'
 
 export default function GuestModeNotice() {
   const navigate = useNavigate()
   const { t } = useTranslation()
   const { logout } = useAuthContext()
 
+  //check localstorage to persist the notice visibility state
+  const [showNotice, setShowNotice] = useState(() => {
+    const savedState = localStorage.getItem(GUEST_MODE_NOTIFICATION)
+    return savedState ? JSON.parse(savedState) : true // Default to be true if not found
+  })
+
   const handleLogin = () => {
     logout()
     navigate({ to: '/login' })
   }
 
+  const handleCancel = () => {
+    setShowNotice(false)
+    localStorage.setItem(GUEST_MODE_NOTIFICATION, JSON.stringify(false))
+  }
+
+  if (!showNotice) return null
+
   return (
     <HStack
       bg="orange.50"
@@ -36,6 +52,9 @@ export default function GuestModeNotice() {
       <DefaultButton size="xs" onClick={handleLogin}>
         {t('general.actions.login')}
       </DefaultButton>
+      <RedButton size="xs" onClick={handleCancel} variant="ghost">
+        {t('general.actions.cancel')}
+      </RedButton>
     </HStack>
   )
 }