Merge pull request #69 from CodeYourFuture/staging

merge staging into master

Author: Wolfjawan

src/App.css

@@ -23,3 +23,6 @@ body {
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
 }
+button:disabled {
+  background: gray;
+}

src/Components/forms/Acknowledgement.js

@@ -1,89 +1,62 @@
 import React, { Fragment } from 'react'
+import { FormGroup, Label, Input } from 'reactstrap'
 
-export default ({ onChange, checked, isEmpty }) => {
+export default ({ onChange, agreeToTOU, agreeToReceiveCommunication }) => {
   return (
     <Fragment>
-      <span className="form-acknowledgement-header">
-        Acknowledgement: (* Required)
-      </span>
-      <div className={`form-check ml-4 pl-4 mt-2 ${isEmpty && 'is-empty'}`}>
-        <input
-          className={`form-check-input`}
-          type="checkbox"
-          name="acknowledgement"
-          onChange={onChange}
-          checked={checked}
-        ></input>
-        <label className="form-check-label">
-          I have{' '}
-          <span
-            className="form-acknowledgement-read-about"
-            data-toggle="modal"
-            data-target={`#id-form-acknowledgement`}
+      <div className="form-acknowledgement-header mt-4">Acknowledgement:</div>
+      <hr className="mt-0" />
+      <p>
+        Code Your Future may call you, send you SMS or email you as part of your
+        volunteering process with us. Your data is protected in accordance with
+        our privacy policy.
+      </p>
+      <FormGroup check>
+        <Label check htmlFor="agreeToTOU">
+          <Input
+            className={`form-check-input`}
+            type="checkbox"
+            name="agreeToTOU"
+            onChange={onChange}
+            id="agreeToTOU"
+            checked={agreeToTOU}
+          />
+          Yes, I have read and accepted the{' '}
+          <a
+            href="https://codeyourfuture.io/terms/"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            read about
-          </span>{' '}
-          what to expect when volunteering at CYF
-        </label>
-
-        <div>
-          <div
-            className="modal fade"
-            id={`id-form-acknowledgement`}
-            role="dialog"
+            terms of use
+          </a>{' '}
+          and{' '}
+          <a
+            href="https://codeyourfuture.io/privacy-policy/"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <div className="modal-dialog">
-              <div className="modal-content">
-                <div className="modal-body">
-                  <div>
-                    <h1>JOIN OUR COMMUNITY</h1>
-                    <p>
-                      Welcome to a fun, inclusive community where your knowledge
-                      and expertise can transform the lives of refugees, asylum
-                      seekers and local disadvantaged people. A young nonprofit
-                      is a lot like a start-up: growing quickly and always
-                      looking for versatile, dependable people. You can join us
-                      in one of 6 CYF cities worldwide or set up a new CYF
-                      chapter to support your local communities.{' '}
-                    </p>
-                    <ul>
-                      We are looking for volunteers in the following areas:
-                      <li>
-                        <strong>Volunteers</strong> from virtually any
-                        background to help us run and grow our organization (to
-                        help with events, marketing, admin, etc.)
-                      </li>
-                      <li>
-                        Professionals from the tech industry to join our
-                        <strong>mentorship programme</strong> and give a student
-                        guidance and support
-                      </li>
-                      <li>
-                        <strong>Experienced web developers</strong> (HTML/CSS,
-                        JavaScript, Node, React, Databases) to help teach our
-                        classes
-                      </li>
-                    </ul>
-                    <p>
-                      Previous volunteers at Code Your Future have developed
-                      their skills, learnt valuable new ones, and made wonderful
-                      friends along the way. Roles can last a few weeks, a
-                      month, or longer - depending on how much time you can
-                      commit. Apply using the volunteer form linked below and
-                      we'll be in touch.
-                    </p>
-                  </div>
-                </div>
-                <div className="modal-footer">
-                  <span className="close" data-dismiss="modal">
-                    close
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            privacy policy
+          </a>{' '}
+          <strong className="text-danger">*</strong>
+        </Label>
+      </FormGroup>
+      <FormGroup check>
+        <Label check htmlFor="agreeToReceiveCommunication">
+          <Input
+            className={`form-check-input`}
+            type="checkbox"
+            name="agreeToReceiveCommunication"
+            id="agreeToReceiveCommunication"
+            onChange={onChange}
+            checked={agreeToReceiveCommunication}
+          />
+          Yes, contact me about volunteering activities and related events{' '}
+          <strong className="text-danger">*</strong>
+        </Label>
+      </FormGroup>
+      <p className="pt-2">
+        <strong className="text-danger">*</strong> fields are mandatory
+      </p>
     </Fragment>
   )
 }

src/Components/forms/header.js

@@ -1,8 +1,24 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
 export default ({ err, formInComplete, userId }) => {
   return (
-    <Fragment>
+    <div>
+      <div className="mb-2">
+        {err && (
+          <p className="errors">
+            {err}
+            {window.scrollTo(0, 0)}
+          </p>
+        )}
+        {formInComplete ? (
+          <p className="errors">
+            Form is incomplete, please check all your details.
+            {window.scrollTo(0, 0)}
+          </p>
+        ) : (
+          ''
+        )}
+      </div>
       <span className="form-header">Volunteer Application Form</span>
       <hr />
       {userId ? (
@@ -16,20 +32,6 @@ export default ({ err, formInComplete, userId }) => {
           complete the form below:
         </p>
       )}
-      {err && (
-        <p className="errors">
-          {err}
-          {window.scrollTo(0, 0)}
-        </p>
-      )}
-      {formInComplete ? (
-        <span className="errors container">
-          Form is incomplete, please check all your details.
-          {window.scrollTo(0, 0)}
-        </span>
-      ) : (
-        ''
-      )}
-    </Fragment>
+    </div>
   )
 }

src/Components/forms/helper.js

@@ -21,6 +21,8 @@ export const initialState = {
   formInComplete: false,
   userId: '',
   dashboardUrl: '',
+  agreeToTOU: false,
+  agreeToReceiveCommunication: false,
   errors: {
     firstName: false,
     lastName: false,
@@ -29,7 +31,8 @@ export const initialState = {
     cityId: false,
     interestedInVolunteer: false,
     interestedInCYF: false,
-    acknowledgement: false
+    agreeToTOU: false,
+    agreeToReceiveCommunication: false
   }
 }
 

src/Components/forms/index.css

@@ -89,12 +89,12 @@
   border: none !important;
 }
 .volunteer-submit-btn {
-  background: #03a9f4;
+  background-color: #03a9f4;
   border-radius: 5px;
   letter-spacing: 0.75px;
   text-transform: capitalize;
   color: #ffffff;
-  margin: 40px 0;
+  margin: 20px 0;
   width: 140px;
 }
 .form-acknowledgement-header {
@@ -120,9 +120,7 @@
   font-size: 24px;
   border-radius: 5px;
   padding: 20px;
-  position: absolute;
-  top: 0px;
-  width: 92%;
+  width: 100% !important;
   background-color: #ecdada;
   height: fit-content;
 }

src/Components/forms/index.js

@@ -93,8 +93,9 @@ class Forms extends Component {
       guidePeople,
       techSkill,
       otherSkill,
-      acknowledgement,
-      userId
+      userId,
+      agreeToTOU,
+      agreeToReceiveCommunication
     } = this.state
 
     const validatedInputs = this.validateForm({
@@ -104,15 +105,17 @@ class Forms extends Component {
       cityId,
       interestedInVolunteer,
       tel,
+      agreeToTOU,
       interestedInCYF,
-      acknowledgement
+      agreeToReceiveCommunication
     })
     await this.validateArray({ guidePeople, techSkill, otherSkill })
     const emptyValues = validatedInputs.includes(true)
     const { valuationError } = this.state
     if (emptyValues || valuationError) {
       this.setState({ formInComplete: true })
     }
+
     if (!emptyValues && !valuationError) {
       this.props.createVolunteerHandler({
         firstName,
@@ -127,7 +130,9 @@ class Forms extends Component {
         guidePeople: filterEmptyValue(guidePeople),
         techSkill: filterEmptyValue(techSkill),
         otherSkill: filterEmptyValue(otherSkill),
-        userId
+        userId,
+        agreeToTOU,
+        agreeToReceiveCommunication
       })
     }
   }
@@ -149,15 +154,20 @@ class Forms extends Component {
         return ''
     }
   }
-
+  showModal = e => {
+    if (e && e.target.id) {
+      this.setState({ selectedModal: e.target.id })
+    }
+  }
   render() {
     const { err, volunteer } = this.props
     const {
       disabled,
-      acknowledgement,
+      agreeToTOU,
       formInComplete,
       userId,
-      dashboardUrl
+      dashboardUrl,
+      agreeToReceiveCommunication
     } = this.state
     if (volunteer && volunteer._id) {
       return (
@@ -185,30 +195,24 @@ class Forms extends Component {
     }
     return (
       <div className="form-container container">
-        <div>
-          <Header err={err} formInComplete={formInComplete} userId={userId} />
-          <form className="mb-4" onSubmit={this.handleSubmit} method="post">
-            <Inputs
-              {...this.props}
-              {...this.state}
-              onChange={this.onChange}
-              telOnChange={this.telOnChange}
-              onChangeCheckList={this.onChangeCheckList}
-            />
-            <Acknowledgement
-              onChange={this.onChange}
-              checked={this.state.acknowledgement}
-              isEmpty={this.state.errors.acknowledgement}
-            />
-            <button
-              className="btn volunteer-submit-btn"
-              type="submit"
-              disabled={disabled || !acknowledgement}
-            >
-              Submit
-            </button>
-          </form>
-        </div>
+        <Header err={err} formInComplete={formInComplete} userId={userId} />
+        <form className="mb-4" onSubmit={this.handleSubmit} method="post">
+          <Inputs
+            onChange={this.onChange}
+            telOnChange={this.telOnChange}
+            onChangeCheckList={this.onChangeCheckList}
+            {...this.props}
+            {...this.state}
+          />
+          <Acknowledgement onChange={this.onChange} {...this.state} />
+          <button
+            disabled={disabled || !agreeToTOU || !agreeToReceiveCommunication}
+            className="btn volunteer-submit-btn"
+            type="submit"
+          >
+            Submit
+          </button>
+        </form>
       </div>
     )
   }
@@ -222,7 +226,6 @@ export function mapStateToProps(store) {
     err: volunteer && volunteer.err
   }
 }
-export default connect(
-  mapStateToProps,
-  { loadCities, createVolunteerHandler }
-)(Forms)
+export default connect(mapStateToProps, { loadCities, createVolunteerHandler })(
+  Forms
+)

src/Components/forms/inputs/index.js

@@ -48,7 +48,7 @@ export default class VolunteerForm extends Component {
             isEmpty={errors.lastName}
             label="Last Name *"
             name="lastName"
-            placeholder="Your first name..."
+            placeholder="Your last name..."
             type="text"
           />
           <TextInput