Skip to content

Commit 3aba1f8

Browse files
kkarimikkarimi
committed
add other checkboxes
1 parent 02ea19a commit 3aba1f8

File tree

2 files changed

+167
-86
lines changed

2 files changed

+167
-86
lines changed

‎src/Components/forms/Acknowledgement.js

Lines changed: 151 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,162 @@
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+
console.log({ selectedModal })
42+
return (
43+
<div>
44+
<div className="modal fade" id={`id-form-acknowledgement`} role="dialog">
45+
<div className="modal-dialog">
46+
<div className="modal-content">
47+
<div className="modal-body">
48+
{selectedModal === 'modal-acknowledgement' && (
49+
<CommunityExpectations />
50+
)}
51+
<div className="modal-footer">
52+
<span className="close" data-dismiss="modal">
53+
close
54+
</span>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
</div>
61+
)
62+
}
63+
64+
const ExpectationCheckBox = ({ onChange, checkedExpectations, showModal }) => {
65+
console.log({ onChange, checkedExpectations })
66+
return (
67+
<Fragment>
68+
<input
69+
className={`form-check-input`}
70+
type="checkbox"
71+
name="checkedExpectations"
72+
onChange={onChange}
73+
checked={checkedExpectations}
74+
></input>
75+
<label className="form-check-label">
76+
<span
77+
id={'modal-acknowledgement'}
78+
className="form-acknowledgement-read-about"
79+
data-toggle="modal"
80+
data-target={`#id-form-acknowledgement`}
81+
onClick={showModal}
82+
>
83+
What to expect when volunteering at CYF
84+
</span>
85+
</label>
86+
</Fragment>
87+
)
88+
}
89+
90+
const TermsCheckBox = ({ onChange, termsOfUseAndPrivacy, showModal }) => {
91+
console.log({ onChange, termsOfUseAndPrivacy })
92+
return (
93+
<Fragment>
94+
<input
95+
className={`form-check-input`}
96+
type="checkbox"
97+
name="termsOfUseAndPrivacy"
98+
onChange={onChange}
99+
checked={termsOfUseAndPrivacy}
100+
></input>
101+
102+
<label className="form-check-label">
103+
<span
104+
id={'modal-terms'}
105+
className="form-acknowledgement-read-about"
106+
data-toggle="modal"
107+
data-target={`#id-form-acknowledgement`}
108+
onClick={showModal}
109+
>
110+
Terms Of Use
111+
</span>{' '}
112+
and{' '}
113+
<span
114+
id={'modal-privacypolicy'}
115+
className="form-acknowledgement-read-about"
116+
data-toggle="modal"
117+
data-target={`#id-form-acknowledgement`}
118+
onClick={showModal}
119+
>
120+
Privacy Policy
121+
</span>
122+
.{' '}
123+
</label>
124+
</Fragment>
125+
)
126+
}
127+
128+
export default ({
129+
onChange,
130+
checkedExpectations,
131+
termsOfUseAndPrivacy,
132+
showModal,
133+
selectedModal,
134+
acknowledgementErrors
135+
}) => {
136+
console.log({ onChange, checkedExpectations })
4137
return (
5138
<Fragment>
6139
<span className="form-acknowledgement-header">
7140
Acknowledgement: (* Required)
8141
</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"
142+
<br />
143+
<br />I have read:
144+
<div
145+
className={`form-check ml-4 pl-4 mt-2 ${acknowledgementErrors &&
146+
'is-empty'}`}
147+
>
148+
<ExpectationCheckBox
14149
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>
150+
checkedExpectations={checkedExpectations}
151+
showModal={showModal}
152+
/>
153+
<br />
154+
<TermsCheckBox
155+
showModal={showModal}
156+
onChange={onChange}
157+
termsOfUseAndPrivacy={termsOfUseAndPrivacy}
158+
/>
159+
<Modal selectedModal={selectedModal} />
86160
</div>
87161
</Fragment>
88162
)

‎src/Components/forms/index.js

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class Forms extends Component {
2929
const { errors } = this.state
3030
errors[name] = false
3131
if (e && e.target) {
32+
debugger
3233
this.setState({
3334
[name]: type === 'checkbox' ? checked : value,
3435
submitted: false,
@@ -149,7 +150,11 @@ class Forms extends Component {
149150
return ''
150151
}
151152
}
152-
153+
showModal = e => {
154+
if (e && e.target.id) {
155+
this.setState({ selectedModal: e.target.id })
156+
}
157+
}
153158
render() {
154159
const { err, volunteer } = this.props
155160
const {
@@ -189,16 +194,19 @@ 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"
@@ -222,7 +230,6 @@ export function mapStateToProps(store) {
222230
err: volunteer && volunteer.err
223231
}
224232
}
225-
export default connect(
226-
mapStateToProps,
227-
{ loadCities, createVolunteerHandler }
228-
)(Forms)
233+
export default connect(mapStateToProps, { loadCities, createVolunteerHandler })(
234+
Forms
235+
)

0 commit comments

Comments
 (0)