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

package/src/components/SearchFormFieldsComponent.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Controller } from "react-hook-form";
+import { CardLabelError, TextInput, Tooltip, Label } from "@djb25/digit-ui-react-components";
+import { useTranslation } from "react-i18next";
+
+const SearchFormFieldsComponents = ({ searchFormState, controlSearchForm }) => {
+  const { t } = useTranslation();
+  const { errors } = searchFormState;
+
+  return (
+    <React.Fragment>
+      {/* K NUMBER */}
+      <span className="mobile-input">
+        <Label className="flex-roww flex-gap-2">
+          {t("EKYC_K_NUMBER") || "K Number"}
+          <Tooltip message={t("EKYC_K_NUMBER_MESSAGE")} />
+        </Label>
+
+        <Controller
+          name="kNumber"
+          control={controlSearchForm}
+          defaultValue=""
+          rules={{
+            pattern: {
+              value: /^[a-zA-Z0-9-_/]*$/,
+              message: t("ERR_INVALID_APPLICATION_NO"),
+            },
+          }}
+          render={({ onChange, value }) => <TextInput value={value || ""} onChange={(e) => onChange(e.target.value)} />}
+        />
+
+        {errors?.kNumber && <CardLabelError>{errors.kNumber.message}</CardLabelError>}
+      </span>
+
+      {/* K NAME */}
+      {/* <span className="mobile-input">
+        <Label className="flex-roww flex-gap-2">
+          {t("EKYC_K_NAME") || "K Name"}
+          <Tooltip message={t("EKYC_K_NAME_MESSAGE")} />
+        </Label>
+
+        <Controller
+          name="kName"
+          control={controlSearchForm}
+          defaultValue=""
+          render={({ onChange, value }) => <TextInput value={value || ""} onChange={(e) => onChange(e.target.value)} />}
+        />
+
+        {errors?.kName && <CardLabelError>{errors.kName.message}</CardLabelError>}
+      </span> */}
+    </React.Fragment>
+  );
+};
+
+export default SearchFormFieldsComponents;

package/src/components/StatusCards.js

@@ -1,8 +1,11 @@
 import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Chart, registerables } from "chart.js";
+import * as Chartjs from "chart.js/auto";
 
-Chart.register(...registerables);
+const getChartConstructor = () => {
+  const C = Chartjs.Chart || Chartjs.default || Chartjs;
+  return C;
+};
 
 const StatusCards = ({ countData }) => {
   const { t } = useTranslation();
@@ -27,7 +30,8 @@ const StatusCards = ({ countData }) => {
     if (chartRef1.current) {
       if (chartInstance1.current) chartInstance1.current.destroy();
       const ctx1 = chartRef1.current.getContext("2d");
-      chartInstance1.current = new Chart(ctx1, {
+      const ChartConstructor = getChartConstructor();
+      chartInstance1.current = new ChartConstructor(ctx1, {
         type: "doughnut",
         data: {
           labels: [t("EKYC_ACTIVE"), t("EKYC_PENDING"), t("EKYC_COMPLETED")],

package/src/config/config.js

@@ -0,0 +1,69 @@
+import AadhaarVerification from "../pages/employee/AadhaarVerification";
+
+export const ekycConfig = [
+  {
+    body: [
+      {
+        route: "consumer-details",
+        component: AadhaarVerification,
+        key: "aadhaarVerification",
+        texts: {
+          header: "EKYC_CONSUMER_CONNECTION",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 1,
+            actions: "EKYC_CONSUMER_CONNECTION",
+          },
+        ],
+      },
+      {
+        route: "address-details",
+        component: "AddressDetails",
+        key: "addressDetails",
+        doorImage: true,
+        texts: {
+          header: "EKYC_ADDRESS_DETAILS",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 2,
+            actions: "EKYC_ADDRESS_DETAILS",
+          },
+        ],
+      },
+      {
+        route: "property-info",
+        component: "PropertyInfo",
+        key: "propertyDetails",
+        texts: {
+          header: "EKYC_PROPERTY_INFO",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 3,
+            actions: "EKYC_PROPERTY_INFO",
+          },
+        ],
+      },
+      {
+        route: "meter-details",
+        component: "MeterDetails",
+        key: "meterDetails",
+        texts: {
+          header: "EKYC_METER_DETAILS",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 4,
+            actions: "EKYC_METER_DETAILS",
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/hook/useInboxTableConfig.js

@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const useInboxTableConfig = ({
+  parentRoute,
+  onPageSizeChange,
+  formState,
+  totalCount,
+  table,
+  dispatch,
+  checkPathName,
+  onSortingByData,
+  tenantId,
+  inboxStyles = {},
+  tableStyle = {},
+}) => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [selectedKno, setSelectedKno] = useState("");
+  const { data: reviewData, getReview } = Digit.Hooks.ekyc.useEkycAPI("review", tenantId);
+  const handleReview = (kno) => {
+    setSelectedKno(kno);
+    getReview({ kno });
+  };
+
+  const limit = formState?.tableForm?.limit || 10;
+  const offset = formState?.tableForm?.offset || 0;
+
+  React.useEffect(() => {
+    if (reviewData) {
+      history.push("/digit-ui/employee/ekyc/review", { kNumber: selectedKno, aadhaarData: reviewData?.aadhaarData, reviewData });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reviewData]);
+
+  const tableColumnConfig = [
+    {
+      Header: t("EKYC_APPLICATION_NO"),
+      accessor: "applicationNumber",
+      disableSortBy: true,
+      Cell: ({ row }) => {
+        const kno = row.original?.kno || row.original?.applicationNumber || "NA";
+        return (
+          <span
+            className="ekyc-application-link"
+            style={{ color: "#add8f7", cursor: "pointer", fontWeight: "bold" }}
+            onClick={() => handleReview(kno)}
+          >
+            {kno}
+          </span>
+        );
+      },
+    },
+    {
+      Header: t("EKYC_CITIZEN_NAME"),
+      accessor: "citizenName",
+      Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>,
+    },
+    {
+      Header: t("EKYC_STATUS"),
+      accessor: "actionStatus",
+      Cell: ({ row }) => {
+        const status = row.original?.status || "DEFAULT";
+        return <span className={`ekyc-status-tag ${status}`}>{t(`${status}`)}</span>;
+      },
+    },
+    {
+      Header: t("EKYC_ACTION"),
+      accessor: "status",
+      Cell: ({ row }) => {
+        const kno = row.original?.kno || row.original?.applicationNumber || "NA";
+        return (
+          <span
+            className="ekyc-application-link"
+            style={{ color: "#add8f7", cursor: "pointer", fontWeight: "bold" }}
+            onClick={() => handleReview(kno)}
+          >
+            {t("EKYC_REVIEW")}
+          </span>
+        );
+      },
+    },
+  ];
+
+  return {
+    getCellProps: (cellInfo) => {
+      return {
+        style: {
+          padding: "8px",
+          fontSize: "12px",
+        },
+      };
+    },
+    disableSort: false,
+    autoSort: false,
+    manualPagination: true,
+    initSortId: "applicationDate",
+    onPageSizeChange: onPageSizeChange,
+    currentPage: Math.floor(offset / limit),
+    onNextPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) + parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    onPrevPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) - parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    pageSizeLimit: limit,
+    onSort: onSortingByData,
+    // sortParams: [{id: getValues("sortBy"), desc: getValues("sortOrder") === "DESC" ? true : false}],
+    totalRecords: totalCount,
+    onSearch: formState?.searchForm?.message,
+    onLastPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: Math.ceil(totalCount / 10) * 10 - parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    onFirstPage: () => dispatch({ action: "mutateTableForm", data: { ...formState.tableForm, offset: 0 }, checkPathName }),
+    // globalSearch: {searchForItemsInTable},
+    // searchQueryForTable,
+    data: table,
+    columns: tableColumnConfig,
+    inboxStyles: { ...inboxStyles },
+    tableStyle: { ...tableStyle },
+  };
+};
+
+export default useInboxTableConfig;

package/src/pages/citizen/index.js

@@ -71,7 +71,7 @@ const CitizenApp = () => {
                         path={`${path}/meter-details`}
                         component={() => <MeterDetails />}
                     />
-                    
+
                     <PrivateRoute
                         path={`${path}/review`}
                         component={() => <Review />}