Merge pull request #70 from CodeYourFuture/volunteer/email/vitrifaction

email vitrifaction

Author: Wolfjawan

src/Components/forms/helper.js

@@ -23,6 +23,8 @@ export const initialState = {
   dashboardUrl: '',
   agreeToTOU: false,
   agreeToReceiveCommunication: false,
+  showEmailBox: false,
+  loading: false,
   errors: {
     firstName: false,
     lastName: false,

src/Components/forms/index.css

@@ -146,6 +146,56 @@
   width: 100%;
   text-align: left;
 }
+.forms-important-box {
+  font-family: Verdana, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #000 !important;
+  box-sizing: inherit;
+  background-color: #fcf6e5;
+  border-left: none;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  padding: 16px;
+  border: 1px solid rgb(218, 218, 218);
+}
+.forms-important-box-form {
+  height: 30px;
+  display: flex;
+  width: 100%;
+  margin: 10px 0;
+}
+.forms-important-box-form input {
+  outline: none !important;
+  border-radius: 2px 0 0 2px;
+  height: 30px;
+  border: 1px solid rgb(218, 218, 218);
+  padding: 0 6px;
+  width: 250px;
+}
+.forms-important-box-form button {
+  outline: none !important;
+  border-radius: 0 2px 2px 0;
+  height: 30px;
+  border: 1px solid rgb(218, 218, 218);
+  cursor: pointer;
+  background-color: #4daf50;
+  color: #ffffff;
+}
+.forms-important-box-form button:hover {
+  background-color: #4ac24e;
+  color: #ffffff;
+}
+.forms-important-box-form button:disabled {
+  color: #575757;
+  background-color: #dadada;
+}
+.success {
+  color: green;
+  text-align: center;
+  padding: 10px;
+  font-size: 20px;
+}
 @media screen and (max-width: 1000px) {
   .media {
     display: block;

src/Components/forms/index.js

@@ -5,13 +5,76 @@ import { initialState, arrayOnChange, filterEmptyValue } from './helper'
 import Header from './header'
 import Inputs from './inputs'
 import Acknowledgement from './Acknowledgement'
+import axios from 'axios'
+import { domain, appPath } from '../../config'
 import './index.css'
+
+const path = `${domain()}${appPath}`
 class Forms extends Component {
   state = initialState
 
+  handleMagicLinkRequest = async e => {
+    e.preventDefault()
+    const { email, userId } = this.state
+    if (email) {
+      this.setState({ loading: true, err: '' })
+      try {
+        const magicLinkRequest = await axios.post(
+          `${path}/email/verification`,
+          {
+            email,
+            userId
+          }
+        )
+        if (magicLinkRequest.status === 200) {
+          this.setState({
+            loading: false,
+            msg:
+              'We have sent you a verification email, Please check your emails.'
+          })
+        }
+      } catch (err) {
+        if (
+          err.response &&
+          err.response.data &&
+          err.response.data.err === 'EMAIL_EMPTY'
+        ) {
+          return this.setState({
+            loading: false,
+            err: 'Email cannot be empty.'
+          })
+        }
+        console.log(err.response.data)
+        if (err.response && err.response.data === 'NO_ACCOUNT') {
+          return this.setState({
+            loading: false,
+            err: 'No account was found.'
+          })
+        }
+        return this.setState({
+          err:
+            'Sorry, we are currently experiencing technical issues, please try again later.',
+          loading: false
+        })
+      }
+    }
+  }
+
   UNSAFE_componentWillMount() {
     const dashboardUrl = this.props.location.search
-    const { userId } = this.props.match.params
+    const { userId, code } = this.props.match.params
+    if (code === 'failed') {
+      this.setState({
+        showEmailBox: true,
+        err:
+          'Failed to verify your email address, due to expire token or server failure. Please use the box below and try again.'
+      })
+    }
+    if (code === 'success') {
+      this.setState({
+        msg: `Thank you for your patient, we will review your application and contact you via email, within 10 days.`
+      })
+    }
     if (userId) {
       this.setState({ userId, dashboardUrl: dashboardUrl.slice(1) })
     }
@@ -33,7 +96,8 @@ class Forms extends Component {
         [name]: type === 'checkbox' ? checked : value,
         submitted: false,
         errors,
-        formInComplete: false
+        formInComplete: false,
+        err: null
       })
     }
   }
@@ -167,8 +231,27 @@ class Forms extends Component {
       formInComplete,
       userId,
       dashboardUrl,
-      agreeToReceiveCommunication
+      agreeToReceiveCommunication,
+      showEmailBox,
+      msg,
+      loading
     } = this.state
+    if (loading) {
+      return (
+        <div className="d-flex justify-content-center mt-5">
+          <div className="loader" />
+        </div>
+      )
+    }
+    if (msg) {
+      return (
+        <div style={{ padding: '5%' }}>
+          <p className="success" style={{ fontSize: '24px' }}>
+            {msg}
+          </p>
+        </div>
+      )
+    }
     if (volunteer && volunteer._id) {
       return (
         <div className="form-container container p-4">
@@ -195,24 +278,74 @@ class Forms extends Component {
     }
     return (
       <div className="form-container container">
-        <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>
+        <Header
+          err={err || this.state.err}
+          formInComplete={formInComplete}
+          userId={userId}
+        />
+        {userId && (
+          <div className="forms-important-box">
+            <span>
+              <strong>Important:</strong> If you already completed this form in
+              some point please click{' '}
+              <span
+                style={{ cursor: 'pointer', color: '#0053ff' }}
+                onMouseDown={() => this.setState({ showEmailBox: true })}
+              >
+                here
+              </span>
+              .
+            </span>
+            {showEmailBox && (
+              <div>
+                <span>
+                  Please entre the email you used for volunteer application form
+                  and click submit.
+                </span>
+                <form
+                  className="forms-important-box-form"
+                  onSubmit={this.handleMagicLinkRequest}
+                >
+                  <input
+                    onChange={this.onChange}
+                    value={this.state.email}
+                    name="email"
+                    placeholder="[email protected]"
+                    type="email"
+                  />
+                  <button disabled={!this.state.email} type="submit">
+                    Submit
+                  </button>
+                </form>
+                <span
+                  style={{ cursor: 'pointer', color: '#0053ff' }}
+                  onMouseDown={() => this.setState({ showEmailBox: false })}
+                >
+                  Cancel
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+        {!showEmailBox && (
+          <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>
     )
   }

src/Redux/action/volunteersActions.js

@@ -8,6 +8,15 @@ export const createVolunteer = async volunteer => {
     const response = await axios.post(`${path}`, volunteer)
     return response.data
   } catch (err) {
+    if (
+      err.response &&
+      err.response.data &&
+      err.response.data.error === 'EMAIL_EXIST'
+    ) {
+      return {
+        err: 'Volunteer account with this email address already exist.'
+      }
+    }
     return {
       err: 'Something went wrong, please try again later.'
     }

src/Routes/index.js

@@ -7,7 +7,7 @@ import NotFound from '../Components/NotFound'
 export default () => (
   <Switch>
     <Public exact path="/" component={Forms} />
-    <Public exact path="/code/:userId" component={Forms} />
+    <Public exact path="/code/:userId/:code?" component={Forms} />
     <Route path="*" component={NotFound} />
   </Switch>
 )