@djb25/digit-ui-module-ekyc 1.0.4 → 1.0.5

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, useRef, Fragment } from 'react';
+import React, { useMemo, useState, useCallback, useRef, useEffect, Fragment } from 'react';
 import { Link, useHistory, useRouteMatch, useLocation, Switch } from 'react-router-dom';
 import { PersonIcon as PersonIcon$1, EmployeeModuleCard, Card, HomeIcon, Table, Header, TextInput, SubmitBar, Loader, DetailsCard, FilterForm, FilterFormField, Dropdown, CardHeader, StatusTable, Row, CardLabel, Modal, RadioButtons, Toast, LocationIcon, PropertyHouse, InfoBannerIcon, ActionBar, LabelFieldPair, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute } from '@djb25/digit-ui-react-components';
 import { useTranslation } from 'react-i18next';
@@ -107,23 +107,14 @@ const DesktopInbox = ({
       var _row$original2;
       return /*#__PURE__*/React.createElement("span", null, ((_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.citizenName) || "NA");
     }
-  }, {
-    Header: t("EKYC_MOBILE_NO"),
-    accessor: "mobileNumber",
-    Cell: ({
-      row
-    }) => {
-      var _row$original3;
-      return /*#__PURE__*/React.createElement("span", null, ((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.mobileNumber) || "NA");
-    }
   }, {
     Header: t("EKYC_STATUS"),
     accessor: "status",
     Cell: ({
       row
     }) => {
-      var _row$original4;
-      const status = ((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.status) || "DEFAULT";
+      var _row$original3;
+      const status = ((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.status) || "DEFAULT";
       return /*#__PURE__*/React.createElement("span", {
         className: `ekyc-status-tag ${status}`
       }, t(`EKYC_STATUS_${status}`));
@@ -360,7 +351,13 @@ const SearchConsumer = ({
       paddingLeft: "12px",
       height: "44px"
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  })))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      marginTop: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       gap: "12px",
@@ -385,8 +382,7 @@ const SearchConsumer = ({
       margin: 0,
       borderRadius: "8px",
       height: "44px",
-      padding: "0 32px",
-      marginTop: "-55px"
+      padding: "0 32px"
     }
   }))))), children));
 };
@@ -522,32 +518,6 @@ const Filter = ({
   })));
 };
 
-const MOCK_DATA_ITEMS = [{
-  applicationNumber: "EKYC-2024-001",
-  citizenName: "Rahul Sharma",
-  mobileNumber: "9876543210",
-  status: "COMPLETED"
-}, {
-  applicationNumber: "EKYC-2024-002",
-  citizenName: "Anjali Devi",
-  mobileNumber: "9123456789",
-  status: "PENDING"
-}, {
-  applicationNumber: "EKYC-2024-003",
-  citizenName: "Amit Kumar",
-  mobileNumber: "8888888888",
-  status: "REJECTED"
-}, {
-  applicationNumber: "EKYC-2024-004",
-  citizenName: "Priya Singh",
-  mobileNumber: "7777777777",
-  status: "COMPLETED"
-}, {
-  applicationNumber: "EKYC-2024-005",
-  citizenName: "Suresh Gupta",
-  mobileNumber: "6666666666",
-  status: "PENDING"
-}];
 const Inbox = ({
   parentRoute,
   businessService: _businessService = "EKYC",
@@ -555,6 +525,7 @@ const Inbox = ({
   filterComponent,
   isInbox
 }) => {
+  var _searchParams$status, _dashboardData$dashbo2;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const {
     t
@@ -572,25 +543,37 @@ const Inbox = ({
   const [searchParams, setSearchParams] = useState(_initialStates.searchParams || {
     status: defaultStatusOption
   });
-  const filteredStaticData = useMemo(() => {
-    return MOCK_DATA_ITEMS.filter(item => {
-      var _searchParams$status;
-      let match = true;
-      const currentStatus = ((_searchParams$status = searchParams.status) === null || _searchParams$status === void 0 ? void 0 : _searchParams$status.value) !== undefined ? searchParams.status.value : searchParams.status;
-      if (currentStatus && item.status !== currentStatus) {
-        match = false;
-      }
-      return match;
-    });
-  }, [searchParams]);
-  const staticCountData = useMemo(() => {
+  const {
+    isLoading,
+    data: dashboardData,
+    isFetching
+  } = Digit.Hooks.ekyc.useEkycSurveyorDashboard({}, {
+    tenantId,
+    offset: pageOffset,
+    limit: pageSize,
+    status: ((_searchParams$status = searchParams.status) === null || _searchParams$status === void 0 ? void 0 : _searchParams$status.value) || ""
+  }, {
+    enabled: !!tenantId
+  });
+  const filteredData = useMemo(() => {
+    var _dashboardData$dashbo;
+    const items = (dashboardData === null || dashboardData === void 0 ? void 0 : (_dashboardData$dashbo = dashboardData.dashboardInfo) === null || _dashboardData$dashbo === void 0 ? void 0 : _dashboardData$dashbo.consumerList) || [];
+    return items.map(item => ({
+      ...item,
+      applicationNumber: item.kno || item.applicationNumber,
+      citizenName: item.consumerName || item.citizenName
+    }));
+  }, [dashboardData]);
+  const countData = useMemo(() => {
+    const info = (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.dashboardInfo) || {};
     return {
-      total: MOCK_DATA_ITEMS.length,
-      completed: MOCK_DATA_ITEMS.filter(i => i.status === "COMPLETED").length,
-      pending: MOCK_DATA_ITEMS.filter(i => i.status === "PENDING").length,
-      rejected: MOCK_DATA_ITEMS.filter(i => i.status === "REJECTED").length
+      total: info.total || 0,
+      completed: info.completed || 0,
+      pending: info.pending || 0,
+      rejected: info.rejected || 0
     };
-  }, []);
+  }, [dashboardData]);
+  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 handleSearch = useCallback(filterParam => {
     setSearchParams(prev => ({
       ...prev,
@@ -633,22 +616,22 @@ const Inbox = ({
     className: "inbox-main-container"
   }, Digit.Utils.browser.isMobile() ? /*#__PURE__*/React.createElement(MobileInbox, {
     data: {
-      items: filteredStaticData,
-      totalCount: filteredStaticData.length
+      items: filteredData,
+      totalCount: totalRecords
     },
-    isLoading: false,
+    isLoading: isLoading || isFetching,
     onSearch: handleSearch,
     searchFields: searchFields,
     searchParams: searchParams,
     parentRoute: parentRoute,
-    countData: staticCountData
+    countData: countData
   }) : /*#__PURE__*/React.createElement(DesktopInbox, {
     businessService: _businessService,
     data: {
-      items: filteredStaticData,
-      totalCount: filteredStaticData.length
+      items: filteredData,
+      totalCount: totalRecords
     },
-    isLoading: false,
+    isLoading: isLoading || isFetching,
     searchFields: searchFields,
     onSearch: handleSearch,
     onSort: handleSort,
@@ -660,8 +643,8 @@ const Inbox = ({
     parentRoute: parentRoute,
     searchParams: searchParams,
     sortParams: sortParams,
-    totalRecords: filteredStaticData.length,
-    countData: staticCountData,
+    totalRecords: totalRecords,
+    countData: countData,
     filterComponent: "EKYC_INBOX_FILTER"
   })));
 };
@@ -885,28 +868,6 @@ const Create = () => {
   }));
 };
 
-const FlagIcon = ({
-  size: _size = 20
-}) => /*#__PURE__*/React.createElement("svg", {
-  width: _size,
-  height: _size,
-  viewBox: "0 0 24 24",
-  fill: "none"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z",
-  fill: "#0F6E56"
-}));
-const IdCardIcon = ({
-  size: _size2 = 20
-}) => /*#__PURE__*/React.createElement("svg", {
-  width: _size2,
-  height: _size2,
-  viewBox: "0 0 24 24",
-  fill: "none"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M2 7V17C2 18.1 2.9 19 4 19H20C21.1 19 22 18.1 22 17V7C22 5.9 21.1 5 20 5H4C2.9 5 2 5.9 2 7ZM12 11H14V13H12V11ZM12 7H14V9H12V7ZM16 11H20V13H16V11ZM16 7H20V9H16V7ZM4 7H10V15H4V7ZM20 17H4V16H20V17Z",
-  fill: "#185FA5"
-}));
 const CameraIcon = ({
   size: _size3 = 28
 }) => /*#__PURE__*/React.createElement("svg", {
@@ -1035,53 +996,12 @@ const SectionHead = ({
     background: "#EAECF0"
   }
 }));
-const AdminCard = ({
-  bgColor,
-  iconBg,
-  icon,
-  labelColor,
-  label,
-  value
-}) => /*#__PURE__*/React.createElement("div", {
-  style: {
-    backgroundColor: bgColor,
-    padding: "14px 16px",
-    borderRadius: "8px",
-    display: "flex",
-    alignItems: "center",
-    gap: "14px",
-    border: "0.5px solid #EAECF0"
-  }
-}, /*#__PURE__*/React.createElement("div", {
-  style: {
-    backgroundColor: iconBg,
-    padding: "8px",
-    borderRadius: "8px",
-    display: "flex",
-    flexShrink: 0
-  }
-}, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-  style: {
-    color: labelColor,
-    fontSize: "10px",
-    fontWeight: "600",
-    textTransform: "uppercase",
-    letterSpacing: "0.05em",
-    marginBottom: "3px"
-  }
-}, label), /*#__PURE__*/React.createElement("div", {
-  style: {
-    fontSize: "14px",
-    fontWeight: "600",
-    color: "#101828"
-  }
-}, value)));
 const AddressDetails = ({
   isSection: _isSection = false,
   onComplete,
   parentState
 }) => {
-  var _flowState$connection;
+  var _flowState$connection, _mdmsRes$egovLocatio, _mdmsRes$egovLocatio$, _mdmsRes$egovLocatio2, _mdmsRes$egovLocatio3;
   const {
     t
   } = useTranslation();
@@ -1112,6 +1032,72 @@ const AddressDetails = ({
   const [doorPhoto, setDoorPhoto] = useState(null);
   const [isLocationFetching, setIsLocationFetching] = useState(false);
   const fileInputRef = useRef(null);
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const {
+    data: mdmsData,
+    isLoading: isMdmsLoading
+  } = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]);
+  const mdmsRes = (mdmsData === null || mdmsData === void 0 ? void 0 : mdmsData.MdmsRes) || mdmsData;
+  const adminHierarchy = (mdmsRes === null || mdmsRes === void 0 ? void 0 : (_mdmsRes$egovLocatio = mdmsRes["egov-location"]) === null || _mdmsRes$egovLocatio === void 0 ? void 0 : (_mdmsRes$egovLocatio$ = _mdmsRes$egovLocatio.TenantBoundary) === null || _mdmsRes$egovLocatio$ === void 0 ? void 0 : _mdmsRes$egovLocatio$.find(h => h.hierarchyType.code === "ADMIN")) || (mdmsRes === null || mdmsRes === void 0 ? void 0 : (_mdmsRes$egovLocatio2 = mdmsRes["egov-location"]) === null || _mdmsRes$egovLocatio2 === void 0 ? void 0 : (_mdmsRes$egovLocatio3 = _mdmsRes$egovLocatio2.TenantBoundary) === null || _mdmsRes$egovLocatio3 === void 0 ? void 0 : _mdmsRes$egovLocatio3[0]);
+  const rootBoundary = adminHierarchy === null || adminHierarchy === void 0 ? void 0 : adminHierarchy.boundary;
+  const getAssemblies = boundaries => {
+    if (!boundaries) return [];
+    let assemblies = [];
+    const targetLabel = "assembly constituency";
+    for (const boundary of boundaries) {
+      var _boundary$children;
+      const label = (boundary.label || boundary.name || "").toLowerCase().replace(/_/g, " ");
+      if (label === targetLabel || label === "assemblyconstituency") {
+        assemblies.push({
+          code: boundary.code,
+          name: boundary.name,
+          children: boundary.children
+        });
+      }
+      if ((_boundary$children = boundary.children) !== null && _boundary$children !== void 0 && _boundary$children.length) {
+        assemblies.push(...getAssemblies(boundary.children));
+      }
+    }
+    return assemblies;
+  };
+  const getBlocks = children => {
+    if (!children) return [];
+    let blocks = [];
+    const targetLabel = "block";
+    for (const child of children) {
+      var _child$children;
+      const label = (child.label || child.name || "").toLowerCase().replace(/_/g, " ");
+      if (label === targetLabel) {
+        blocks.push({
+          code: child.code,
+          name: child.name
+        });
+      }
+      if ((_child$children = child.children) !== null && _child$children !== void 0 && _child$children.length) {
+        blocks.push(...getBlocks(child.children));
+      }
+    }
+    return blocks;
+  };
+  const assemblies = getAssemblies(Array.isArray(rootBoundary) ? rootBoundary : rootBoundary ? [rootBoundary] : []);
+  const [assembly, setAssembly] = useState(addrDetails.assembly ? {
+    name: addrDetails.assembly
+  } : null);
+  const [ward, setWard] = useState(addrDetails.ward ? {
+    name: addrDetails.ward
+  } : null);
+  useEffect(() => {
+    if (mdmsRes && addrDetails.assembly && !(assembly !== null && assembly !== void 0 && assembly.code)) {
+      const foundAssembly = assemblies.find(a => a.name === addrDetails.assembly || a.code === addrDetails.assembly);
+      if (foundAssembly) setAssembly(foundAssembly);
+    }
+  }, [mdmsRes, assemblies]);
+  const blocks = assembly ? getBlocks(assembly.children) : [];
+  useEffect(() => {
+    if (assembly && ward && !blocks.find(b => b.name === ward.name)) {
+      setWard(null);
+    }
+  }, [assembly]);
   const addressOptions = [{
     code: "AADHAAR",
     name: "EKYC_AADHAAR_ADDRESS"
@@ -1134,7 +1120,9 @@ const AddressDetails = ({
       building,
       landmark,
       pincode,
-      doorPhoto
+      doorPhoto,
+      assembly: assembly === null || assembly === void 0 ? void 0 : assembly.name,
+      ward: ward === null || ward === void 0 ? void 0 : ward.name
     };
     if (onComplete) {
       onComplete(payload);
@@ -1492,32 +1480,48 @@ const AddressDetails = ({
       }
     }),
     label: t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), isMdmsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement("div", {
     style: {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
       gap: "14px",
       marginBottom: "24px"
     }
-  }, /*#__PURE__*/React.createElement(AdminCard, {
-    bgColor: "#E1F5EE",
-    iconBg: "#9FE1CB",
-    icon: /*#__PURE__*/React.createElement(FlagIcon, {
-      size: 18
-    }),
-    labelColor: "#0F6E56",
-    label: t("EKYC_ASSEMBLY") || "Assembly",
-    value: addrDetails.assembly || "AC-12 Chandni Chowk"
-  }), /*#__PURE__*/React.createElement(AdminCard, {
-    bgColor: "#E6F1FB",
-    iconBg: "#B5D4F4",
-    icon: /*#__PURE__*/React.createElement(IdCardIcon, {
-      size: 18
-    }),
-    labelColor: "#185FA5",
-    label: t("EKYC_WARD") || "Ward",
-    value: addrDetails.ward || "WARD-45 Civil Lines"
-  })), /*#__PURE__*/React.createElement("hr", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_ASSEMBLY") || "Assembly Constituency"), /*#__PURE__*/React.createElement(Dropdown, {
+    option: assemblies,
+    optionKey: "name",
+    selected: assembly,
+    select: val => {
+      setAssembly(val);
+      setWard(null);
+    },
+    t: t
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_WARD") || "Block"), /*#__PURE__*/React.createElement(Dropdown, {
+    option: blocks,
+    optionKey: "name",
+    selected: ward,
+    select: setWard,
+    disabled: !assembly,
+    t: t
+  }))), /*#__PURE__*/React.createElement("hr", {
     style: {
       margin: "24px 0",
       border: 0,
@@ -2042,9 +2046,12 @@ const RadioToggleRow = ({
   t: t,
   innerStyles: {
     display: "flex",
-    gap: "20px"
+    gap: "20px",
+    alignItems: "center"
   },
   style: {
+    display: "flex",
+    gap: "20px",
     marginBottom: 0
   }
 }));
@@ -2176,7 +2183,7 @@ const AadhaarVerification = () => {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
       gap: "14px",
-      marginBottom: "4px"
+      marginBottom: "20px"
     },
     optionalTag: {
       display: "inline-block",
@@ -2320,7 +2327,7 @@ const AadhaarVerification = () => {
       if (val.length <= 12 && /^\d*$/.test(val)) setAadhaarLastFour(val);
     },
     placeholder: t("EKYC_ENTER_LAST_4_DIGIT") || "Enter 12 digits",
-    maxLength: 4,
+    maxLength: 12,
     disabled: isAadhaarVerified,
     inputStyle: isAadhaarVerified ? styles.verifiedInput : {}
   }))), !isAadhaarVerified && /*#__PURE__*/React.createElement(SubmitBar, {
@@ -2401,6 +2408,7 @@ const AadhaarVerification = () => {
     selected: nameCorrect,
     onSelect: setNameCorrect,
     options: yesNoOptions,
+    sty: true,
     t: t
   }), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
     className: "field"
@@ -2409,6 +2417,9 @@ const AadhaarVerification = () => {
       size: 15,
       color: nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"
     }),
+    style: {
+      marginBottom: "12px"
+    },
     value: userName,
     onChange: e => setUserName(e.target.value),
     placeholder: t("EKYC_ENTER_NAME_PLACEHOLDER") || "Enter full name",
@@ -2426,6 +2437,9 @@ const AadhaarVerification = () => {
       size: 15,
       color: mobileChange.code === "YES" ? "#64748b" : "#94a3b8"
     }),
+    style: {
+      marginBottom: "12px"
+    },
     value: mobileNumber,
     onChange: e => setMobileNumber(e.target.value),
     placeholder: "+91 XXXXX XXXXX",