Merge pull request #1368 from OpenBeta/test-area

Add Test Area Banner

Author: mikeschen

src/app/(default)/components/LandingHero.tsx

@@ -1,20 +1,52 @@
+'use client'
+import { useSession } from 'next-auth/react'
+import Link from 'next/link'
 import { AppAlert } from '@/components/broadcast/AppAlert'
 import { SignupButton } from './DesktopHeader'
 
+const STORAGE_KEY_JOIN_US = 'suppress-join-us-banner'
+const STORAGE_KEY_TEST_AREA = 'suppress-test-area-banner'
+
+const TEST_AREA_ID = process.env.NEXT_PUBLIC_TEST_AREA_ID ?? '18c5dd5c-8186-50b6-8a60-ae2948c548d1'
+const TEST_AREA_URL = `/area/${TEST_AREA_ID}/test-area`
+
 export const LandingHero: React.FC = () => {
-  return (
-    <section className='mt-4'>
+  const { status } = useSession()
+
+  if (status === 'authenticated') {
+    return (
       <AppAlert
+        cookieStorageKey={STORAGE_KEY_TEST_AREA}
         message={
           <>
-            <h1 className='text-xl tracking-tighter font-bold'>Share your climbing route knowledge!</h1>
+            <h1 className='text-xl tracking-tighter font-bold'>Try out adding a route!</h1>
             <div className='font-medium text-neutral/80'>
-              <p>Join us to help improve this comprehensive <br /> climbing resource for the community.</p>
+              <p>
+                You're in the test area — perfect for exploring how everything works.
+                <br />Add a route and see it in action!
+              </p>
             </div>
-            <SignupButton />
+            <Link href={TEST_AREA_URL} className='btn btn-accent border-b-2 border-b-neutral'>
+              Test Area
+            </Link>
           </>
         }
       />
-    </section>
+    )
+  }
+
+  return (
+    <AppAlert
+      cookieStorageKey={STORAGE_KEY_JOIN_US}
+      message={
+        <>
+          <h1 className='text-xl tracking-tighter font-bold'>Share your climbing route knowledge!</h1>
+          <div className='font-medium text-neutral/80'>
+            <p>Join us to help improve this comprehensive <br /> climbing resource for the community.</p>
+          </div>
+          <SignupButton />
+        </>
+      }
+    />
   )
 }

src/components/broadcast/AppAlert.tsx

@@ -1,43 +1,42 @@
 'use client'
 import Cookies from 'js-cookie'
 import { useState, useEffect } from 'react'
-import { useSession } from 'next-auth/react'
 import { SuppressButton } from './SuppressButton'
 
-const STORAGE_KEY = 'suppress-main-banner'
-
 export interface AppAlertProps {
   message: JSX.Element
+  cookieStorageKey: string
 }
 
 /**
  * Main alert to be displayed under the nav bar.  Users can snooze the alert.
  * @param message alert content
  */
-export const AppAlert: React.FC<AppAlertProps> = ({ message }) => {
-  const { status } = useSession()
+export const AppAlert: React.FC<AppAlertProps> = ({
+  message,
+  cookieStorageKey
+}) => {
   const [showAlert, setShowAlert] = useState(false)
+
   useEffect(() => {
-    const suppressed = Cookies.get(STORAGE_KEY)
+    const suppressed = Cookies.get(cookieStorageKey)
+
     setShowAlert(suppressed == null)
-  }, [])
+  }, [cookieStorageKey])
 
-  // Hide alert if user is logged in
-  return showAlert && status !== 'authenticated'
-    ? (
+  return (
+    showAlert && (
       <div className='z-40 w-fit alert alert-info flex flex-wrap justify-center xl:p-4 gap-4'>
-        <div className='flex flex-col gap-2 items-start'>
-          {message}
-        </div>
+        <div className='flex flex-col gap-2 items-start'>{message}</div>
         <div className='inline-flex w-[210px] grow-1'>
           <SuppressButton
             onClick={() => {
               setShowAlert(false)
-              Cookies.set(STORAGE_KEY, '1', { strict: true, expires: 30 })
+              Cookies.set(cookieStorageKey, '1', { strict: true, expires: 30 })
             }}
           />
         </div>
       </div>
-      )
-    : null
+    )
+  )
 }

src/components/broadcast/__tests__/AppAlert.tsx

@@ -23,47 +23,52 @@ jest.mock('next-auth/react', () => ({
 
 let AppAlertComponent: React.FC<AppAlertProps>
 
-describe('Banner suppression', () => {
+describe('AppAlert', () => {
   beforeAll(async () => {
     // why async import?  see https://github.com/facebook/jest/issues/10025#issuecomment-716789840
     const module = await import('../AppAlert')
     AppAlertComponent = module.AppAlert
   })
 
-  it('doesn\'t show alert when cookie exists', async () => {
-    // cookie exists
-    cookieGetter.mockReturnValueOnce('foo')
+  beforeEach(() => {
+    cookieGetter.mockClear()
+    cookieSetter.mockClear()
+  })
+
+  it('renders alert with message', () => {
     render(
       <AppAlertComponent
+        cookieStorageKey='test'
         message={
           <div>
             important message
           </div>
-      }
-      />)
+        }
+      />
+    )
 
-    expect(screen.queryAllByRole('button').length).toEqual(0)
-    cookieGetter.mockClear()
+    expect(screen.getByText('important message')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Don't show this again/i })).toBeInTheDocument()
   })
 
-  it('shows alert', async () => {
-    // Clear previous cookie setting if any
-    // cookieGetter.mockClear()
-    // cookieGetter.mockRejectedValueOnce(null)
+  it('sets cookie when suppress button is clicked', async () => {
     const user = userEvent.setup({ skipHover: true })
+
     render(
       <AppAlertComponent
+        cookieStorageKey='test'
         message={
           <div>
             important message 2
           </div>
-      }
-      />)
-    screen.debug()
+        }
+      />
+    )
+
     // click the Suppress button
     await user.click(screen.getByRole('button', { name: /Don't show this again/i }))
 
-    // alert dismissed
-    expect(screen.queryAllByRole('button')).toHaveLength(0)
+    // verify cookie was set
+    expect(cookieSetter).toHaveBeenCalledWith('test', '1', { strict: true, expires: 30 })
   })
 })