@djb25/digit-ui-module-ekyc 1.0.2 → 1.0.3
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 +11 -11
- 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 +403 -320
- package/src/pages/employee/AddressDetails.js +560 -421
- package/src/pages/employee/Review.js +123 -98
|
@@ -1,118 +1,143 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Header,
|
|
4
|
+
Card,
|
|
5
|
+
CardHeader,
|
|
6
|
+
StatusTable,
|
|
7
|
+
Row,
|
|
8
|
+
SubmitBar,
|
|
9
|
+
HomeIcon,
|
|
10
|
+
ConnectingCheckPoints,
|
|
11
|
+
CheckPoint,
|
|
12
|
+
ActionBar,
|
|
13
|
+
} from "@djb25/digit-ui-react-components";
|
|
3
14
|
import { useTranslation } from "react-i18next";
|
|
4
15
|
import { useHistory, useLocation } from "react-router-dom";
|
|
5
16
|
|
|
6
17
|
const Review = () => {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
18
|
+
const { t } = useTranslation();
|
|
19
|
+
const history = useHistory();
|
|
20
|
+
const location = useLocation();
|
|
10
21
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
kNumber = "NA",
|
|
14
|
-
aadhaarDetails = {},
|
|
15
|
-
addressDetails = {},
|
|
16
|
-
propertyDetails = {}
|
|
17
|
-
} = location.state || {};
|
|
22
|
+
// Catch data from previous steps via the router state
|
|
23
|
+
const { kNumber = "NA", aadhaarDetails = {}, addressDetails = {}, propertyDetails = {} } = location.state || {};
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
const handleSubmit = () => {
|
|
26
|
+
// Here to mimic final submit and go to dashboard/inbox
|
|
27
|
+
history.push("/digit-ui/employee/ekyc/dashboard");
|
|
28
|
+
};
|
|
23
29
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
30
|
+
const handleEditAadhaar = () => {
|
|
31
|
+
history.push("/digit-ui/employee/ekyc/aadhaar-verification", location.state);
|
|
32
|
+
};
|
|
27
33
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
const handleEditAddress = () => {
|
|
35
|
+
history.push("/digit-ui/employee/ekyc/address-details", location.state);
|
|
36
|
+
};
|
|
31
37
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
const handleEditProperty = () => {
|
|
39
|
+
history.push("/digit-ui/employee/ekyc/property-info", location.state);
|
|
40
|
+
};
|
|
35
41
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
return (
|
|
43
|
+
<div className="inbox-container">
|
|
44
|
+
<div className="filters-container">
|
|
45
|
+
{/* Sidebar Title Card */}
|
|
46
|
+
<Card
|
|
47
|
+
className="sidebar-title-card"
|
|
48
|
+
style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
|
|
49
|
+
>
|
|
50
|
+
<div className="icon-container" style={{ color: "#0068faff", marginRight: "12px" }}>
|
|
51
|
+
<HomeIcon style={{ width: "24px", height: "24px" }} />
|
|
52
|
+
</div>
|
|
53
|
+
<div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROCESS")}</div>
|
|
54
|
+
</Card>
|
|
48
55
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</div>
|
|
56
|
+
{/* Progress Steps Sidebar */}
|
|
57
|
+
<div
|
|
58
|
+
style={{
|
|
59
|
+
backgroundColor: "#FFFFFF",
|
|
60
|
+
padding: "16px",
|
|
61
|
+
borderRadius: "8px",
|
|
62
|
+
border: "1px solid #EAECF0",
|
|
63
|
+
boxShadow: "0 2px 4px rgba(0,0,0,0.02)",
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
<ConnectingCheckPoints>
|
|
67
|
+
<CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
|
|
68
|
+
<CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
|
|
69
|
+
<CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={true} />
|
|
70
|
+
<CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} isCompleted={false} />
|
|
71
|
+
</ConnectingCheckPoints>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
68
74
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
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>
|
|
75
|
+
<div style={{ flex: 1, marginLeft: "16px" }}>
|
|
76
|
+
<Card>
|
|
77
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "24px" }}>
|
|
78
|
+
<Header>{t("EKYC_REVIEW_DETAILS") || "Review Details"}</Header>
|
|
79
|
+
<div style={{ fontSize: "14px", fontWeight: "700", color: "#505A5F" }}>
|
|
80
|
+
{t("EKYC_K_NUMBER")}: <span style={{ color: "#0B0C0C" }}>{kNumber}</span>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
82
83
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
84
|
+
{/* Aadhaar Details Card */}
|
|
85
|
+
<Card style={{ padding: "24px", marginBottom: "24px", borderRadius: "12px", border: "1px solid #EAECF0" }}>
|
|
86
|
+
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
|
|
87
|
+
<CardHeader style={{ margin: 0, fontSize: "18px", color: "#0B0C0C" }}>
|
|
88
|
+
{t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar Details"}
|
|
89
|
+
</CardHeader>
|
|
90
|
+
<span onClick={handleEditAadhaar} style={{ color: "#3A8DCC", fontWeight: "600", cursor: "pointer", fontSize: "14px" }}>
|
|
91
|
+
{t("CS_COMMON_EDIT")}
|
|
92
|
+
</span>
|
|
93
|
+
</div>
|
|
94
|
+
<StatusTable>
|
|
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>
|
|
94
101
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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>
|
|
111
|
+
</div>
|
|
112
|
+
<StatusTable>
|
|
113
|
+
<Row label={t("EKYC_FULL_ADDRESS")} text={addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini"} />
|
|
114
|
+
<Row label={t("EKYC_PINCODE")} text={addressDetails.pincode || "110085"} />
|
|
115
|
+
</StatusTable>
|
|
116
|
+
</Card>
|
|
108
117
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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>
|
|
113
125
|
</div>
|
|
114
|
-
|
|
115
|
-
|
|
126
|
+
<StatusTable>
|
|
127
|
+
<Row label={t("Property_Owner")} text={propertyDetails.ownerType || "OWNER"} />
|
|
128
|
+
<Row label={t("PID_Number")} text={propertyDetails.pidNumber || t("CS_NA")} />
|
|
129
|
+
<Row label={t("Type_of_Connection")} text={propertyDetails.connectionType?.label || t("CS_NA")} />
|
|
130
|
+
<Row label={t("Connection_Category")} text={propertyDetails.connectionCategory?.label || t("CS_NA")} />
|
|
131
|
+
</StatusTable>
|
|
132
|
+
</Card>
|
|
133
|
+
|
|
134
|
+
<ActionBar>
|
|
135
|
+
<SubmitBar label={t("ES_COMMON_SUBMIT") || "Submit"} onSubmit={handleSubmit} />
|
|
136
|
+
</ActionBar>
|
|
137
|
+
</Card>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
);
|
|
116
141
|
};
|
|
117
142
|
|
|
118
143
|
export default Review;
|