Merge pull request #1403 from hackclub/garyhtou/hcb-apply-form

[HCB] Polish up application form

components/fiscal-sponsorship/apply/org-adult-form.js

@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react'
 import { Input, Select, Textarea } from 'theme-ui'
 import Field from './field'
 import useOrganizationI18n from '../organizationI18n'
+import { useTeenagerLedContext } from './teenager-led-context'
 
 export default function OrganizationAdultForm({ requiredFields }) {
   const org = useOrganizationI18n()
-  const [teenagerLed, setTeenagerLed] = useState('false')
+  const { teenagerLed, setTeenagerLed } = useTeenagerLedContext()
 
   const onTeenagerLedChange = e => {
     const newValue = e.target.value
@@ -56,7 +57,7 @@ export default function OrganizationAdultForm({ requiredFields }) {
         <>
           <Field
             name="eventPoliticalActivity"
-            label={`Please describe any political activity your ${org.toLowerCase()} is involved in`}
+            label={`Please describe any political activity your ${org.toLowerCase()} is involved in, if any`}
             description="This includes but is not limited to protests, public demonstrations, political education, and lobbying."
             requiredFields={requiredFields}
           >

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

@@ -1,9 +1,11 @@
 import { Input, Flex, Label, Radio, Grid, Select } from 'theme-ui'
 import Field from './field'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useTeenagerLedContext } from './teenager-led-context'
 
 export default function PersonalInfoForm({ requiredFields }) {
   const [selectedContactOption, setSelectedContactOption] = useState('Email')
+  const { teenagerLed } = useTeenagerLedContext()
 
   return (
     <>
@@ -32,76 +34,82 @@ export default function PersonalInfoForm({ requiredFields }) {
         />
       </Field>
 
-      <Field
-        name="contactOption"
-        label="Preferred contact channel"
-        requiredFields={requiredFields}
-      >
-        <Grid
-          columns={[null, 2]}
-          sx={{
-            rowGap: 2,
-            columnGap: 4,
-            width: '100%'
-          }}
+      {teenagerLed === 'true' ? (
+        <Field
+          name="contactOption"
+          label="Preferred contact channel"
+          requiredFields={requiredFields}
         >
-          <Label
-            sx={{
-              display: 'flex',
-              flexDirection: 'row'
-            }}
-          >
-            <Radio
-              name="contactOption"
-              value="Email"
-              defaultChecked={true}
-              onInput={() => setSelectedContactOption('Email')}
-            />
-            Email
-          </Label>
           <Grid
+            columns={[null, 2]}
             sx={{
-              columnGap: 0,
               rowGap: 2,
-              gridTemplateColumns: 'auto 1fr'
+              columnGap: 4,
+              width: '100%'
             }}
           >
             <Label
               sx={{
-                display: 'contents',
-                '~ div > label': { fontSize: 1 }
+                display: 'flex',
+                flexDirection: 'row'
               }}
             >
               <Radio
                 name="contactOption"
-                value="Slack"
-                onInput={() => setSelectedContactOption('Slack')}
+                value="Email"
+                defaultChecked={true}
+                onInput={() => setSelectedContactOption('Email')}
               />
-              Hack Club Slack
+              Email
             </Label>
-            {selectedContactOption === 'Slack' ? (
-              <>
-                <div />
-                <Field
-                  label="Your Hack Club Slack username"
-                  description="For teenagers only!"
-                  name="slackUsername"
-                  requiredFields={requiredFields}
-                >
-                  <Input
+            <Grid
+              sx={{
+                columnGap: 0,
+                rowGap: 2,
+                gridTemplateColumns: 'auto 1fr'
+              }}
+            >
+              <Label
+                sx={{
+                  display: 'contents',
+                  '~ div > label': { fontSize: 1 }
+                }}
+              >
+                <Radio
+                  name="contactOption"
+                  value="Slack"
+                  onInput={() => setSelectedContactOption('Slack')}
+                />
+                Hack Club Slack
+              </Label>
+              {selectedContactOption === 'Slack' ? (
+                <>
+                  <div />
+                  <Field
+                    label="Your Hack Club Slack username"
+                    description="For teenagers only!"
                     name="slackUsername"
-                    id="slackUsername"
-                    placeholder="FionaH"
-                    autocomplete="off"
-                    data-1p-ignore
-                    autoFocus
-                  />
-                </Field>
-              </>
-            ) : null}
+                    requiredFields={requiredFields}
+                  >
+                    <Input
+                      name="slackUsername"
+                      id="slackUsername"
+                      placeholder="FionaH"
+                      autocomplete="off"
+                      data-1p-ignore
+                      autoFocus
+                    />
+                  </Field>
+                </>
+              ) : null}
+            </Grid>
           </Grid>
-        </Grid>
-      </Field>
+        </Field>
+      ) : (
+        // When not teenage-led, default to "email" as preferred contact channel
+        <input name="contactOption" type="hidden" value="Email" />
+      )}
+
       <Field
         name="userPhone"
         label="Phone"

components/fiscal-sponsorship/apply/teenager-led-context.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, useState } from 'react'
+
+const TeenagerLedContext = createContext()
+const useTeenagerLedContext = () => useContext(TeenagerLedContext)
+
+const TeenagerLedProvider = ({ children }) => {
+  const [teenagerLed, setTeenagerLed] = useState('false')
+
+  return (
+    <TeenagerLedContext.Provider value={{ teenagerLed, setTeenagerLed }}>
+      {children}
+    </TeenagerLedContext.Provider>
+  )
+}
+
+export { TeenagerLedProvider, useTeenagerLedContext }

pages/fiscal-sponsorship/apply/index.js

@@ -14,6 +14,7 @@ import { onSubmit } from '../../../components/fiscal-sponsorship/apply/submit'
 import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
 import ContactBanner from '../../../components/fiscal-sponsorship/contact'
 import Callout from '../../../components/fiscal-sponsorship/apply/callout'
+import { TeenagerLedProvider } from '../../../components/fiscal-sponsorship/apply/teenager-led-context'
 
 export default function Apply() {
   const router = useRouter()
@@ -32,6 +33,7 @@ export default function Apply() {
     'firstName',
     'lastName',
     'userEmail',
+    'userPhone',
     'userBirthday',
     'slackUsername'
   ]
@@ -124,33 +126,35 @@ export default function Apply() {
             })
           }
         >
-          <Callout />
+          <TeenagerLedProvider>
+            <Callout />
 
-          <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>
+            <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>
+          </TeenagerLedProvider>
         </FormContainer>
       </Grid>
       <Watermark />