@djb25/digit-ui-module-ekyc 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +2092 -1477
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ConnectionDetailsView.js +83 -79
- package/src/components/DesktopInbox.js +117 -126
- package/src/components/SearchConsumer.js +103 -102
- package/src/pages/employee/AadhaarVerification.js +526 -330
- package/src/pages/employee/AddressDetails.js +637 -429
- package/src/pages/employee/Create.js +5 -19
- package/src/pages/employee/PropertyInfo.js +409 -316
- package/src/pages/employee/Review.js +335 -109
|
@@ -1,357 +1,553 @@
|
|
|
1
1
|
import React, { useState, useRef, Fragment } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Card,
|
|
4
|
+
LabelFieldPair,
|
|
5
|
+
CardLabel,
|
|
6
|
+
TextInput,
|
|
7
|
+
SubmitBar,
|
|
8
|
+
CardHeader,
|
|
9
|
+
RadioButtons,
|
|
10
|
+
ActionBar,
|
|
11
|
+
HomeIcon,
|
|
12
|
+
ConnectingCheckPoints,
|
|
13
|
+
CheckPoint,
|
|
14
|
+
} from "@djb25/digit-ui-react-components";
|
|
3
15
|
import { useTranslation } from "react-i18next";
|
|
4
16
|
import { useLocation, useHistory } from "react-router-dom";
|
|
5
17
|
import AddressDetails from "./AddressDetails";
|
|
6
18
|
|
|
7
|
-
// ─── Icons
|
|
19
|
+
// ─── Icons ───────────────────────────────────────────────────────────────────
|
|
8
20
|
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
21
|
+
const LockIcon = ({ size = 16 }) => (
|
|
22
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
|
|
23
|
+
<rect x="3" y="11" width="18" height="11" rx="2" />
|
|
24
|
+
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
25
|
+
</svg>
|
|
14
26
|
);
|
|
15
27
|
|
|
16
|
-
const UserIcon = ({ size = 16, color = "
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
28
|
+
const UserIcon = ({ size = 16, color = "currentColor" }) => (
|
|
29
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
|
|
30
|
+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
31
|
+
<circle cx="12" cy="7" r="4" />
|
|
32
|
+
</svg>
|
|
21
33
|
);
|
|
22
34
|
|
|
23
|
-
const PhoneIcon = ({ size = 16, color = "
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
35
|
+
const PhoneIcon = ({ size = 16, color = "currentColor" }) => (
|
|
36
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
|
|
37
|
+
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-5.37-5.37 19.79 19.79 0 01-3.07-8.63A2 2 0 014.82 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
|
|
38
|
+
</svg>
|
|
27
39
|
);
|
|
28
40
|
|
|
29
41
|
const WhatsappIcon = ({ size = 16 }) => (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
42
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
43
|
+
<path
|
|
44
|
+
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"
|
|
45
|
+
fill="#25D366"
|
|
46
|
+
/>
|
|
47
|
+
<path
|
|
48
|
+
d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z"
|
|
49
|
+
stroke="#25D366" strokeWidth="1.8" strokeLinecap="round"
|
|
50
|
+
/>
|
|
51
|
+
</svg>
|
|
34
52
|
);
|
|
35
53
|
|
|
36
|
-
const MailIcon = ({ size = 16, color = "
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
54
|
+
const MailIcon = ({ size = 16, color = "currentColor" }) => (
|
|
55
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
|
|
56
|
+
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
|
57
|
+
<path d="M22 6l-10 7L2 6" />
|
|
58
|
+
</svg>
|
|
41
59
|
);
|
|
42
60
|
|
|
43
|
-
const UsersIcon = ({ size = 16, color = "
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</svg>
|
|
61
|
+
const UsersIcon = ({ size = 16, color = "currentColor" }) => (
|
|
62
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round">
|
|
63
|
+
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
|
64
|
+
<circle cx="9" cy="7" r="4" />
|
|
65
|
+
<path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
|
|
66
|
+
</svg>
|
|
50
67
|
);
|
|
51
68
|
|
|
69
|
+
const CheckIcon = ({ size = 15, color = "#1D9E75" }) => (
|
|
70
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.8" strokeLinecap="round">
|
|
71
|
+
<polyline points="20 6 9 17 4 12" />
|
|
72
|
+
</svg>
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
// ─── Reusable: Icon-prefixed input wrapper ────────────────────────────────────
|
|
76
|
+
|
|
77
|
+
const IconInput = ({ icon, rightIcon, inputStyle = {}, ...props }) => (
|
|
78
|
+
<div style={{ position: "relative", width: "100%" }}>
|
|
79
|
+
<div style={{
|
|
80
|
+
position: "absolute", left: "10px", top: "50%",
|
|
81
|
+
transform: "translateY(-50%)", zIndex: 1, opacity: 0.45,
|
|
82
|
+
display: "flex", pointerEvents: "none",
|
|
83
|
+
}}>
|
|
84
|
+
{icon}
|
|
85
|
+
</div>
|
|
86
|
+
<TextInput
|
|
87
|
+
textInputStyle={{ paddingLeft: "36px", paddingRight: rightIcon ? "36px" : "12px", ...inputStyle }}
|
|
88
|
+
{...props}
|
|
89
|
+
/>
|
|
90
|
+
{rightIcon && (
|
|
91
|
+
<div style={{
|
|
92
|
+
position: "absolute", right: "10px", top: "50%",
|
|
93
|
+
transform: "translateY(-50%)", display: "flex",
|
|
94
|
+
}}>
|
|
95
|
+
{rightIcon}
|
|
96
|
+
</div>
|
|
97
|
+
)}
|
|
98
|
+
</div>
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
// ─── Reusable: Section heading with inline rule ───────────────────────────────
|
|
102
|
+
|
|
103
|
+
const SectionHead = ({ icon, label }) => (
|
|
104
|
+
<div style={{
|
|
105
|
+
display: "flex", alignItems: "center", gap: "8px",
|
|
106
|
+
marginBottom: "16px", marginTop: "4px",
|
|
107
|
+
}}>
|
|
108
|
+
<div style={{ opacity: 0.5, display: "flex" }}>{icon}</div>
|
|
109
|
+
<span style={{ fontSize: "15px", fontWeight: "600", color: "#0B0C0C", whiteSpace: "nowrap" }}>
|
|
110
|
+
{label}
|
|
111
|
+
</span>
|
|
112
|
+
<div style={{ flex: 1, height: "1px", background: "#EAECF0" }} />
|
|
113
|
+
</div>
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
// ─── Reusable: Radio toggle row ───────────────────────────────────────────────
|
|
117
|
+
|
|
118
|
+
const RadioToggleRow = ({ label, selected, onSelect, t, options }) => (
|
|
119
|
+
<div style={{
|
|
120
|
+
display: "flex", alignItems: "center",
|
|
121
|
+
justifyContent: "space-between", marginBottom: "8px",
|
|
122
|
+
}}>
|
|
123
|
+
<CardLabel style={{ fontWeight: "500", marginBottom: 0, fontSize: "13px", color: "#505A5F" }}>
|
|
124
|
+
{label}
|
|
125
|
+
</CardLabel>
|
|
126
|
+
<RadioButtons
|
|
127
|
+
options={options}
|
|
128
|
+
optionsKey="name"
|
|
129
|
+
selectedOption={selected}
|
|
130
|
+
onSelect={onSelect}
|
|
131
|
+
t={t}
|
|
132
|
+
innerStyles={{ display: "flex", gap: "20px" }}
|
|
133
|
+
style={{ marginBottom: 0 }}
|
|
134
|
+
/>
|
|
135
|
+
</div>
|
|
136
|
+
);
|
|
137
|
+
|
|
138
|
+
// ─── Main Component ───────────────────────────────────────────────────────────
|
|
139
|
+
|
|
52
140
|
const AadhaarVerification = () => {
|
|
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
|
-
|
|
141
|
+
const { t } = useTranslation();
|
|
142
|
+
const location = useLocation();
|
|
143
|
+
const history = useHistory();
|
|
144
|
+
const addressSectionRef = useRef(null);
|
|
145
|
+
const { kNumber, selectedOption, connectionDetails } = location.state || {
|
|
146
|
+
kNumber: "EKYC-1234567890",
|
|
147
|
+
selectedOption: { code: "SELF", name: "EKYC_SELF" },
|
|
148
|
+
connectionDetails: {
|
|
149
|
+
connectionDetailsInfo: {
|
|
150
|
+
consumerName: "Rajesh Kumar Singh",
|
|
151
|
+
address: "House No. 45, Sector 12, New Delhi - 110001",
|
|
152
|
+
phoneNumber: "9876543210",
|
|
153
|
+
email: "rajesh.singh@example.com",
|
|
154
|
+
},
|
|
155
|
+
},
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
// Normalize the nested data shape (API returns .connectionDetails, fallback uses .connectionDetailsInfo)
|
|
159
|
+
const details =
|
|
160
|
+
connectionDetails?.connectionDetails ||
|
|
161
|
+
connectionDetails?.connectionDetailsInfo ||
|
|
162
|
+
{};
|
|
163
|
+
|
|
164
|
+
// ── State ──
|
|
165
|
+
const [aadhaarLastFour, setAadhaarLastFour] = useState("");
|
|
166
|
+
const [isAadhaarVerified, setIsAadhaarVerified] = useState(false);
|
|
167
|
+
const [isVerifying, setIsVerifying] = useState(false);
|
|
168
|
+
const [nameCorrect, setNameCorrect] = useState({ code: "NO", name: "CORE_COMMON_NO" });
|
|
169
|
+
const [userName, setUserName] = useState(details.consumerName || "");
|
|
170
|
+
|
|
171
|
+
const [mobileChange, setMobileChange] = useState({ code: "NO", name: "CORE_COMMON_NO" });
|
|
172
|
+
const [mobileNumber, setMobileNumber] = useState(details.phoneNumber || "");
|
|
173
|
+
|
|
174
|
+
const [whatsappNumber, setWhatsappNumber] = useState(details.phoneNumber || "");
|
|
175
|
+
const [email, setEmail] = useState(details.email || "");
|
|
176
|
+
const [noOfPersons, setNoOfPersons] = useState(
|
|
177
|
+
connectionDetails?.addressDetails?.noOfPerson || ""
|
|
178
|
+
);
|
|
179
|
+
const [showAddressSection, setShowAddressSection] = useState(false);
|
|
180
|
+
const [addressData, setAddressData] = useState(null);
|
|
181
|
+
|
|
182
|
+
const yesNoOptions = [
|
|
183
|
+
{ code: "YES", name: "CORE_COMMON_YES" },
|
|
184
|
+
{ code: "NO", name: "CORE_COMMON_NO" },
|
|
185
|
+
];
|
|
186
|
+
|
|
187
|
+
// ── Handlers ──
|
|
188
|
+
const handleVerifyAadhaar = () => {
|
|
189
|
+
if (aadhaarLastFour.length !== 4 || isVerifying) return;
|
|
190
|
+
setIsVerifying(true);
|
|
191
|
+
setTimeout(() => {
|
|
192
|
+
setIsVerifying(false);
|
|
193
|
+
setIsAadhaarVerified(true);
|
|
194
|
+
// Auto-expand address section upon verification
|
|
195
|
+
setShowAddressSection(true);
|
|
196
|
+
setTimeout(() => {
|
|
197
|
+
addressSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
198
|
+
}, 100);
|
|
199
|
+
}, 1200);
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
const handleSaveAndContinue = () => {
|
|
203
|
+
setShowAddressSection(true);
|
|
204
|
+
setTimeout(() => {
|
|
205
|
+
addressSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
206
|
+
}, 100);
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
const handleCompleteAll = (addressDetails) => {
|
|
210
|
+
setAddressData(addressDetails);
|
|
211
|
+
history.push("/digit-ui/employee/ekyc/property-info", {
|
|
212
|
+
kNumber,
|
|
213
|
+
selectedOption,
|
|
214
|
+
connectionDetails,
|
|
215
|
+
aadhaarDetails: {
|
|
216
|
+
aadhaarLastFour,
|
|
217
|
+
isAadhaarVerified,
|
|
218
|
+
userName,
|
|
219
|
+
mobileNumber,
|
|
220
|
+
whatsappNumber,
|
|
221
|
+
email,
|
|
222
|
+
noOfPersons,
|
|
223
|
+
},
|
|
224
|
+
addressDetails,
|
|
225
|
+
});
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
// ── Styles ──
|
|
229
|
+
const styles = {
|
|
230
|
+
verifiedInput: {
|
|
231
|
+
borderColor: "#1D9E75",
|
|
232
|
+
backgroundColor: "#E1F5EE",
|
|
233
|
+
},
|
|
234
|
+
verifiedCard: {
|
|
235
|
+
backgroundColor: "#E1F5EE",
|
|
236
|
+
border: "0.5px solid #5DCAA5",
|
|
237
|
+
borderRadius: "8px",
|
|
238
|
+
padding: "16px",
|
|
239
|
+
marginTop: "14px",
|
|
240
|
+
marginBottom: "4px",
|
|
241
|
+
animation: "fadeSlideIn 0.35s ease",
|
|
242
|
+
},
|
|
243
|
+
infoLabel: {
|
|
244
|
+
fontSize: "11px",
|
|
245
|
+
fontWeight: "600",
|
|
246
|
+
color: "#1D9E75",
|
|
247
|
+
textTransform: "uppercase",
|
|
248
|
+
letterSpacing: "0.05em",
|
|
249
|
+
marginBottom: "3px",
|
|
250
|
+
},
|
|
251
|
+
infoValue: {
|
|
252
|
+
fontSize: "14px",
|
|
253
|
+
fontWeight: "500",
|
|
254
|
+
color: "#04342C",
|
|
255
|
+
},
|
|
256
|
+
twoCol: {
|
|
257
|
+
display: "grid",
|
|
258
|
+
gridTemplateColumns: "1fr 1fr",
|
|
259
|
+
gap: "14px",
|
|
260
|
+
marginBottom: "4px",
|
|
261
|
+
},
|
|
262
|
+
optionalTag: {
|
|
263
|
+
display: "inline-block",
|
|
264
|
+
fontSize: "10px",
|
|
265
|
+
background: "#F1EFE8",
|
|
266
|
+
color: "#5F5E5A",
|
|
267
|
+
border: "0.5px solid #D3D1C7",
|
|
268
|
+
borderRadius: "10px",
|
|
269
|
+
padding: "1px 7px",
|
|
270
|
+
marginLeft: "6px",
|
|
271
|
+
fontWeight: "400",
|
|
272
|
+
},
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
return (
|
|
276
|
+
<div className="inbox-container">
|
|
277
|
+
<style>{`
|
|
278
|
+
@keyframes fadeSlideIn {
|
|
279
|
+
from { opacity: 0; transform: translateY(6px); }
|
|
280
|
+
to { opacity: 1; transform: translateY(0); }
|
|
281
|
+
}
|
|
282
|
+
@keyframes pulseGreen {
|
|
283
|
+
0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0.35); }
|
|
284
|
+
50% { box-shadow: 0 0 0 6px rgba(29,158,117,0); }
|
|
90
285
|
}
|
|
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
|
-
|
|
286
|
+
.ekyc-sidebar-step { display: flex; gap: 10px; align-items: flex-start; position: relative; padding-bottom: 18px; }
|
|
287
|
+
.ekyc-sidebar-step:last-child { padding-bottom: 0; }
|
|
288
|
+
.ekyc-step-line { position: absolute; left: 10px; top: 22px; width: 1px; height: calc(100% - 10px); background: #EAECF0; }
|
|
289
|
+
.ekyc-step-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #D0D5DD; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; color: #98A2B3; background: #fff; flex-shrink: 0; margin-top: 1px; }
|
|
290
|
+
.ekyc-step-dot.active { border-color: #185FA5; color: #185FA5; background: #E6F1FB; }
|
|
291
|
+
.ekyc-step-dot.done { border-color: #0F6E56; background: #0F6E56; color: #fff; }
|
|
292
|
+
.ekyc-step-label { font-size: 12px; color: #667085; padding-top: 2px; }
|
|
293
|
+
.ekyc-step-label.active { color: #0B0C0C; font-weight: 600; }
|
|
294
|
+
.ekyc-step-label.done { color: #0F6E56; }
|
|
295
|
+
.ekyc-field-label { font-size: 11px; font-weight: 600; color: #667085; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
|
|
296
|
+
`}</style>
|
|
297
|
+
|
|
298
|
+
{/* ── Sidebar ── */}
|
|
299
|
+
<div className="filters-container">
|
|
300
|
+
<Card style={{ display: "flex", alignItems: "center", padding: "12px 16px", marginBottom: "12px", borderRadius: "8px" }}>
|
|
301
|
+
<div style={{ color: "#185FA5", marginRight: "10px", display: "flex" }}>
|
|
302
|
+
<HomeIcon style={{ width: "20px", height: "20px" }} />
|
|
303
|
+
</div>
|
|
304
|
+
<div style={{ fontWeight: "600", fontSize: "15px", color: "#0B0C0C" }}>
|
|
305
|
+
{t("EKYC_PROCESS") || "eKYC Process"}
|
|
306
|
+
</div>
|
|
307
|
+
</Card>
|
|
308
|
+
|
|
309
|
+
<div style={{ background: "#fff", padding: "16px 14px", borderRadius: "8px", border: "1px solid #EAECF0" }}>
|
|
310
|
+
{[
|
|
311
|
+
{ label: t("EKYC_STEP_AADHAAR") || "Aadhaar", done: showAddressSection, active: !showAddressSection },
|
|
312
|
+
{ label: t("EKYC_STEP_ADDRESS") || "Address", done: addressData !== null, active: showAddressSection && addressData === null },
|
|
313
|
+
{ label: t("EKYC_STEP_PROPERTY") || "Property", done: false, active: false },
|
|
314
|
+
{ label: t("EKYC_STEP_REVIEW") || "Review", done: false, active: false },
|
|
315
|
+
].map((step, i) => (
|
|
316
|
+
<div className="ekyc-sidebar-step" key={i}>
|
|
317
|
+
<div className={`ekyc-step-dot${step.done ? " done" : step.active ? " active" : ""}`}>
|
|
318
|
+
{step.done
|
|
319
|
+
? <CheckIcon size={11} color="#fff" />
|
|
320
|
+
: i + 1}
|
|
321
|
+
</div>
|
|
322
|
+
{i < 3 && <div className="ekyc-step-line" />}
|
|
323
|
+
<div className={`ekyc-step-label${step.done ? " done" : step.active ? " active" : ""}`}>
|
|
324
|
+
{step.label}
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
))}
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
|
|
331
|
+
{/* ── Main content ── */}
|
|
332
|
+
<div style={{ flex: 1, marginLeft: "16px" }}>
|
|
333
|
+
<Card>
|
|
334
|
+
|
|
335
|
+
{/* K-Number badge */}
|
|
336
|
+
<div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "20px" }}>
|
|
337
|
+
<div style={{
|
|
338
|
+
background: "#F9FAFB", border: "0.5px solid #EAECF0",
|
|
339
|
+
borderRadius: "20px", padding: "4px 14px",
|
|
340
|
+
fontSize: "12px", color: "#667085",
|
|
341
|
+
}}>
|
|
342
|
+
{t("EKYC_K_NUMBER") || "K Number"}:{" "}
|
|
343
|
+
<span style={{ color: "#0B0C0C", fontWeight: "600" }}>{kNumber}</span>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
|
|
347
|
+
{/* ── Section 1: Aadhaar ── */}
|
|
348
|
+
<SectionHead
|
|
349
|
+
icon={<LockIcon size={16} />}
|
|
350
|
+
label={t("EKYC_AADHAAR_NUMBER_HEADER") || "Aadhaar Number"}
|
|
351
|
+
/>
|
|
352
|
+
|
|
353
|
+
<div className="ekyc-field-label">
|
|
354
|
+
{t("EKYC_LAST_4_DIGIT_AADHAAR") || "Enter 12 digits of Aadhaar"}
|
|
355
|
+
</div>
|
|
356
|
+
<LabelFieldPair>
|
|
357
|
+
<div className="field">
|
|
358
|
+
<IconInput
|
|
359
|
+
icon={<LockIcon size={15} />}
|
|
360
|
+
rightIcon={isAadhaarVerified ? <CheckIcon size={15} /> : null}
|
|
361
|
+
value={aadhaarLastFour}
|
|
362
|
+
onChange={(e) => {
|
|
363
|
+
const val = e.target.value;
|
|
364
|
+
if (val.length <= 12 && /^\d*$/.test(val)) setAadhaarLastFour(val);
|
|
365
|
+
}}
|
|
366
|
+
placeholder={t("EKYC_ENTER_LAST_4_DIGIT") || "Enter 12 digits"}
|
|
367
|
+
maxLength={4}
|
|
368
|
+
disabled={isAadhaarVerified}
|
|
369
|
+
inputStyle={isAadhaarVerified ? styles.verifiedInput : {}}
|
|
370
|
+
/>
|
|
371
|
+
</div>
|
|
372
|
+
</LabelFieldPair>
|
|
373
|
+
|
|
374
|
+
{!isAadhaarVerified && (
|
|
375
|
+
<SubmitBar
|
|
376
|
+
label={isVerifying
|
|
377
|
+
? t("EKYC_VERIFYING") || "Verifying..."
|
|
378
|
+
: t("EKYC_VERIFY_AADHAAR_BTN") || "Verify Aadhaar"}
|
|
379
|
+
onSubmit={handleVerifyAadhaar}
|
|
380
|
+
disabled={aadhaarLastFour.length !== 4 || isVerifying}
|
|
381
|
+
style={{ marginTop: "12px" }}
|
|
382
|
+
/>
|
|
383
|
+
)}
|
|
384
|
+
|
|
385
|
+
{isAadhaarVerified && (
|
|
386
|
+
<div style={styles.verifiedCard}>
|
|
387
|
+
<div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "14px" }}>
|
|
388
|
+
<div style={{
|
|
389
|
+
width: "24px", height: "24px", borderRadius: "50%",
|
|
390
|
+
background: "#9FE1CB", display: "flex", alignItems: "center",
|
|
391
|
+
justifyContent: "center", animation: "pulseGreen 2s ease infinite",
|
|
392
|
+
flexShrink: 0,
|
|
393
|
+
}}>
|
|
394
|
+
<CheckIcon size={13} color="#085041" />
|
|
395
|
+
</div>
|
|
396
|
+
<span style={{ fontWeight: "600", color: "#085041", fontSize: "14px" }}>
|
|
397
|
+
{t("EKYC_AADHAAR_VERIFIED_SUCCESS") || "Aadhaar Verified Successfully"}
|
|
398
|
+
</span>
|
|
399
|
+
</div>
|
|
400
|
+
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
|
|
401
|
+
<div>
|
|
402
|
+
<div style={styles.infoLabel}>{t("EKYC_NAME") || "Name"}</div>
|
|
403
|
+
<div style={styles.infoValue}>{details.consumerName}</div>
|
|
404
|
+
</div>
|
|
405
|
+
<div>
|
|
406
|
+
<div style={styles.infoLabel}>{t("EKYC_AADHAAR") || "Aadhaar"}</div>
|
|
407
|
+
<div style={styles.infoValue}>XXXX XXXX {aadhaarLastFour}</div>
|
|
138
408
|
</div>
|
|
409
|
+
<div style={{ gridColumn: "span 2" }}>
|
|
410
|
+
<div style={styles.infoLabel}>{t("EKYC_ADDRESS") || "Address"}</div>
|
|
411
|
+
<div style={{ ...styles.infoValue, fontSize: "13px" }}>{details.address}</div>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
139
414
|
</div>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
maxLength={4}
|
|
168
|
-
/>
|
|
169
|
-
{isAadhaarVerified && (
|
|
170
|
-
<div style={{ position: "absolute", right: "12px", top: "50%", transform: "translateY(-50%)" }}>
|
|
171
|
-
<TickMark fillColor="#00703C" />
|
|
172
|
-
</div>
|
|
173
|
-
)}
|
|
174
|
-
</div>
|
|
175
|
-
</LabelFieldPair>
|
|
176
|
-
|
|
177
|
-
{!isAadhaarVerified && (
|
|
178
|
-
<SubmitBar
|
|
179
|
-
label={isVerifying ? t("EKYC_VERIFYING") || "Verifying..." : t("EKYC_VERIFY_AADHAAR_BTN") || "Verify Aadhaar"}
|
|
180
|
-
onSubmit={handleVerifyAadhaar}
|
|
181
|
-
disabled={aadhaarLastFour.length !== 4 || isVerifying}
|
|
182
|
-
style={{ marginTop: "16px", opacity: aadhaarLastFour.length !== 4 ? 0.6 : 1 }}
|
|
183
|
-
/>
|
|
184
|
-
)}
|
|
185
|
-
|
|
186
|
-
{isAadhaarVerified && (
|
|
187
|
-
<div style={{ backgroundColor: "#E7F4EE", padding: "20px", borderRadius: "8px", marginTop: "24px", marginBottom: "24px", border: "1px solid #D1E9DB", animation: "fadeSlideIn 0.4s ease" }}>
|
|
188
|
-
<div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "16px" }}>
|
|
189
|
-
<div style={{ backgroundColor: "#D1E9DB", padding: "4px", borderRadius: "50%", display: "flex", animation: "pulseGreen 2s ease infinite" }}>
|
|
190
|
-
<TickMark fillColor="#00703C" />
|
|
191
|
-
</div>
|
|
192
|
-
<span style={{ fontWeight: "700", color: "#00703C", fontSize: "18px" }}>{t("EKYC_AADHAAR_VERIFIED_SUCCESS") || "Aadhaar Verified Successfully"}</span>
|
|
193
|
-
</div>
|
|
194
|
-
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
|
|
195
|
-
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
196
|
-
<span style={{ color: "#667085", fontSize: "12px", fontWeight: "700", textTransform: "uppercase" }}>{t("EKYC_NAME")}</span>
|
|
197
|
-
<span style={{ fontWeight: "700", fontSize: "16px", color: "#101828" }}>Rajesh Kumar Singh</span>
|
|
198
|
-
</div>
|
|
199
|
-
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
200
|
-
<span style={{ color: "#667085", fontSize: "12px", fontWeight: "700", textTransform: "uppercase" }}>{t("EKYC_AADHAAR")}</span>
|
|
201
|
-
<span style={{ fontWeight: "700", fontSize: "16px", color: "#101828" }}>XXXX XXXX {aadhaarLastFour}</span>
|
|
202
|
-
</div>
|
|
203
|
-
<div style={{ display: "flex", flexDirection: "column", gridColumn: "span 2" }}>
|
|
204
|
-
<span style={{ color: "#667085", fontSize: "12px", fontWeight: "700", textTransform: "uppercase" }}>{t("EKYC_ADDRESS")}</span>
|
|
205
|
-
<span style={{ fontWeight: "500", fontSize: "15px", color: "#344054" }}>House No. 45, Sector 12, New Delhi - 110001</span>
|
|
206
|
-
</div>
|
|
207
|
-
</div>
|
|
208
|
-
</div>
|
|
209
|
-
)}
|
|
210
|
-
|
|
211
|
-
<hr style={{ margin: "32px 0", border: "0", borderTop: "1px solid #EAECF0" }} />
|
|
212
|
-
|
|
213
|
-
{/* Section 2: Contact Details */}
|
|
214
|
-
<CardHeader style={{ fontSize: "20px", marginBottom: "16px" }}>{t("EKYC_CONTACT_DETAILS_HEADER") || "Contact Details"}</CardHeader>
|
|
215
|
-
<LabelFieldPair style={{ animation: "fadeSlideIn 0.3s ease" }}>
|
|
216
|
-
<div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
|
|
217
|
-
<CardLabel style={{ fontWeight: "600", marginBottom: "0" }}>
|
|
218
|
-
{t("EKYC_USER_NAME") || "Corrected Name"}
|
|
219
|
-
</CardLabel>
|
|
220
|
-
|
|
221
|
-
<RadioButtons
|
|
222
|
-
options={yesNoOptions}
|
|
223
|
-
optionsKey="name"
|
|
224
|
-
selectedOption={nameCorrect}
|
|
225
|
-
onSelect={setNameCorrect}
|
|
226
|
-
t={t}
|
|
227
|
-
innerStyles={{ display: "flex", gap: "24px" }}
|
|
228
|
-
style={{ display: "flex", gap: "50px", marginBottom: "0" }}
|
|
229
|
-
/>
|
|
230
|
-
</div>
|
|
231
|
-
<div className="field" style={{ position: "relative" }}>
|
|
232
|
-
<div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: nameCorrect.code === "YES" ? 0.6 : 0.3 }}>
|
|
233
|
-
<UserIcon size={18} color={nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"} />
|
|
234
|
-
</div>
|
|
235
|
-
<TextInput
|
|
236
|
-
value={userName}
|
|
237
|
-
onChange={(e) => setUserName(e.target.value)}
|
|
238
|
-
placeholder={t("EKYC_ENTER_NAME_PLACEHOLDER") || "Enter full name"}
|
|
239
|
-
textInputStyle={{ paddingLeft: "40px" }}
|
|
240
|
-
disabled={nameCorrect.code !== "YES"}
|
|
241
|
-
/>
|
|
242
|
-
</div>
|
|
243
|
-
</LabelFieldPair>
|
|
244
|
-
|
|
245
|
-
<LabelFieldPair>
|
|
246
|
-
<div style={{ display: "flex", alignItems: "center", gap: "20px", padding: "10px" }}>
|
|
247
|
-
<CardLabel style={{ fontWeight: "600", marginBottom: "0" }}>
|
|
248
|
-
{t("EKYC_USER_MOBILE_NUMBER") || "User Mobile Number"}
|
|
249
|
-
</CardLabel>
|
|
250
|
-
|
|
251
|
-
<RadioButtons
|
|
252
|
-
options={yesNoOptions}
|
|
253
|
-
optionsKey="name"
|
|
254
|
-
selectedOption={mobileChange}
|
|
255
|
-
onSelect={setMobileChange}
|
|
256
|
-
t={t}
|
|
257
|
-
innerStyles={{ display: "flex", gap: "24px" }}
|
|
258
|
-
style={{ display: "flex", gap: "50px", marginBottom: "0" }}
|
|
259
|
-
/>
|
|
260
|
-
</div>
|
|
261
|
-
<div className="field" style={{ position: "relative" }}>
|
|
262
|
-
<div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: mobileChange.code === "YES" ? 0.6 : 0.3 }}>
|
|
263
|
-
<PhoneIcon size={18} color={mobileChange.code === "YES" ? "#64748b" : "#94a3b8"} />
|
|
264
|
-
</div>
|
|
265
|
-
<TextInput
|
|
266
|
-
value={mobileNumber}
|
|
267
|
-
onChange={(e) => setMobileNumber(e.target.value)}
|
|
268
|
-
placeholder="+91 XXXXX XXXXX"
|
|
269
|
-
textInputStyle={{ paddingLeft: "40px" }}
|
|
270
|
-
disabled={mobileChange.code !== "YES"}
|
|
271
|
-
/>
|
|
272
|
-
</div>
|
|
273
|
-
</LabelFieldPair>
|
|
274
|
-
|
|
275
|
-
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginTop: "24px" }}>
|
|
276
|
-
<LabelFieldPair>
|
|
277
|
-
<CardLabel style={{ fontWeight: "600" }}>{t("EKYC_WHATSAPP_NUMBER") || "WhatsApp Number"}</CardLabel>
|
|
278
|
-
<div className="field" style={{ position: "relative" }}>
|
|
279
|
-
<div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
|
|
280
|
-
<WhatsappIcon size={18} />
|
|
281
|
-
</div>
|
|
282
|
-
<TextInput
|
|
283
|
-
value={whatsappNumber}
|
|
284
|
-
onChange={(e) => setWhatsappNumber(e.target.value)}
|
|
285
|
-
placeholder="+91 XXXXX XXXXX"
|
|
286
|
-
textInputStyle={{ paddingLeft: "40px" }}
|
|
287
|
-
/>
|
|
288
|
-
</div>
|
|
289
|
-
</LabelFieldPair>
|
|
290
|
-
<LabelFieldPair>
|
|
291
|
-
<CardLabel style={{ fontWeight: "600" }}>{t("EKYC_EMAIL_ADDRESS") || "Email Address"} <span style={{ fontWeight: "400", color: "#667085" }}>({t("EKYC_OPTIONAL") || "Optional"})</span></CardLabel>
|
|
292
|
-
<div className="field" style={{ position: "relative" }}>
|
|
293
|
-
<div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
|
|
294
|
-
<MailIcon size={18} />
|
|
295
|
-
</div>
|
|
296
|
-
<TextInput
|
|
297
|
-
value={email}
|
|
298
|
-
onChange={(e) => setEmail(e.target.value)}
|
|
299
|
-
placeholder={t("EKYC_EMAIL_ADDRESS_PLACEHOLDER") || "example@email.com"}
|
|
300
|
-
textInputStyle={{ paddingLeft: "40px" }}
|
|
301
|
-
/>
|
|
302
|
-
</div>
|
|
303
|
-
</LabelFieldPair>
|
|
304
|
-
</div>
|
|
305
|
-
|
|
306
|
-
<hr style={{ margin: "32px 0", border: "0", borderTop: "1px solid #EAECF0" }} />
|
|
307
|
-
|
|
308
|
-
{/* Section 3: Family Details */}
|
|
309
|
-
<CardHeader style={{ fontSize: "20px", marginBottom: "16px" }}>{t("EKYC_FAMILY_DETAILS_HEADER") || "Family Details"}</CardHeader>
|
|
310
|
-
|
|
311
|
-
<LabelFieldPair>
|
|
312
|
-
<CardLabel style={{ fontWeight: "600" }}>{t("EKYC_NO_OF_PERSONS") || "Number of Family Members"}</CardLabel>
|
|
313
|
-
<div className="field" style={{ position: "relative" }}>
|
|
314
|
-
<div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
|
|
315
|
-
<UsersIcon size={18} />
|
|
316
|
-
</div>
|
|
317
|
-
<TextInput
|
|
318
|
-
value={noOfPersons}
|
|
319
|
-
onChange={(e) => { if (/^\d*$/.test(e.target.value)) setNoOfPersons(e.target.value); }}
|
|
320
|
-
placeholder={t("EKYC_ENTER_NO_OF_PERSONS") || "Enter total number of persons"}
|
|
321
|
-
textInputStyle={{ paddingLeft: "40px" }}
|
|
322
|
-
/>
|
|
323
|
-
</div>
|
|
324
|
-
</LabelFieldPair>
|
|
325
|
-
|
|
326
|
-
{!showAddressSection && (
|
|
327
|
-
<ActionBar>
|
|
328
|
-
<SubmitBar label={t("ES_COMMON_SAVE_CONTINUE") || "Save & Continue"} onSubmit={handleSaveAndContinueAadhaar} />
|
|
329
|
-
</ActionBar>
|
|
330
|
-
)}
|
|
331
|
-
|
|
332
|
-
{showAddressSection && (
|
|
333
|
-
<div ref={addressSectionRef}>
|
|
334
|
-
<AddressDetails
|
|
335
|
-
isSection={true}
|
|
336
|
-
onComplete={handleCompleteAll}
|
|
337
|
-
parentState={{ kNumber, selectedOption, connectionDetails }}
|
|
338
|
-
/>
|
|
339
|
-
</div>
|
|
340
|
-
)}
|
|
341
|
-
|
|
342
|
-
<div style={{ textAlign: "center", marginTop: "24px" }}>
|
|
343
|
-
<p style={{ fontSize: "12px", color: "#667085", display: "flex", alignItems: "center", justifyContent: "center", gap: "4px" }}>
|
|
344
|
-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
345
|
-
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
|
|
346
|
-
<path d="M12 11V17M12 7H12.01" strokeLinecap="round" />
|
|
347
|
-
</svg>
|
|
348
|
-
{t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"}
|
|
349
|
-
</p>
|
|
350
|
-
</div>
|
|
351
|
-
</Card>
|
|
415
|
+
)}
|
|
416
|
+
|
|
417
|
+
<hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
|
|
418
|
+
|
|
419
|
+
{/* ── Section 2: Contact Details ── */}
|
|
420
|
+
<SectionHead
|
|
421
|
+
icon={<UserIcon size={16} />}
|
|
422
|
+
label={t("EKYC_CONTACT_DETAILS_HEADER") || "Contact Details"}
|
|
423
|
+
/>
|
|
424
|
+
|
|
425
|
+
{/* Name */}
|
|
426
|
+
<RadioToggleRow
|
|
427
|
+
label={`${t("EKYC_USER_NAME")} (${t("EKYC_NAME_CORRECT_HINT")})`}
|
|
428
|
+
selected={nameCorrect}
|
|
429
|
+
onSelect={setNameCorrect}
|
|
430
|
+
options={yesNoOptions}
|
|
431
|
+
t={t}
|
|
432
|
+
/>
|
|
433
|
+
<LabelFieldPair>
|
|
434
|
+
<div className="field">
|
|
435
|
+
<IconInput
|
|
436
|
+
icon={<UserIcon size={15} color={nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"} />}
|
|
437
|
+
value={userName}
|
|
438
|
+
onChange={(e) => setUserName(e.target.value)}
|
|
439
|
+
placeholder={t("EKYC_ENTER_NAME_PLACEHOLDER") || "Enter full name"}
|
|
440
|
+
disabled={nameCorrect.code !== "YES"}
|
|
441
|
+
/>
|
|
352
442
|
</div>
|
|
353
|
-
|
|
354
|
-
|
|
443
|
+
</LabelFieldPair>
|
|
444
|
+
|
|
445
|
+
{/* Mobile */}
|
|
446
|
+
<RadioToggleRow
|
|
447
|
+
label={`${t("EKYC_USER_MOBILE_NUMBER")} (${t("EKYC_UPDATE_MOBILE_HINT")})`}
|
|
448
|
+
selected={mobileChange}
|
|
449
|
+
onSelect={setMobileChange}
|
|
450
|
+
options={yesNoOptions}
|
|
451
|
+
t={t}
|
|
452
|
+
/>
|
|
453
|
+
<LabelFieldPair>
|
|
454
|
+
<div className="field">
|
|
455
|
+
<IconInput
|
|
456
|
+
icon={<PhoneIcon size={15} color={mobileChange.code === "YES" ? "#64748b" : "#94a3b8"} />}
|
|
457
|
+
value={mobileNumber}
|
|
458
|
+
onChange={(e) => setMobileNumber(e.target.value)}
|
|
459
|
+
placeholder="+91 XXXXX XXXXX"
|
|
460
|
+
disabled={mobileChange.code !== "YES"}
|
|
461
|
+
/>
|
|
462
|
+
</div>
|
|
463
|
+
</LabelFieldPair>
|
|
464
|
+
|
|
465
|
+
{/* WhatsApp + Email */}
|
|
466
|
+
<div style={styles.twoCol}>
|
|
467
|
+
<div>
|
|
468
|
+
<div className="ekyc-field-label">
|
|
469
|
+
{t("EKYC_WHATSAPP_NUMBER") || "WhatsApp Number"}
|
|
470
|
+
</div>
|
|
471
|
+
<IconInput
|
|
472
|
+
icon={<WhatsappIcon size={15} />}
|
|
473
|
+
value={whatsappNumber}
|
|
474
|
+
onChange={(e) => setWhatsappNumber(e.target.value)}
|
|
475
|
+
placeholder="+91 XXXXX XXXXX"
|
|
476
|
+
/>
|
|
477
|
+
</div>
|
|
478
|
+
<div>
|
|
479
|
+
<div className="ekyc-field-label">
|
|
480
|
+
{t("EKYC_EMAIL_ADDRESS") || "Email Address"}
|
|
481
|
+
<span style={styles.optionalTag}>{t("EKYC_OPTIONAL") || "Optional"}</span>
|
|
482
|
+
</div>
|
|
483
|
+
<IconInput
|
|
484
|
+
icon={<MailIcon size={15} />}
|
|
485
|
+
value={email}
|
|
486
|
+
onChange={(e) => setEmail(e.target.value)}
|
|
487
|
+
placeholder={t("EKYC_EMAIL_ADDRESS_PLACEHOLDER") || "example@email.com"}
|
|
488
|
+
/>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
|
|
492
|
+
<hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
|
|
493
|
+
|
|
494
|
+
{/* ── Section 3: Family Details ── */}
|
|
495
|
+
<SectionHead
|
|
496
|
+
icon={<UsersIcon size={16} />}
|
|
497
|
+
label={t("EKYC_FAMILY_DETAILS_HEADER") || "Family Details"}
|
|
498
|
+
/>
|
|
499
|
+
|
|
500
|
+
<div className="ekyc-field-label">
|
|
501
|
+
{t("EKYC_NO_OF_PERSONS") || "Number of Family Members"}
|
|
502
|
+
</div>
|
|
503
|
+
<LabelFieldPair>
|
|
504
|
+
<div className="field">
|
|
505
|
+
<IconInput
|
|
506
|
+
icon={<UsersIcon size={15} />}
|
|
507
|
+
value={noOfPersons}
|
|
508
|
+
onChange={(e) => {
|
|
509
|
+
if (/^\d*$/.test(e.target.value)) setNoOfPersons(e.target.value);
|
|
510
|
+
}}
|
|
511
|
+
placeholder={t("EKYC_ENTER_NO_OF_PERSONS") || "Enter total number of persons"}
|
|
512
|
+
/>
|
|
513
|
+
</div>
|
|
514
|
+
</LabelFieldPair>
|
|
515
|
+
|
|
516
|
+
{/* Save & Continue (Non-sticky, at form end) */}
|
|
517
|
+
{!showAddressSection && (
|
|
518
|
+
<div style={{ marginTop: "24px" }}>
|
|
519
|
+
<SubmitBar
|
|
520
|
+
label={t("ES_COMMON_SAVE_CONTINUE") || "Save & Continue"}
|
|
521
|
+
onSubmit={handleSaveAndContinue}
|
|
522
|
+
/>
|
|
523
|
+
</div>
|
|
524
|
+
)}
|
|
525
|
+
|
|
526
|
+
{/* Address section (injected inline) */}
|
|
527
|
+
{showAddressSection && (
|
|
528
|
+
<div ref={addressSectionRef}>
|
|
529
|
+
<AddressDetails
|
|
530
|
+
isSection={true}
|
|
531
|
+
onComplete={handleCompleteAll}
|
|
532
|
+
parentState={{ kNumber, selectedOption, connectionDetails }}
|
|
533
|
+
/>
|
|
534
|
+
</div>
|
|
535
|
+
)}
|
|
536
|
+
|
|
537
|
+
{/* Secure notice */}
|
|
538
|
+
<div style={{
|
|
539
|
+
display: "flex", alignItems: "center", justifyContent: "center",
|
|
540
|
+
gap: "5px", marginTop: "20px",
|
|
541
|
+
fontSize: "11px", color: "#98A2B3",
|
|
542
|
+
}}>
|
|
543
|
+
<LockIcon size={11} />
|
|
544
|
+
{t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"}
|
|
545
|
+
</div>
|
|
546
|
+
|
|
547
|
+
</Card>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
);
|
|
355
551
|
};
|
|
356
552
|
|
|
357
553
|
export default AadhaarVerification;
|