From 1926a54d1f7b8bc1ed690aaf8e3b679b41edce7b Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Sat, 20 Aug 2022 21:52:57 +0530
Subject: enrollment improvements

---
 client/src/pages/Enrollment/Address/Address.jsx    | 152 ++++++++++-----------
 .../pages/Enrollment/Address/Address.module.css    |  17 +--
 .../src/pages/Enrollment/Agreement/Agreement.jsx   |   3 +-
 client/src/pages/Enrollment/Enrollment.jsx         |  81 ++++++-----
 client/src/pages/Enrollment/Enrollment.module.css  |   0
 .../pages/Enrollment/FormOne/FormOne.module.css    |   7 +
 client/src/pages/Enrollment/FormTwo/FormTwo.jsx    |  64 ++++-----
 .../pages/Enrollment/FormTwo/FormTwo.module.css    |   4 +-
 8 files changed, 167 insertions(+), 161 deletions(-)
 delete mode 100644 client/src/pages/Enrollment/Enrollment.module.css

(limited to 'client/src/pages/Enrollment')

diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 9ae1857..3d1c520 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -4,9 +4,9 @@ import Input from '../../../components/Input/Input'
 import { State, City } from 'country-state-city'
 import Select from 'react-select'
 import { userContext } from '../../../context/User'
+import { useTranslation } from 'react-i18next'
 
 import styles from './Address.module.css'
-import { useTranslation } from 'react-i18next'
 
 const Address = () => {
   const { t } = useTranslation()
@@ -26,7 +26,7 @@ const Address = () => {
     }))
 
   const customStyles = {
-    control: (base, state) => ({
+    control: (base) => ({
       ...base,
       width: '330px',
       height: '60px',
@@ -34,7 +34,7 @@ const Address = () => {
       border: '3px solid',
       borderRadius: '10px !important'
     }),
-    input: (base, state) => ({
+    input: (base) => ({
       ...base,
       display: 'flex',
       justifyContent: 'center',
@@ -48,66 +48,6 @@ const Address = () => {
     <>
       <Header subheading={t('ENROLLMENT')} />
       <div className={styles.address}>
-        <div className={styles.address__container}>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="state">{t('STATE')}</label>
-              <Select
-                id="state"
-                name="state"
-                options={updatedStates('IN')}
-                value={userData.address?.state}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      state: e
-                    }
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
-              <label htmlFor="city">{t('DISTRICT')}</label>
-              <Select
-                id="city"
-                name="city"
-                options={updatedCities('IN', userData.address?.state?.isoCode)}
-                value={userData.address?.district}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      district: e
-                    }
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <Input
-            id="town"
-            label={t('VILLAGE_TOWN')}
-            value={userData.village}
-            type="text"
-            onChange={(e) => {
-              setUserData({
-                ...userData,
-                address: {
-                  ...userData.address,
-                  village: e.target.value
-                }
-              })
-            }}
-            placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
-          />
-        </div>
         <div className={styles.address__container}>
           <Input
             id="houseNo"
@@ -126,36 +66,57 @@ const Address = () => {
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
           />
           <Input
-            id="street"
-            label={t('STREET_ROAD')}
-            value={userData.street}
+            id="town"
+            label={t('VILLAGE_TOWN')}
+            value={userData.village}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  street: e.target.value
+                  village: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_STREET_ROAD')}
+            placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="state">{t('STATE')}</label>
+            <Select
+              id="state"
+              name="state"
+              options={updatedStates('IN')}
+              value={userData.address?.state}
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    state: e
+                  }
+                })
+              }}
+              styles={customStyles}
+            />
+          </div>
+        </div>
+        <div className={styles.address__container}>
           <Input
-            id="locality"
-            label={t('AREA_LOCALITY')}
-            value={userData.locality}
+            id="street"
+            label={t('STREET_ROAD')}
+            value={userData.street}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  locality: e.target.value
+                  street: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
+            placeholder={t('ENTER_YOUR_STREET_ROAD')}
           />
           <Input
             id="postOffice"
@@ -173,23 +134,42 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
           />
+          <div className={styles.input__container}>
+            <label htmlFor="city">{t('DISTRICT')}</label>
+            <Select
+              id="city"
+              name="city"
+              options={updatedCities('IN', userData.address?.state?.isoCode)}
+              value={userData.address?.district}
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    district: e
+                  }
+                })
+              }}
+              styles={customStyles}
+            />
+          </div>
         </div>
         <div className={styles.address__container}>
           <Input
-            id="landmark"
-            label={t('LANDMARK')}
-            value={userData.landmark}
+            id="locality"
+            label={t('AREA_LOCALITY')}
+            value={userData.locality}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  landmark: e.target.value
+                  locality: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
+            placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
           />
           <Input
             id="pincode"
@@ -207,6 +187,22 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
           />
+          <Input
+            id="landmark"
+            label={t('LANDMARK')}
+            value={userData.landmark}
+            type="text"
+            onChange={(e) => {
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  landmark: e.target.value
+                }
+              })
+            }}
+            placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
+          />
         </div>
       </div>
     </>
diff --git a/client/src/pages/Enrollment/Address/Address.module.css b/client/src/pages/Enrollment/Address/Address.module.css
index 26ca909..eafa781 100644
--- a/client/src/pages/Enrollment/Address/Address.module.css
+++ b/client/src/pages/Enrollment/Address/Address.module.css
@@ -1,28 +1,17 @@
 .address {
   display: flex;
   justify-content: center;
+  margin: 40px 0px 0px;
 }
 
 .address__container {
   margin: 0px 20px;
 }
 
-.input {
+.input__container {
   display: flex;
   justify-content: center;
+  flex-direction: column;
   font-family: 'Barlow';
   font-size: var(--font-medium-s);
 }
-
-.input__container {
-  display: flex;
-  flex-direction: column;
-}
-
-.input__field {
-  width: 300px;
-  margin: 10px 0px;
-  padding: 20px 10px;
-  border: 3px solid;
-  border-radius: 10px;
-}
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx
index d3a5b90..7b1b9c6 100644
--- a/client/src/pages/Enrollment/Agreement/Agreement.jsx
+++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx
@@ -81,10 +81,11 @@ const Agreement = ({ unverified, setUnverified }) => {
         {show && (
           <>
             <Input
-              type="number"
+              type="text"
               id="otp"
               value={otp}
               onChange={(e) => setOtp(e.target.value)}
+              maxLength="6"
               placeholder="XXXXXX"
             />
             <Button
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 8b62b3c..88bdf47 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -33,19 +33,28 @@ const Enrollment = () => {
   const navigate = useNavigate()
   const [unverified, setUnverified] = useState(true)
 
-  const pushUser = useMutation((payload) => createUser(payload), {
-    onSuccess: () => {
-      console.log('Before mutate')
+  const { mutate } = useMutation((payload) => createUser(payload), {
+    onSuccess: (data) => {
       setConfirm.mutate({
         mobile: `+91${userData.mobile}`,
-        id: pushUser.data._id
+        id: data?.data?.result?._id
       })
-      console.log('After mutate')
       setPage(page + 1)
+    },
+    onError: (error) => {
+      console.log(error)
+      if (error?.response?.data?.message === 'User already exists.') {
+        setUserData(initialUserData)
+        navigate('/error')
+      } else {
+        toast.error(t('SOMETHING_WENT_WRONG'))
+      }
     }
   })
 
-  const setConfirm = useMutation((payload) => sendMessage(payload))
+  const setConfirm = useMutation((payload) => {
+    sendMessage(payload)
+  })
 
   const handleSubmit = () => {
     if (page === 0) {
@@ -75,26 +84,26 @@ const Enrollment = () => {
         setPage(page + 1)
       }
     } else if (page === 2) {
-      if (!userData.address.state.name) {
-        toast.error(t('PLEASE_SELECT_YOUR_STATE'))
-      } else if (!userData.address.district.name) {
-        toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
-      } else if (userData.address.village === '') {
-        toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
-      } else if (userData.address.houseNo === '') {
+      if (userData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
       } else if (userData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
       } else if (userData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
+      } else if (userData.address.village === '') {
+        toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
       } else if (userData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
-      } else if (userData.address.landmark === '') {
-        toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
       } else if (userData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
       } else if (!validPincode.test(userData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
+      } else if (!userData.address.state.name) {
+        toast.error(t('PLEASE_SELECT_YOUR_STATE'))
+      } else if (!userData.address.district.name) {
+        toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
+      } else if (userData.address.landmark === '') {
+        toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
       } else {
         setPage(page + 1)
       }
@@ -106,11 +115,7 @@ const Enrollment = () => {
       }
     } else if (page === 4) {
       if (!userData.documents.POI) {
-        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY'))
-      } else if (!userData.documents.POA) {
-        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS'))
-      } else if (!userData.documents.DOB) {
-        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH'))
+        toast.error(t('SCAN_YOUR_DOCUMENT'))
       } else {
         setPage(page + 1)
       }
@@ -119,21 +124,25 @@ const Enrollment = () => {
     } else if (page === 6) {
       setPage(page + 1)
     } else if (page === 7) {
-      pushUser.mutate({
-        indianResident: userData.indianResident,
-        name: userData.name,
-        gender: userData.gender,
-        dob: userData.dob,
-        mobile: userData.mobile,
-        email: userData.email,
-        address: userData.address,
-        photo: userData.photo,
-        documents: {
-          POI: userData.documents.POI,
-          POA: userData.documents.POA,
-          DOB: userData.documents.DOB
-        }
-      })
+      if (unverified) {
+        toast.error(t('PLEASE_VERIFY_OTP'))
+      } else {
+        mutate({
+          indianResident: userData.indianResident,
+          name: userData.name,
+          gender: userData.gender,
+          dob: userData.dob,
+          mobile: userData.mobile,
+          email: userData.email,
+          address: userData.address,
+          photo: userData.photo,
+          documents: {
+            POI: userData.documents.POI,
+            POA: userData.documents.POA,
+            DOB: userData.documents.DOB
+          }
+        })
+      }
     } else if (page === 8) {
       setUserData(initialUserData)
       navigate('/')
@@ -198,7 +207,7 @@ const Enrollment = () => {
       case 7:
         return (
           <>
-            <SubmitButton onClick={handleSubmit} disabled={unverified} />
+            <SubmitButton onClick={handleSubmit} />
             <BackButton onClick={() => setPage(page - 1)} />
           </>
         )
diff --git a/client/src/pages/Enrollment/Enrollment.module.css b/client/src/pages/Enrollment/Enrollment.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.module.css b/client/src/pages/Enrollment/FormOne/FormOne.module.css
index 35d1e49..fae8e9f 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.module.css
+++ b/client/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -15,15 +15,22 @@
   display: flex;
   align-items: center;
   margin: 15px;
+  cursor: pointer;
 }
 
 .formone__resident input[type='radio'] {
   width: 1.5rem;
   height: 1.5rem;
+  cursor: pointer;
+}
+
+.formone__resident label {
+  margin-left: 10px;
 }
 
 .formone__gender {
   display: flex;
+  margin-bottom: 10px;
 }
 
 .formone__dob {
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 05ad075..0bce4bc 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -1,44 +1,46 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import Input from '../../../components/Input/Input'
 import Header from '../../../components/Header/Header'
-import SubmitButton from '../../../components/SubmitButton/SubmitButton'
-import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 
+import styles from './FormTwo.module.css'
+
 const FormTwo = () => {
   const { t } = useTranslation()
   const { userData, setUserData } = userContext()
   return (
-    <div className="formtwo">
+    <>
       <Header subheading={t('ENROLLMENT')} />
-      <Input
-        id="mobile"
-        value={userData.mobile}
-        label={t('MOBILE')}
-        type="text"
-        onChange={(e) => {
-          setUserData({
-            ...userData,
-            mobile: e.target.value
-          })
-        }}
-        placeholder={t('ENTER_YOUR_MOBILE_NUMBER')}
-      />
-      <Input
-        id="email"
-        value={userData.email}
-        label={t('EMAIL')}
-        type="email"
-        onChange={(e) => {
-          setUserData({
-            ...userData,
-            email: e.target.value
-          })
-        }}
-        placeholder={t('ENTER_YOUR_EMAIL_ID')}
-      />
-      <SubmitButton />
-    </div>
+      <div className={styles.formtwo__input}>
+        <Input
+          id="mobile"
+          value={userData.mobile}
+          label={t('MOBILE')}
+          type="text"
+          onChange={(e) => {
+            setUserData({
+              ...userData,
+              mobile: e.target.value
+            })
+          }}
+          placeholder={t('ENTER_YOUR_MOBILE_NUMBER')}
+        />
+        <Input
+          id="email"
+          value={userData.email}
+          label={t('EMAIL')}
+          type="email"
+          onChange={(e) => {
+            setUserData({
+              ...userData,
+              email: e.target.value
+            })
+          }}
+          placeholder={t('ENTER_YOUR_EMAIL_ID')}
+        />
+      </div>
+    </>
   )
 }
 
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.module.css b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
index 8b13789..d135f8f 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.module.css
@@ -1 +1,3 @@
-
+.formtwo__input {
+  margin: 60px;
+}
-- 
cgit