@djb25/digit-ui-module-ekyc 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@djb25/digit-ui-module-ekyc",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "description": "Digit UI Module for Ekyc",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",

package/src/components/ConnectionDetailsView.js

@@ -4,89 +4,73 @@ import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
 
 const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading }) => {
-    const { t } = useTranslation();
-    const history = useHistory();
-    const { path } = useRouteMatch();
-
-    const [showModal, setShowModal] = useState(false);
-    const [selectedOption, setSelectedOption] = useState({ code: "SELF", name: "EKYC_SELF" });
-
-    const options = [
-        { code: "SELF", name: "EKYC_SELF" },
-        { code: "OTHER", name: "EKYC_OTHER" }
-    ];
-
-    const handleStartVerification = () => {
-        setShowModal(true);
-    };
-
-    const onModalConfirm = () => {
-        // Correctly handle redirection from create-kyc or dashboard
-        const parentPath = path.includes("/create-kyc") ? path.replace("/create-kyc", "") : path.replace("/k-details", "");
-        history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
-        setShowModal(false);
-    };
-
-    const handleRaiseCorrection = () => {
-        console.log("Raise Correction clicked");
-    };
-
-    if (isLoading) {
-        return <Loader />;
-    }
-
-    if (!connectionDetails) {
-        return null;
-    }
-
-    return (
-        <React.Fragment>
-            <Card className="ekyc-create-card" style={{ padding: "24px" }}>
-                <CardHeader>{t("EKYC_K_NUMBER_DETAILS")}</CardHeader>
-                <StatusTable>
-                    <Row label={t("EKYC_K_NUMBER")} text={kNumber || t("CS_NA")} />
-                    <Row label={t("EKYC_K_NAME")} text={kName || t("CS_NA")} />
-                </StatusTable>
-
-                <CardHeader style={{ marginTop: "24px" }}>{t("EKYC_CONNECTION_DETAILS")}</CardHeader>
-                {connectionDetails?.connectionDetailsInfo ? (
-                    <StatusTable>
-                        <Row label={t("EKYC_CONSUMER_NAME")} text={connectionDetails.connectionDetailsInfo.consumerName || t("CS_NA")} />
-                        <Row label={t("EKYC_ADDRESS")} text={connectionDetails.connectionDetailsInfo.address || t("CS_NA")} />
-                        <Row label={t("EKYC_CONNECTION_TYPE")} text={connectionDetails.connectionDetailsInfo.connectionType || t("CS_NA")} />
-                        <Row label={t("EKYC_METER_NO")} text={connectionDetails.connectionDetailsInfo.meterNumber || t("CS_NA")} />
-                        <Row label={t("EKYC_PHONE_NO")} text={connectionDetails.connectionDetailsInfo.phoneNumber || t("CS_NA")} />
-                        <Row label={t("EKYC_EMAIL")} text={connectionDetails.connectionDetailsInfo.email || t("CS_NA")} />
-                        <Row label={t("EKYC_STATUS")} text={connectionDetails.connectionDetailsInfo.statusflag || t("CS_NA")} />
-                    </StatusTable>
-                ) : (
-                    <CardLabel>{t("EKYC_NO_CONNECTION_DETAILS_FOUND")}</CardLabel>
-                )}
-
-                <button
-                    type="button"
-                    onClick={handleStartVerification}
-                    style={{
-                        background: "none",
-                        border: "none",
-                        color: "#0076f3ff",
-                        fontWeight: "600",
-                        cursor: "pointer",
-                        fontSize: "14px",
-                        padding: "10px",
-
-                    }}
-                >
-                    {t("")}
-                </button>
-
-
-                <SubmitBar label={t("EKYC_START_VERIFICATION")} onSubmit={handleStartVerification} style={{ borderRadius: "12px", marginLeft: "1100px" }} />
-                {/* <button
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { path } = useRouteMatch();
+
+  const [showModal, setShowModal] = useState(false);
+  const [selectedOption, setSelectedOption] = useState({ code: "SELF", name: "EKYC_SELF" });
+
+  const options = [
+    { code: "SELF", name: "EKYC_SELF" },
+    { code: "OTHER", name: "EKYC_OTHER" },
+  ];
+
+  const handleStartVerification = () => {
+    setShowModal(true);
+  };
+
+  const onModalConfirm = () => {
+    // Correctly handle redirection from create-kyc or dashboard
+    const parentPath = path.includes("/create-kyc") ? path.replace("/create-kyc", "") : path.replace("/k-details", "");
+    history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
+    setShowModal(false);
+  };
+
+  const handleRaiseCorrection = () => {
+    console.log("Raise Correction clicked");
+  };
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (!connectionDetails) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <Card className="ekyc-create-card" style={{ padding: "24px" }}>
+        <CardHeader>{t("EKYC_K_NUMBER_DETAILS")}</CardHeader>
+        <StatusTable>
+          <Row label={t("EKYC_K_NUMBER")} text={kNumber || t("CS_NA")} />
+          <Row label={t("EKYC_K_NAME")} text={kName || t("CS_NA")} />
+        </StatusTable>
+
+        <CardHeader style={{ marginTop: "24px" }}>{t("EKYC_CONNECTION_DETAILS")}</CardHeader>
+        {connectionDetails?.connectionDetailsInfo ? (
+          <StatusTable>
+            <Row label={t("EKYC_CONSUMER_NAME")} text={connectionDetails.connectionDetailsInfo.consumerName || t("CS_NA")} />
+            <Row label={t("EKYC_ADDRESS")} text={connectionDetails.connectionDetailsInfo.address || t("CS_NA")} />
+            <Row label={t("EKYC_CONNECTION_TYPE")} text={connectionDetails.connectionDetailsInfo.connectionType || t("CS_NA")} />
+            <Row label={t("EKYC_METER_NO")} text={connectionDetails.connectionDetailsInfo.meterNumber || t("CS_NA")} />
+            <Row label={t("EKYC_PHONE_NO")} text={connectionDetails.connectionDetailsInfo.phoneNumber || t("CS_NA")} />
+            <Row label={t("EKYC_EMAIL")} text={connectionDetails.connectionDetailsInfo.email || t("CS_NA")} />
+            <Row label={t("EKYC_STATUS")} text={connectionDetails.connectionDetailsInfo.statusflag || t("CS_NA")} />
+          </StatusTable>
+        ) : (
+          <CardLabel>{t("EKYC_NO_CONNECTION_DETAILS_FOUND")}</CardLabel>
+        )}
+
+        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "16px" }}>
+          <SubmitBar label={t("EKYC_START_VERIFICATION")} onSubmit={handleStartVerification} style={{ borderRadius: "12px", margin: 0 }} />
+        </div>
+        {/* <button
                     className="submit-bar"
                     style={{
                         marginLeft: "10px",
-                        background: "#f47738",
+                        background: "#3A8DCC",
                         border: "none",
                         color: "#fff",
                         padding: "10px 24px",
@@ -99,32 +83,36 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
                 >
                     {t("EKYC_RAISE_CORRECTION")}
                 </button> */}
-            </Card>
-
-            {showModal && (
-                <Modal
-                    headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
-                    headerBarEnd={<span onClick={() => setShowModal(false)} style={{ cursor: "pointer", padding: "8px" }}>X</span>}
-                    actionSaveLabel={t("ES_COMMON_CONFIRM")}
-                    actionSaveOnSubmit={onModalConfirm}
-                    actionCancelLabel={t("ES_COMMON_CANCEL")}
-                    actionCancelOnSubmit={() => setShowModal(false)}
-                    style={{ borderRadius: "12px" }}
-                >
-                    <div style={{ padding: "24px" }}>
-                        <RadioButtons
-                            options={options}
-                            optionsKey="name"
-                            selectedOption={selectedOption}
-                            onSelect={setSelectedOption}
-                            style={{ display: "flex", flexDirection: "column", gap: "12px", buttonStyle: { borderRadius: "5px" } }}
-                            t={t}
-                        />
-                    </div>
-                </Modal>
-            )}
-        </React.Fragment>
-    );
+      </Card>
+
+      {showModal && (
+        <Modal
+          headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
+          headerBarEnd={
+            <span onClick={() => setShowModal(false)} style={{ cursor: "pointer", padding: "8px" }}>
+              X
+            </span>
+          }
+          actionSaveLabel={t("ES_COMMON_CONFIRM")}
+          actionSaveOnSubmit={onModalConfirm}
+          actionCancelLabel={t("ES_COMMON_CANCEL")}
+          actionCancelOnSubmit={() => setShowModal(false)}
+          style={{ borderRadius: "12px" }}
+        >
+          <div style={{ padding: "24px" }}>
+            <RadioButtons
+              options={options}
+              optionsKey="name"
+              selectedOption={selectedOption}
+              onSelect={setSelectedOption}
+              style={{ display: "flex", flexDirection: "column", gap: "12px", buttonStyle: { borderRadius: "5px" } }}
+              t={t}
+            />
+          </div>
+        </Modal>
+      )}
+    </React.Fragment>
+  );
 };
 
 export default ConnectionDetailsView;

package/src/components/DesktopInbox.js

@@ -4,144 +4,135 @@ import { Table, SubmitBar, Header, Card, HomeIcon, PersonIcon } from "@djb25/dig
 import { Link } from "react-router-dom";
 import StatusCards from "./StatusCards";
 
-const DesktopInbox = ({
-    tableConfig,
-    filterComponent,
-    ...props
-}) => {
-    const {
-        data,
-        isLoading,
-        onSort,
-        onNextPage,
-        onPrevPage,
-        currentPage,
-        pageSizeLimit,
-        onPageSizeChange,
-        parentRoute,
-        searchParams,
-        sortParams,
-        totalRecords,
-        countData,
-        onSearch,
-        searchFields,
-    } = props;
-    const { t } = useTranslation();
-    const [FilterComponent, setComp] = React.useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
+const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
+  const {
+    data,
+    isLoading,
+    onSort,
+    onNextPage,
+    onPrevPage,
+    currentPage,
+    pageSizeLimit,
+    onPageSizeChange,
+    parentRoute,
+    searchParams,
+    sortParams,
+    totalRecords,
+    countData,
+    onSearch,
+    searchFields,
+  } = props;
+  const { t } = useTranslation();
+  const [FilterComponent, setComp] = React.useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
 
-    const columns = useMemo(
-        () => [
-            {
-                Header: t("EKYC_APPLICATION_NO"),
-                accessor: "applicationNumber",
-                Cell: ({ row }) => {
-                    const applicationNumber = row.original?.applicationNumber || "NA";
-                    return (
-                        <Link to={`${parentRoute}/application-details/${applicationNumber}`}>
-                            <span className="ekyc-application-link">
-                                {applicationNumber}
-                            </span>
-                        </Link>
-                    );
-                },
-            },
-            {
-                Header: t("EKYC_CITIZEN_NAME"),
-                accessor: "citizenName",
-                Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>
-            },
-            {
-                Header: t("EKYC_MOBILE_NO"),
-                accessor: "mobileNumber",
-                Cell: ({ row }) => <span>{row.original?.mobileNumber || "NA"}</span>
-            },
-            {
-                Header: t("EKYC_STATUS"),
-                accessor: "status",
-                Cell: ({ row }) => {
-                    const status = row.original?.status || "DEFAULT";
-                    return (
-                        <span className={`ekyc-status-tag ${status}`}>
-                            {t(`EKYC_STATUS_${status}`)}
-                        </span>
-                    );
-                },
-            },
-        ],
-        [t, parentRoute]
-    );
+  const columns = useMemo(
+    () => [
+      {
+        Header: t("EKYC_APPLICATION_NO"),
+        accessor: "applicationNumber",
+        Cell: ({ row }) => {
+          const applicationNumber = row.original?.applicationNumber || "NA";
+          return (
+            <Link to={`${parentRoute}/application-details/${applicationNumber}`}>
+              <span className="ekyc-application-link">{applicationNumber}</span>
+            </Link>
+          );
+        },
+      },
+      {
+        Header: t("EKYC_CITIZEN_NAME"),
+        accessor: "citizenName",
+        Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>,
+      },
+      {
+        Header: t("EKYC_MOBILE_NO"),
+        accessor: "mobileNumber",
+        Cell: ({ row }) => <span>{row.original?.mobileNumber || "NA"}</span>,
+      },
+      {
+        Header: t("EKYC_STATUS"),
+        accessor: "status",
+        Cell: ({ row }) => {
+          const status = row.original?.status || "DEFAULT";
+          return <span className={`ekyc-status-tag ${status}`}>{t(`EKYC_STATUS_${status}`)}</span>;
+        },
+      },
+    ],
+    [t, parentRoute]
+  );
 
-    const tableData = useMemo(() => {
-        return data?.items || [];
-    }, [data]);
+  const tableData = useMemo(() => {
+    return data?.items || [];
+  }, [data]);
 
-    return (
-        <div className="inbox-container">
-            <div className="filters-container">
-                {/* Sidebar Title Card */}
-                <Card className="sidebar-title-card" style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}>
-                    <div className="icon-container" style={{ color: "#F47738", marginRight: "12px" }}>
-                        <HomeIcon style={{ width: "24px", height: "24px" }} />
-                    </div>
-                    <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>
-                        {t("ACTION_TEST_EKYC")}
-                    </div>
-                </Card>
+  return (
+    <div className="inbox-container">
+      <div className="filters-container">
+        {/* Sidebar Title Card */}
+        <Card
+          className="sidebar-title-card"
+          style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
+        >
+          <div className="icon-container" style={{ color: "#3A8DCC", marginRight: "12px" }}>
+            <HomeIcon style={{ width: "24px", height: "24px" }} />
+          </div>
+          <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("ACTION_TEST_EKYC")}</div>
+        </Card>
 
-                <div>
-                    {FilterComponent && (
-                        <FilterComponent
-                            defaultSearchParams={props.defaultSearchParams}
-                            onFilterChange={props.onSearch}
-                            searchParams={searchParams}
-                            type="desktop"
-                            moduleCode="EKYC"
-                        />
-                    )}
-                </div>
-            </div>
+        <div>
+          {FilterComponent && (
+            <FilterComponent
+              defaultSearchParams={props.defaultSearchParams}
+              onFilterChange={props.onSearch}
+              searchParams={searchParams}
+              type="desktop"
+              moduleCode="EKYC"
+            />
+          )}
+        </div>
+      </div>
 
-            <div style={{ flex: 1, marginLeft: "16px" }}>
-                {/* Header Section (retaining for context/actions) */}
-                {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+      <div style={{ flex: 1, marginLeft: "16px" }}>
+        {/* Header Section (retaining for context/actions) */}
+        {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                     <Header className="title" style={{ margin: 0 }}>{t("EKYC_INBOX_HEADER")}</Header>
                     <Link to={`${parentRoute}/create-kyc`}>
                         <SubmitBar label={t("EKYC_CREATE_KYC")} style={{ borderRadius: "8px" }} />
                     </Link>
                 </div> */}
 
-                {/* Metrics Section (The Card) */}
-                <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
-                    <StatusCards countData={countData} />
-                </Card>
+        {/* Metrics Section (The Card) */}
+        <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
+          <StatusCards countData={countData} />
+        </Card>
 
-                {/* Table Section */}
-                <div className="result" style={{ flex: 1 }}>
-                    <Card className="ekyc-table-card" style={{ padding: 0 }}>
-                        <Table
-                            t={t}
-                            data={tableData}
-                            columns={columns}
-                            isLoading={isLoading}
-                            onSort={onSort}
-                            sortParams={sortParams}
-                            totalRecords={totalRecords}
-                            onNextPage={onNextPage}
-                            onPrevPage={onPrevPage}
-                            currentPage={currentPage}
-                            pageSizeLimit={pageSizeLimit}
-                            onPageSizeChange={onPageSizeChange}
-                            getCellProps={(cellInfo) => {
-                                return {
-                                    className: "ekyc-table-cell"
-                                };
-                            }}
-                        />
-                    </Card>
-                </div>
-            </div>
+        {/* Table Section */}
+        <div className="result" style={{ flex: 1 }}>
+          <Card className="ekyc-table-card" style={{ padding: 0 }}>
+            <Table
+              t={t}
+              data={tableData}
+              columns={columns}
+              isLoading={isLoading}
+              onSort={onSort}
+              sortParams={sortParams}
+              totalRecords={totalRecords}
+              onNextPage={onNextPage}
+              onPrevPage={onPrevPage}
+              currentPage={currentPage}
+              pageSizeLimit={pageSizeLimit}
+              onPageSizeChange={onPageSizeChange}
+              getCellProps={(cellInfo) => {
+                return {
+                  className: "ekyc-table-cell",
+                };
+              }}
+            />
+          </Card>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
-export default DesktopInbox;
+export default DesktopInbox;