Add jank multi step form

Author: garyhtou

components/fiscal-sponsorship/apply/application-form.js

@@ -1,18 +1,21 @@
 import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
-import { Alert, Button, Heading } from 'theme-ui'
+import { Alert, Heading } from 'theme-ui'
 import FormContainer from './form-container'
 import OrganizationInfoForm from './org-form'
 import PersonalInfoForm from './personal-form'
 import { onSubmit } from './submit'
 import Callout from './callout'
 import TeenagerOrAdultForm from './teenager-or-adult-form'
+import { useMultiStepContext } from './multi-step-context'
+import MultiStepForm from './multi-step-form'
 
 export default function ApplicationForm() {
   const router = useRouter()
   const formContainer = useRef()
   const [formError, setFormError] = useState(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
+  const { step } = useMultiStepContext()
 
   const requiredFields = [
     'eventName',
@@ -45,35 +48,29 @@ export default function ApplicationForm() {
         })
       }
     >
-      <Callout />
-
-      <TeenagerOrAdultForm requiredFields={requiredFields} />
-
-      <Heading as="h2" variant="headline" sx={{ mb: -2 }}>
-        Your organization
-      </Heading>
-      <OrganizationInfoForm requiredFields={requiredFields} />
-      <Heading as="h2" variant="headline" sx={{ mb: -2 }}>
-        Personal details
-      </Heading>
-      <PersonalInfoForm requiredFields={requiredFields} />
-      {formError && <Alert bg="primary">{formError}</Alert>}
-      <Button
-        variant="ctaLg"
-        type="submit"
-        disabled={isSubmitting}
-        sx={{
-          backgroundImage: theme => theme.util.gx('cyan', 'blue'),
-          '&:disabled': {
-            background: 'muted',
-            cursor: 'not-allowed',
-            transform: 'none !important'
-          },
-          width: 'fit-content'
-        }}
-      >
-        {isSubmitting ? 'Submitting…' : 'Submit'}
-      </Button>
+      <MultiStepForm maxSteps={3} isSubmitting={isSubmitting}>
+        {step === 1 ? (
+          <>
+            <Callout />
+            <TeenagerOrAdultForm requiredFields={requiredFields} />
+          </>
+        ) : step === 2 ? (
+          <>
+            <Heading as="h2" variant="headline" sx={{ mb: -2 }}>
+              Your organization
+            </Heading>
+            <OrganizationInfoForm requiredFields={requiredFields} />
+          </>
+        ) : (
+          <>
+            <Heading as="h2" variant="headline" sx={{ mb: -2 }}>
+              Personal details
+            </Heading>
+            <PersonalInfoForm requiredFields={requiredFields} />
+            {formError && <Alert bg="primary">{formError}</Alert>}
+          </>
+        )}
+      </MultiStepForm>
     </FormContainer>
   )
 }

components/fiscal-sponsorship/apply/multi-step-context.js

@@ -0,0 +1,19 @@
+import { createContext, useContext, useState } from 'react'
+
+const MultiStepContext = createContext()
+const useMultiStepContext = () => useContext(MultiStepContext)
+
+const MultiStepProvider = ({ children }) => {
+  const [step, setStep] = useState(1)
+  const modifyStep = direction => {
+    setStep(step + direction) // either 1 or -1
+  }
+
+  return (
+    <MultiStepContext.Provider value={{ step, modifyStep }}>
+      {children}
+    </MultiStepContext.Provider>
+  )
+}
+
+export { MultiStepProvider, useMultiStepContext }

components/fiscal-sponsorship/apply/multi-step-form.js

@@ -0,0 +1,63 @@
+import { Box, Button } from 'theme-ui'
+import { useMultiStepContext } from './multi-step-context'
+
+export default function MultiStepForm({ isSubmitting, maxSteps, children }) {
+  const { step, modifyStep } = useMultiStepContext()
+  // TODO: it shows form validation errors whens switching to a new page
+
+  return (
+    <>
+      {children}
+
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '1rem',
+          marginTop: '2rem',
+          marginLeft: 'auto'
+        }}
+      >
+        {step > 1 && (
+          <Button
+            variant="outline"
+            onClick={() => {
+              modifyStep(-1)
+            }}
+          >
+            Back
+          </Button>
+        )}
+
+        {step < maxSteps && (
+          <Button
+            variant="primary"
+            onClick={() => {
+              modifyStep(1)
+            }}
+          >
+            Next
+          </Button>
+        )}
+
+        {step === maxSteps && (
+          <Button
+            variant="ctaLg"
+            type="submit"
+            disabled={isSubmitting}
+            sx={{
+              backgroundImage: theme => theme.util.gx('cyan', 'blue'),
+              '&:disabled': {
+                background: 'muted',
+                cursor: 'not-allowed',
+                transform: 'none !important'
+              },
+              width: 'fit-content'
+            }}
+          >
+            {isSubmitting ? 'Submitting…' : 'Submit'}
+          </Button>
+        )}
+      </Box>
+    </>
+  )
+}

pages/fiscal-sponsorship/apply/index.js

@@ -8,6 +8,7 @@ import HCBInfo from '../../../components/fiscal-sponsorship/apply/hcb-info'
 import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
 import ContactBanner from '../../../components/fiscal-sponsorship/contact'
 import ApplicationForm from '../../../components/fiscal-sponsorship/apply/application-form'
+import { MultiStepProvider } from '../../../components/fiscal-sponsorship/apply/multi-step-context'
 
 export default function Apply() {
   return (
@@ -84,7 +85,9 @@ export default function Apply() {
             sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }}
           />
         </Flex>
-        <ApplicationForm />
+        <MultiStepProvider>
+          <ApplicationForm />
+        </MultiStepProvider>
       </Grid>
       <Watermark />
     </>