@djb25/digit-ui-module-ekyc 1.0.1 → 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.
Files changed (11) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +2579 -2254
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/ConnectionDetailsView.js +3 -19
  7. package/src/pages/employee/AadhaarVerification.js +2 -1
  8. package/src/pages/employee/AddressDetails.js +2 -1
  9. package/src/pages/employee/PropertyInfo.js +60 -8
  10. package/src/pages/employee/Review.js +118 -0
  11. package/src/pages/employee/index.js +7 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djb25/digit-ui-module-ekyc",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Digit UI Module for Ekyc",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.modern.js",
package/src/components/ConnectionDetailsView.js CHANGED
@@ -63,25 +63,9 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
63
63
  <CardLabel>{t("EKYC_NO_CONNECTION_DETAILS_FOUND")}</CardLabel>
64
64
  )}
65
65
 
66
- <button
67
- type="button"
68
- onClick={handleStartVerification}
69
- style={{
70
- background: "none",
71
- border: "none",
72
- color: "#0076f3ff",
73
- fontWeight: "600",
74
- cursor: "pointer",
75
- fontSize: "14px",
76
- padding: "10px",
77
-
78
- }}
79
- >
80
- {t("")}
81
- </button>
82
-
83
-
84
- <SubmitBar label={t("EKYC_START_VERIFICATION")} onSubmit={handleStartVerification} style={{ borderRadius: "12px", marginLeft: "1100px" }} />
66
+ <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "16px" }}>
67
+ <SubmitBar label={t("EKYC_START_VERIFICATION")} onSubmit={handleStartVerification} style={{ borderRadius: "12px", margin: 0 }} />
68
+ </div>
85
69
  {/* <button
86
70
  className="submit-bar"
87
71
  style={{
package/src/pages/employee/AadhaarVerification.js CHANGED
@@ -128,10 +128,11 @@ const AadhaarVerification = () => {
128
128
  </Card>
129
129
 
130
130
  {/* Progress Steps Sidebar */}
131
- <div style={{ padding: "8px 16px" }}>
131
+ <div style={{ backgroundColor: "#FFFFFF", padding: "16px", borderRadius: "8px", border: "1px solid #EAECF0", boxShadow: "0 2px 4px rgba(0,0,0,0.02)" }}>
132
132
  <ConnectingCheckPoints>
133
133
  <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={showAddressSection} />
134
134
  <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={addressData !== null} />
135
+ <CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={false} />
135
136
  <CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} />
136
137
  </ConnectingCheckPoints>
137
138
  </div>
package/src/pages/employee/AddressDetails.js CHANGED
@@ -424,10 +424,11 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
424
424
  </Card>
425
425
 
426
426
  {/* Progress Steps Sidebar */}
427
- <div style={{ padding: "8px 16px" }}>
427
+ <div style={{ backgroundColor: "#FFFFFF", padding: "16px", borderRadius: "8px", border: "1px solid #EAECF0", boxShadow: "0 2px 4px rgba(0,0,0,0.02)" }}>
428
428
  <ConnectingCheckPoints>
429
429
  <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
430
430
  <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
431
+ <CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={false} />
431
432
  <CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} />
432
433
  </ConnectingCheckPoints>
433
434
  </div>
package/src/pages/employee/PropertyInfo.js CHANGED
@@ -9,6 +9,11 @@ const PropertyInfo = () => {
9
9
  const location = useLocation();
10
10
 
11
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);
12
17
 
13
18
  const [ownerType, setOwnerType] = useState("OWNER");
14
19
  const [pidNumber, setPidNumber] = useState("");
@@ -22,7 +27,19 @@ const PropertyInfo = () => {
22
27
  const cameraRef = useRef(null);
23
28
 
24
29
  const handleSaveAndContinue = () => {
25
- history.push("/digit-ui/employee/ekyc/dashboard");
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
+ });
26
43
  };
27
44
 
28
45
  const SuitcaseIcon = () => (
@@ -73,7 +90,7 @@ const PropertyInfo = () => {
73
90
  </Card>
74
91
 
75
92
  {/* Progress Steps Sidebar */}
76
- <div style={{ padding: "8px 16px" }}>
93
+ <div style={{ backgroundColor: "#FFFFFF", padding: "16px", borderRadius: "8px", border: "1px solid #EAECF0", boxShadow: "0 2px 4px rgba(0,0,0,0.02)" }}>
77
94
  <ConnectingCheckPoints>
78
95
  <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
79
96
  <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
@@ -164,17 +181,50 @@ const PropertyInfo = () => {
164
181
 
165
182
  {/* Dropdowns */}
166
183
  {[
167
- { label: "Type_of_Connection", state: connectionType, setState: setConnectionType },
168
- { label: "Connection_Category", state: connectionCategory, setState: setConnectionCategory },
169
- { label: "User_Type", state: userType, setState: setUserType },
170
- { label: "No_of_Floor", state: noOfFloors, setState: setNoOfFloors }
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
+ }
171
221
  ].map((item, idx) => (
172
222
  <div key={idx} style={{ marginBottom: "20px" }}>
173
223
  <CardLabel style={{ fontSize: "14px", fontWeight: "600", color: "#344054", marginBottom: "8px" }}>{t(item.label)}</CardLabel>
174
224
  <Dropdown
175
225
  selected={item.state}
176
226
  select={item.setState}
177
- option={[{ label: `Select ${item.label}`, value: "" }]}
227
+ option={item.options || [{ label: `Select ${item.label}`, value: "" }]}
178
228
  optionKey="label"
179
229
  t={t}
180
230
  style={{ borderRadius: "12px", border: "1px solid #D0D5DD", height: "48px" }}
@@ -340,7 +390,9 @@ const PropertyInfo = () => {
340
390
  {t("This_section_is_enabled_only_if_user_is_not_the_owner.")}
341
391
  </div>
342
392
  </div>
343
- <SubmitBar label={t("Save_&_Continue")} onSubmit={handleSaveAndContinue} style={{ borderRadius: "8px", height: "48px", marginTop: "24px", marginRight: "1100px" }} />
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>
344
396
  </Card>
345
397
 
346
398
 
package/src/pages/employee/Review.js ADDED
@@ -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;
package/src/pages/employee/index.js CHANGED
@@ -7,6 +7,7 @@ import Create from "./Create";
7
7
  import AadhaarVerification from "./AadhaarVerification";
8
8
  import AddressDetails from "./AddressDetails";
9
9
  import PropertyInfo from "./PropertyInfo";
10
+ import Review from "./Review";
10
11
 
11
12
  const EmployeeApp = ({ path }) => {
12
13
  const { t } = useTranslation();
@@ -22,6 +23,7 @@ const EmployeeApp = ({ path }) => {
22
23
  if (pathname.includes("/aadhaar-verification")) return "EKYC_AADHAAR_VERIFICATION";
23
24
  if (pathname.includes("/address-details")) return "EKYC_ADDRESS_DETAILS";
24
25
  if (pathname.includes("/property-info")) return "EKYC_PROPERTY_INFO";
26
+ if (pathname.includes("/review")) return "EKYC_REVIEW";
25
27
  return "ES_COMMON_INBOX";
26
28
  };
27
29
 
@@ -76,6 +78,11 @@ const EmployeeApp = ({ path }) => {
76
78
  path={`${path}/property-info`}
77
79
  component={() => <PropertyInfo />}
78
80
  />
81
+
82
+ <PrivateRoute
83
+ path={`${path}/review`}
84
+ component={() => <Review />}
85
+ />
79
86
 
80
87
  <PrivateRoute
81
88
  path={`${path}/`}