@djb25/digit-ui-module-ekyc 1.0.3 → 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 +2090 -1475
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ConnectionDetailsView.js +8 -8
- package/src/pages/employee/AadhaarVerification.js +363 -250
- package/src/pages/employee/AddressDetails.js +447 -378
- package/src/pages/employee/Create.js +5 -19
- package/src/pages/employee/PropertyInfo.js +409 -316
- package/src/pages/employee/Review.js +290 -89
|
@@ -1,29 +1,139 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { Fragment } from "react";
|
|
2
2
|
import {
|
|
3
|
-
Header,
|
|
4
3
|
Card,
|
|
5
4
|
CardHeader,
|
|
6
|
-
StatusTable,
|
|
7
|
-
Row,
|
|
8
5
|
SubmitBar,
|
|
9
6
|
HomeIcon,
|
|
10
|
-
ConnectingCheckPoints,
|
|
11
|
-
CheckPoint,
|
|
12
7
|
ActionBar,
|
|
13
8
|
} from "@djb25/digit-ui-react-components";
|
|
14
9
|
import { useTranslation } from "react-i18next";
|
|
15
10
|
import { useHistory, useLocation } from "react-router-dom";
|
|
16
11
|
|
|
12
|
+
// ─── Icons ────────────────────────────────────────────────────────────────────
|
|
13
|
+
|
|
14
|
+
const CheckIcon = ({ size = 11, color = "#fff" }) => (
|
|
15
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round">
|
|
16
|
+
<polyline points="20 6 9 17 4 12" />
|
|
17
|
+
</svg>
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
const PersonIcon = ({ size = 16 }) => (
|
|
21
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
22
|
+
<path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" />
|
|
23
|
+
</svg>
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
const LocationIcon2 = ({ size = 16 }) => (
|
|
27
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
28
|
+
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
|
|
29
|
+
</svg>
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
const BuildingIcon = ({ size = 16 }) => (
|
|
33
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
|
|
34
|
+
<path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8V9h8v10zm-2-8h-4v2h4v-2zm0 4h-4v2h4v-2z" />
|
|
35
|
+
</svg>
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
const EditIcon = ({ size = 14 }) => (
|
|
39
|
+
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
40
|
+
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
|
41
|
+
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
|
42
|
+
</svg>
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
// ─── Reusable: Section heading with inline rule ───────────────────────────────
|
|
46
|
+
|
|
47
|
+
const SectionHead = ({ icon, label }) => (
|
|
48
|
+
<div style={{
|
|
49
|
+
display: "flex", alignItems: "center", gap: "8px",
|
|
50
|
+
marginBottom: "16px", marginTop: "4px",
|
|
51
|
+
}}>
|
|
52
|
+
<div style={{ opacity: 0.5, display: "flex" }}>{icon}</div>
|
|
53
|
+
<span style={{ fontSize: "15px", fontWeight: "600", color: "#0B0C0C", whiteSpace: "nowrap" }}>
|
|
54
|
+
{label}
|
|
55
|
+
</span>
|
|
56
|
+
<div style={{ flex: 1, height: "1px", background: "#EAECF0" }} />
|
|
57
|
+
</div>
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
// ─── Reusable: Review section card ───────────────────────────────────────────
|
|
61
|
+
|
|
62
|
+
const ReviewCard = ({ icon, title, onEdit, editLabel, rows }) => (
|
|
63
|
+
<div style={{
|
|
64
|
+
border: "0.5px solid #EAECF0",
|
|
65
|
+
borderRadius: "10px",
|
|
66
|
+
overflow: "hidden",
|
|
67
|
+
marginBottom: "16px",
|
|
68
|
+
animation: "fadeSlideIn 0.3s ease",
|
|
69
|
+
}}>
|
|
70
|
+
{/* Card header */}
|
|
71
|
+
<div style={{
|
|
72
|
+
display: "flex", justifyContent: "space-between", alignItems: "center",
|
|
73
|
+
padding: "14px 16px",
|
|
74
|
+
background: "#F9FAFB",
|
|
75
|
+
borderBottom: "0.5px solid #EAECF0",
|
|
76
|
+
}}>
|
|
77
|
+
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
|
78
|
+
<div style={{ opacity: 0.5, display: "flex" }}>{icon}</div>
|
|
79
|
+
<span style={{ fontSize: "14px", fontWeight: "600", color: "#0B0C0C" }}>{title}</span>
|
|
80
|
+
</div>
|
|
81
|
+
<button
|
|
82
|
+
onClick={onEdit}
|
|
83
|
+
style={{
|
|
84
|
+
display: "flex", alignItems: "center", gap: "5px",
|
|
85
|
+
background: "none", border: "0.5px solid #D0D5DD",
|
|
86
|
+
borderRadius: "6px", padding: "5px 12px",
|
|
87
|
+
fontSize: "12px", fontWeight: "600", color: "#185FA5",
|
|
88
|
+
cursor: "pointer",
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
<EditIcon size={12} />
|
|
92
|
+
{editLabel}
|
|
93
|
+
</button>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
{/* Rows */}
|
|
97
|
+
<div style={{ padding: "4px 0" }}>
|
|
98
|
+
{rows.map((row, i) => (
|
|
99
|
+
row.value ? (
|
|
100
|
+
<div key={i} style={{
|
|
101
|
+
display: "flex", alignItems: "flex-start",
|
|
102
|
+
padding: "10px 16px",
|
|
103
|
+
borderBottom: i < rows.length - 1 ? "0.5px solid #F2F4F7" : "none",
|
|
104
|
+
}}>
|
|
105
|
+
<div style={{
|
|
106
|
+
flex: "0 0 180px", fontSize: "12px", fontWeight: "600",
|
|
107
|
+
color: "#667085", textTransform: "uppercase",
|
|
108
|
+
letterSpacing: "0.04em", paddingTop: "1px",
|
|
109
|
+
}}>
|
|
110
|
+
{row.label}
|
|
111
|
+
</div>
|
|
112
|
+
<div style={{ flex: 1, fontSize: "14px", color: "#101828", fontWeight: "500", wordBreak: "break-word" }}>
|
|
113
|
+
{row.value}
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
) : null
|
|
117
|
+
))}
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
// ─── Main Component ───────────────────────────────────────────────────────────
|
|
123
|
+
|
|
17
124
|
const Review = () => {
|
|
18
125
|
const { t } = useTranslation();
|
|
19
126
|
const history = useHistory();
|
|
20
127
|
const location = useLocation();
|
|
21
128
|
|
|
22
|
-
|
|
23
|
-
|
|
129
|
+
const {
|
|
130
|
+
kNumber = "EKYC-1234567890",
|
|
131
|
+
aadhaarDetails = {},
|
|
132
|
+
addressDetails = {},
|
|
133
|
+
propertyDetails = {},
|
|
134
|
+
} = location.state || {};
|
|
24
135
|
|
|
25
136
|
const handleSubmit = () => {
|
|
26
|
-
// Here to mimic final submit and go to dashboard/inbox
|
|
27
137
|
history.push("/digit-ui/employee/ekyc/dashboard");
|
|
28
138
|
};
|
|
29
139
|
|
|
@@ -41,103 +151,194 @@ const Review = () => {
|
|
|
41
151
|
|
|
42
152
|
return (
|
|
43
153
|
<div className="inbox-container">
|
|
154
|
+
<style>{`
|
|
155
|
+
@keyframes fadeSlideIn {
|
|
156
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
157
|
+
to { opacity: 1; transform: translateY(0); }
|
|
158
|
+
}
|
|
159
|
+
`}</style>
|
|
160
|
+
|
|
161
|
+
{/* ── Sidebar ── */}
|
|
44
162
|
<div className="filters-container">
|
|
45
|
-
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<HomeIcon style={{ width: "24px", height: "24px" }} />
|
|
163
|
+
<Card style={{ display: "flex", alignItems: "center", padding: "12px 16px", marginBottom: "12px", borderRadius: "8px" }}>
|
|
164
|
+
<div style={{ color: "#185FA5", marginRight: "10px", display: "flex" }}>
|
|
165
|
+
<HomeIcon style={{ width: "20px", height: "20px" }} />
|
|
166
|
+
</div>
|
|
167
|
+
<div style={{ fontWeight: "600", fontSize: "15px", color: "#0B0C0C" }}>
|
|
168
|
+
{t("EKYC_PROCESS") || "eKYC Process"}
|
|
52
169
|
</div>
|
|
53
|
-
<div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROCESS")}</div>
|
|
54
170
|
</Card>
|
|
55
171
|
|
|
56
|
-
{
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
172
|
+
<div style={{ background: "#fff", padding: "16px 14px", borderRadius: "8px", border: "1px solid #EAECF0" }}>
|
|
173
|
+
{[
|
|
174
|
+
{ label: t("EKYC_STEP_AADHAAR") || "Aadhaar", done: true, active: false },
|
|
175
|
+
{ label: t("EKYC_STEP_ADDRESS") || "Address", done: true, active: false },
|
|
176
|
+
{ label: t("EKYC_STEP_PROPERTY") || "Property", done: true, active: false },
|
|
177
|
+
{ label: t("EKYC_STEP_REVIEW") || "Review", done: false, active: true },
|
|
178
|
+
].map((step, i) => (
|
|
179
|
+
<div key={i} style={{
|
|
180
|
+
display: "flex", gap: "10px", alignItems: "flex-start",
|
|
181
|
+
position: "relative", paddingBottom: i < 3 ? "18px" : 0,
|
|
182
|
+
}}>
|
|
183
|
+
{i < 3 && (
|
|
184
|
+
<div style={{
|
|
185
|
+
position: "absolute", left: "10px", top: "22px",
|
|
186
|
+
width: "1px", height: "calc(100% - 10px)", background: "#EAECF0",
|
|
187
|
+
}} />
|
|
188
|
+
)}
|
|
189
|
+
<div style={{
|
|
190
|
+
width: "20px", height: "20px", borderRadius: "50%", flexShrink: 0, marginTop: "1px",
|
|
191
|
+
border: step.done ? "none" : step.active ? "1.5px solid #185FA5" : "1.5px solid #D0D5DD",
|
|
192
|
+
background: step.done ? "#0F6E56" : step.active ? "#E6F1FB" : "#fff",
|
|
193
|
+
display: "flex", alignItems: "center", justifyContent: "center",
|
|
194
|
+
fontSize: "10px", fontWeight: "500",
|
|
195
|
+
color: step.done ? "#fff" : step.active ? "#185FA5" : "#98A2B3",
|
|
196
|
+
}}>
|
|
197
|
+
{step.done ? <CheckIcon size={11} color="#fff" /> : i + 1}
|
|
198
|
+
</div>
|
|
199
|
+
<div style={{
|
|
200
|
+
fontSize: "12px", paddingTop: "2px",
|
|
201
|
+
color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
|
|
202
|
+
fontWeight: step.done || step.active ? "600" : "400",
|
|
203
|
+
}}>
|
|
204
|
+
{step.label}
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
))}
|
|
72
208
|
</div>
|
|
73
209
|
</div>
|
|
74
210
|
|
|
211
|
+
{/* ── Main Content ── */}
|
|
75
212
|
<div style={{ flex: 1, marginLeft: "16px" }}>
|
|
76
213
|
<Card>
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
214
|
+
|
|
215
|
+
{/* Page header */}
|
|
216
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
|
|
217
|
+
<CardHeader style={{ margin: 0, fontSize: "18px" }}>
|
|
218
|
+
{t("EKYC_REVIEW_DETAILS") || "Review Details"}
|
|
219
|
+
</CardHeader>
|
|
220
|
+
<div style={{
|
|
221
|
+
background: "#F9FAFB", border: "0.5px solid #EAECF0",
|
|
222
|
+
borderRadius: "20px", padding: "4px 14px",
|
|
223
|
+
fontSize: "12px", color: "#667085",
|
|
224
|
+
}}>
|
|
225
|
+
{t("EKYC_K_NUMBER") || "K Number"}:{" "}
|
|
226
|
+
<span style={{ color: "#0B0C0C", fontWeight: "600" }}>{kNumber}</span>
|
|
81
227
|
</div>
|
|
82
228
|
</div>
|
|
83
229
|
|
|
84
|
-
{/*
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<Row label={t("EKYC_NAME")} text={aadhaarDetails.userName || "Rajesh Kumar Singh"} />
|
|
96
|
-
<Row label={t("EKYC_AADHAAR")} text={aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : t("CS_NA")} />
|
|
97
|
-
<Row label={t("EKYC_MOBILE_NO")} text={aadhaarDetails.mobileNumber || t("CS_NA")} />
|
|
98
|
-
<Row label={t("EKYC_EMAIL_ADDRESS")} text={aadhaarDetails.email || t("CS_NA")} />
|
|
99
|
-
</StatusTable>
|
|
100
|
-
</Card>
|
|
101
|
-
|
|
102
|
-
{/* Address Details Card */}
|
|
103
|
-
<Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
|
|
104
|
-
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
|
|
105
|
-
<CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>
|
|
106
|
-
{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}
|
|
107
|
-
</CardHeader>
|
|
108
|
-
<span onClick={handleEditAddress} style={{ color: "#3A8DCC", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>
|
|
109
|
-
{t("CS_COMMON_EDIT")}
|
|
110
|
-
</span>
|
|
230
|
+
{/* Confirmation banner */}
|
|
231
|
+
<div style={{
|
|
232
|
+
backgroundColor: "#E1F5EE", border: "0.5px solid #5DCAA5",
|
|
233
|
+
borderRadius: "8px", padding: "12px 16px",
|
|
234
|
+
display: "flex", alignItems: "center", gap: "10px",
|
|
235
|
+
marginBottom: "24px",
|
|
236
|
+
}}>
|
|
237
|
+
<div style={{ backgroundColor: "#9FE1CB", padding: "5px", borderRadius: "6px", display: "flex", flexShrink: 0 }}>
|
|
238
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#085041" strokeWidth="3" strokeLinecap="round">
|
|
239
|
+
<polyline points="20 6 9 17 4 12" />
|
|
240
|
+
</svg>
|
|
111
241
|
</div>
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
<Row label={t("EKYC_PINCODE")} text={addressDetails.pincode || "110085"} />
|
|
115
|
-
</StatusTable>
|
|
116
|
-
</Card>
|
|
117
|
-
|
|
118
|
-
{/* Property Details Card */}
|
|
119
|
-
<Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
|
|
120
|
-
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
|
|
121
|
-
<CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROPERTY_INFO") || "Property Information"}</CardHeader>
|
|
122
|
-
<span onClick={handleEditProperty} style={{ color: "#3A8DCC", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>
|
|
123
|
-
{t("CS_COMMON_EDIT")}
|
|
124
|
-
</span>
|
|
242
|
+
<div style={{ fontSize: "13px", color: "#04342C", fontWeight: "500" }}>
|
|
243
|
+
{t("EKYC_REVIEW_NOTICE") || "Please review all details carefully before submitting. You can edit any section by clicking Edit."}
|
|
125
244
|
</div>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
<div style={{ animation: "fadeSlideIn 0.3s ease" }}>
|
|
248
|
+
|
|
249
|
+
{/* ── Aadhaar section head ── */}
|
|
250
|
+
<SectionHead
|
|
251
|
+
icon={<PersonIcon size={16} />}
|
|
252
|
+
label={t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar details"}
|
|
253
|
+
/>
|
|
254
|
+
|
|
255
|
+
<ReviewCard
|
|
256
|
+
icon={<PersonIcon size={16} />}
|
|
257
|
+
title={t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar details"}
|
|
258
|
+
onEdit={handleEditAadhaar}
|
|
259
|
+
editLabel={t("CS_COMMON_EDIT") || "Edit"}
|
|
260
|
+
rows={[
|
|
261
|
+
{ label: t("EKYC_NAME") || "Name", value: aadhaarDetails.userName || "Rajesh Kumar Singh" },
|
|
262
|
+
{ label: t("EKYC_AADHAAR") || "Aadhaar no.", value: aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : "XXXX XXXX 1234" },
|
|
263
|
+
{ label: t("EKYC_MOBILE_NO") || "Mobile no.", value: aadhaarDetails.mobileNumber || "XXXXXXXXXX" },
|
|
264
|
+
{ label: t("EKYC_EMAIL_ADDRESS") || "Email", value: aadhaarDetails.email || null },
|
|
265
|
+
]}
|
|
266
|
+
/>
|
|
267
|
+
|
|
268
|
+
<hr style={{ margin: "20px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
|
|
269
|
+
|
|
270
|
+
{/* ── Address section head ── */}
|
|
271
|
+
<SectionHead
|
|
272
|
+
icon={<LocationIcon2 size={16} />}
|
|
273
|
+
label={t("EKYC_ADDRESS_DETAILS_HEADER") || "Address details"}
|
|
274
|
+
/>
|
|
275
|
+
|
|
276
|
+
<ReviewCard
|
|
277
|
+
icon={<LocationIcon2 size={16} />}
|
|
278
|
+
title={t("EKYC_ADDRESS_DETAILS_HEADER") || "Address details"}
|
|
279
|
+
onEdit={handleEditAddress}
|
|
280
|
+
editLabel={t("CS_COMMON_EDIT") || "Edit"}
|
|
281
|
+
rows={[
|
|
282
|
+
{ label: t("EKYC_FULL_ADDRESS") || "Full address", value: addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085" },
|
|
283
|
+
{ label: t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no.", value: addressDetails.flatNo || null },
|
|
284
|
+
{ label: t("EKYC_BUILDING_TOWER") || "Building", value: addressDetails.building || null },
|
|
285
|
+
{ label: t("EKYC_LANDMARK") || "Landmark", value: addressDetails.landmark || null },
|
|
286
|
+
{ label: t("EKYC_PINCODE") || "Pincode", value: addressDetails.pincode || "110085" },
|
|
287
|
+
{ label: t("EKYC_ASSEMBLY") || "Assembly", value: addressDetails.assembly || "AC-12 Chandni Chowk" },
|
|
288
|
+
{ label: t("EKYC_WARD") || "Ward", value: addressDetails.ward || "WARD-45 Civil Lines" },
|
|
289
|
+
]}
|
|
290
|
+
/>
|
|
291
|
+
|
|
292
|
+
<hr style={{ margin: "20px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
|
|
293
|
+
|
|
294
|
+
{/* ── Property section head ── */}
|
|
295
|
+
<SectionHead
|
|
296
|
+
icon={<BuildingIcon size={16} />}
|
|
297
|
+
label={t("EKYC_PROPERTY_INFO") || "Property details"}
|
|
298
|
+
/>
|
|
299
|
+
|
|
300
|
+
<ReviewCard
|
|
301
|
+
icon={<BuildingIcon size={16} />}
|
|
302
|
+
title={t("EKYC_PROPERTY_INFO") || "Property details"}
|
|
303
|
+
onEdit={handleEditProperty}
|
|
304
|
+
editLabel={t("CS_COMMON_EDIT") || "Edit"}
|
|
305
|
+
rows={[
|
|
306
|
+
{ label: t("EKYC_PROPERTY_OWNER") || "Property owner", value: propertyDetails.ownerType || "Owner" },
|
|
307
|
+
{ label: t("EKYC_PID_NUMBER") || "PID number", value: propertyDetails.pidNumber || null },
|
|
308
|
+
{ label: t("EKYC_TYPE_OF_CONNECTION") || "Type of connection", value: propertyDetails.connectionCategory?.label || null },
|
|
309
|
+
{ label: t("EKYC_CONNECTION_CATEGORY") || "Connection category", value: propertyDetails.connectionType?.label || null },
|
|
310
|
+
{ label: t("EKYC_USER_TYPE") || "User type", value: propertyDetails.userType?.label || null },
|
|
311
|
+
{ label: t("EKYC_NO_OF_FLOORS") || "No. of floors", value: propertyDetails.noOfFloors?.label || null },
|
|
312
|
+
]}
|
|
313
|
+
/>
|
|
314
|
+
|
|
315
|
+
</div>
|
|
316
|
+
|
|
317
|
+
{/* Submit (Non-sticky, at form end) */}
|
|
318
|
+
<div style={{ marginTop: "24px" }}>
|
|
319
|
+
<SubmitBar
|
|
320
|
+
label={t("ES_COMMON_SUBMIT") || "Submit"}
|
|
321
|
+
onSubmit={handleSubmit}
|
|
322
|
+
/>
|
|
323
|
+
</div>
|
|
324
|
+
|
|
325
|
+
{/* Secure notice */}
|
|
326
|
+
<div style={{
|
|
327
|
+
display: "flex", alignItems: "center", justifyContent: "center",
|
|
328
|
+
gap: "5px", marginTop: "16px",
|
|
329
|
+
fontSize: "11px", color: "#98A2B3",
|
|
330
|
+
}}>
|
|
331
|
+
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
332
|
+
<rect x="3" y="11" width="18" height="11" rx="2" />
|
|
333
|
+
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
334
|
+
</svg>
|
|
335
|
+
{t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"}
|
|
336
|
+
</div>
|
|
337
|
+
|
|
137
338
|
</Card>
|
|
138
339
|
</div>
|
|
139
340
|
</div>
|
|
140
341
|
);
|
|
141
342
|
};
|
|
142
343
|
|
|
143
|
-
export default Review;
|
|
344
|
+
export default Review;
|