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
|
import React, { useState } from 'react'
import Address from '../Address/Address'
import DocumentScanner from '../DocumentScanner/DocumentScanner'
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
import FormOne from '../FormOne/FormOne'
import {
validEmail,
validMobileNumber,
validPincode,
validString
} from '../../../constants/RegEx'
import UpdateSelect from '../UpdateSelect/UpdateSelect'
import { useTranslation } from 'react-i18next'
const Demographic = () => {
const { t } = useTranslation()
const [page, setPage] = useState(0)
const [formData, setFormData] = useState({
name: '',
gender: '',
dob: new Date().toISOString().slice(0, 10),
mobile: '',
email: '',
country: '',
state: '',
district: '',
village: '',
houseNo: '',
street: '',
locality: '',
postOffice: '',
landmark: '',
pincode: '',
address: ''
})
const handleSubmit = () => {
if (page === 0) {
if (formData.name === '' || formData.name.length < 1) {
return alert(t('PLEASE_ENTER_YOUR_NAME'))
} else if (!validString.test(formData.name)) {
return alert(t('PLEASE_ENTER_VALID_NAME'))
} else if (formData.gender === '') {
return alert(t('PLEASE_SELECT_YOUR_GENDER'))
} else if (formData.mobile === '') {
return alert(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
} else if (!validMobileNumber.test(formData.mobile)) {
return alert(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
} else if (formData.email === '') {
return alert(t('PLEASE_ENTER_YOUR_EMAIL'))
} else if (!validEmail.test(formData.email)) {
return alert(t('PLEASE_ENTER_VALID_EMAIL'))
} else {
setPage(page + 1)
}
} else if (page === 1) {
if (formData.country === '') {
return alert(t('PLEASE_SELECT_YOUR_COUNTRY'))
} else if (formData.state === '') {
return alert(t('PLEASE_SELECT_YOUR_STATE'))
} else if (formData.district === '') {
return alert(t('PLEASE_SELECT_YOUR_DISTRICT'))
} else if (formData.village === '') {
return alert(t('PLEASE_ENTER_YOUR_VILLAGE'))
} else if (formData.houseNo === '') {
return alert(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
} else if (formData.street === '') {
return alert(t('PLEASE_ENTER_YOUR_STREET'))
} else if (formData.locality === '') {
return alert(t('PLEASE_ENTER_YOUR_LOCALITY'))
} else if (formData.postOffice === '') {
return alert(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
} else if (formData.landmark === '') {
return alert(t('PLEASE_ENTER_NEAREST_LANDMARK'))
} else if (formData.pincode === '') {
return alert(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
} else if (!validPincode.test(formData.pincode)) {
return alert(t('PLEASE_ENTER_VALID_PINCODE'))
} else {
setFormData({
...formData,
address: `${formData.houseNo} ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label} ${formData.pincode}`
})
setPage(page + 1)
}
} else if (page === 3) {
setPage(page + 1)
} else setPage(page + 1)
}
const conditionalComponent = () => {
switch (page) {
case 0:
return <FormOne formData={formData} setFormData={setFormData} />
case 1:
return <Address formData={formData} setFormData={setFormData} />
case 2:
return <DocumentScanner formData={formData} setFormData={setFormData} />
default:
return <UpdateSelect />
}
}
const conditionalButton = () => {
switch (page) {
case 0:
return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
case 1:
return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
case 2:
return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
default:
return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
}
}
return (
<>
{conditionalComponent()}
{conditionalButton()}
</>
)
}
export default Demographic
|