diff --git a/components/fiscal-sponsorship/apply/application-form.js b/components/fiscal-sponsorship/apply/application-form.js index 56b93634..8f269557 100644 --- a/components/fiscal-sponsorship/apply/application-form.js +++ b/components/fiscal-sponsorship/apply/application-form.js @@ -1,11 +1,10 @@ import { useRouter } from 'next/router' import { useRef, useState } from 'react' -import { Alert, Heading, Button } from 'theme-ui' +import { Alert, Button, Text } 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 MultiStepForm from './multi-step-form' @@ -18,18 +17,27 @@ export default function ApplicationForm() { const requiredFields = { // Key: form field name // Value: humanize field name used in error message - eventName: 'organization name', - eventLocation: 'organization country', - eventPostalCode: 'organization zip/postal code', - eventDescription: 'organization description', eventTeenagerLed: 'are you a teenager?', - eventPoliticalActivity: "organization's political activity", - eventAnnualBudget: 'organization annual budget', + eventName: 'project name', + eventPostalCode: 'project zip/postal code', + eventDescription: 'project description', + eventIsPolitical: "project's political activity", + eventPoliticalActivity: "project's political activity", + eventHasWebsite: 'project website', + eventWebsite: 'project website', + eventAnnualBudget: 'project annual budget', firstName: 'first name', lastName: 'last name', userEmail: 'email', userPhone: 'phone number', - userBirthday: 'birthday' + userBirthday: 'birthday', + userAddressLine1: 'address line 1', + userAddressCity: 'city', + userAddressProvince: 'state/province', + userAddressPostalCode: 'ZIP/postal code', + userAddressCountry: 'country', + + referredBy: 'how did you hear about HCB?' } const submitButton = ( @@ -66,14 +74,27 @@ export default function ApplicationForm() { }) } > - + + {formError} + + ) + } + > {/* Step 1 */} - + + Fill out this quick application to run your project on HCB. If you + are a teenager, there is a very high likelihood we will accept your + project. We just need to collect a few pieces of information first. + {/* Step 2 */} - + {/* Step 3 */} @@ -81,7 +102,6 @@ export default function ApplicationForm() { - {formError && {formError}} ) } diff --git a/components/fiscal-sponsorship/apply/callout.js b/components/fiscal-sponsorship/apply/callout.js deleted file mode 100644 index 39f691c1..00000000 --- a/components/fiscal-sponsorship/apply/callout.js +++ /dev/null @@ -1,30 +0,0 @@ -import { Box, Text } from 'theme-ui' - -export default function Callout() { - return ( - - - HCB is a fiscal sponsor primarily for teenage-led organizations - - - Although we would love to be able to support organizations across all - ages and missions, we are currently prioritizing applications from - teenagers. - - - We are accepting adult-led organizations on a case-by-case basis. - - - ) -} diff --git a/components/fiscal-sponsorship/apply/field.js b/components/fiscal-sponsorship/apply/field.js index d71a2f04..646b38a5 100644 --- a/components/fiscal-sponsorship/apply/field.js +++ b/components/fiscal-sponsorship/apply/field.js @@ -18,10 +18,17 @@ export default function Field({ useEffect(() => { const value = router.query[name] || sessionStorage.getItem('bank-signup-' + name) - if (value) { - const input = document.getElementById(name) - if (input) input.value = value + if (!value) return + + let input = document.getElementById(name) + if (input) { + input.value = value + return } + + // Maybe it's radio buttons + input = document.querySelector(`input[name='${name}']`) + if (input) input.checked = true }, [router.query, name]) return ( diff --git a/components/fiscal-sponsorship/apply/form-container.js b/components/fiscal-sponsorship/apply/form-container.js index b63268b9..d0f7636d 100644 --- a/components/fiscal-sponsorship/apply/form-container.js +++ b/components/fiscal-sponsorship/apply/form-container.js @@ -12,10 +12,14 @@ const formContainer = forwardRef(({ children, ...props }, ref) => { bg: 'snow', px: [3, 5], py: [1, 5], - minHeight: '100dvb', + pb: 5, + minHeight: [null, null, '100dvb'], '&.has-errors div[aria-required="true"] input:placeholder-shown': { borderColor: 'primary' }, + '&.has-errors div[aria-required="true"] input[type="date"]': { + borderColor: 'primary' + }, '&.has-errors div[aria-required="true"] textarea:placeholder-shown': { borderColor: 'primary' } @@ -26,10 +30,6 @@ const formContainer = forwardRef(({ children, ...props }, ref) => { variant="copy" sx={{ ml: 0, - display: 'flex', - flexDirection: 'column', - columnGap: 4, - rowGap: 3, px: 0 }} > diff --git a/components/fiscal-sponsorship/apply/hcb-info.js b/components/fiscal-sponsorship/apply/hcb-info.js index 21c312f4..9a923698 100644 --- a/components/fiscal-sponsorship/apply/hcb-info.js +++ b/components/fiscal-sponsorship/apply/hcb-info.js @@ -1,4 +1,4 @@ -import { Box, Link, Heading } from 'theme-ui' +import { Box, Link, Heading, Grid } from 'theme-ui' import Icon from '../../icon' import { useMultiStepContext } from './multi-step-context' import { useEffect } from 'react' @@ -19,7 +19,7 @@ export default function HCBInfo() { }} > - HCB is a{' '} + HCB is not a bank, we're a{' '} + {/* + Gives your project nonprofit status. + */} + - - HCB provides a financial platform. - - +

+ HCB partners with{' '} + + Column N.A. + {' '} + to provide restricted funds to fiscally-sponsored projects. +

) } diff --git a/components/fiscal-sponsorship/apply/multi-step-form.js b/components/fiscal-sponsorship/apply/multi-step-form.js index 5b084a82..a7e29a2f 100644 --- a/components/fiscal-sponsorship/apply/multi-step-form.js +++ b/components/fiscal-sponsorship/apply/multi-step-form.js @@ -2,7 +2,11 @@ import { Box, Button, Heading } from 'theme-ui' import { useMultiStepContext } from './multi-step-context' import { Children } from 'react' -export default function MultiStepForm({ children, submitButton }) { +export default function MultiStepForm({ + children, + submitButton, + validationErrors +}) { const { step, useStepper } = useMultiStepContext() const steps = Children.toArray(children) const { nextStep, previousStep } = useStepper(steps) @@ -14,17 +18,27 @@ export default function MultiStepForm({ children, submitButton }) { with the form. So, we simple hide all non-current steps. */} {steps.map((stepComponent, index) => ( - + {stepComponent} ))} + {validationErrors} + {step > 0 && ( diff --git a/components/fiscal-sponsorship/apply/org-adult-form.js b/components/fiscal-sponsorship/apply/org-adult-form.js index 737382d1..90c15023 100644 --- a/components/fiscal-sponsorship/apply/org-adult-form.js +++ b/components/fiscal-sponsorship/apply/org-adult-form.js @@ -11,23 +11,6 @@ export default function OrganizationAdultForm({ requiredFields }) { <> {teenagerLed !== 'true' && ( <> - -