@djb25/digit-ui-module-ekyc 1.0.7 → 1.0.8

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djb25/digit-ui-module-ekyc",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "description": "Digit UI Module for Ekyc",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.modern.js",
package/src/Module.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import React from "react";
2
+ import { useTranslation } from "react-i18next";
2
3
  import { useRouteMatch } from "react-router-dom";
4
+ import { CitizenHomeCard, DocumentIcon } from "@djb25/digit-ui-react-components";
3
5
  import EKYCCard from "./components/EKYCCard";
4
6
  import Inbox from "./pages/employee/Inbox";
5
7
  import DesktopInbox from "./components/DesktopInbox";
6
8
  import MobileInbox from "./components/MobileInbox";
7
9
  import Filter from "./components/Filter";
8
10
  import EmployeeApp from "./pages/employee";
11
+ import CitizenApp from "./pages/citizen";
9
12
 
10
13
  export const EkycModule = ({ stateCode, userType, tenants }) => {
11
14
  const { path, url } = useRouteMatch();
@@ -19,7 +22,19 @@ export const EkycModule = ({ stateCode, userType, tenants }) => {
19
22
  }
20
23
  if (userType === "employee") {
21
24
  return <EmployeeApp path={path} url={url} userType={userType} tenants={tenants} />;
22
- } else return null;
25
+ } else return <CitizenApp />;
26
+ };
27
+
28
+ export const EkycLinks = ({ matchPath, userType }) => {
29
+ const { t } = useTranslation();
30
+ const links = [
31
+ {
32
+ link: `${matchPath}/create-kyc`,
33
+ i18nKey: t("EKYC_CREATE_KYC"),
34
+ },
35
+ ];
36
+
37
+ return <CitizenHomeCard header={t("EKYC_MODULE_NAME")} links={links} Icon={() => <DocumentIcon className="fill-path-primary-main" />} />;
23
38
  };
24
39
 
25
40
  const componentsToRegister = {
@@ -29,6 +44,7 @@ const componentsToRegister = {
29
44
  EKYCDesktopInbox: DesktopInbox,
30
45
  EKYCMobileInbox: MobileInbox,
31
46
  EKYC_INBOX_FILTER: (props) => <Filter {...props} />,
47
+ EkycLinks,
32
48
  };
33
49
 
34
50
  export const initEkycComponents = () => {
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from "react";
2
- import { Card, CardHeader, StatusTable, Row, ActionBar, Modal, RadioButtons, Loader, CardLabel, SubmitBar } from "@djb25/digit-ui-react-components";
2
+ import { Loader, Modal, RadioButtons } from "@djb25/digit-ui-react-components";
3
3
  import { useTranslation } from "react-i18next";
4
4
  import { useHistory, useRouteMatch } from "react-router-dom";
5
5
 
@@ -16,75 +16,196 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
16
16
  { code: "OTHER", name: "EKYC_OTHER" },
17
17
  ];
18
18
 
19
- const handleStartVerification = () => {
20
- setShowModal(true);
21
- };
19
+ const handleStartVerification = () => setShowModal(true);
22
20
 
23
21
  const onModalConfirm = () => {
24
- // Correctly handle redirection from create-kyc or dashboard
25
- const parentPath = path.includes("/create-kyc") ? path.replace("/create-kyc", "") : path.replace("/k-details", "");
22
+ const parentPath = path.includes("/create-kyc")
23
+ ? path.replace("/create-kyc", "")
24
+ : path.replace("/k-details", "");
26
25
  history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
27
26
  setShowModal(false);
28
27
  };
29
28
 
30
- const handleRaiseCorrection = () => {
31
- console.log("Raise Correction clicked");
32
- };
33
-
34
- if (isLoading) {
35
- return <Loader />;
36
- }
29
+ if (isLoading) return <Loader />;
30
+ if (!connectionDetails) return null;
37
31
 
38
- if (!connectionDetails) {
39
- return null;
40
- }
32
+ const details = connectionDetails?.connectionDetails || {};
33
+ const statusFlag = details.statusflag || "";
34
+ const isActive = statusFlag?.toLowerCase() === "active" || statusFlag === "A";
41
35
 
42
36
  return (
43
37
  <React.Fragment>
44
- <Card className="ekyc-create-card" style={{ padding: "24px" }}>
45
- <CardHeader>{t("EKYC_K_NUMBER_DETAILS")}</CardHeader>
46
- <StatusTable>
47
- <Row label={t("EKYC_K_NUMBER")} text={kNumber || t("CS_NA")} />
48
- <Row label={t("EKYC_K_NAME")} text={kName || t("CS_NA")} />
49
- </StatusTable>
50
-
51
- <CardHeader style={{ marginTop: "24px" }}>{t("EKYC_CONNECTION_DETAILS")}</CardHeader>
52
- {connectionDetails?.connectionDetails ? (
53
- <StatusTable>
54
- <Row label={t("EKYC_CONSUMER_NAME")} text={connectionDetails.connectionDetails.consumerName || t("CS_NA")} />
55
- <Row label={t("EKYC_ADDRESS")} text={connectionDetails.connectionDetails.address || t("CS_NA")} />
56
- <Row label={t("EKYC_CONNECTION_TYPE")} text={connectionDetails.connectionDetails.connectionType || t("CS_NA")} />
57
- <Row label={t("EKYC_METER_NO")} text={connectionDetails.connectionDetails.meterNumber || t("CS_NA")} />
58
- <Row label={t("EKYC_PHONE_NO")} text={connectionDetails.connectionDetails.phoneNumber || t("CS_NA")} />
59
- <Row label={t("EKYC_EMAIL")} text={connectionDetails.connectionDetails.email || t("CS_NA")} />
60
- <Row label={t("EKYC_STATUS")} text={connectionDetails.connectionDetails.statusflag || t("CS_NA")} />
61
- </StatusTable>
62
- ) : (
63
- <CardLabel>{t("EKYC_NO_CONNECTION_DETAILS_FOUND")}</CardLabel>
64
- )}
65
-
66
- <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "16px" }}>
67
- <SubmitBar label={t("EKYC_START_VERIFICATION")} onSubmit={handleStartVerification} style={{ borderRadius: "12px", margin: 0 }} />
38
+ <div className="ekyc-employee-container">
39
+ {/* Main Card */}
40
+ <div className="connection-details-card">
41
+ {/* Card Header */}
42
+ <div className="details-card-header">
43
+ <div className="header-title-wrapper">
44
+ <div className="header-icon-bg">
45
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3A7BD5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
46
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
47
+ <circle cx="12" cy="7" r="4" />
48
+ </svg>
49
+ </div>
50
+ <span className="header-title-text">
51
+ {t("EKYC_K_NUMBER_DETAILS") || "Consumer Identity Details"}
52
+ </span>
53
+ </div>
54
+
55
+ {/* Status Badge */}
56
+ <span className={`status-badge ${isActive ? "active" : "inactive"}`}>
57
+ {isActive ? (t("EKYC_ACTIVE_CONNECTION") || "Active Connection") : (statusFlag || t("CS_NA"))}
58
+ </span>
59
+ </div>
60
+
61
+ {/* Card Body */}
62
+ <div className="details-card-body">
63
+ <div className="body-content-row">
64
+ {/* Left: Verification Parameters */}
65
+ <div className="detail-section">
66
+ <div className="section-title">
67
+ {t("EKYC_VERIFICATION_PARAMETERS") || "Verification Parameters"}
68
+ </div>
69
+
70
+ <div className="data-grid">
71
+ {/* Consumer Name */}
72
+ <div className="data-item">
73
+ <div className="data-label">
74
+ {t("EKYC_CONSUMER_NAME") || "Consumer Name"}
75
+ </div>
76
+ <div className="data-value">
77
+ {details.consumerName || kName || t("CS_NA")}
78
+ </div>
79
+ </div>
80
+
81
+ {/* K Number */}
82
+ <div className="data-item">
83
+ <div className="data-label">
84
+ {t("EKYC_K_NUMBER") || "K Number"}
85
+ </div>
86
+ <div className="data-value blue">
87
+ {kNumber || t("CS_NA")}
88
+ </div>
89
+ </div>
90
+
91
+ {/* Meter Serial No */}
92
+ <div className="data-item">
93
+ <div className="data-label">
94
+ {t("EKYC_METER_NO") || "Meter Serial No."}
95
+ </div>
96
+ <div className="data-value">
97
+ {details.meterNumber || t("CS_NA")}
98
+ </div>
99
+ </div>
100
+
101
+ {/* Connection Type */}
102
+ <div className="data-item">
103
+ <div className="data-label">
104
+ {t("EKYC_CONNECTION_TYPE") || "Connection Type"}
105
+ </div>
106
+ <div className="data-value">
107
+ {details.connectionType || t("CS_NA")}
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ {/* Divider */}
114
+ <div className="vertical-divider" />
115
+
116
+ {/* Right: Address & Contact */}
117
+ <div className="detail-section">
118
+ <div className="section-title">
119
+ {t("EKYC_ADDRESS_AND_CONTACT") || "Address & Contact"}
120
+ </div>
121
+
122
+ {/* Service Address */}
123
+ <div className="address-block">
124
+ <div className="icon-wrapper-small">
125
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
126
+ <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" />
127
+ <circle cx="12" cy="10" r="3" />
128
+ </svg>
129
+ </div>
130
+ <div>
131
+ <div className="data-label">
132
+ {t("EKYC_ADDRESS") || "Service Address"}
133
+ </div>
134
+ <div className="address-text">
135
+ {details.address || t("CS_NA")}
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ {/* Contact + Email row */}
141
+ <div className="contact-row">
142
+ {/* Contact */}
143
+ <div className="contact-item">
144
+ <div className="icon-wrapper-small">
145
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
146
+ <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
147
+ <line x1="12" y1="18" x2="12.01" y2="18" />
148
+ </svg>
149
+ </div>
150
+ <div>
151
+ <div className="data-label">
152
+ {t("EKYC_PHONE_NO") || "Contact"}
153
+ </div>
154
+ <div className="address-text">
155
+ {details.phoneNumber || t("CS_NA")}
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ {/* Email */}
161
+ <div className="contact-item">
162
+ <div className="icon-wrapper-small">
163
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
164
+ <circle cx="12" cy="12" r="4" />
165
+ <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" />
166
+ </svg>
167
+ </div>
168
+ <div>
169
+ <div className="data-label">
170
+ {t("EKYC_EMAIL") || "Email Address"}
171
+ </div>
172
+ <div className="address-text">
173
+ {details.email || t("CS_NA")}
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ {/* Card Footer */}
183
+ <div className="details-card-footer">
184
+ {/* Last Verified */}
185
+ <div className="footer-meta-text">
186
+ {connectionDetails?.lastVerified
187
+ ? `${t("EKYC_LAST_VERIFIED") || "Last verified:"} ${connectionDetails.lastVerified}`
188
+ : ""}
189
+ </div>
190
+
191
+ {/* Action Buttons */}
192
+ <div className="action-btns-container">
193
+ <button
194
+ onClick={handleStartVerification}
195
+ className="primary-action-btn"
196
+ >
197
+ {t("EKYC_START_VERIFICATION") || "Start Verification"}
198
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
199
+ <line x1="5" y1="12" x2="19" y2="12" />
200
+ <polyline points="12 5 19 12 12 19" />
201
+ </svg>
202
+ </button>
203
+ </div>
204
+ </div>
68
205
  </div>
69
- {/* <button
70
- className="submit-bar"
71
- style={{
72
- marginLeft: "10px",
73
- background: "#3A8DCC",
74
- border: "none",
75
- color: "#fff",
76
- padding: "10px 24px",
77
- borderRadius: "12px",
78
- fontWeight: "600",
79
- cursor: "pointer",
80
- boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
81
- }}
82
- onClick={handleRaiseCorrection}
83
- >
84
- {t("EKYC_RAISE_CORRECTION")}
85
- </button> */}
86
- </Card>
206
+ </div>
87
207
 
208
+ {/* Modal */}
88
209
  {showModal && (
89
210
  <Modal
90
211
  headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
@@ -115,4 +236,4 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
115
236
  );
116
237
  };
117
238
 
118
- export default ConnectionDetailsView;
239
+ export default ConnectionDetailsView;
@@ -195,88 +195,86 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
195
195
  }, [data]);
196
196
 
197
197
  return (
198
- <div className="ground-container employee-app-container form-container">
199
- <div className="inbox-container" style={{ paddingBottom: "16px" }}>
200
- {showReviewModal && (
201
- <Modal
202
- headerBarMain={t("EKYC_APPLICATION_REVIEW") + (selectedKno ? ` - ${selectedKno}` : "")}
203
- headerBarEnd={<div style={{ cursor: "pointer", padding: "5px 10px", background: "#F2F4F7", borderRadius: "4px" }} onClick={() => setShowReviewModal(false)}>{t("CLOSE")}</div>}
204
- hideSubmit={true}
205
- popupStyles={{ width: "90%", height: "90%", maxWidth: "1000px" }}
206
- popupModuleMianStyles={{ height: "calc(100% - 60px)", padding: 0 }}
207
- >
208
- <iframe
209
- srcDoc={reviewHtml}
210
- src={!reviewHtml ? reviewUrl : undefined}
211
- title="Application Review"
212
- style={{ width: "100%", height: "100%", border: "none" }}
213
- />
214
- </Modal>
215
- )}
216
- {(isLoading || isReviewLoading) && <Loader />}
217
- <div className="filters-container">
218
- {/* Sidebar Title Card */}
219
- <Card
220
- className="sidebar-title-card"
221
- style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
222
- >
223
- <div className="icon-container" style={{ color: "#3A8DCC", marginRight: "12px" }}>
224
- <HomeIcon style={{ width: "24px", height: "24px" }} />
225
- </div>
226
- <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("ACTION_TEST_EKYC")}</div>
227
- </Card>
228
-
229
- <div>
230
- {FilterComponent && (
231
- <FilterComponent
232
- defaultSearchParams={props.defaultSearchParams}
233
- onFilterChange={props.onSearch}
234
- searchParams={searchParams}
235
- type="desktop"
236
- moduleCode="EKYC"
237
- />
238
- )}
198
+ <div className="inbox-container">
199
+ {showReviewModal && (
200
+ <Modal
201
+ headerBarMain={t("EKYC_APPLICATION_REVIEW") + (selectedKno ? ` - ${selectedKno}` : "")}
202
+ headerBarEnd={<div style={{ cursor: "pointer", padding: "5px 10px", background: "#F2F4F7", borderRadius: "4px" }} onClick={() => setShowReviewModal(false)}>{t("CLOSE")}</div>}
203
+ hideSubmit={true}
204
+ popupStyles={{ width: "90%", height: "90%", maxWidth: "1000px" }}
205
+ popupModuleMianStyles={{ height: "calc(100% - 60px)", padding: 0 }}
206
+ >
207
+ <iframe
208
+ srcDoc={reviewHtml}
209
+ src={!reviewHtml ? reviewUrl : undefined}
210
+ title="Application Review"
211
+ style={{ width: "100%", height: "100%", border: "none" }}
212
+ />
213
+ </Modal>
214
+ )}
215
+ {(isLoading || isReviewLoading) && <Loader />}
216
+ <div className="filters-container">
217
+ {/* Sidebar Title Card */}
218
+ <Card
219
+ className="sidebar-title-card"
220
+ style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
221
+ >
222
+ <div className="icon-container" style={{ color: "#3A8DCC", marginRight: "12px" }}>
223
+ <HomeIcon style={{ width: "24px", height: "24px" }} />
239
224
  </div>
225
+ <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("ACTION_TEST_EKYC")}</div>
226
+ </Card>
227
+
228
+ <div>
229
+ {FilterComponent && (
230
+ <FilterComponent
231
+ defaultSearchParams={props.defaultSearchParams}
232
+ onFilterChange={props.onSearch}
233
+ searchParams={searchParams}
234
+ type="desktop"
235
+ moduleCode="EKYC"
236
+ />
237
+ )}
240
238
  </div>
239
+ </div>
241
240
 
242
- <div style={{ flex: 1, marginLeft: "16px" }}>
243
- {/* Header Section (retaining for context/actions) */}
244
- {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
241
+ <div style={{ flex: 1, marginLeft: "16px" }}>
242
+ {/* Header Section (retaining for context/actions) */}
243
+ {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
245
244
  <Header className="title" style={{ margin: 0 }}>{t("EKYC_INBOX_HEADER")}</Header>
246
245
  <Link to={`${parentRoute}/create-kyc`}>
247
246
  <SubmitBar label={t("EKYC_CREATE_KYC")} style={{ borderRadius: "8px" }} />
248
247
  </Link>
249
248
  </div> */}
250
249
 
251
- {/* Metrics Section (The Card) */}
252
- <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
253
- <StatusCards countData={countData} />
254
- </Card>
250
+ {/* Metrics Section (The Card) */}
251
+ <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
252
+ <StatusCards countData={countData} />
253
+ </Card>
255
254
 
256
- {/* Table Section */}
257
- <div className="result" style={{ flex: 1 }}>
258
- <Card className="ekyc-table-card" style={{ padding: 0 }}>
259
- <Table
260
- t={t}
261
- data={tableData}
262
- columns={columns}
263
- isLoading={isLoading}
264
- onSort={onSort}
265
- sortParams={sortParams}
266
- totalRecords={totalRecords}
267
- onNextPage={onNextPage}
268
- onPrevPage={onPrevPage}
269
- currentPage={currentPage}
270
- pageSizeLimit={pageSizeLimit}
271
- onPageSizeChange={onPageSizeChange}
272
- getCellProps={(cellInfo) => {
273
- return {
274
- className: "ekyc-table-cell",
275
- };
276
- }}
277
- />
278
- </Card>
279
- </div>
255
+ {/* Table Section */}
256
+ <div className="result" style={{ flex: 1 }}>
257
+ <Card className="ekyc-table-card" style={{ padding: 0 }}>
258
+ <Table
259
+ t={t}
260
+ data={tableData}
261
+ columns={columns}
262
+ isLoading={isLoading}
263
+ onSort={onSort}
264
+ sortParams={sortParams}
265
+ totalRecords={totalRecords}
266
+ onNextPage={onNextPage}
267
+ onPrevPage={onPrevPage}
268
+ currentPage={currentPage}
269
+ pageSizeLimit={pageSizeLimit}
270
+ onPageSizeChange={onPageSizeChange}
271
+ getCellProps={(cellInfo) => {
272
+ return {
273
+ className: "ekyc-table-cell",
274
+ };
275
+ }}
276
+ />
277
+ </Card>
280
278
  </div>
281
279
  </div>
282
280
  </div>
@@ -24,6 +24,10 @@ const EKYCCard = () => {
24
24
  label: t("EKYC_CREATE_KYC"),
25
25
  link: `/digit-ui/employee/ekyc/create-kyc`
26
26
  },
27
+ // {
28
+ // label: t("EKYC_MAPPING"),
29
+ // link: `/digit-ui/employee/ekyc/mapping`
30
+ // }
27
31
  ]
28
32
  }
29
33