-
Notifications
You must be signed in to change notification settings - Fork 124
/
index.js
150 lines (146 loc) · 4.67 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import { useRouter } from 'next/router'
import { useRef, useState } from 'react'
import { Alert, Box, Button, Flex, Grid, Heading, Text } from 'theme-ui'
import Head from 'next/head'
import Link from 'next/link'
import Icon from '@hackclub/icons'
import Meta from '@hackclub/meta'
import ForceTheme from '../../../components/force-theme'
import FormContainer from '../../../components/fiscal-sponsorship/apply/form-container'
import HCBInfo from '../../../components/fiscal-sponsorship/apply/hcb-info'
import OrganizationInfoForm from '../../../components/fiscal-sponsorship/apply/org-form'
import PersonalInfoForm from '../../../components/fiscal-sponsorship/apply/personal-form'
import { onSubmit } from '../../../components/fiscal-sponsorship/apply/submit'
import Watermark from '../../../components/fiscal-sponsorship/apply/watermark'
import ContactBanner from '../../../components/fiscal-sponsorship/contact'
export default function Apply() {
const router = useRouter()
const formContainer = useRef()
const [formError, setFormError] = useState(null)
const [isSubmitting, setIsSubmitting] = useState(false)
const requiredFields = [
'eventName',
'eventLocation',
'eventDescription',
'firstName',
'lastName',
'userEmail',
'userBirthday',
'slackUsername'
]
return (
<>
<Meta as={Head} title="Apply for HCB" />
<ForceTheme theme="light" />
<Grid
columns={[null, null, 2]}
sx={{
gap: 0,
width: '100%',
minHeight: '100vh',
alignItems: 'start'
}}
>
<Flex
sx={{
flexDirection: 'column',
px: [3, 5],
py: 4,
gap: 4,
height: [null, '100svh'],
position: [null, null, 'sticky'],
top: 0,
overflowY: [null, null, 'auto']
}}
>
{/* vertically align h1 to top of form */}
<Box as="header" sx={{ mt: [null, 3], mb: 'auto' }}>
<Link href="/fiscal-sponsorship" passHref legacyBehavior>
<Text
as="a"
variant="subheadline"
sx={{
mb: 3,
gap: 2,
display: 'flex',
alignItems: 'center',
color: 'muted',
textDecoration: 'none',
':hover': { color: 'primary' }
}}
>
<Icon
size={24}
glyph="inserter"
style={{ transform: 'rotate(180deg)' }}
/>
Back
</Text>
</Link>
<Heading as="h1" variant="title">
Apply to join
<br />
<Flex sx={{ alignItems: 'center', gap: 3 }}>
<img
src="/fiscal-sponsorship/hcb-icon-small.png"
width={48}
height={48}
alt="HCB logo"
style={{
width: '1em',
height: '1em',
verticalAlign: 'baseline'
}}
/>{' '}
HCB
</Flex>
</Heading>
</Box>
<HCBInfo />
<ContactBanner sx={{ borderRadius: 'default', bg: 'snow', width: 'fit-content' }} />
</Flex>
<FormContainer
ref={formContainer}
className={formError ? 'has-errors' : null}
onSubmit={event =>
onSubmit({
event,
router,
form: formContainer,
setFormError,
setIsSubmitting,
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>
</FormContainer>
</Grid>
<Watermark />
</>
)
}