Skip to content

Commit 894afbe

Browse files
WolfjawanWolfjawan
committed
Merge branch 'staging' of github.com:CodeYourFuture/cyf-forms into staging
2 parents 040aa24 + 39e3710 commit 894afbe

File tree

2 files changed

+167
-88
lines changed

2 files changed

+167
-88
lines changed

‎src/Components/forms/Acknowledgement.js

Lines changed: 147 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,158 @@
11
import React, { Fragment } from 'react'
22

3-
export default ({ onChange, checked, isEmpty }) => {
3+
const CommunityExpectations = () => (
4+
<Fragment>
5+
<h1>JOIN OUR COMMUNITY</h1>
6+
<p>
7+
Welcome to a fun, inclusive community where your knowledge and expertise
8+
can transform the lives of refugees, asylum seekers and local
9+
disadvantaged people. A young nonprofit is a lot like a start-up: growing
10+
quickly and always looking for versatile, dependable people. You can join
11+
us in one of 6 CYF cities worldwide or set up a new CYF chapter to support
12+
your local communities.{' '}
13+
</p>
14+
<ul>
15+
We are looking for volunteers in the following areas:
16+
<li>
17+
<strong>Volunteers</strong> from virtually any background to help us run
18+
and grow our organization (to help with events, marketing, admin, etc.)
19+
</li>
20+
<li>
21+
Professionals from the tech industry to join our
22+
<strong>mentorship programme</strong> and give a student guidance and
23+
support
24+
</li>
25+
<li>
26+
<strong>Experienced web developers</strong> (HTML/CSS, JavaScript, Node,
27+
React, Databases) to help teach our classes
28+
</li>
29+
</ul>
30+
<p>
31+
Previous volunteers at Code Your Future have developed their skills,
32+
learnt valuable new ones, and made wonderful friends along the way. Roles
33+
can last a few weeks, a month, or longer - depending on how much time you
34+
can commit. Apply using the volunteer form linked below and we'll be in
35+
touch.
36+
</p>
37+
</Fragment>
38+
)
39+
40+
const Modal = ({ selectedModal }) => {
41+
return (
42+
<div>
43+
<div className="modal fade" id={`id-form-acknowledgement`} role="dialog">
44+
<div className="modal-dialog">
45+
<div className="modal-content">
46+
<div className="modal-body">
47+
{selectedModal === 'modal-acknowledgement' && (
48+
<CommunityExpectations />
49+
)}
50+
<div className="modal-footer">
51+
<span className="close" data-dismiss="modal">
52+
close
53+
</span>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
)
61+
}
62+
63+
const ExpectationCheckBox = ({ onChange, checkedExpectations, showModal }) => {
64+
return (
65+
<Fragment>
66+
<input
67+
className={`form-check-input`}
68+
type="checkbox"
69+
name="checkedExpectations"
70+
onChange={onChange}
71+
checked={checkedExpectations}
72+
></input>
73+
<label className="form-check-label">
74+
<span
75+
id={'modal-acknowledgement'}
76+
className="form-acknowledgement-read-about"
77+
data-toggle="modal"
78+
data-target={`#id-form-acknowledgement`}
79+
onClick={showModal}
80+
>
81+
What to expect when volunteering at CYF
82+
</span>
83+
</label>
84+
</Fragment>
85+
)
86+
}
87+
88+
const TermsCheckBox = ({ onChange, termsOfUseAndPrivacy, showModal }) => {
89+
return (
90+
<Fragment>
91+
<input
92+
className={`form-check-input`}
93+
type="checkbox"
94+
name="termsOfUseAndPrivacy"
95+
onChange={onChange}
96+
checked={termsOfUseAndPrivacy}
97+
></input>
98+
99+
<label className="form-check-label">
100+
<span
101+
id={'modal-terms'}
102+
className="form-acknowledgement-read-about"
103+
data-toggle="modal"
104+
data-target={`#id-form-acknowledgement`}
105+
onClick={showModal}
106+
>
107+
Terms Of Use
108+
</span>{' '}
109+
and{' '}
110+
<span
111+
id={'modal-privacypolicy'}
112+
className="form-acknowledgement-read-about"
113+
data-toggle="modal"
114+
data-target={`#id-form-acknowledgement`}
115+
onClick={showModal}
116+
>
117+
Privacy Policy
118+
</span>
119+
.{' '}
120+
</label>
121+
</Fragment>
122+
)
123+
}
124+
125+
export default ({
126+
onChange,
127+
checkedExpectations,
128+
termsOfUseAndPrivacy,
129+
showModal,
130+
selectedModal,
131+
acknowledgementErrors
132+
}) => {
4133
return (
5134
<Fragment>
6135
<span className="form-acknowledgement-header">
7136
Acknowledgement: (* Required)
8137
</span>
9-
<div className={`form-check ml-4 pl-4 mt-2 ${isEmpty && 'is-empty'}`}>
10-
<input
11-
className={`form-check-input`}
12-
type="checkbox"
13-
name="acknowledgement"
138+
<br />
139+
<br />I have read:
140+
<div
141+
className={`form-check ml-4 pl-4 mt-2 ${acknowledgementErrors &&
142+
'is-empty'}`}
143+
>
144+
<ExpectationCheckBox
14145
onChange={onChange}
15-
checked={checked}
16-
></input>
17-
<label className="form-check-label">
18-
I have{' '}
19-
<span
20-
className="form-acknowledgement-read-about"
21-
data-toggle="modal"
22-
data-target={`#id-form-acknowledgement`}
23-
>
24-
read about
25-
</span>{' '}
26-
what to expect when volunteering at CYF
27-
</label>
28-
29-
<div>
30-
<div
31-
className="modal fade"
32-
id={`id-form-acknowledgement`}
33-
role="dialog"
34-
>
35-
<div className="modal-dialog">
36-
<div className="modal-content">
37-
<div className="modal-body">
38-
<div>
39-
<h1>JOIN OUR COMMUNITY</h1>
40-
<p>
41-
Welcome to a fun, inclusive community where your knowledge
42-
and expertise can transform the lives of refugees, asylum
43-
seekers and local disadvantaged people. A young nonprofit
44-
is a lot like a start-up: growing quickly and always
45-
looking for versatile, dependable people. You can join us
46-
in one of 6 CYF cities worldwide or set up a new CYF
47-
chapter to support your local communities.{' '}
48-
</p>
49-
<ul>
50-
We are looking for volunteers in the following areas:
51-
<li>
52-
<strong>Volunteers</strong> from virtually any
53-
background to help us run and grow our organization (to
54-
help with events, marketing, admin, etc.)
55-
</li>
56-
<li>
57-
Professionals from the tech industry to join our
58-
<strong>mentorship programme</strong> and give a student
59-
guidance and support
60-
</li>
61-
<li>
62-
<strong>Experienced web developers</strong> (HTML/CSS,
63-
JavaScript, Node, React, Databases) to help teach our
64-
classes
65-
</li>
66-
</ul>
67-
<p>
68-
Previous volunteers at Code Your Future have developed
69-
their skills, learnt valuable new ones, and made wonderful
70-
friends along the way. Roles can last a few weeks, a
71-
month, or longer - depending on how much time you can
72-
commit. Apply using the volunteer form linked below and
73-
we'll be in touch.
74-
</p>
75-
</div>
76-
</div>
77-
<div className="modal-footer">
78-
<span className="close" data-dismiss="modal">
79-
close
80-
</span>
81-
</div>
82-
</div>
83-
</div>
84-
</div>
85-
</div>
146+
checkedExpectations={checkedExpectations}
147+
showModal={showModal}
148+
/>
149+
<br />
150+
<TermsCheckBox
151+
showModal={showModal}
152+
onChange={onChange}
153+
termsOfUseAndPrivacy={termsOfUseAndPrivacy}
154+
/>
155+
<Modal selectedModal={selectedModal} />
86156
</div>
87157
</Fragment>
88158
)

‎src/Components/forms/index.js

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -149,12 +149,17 @@ class Forms extends Component {
149149
return ''
150150
}
151151
}
152-
152+
showModal = e => {
153+
if (e && e.target.id) {
154+
this.setState({ selectedModal: e.target.id })
155+
}
156+
}
153157
render() {
154158
const { err, volunteer } = this.props
155159
const {
156160
disabled,
157-
acknowledgement,
161+
checkedExpectations,
162+
termsOfUseAndPrivacy,
158163
formInComplete,
159164
userId,
160165
dashboardUrl
@@ -189,21 +194,26 @@ class Forms extends Component {
189194
<Header err={err} formInComplete={formInComplete} userId={userId} />
190195
<form className="mb-4" onSubmit={this.handleSubmit} method="post">
191196
<Inputs
192-
{...this.props}
193-
{...this.state}
194197
onChange={this.onChange}
195198
telOnChange={this.telOnChange}
196199
onChangeCheckList={this.onChangeCheckList}
200+
{...this.props}
201+
{...this.state}
197202
/>
198203
<Acknowledgement
199204
onChange={this.onChange}
200-
checked={this.state.acknowledgement}
201-
isEmpty={this.state.errors.acknowledgement}
205+
showModal={this.showModal}
206+
selectedModal={this.state.selectedModal}
207+
termsOfUseAndPrivacy={this.state.termsOfUseAndPrivacy}
208+
checkedExpectations={this.state.checkedExpectations}
209+
acknowledgementErrors={this.state.errors.acknowledgement}
202210
/>
203211
<button
204212
className="btn volunteer-submit-btn"
205213
type="submit"
206-
disabled={disabled || !acknowledgement}
214+
disabled={
215+
disabled || !checkedExpectations || !termsOfUseAndPrivacy
216+
}
207217
>
208218
Submit
209219
</button>
@@ -222,7 +232,6 @@ export function mapStateToProps(store) {
222232
err: volunteer && volunteer.err
223233
}
224234
}
225-
export default connect(
226-
mapStateToProps,
227-
{ loadCities, createVolunteerHandler }
228-
)(Forms)
235+
export default connect(mapStateToProps, { loadCities, createVolunteerHandler })(
236+
Forms
237+
)

0 commit comments

Comments
 (0)