Skip to content

Commit b7dc00d

Browse files
Wolfjawankkarimi
Wolfjawan
authored and
kkarimi
committed
Feature/term of use privacy policy (#62)
* update re-directed message * add term of use and privacy-policy to form
1 parent 39e3710 commit b7dc00d

File tree

5 files changed

+137
-199
lines changed

5 files changed

+137
-199
lines changed

‎src/Components/forms/Acknowledgement.js

Lines changed: 71 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,86 @@
11
import React, { Fragment } from 'react'
2-
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-
}
2+
import { FormGroup, Label, Input } from 'reactstrap'
1243

1254
export default ({
1265
onChange,
127-
checkedExpectations,
1286
termsOfUseAndPrivacy,
129-
showModal,
130-
selectedModal,
131-
acknowledgementErrors
7+
agreeToReceiveEmails,
8+
agreeToReceivePhoneCall,
9+
agreeToReceiveCYFNews
13210
}) => {
13311
return (
13412
<Fragment>
13513
<span className="form-acknowledgement-header">
13614
Acknowledgement: (* Required)
13715
</span>
13816
<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
145-
onChange={onChange}
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} />
156-
</div>
17+
<FormGroup check>
18+
<Label check htmlFor="termsOfUseAndPrivacy">
19+
<Input
20+
className={`form-check-input`}
21+
type="checkbox"
22+
name="termsOfUseAndPrivacy"
23+
onChange={onChange}
24+
id="termsOfUseAndPrivacy"
25+
checked={termsOfUseAndPrivacy}
26+
/>
27+
I have read and accepted to the{' '}
28+
<a
29+
href="https://codeyourfuture.io/terms/"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
>
33+
terms of use
34+
</a>{' '}
35+
and{' '}
36+
<a
37+
href="https://codeyourfuture.io/privacy-policy/"
38+
target="_blank"
39+
rel="noopener noreferrer"
40+
>
41+
privacy policy
42+
</a>
43+
</Label>
44+
</FormGroup>
45+
<FormGroup check>
46+
<Label check htmlFor="agreeToReceiveEmails">
47+
<Input
48+
className={`form-check-input`}
49+
type="checkbox"
50+
name="agreeToReceiveEmails"
51+
id="agreeToReceiveEmails"
52+
onChange={onChange}
53+
checked={agreeToReceiveEmails}
54+
/>
55+
Send me emails relevant to my volunteering (mandatory)
56+
</Label>
57+
</FormGroup>
58+
<FormGroup check>
59+
<Label check htmlFor="agreeToReceivePhoneCall">
60+
<Input
61+
className={`form-check-input`}
62+
type="checkbox"
63+
name="agreeToReceivePhoneCall"
64+
id="agreeToReceivePhoneCall"
65+
onChange={onChange}
66+
checked={agreeToReceivePhoneCall}
67+
/>
68+
Contact me via telephone in regards to volunteering
69+
</Label>
70+
</FormGroup>
71+
<FormGroup check>
72+
<Label check htmlFor="agreeToReceiveCYFNews">
73+
<Input
74+
className={`form-check-input`}
75+
type="checkbox"
76+
name="agreeToReceiveCYFNews"
77+
id="agreeToReceiveCYFNews"
78+
onChange={onChange}
79+
checked={agreeToReceiveCYFNews}
80+
/>
81+
Contact me via email about events and other CYF news
82+
</Label>
83+
</FormGroup>
15784
</Fragment>
15885
)
15986
}

‎src/Components/forms/header.js

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
1-
import React, { Fragment } from 'react'
1+
import React from 'react'
22

33
export default ({ err, formInComplete, userId }) => {
44
return (
5-
<Fragment>
5+
<div>
6+
<div className="mb-2">
7+
{err && (
8+
<p className="errors">
9+
{err}
10+
{window.scrollTo(0, 0)}
11+
</p>
12+
)}
13+
{formInComplete ? (
14+
<p className="errors">
15+
Form is incomplete, please check all your details.
16+
{window.scrollTo(0, 0)}
17+
</p>
18+
) : (
19+
''
20+
)}
21+
</div>
622
<span className="form-header">Volunteer Application Form</span>
723
<hr />
824
{userId ? (
@@ -16,20 +32,6 @@ export default ({ err, formInComplete, userId }) => {
1632
complete the form below:
1733
</p>
1834
)}
19-
{err && (
20-
<p className="errors">
21-
{err}
22-
{window.scrollTo(0, 0)}
23-
</p>
24-
)}
25-
{formInComplete ? (
26-
<span className="errors container">
27-
Form is incomplete, please check all your details.
28-
{window.scrollTo(0, 0)}
29-
</span>
30-
) : (
31-
''
32-
)}
33-
</Fragment>
35+
</div>
3436
)
3537
}

‎src/Components/forms/helper.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ export const initialState = {
2121
formInComplete: false,
2222
userId: '',
2323
dashboardUrl: '',
24+
termsOfUseAndPrivacy: false,
25+
agreeToReceiveEmails: false,
26+
agreeToReceivePhoneCall: false,
27+
agreeToReceiveCYFNews: false,
2428
errors: {
2529
firstName: false,
2630
lastName: false,
@@ -29,7 +33,10 @@ export const initialState = {
2933
cityId: false,
3034
interestedInVolunteer: false,
3135
interestedInCYF: false,
32-
acknowledgement: false
36+
termsOfUseAndPrivacy: false,
37+
agreeToReceiveEmails: false,
38+
agreeToReceivePhoneCall: false,
39+
agreeToReceiveCYFNews: false
3340
}
3441
}
3542

‎src/Components/forms/index.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,7 @@
120120
font-size: 24px;
121121
border-radius: 5px;
122122
padding: 20px;
123-
position: absolute;
124-
top: 0px;
125-
width: 92%;
123+
width: 100% !important;
126124
background-color: #ecdada;
127125
height: fit-content;
128126
}

0 commit comments

Comments
 (0)