@djb25/digit-ui-module-ekyc 1.0.0 → 1.0.2
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 -0
- package/dist/index.modern.js +3290 -0
- package/dist/index.modern.js.map +1 -0
- package/package.json +1 -1
- package/src/Module.js +7 -23
- package/src/components/ConnectionDetailsView.js +114 -0
- package/src/components/DesktopInbox.js +84 -84
- package/src/components/Filter.js +59 -0
- package/src/components/MobileInbox.js +73 -0
- package/src/components/SearchConsumer.js +122 -0
- package/src/components/StatusCards.js +13 -22
- package/src/pages/employee/AadhaarVerification.js +357 -0
- package/src/pages/employee/AddressDetails.js +452 -0
- package/src/pages/employee/Create.js +94 -0
- package/src/pages/employee/Inbox.js +37 -20
- package/src/pages/employee/PropertyInfo.js +405 -0
- package/src/pages/employee/Review.js +118 -0
- package/src/pages/employee/index.js +104 -0
- package/src/components/Search.js +0 -77
|
@@ -0,0 +1,405 @@
|
|
|
1
|
+
import React, { useState, useRef } from "react";
|
|
2
|
+
import { Header, Card, LabelFieldPair, CardLabel, TextInput, SubmitBar, CardHeader, ActionBar, Dropdown, PropertyHouse, InfoBannerIcon, RemoveableTag, HomeIcon, ConnectingCheckPoints, CheckPoint } from "@djb25/digit-ui-react-components";
|
|
3
|
+
import { useTranslation } from "react-i18next";
|
|
4
|
+
import { useHistory, useLocation } from "react-router-dom";
|
|
5
|
+
|
|
6
|
+
const PropertyInfo = () => {
|
|
7
|
+
const { t } = useTranslation();
|
|
8
|
+
const history = useHistory();
|
|
9
|
+
const location = useLocation();
|
|
10
|
+
|
|
11
|
+
const { kNumber } = location.state || { kNumber: "EKYC-1234567890" };
|
|
12
|
+
const tenantId = Digit.ULBService.getCurrentTenantId();
|
|
13
|
+
const { data: dataV0, isLoading: isLoadingV0 } = Digit.Hooks.ekyc.useGetPropertyType(tenantId);
|
|
14
|
+
const { data, isLoading } = Digit.Hooks.ekyc.useGetConnectionTypeV2(tenantId);
|
|
15
|
+
const { data: dataV1, isLoading: isLoadingV1 } = Digit.Hooks.ekyc.useGetUserType(tenantId);
|
|
16
|
+
const { data: dataV2, isLoading: isLoadingV2 } = Digit.Hooks.ekyc.useGetFloorCount(tenantId);
|
|
17
|
+
|
|
18
|
+
const [ownerType, setOwnerType] = useState("OWNER");
|
|
19
|
+
const [pidNumber, setPidNumber] = useState("");
|
|
20
|
+
const [connectionType, setConnectionType] = useState(null);
|
|
21
|
+
const [connectionCategory, setConnectionCategory] = useState(null);
|
|
22
|
+
const [userType, setUserType] = useState(null);
|
|
23
|
+
const [noOfFloors, setNoOfFloors] = useState(null);
|
|
24
|
+
const [propertyDocument, setPropertyDocument] = useState(null);
|
|
25
|
+
const [buildingPhoto, setBuildingPhoto] = useState(null);
|
|
26
|
+
const fileRef = useRef(null);
|
|
27
|
+
const cameraRef = useRef(null);
|
|
28
|
+
|
|
29
|
+
const handleSaveAndContinue = () => {
|
|
30
|
+
history.push("/digit-ui/employee/ekyc/review", {
|
|
31
|
+
...location.state,
|
|
32
|
+
propertyDetails: {
|
|
33
|
+
ownerType,
|
|
34
|
+
pidNumber,
|
|
35
|
+
connectionType,
|
|
36
|
+
connectionCategory,
|
|
37
|
+
userType,
|
|
38
|
+
noOfFloors,
|
|
39
|
+
propertyDocument,
|
|
40
|
+
buildingPhoto
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const SuitcaseIcon = () => (
|
|
46
|
+
<div style={{ backgroundColor: "#E8EAF6", padding: "8px", borderRadius: "8px", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
|
47
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
48
|
+
<path d="M20 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H4C2.89 6 2 6.89 2 8V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V8C22 6.89 21.11 6 20 6ZM10 4H14V6H10V4ZM20 19H4V8H20V19ZM13 13V10H11V13H8L12 17L16 13H13Z" fill="#3D51B0" />
|
|
49
|
+
</svg>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
|
|
53
|
+
const BuildingIcon = () => (
|
|
54
|
+
<div style={{ backgroundColor: "#E8EAF6", padding: "8px", borderRadius: "8px", display: "flex", alignItems: "center", justifyContent: "center" }}>
|
|
55
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
56
|
+
<path d="M12 7V3H2V21H22V7H12ZM6 19H4V17H6V19ZM6 15H4V13H6V15ZM6 11H4V9H6V11ZM6 7H4V5H6V7ZM10 19H8V17H10V19ZM10 15H8V13H10V15ZM10 11H8V9H10V11ZM10 7H8V5H10V7ZM20 19H12V9H20V19ZM18 11H14V13H18V11ZM18 15H14V17H18V15Z" fill="#3D51B0" />
|
|
57
|
+
</svg>
|
|
58
|
+
</div>
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
const PdfIcon = () => (
|
|
62
|
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
63
|
+
<path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM13 9V3.5L18.5 9H13Z" fill="#1976D2" />
|
|
64
|
+
<path d="M11 14H13V18H11V14ZM11 12H13V13H11V12Z" fill="white" />
|
|
65
|
+
<path d="M8 16H9V17H8V16Z" fill="white" />
|
|
66
|
+
<path d="M15 16H16V17H15V16Z" fill="white" />
|
|
67
|
+
<path d="M12 15.5L14 13.5H10L12 15.5Z" fill="white" />
|
|
68
|
+
{/* Simple representation of upload arrow on document */}
|
|
69
|
+
<path d="M12 18V14M12 14L10 16M12 14L14 16" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
70
|
+
</svg>
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
const CameraIcon = () => (
|
|
74
|
+
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
75
|
+
<path d="M9 2L7.17 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16.83L15 2H9ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#3D51B0" />
|
|
76
|
+
</svg>
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<div className="inbox-container">
|
|
81
|
+
<div className="filters-container">
|
|
82
|
+
{/* Sidebar Title Card */}
|
|
83
|
+
<Card className="sidebar-title-card" style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}>
|
|
84
|
+
<div className="icon-container" style={{ color: "#0068faff", marginRight: "12px" }}>
|
|
85
|
+
<HomeIcon style={{ width: "24px", height: "24px" }} />
|
|
86
|
+
</div>
|
|
87
|
+
<div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>
|
|
88
|
+
{t("EKYC_PROCESS")}
|
|
89
|
+
</div>
|
|
90
|
+
</Card>
|
|
91
|
+
|
|
92
|
+
{/* Progress Steps Sidebar */}
|
|
93
|
+
<div style={{ backgroundColor: "#FFFFFF", padding: "16px", borderRadius: "8px", border: "1px solid #EAECF0", boxShadow: "0 2px 4px rgba(0,0,0,0.02)" }}>
|
|
94
|
+
<ConnectingCheckPoints>
|
|
95
|
+
<CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
|
|
96
|
+
<CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
|
|
97
|
+
<CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={false} />
|
|
98
|
+
<CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} />
|
|
99
|
+
</ConnectingCheckPoints>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<div style={{ flex: 1, marginLeft: "16px" }}>
|
|
104
|
+
<Card>
|
|
105
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
|
|
106
|
+
<Header>{t("Property Details")}</Header>
|
|
107
|
+
<div style={{ fontSize: "14px", fontWeight: "700", color: "#505A5F" }}>
|
|
108
|
+
{t("EKYC_K_NUMBER")}: <span style={{ color: "#0B0C0C" }}>{kNumber}</span>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "24px" }}>
|
|
113
|
+
<SuitcaseIcon />
|
|
114
|
+
<span style={{ fontSize: "20px", fontWeight: "700", color: "#101828" }}>{t("Property Details")}</span>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<Card style={{ padding: "20px", borderRadius: "16px", border: "1px solid #EAECF0", marginBottom: "24px" }}>
|
|
118
|
+
{/* Property Owner Selection */}
|
|
119
|
+
<div style={{ marginBottom: "24px" }}>
|
|
120
|
+
<CardLabel style={{ fontSize: "14px", fontWeight: "600", color: "#667085", marginBottom: "12px" }}>{t("Property_Owner")}</CardLabel>
|
|
121
|
+
<div style={{ display: "flex", backgroundColor: "#F2F4F7", padding: "4px", borderRadius: "12px" }}>
|
|
122
|
+
<button
|
|
123
|
+
onClick={() => setOwnerType("OWNER")}
|
|
124
|
+
style={{
|
|
125
|
+
flex: 1,
|
|
126
|
+
padding: "10px",
|
|
127
|
+
borderRadius: "10px",
|
|
128
|
+
border: "none",
|
|
129
|
+
backgroundColor: ownerType === "OWNER" ? "#3D51B0" : "transparent",
|
|
130
|
+
color: ownerType === "OWNER" ? "#FFFFFF" : "#667085",
|
|
131
|
+
fontWeight: "600",
|
|
132
|
+
cursor: "pointer",
|
|
133
|
+
transition: "all 0.2s"
|
|
134
|
+
}}
|
|
135
|
+
>
|
|
136
|
+
{t("Owner")}
|
|
137
|
+
</button>
|
|
138
|
+
<button
|
|
139
|
+
onClick={() => setOwnerType("TENANT")}
|
|
140
|
+
style={{
|
|
141
|
+
flex: 1,
|
|
142
|
+
padding: "10px",
|
|
143
|
+
borderRadius: "10px",
|
|
144
|
+
border: "none",
|
|
145
|
+
backgroundColor: ownerType === "TENANT" ? "#3D51B0" : "transparent",
|
|
146
|
+
color: ownerType === "TENANT" ? "#FFFFFF" : "#667085",
|
|
147
|
+
fontWeight: "600",
|
|
148
|
+
cursor: "pointer",
|
|
149
|
+
transition: "all 0.2s"
|
|
150
|
+
}}
|
|
151
|
+
>
|
|
152
|
+
{t("Tenant")}
|
|
153
|
+
</button>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
{/* PID Number Section */}
|
|
158
|
+
<div style={{ marginBottom: "8px" }}>
|
|
159
|
+
<CardLabel style={{ fontSize: "14px", fontWeight: "600", color: "#667085", marginBottom: "12px" }}>
|
|
160
|
+
{t("PID_Number")} <span style={{ fontStyle: "italic", fontWeight: "400", color: "#98A2B3" }}>{t("Optional")}</span>
|
|
161
|
+
</CardLabel>
|
|
162
|
+
<div className="field" style={{ position: "relative" }}>
|
|
163
|
+
<TextInput
|
|
164
|
+
value={pidNumber}
|
|
165
|
+
onChange={(e) => setPidNumber(e.target.value)}
|
|
166
|
+
placeholder={t("Enter_PID_Number")}
|
|
167
|
+
textInputStyle={{ paddingLeft: "44px", borderRadius: "12px", border: "1px solid #D0D5DD", height: "56px" }}
|
|
168
|
+
/>
|
|
169
|
+
<div style={{ position: "absolute", left: "16px", top: "50%", transform: "translateY(-50%)", color: "#3D51B0", fontSize: "20px", fontWeight: "600" }}>#</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</Card>
|
|
173
|
+
|
|
174
|
+
{/* Building Info Section */}
|
|
175
|
+
<div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "24px" }}>
|
|
176
|
+
<BuildingIcon />
|
|
177
|
+
<span style={{ fontSize: "20px", fontWeight: "700", color: "#101828" }}>{t("Building_Info")}</span>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
<Card style={{ padding: "20px", borderRadius: "16px", border: "1px solid #EAECF0", marginBottom: "24px" }}>
|
|
181
|
+
|
|
182
|
+
{/* Dropdowns */}
|
|
183
|
+
{[
|
|
184
|
+
{
|
|
185
|
+
label: "Type_of_Connection",
|
|
186
|
+
state: connectionCategory,
|
|
187
|
+
setState: setConnectionCategory,
|
|
188
|
+
options: dataV0?.["ws-services-calculation"]?.propertyTypeV2?.map(item => ({
|
|
189
|
+
label: t(item.code),
|
|
190
|
+
value: item.code
|
|
191
|
+
})) || []
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
label: "Connection_Category",
|
|
195
|
+
state: connectionType,
|
|
196
|
+
setState: setConnectionType,
|
|
197
|
+
options: data?.["ws-services-calculation"]?.connectionTypeV2?.map(item => ({
|
|
198
|
+
label: t(item.code),
|
|
199
|
+
value: item.code
|
|
200
|
+
})) || []
|
|
201
|
+
},
|
|
202
|
+
// { label: "User_Type", state: userType, setState: setUserType },
|
|
203
|
+
{
|
|
204
|
+
label: "User_Type",
|
|
205
|
+
state: userType,
|
|
206
|
+
setState: setUserType,
|
|
207
|
+
options: dataV1?.["ws-services-calculation"]?.userTypeV2?.map(item => ({
|
|
208
|
+
label: t(item.code),
|
|
209
|
+
value: item.code
|
|
210
|
+
})) || []
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
label: "No_of_Floor",
|
|
214
|
+
state: noOfFloors,
|
|
215
|
+
setState: setNoOfFloors,
|
|
216
|
+
options: dataV2?.["ws-services-calculation"]?.floorCount?.map(item => ({
|
|
217
|
+
label: t(item.code),
|
|
218
|
+
value: item.code
|
|
219
|
+
})) || []
|
|
220
|
+
}
|
|
221
|
+
].map((item, idx) => (
|
|
222
|
+
<div key={idx} style={{ marginBottom: "20px" }}>
|
|
223
|
+
<CardLabel style={{ fontSize: "14px", fontWeight: "600", color: "#344054", marginBottom: "8px" }}>{t(item.label)}</CardLabel>
|
|
224
|
+
<Dropdown
|
|
225
|
+
selected={item.state}
|
|
226
|
+
select={item.setState}
|
|
227
|
+
option={item.options || [{ label: `Select ${item.label}`, value: "" }]}
|
|
228
|
+
optionKey="label"
|
|
229
|
+
t={t}
|
|
230
|
+
style={{ borderRadius: "12px", border: "1px solid #D0D5DD", height: "48px" }}
|
|
231
|
+
/>
|
|
232
|
+
</div>
|
|
233
|
+
))}
|
|
234
|
+
<div
|
|
235
|
+
style={{
|
|
236
|
+
display: "flex",
|
|
237
|
+
gap: "24px",
|
|
238
|
+
alignItems: "stretch", // important
|
|
239
|
+
flexWrap: "wrap"
|
|
240
|
+
}}
|
|
241
|
+
>
|
|
242
|
+
{/* PDF Upload Box */}
|
|
243
|
+
<div
|
|
244
|
+
style={{
|
|
245
|
+
flex: 1,
|
|
246
|
+
minWidth: "300px",
|
|
247
|
+
display: "flex",
|
|
248
|
+
flexDirection: "column"
|
|
249
|
+
}}
|
|
250
|
+
>
|
|
251
|
+
<CardLabel
|
|
252
|
+
style={{
|
|
253
|
+
fontSize: "14px",
|
|
254
|
+
fontWeight: "600",
|
|
255
|
+
color: "#344054",
|
|
256
|
+
marginBottom: "8px"
|
|
257
|
+
}}
|
|
258
|
+
>
|
|
259
|
+
{t("Upload_Property_Document")}
|
|
260
|
+
</CardLabel>
|
|
261
|
+
|
|
262
|
+
<div
|
|
263
|
+
style={{
|
|
264
|
+
flex: 1, // important for equal height
|
|
265
|
+
backgroundColor: "#EBF5FF",
|
|
266
|
+
border: "1px solid #B2DDFF",
|
|
267
|
+
borderRadius: "16px",
|
|
268
|
+
padding: "32px 24px",
|
|
269
|
+
textAlign: "center",
|
|
270
|
+
cursor: "pointer",
|
|
271
|
+
display: "flex",
|
|
272
|
+
flexDirection: "column",
|
|
273
|
+
justifyContent: "center"
|
|
274
|
+
}}
|
|
275
|
+
onClick={() => fileRef.current.click()}
|
|
276
|
+
>
|
|
277
|
+
<input type="file" ref={fileRef} style={{ display: "none" }} accept=".pdf" />
|
|
278
|
+
|
|
279
|
+
<div
|
|
280
|
+
style={{
|
|
281
|
+
color: "#1570EF",
|
|
282
|
+
fontWeight: "600",
|
|
283
|
+
fontSize: "16px",
|
|
284
|
+
marginBottom: "20px",
|
|
285
|
+
lineHeight: "1.5"
|
|
286
|
+
}}
|
|
287
|
+
>
|
|
288
|
+
{t("Upload_your_property_document_in_PDF_Only")}
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div style={{ display: "flex", justifyContent: "center" }}>
|
|
292
|
+
<div
|
|
293
|
+
style={{
|
|
294
|
+
backgroundColor: "#FFFFFF",
|
|
295
|
+
padding: "12px",
|
|
296
|
+
borderRadius: "12px",
|
|
297
|
+
boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)"
|
|
298
|
+
}}
|
|
299
|
+
>
|
|
300
|
+
<PdfIcon />
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
{/* Capture Building Image */}
|
|
307
|
+
<div
|
|
308
|
+
style={{
|
|
309
|
+
flex: 1,
|
|
310
|
+
minWidth: "300px",
|
|
311
|
+
display: "flex",
|
|
312
|
+
flexDirection: "column"
|
|
313
|
+
}}
|
|
314
|
+
>
|
|
315
|
+
<CardLabel
|
|
316
|
+
style={{
|
|
317
|
+
fontSize: "14px",
|
|
318
|
+
fontWeight: "600",
|
|
319
|
+
color: "#344054",
|
|
320
|
+
marginBottom: "8px"
|
|
321
|
+
}}
|
|
322
|
+
>
|
|
323
|
+
{t("Capture_Building_Image")}
|
|
324
|
+
</CardLabel>
|
|
325
|
+
|
|
326
|
+
<div
|
|
327
|
+
style={{
|
|
328
|
+
flex: 1, // important
|
|
329
|
+
border: "1px solid #D0D5DD",
|
|
330
|
+
borderRadius: "16px",
|
|
331
|
+
padding: "40px 24px",
|
|
332
|
+
textAlign: "center",
|
|
333
|
+
cursor: "pointer",
|
|
334
|
+
backgroundColor: "#FFFFFF",
|
|
335
|
+
display: "flex",
|
|
336
|
+
flexDirection: "column",
|
|
337
|
+
justifyContent: "center"
|
|
338
|
+
}}
|
|
339
|
+
onClick={() => cameraRef.current.click()}
|
|
340
|
+
>
|
|
341
|
+
<input
|
|
342
|
+
type="file"
|
|
343
|
+
ref={cameraRef}
|
|
344
|
+
style={{ display: "none" }}
|
|
345
|
+
accept="image/*"
|
|
346
|
+
capture="environment"
|
|
347
|
+
/>
|
|
348
|
+
|
|
349
|
+
<div
|
|
350
|
+
style={{
|
|
351
|
+
backgroundColor: "#EEF4FF",
|
|
352
|
+
width: "56px",
|
|
353
|
+
height: "56px",
|
|
354
|
+
borderRadius: "50%",
|
|
355
|
+
display: "flex",
|
|
356
|
+
alignItems: "center",
|
|
357
|
+
justifyContent: "center",
|
|
358
|
+
margin: "0 auto 16px"
|
|
359
|
+
}}
|
|
360
|
+
>
|
|
361
|
+
<CameraIcon />
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<div
|
|
365
|
+
style={{
|
|
366
|
+
fontWeight: "600",
|
|
367
|
+
color: "#101828",
|
|
368
|
+
fontSize: "16px",
|
|
369
|
+
marginBottom: "4px"
|
|
370
|
+
}}
|
|
371
|
+
>
|
|
372
|
+
{t("Tap_to_Capture")}
|
|
373
|
+
</div>
|
|
374
|
+
|
|
375
|
+
<div style={{ color: "#667085", fontSize: "14px" }}>
|
|
376
|
+
{t("Building_Photo")}
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
{/* Info Banner */}
|
|
383
|
+
<div style={{ marginTop: "24px", backgroundColor: "#EFF8FF", padding: "16px", borderRadius: "12px", display: "flex", gap: "12px", border: "1px solid #B2DDFF" }}>
|
|
384
|
+
<div style={{ color: "#1570EF" }}>
|
|
385
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
386
|
+
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="currentColor" />
|
|
387
|
+
</svg>
|
|
388
|
+
</div>
|
|
389
|
+
<div style={{ color: "#175CD3", fontSize: "14px", fontWeight: "500", lineHeight: "1.4" }}>
|
|
390
|
+
{t("This_section_is_enabled_only_if_user_is_not_the_owner.")}
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
<div style={{ display: "flex", justifyContent: "flex-start", marginTop: "24px" }}>
|
|
394
|
+
<SubmitBar label={t("Save_&_Continue")} onSubmit={handleSaveAndContinue} style={{ borderRadius: "8px", height: "48px", margin: 0 }} />
|
|
395
|
+
</div>
|
|
396
|
+
</Card>
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
</Card>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
);
|
|
403
|
+
};
|
|
404
|
+
|
|
405
|
+
export default PropertyInfo;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Header, Card, CardHeader, StatusTable, Row, SubmitBar, HomeIcon, ConnectingCheckPoints, CheckPoint, ActionBar } from "@djb25/digit-ui-react-components";
|
|
3
|
+
import { useTranslation } from "react-i18next";
|
|
4
|
+
import { useHistory, useLocation } from "react-router-dom";
|
|
5
|
+
|
|
6
|
+
const Review = () => {
|
|
7
|
+
const { t } = useTranslation();
|
|
8
|
+
const history = useHistory();
|
|
9
|
+
const location = useLocation();
|
|
10
|
+
|
|
11
|
+
// Catch data from previous steps via the router state
|
|
12
|
+
const {
|
|
13
|
+
kNumber = "NA",
|
|
14
|
+
aadhaarDetails = {},
|
|
15
|
+
addressDetails = {},
|
|
16
|
+
propertyDetails = {}
|
|
17
|
+
} = location.state || {};
|
|
18
|
+
|
|
19
|
+
const handleSubmit = () => {
|
|
20
|
+
// Here to mimic final submit and go to dashboard/inbox
|
|
21
|
+
history.push("/digit-ui/employee/ekyc/dashboard");
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const handleEditAadhaar = () => {
|
|
25
|
+
history.push("/digit-ui/employee/ekyc/aadhaar-verification", location.state);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const handleEditAddress = () => {
|
|
29
|
+
history.push("/digit-ui/employee/ekyc/address-details", location.state);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
const handleEditProperty = () => {
|
|
33
|
+
history.push("/digit-ui/employee/ekyc/property-info", location.state);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<div className="inbox-container">
|
|
38
|
+
<div className="filters-container">
|
|
39
|
+
{/* Sidebar Title Card */}
|
|
40
|
+
<Card className="sidebar-title-card" style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}>
|
|
41
|
+
<div className="icon-container" style={{ color: "#0068faff", marginRight: "12px" }}>
|
|
42
|
+
<HomeIcon style={{ width: "24px", height: "24px" }} />
|
|
43
|
+
</div>
|
|
44
|
+
<div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>
|
|
45
|
+
{t("EKYC_PROCESS")}
|
|
46
|
+
</div>
|
|
47
|
+
</Card>
|
|
48
|
+
|
|
49
|
+
{/* Progress Steps Sidebar */}
|
|
50
|
+
<div style={{ backgroundColor: "#FFFFFF", padding: "16px", borderRadius: "8px", border: "1px solid #EAECF0", boxShadow: "0 2px 4px rgba(0,0,0,0.02)" }}>
|
|
51
|
+
<ConnectingCheckPoints>
|
|
52
|
+
<CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
|
|
53
|
+
<CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
|
|
54
|
+
<CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={true} />
|
|
55
|
+
<CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} isCompleted={false} />
|
|
56
|
+
</ConnectingCheckPoints>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div style={{ flex: 1, marginLeft: "16px" }}>
|
|
61
|
+
<Card>
|
|
62
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
|
|
63
|
+
<Header>{t("EKYC_REVIEW_DETAILS") || "Review Details"}</Header>
|
|
64
|
+
<div style={{ fontSize: "14px", fontWeight: "700", color: "#505A5F" }}>
|
|
65
|
+
{t("EKYC_K_NUMBER")}: <span style={{ color: "#0B0C0C" }}>{kNumber}</span>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
{/* Aadhaar Details Card */}
|
|
70
|
+
<Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
|
|
71
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
|
|
72
|
+
<CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar Details"}</CardHeader>
|
|
73
|
+
<span onClick={handleEditAadhaar} style={{ color: "#F47738", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>{t("CS_COMMON_EDIT")}</span>
|
|
74
|
+
</div>
|
|
75
|
+
<StatusTable>
|
|
76
|
+
<Row label={t("EKYC_NAME")} text={aadhaarDetails.userName || "Rajesh Kumar Singh"} />
|
|
77
|
+
<Row label={t("EKYC_AADHAAR")} text={aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : t("CS_NA")} />
|
|
78
|
+
<Row label={t("EKYC_MOBILE_NO")} text={aadhaarDetails.mobileNumber || t("CS_NA")} />
|
|
79
|
+
<Row label={t("EKYC_EMAIL_ADDRESS")} text={aadhaarDetails.email || t("CS_NA")} />
|
|
80
|
+
</StatusTable>
|
|
81
|
+
</Card>
|
|
82
|
+
|
|
83
|
+
{/* Address Details Card */}
|
|
84
|
+
<Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
|
|
85
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
|
|
86
|
+
<CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}</CardHeader>
|
|
87
|
+
<span onClick={handleEditAddress} style={{ color: "#F47738", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>{t("CS_COMMON_EDIT")}</span>
|
|
88
|
+
</div>
|
|
89
|
+
<StatusTable>
|
|
90
|
+
<Row label={t("EKYC_FULL_ADDRESS")} text={addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini"} />
|
|
91
|
+
<Row label={t("EKYC_PINCODE")} text={addressDetails.pincode || "110085"} />
|
|
92
|
+
</StatusTable>
|
|
93
|
+
</Card>
|
|
94
|
+
|
|
95
|
+
{/* Property Details Card */}
|
|
96
|
+
<Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
|
|
97
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
|
|
98
|
+
<CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROPERTY_INFO") || "Property Information"}</CardHeader>
|
|
99
|
+
<span onClick={handleEditProperty} style={{ color: "#F47738", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>{t("CS_COMMON_EDIT")}</span>
|
|
100
|
+
</div>
|
|
101
|
+
<StatusTable>
|
|
102
|
+
<Row label={t("Property_Owner")} text={propertyDetails.ownerType || "OWNER"} />
|
|
103
|
+
<Row label={t("PID_Number")} text={propertyDetails.pidNumber || t("CS_NA")} />
|
|
104
|
+
<Row label={t("Type_of_Connection")} text={propertyDetails.connectionType?.label || t("CS_NA")} />
|
|
105
|
+
<Row label={t("Connection_Category")} text={propertyDetails.connectionCategory?.label || t("CS_NA")} />
|
|
106
|
+
</StatusTable>
|
|
107
|
+
</Card>
|
|
108
|
+
|
|
109
|
+
<ActionBar>
|
|
110
|
+
<SubmitBar label={t("ES_COMMON_SUBMIT") || "Submit"} onSubmit={handleSubmit} />
|
|
111
|
+
</ActionBar>
|
|
112
|
+
</Card>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
);
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
export default Review;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { AppContainer, PrivateRoute, ModuleHeader, ArrowLeft, HomeIcon } from "@djb25/digit-ui-react-components";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { useTranslation } from "react-i18next";
|
|
4
|
+
import { Switch, useLocation } from "react-router-dom";
|
|
5
|
+
import Inbox from "./Inbox";
|
|
6
|
+
import Create from "./Create";
|
|
7
|
+
import AadhaarVerification from "./AadhaarVerification";
|
|
8
|
+
import AddressDetails from "./AddressDetails";
|
|
9
|
+
import PropertyInfo from "./PropertyInfo";
|
|
10
|
+
import Review from "./Review";
|
|
11
|
+
|
|
12
|
+
const EmployeeApp = ({ path }) => {
|
|
13
|
+
const { t } = useTranslation();
|
|
14
|
+
const location = useLocation();
|
|
15
|
+
|
|
16
|
+
sessionStorage.removeItem("revalidateddone");
|
|
17
|
+
|
|
18
|
+
const getBreadcrumbLabel = () => {
|
|
19
|
+
const pathname = location.pathname;
|
|
20
|
+
if (pathname.includes("/dashboard")) return "ES_COMMON_INBOX";
|
|
21
|
+
if (pathname.includes("/create-kyc")) return "EKYC_CREATE_KYC";
|
|
22
|
+
if (pathname.includes("/k-details")) return "EKYC_K_DETAILS";
|
|
23
|
+
if (pathname.includes("/aadhaar-verification")) return "EKYC_AADHAAR_VERIFICATION";
|
|
24
|
+
if (pathname.includes("/address-details")) return "EKYC_ADDRESS_DETAILS";
|
|
25
|
+
if (pathname.includes("/property-info")) return "EKYC_PROPERTY_INFO";
|
|
26
|
+
if (pathname.includes("/review")) return "EKYC_REVIEW";
|
|
27
|
+
return "ES_COMMON_INBOX";
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
const breadcrumbs = [
|
|
31
|
+
{ icon: HomeIcon, path: "/digit-ui/employee" },
|
|
32
|
+
{ label: t(getBreadcrumbLabel()) }
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<AppContainer>
|
|
37
|
+
<div className="ground-container employee-app-container">
|
|
38
|
+
<ModuleHeader
|
|
39
|
+
leftContent={
|
|
40
|
+
<React.Fragment>
|
|
41
|
+
<ArrowLeft className="icon" />
|
|
42
|
+
Back
|
|
43
|
+
</React.Fragment>
|
|
44
|
+
}
|
|
45
|
+
onLeftClick={() => window.history.back()}
|
|
46
|
+
breadcrumbs={breadcrumbs}
|
|
47
|
+
/>
|
|
48
|
+
|
|
49
|
+
<Switch>
|
|
50
|
+
<PrivateRoute
|
|
51
|
+
path={`${path}/dashboard`}
|
|
52
|
+
component={() => (
|
|
53
|
+
<Inbox
|
|
54
|
+
parentRoute={path}
|
|
55
|
+
businessService="EKYC"
|
|
56
|
+
moduleCode="EKYC"
|
|
57
|
+
isInbox={true}
|
|
58
|
+
/>
|
|
59
|
+
)}
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
<PrivateRoute
|
|
63
|
+
path={`${path}/create-kyc`}
|
|
64
|
+
component={() => <Create />}
|
|
65
|
+
/>
|
|
66
|
+
|
|
67
|
+
<PrivateRoute
|
|
68
|
+
path={`${path}/aadhaar-verification`}
|
|
69
|
+
component={() => <AadhaarVerification />}
|
|
70
|
+
/>
|
|
71
|
+
|
|
72
|
+
<PrivateRoute
|
|
73
|
+
path={`${path}/address-details`}
|
|
74
|
+
component={() => <AddressDetails />}
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
<PrivateRoute
|
|
78
|
+
path={`${path}/property-info`}
|
|
79
|
+
component={() => <PropertyInfo />}
|
|
80
|
+
/>
|
|
81
|
+
|
|
82
|
+
<PrivateRoute
|
|
83
|
+
path={`${path}/review`}
|
|
84
|
+
component={() => <Review />}
|
|
85
|
+
/>
|
|
86
|
+
|
|
87
|
+
<PrivateRoute
|
|
88
|
+
path={`${path}/`}
|
|
89
|
+
component={() => (
|
|
90
|
+
<Inbox
|
|
91
|
+
parentRoute={path}
|
|
92
|
+
businessService="EKYC"
|
|
93
|
+
moduleCode="EKYC"
|
|
94
|
+
isInbox={true}
|
|
95
|
+
/>
|
|
96
|
+
)}
|
|
97
|
+
/>
|
|
98
|
+
</Switch>
|
|
99
|
+
</div>
|
|
100
|
+
</AppContainer>
|
|
101
|
+
);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
export default EmployeeApp;
|