@djb25/digit-ui-module-ekyc 1.0.2 → 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djb25/digit-ui-module-ekyc",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Digit UI Module for Ekyc",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.modern.js",
@@ -4,73 +4,73 @@ import { useTranslation } from "react-i18next";
4
4
  import { useHistory, useRouteMatch } from "react-router-dom";
5
5
 
6
6
  const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading }) => {
7
- const { t } = useTranslation();
8
- const history = useHistory();
9
- const { path } = useRouteMatch();
7
+ const { t } = useTranslation();
8
+ const history = useHistory();
9
+ const { path } = useRouteMatch();
10
10
 
11
- const [showModal, setShowModal] = useState(false);
12
- const [selectedOption, setSelectedOption] = useState({ code: "SELF", name: "EKYC_SELF" });
11
+ const [showModal, setShowModal] = useState(false);
12
+ const [selectedOption, setSelectedOption] = useState({ code: "SELF", name: "EKYC_SELF" });
13
13
 
14
- const options = [
15
- { code: "SELF", name: "EKYC_SELF" },
16
- { code: "OTHER", name: "EKYC_OTHER" }
17
- ];
14
+ const options = [
15
+ { code: "SELF", name: "EKYC_SELF" },
16
+ { code: "OTHER", name: "EKYC_OTHER" },
17
+ ];
18
18
 
19
- const handleStartVerification = () => {
20
- setShowModal(true);
21
- };
19
+ const handleStartVerification = () => {
20
+ setShowModal(true);
21
+ };
22
22
 
23
- 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", "");
26
- history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
27
- setShowModal(false);
28
- };
23
+ 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", "");
26
+ history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
27
+ setShowModal(false);
28
+ };
29
29
 
30
- const handleRaiseCorrection = () => {
31
- console.log("Raise Correction clicked");
32
- };
30
+ const handleRaiseCorrection = () => {
31
+ console.log("Raise Correction clicked");
32
+ };
33
33
 
34
- if (isLoading) {
35
- return <Loader />;
36
- }
34
+ if (isLoading) {
35
+ return <Loader />;
36
+ }
37
37
 
38
- if (!connectionDetails) {
39
- return null;
40
- }
38
+ if (!connectionDetails) {
39
+ return null;
40
+ }
41
41
 
42
- return (
43
- <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>
42
+ return (
43
+ <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
50
 
51
- <CardHeader style={{ marginTop: "24px" }}>{t("EKYC_CONNECTION_DETAILS")}</CardHeader>
52
- {connectionDetails?.connectionDetailsInfo ? (
53
- <StatusTable>
54
- <Row label={t("EKYC_CONSUMER_NAME")} text={connectionDetails.connectionDetailsInfo.consumerName || t("CS_NA")} />
55
- <Row label={t("EKYC_ADDRESS")} text={connectionDetails.connectionDetailsInfo.address || t("CS_NA")} />
56
- <Row label={t("EKYC_CONNECTION_TYPE")} text={connectionDetails.connectionDetailsInfo.connectionType || t("CS_NA")} />
57
- <Row label={t("EKYC_METER_NO")} text={connectionDetails.connectionDetailsInfo.meterNumber || t("CS_NA")} />
58
- <Row label={t("EKYC_PHONE_NO")} text={connectionDetails.connectionDetailsInfo.phoneNumber || t("CS_NA")} />
59
- <Row label={t("EKYC_EMAIL")} text={connectionDetails.connectionDetailsInfo.email || t("CS_NA")} />
60
- <Row label={t("EKYC_STATUS")} text={connectionDetails.connectionDetailsInfo.statusflag || t("CS_NA")} />
61
- </StatusTable>
62
- ) : (
63
- <CardLabel>{t("EKYC_NO_CONNECTION_DETAILS_FOUND")}</CardLabel>
64
- )}
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
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 }} />
68
- </div>
69
- {/* <button
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>
69
+ {/* <button
70
70
  className="submit-bar"
71
71
  style={{
72
72
  marginLeft: "10px",
73
- background: "#f47738",
73
+ background: "#3A8DCC",
74
74
  border: "none",
75
75
  color: "#fff",
76
76
  padding: "10px 24px",
@@ -83,32 +83,36 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
83
83
  >
84
84
  {t("EKYC_RAISE_CORRECTION")}
85
85
  </button> */}
86
- </Card>
86
+ </Card>
87
87
 
88
- {showModal && (
89
- <Modal
90
- headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
91
- headerBarEnd={<span onClick={() => setShowModal(false)} style={{ cursor: "pointer", padding: "8px" }}>X</span>}
92
- actionSaveLabel={t("ES_COMMON_CONFIRM")}
93
- actionSaveOnSubmit={onModalConfirm}
94
- actionCancelLabel={t("ES_COMMON_CANCEL")}
95
- actionCancelOnSubmit={() => setShowModal(false)}
96
- style={{ borderRadius: "12px" }}
97
- >
98
- <div style={{ padding: "24px" }}>
99
- <RadioButtons
100
- options={options}
101
- optionsKey="name"
102
- selectedOption={selectedOption}
103
- onSelect={setSelectedOption}
104
- style={{ display: "flex", flexDirection: "column", gap: "12px", buttonStyle: { borderRadius: "5px" } }}
105
- t={t}
106
- />
107
- </div>
108
- </Modal>
109
- )}
110
- </React.Fragment>
111
- );
88
+ {showModal && (
89
+ <Modal
90
+ headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
91
+ headerBarEnd={
92
+ <span onClick={() => setShowModal(false)} style={{ cursor: "pointer", padding: "8px" }}>
93
+ X
94
+ </span>
95
+ }
96
+ actionSaveLabel={t("ES_COMMON_CONFIRM")}
97
+ actionSaveOnSubmit={onModalConfirm}
98
+ actionCancelLabel={t("ES_COMMON_CANCEL")}
99
+ actionCancelOnSubmit={() => setShowModal(false)}
100
+ style={{ borderRadius: "12px" }}
101
+ >
102
+ <div style={{ padding: "24px" }}>
103
+ <RadioButtons
104
+ options={options}
105
+ optionsKey="name"
106
+ selectedOption={selectedOption}
107
+ onSelect={setSelectedOption}
108
+ style={{ display: "flex", flexDirection: "column", gap: "12px", buttonStyle: { borderRadius: "5px" } }}
109
+ t={t}
110
+ />
111
+ </div>
112
+ </Modal>
113
+ )}
114
+ </React.Fragment>
115
+ );
112
116
  };
113
117
 
114
118
  export default ConnectionDetailsView;
@@ -4,144 +4,135 @@ import { Table, SubmitBar, Header, Card, HomeIcon, PersonIcon } from "@djb25/dig
4
4
  import { Link } from "react-router-dom";
5
5
  import StatusCards from "./StatusCards";
6
6
 
7
- const DesktopInbox = ({
8
- tableConfig,
9
- filterComponent,
10
- ...props
11
- }) => {
12
- const {
13
- data,
14
- isLoading,
15
- onSort,
16
- onNextPage,
17
- onPrevPage,
18
- currentPage,
19
- pageSizeLimit,
20
- onPageSizeChange,
21
- parentRoute,
22
- searchParams,
23
- sortParams,
24
- totalRecords,
25
- countData,
26
- onSearch,
27
- searchFields,
28
- } = props;
29
- const { t } = useTranslation();
30
- const [FilterComponent, setComp] = React.useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
7
+ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
8
+ const {
9
+ data,
10
+ isLoading,
11
+ onSort,
12
+ onNextPage,
13
+ onPrevPage,
14
+ currentPage,
15
+ pageSizeLimit,
16
+ onPageSizeChange,
17
+ parentRoute,
18
+ searchParams,
19
+ sortParams,
20
+ totalRecords,
21
+ countData,
22
+ onSearch,
23
+ searchFields,
24
+ } = props;
25
+ const { t } = useTranslation();
26
+ const [FilterComponent, setComp] = React.useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
31
27
 
32
- const columns = useMemo(
33
- () => [
34
- {
35
- Header: t("EKYC_APPLICATION_NO"),
36
- accessor: "applicationNumber",
37
- Cell: ({ row }) => {
38
- const applicationNumber = row.original?.applicationNumber || "NA";
39
- return (
40
- <Link to={`${parentRoute}/application-details/${applicationNumber}`}>
41
- <span className="ekyc-application-link">
42
- {applicationNumber}
43
- </span>
44
- </Link>
45
- );
46
- },
47
- },
48
- {
49
- Header: t("EKYC_CITIZEN_NAME"),
50
- accessor: "citizenName",
51
- Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>
52
- },
53
- {
54
- Header: t("EKYC_MOBILE_NO"),
55
- accessor: "mobileNumber",
56
- Cell: ({ row }) => <span>{row.original?.mobileNumber || "NA"}</span>
57
- },
58
- {
59
- Header: t("EKYC_STATUS"),
60
- accessor: "status",
61
- Cell: ({ row }) => {
62
- const status = row.original?.status || "DEFAULT";
63
- return (
64
- <span className={`ekyc-status-tag ${status}`}>
65
- {t(`EKYC_STATUS_${status}`)}
66
- </span>
67
- );
68
- },
69
- },
70
- ],
71
- [t, parentRoute]
72
- );
28
+ const columns = useMemo(
29
+ () => [
30
+ {
31
+ Header: t("EKYC_APPLICATION_NO"),
32
+ accessor: "applicationNumber",
33
+ Cell: ({ row }) => {
34
+ const applicationNumber = row.original?.applicationNumber || "NA";
35
+ return (
36
+ <Link to={`${parentRoute}/application-details/${applicationNumber}`}>
37
+ <span className="ekyc-application-link">{applicationNumber}</span>
38
+ </Link>
39
+ );
40
+ },
41
+ },
42
+ {
43
+ Header: t("EKYC_CITIZEN_NAME"),
44
+ accessor: "citizenName",
45
+ Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>,
46
+ },
47
+ {
48
+ Header: t("EKYC_MOBILE_NO"),
49
+ accessor: "mobileNumber",
50
+ Cell: ({ row }) => <span>{row.original?.mobileNumber || "NA"}</span>,
51
+ },
52
+ {
53
+ Header: t("EKYC_STATUS"),
54
+ accessor: "status",
55
+ Cell: ({ row }) => {
56
+ const status = row.original?.status || "DEFAULT";
57
+ return <span className={`ekyc-status-tag ${status}`}>{t(`EKYC_STATUS_${status}`)}</span>;
58
+ },
59
+ },
60
+ ],
61
+ [t, parentRoute]
62
+ );
73
63
 
74
- const tableData = useMemo(() => {
75
- return data?.items || [];
76
- }, [data]);
64
+ const tableData = useMemo(() => {
65
+ return data?.items || [];
66
+ }, [data]);
77
67
 
78
- return (
79
- <div className="inbox-container">
80
- <div className="filters-container">
81
- {/* Sidebar Title Card */}
82
- <Card className="sidebar-title-card" style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}>
83
- <div className="icon-container" style={{ color: "#F47738", marginRight: "12px" }}>
84
- <HomeIcon style={{ width: "24px", height: "24px" }} />
85
- </div>
86
- <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>
87
- {t("ACTION_TEST_EKYC")}
88
- </div>
89
- </Card>
68
+ return (
69
+ <div className="inbox-container">
70
+ <div className="filters-container">
71
+ {/* Sidebar Title Card */}
72
+ <Card
73
+ className="sidebar-title-card"
74
+ style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
75
+ >
76
+ <div className="icon-container" style={{ color: "#3A8DCC", marginRight: "12px" }}>
77
+ <HomeIcon style={{ width: "24px", height: "24px" }} />
78
+ </div>
79
+ <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("ACTION_TEST_EKYC")}</div>
80
+ </Card>
90
81
 
91
- <div>
92
- {FilterComponent && (
93
- <FilterComponent
94
- defaultSearchParams={props.defaultSearchParams}
95
- onFilterChange={props.onSearch}
96
- searchParams={searchParams}
97
- type="desktop"
98
- moduleCode="EKYC"
99
- />
100
- )}
101
- </div>
102
- </div>
82
+ <div>
83
+ {FilterComponent && (
84
+ <FilterComponent
85
+ defaultSearchParams={props.defaultSearchParams}
86
+ onFilterChange={props.onSearch}
87
+ searchParams={searchParams}
88
+ type="desktop"
89
+ moduleCode="EKYC"
90
+ />
91
+ )}
92
+ </div>
93
+ </div>
103
94
 
104
- <div style={{ flex: 1, marginLeft: "16px" }}>
105
- {/* Header Section (retaining for context/actions) */}
106
- {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
95
+ <div style={{ flex: 1, marginLeft: "16px" }}>
96
+ {/* Header Section (retaining for context/actions) */}
97
+ {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
107
98
  <Header className="title" style={{ margin: 0 }}>{t("EKYC_INBOX_HEADER")}</Header>
108
99
  <Link to={`${parentRoute}/create-kyc`}>
109
100
  <SubmitBar label={t("EKYC_CREATE_KYC")} style={{ borderRadius: "8px" }} />
110
101
  </Link>
111
102
  </div> */}
112
103
 
113
- {/* Metrics Section (The Card) */}
114
- <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
115
- <StatusCards countData={countData} />
116
- </Card>
104
+ {/* Metrics Section (The Card) */}
105
+ <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
106
+ <StatusCards countData={countData} />
107
+ </Card>
117
108
 
118
- {/* Table Section */}
119
- <div className="result" style={{ flex: 1 }}>
120
- <Card className="ekyc-table-card" style={{ padding: 0 }}>
121
- <Table
122
- t={t}
123
- data={tableData}
124
- columns={columns}
125
- isLoading={isLoading}
126
- onSort={onSort}
127
- sortParams={sortParams}
128
- totalRecords={totalRecords}
129
- onNextPage={onNextPage}
130
- onPrevPage={onPrevPage}
131
- currentPage={currentPage}
132
- pageSizeLimit={pageSizeLimit}
133
- onPageSizeChange={onPageSizeChange}
134
- getCellProps={(cellInfo) => {
135
- return {
136
- className: "ekyc-table-cell"
137
- };
138
- }}
139
- />
140
- </Card>
141
- </div>
142
- </div>
109
+ {/* Table Section */}
110
+ <div className="result" style={{ flex: 1 }}>
111
+ <Card className="ekyc-table-card" style={{ padding: 0 }}>
112
+ <Table
113
+ t={t}
114
+ data={tableData}
115
+ columns={columns}
116
+ isLoading={isLoading}
117
+ onSort={onSort}
118
+ sortParams={sortParams}
119
+ totalRecords={totalRecords}
120
+ onNextPage={onNextPage}
121
+ onPrevPage={onPrevPage}
122
+ currentPage={currentPage}
123
+ pageSizeLimit={pageSizeLimit}
124
+ onPageSizeChange={onPageSizeChange}
125
+ getCellProps={(cellInfo) => {
126
+ return {
127
+ className: "ekyc-table-cell",
128
+ };
129
+ }}
130
+ />
131
+ </Card>
143
132
  </div>
144
- );
133
+ </div>
134
+ </div>
135
+ );
145
136
  };
146
137
 
147
- export default DesktopInbox;
138
+ export default DesktopInbox;