Skip to content

Commit afa8fad

Browse files
garyhtougaryhtou
committed
From question and copy edits with Mel
1 parent 4c79cf9 commit afa8fad

15 files changed

+357
-217
lines changed

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

+33-13
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { useRouter } from 'next/router'
22
import { useRef, useState } from 'react'
3-
import { Alert, Heading, Button } from 'theme-ui'
3+
import { Alert, Button, Text } from 'theme-ui'
44
import FormContainer from './form-container'
55
import OrganizationInfoForm from './org-form'
66
import PersonalInfoForm from './personal-form'
77
import { onSubmit } from './submit'
8-
import Callout from './callout'
98
import TeenagerOrAdultForm from './teenager-or-adult-form'
109
import MultiStepForm from './multi-step-form'
1110

@@ -18,18 +17,27 @@ export default function ApplicationForm() {
1817
const requiredFields = {
1918
// Key: form field name
2019
// Value: humanize field name used in error message
21-
eventName: 'organization name',
22-
eventLocation: 'organization country',
23-
eventPostalCode: 'organization zip/postal code',
24-
eventDescription: 'organization description',
2520
eventTeenagerLed: 'are you a teenager?',
26-
eventPoliticalActivity: "organization's political activity",
27-
eventAnnualBudget: 'organization annual budget',
21+
eventName: 'project name',
22+
eventPostalCode: 'project zip/postal code',
23+
eventDescription: 'project description',
24+
eventIsPolitical: "project's political activity",
25+
eventPoliticalActivity: "project's political activity",
26+
eventHasWebsite: 'project website',
27+
eventWebsite: 'project website',
28+
eventAnnualBudget: 'project annual budget',
2829
firstName: 'first name',
2930
lastName: 'last name',
3031
userEmail: 'email',
3132
userPhone: 'phone number',
32-
userBirthday: 'birthday'
33+
userBirthday: 'birthday',
34+
userAddressLine1: 'address line 1',
35+
userAddressCity: 'city',
36+
userAddressProvince: 'state/province',
37+
userAddressPostalCode: 'ZIP/postal code',
38+
userAddressCountry: 'country',
39+
40+
referredBy: 'how did you hear about HCB?'
3341
}
3442

3543
const submitButton = (
@@ -66,22 +74,34 @@ export default function ApplicationForm() {
6674
})
6775
}
6876
>
69-
<MultiStepForm submitButton={submitButton}>
77+
<MultiStepForm
78+
submitButton={submitButton}
79+
validationErrors={
80+
formError && (
81+
<Alert bg="primary" sx={{ mt: 4 }}>
82+
{formError}
83+
</Alert>
84+
)
85+
}
86+
>
7087
{/* Step 1 */}
7188
<MultiStepForm.Step title="Let's get started">
72-
<Callout />
89+
<Text as="p" variant="caption" sx={{ marginBottom: '2rem' }}>
90+
Fill out this quick application to run your project on HCB. If you
91+
are a teenager, there is a very high likelihood we will accept your
92+
project. We just need to collect a few pieces of information first.
93+
</Text>
7394
<TeenagerOrAdultForm requiredFields={requiredFields} />
7495
</MultiStepForm.Step>
7596
{/* Step 2 */}
76-
<MultiStepForm.Step title="Your organization">
97+
<MultiStepForm.Step>
7798
<OrganizationInfoForm requiredFields={requiredFields} />
7899
</MultiStepForm.Step>
79100
{/* Step 3 */}
80101
<MultiStepForm.Step title="Personal details">
81102
<PersonalInfoForm requiredFields={requiredFields} />
82103
</MultiStepForm.Step>
83104
</MultiStepForm>
84-
{formError && <Alert bg="primary">{formError}</Alert>}
85105
</FormContainer>
86106
)
87107
}

‎components/fiscal-sponsorship/apply/callout.js

-30
This file was deleted.

‎components/fiscal-sponsorship/apply/field.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,17 @@ export default function Field({
1818
useEffect(() => {
1919
const value =
2020
router.query[name] || sessionStorage.getItem('bank-signup-' + name)
21-
if (value) {
22-
const input = document.getElementById(name)
23-
if (input) input.value = value
21+
if (!value) return
22+
23+
let input = document.getElementById(name)
24+
if (input) {
25+
input.value = value
26+
return
2427
}
28+
29+
// Maybe it's radio buttons
30+
input = document.querySelector(`input[name='${name}']`)
31+
if (input) input.checked = true
2532
}, [router.query, name])
2633

2734
return (

‎components/fiscal-sponsorship/apply/form-container.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,14 @@ const formContainer = forwardRef(({ children, ...props }, ref) => {
1212
bg: 'snow',
1313
px: [3, 5],
1414
py: [1, 5],
15-
minHeight: '100dvb',
15+
pb: 5,
16+
minHeight: [null, null, '100dvb'],
1617
'&.has-errors div[aria-required="true"] input:placeholder-shown': {
1718
borderColor: 'primary'
1819
},
20+
'&.has-errors div[aria-required="true"] input[type="date"]': {
21+
borderColor: 'primary'
22+
},
1923
'&.has-errors div[aria-required="true"] textarea:placeholder-shown': {
2024
borderColor: 'primary'
2125
}
@@ -26,10 +30,6 @@ const formContainer = forwardRef(({ children, ...props }, ref) => {
2630
variant="copy"
2731
sx={{
2832
ml: 0,
29-
display: 'flex',
30-
flexDirection: 'column',
31-
columnGap: 4,
32-
rowGap: 3,
3333
px: 0
3434
}}
3535
>

‎components/fiscal-sponsorship/apply/hcb-info.js

+17-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Link, Heading } from 'theme-ui'
1+
import { Box, Link, Heading, Grid } from 'theme-ui'
22
import Icon from '../../icon'
33
import { useMultiStepContext } from './multi-step-context'
44
import { useEffect } from 'react'
@@ -19,7 +19,7 @@ export default function HCBInfo() {
1919
}}
2020
>
2121
<Heading variant="subheadline">
22-
HCB is a{' '}
22+
HCB is not a bank, we're a{' '}
2323
<Link
2424
href="https://en.wikipedia.org/wiki/Fiscal_sponsorship"
2525
target="_blank"
@@ -33,26 +33,23 @@ export default function HCBInfo() {
3333
<Icon glyph="external" size={24} aria-hidden />
3434
</Link>
3535
</Heading>
36+
{/* <Grid columns={2} bg="white" sx={{ color: 'muted', border: 'slate 1px' }}>
37+
<Box>Gives your project nonprofit status.</Box>
38+
</Grid> */}
39+
3640
<ul>
37-
<li>Gives your project nonprofit status.</li>
38-
<li>Enables tax-deductible donations.</li>
39-
<li>
40-
HCB is not a bank. We partner partner with{' '}
41-
<Link href="https://column.com" target="_blank">
42-
Column N.A.
43-
</Link>{' '}
44-
to offer restricted funds to fiscally-sponsored projects.
45-
</li>
46-
</ul>
47-
<Heading variant="subheadline">
48-
HCB provides a financial platform.
49-
</Heading>
50-
<ul>
51-
<li>Accessed via a beautiful, modern interface.</li>
52-
<li>Provides a donation page and invoicing system.</li>
53-
<li>Transfer money electronically.</li>
54-
<li>Order cards for you and your team to make purchases.</li>
41+
<li>HCB gives your project nonprofit status.</li>
42+
<li>Allows you to raise tax-deductible donations.</li>
43+
<li>Provides a financial platform.</li>
44+
<li>Allows you to order cards to make purchases.</li>
5545
</ul>
46+
<p>
47+
HCB partners with{' '}
48+
<Link href="https://column.com" target="_blank">
49+
Column N.A.
50+
</Link>{' '}
51+
to provide restricted funds to fiscally-sponsored projects.
52+
</p>
5653
</Box>
5754
)
5855
}

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

+17-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { Box, Button, Heading } from 'theme-ui'
22
import { useMultiStepContext } from './multi-step-context'
33
import { Children } from 'react'
44

5-
export default function MultiStepForm({ children, submitButton }) {
5+
export default function MultiStepForm({
6+
children,
7+
submitButton,
8+
validationErrors
9+
}) {
610
const { step, useStepper } = useMultiStepContext()
711
const steps = Children.toArray(children)
812
const { nextStep, previousStep } = useStepper(steps)
@@ -14,17 +18,27 @@ export default function MultiStepForm({ children, submitButton }) {
1418
with the form. So, we simple hide all non-current steps.
1519
*/}
1620
{steps.map((stepComponent, index) => (
17-
<Box key={index} sx={step !== index ? { display: 'none' } : {}}>
21+
<Box
22+
key={index}
23+
sx={{
24+
display: 'flex',
25+
flexDirection: 'column',
26+
rowGap: 3,
27+
...(step !== index ? { display: 'none' } : {})
28+
}}
29+
>
1830
{stepComponent}
1931
</Box>
2032
))}
2133

34+
{validationErrors}
35+
2236
<Box
2337
sx={{
2438
display: 'flex',
2539
gap: '1rem',
2640
marginTop: '2rem',
27-
marginLeft: 'auto'
41+
justifyContent: 'flex-end'
2842
}}
2943
>
3044
{step > 0 && (

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

-17
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,6 @@ export default function OrganizationAdultForm({ requiredFields }) {
1111
<>
1212
{teenagerLed !== 'true' && (
1313
<>
14-
<Field
15-
name="eventPoliticalActivity"
16-
label={`Please describe any political activity your ${org.toLowerCase()} is involved in, if any`}
17-
description="This includes but is not limited to protests, public demonstrations, political education, and lobbying."
18-
requiredFields={requiredFields}
19-
>
20-
<Textarea
21-
name="eventPoliticalActivity"
22-
id="eventPoliticalActivity"
23-
placeholder="We are involved in..."
24-
rows={3}
25-
sx={{
26-
resize: 'vertical'
27-
}}
28-
/>
29-
</Field>
30-
3114
<Field
3215
name="eventAnnualBudget"
3316
label="What is your estimated annual budget (USD) for this year?"

0 commit comments

Comments
 (0)