added a couple of updates and enhancements on waitlist flow (#70)

apps/wait-list/app/components/layout/header.tsx

@@ -1,8 +1,15 @@
 import {Link} from '@remix-run/react'
 import {APP_NAME} from '@/constants/index.ts'
 import {Button} from '@/components/button/index.tsx'
+import {useWaitListModal} from '@/providers/walt-list-popup/index.tsx'
+
+type Props = {
+  showWaitlist?: boolean
+}
+
+export const Header = ({showWaitlist = false}: Props) => {
+  const {handleShowWaitListForm} = useWaitListModal()
 
-export const Header = () => {
   return (
     <header className="absolute top-0 z-50 bg-white/10 w-full">
       <nav
@@ -19,12 +26,25 @@ export const Header = () => {
         </Link>
 
         <div className="flex justify-center items-center gap-x-12">
-          <Button href="/learn-more" variant="outline" isLink>
-            Learn more{' '}
-            <span className="pl-1" aria-hidden="true">
-              &rarr;
-            </span>
-          </Button>
+          {showWaitlist ? (
+            <Button
+              onClick={handleShowWaitListForm}
+              type="button"
+              variant="outline"
+            >
+              Join waitlist{' '}
+              <span className="pl-1" aria-hidden="true">
+                &rarr;
+              </span>
+            </Button>
+          ) : (
+            <Button href="/learn-more" variant="outline" isLink>
+              Learn more{' '}
+              <span className="pl-1" aria-hidden="true">
+                &rarr;
+              </span>
+            </Button>
+          )}
         </div>
       </nav>
     </header>

apps/wait-list/app/modules/landing-page/index.tsx

@@ -2,11 +2,10 @@ import {PhotoGrid} from '@/components/image-slider/index.jsx'
 import {BackgroundContainer} from '@/components/layout/container.tsx'
 import {Header} from '@/components/layout/header.tsx'
 import {MovingBorderButton} from '@/components/moving-border/index.tsx'
-import {useBoolean} from '@/hooks/use-boolean.ts'
-import WaitListForm from './modals/wait-list-form/index.tsx'
+import {useWaitListModal} from '@/providers/walt-list-popup/index.tsx'
 
 export const LandingPageModule = () => {
-  const {value: showWaitListForm, setValue, setFalse, setTrue} = useBoolean()
+  const {handleShowWaitListForm} = useWaitListModal()
 
   return (
     <BackgroundContainer>
@@ -23,7 +22,7 @@ export const LandingPageModule = () => {
           </p>
           <MovingBorderButton
             borderRadius="1.25rem"
-            onClick={setTrue}
+            onClick={handleShowWaitListForm}
             className="bg-white text-base font-medium text-black border-gray-200 border "
           >
             Join waitlist{' '}
@@ -34,11 +33,6 @@ export const LandingPageModule = () => {
         </div>
       </div>
       <PhotoGrid />
-      <WaitListForm
-        show={showWaitListForm}
-        setShow={setValue}
-        handleClose={setFalse}
-      />
     </BackgroundContainer>
   )
 }

apps/wait-list/app/modules/learn-more/index.tsx

@@ -6,6 +6,7 @@ import Fiifi from '@/images/fiifi.jpeg'
 import Ronnie from '@/images/ronnie.jpeg'
 import Audrey from '@/images/audrey.jpeg'
 import Nkay from '@/images/nkay.jpg'
+import Edward from '@/images/Edward.png'
 
 const faqs = [
   {
@@ -48,13 +49,12 @@ const people = [
     designation: 'Software Engineer',
     image: Fiifi,
   },
-  // {
-  //   id: 3,
-  //   name: 'Edward',
-  //   designation: 'Software Engineer',
-  //   image:
-  //     'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60',
-  // },
+  {
+    id: 3,
+    name: 'Edward',
+    designation: 'Software Engineer',
+    image: Edward,
+  },
   {
     id: 4,
     name: 'Ronnie',
@@ -87,7 +87,7 @@ export const LearnMoreModule = () => {
     <BackgroundContainer>
       <div className="flex flex-col justify-between items-center h-full">
         <div className="flex flex-col justify-center items-center ">
-          <Header />
+          <Header showWaitlist />
           <div className="mx-auto max-w-6xl px-6 py-20 sm:py-24 lg:px-8">
             <div className="mx-auto max-w-2xl text-center">
               <h2 className="text-2xl font-bold leading-10 tracking-tight text-black">

apps/wait-list/app/providers/index.tsx

@@ -1,6 +1,11 @@
 import {type PropsWithChildren} from 'react'
 import {ReactQueryProvider} from './react-query/index.tsx'
+import {WaitListModalProvider} from './walt-list-popup/index.tsx'
 
 export const Providers = ({children}: PropsWithChildren) => {
-  return <ReactQueryProvider>{children}</ReactQueryProvider>
+  return (
+    <ReactQueryProvider>
+      <WaitListModalProvider>{children}</WaitListModalProvider>
+    </ReactQueryProvider>
+  )
 }

apps/wait-list/app/providers/walt-list-popup/index.tsx

@@ -0,0 +1,38 @@
+import {useBoolean} from '@/hooks/use-boolean.ts'
+import WaitListForm from '@/modules/landing-page/modals/wait-list-form/index.tsx'
+import React, {useContext, type PropsWithChildren} from 'react'
+
+interface ModalContextType {
+  showWaitListForm: boolean
+  setShowWaitListForm: React.Dispatch<React.SetStateAction<boolean>>
+  handleShowWaitListForm: () => void
+  handleCloseWaitListForm: () => void
+}
+
+const WaitListModalContext = React.createContext<ModalContextType>(
+  {} as ModalContextType,
+)
+
+export const WaitListModalProvider = ({children}: PropsWithChildren) => {
+  const {value: showWaitListForm, setValue, setFalse, setTrue} = useBoolean()
+
+  return (
+    <WaitListModalContext.Provider
+      value={{
+        showWaitListForm,
+        setShowWaitListForm: setValue,
+        handleCloseWaitListForm: setFalse,
+        handleShowWaitListForm: setTrue,
+      }}
+    >
+      {children}
+      <WaitListForm
+        show={showWaitListForm}
+        setShow={setValue}
+        handleClose={setFalse}
+      />
+    </WaitListModalContext.Provider>
+  )
+}
+
+export const useWaitListModal = () => useContext(WaitListModalContext)