blob: 2c61fb9d4284b73ff8acdb473171552977aac3f7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
import React, { useEffect } from 'react'
import Header from '../../../components/Header/Header'
import UpdateInput from '../../../components/UpdateInput/UpdateInput'
import styles from './FormOne.module.css'
import EditButton from '../../../components/EditButton/EditButton'
import Gender from '../../../components/Gender/Gender'
import { useTranslation } from 'react-i18next'
import { userContext } from '../../../context/User'
import PopUpModal from '../../../components/Modal/Modal'
const FormOne = () => {
const { userData, setUserData } = userContext()
const { t } = useTranslation()
const [editable, setEditable] = React.useState(true)
const handleEdit = () => {
setEditable(!editable)
}
useEffect(() => {
switch (userData.gender) {
case 'Male':
document.getElementById('male').checked = 'checked'
break
case 'Female':
document.getElementById('female').checked = 'checked'
break
case 'Other':
document.getElementById('other').checked = 'checked'
break
}
}, [userData.gender])
return (
<>
<Header subheading={t('UPDATE')} />
<PopUpModal
title="Fill your information"
image={`${process.env.PUBLIC_URL}/assets/images/id.svg`}
description={
<>
<ul>
<li className="list__item">
Select your residency by selecting the appropriate checkbox
</li>
<li className="list__item">
Enter your full name without any title or salutation
</li>
<li className="list__item">
Select your gender by clicking on the appropriate card
</li>
<li className="list__item">
Select your date of birth from the provided calender
</li>
<li className="list__item">
Enter your 10 digit mobile number without any prefix or country
code
</li>
<li className="list__item">
Enter your email address in proper format
</li>
</ul>
</>
}
/>
<div className={styles.formone}>
<UpdateInput
type="text"
id="fullName"
label={t('FULL_NAME')}
value={userData?.name}
onChange={(e) => {
setUserData({
...userData,
name: e.target.value
})
}}
placeholder={t('ENTER_YOUR_FULL_NAME')}
/>
<UpdateInput
id="mobile"
value={userData?.mobile}
label={t('MOBILE')}
type="text"
onChange={(e) => {
setUserData({
...userData,
mobile: e.target.value
})
}}
placeholder={t('ENTER_YOUR_MOBILE_NUMBER')}
/>
<div className={styles.formone__dob}>
<label htmlFor="dob">{t('DATE_OF_BIRTH')}</label>
<div className={styles.input__edit}>
<input
className={styles.formone__dob_input}
type="date"
id="dob"
name="dob"
value={userData?.dob}
readOnly={editable}
onChange={(e) => {
setUserData({
...userData,
dob: e.target.value
})
}}
required
/>
<EditButton onClick={handleEdit} enabled={!editable ? '1' : '0'} />
</div>
</div>
<UpdateInput
id="email"
value={userData?.email}
label={t('EMAIL')}
type="email"
onChange={(e) => {
setUserData({
...userData,
email: e.target.value
})
}}
placeholder={t('ENTER_YOUR_EMAIL_ID')}
/>
<Gender formData={userData} setFormData={setUserData} />
</div>
</>
)
}
export default FormOne
|