make manifold wrapped a banner (#2276)

web/components/layout/page.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect } from 'react'
 import { BottomNavBar } from '../nav/bottom-nav-bar'
 import Sidebar from '../nav/sidebar'
 import { Toaster } from 'react-hot-toast'
@@ -8,6 +8,11 @@ import { Col } from './col'
 import { GoogleOneTapLogin } from 'web/lib/firebase/google-onetap-login'
 import { ConfettiOnDemand } from '../confetti-on-demand'
 import { useTracking } from 'web/hooks/use-tracking'
+import { usePersistentLocalState } from 'web/hooks/use-persistent-local-state'
+import { safeLocalStorage } from 'web/lib/util/local'
+import { Banner } from '../nav/banner'
+import { ENV_CONFIG } from 'common/envs/constants'
+import { useUser } from 'web/hooks/use-user'
 
 export function Page(props: {
   trackPageView: string | false
@@ -16,6 +21,7 @@ export function Page(props: {
   children?: ReactNode
   hideSidebar?: boolean
   hideBottomBar?: boolean
+  manifoldWrappedBannerEnabled?: boolean
 }) {
   const {
     trackPageView,
@@ -24,12 +30,25 @@ export function Page(props: {
     className,
     hideSidebar,
     hideBottomBar,
+    manifoldWrappedBannerEnabled,
   } = props
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   trackPageView && useTracking(`view ${trackPageView}`, trackPageProps)
   const isMobile = useIsMobile()
 
+  const [showBanner, setShowBanner] = usePersistentLocalState<
+    boolean | undefined
+  >(undefined, 'show-manifest-banner')
+  useEffect(() => {
+    const shouldHide =
+      safeLocalStorage?.getItem('show-manifest-banner') === 'false'
+    if (!shouldHide) {
+      setShowBanner(true)
+    }
+  }, [showBanner])
+  const user = useUser()
+
   return (
     <>
       <ConfettiOnDemand />
@@ -53,9 +72,21 @@ export function Page(props: {
           className={clsx(
             'flex flex-1 flex-col lg:mt-6 xl:px-2',
             'col-span-8',
+            manifoldWrappedBannerEnabled && showBanner ? 'lg:mt-0' : 'lg:mt-6',
             className
           )}
         >
+          {manifoldWrappedBannerEnabled && showBanner && user && (
+            <Banner
+              className="mb-3"
+              setShowBanner={setShowBanner}
+              link={`https://${ENV_CONFIG.domain}/${user.username}/wrapped2023`}
+            >
+              <div className="flex flex-col items-start">
+                🎁 Your Manifold Wrapped is here!
+              </div>
+            </Banner>
+          )}
           {children}
         </main>
       </Col>

web/components/nav/manifest-banner.tsx → web/components/nav/banner.tsx

@@ -3,11 +3,13 @@ import { IconButton } from '../buttons/button'
 import { Row } from '../layout/row'
 import clsx from 'clsx'
 
-export function ManifestBanner(props: {
+export function Banner(props: {
   setShowBanner: (show: boolean) => void
   className?: string
+  children: React.ReactNode
+  link: string
 }) {
-  const { setShowBanner, className } = props
+  const { setShowBanner, className, children, link } = props
   return (
     <Row
       className={clsx(
@@ -16,17 +18,12 @@ export function ManifestBanner(props: {
       )}
     >
       <a
-        href="https://www.manifestconference.net/"
+        href={link}
         target="_blank"
         rel="noopener noreferrer"
-        className="py-3 pl-4"
+        className="w-full py-3 pl-4"
       >
-        Get tickets to{' '}
-        <span className="inline-block font-semibold group-hover:animate-bounce">
-          Manifest
-        </span>{' '}
-        — our first forecasting festival, Sept 22-24 in Berkeley, CA
-        <ExternalLinkIcon className="ml-1 inline-block h-4 w-4" />
+        {children}
       </a>
       <IconButton onClick={() => setShowBanner(false)}>
         <XIcon className="h-5 w-5 cursor-pointer" />

web/pages/[username]/index.tsx

@@ -361,16 +361,6 @@ function UserProfile(props: {
             ]}
           />
         </Col>
-        {isCurrentUser && (
-          <Row className="fixed bottom-16 left-0 right-0 max-w-[1440px] select-none justify-end sm:bottom-8">
-            <Link
-              href={`/${user.username}/wrapped2023`}
-              className="from-primary-400 hover:from-primary-500 mr-4 w-fit rounded-full bg-gradient-to-br to-pink-400 px-4 py-2 text-white hover:to-pink-500"
-            >
-              🎁 Your Manifold Wrapped is here!
-            </Link>
-          </Row>
-        )}
       </Col>
     </Page>
   )

web/pages/home/index.tsx

@@ -21,6 +21,7 @@ import { useYourFollowedDashboards } from 'web/hooks/use-dashboard'
 import { buildArray } from 'common/util/array'
 import { uniqBy } from 'lodash'
 import { LinkPreviews, fetchLinkPreviews } from 'common/link-preview'
+import Link from 'next/link'
 
 export async function getStaticProps() {
   const dashboards = (await getNewsDashboards()) as Dashboard[]
@@ -75,7 +76,11 @@ function HomeDashboard(props: {
         description="Breaking news meets the wisdom of the crowd"
       />
       <Welcome />
-      <Page trackPageView={'home'} trackPageProps={{ kind: 'desktop' }}>
+      <Page
+        trackPageView={'home'}
+        trackPageProps={{ kind: 'desktop' }}
+        manifoldWrappedBannerEnabled
+      >
         <Row className="mx-3 mb-2 items-center gap-4">
           <div className="flex md:hidden">
             {user ? <ProfileSummary user={user} /> : <Spacer w={4} />}
@@ -86,7 +91,6 @@ function HomeDashboard(props: {
           )}
           <DailyStats user={user} />
         </Row>
-
         <NewsTopicsTabs
           dashboards={uniqBy(buildArray(myDashboards, dashboards), 'id')}
           previews={previews}