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

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useMemo, useState, createContext, isValidElement, cloneElement, createElement, useContext, useCallback, useReducer, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, Link, useLocation, useRouteMatch, Switch, Route, Redirect } from 'react-router-dom';
-import { PersonIcon, EmployeeModuleCard, Loader, Card, InboxLinks, Table, HomeIcon, TextInput, Header, SubmitBar, DetailsCard, FilterForm, FilterFormField, Dropdown, Label, Tooltip, CardLabelError, InboxComposer, Toast, Modal, RadioButtons, CardHeader, CardSubHeader, StatusTable, Row, GenericFileIcon, CheckBox, ActionBar, LinkButton, EditIcon as EditIcon$1, FormStep, CardLabel, UploadFile, VerticalTimeline, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, CitizenHomeCard, DocumentIcon } from '@djb25/digit-ui-react-components';
+import { PersonIcon, EmployeeModuleCard, Loader, Card, InboxLinks, Table, HomeIcon, TextInput, Header, SubmitBar, DetailsCard, FilterForm, FilterFormField, Dropdown, Label, Tooltip, CardLabelError, InboxComposer, Toast, Modal, RadioButtons, CardHeader, CardSubHeader, StatusTable, Row, GenericFileIcon, CheckBox, ActionBar, LinkButton, EditIcon as EditIcon$1, FormStep, CardLabel, UploadFile, VerticalTimeline, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, ModuleLinksView, CitizenHomeCard, DocumentIcon } from '@djb25/digit-ui-react-components';
 import * as Chartjs from 'chart.js/auto';
 import Chartjs__default, { Chart } from 'chart.js/auto';
 import 'react-dom';
@@ -197,13 +197,7 @@ const StatusCards = ({
   }, "0.04%")))))));
 };
 
-const Dashboard = ({
-  parentRoute,
-  businessService: _businessService = "EKYC",
-  initialStates: _initialStates = {},
-  filterComponent,
-  isInbox
-}) => {
+const Dashboard = () => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const {
     isLoading,
@@ -225,7 +219,9 @@ const Dashboard = ({
       active: info.active || 0
     };
   }, [dashboardData]);
-  return isLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(StatusCards, {
+  return isLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement(Card, {
+    className: "min-width-full"
+  }, /*#__PURE__*/React.createElement(StatusCards, {
     countData: countData
   }));
 };
@@ -4153,6 +4149,290 @@ const MeterDetails = ({
   })));
 };
 
+const Home = () => {
+  const {
+    t
+  } = useTranslation();
+  const propsForModuleCard = {
+    moduleName: t("ACTION_TEST_EKYC"),
+    kpis: [{
+      count: "-",
+      label: t("TOTAL_EKYC"),
+      link: `/digit-ui/citizen/ekyc/dashboard`
+    }],
+    links: [{
+      label: t("EKYC_DASHBOARD"),
+      link: `/digit-ui/citizen/ekyc/dashboard`
+    }, {
+      label: t("EKYC_INBOX"),
+      link: `/digit-ui/citizen/ekyc/inbox`
+    }, {
+      label: t("EKYC_MAPPING"),
+      link: `/digit-ui/citizen/ekyc/mapping`
+    }]
+  };
+  return /*#__PURE__*/React.createElement(ModuleLinksView, {
+    links: propsForModuleCard.links
+  });
+};
+
+const Inbox$1 = ({
+  parentRoute
+}) => {
+  var _formState$tableForm3, _formState$tableForm4, _formState$searchForm3, _formState$searchForm4, _dashboardData$dashbo2;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const location = useLocation();
+  const formInitValue = {
+    filterForm: {},
+    searchForm: {},
+    tableForm: {
+      limit: 10,
+      offset: 0,
+      sortBy: "createdTime",
+      sortOrder: "DESC"
+    }
+  };
+  const [formState, dispatch] = useReducer(formReducer, formInitValue);
+  const queryParams = useMemo(() => {
+    var _formState$tableForm, _formState$tableForm2;
+    return {
+      tenantId,
+      offset: (formState === null || formState === void 0 ? void 0 : (_formState$tableForm = formState.tableForm) === null || _formState$tableForm === void 0 ? void 0 : _formState$tableForm.offset) || 0,
+      limit: (formState === null || formState === void 0 ? void 0 : (_formState$tableForm2 = formState.tableForm) === null || _formState$tableForm2 === void 0 ? void 0 : _formState$tableForm2.limit) || 10,
+      search: (formState === null || formState === void 0 ? void 0 : formState.searchForm) || {}
+    };
+  }, [tenantId, formState === null || formState === void 0 ? void 0 : (_formState$tableForm3 = formState.tableForm) === null || _formState$tableForm3 === void 0 ? void 0 : _formState$tableForm3.offset, formState === null || formState === void 0 ? void 0 : (_formState$tableForm4 = formState.tableForm) === null || _formState$tableForm4 === void 0 ? void 0 : _formState$tableForm4.limit, formState === null || formState === void 0 ? void 0 : formState.searchForm]);
+  const {
+    isLoading,
+    data: dashboardData = {}
+  } = Digit.Hooks.ekyc.useEkycSurveyorDashboard({}, queryParams, {
+    enabled: !!tenantId,
+    keepPreviousData: true
+  });
+  const searchDetails = useMemo(() => {
+    var _formState$searchForm, _formState$searchForm2;
+    return {
+      kno: (formState === null || formState === void 0 ? void 0 : (_formState$searchForm = formState.searchForm) === null || _formState$searchForm === void 0 ? void 0 : _formState$searchForm.kNumber) || "",
+      name: (formState === null || formState === void 0 ? void 0 : (_formState$searchForm2 = formState.searchForm) === null || _formState$searchForm2 === void 0 ? void 0 : _formState$searchForm2.kName) || ""
+    };
+  }, [formState === null || formState === void 0 ? void 0 : (_formState$searchForm3 = formState.searchForm) === null || _formState$searchForm3 === void 0 ? void 0 : _formState$searchForm3.kNumber, formState === null || formState === void 0 ? void 0 : (_formState$searchForm4 = formState.searchForm) === null || _formState$searchForm4 === void 0 ? void 0 : _formState$searchForm4.kName]);
+  const isSearchActive = !!(searchDetails.kno || searchDetails.name);
+  const {
+    isLoading: isSearchLoading,
+    data: searchData
+  } = Digit.Hooks.ekyc.useSearchConnection({
+    tenantId,
+    details: searchDetails
+  }, {
+    enabled: !!tenantId && !!searchDetails.kno,
+    keepPreviousData: true
+  });
+  const sourceData = useMemo(() => {
+    var _dashboardData$dashbo;
+    if (isSearchActive) {
+      if (!searchData) return [];
+      return [searchData];
+    }
+    return (dashboardData === null || dashboardData === void 0 ? void 0 : (_dashboardData$dashbo = dashboardData.dashboardInfo) === null || _dashboardData$dashbo === void 0 ? void 0 : _dashboardData$dashbo.consumerList) || [];
+  }, [isSearchActive, searchData, dashboardData]);
+  const filteredData = useMemo(() => {
+    return (sourceData || []).map(item => {
+      const isSearchItem = !!item.connectionDetails;
+      if (isSearchItem) {
+        var _item$propertyInfo, _item$propertyInfo2, _item$connectionDetai, _item$propertyInfo3, _item$connectionDetai2, _item$connectionDetai3;
+        return {
+          applicationNo: ((_item$propertyInfo = item.propertyInfo) === null || _item$propertyInfo === void 0 ? void 0 : _item$propertyInfo.kno) || "",
+          connectionNo: ((_item$propertyInfo2 = item.propertyInfo) === null || _item$propertyInfo2 === void 0 ? void 0 : _item$propertyInfo2.kno) || "",
+          owner: ((_item$connectionDetai = item.connectionDetails) === null || _item$connectionDetai === void 0 ? void 0 : _item$connectionDetai.consumerName) || "",
+          applicationNumber: ((_item$propertyInfo3 = item.propertyInfo) === null || _item$propertyInfo3 === void 0 ? void 0 : _item$propertyInfo3.kno) || "",
+          citizenName: ((_item$connectionDetai2 = item.connectionDetails) === null || _item$connectionDetai2 === void 0 ? void 0 : _item$connectionDetai2.consumerName) || "",
+          status: ((_item$connectionDetai3 = item.connectionDetails) === null || _item$connectionDetai3 === void 0 ? void 0 : _item$connectionDetai3.statusflag) || "",
+          sla: 0
+        };
+      }
+      return {
+        ...item,
+        applicationNo: item.kno || item.applicationNumber || "",
+        connectionNo: item.connectionNo || "",
+        owner: item.consumerName || item.citizenName || "",
+        applicationNumber: item.kno || item.applicationNumber || "",
+        citizenName: item.consumerName || item.citizenName || "",
+        status: item.status || "",
+        sla: item.sla ?? 0
+      };
+    });
+  }, [sourceData]);
+  const totalRecords = (dashboardData === null || dashboardData === void 0 ? void 0 : (_dashboardData$dashbo2 = dashboardData.dashboardInfo) === null || _dashboardData$dashbo2 === void 0 ? void 0 : _dashboardData$dashbo2.totalRecords) || (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.totalCount) || 0;
+  const checkPathName = location.pathname.includes("ekyc/inbox");
+  const PropsForInboxLinks = {
+    headerText: checkPathName ? "MODULE_WATER" : "MODULE_SW"
+  };
+  const SearchFormFields = useCallback(({
+    registerRef,
+    searchFormState,
+    controlSearchForm
+  }) => /*#__PURE__*/React.createElement(SearchFormFieldsComponents, Object.assign({}, {
+    registerRef,
+    searchFormState,
+    controlSearchForm
+  }, {
+    className: "search"
+  })), []);
+  const tableOrderFormDefaultValues = {
+    sortBy: "createdTime",
+    limit: window.Digit.Utils.browser.isMobile() ? 50 : 10,
+    offset: 0,
+    sortOrder: "DESC"
+  };
+  const onSearchFormSubmit = data => {
+    data.hasOwnProperty("") && (data === null || data === void 0 ? true : delete data[""]);
+    dispatch({
+      action: "mutateTableForm",
+      data: {
+        ...tableOrderFormDefaultValues
+      },
+      checkPathName
+    });
+    dispatch({
+      action: "mutateSearchForm",
+      data,
+      checkPathName
+    });
+  };
+  const searchFormDefaultValues = {
+    mobileNumber: "",
+    applicationNumber: "",
+    consumerNo: ""
+  };
+  const onSearchFormReset = setSearchFormValue => {
+    setSearchFormValue("mobileNumber", null);
+    setSearchFormValue("applicationNumber", null);
+    setSearchFormValue("consumerNo", null);
+    dispatch({
+      action: "mutateSearchForm",
+      data: searchFormDefaultValues
+    });
+  };
+  const propsForSearchForm = {
+    SearchFormFields,
+    onSearchFormSubmit,
+    searchFormDefaultValues: formState === null || formState === void 0 ? void 0 : formState.searchForm,
+    resetSearchFormDefaultValues: searchFormDefaultValues,
+    onSearchFormReset,
+    className: "search-form-wns-inbox"
+  };
+  const FilterFormFields = useCallback(({
+    registerRef,
+    controlFilterForm,
+    setFilterFormValue,
+    getFilterFormValue
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null), []);
+  const propsForFilterForm = {
+    FilterFormFields,
+    onFilterFormSubmit: () => {},
+    filterFormDefaultValues: "",
+    resetFilterFormDefaultValues: "",
+    onFilterFormReset: () => {}
+  };
+  function formReducer(state, payload) {
+    const storageKey = payload.checkPathName ? "EKYC.INBOX" : "EKYC.SW.INBOX";
+    switch (payload.action) {
+      case "mutateSearchForm":
+        Digit.SessionStorage.set(storageKey, {
+          ...state,
+          searchForm: payload.data
+        });
+        return {
+          ...state,
+          searchForm: payload.data
+        };
+      case "mutateFilterForm":
+        Digit.SessionStorage.set(storageKey, {
+          ...state,
+          filterForm: payload.data
+        });
+        return {
+          ...state,
+          filterForm: payload.data
+        };
+      case "mutateTableForm":
+        Digit.SessionStorage.set(storageKey, {
+          ...state,
+          tableForm: payload.data
+        });
+        return {
+          ...state,
+          tableForm: payload.data
+        };
+      default:
+        return state;
+    }
+  }
+  const onPageSizeChange = e => {
+    const newLimit = Number(e.target.value);
+    dispatch({
+      action: "mutateTableForm",
+      data: {
+        ...formState.tableForm,
+        limit: newLimit,
+        offset: 0
+      },
+      checkPathName
+    });
+  };
+  const onSortingByData = e => {
+    if (e.length > 0) {
+      const [{
+        id,
+        desc
+      }] = e;
+      const sortOrder = desc ? "DESC" : "ASC";
+      const sortBy = id;
+      if (!(formState.tableForm.sortBy === sortBy && formState.tableForm.sortOrder === sortOrder)) {
+        dispatch({
+          action: "mutateTableForm",
+          data: {
+            ...formState.tableForm,
+            sortBy: id,
+            sortOrder: desc ? "DESC" : "ASC"
+          },
+          checkPathName
+        });
+      }
+    }
+  };
+  const propsForInboxTable = useInboxTableConfig({
+    ...{
+      parentRoute,
+      onPageSizeChange,
+      formState,
+      totalCount: totalRecords,
+      table: filteredData,
+      dispatch,
+      onSortingByData,
+      tenantId,
+      checkPathName,
+      inboxStyles: {
+        overflowX: "scroll",
+        overflowY: "hidden"
+      },
+      tableStyle: {
+        width: "70%"
+      }
+    }
+  });
+  const isInboxLoading = isLoading || isSearchLoading;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "app-container"
+  }, /*#__PURE__*/React.createElement(InboxComposer, _extends({
+    isInboxLoading,
+    PropsForInboxLinks
+  }, propsForSearchForm, propsForFilterForm, {
+    propsForInboxTable,
+    formState
+  })));
+};
+
 const CitizenApp = () => {
   const {
     t
@@ -4187,8 +4467,15 @@ const CitizenApp = () => {
     onLeftClick: () => window.history.back(),
     breadcrumbs: breadcrumbs
   }), /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: `${path}/create-kyc`,
-    component: () => /*#__PURE__*/React.createElement(Create, null)
+    exact: true,
+    path: `${path}`,
+    component: () => /*#__PURE__*/React.createElement(Home, null)
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/dashboard`,
+    component: () => /*#__PURE__*/React.createElement(Dashboard, null)
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: `${path}/inbox`,
+    component: () => /*#__PURE__*/React.createElement(Inbox$1, null)
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/aadhaar-verification`,
     component: () => /*#__PURE__*/React.createElement(AadhaarVerification, null)
@@ -4204,14 +4491,10 @@ const CitizenApp = () => {
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
     path: `${path}/review`,
     component: () => /*#__PURE__*/React.createElement(Review, null)
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: `${path}/`,
-    component: () => /*#__PURE__*/React.createElement(Create, null)
   }))));
 };
 
 const EkycModule = ({
-  stateCode,
   userType,
   tenants
 }) => {
@@ -4219,20 +4502,7 @@ const EkycModule = ({
     path,
     url
   } = useRouteMatch();
-  const moduleCode = "EKYC";
-  const language = Digit.StoreData.getCurrentLanguage();
-  const {
-    isLoading,
-    data: store
-  } = Digit.Services.useStore({
-    stateCode,
-    moduleCode,
-    language
-  });
   Digit.SessionStorage.set("EKYC_TENANTS", tenants);
-  if (isLoading) {
-    return null;
-  }
   if (userType === "employee") {
     return /*#__PURE__*/React.createElement(EmployeeApp, {
       path: path,