feat: Update ML Challenge banner

frontend/packages/data-portal/app/components/MLChallenge/MLChallengeBanner.test.tsx

@@ -2,9 +2,8 @@ import { beforeEach, jest } from '@jest/globals'
 import { render, screen } from '@testing-library/react'
 
 import { MockI18n } from 'app/components/I18n.mock'
-import { LocalStorageMock } from 'app/mocks/LocalStorage.mock'
 import { RemixMock } from 'app/mocks/Remix.mock'
-import { getMockUser, setMockTime } from 'app/utils/mock'
+import { getMockUser } from 'app/utils/mock'
 
 async function renderMlChallengeBanner() {
   const { MLChallengeBanner } = await import('./MLChallengeBanner')
@@ -14,12 +13,10 @@ async function renderMlChallengeBanner() {
 jest.unstable_mockModule('app/components/I18n', () => ({ I18n: MockI18n }))
 
 const remixMock = new RemixMock()
-const localStorageMock = new LocalStorageMock()
 
 describe('<MLChallengeBanner />', () => {
   beforeEach(() => {
-    jest.useRealTimers()
-    localStorageMock.reset()
+    jest.clearAllMocks()
     remixMock.reset()
   })
 
@@ -28,63 +25,52 @@ describe('<MLChallengeBanner />', () => {
   paths.forEach((pathname) => {
     it(`should render on ${pathname}`, async () => {
       remixMock.mockPathname(pathname)
+
       await renderMlChallengeBanner()
+
       expect(screen.queryByRole('banner')).toBeVisible()
     })
   })
 
   it('should not render on blocked pages', async () => {
     remixMock.mockPathname('/competition')
-    await renderMlChallengeBanner()
-    expect(screen.queryByRole('banner')).not.toBeInTheDocument()
-  })
-
-  it('should render challenge began message', async () => {
-    setMockTime('2024-12-01')
 
     await renderMlChallengeBanner()
-    expect(screen.getByText('mlCompetitionHasBegun')).toBeVisible()
+
+    expect(screen.queryByRole('banner')).not.toBeInTheDocument()
   })
 
   it('should render challenge ending message', async () => {
-    setMockTime('2025-01-30')
+    remixMock.mockPathname('/')
 
     await renderMlChallengeBanner()
-    expect(screen.getByText('mlCompetitionEnding')).toBeVisible()
-  })
 
-  it('should render challenge ended message', async () => {
-    setMockTime('2025-02-07')
-
-    await renderMlChallengeBanner()
-    expect(screen.getByText('mlCompetitionEnded')).toBeVisible()
+    expect(screen.getByText('mlCompetitionIsClosingSoon')).toBeVisible()
   })
 
   it('should not render banner if was dismissed', async () => {
-    setMockTime('2024-12-01')
-    localStorageMock.mockValue('mlCompetitionHasBegun')
+    remixMock.mockPathname('/')
+    jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('true')
 
     await renderMlChallengeBanner()
+
     expect(screen.queryByRole('banner')).not.toBeInTheDocument()
   })
 
-  it('should render banner if last dismissed was previous state', async () => {
-    setMockTime('2025-01-30')
-    localStorageMock.mockValue('mlCompetitionHasBegun')
-
+  it('should dismiss banner on click', async () => {
+    jest.spyOn(Storage.prototype, 'getItem').mockReturnValue(null)
+    jest.spyOn(Storage.prototype, 'setItem')
+    remixMock.mockPathname('/')
     await renderMlChallengeBanner()
-    expect(screen.getByRole('banner')).toBeVisible()
-  })
 
-  it('should dismiss banner on click', async () => {
-    setMockTime('2024-12-01')
+    expect(screen.queryByRole('banner')).toBeVisible()
 
-    await renderMlChallengeBanner()
     await getMockUser().click(screen.getByRole('button'))
 
     expect(screen.queryByRole('banner')).not.toBeInTheDocument()
-    expect(localStorageMock.setValue).toHaveBeenCalledWith(
-      'mlCompetitionHasBegun',
+    expect(localStorage.setItem).toHaveBeenCalledWith(
+      'competition-ending-banner-dismissed',
+      'true',
     )
   })
 })

frontend/packages/data-portal/app/components/MLChallenge/MLChallengeBanner.tsx

@@ -1,75 +1,45 @@
 import { Banner } from '@czi-sds/components'
-import { useLocalStorageValue } from '@react-hookz/web'
 import { useLocation } from '@remix-run/react'
-import dayjs from 'dayjs'
 import { useState } from 'react'
-import { match, P } from 'ts-pattern'
 
-import { I18n } from 'app/components/I18n'
 import { LocalStorageKeys } from 'app/constants/localStorage'
 import { useEffectOnce } from 'app/hooks/useEffectOnce'
-import { I18nKeys } from 'app/types/i18n'
 
-const BANNER_ALLOWLIST = [/^\/$/, /^\/browse-data\/.*$/]
-const ML_CHALLENGE_END_DATE = dayjs('February 6, 2025')
+import { I18n } from '../I18n'
 
-// TODO(jeremy) check with team to see what the correct interval is
-const ML_CHALLENGE_END_INTERVAL = 10
-
-const ML_CHALLENGE_END_NOTIFY_DATE = ML_CHALLENGE_END_DATE.subtract(
-  ML_CHALLENGE_END_INTERVAL,
-  'days',
-)
+const BANNER_PATHS = [/^\/$/, /^\/browse-data\/.*$/]
 
 export function MLChallengeBanner() {
-  const {
-    value: lastDismissedBannerMessage,
-    set: setLastDismissedBannerMessage,
-  } = useLocalStorageValue<string | null>(
-    LocalStorageKeys.CompetitionBannerDismissed,
-    { defaultValue: null },
-  )
-  const [open, setOpen] = useState(false)
   const location = useLocation()
-
-  const now = dayjs()
-
-  const bannerI18nKey = match(now)
-    .with(
-      P.when((d) => d.isAfter(ML_CHALLENGE_END_DATE)),
-      () => 'mlCompetitionEnded' as I18nKeys,
-    )
-    .with(
-      P.when((d) => d.isAfter(ML_CHALLENGE_END_NOTIFY_DATE)),
-      () => 'mlCompetitionEnding' as I18nKeys,
-    )
-    .otherwise(() => 'mlCompetitionHasBegun' as I18nKeys)
+  const [open, setOpen] = useState(false)
 
   // open banner on client side to prevent flash of content since local storage
   // is not available when server-side rendering.
-  useEffectOnce(() => setOpen(bannerI18nKey !== lastDismissedBannerMessage))
+  useEffectOnce(() =>
+    setOpen(
+      localStorage.getItem(
+        LocalStorageKeys.CompetitionEndingBannerDismissed,
+      ) !== 'true',
+    ),
+  )
 
   return (
     <Banner
       dismissed={
-        !open ||
-        BANNER_ALLOWLIST.every((regex) => !regex.test(location.pathname))
+        !open || BANNER_PATHS.every((regex) => !regex.test(location.pathname))
       }
       dismissible
       sdsType="primary"
       onClose={() => {
         setOpen(false)
-        setLastDismissedBannerMessage(bannerI18nKey)
+        localStorage.setItem(
+          LocalStorageKeys.CompetitionEndingBannerDismissed,
+          'true',
+        )
       }}
     >
       <div className="[&_a]:text-white [&_a]:border-b [&_a]:border-dashed [&_a]:border-white">
-        <I18n
-          i18nKey={bannerI18nKey}
-          values={{
-            // round to 1 day on the last day when there's less than 24 hours before the challenge ends
-            days: Math.max(ML_CHALLENGE_END_DATE.diff(now, 'days'), 1),
-          }}
-        />
+        <I18n i18nKey="mlCompetitionIsClosingSoon" />
       </div>
     </Banner>
   )

frontend/packages/data-portal/app/constants/localStorage.ts

@@ -1,5 +1,7 @@
 export enum LocalStorageKeys {
-  CompetitionBannerDismissed = 'competition-banner-dismissed',
+  CompetitionEndingBannerDismissed = 'competition-ending-banner-dismissed',
   SurveyBannerDismissed = 'survey-banner-dismissed',
   TableRenderErrorPageReloadCount = 'table-render-error-page-reload-count',
+  // DEPRECATED - DO NOT USE (keep these in the enum so we know not to use them in the future):
+  CompetitionBannerDismissed = 'competition-banner-dismissed',
 }

frontend/packages/data-portal/public/locales/en/translation.json

@@ -241,8 +241,7 @@
   "microscopeModel": "Microscope model",
   "mlChallengeEndDate": "February 5, 2025",
   "mlChallengeStartDate": "November 6, 2024",
-  "mlCompetitionEnded": "Congratulations to the ML Competition winners! $t(mlCompetitionLearnMore) about the winning models.",
-  "mlCompetitionEnding": "ML Competition is ending in {{days}} days. Compete for cash prizes. $t(mlCompetitionLearnMore)",
+  "mlCompetitionIsClosingSoon": "ML Competition is closing soon. Enter by 1/29 for cash prizes. $t(mlCompetitionLearnMore)",
   "mlCompetitionHasBegun": "ML Competition has begun. Enter for cash prizes. $t(mlCompetitionLearnMore)",
   "mlCompetitionLearnMore": "<url to='/competition'>Learn More</url>",
   "modelWeights": "Model Weights",