fix(announcement-banner): persist dismiss state in localStorage

libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.spec.tsx

@@ -1,16 +1,22 @@
+import { useLocalStorage } from '@qovery/shared/util-hooks'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import * as useAnnouncementBannerModule from '../hooks/use-announcement-banner/use-announcement-banner'
 import { AnnouncementBanner } from './announcement-banner'
 
 jest.mock('../hooks/use-announcement-banner/use-announcement-banner')
+jest.mock('@qovery/shared/util-hooks', () => ({
+  useLocalStorage: jest.fn(),
+}))
 
 describe('AnnouncementBanner', () => {
   const mockUseAnnouncementBanner = useAnnouncementBannerModule.useAnnouncementBanner as jest.MockedFunction<
     typeof useAnnouncementBannerModule.useAnnouncementBanner
   >
+  const mockSetDismissedMessage = jest.fn()
 
   beforeEach(() => {
     jest.clearAllMocks()
+    ;(useLocalStorage as jest.Mock).mockReturnValue([null, mockSetDismissedMessage])
   })
 
   it('should render nothing when banner data is null', () => {
@@ -85,17 +91,30 @@ describe('AnnouncementBanner', () => {
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
   })
 
-  it('should hide banner when dismiss button is clicked', async () => {
+  it('should call setDismissedMessage with banner message when dismiss button is clicked', async () => {
     mockUseAnnouncementBanner.mockReturnValue({
       message: 'Dismissible message',
       variant: 'warning',
       dismissible: true,
     })
 
-    const { userEvent, container } = renderWithProviders(<AnnouncementBanner />)
+    const { userEvent } = renderWithProviders(<AnnouncementBanner />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+
+    expect(mockSetDismissedMessage).toHaveBeenCalledWith('Dismissible message')
+  })
+
+  it('should not show banner when already dismissed in localStorage', () => {
+    const localStorageMock = useLocalStorage as jest.Mock
+    localStorageMock.mockReturnValue(['Already dismissed message', jest.fn()])
+    mockUseAnnouncementBanner.mockReturnValue({
+      message: 'Already dismissed message',
+      variant: 'info',
+      dismissible: true,
+    })
 
-    const dismissButton = screen.getByRole('button', { name: 'Dismiss' })
-    await userEvent.click(dismissButton)
+    const { container } = renderWithProviders(<AnnouncementBanner />)
 
     expect(container).toBeEmptyDOMElement()
   })

libs/shared/posthog/feature/src/lib/announcement-banner/announcement-banner.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
 import { Banner } from '@qovery/shared/ui'
+import { useLocalStorage } from '@qovery/shared/util-hooks'
 import {
   type AnnouncementBannerPayload,
   useAnnouncementBanner,
@@ -13,7 +13,9 @@ const VARIANT_TO_COLOR_MAP: Record<AnnouncementBannerPayload['variant'], 'brand'
 
 export function AnnouncementBanner() {
   const bannerData = useAnnouncementBanner()
-  const [isDismissed, setIsDismissed] = useState(false)
+  const [dismissedMessage, setDismissedMessage] = useLocalStorage<string | null>('announcement_banner_dismissed', null)
+
+  const isDismissed = Boolean(bannerData && dismissedMessage === bannerData.message)
 
   if (!bannerData || isDismissed) {
     return null
@@ -31,7 +33,7 @@ export function AnnouncementBanner() {
   }
 
   const handleDismiss = () => {
-    setIsDismissed(true)
+    setDismissedMessage(bannerData.message)
   }
 
   return (