@djb25/digit-ui-module-vendor 1.0.58 → 1.0.59

package/dist/index.modern.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useCallback, useReducer, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useReducer, useMemo, useRef } from 'react';
 import { useHistory, Link, useLocation, useParams, useRouteMatch, Switch, Route, Redirect } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { VerticalTimeline, FormComposer, Toast, Card, ShippingTruck, Table, CheckBox, Loader, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, Dropdown, AddIcon, Menu, LinkLabel, SubmitBar, TextInput, DatePicker as DatePicker$4, ViewsIcon, ToggleSwitch, Modal, MdClose, CardSectionHeader, CardText, Row, EditIcon, DeleteIcon, Header, SearchForm, SearchField, MobileNumber, CardLabelError, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, FormStep, LabelFieldPair, CardLabel, CustomTooltip, UploadFile, RadioOrSelect, MultiSelectDropdown, CitizenHomeCard, CardHeader, CardSubHeader, StatusTable, LinkButton, Banner, InfoIcon } from '@djb25/digit-ui-react-components';
+import { VerticalTimeline, FormComposer, Toast, Card, ShippingTruck, Table, CheckBox, Loader, RadioButtons, CloseSvg, Localities, RemoveableTag, ActionBar, ApplyFilterBar, Dropdown, AddIcon, Menu, LinkLabel, SubmitBar, TextInput, DatePicker as DatePicker$4, ViewsIcon, ToggleSwitch, Modal, MdClose, CardSectionHeader, CardText, Row, EditIcon, DeleteIcon, Header, SearchForm, SearchField, MobileNumber, CardLabelError, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, FormStep, LabelFieldPair, CardLabel, UploadFile, RadioOrSelect, MultiSelectDropdown, CitizenHomeCard, CardHeader, CardSubHeader, StatusTable, LinkButton, Banner, InfoIcon, CustomTooltip } from '@djb25/digit-ui-react-components';
 import { useQueryClient } from 'react-query';
 import { useForm, Controller } from 'react-hook-form';
 
@@ -1034,7 +1034,6 @@ const VendorInbox = props => {
           key: "error",
           action: "Failed to fetch document."
         });
-        setTimeout(closeToast, 5000);
       });
       return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
@@ -2324,6 +2323,14 @@ const SearchVendor = () => {
   const _useState9 = useState(null),
     showToast = _useState9[0],
     setShowToast = _useState9[1];
+  const _Digit$Hooks$useToast = Digit.Hooks.useToast(),
+    consumeToast = _Digit$Hooks$useToast.consumeToast;
+  useEffect(() => {
+    const message = consumeToast();
+    if (message) {
+      setShowToast(message);
+    }
+  }, []);
   const isCitizen = (userInfo === null || userInfo === void 0 ? void 0 : (_userInfo$info = userInfo.info) === null || _userInfo$info === void 0 ? void 0 : _userInfo$info.type) === "CITIZEN";
   const loggedInVendorId = userInfo === null || userInfo === void 0 ? void 0 : (_userInfo$info2 = userInfo.info) === null || _userInfo$info2 === void 0 ? void 0 : _userInfo$info2.uuid;
   const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
@@ -3637,28 +3644,19 @@ const SurveyorDetails = props => {
   })));
 };
 
-const Heading$2 = props => {
-  return /*#__PURE__*/React.createElement("h1", {
-    className: "heading-m"
-  }, props.label);
-};
-const CloseBtn$1 = props => {
-  return /*#__PURE__*/React.createElement("div", {
-    conClick: props.onClick
-  }, /*#__PURE__*/React.createElement(CloseSvg, null));
-};
 const formatLabel = key => {
   const result = key.replace(/([A-Z])/g, " $1");
   return result.charAt(0).toUpperCase() + result.slice(1);
 };
-const EditVendorDetails = props => {
+const VendorDetails = () => {
   var _dsoData$, _dsoData$$dsoDetails, _vendorAdditionalData, _vendorAdditionalData2, _vendorAdditionalData3, _parsedAdditionalDeta, _userInfo$info$type, _dsoData$5, _dsoData$5$employeeRe, _supervisorData$super, _surveyorData$surveyo;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
   const history = useHistory();
   const queryClient = useQueryClient();
-  let _useParams = useParams(),
+  const vendorId = new URLSearchParams(location.search).get("vendorId");
+  const _useParams = useParams(),
     dsoId = _useParams.id;
   const _useState = useState(false),
     displayMenu = _useState[0],
@@ -3764,9 +3762,9 @@ const EditVendorDetails = props => {
       case "ADD_DRIVER":
         return setShowModal(true);
       case "EDIT":
-        return history.push("/digit-ui/" + userType + "/fsm/registry/modify-vendor/" + dsoId);
+        return history.push("/digit-ui/" + userType + "/vendor/registry/modify-vendor/" + (dsoId || vendorId));
       case "HOME":
-        return history.push("/digit-ui/" + userType + "/fsm/registry?selectedTabs=VENDOR");
+        return history.push("/digit-ui/" + userType + "/vendor/registry?selectedTabs=VENDOR");
     }
   }, [selectedAction]);
   useEffect(() => {
@@ -3856,11 +3854,11 @@ const EditVendorDetails = props => {
   };
   const onEdit = (details, type, id) => {
     if (type === "ES_FSM_REGISTRY_DETAILS_TYPE_DRIVER") {
-      history.push("/digit-ui/" + userType + "/fsm/registry/modify-driver/" + id);
+      history.push("/digit-ui/" + userType + "/vendor/registry/modify-driver/" + id);
     } else {
       var _details$values, _details$values$find;
       let registrationNumber = details === null || details === void 0 ? void 0 : (_details$values = details.values) === null || _details$values === void 0 ? void 0 : (_details$values$find = _details$values.find(ele => ele.title === "ES_FSM_REGISTRY_VEHICLE_NUMBER")) === null || _details$values$find === void 0 ? void 0 : _details$values$find.value;
-      history.push("/digit-ui/" + userType + "/fsm/registry/modify-vehicle/" + registrationNumber);
+      history.push("/digit-ui/" + userType + "/vendor/registry/modify-vehicle/" + registrationNumber);
     }
   };
   const onDelete = (details, type, id) => {
@@ -3909,7 +3907,6 @@ const EditVendorDetails = props => {
           key: "error",
           action: error
         });
-        setTimeout(closeToast, 5000);
       },
       onSuccess: (data, variables) => {
         setShowToast({
@@ -3920,9 +3917,6 @@ const EditVendorDetails = props => {
         refetchDso();
         refetchVehicle();
         refetchDriver();
-        setTimeout(() => {
-          closeToast();
-        }, 5000);
       }
     });
   };
@@ -4057,9 +4051,9 @@ const EditVendorDetails = props => {
           }, safeVal));
         })), /*#__PURE__*/React.createElement("div", {
           className: "add-details-link hover-button",
-          onClick: () => history.push("/digit-ui/" + userType + "/vendor/registry/additionaldetails/info?vendorId=" + dsoId)
+          onClick: () => history.push("/digit-ui/" + userType + "/vendor/registry/additionaldetails/info?vendorId=" + (dsoId || vendorId))
         }, t("Edit Details"))) : userType !== "CITIZEN" && !isEkyc && /*#__PURE__*/React.createElement("div", {
-          onClick: () => history.push("/digit-ui/" + userType + "/vendor/registry/additionaldetails/vendor-details?vendorId=" + dsoId),
+          onClick: () => history.push("/digit-ui/" + userType + "/vendor/registry/additionaldetails/modify-details?vendorId=" + (dsoId || vendorId)),
           className: "add-details-link hover-button"
         }, t("Add Additional Details")));
       }
@@ -4071,7 +4065,9 @@ const EditVendorDetails = props => {
         caption: value.caption,
         className: "border-none flex-box " + (!isMobile ? "vendor-details-row" : "")
       });
-    }), detail === null || detail === void 0 ? void 0 : (_detail$child = detail.child) === null || _detail$child === void 0 ? void 0 : _detail$child.map((data, index) => {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex-box flex-box-col flex-gap-2"
+    }, detail === null || detail === void 0 ? void 0 : (_detail$child = detail.child) === null || _detail$child === void 0 ? void 0 : _detail$child.map((data, index) => {
       var _data$values;
       return /*#__PURE__*/React.createElement(Card, {
         className: "card-with-background",
@@ -4114,7 +4110,7 @@ const EditVendorDetails = props => {
           color: "green"
         } : {}
       }, value.value ? t(String(value.value)) : "N/A")))));
-    }), detail.type && /*#__PURE__*/React.createElement("div", {
+    })), detail.type && /*#__PURE__*/React.createElement("div", {
       className: "add-details-link hover-button",
       onClick: () => onActionSelect(detail.type === "ES_FSM_REGISTRY_DETAILS_TYPE_DRIVER" ? "ADD_DRIVER" : "ADD_VEHICLE")
     }, t(detail.type + "_ADD"))));
@@ -4133,7 +4129,7 @@ const EditVendorDetails = props => {
     t: t
   }), /*#__PURE__*/React.createElement("div", {
     className: "add-details-link hover-button",
-    onClick: () => history.push("/digit-ui/" + userType + "/vendor/registry/new-supervisor?vendorId=" + dsoId)
+    onClick: () => history.push("/digit-ui/" + userType + "/vendor/registry/new-supervisor?vendorId=" + (dsoId || vendorId))
   }, t("ES_VENDOR_ADD_SUPERVISOR"))), /*#__PURE__*/React.createElement(CardSectionHeader, {
     style: {
       marginBottom: "16px",
@@ -4148,10 +4144,10 @@ const EditVendorDetails = props => {
     pageSizeLimit: 10,
     t: t
   })))), showModal && /*#__PURE__*/React.createElement(Modal, {
-    headerBarMain: /*#__PURE__*/React.createElement(Heading$2, {
-      label: t(selectedAction === "DELETE" ? "ES_FSM_REGISTRY_DELETE_POPUP_HEADER" : selectedAction === "ADD_VEHICLE" ? "ES_FSM_REGISTRY_ADD_VEHICLE_POPUP_HEADER" : "ES_FSM_REGISTRY_ADD_DRIVER_POPUP_HEADER")
-    }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$1, {
+    headerBarMain: /*#__PURE__*/React.createElement("h1", {
+      className: "heading-m"
+    }, t(selectedAction === "DELETE" ? "ES_FSM_REGISTRY_DELETE_POPUP_HEADER" : selectedAction === "ADD_VEHICLE" ? "ES_FSM_REGISTRY_ADD_VEHICLE_POPUP_HEADER" : "ES_FSM_REGISTRY_ADD_DRIVER_POPUP_HEADER")),
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseSvg, {
       onClick: closeModal
     }),
     actionCancelLabel: t("CS_COMMON_CANCEL"),
@@ -4259,15 +4255,12 @@ const stringReplaceAll = function (str, searcher, replaceWith) {
   return str;
 };
 
-const VendorConfig = function (t, disabled, formData) {
-  var _formData, _formData$serviceType;
-  if (disabled === void 0) {
-    disabled = false;
+const VendorConfig = function (t, module, genderMenu, update) {
+  var _module;
+  if (module === void 0) {
+    module = "";
   }
-  if (formData === void 0) {
-    formData = {};
-  }
-  const isEkyc = ((_formData = formData) === null || _formData === void 0 ? void 0 : (_formData$serviceType = _formData.serviceType) === null || _formData$serviceType === void 0 ? void 0 : _formData$serviceType.code) === "EKYC";
+  const isEkyc = ((_module = module) === null || _module === void 0 ? void 0 : _module.toLocaleUpperCase()) === "EKYC";
   return [{
     head: "ES_VRNDOR_NEW_VENDOR_DETAILS",
     isCollapsible: true,
@@ -4276,7 +4269,7 @@ const VendorConfig = function (t, disabled, formData) {
       label: "ES_FSM_REGISTRY_NEW_VENDOR_NAME",
       isMandatory: true,
       type: "text",
-      disable: disabled,
+      disable: false,
       populators: {
         name: "vendorName",
         validation: {
@@ -4287,27 +4280,12 @@ const VendorConfig = function (t, disabled, formData) {
         defaultValue: "",
         className: "payment-form-text-input-correction"
       }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_EMAIL",
-      isMandatory: false,
-      type: "text",
-      key: "emailId",
-      populators: {
-        name: "emailId",
-        validation: {
-          required: false,
-          pattern: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+$/
-        },
-        error: t("FSM_REGISTRY_INVALID_EMAIL"),
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
-      }
     }, {
       label: "ES_FSM_REGISTRY_NEW_VENDOR_PHONE",
       isMandatory: true,
       type: "mobileNumber",
       key: "phone",
-      disable: disabled,
+      disable: false,
       populators: {
         name: "phone",
         validation: {
@@ -4322,13 +4300,28 @@ const VendorConfig = function (t, disabled, formData) {
         defaultValue: "",
         className: "payment-form-text-input-correction"
       }
+    }, {
+      label: "ES_FSM_REGISTRY_NEW_EMAIL",
+      isMandatory: false,
+      type: "text",
+      key: "emailId",
+      populators: {
+        name: "emailId",
+        validation: {
+          required: false,
+          pattern: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+$/
+        },
+        error: t("FSM_REGISTRY_INVALID_EMAIL"),
+        defaultValue: "",
+        className: "payment-form-text-input-correction"
+      }
     }, {
       label: "ES_VENDOR_REGISTRY_SERVICE_TYPE",
       isMandatory: true,
       type: "component",
       key: "serviceType",
       component: "SelectServiceType",
-      disable: disabled,
+      disable: update,
       populators: {
         name: "serviceType",
         defaultValue: {
@@ -4398,17 +4391,8 @@ const VendorConfig = function (t, disabled, formData) {
       component: "SelectEkycDropdown",
       populators: {
         name: "gender",
-        options: [{
-          code: "MALE",
-          name: "ES_COMMON_GENDER_MALE"
-        }, {
-          code: "FEMALE",
-          name: "ES_COMMON_GENDER_FEMALE"
-        }, {
-          code: "OTHER",
-          name: "ES_COMMON_GENDER_OTHER"
-        }],
-        optionsKey: "name"
+        options: genderMenu,
+        optionsKey: "i18nKey"
       }
     }, {
       label: "ES_FSM_REGISTRY_NEW_DOB",
@@ -4448,7 +4432,7 @@ const VendorConfig = function (t, disabled, formData) {
 };
 
 const AddVendor = () => {
-  var _Digit$UserService$ge, _formData$serviceType;
+  var _Digit$UserService$ge, _formData$serviceType2;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -4461,12 +4445,30 @@ const AddVendor = () => {
   const _useState2 = useState(null),
     showToast = _useState2[0],
     setShowToast = _useState2[1];
+  const _useState3 = useState([]),
+    genderMenu = _useState3[0],
+    setGenderMenu = _useState3[1];
   const _Digit$Hooks$useSessi = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false),
     setMutationHappened = _Digit$Hooks$useSessi[1];
   const _Digit$Hooks$useSessi2 = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false),
     clearError = _Digit$Hooks$useSessi2[2];
   const _Digit$Hooks$useSessi3 = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false),
     clearSuccessData = _Digit$Hooks$useSessi3[2];
+  const stateId = Digit.ULBService.getStateId();
+  const _Digit$Hooks$obps$use = Digit.Hooks.obps.useMDMS(stateId, "common-masters", ["GenderType"]),
+    genderTypeData = _Digit$Hooks$obps$use.data;
+  useEffect(() => {
+    var _genderTypeData$commo, _genderTypeData$commo2;
+    if (genderTypeData && (_genderTypeData$commo = genderTypeData["common-masters"]) !== null && _genderTypeData$commo !== void 0 && (_genderTypeData$commo2 = _genderTypeData$commo.GenderType) !== null && _genderTypeData$commo2 !== void 0 && _genderTypeData$commo2.length) {
+      var _genderTypeData$commo3, _genderTypeData$commo4;
+      const menuItems = (_genderTypeData$commo3 = genderTypeData["common-masters"]) === null || _genderTypeData$commo3 === void 0 ? void 0 : (_genderTypeData$commo4 = _genderTypeData$commo3.GenderType) === null || _genderTypeData$commo4 === void 0 ? void 0 : _genderTypeData$commo4.filter(data => data.active).map(genderDetails => ({
+        i18nKey: "COMMON_GENDER_" + genderDetails.code,
+        code: "" + genderDetails.code,
+        value: "" + genderDetails.code
+      }));
+      setGenderMenu(menuItems);
+    }
+  }, [genderTypeData]);
   const _Digit$Hooks$fsm$useV = Digit.Hooks.fsm.useVendorCreate(tenantId),
     mutate = _Digit$Hooks$fsm$useV.mutate;
   useEffect(() => {
@@ -4486,16 +4488,19 @@ const AddVendor = () => {
       amount: null
     }
   };
-  const _useState3 = useState(defaultValues),
-    formData = _useState3[0],
-    setFormData = _useState3[1];
-  const Config = React.useMemo(() => VendorConfig(t, false, formData), [t, (_formData$serviceType = formData.serviceType) === null || _formData$serviceType === void 0 ? void 0 : _formData$serviceType.code]);
+  const _useState4 = useState(defaultValues),
+    formData = _useState4[0],
+    setFormData = _useState4[1];
+  const Config = React.useMemo(() => {
+    var _formData$serviceType;
+    return VendorConfig(t, (_formData$serviceType = formData.serviceType) === null || _formData$serviceType === void 0 ? void 0 : _formData$serviceType.code, genderMenu);
+  }, [t, formData === null || formData === void 0 ? void 0 : (_formData$serviceType2 = formData.serviceType) === null || _formData$serviceType2 === void 0 ? void 0 : _formData$serviceType2.i18nKey, genderMenu]);
   const onFormValueChange = (setValue, data) => {
-    var _data$zoneIds, _data$serviceType, _formData$serviceType2, _data$serviceType2;
+    var _data$zoneIds, _data$serviceType, _formData$serviceType3, _data$serviceType2;
     const currentZoneCodes = (data === null || data === void 0 ? void 0 : (_data$zoneIds = data.zoneIds) === null || _data$zoneIds === void 0 ? void 0 : _data$zoneIds.map(item => item === null || item === void 0 ? void 0 : item.code)) || [];
     const previousZoneCodes = (formData === null || formData === void 0 ? void 0 : formData.zoneIds) || [];
     const zoneChanged = currentZoneCodes.join(",") !== previousZoneCodes.join(",");
-    if ((data === null || data === void 0 ? void 0 : (_data$serviceType = data.serviceType) === null || _data$serviceType === void 0 ? void 0 : _data$serviceType.code) !== (formData === null || formData === void 0 ? void 0 : (_formData$serviceType2 = formData.serviceType) === null || _formData$serviceType2 === void 0 ? void 0 : _formData$serviceType2.code) || zoneChanged) {
+    if ((data === null || data === void 0 ? void 0 : (_data$serviceType = data.serviceType) === null || _data$serviceType === void 0 ? void 0 : _data$serviceType.code) !== (formData === null || formData === void 0 ? void 0 : (_formData$serviceType3 = formData.serviceType) === null || _formData$serviceType3 === void 0 ? void 0 : _formData$serviceType3.code) || zoneChanged) {
       setFormData(prev => _extends({}, prev, {
         serviceType: data === null || data === void 0 ? void 0 : data.serviceType
       }));
@@ -4628,13 +4633,10 @@ const AddVendor = () => {
     if (isEkyc) {
       var _mergedData$zoneIds, _mergedData$clusterId;
       vendorData = _extends({}, vendorData, {
-        zoneIds: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$zoneIds = mergedData.zoneIds) === null || _mergedData$zoneIds === void 0 ? void 0 : _mergedData$zoneIds.map(z => {
-          var _z$;
-          return (z === null || z === void 0 ? void 0 : z.code) || (z === null || z === void 0 ? void 0 : (_z$ = z[1]) === null || _z$ === void 0 ? void 0 : _z$.code) || z;
-        })) || [],
+        zoneIds: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$zoneIds = mergedData.zoneIds) === null || _mergedData$zoneIds === void 0 ? void 0 : _mergedData$zoneIds.map(z => z === null || z === void 0 ? void 0 : z.name)) || [],
         clusterIds: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$clusterId = mergedData.clusterIds) === null || _mergedData$clusterId === void 0 ? void 0 : _mergedData$clusterId.map(c => {
           var _c$;
-          return (c === null || c === void 0 ? void 0 : c.code) || (c === null || c === void 0 ? void 0 : (_c$ = c[1]) === null || _c$ === void 0 ? void 0 : _c$.code) || c;
+          return c === null || c === void 0 ? void 0 : (_c$ = c[1]) === null || _c$ === void 0 ? void 0 : _c$.code;
         })) || [],
         contractStartDate: mergedData.contractStartDate ? new Date(mergedData.contractStartDate).getTime() : null,
         contractEndDate: mergedData.contractEndDate ? new Date(mergedData.contractEndDate).getTime() : null
@@ -5366,8 +5368,8 @@ const createConfig = [{
     nextStep: "vendor-details",
     key: "Documents"
   }, {
-    route: "vendor-details",
-    component: "VendorDetails",
+    route: "modify-details",
+    component: "AdditionalDetails",
     withoutLabel: true,
     key: "vendordet",
     type: "component",
@@ -5451,7 +5453,6 @@ const VENDORCreate = _ref => {
       nextStep = key;
     }
     if (nextStep === null) {
-      console.log("matchhhhh pathhhh", match.path);
       return redirectWithHistory(match.path + "/check");
     }
     if (!isNaN(nextStep.split("/").pop())) {
@@ -5502,8 +5503,7 @@ const VENDORCreate = _ref => {
     clearParams();
     queryClient.invalidateQueries("VENDOR_CREATE");
   };
-  let commonFields = createConfig;
-  commonFields.forEach(obj => {
+  createConfig.forEach(obj => {
     config = config.concat(obj.body.filter(a => !a.hideInCitizen));
   });
   config.indexRoute = "info";
@@ -5545,447 +5545,314 @@ const VENDORCreate = _ref => {
   }))));
 };
 
-const EmployeeApp = _ref => {
-  let path = _ref.path;
+const EditVendor = () => {
+  var _Digit$UserService$ge, _defaultValues$servic2;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  const location = useLocation();
-  sessionStorage.removeItem("revalidateddone");
-  const AddDriver = Digit.ComponentRegistryService.getComponent("AddDriver");
-  const AddVehicle = Digit.ComponentRegistryService.getComponent("AddVehicle");
-  const DriverDetails = Digit.ComponentRegistryService.getComponent("DriverDetails");
-  const VehicleDetails = Digit.ComponentRegistryService.getComponent("VehicleDetails");
-  const EditDriver = Digit.ComponentRegistryService.getComponent("EditDriver");
-  const EditVehicle = Digit.ComponentRegistryService.getComponent("EditVehicle");
-  const getDynamicBreadcrumbs = () => {
-    const pathname = location.pathname;
-    let crumbs = [{
-      icon: HomeIcon,
-      path: "/digit-ui/employee"
+  const history = useHistory();
+  let _useParams = useParams(),
+    dsoId = _useParams.id;
+  const _useState = useState(null),
+    showToast = _useState[0],
+    setShowToast = _useState[1];
+  const _useState2 = useState(false),
+    canSubmit = _useState2[0],
+    setCanSubmit = _useState2[1];
+  const _useState3 = useState({}),
+    defaultValues = _useState3[0],
+    setDefaultValues = _useState3[1];
+  const _useState4 = useState({}),
+    dsoDetails = _useState4[0],
+    setDsoDetails = _useState4[1];
+  const queryClient = useQueryClient();
+  const userInfo = (_Digit$UserService$ge = Digit.UserService.getUser()) === null || _Digit$UserService$ge === void 0 ? void 0 : _Digit$UserService$ge.info;
+  const userType = userInfo === null || userInfo === void 0 ? void 0 : userInfo.type;
+  const _Digit$Hooks$useSessi = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false),
+    setMutationHappened = _Digit$Hooks$useSessi[1];
+  const _Digit$Hooks$useSessi2 = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false),
+    clearError = _Digit$Hooks$useSessi2[2];
+  const _Digit$Hooks$useSessi3 = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false),
+    clearSuccessData = _Digit$Hooks$useSessi3[2];
+  const _useState5 = useState([]),
+    genderMenu = _useState5[0],
+    setGenderMenu = _useState5[1];
+  const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
+      ids: dsoId
     }, {
-      label: t("TITLE_VENDOR_MANAGEMENT"),
-      path: "/digit-ui/employee/vendor/search-vendor"
-    }];
-    if (pathname.includes("/registry/new-vendor")) {
-      crumbs.push({
-        label: t("ES_FSM_REGISTRY_TITLE_NEW_VENDOR")
-      });
-    } else if (pathname.includes("/search-vendor")) {
-      crumbs.push({
-        label: t("SEARCH_VENDOR")
-      });
-    } else if (pathname.includes("/registry/new-driver")) {
-      crumbs.push({
-        label: t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER")
-      });
-    } else if (pathname.includes("/registry/vendor-details") || pathname.includes("/registry/modify-vendor/")) {
-      crumbs.push({
-        label: t("VENDOR_VENDOR_DETAILS")
-      });
-    } else if (pathname.includes("/registry/vehicle-details") || pathname.includes("/registry/modify-vehicle/")) {
-      crumbs.push({
-        label: t("VENDOR_VEHICLE_DETAILS")
-      });
-    } else if (pathname.includes("/registry/new-vehicle")) {
-      crumbs.push({
-        label: t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE")
-      });
-    } else if (pathname.includes("/registry/driver-details") || pathname.includes("/registry/modify-driver/")) {
-      crumbs.push({
-        label: t("VENDOR_DRIVER_DETAILS")
-      });
-    } else if (pathname.includes("/registry/additionaldetails")) {
-      crumbs.push({
-        label: t("VENDOR_ADDITIONAL_DETAILS")
-      });
-    } else if (pathname.includes("/registry/new-supervisor")) {
-      crumbs.push({
-        label: t("ES_FSM_REGISTRY_TITLE_NEW_SUPERVISOR")
-      });
-    } else if (pathname.includes("/registry/supervisor-details") || pathname.includes("/registry/modify-supervisor/")) {
-      crumbs.push({
-        label: t("VENDOR_SUPERVISOR_DETAILS")
-      });
-    } else if (pathname.includes("/registry/new-surveyor")) {
-      crumbs.push({
-        label: t("ES_FSM_REGISTRY_TITLE_NEW_SURVEYOR")
-      });
-    } else if (pathname.includes("/registry/surveyor-details") || pathname.includes("/registry/modify-surveyor/")) {
-      crumbs.push({
-        label: t("VENDOR_SURVEYOR_DETAILS")
-      });
-    }
-    return crumbs;
-  };
-  return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "ground-container employee-app-container form-container"
-  }, /*#__PURE__*/React.createElement(ModuleHeader, {
-    leftContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowLeft, {
-      className: "icon"
-    }), "Back"),
-    onLeftClick: () => window.history.back(),
-    breadcrumbs: getDynamicBreadcrumbs()
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/search-vendor",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "normal"
-    }, /*#__PURE__*/React.createElement(SearchVendor, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/new-driver",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(AddDriver, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/new-vehicle",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(AddVehicle, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/additionaldetails",
-    component: props => {
-      const isInfoPage = props.location.pathname.includes("/info");
-      return /*#__PURE__*/React.createElement(LayoutWrapper, {
-        layoutClass: isInfoPage ? "action" : "normal"
-      }, /*#__PURE__*/React.createElement(VENDORCreate, _extends({}, props, {
-        parentRoute: path
+      staleTime: Infinity
+    }),
+    dsoData = _Digit$Hooks$fsm$useD.data,
+    daoDataLoading = _Digit$Hooks$fsm$useD.isLoading;
+  const stateId = Digit.ULBService.getStateId();
+  const _Digit$Hooks$obps$use = Digit.Hooks.obps.useMDMS(stateId, "common-masters", ["GenderType"]),
+    genderTypeData = _Digit$Hooks$obps$use.data;
+  const _useState6 = useState([]),
+    zones = _useState6[0],
+    setZones = _useState6[1];
+  const _Digit$Hooks$useCommo = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]),
+    boundaryData = _Digit$Hooks$useCommo.data,
+    isLoading = _Digit$Hooks$useCommo.isLoading;
+  useEffect(() => {
+    var _boundaryData$egovLo, _boundaryData$egovLo$, _boundaryData$MdmsRes, _boundaryData$MdmsRes2, _boundaryData$MdmsRes3;
+    const tenantBoundary = (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$egovLo = boundaryData["egov-location"]) === null || _boundaryData$egovLo === void 0 ? void 0 : (_boundaryData$egovLo$ = _boundaryData$egovLo.TenantBoundary) === null || _boundaryData$egovLo$ === void 0 ? void 0 : _boundaryData$egovLo$[0]) || (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$MdmsRes = boundaryData.MdmsRes) === null || _boundaryData$MdmsRes === void 0 ? void 0 : (_boundaryData$MdmsRes2 = _boundaryData$MdmsRes["egov-location"]) === null || _boundaryData$MdmsRes2 === void 0 ? void 0 : (_boundaryData$MdmsRes3 = _boundaryData$MdmsRes2.TenantBoundary) === null || _boundaryData$MdmsRes3 === void 0 ? void 0 : _boundaryData$MdmsRes3[0]);
+    const boundaries = (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.boundary) || (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.children) || [];
+    if (Array.isArray(boundaries === null || boundaries === void 0 ? void 0 : boundaries.children) && (boundaries === null || boundaries === void 0 ? void 0 : boundaries.children.length) > 0) {
+      const allZones = boundaries.children.flatMap(assembly => ((assembly === null || assembly === void 0 ? void 0 : assembly.children) || []).map(zone => ({
+        code: zone.code,
+        name: zone.name
       })));
+      const zonesList = [...new Map(allZones.map(zone => [zone.code, zone])).values()];
+      setZones(zonesList);
     }
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/driver-details/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(DriverDetails, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/modify-driver/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(EditDriver, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/common-search/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "normal"
-    }, /*#__PURE__*/React.createElement(SearchApp, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/new-vendor",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(AddVendor, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/vendor-details/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(EditVendorDetails, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/vehicle-details/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(VehicleDetails, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/modify-vehicle/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(EditVehicle, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/new-supervisor",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(AddSupervisor, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/supervisor-details/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(SupervisorDetails, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/modify-supervisor/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(EditSupervisor, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/new-surveyor",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(AddSurveyor, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/surveyor-details/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(SurveyorDetails, _extends({}, props, {
-      parentRoute: path
-    })))
-  }), /*#__PURE__*/React.createElement(PrivateRoute, {
-    path: path + "/registry/modify-surveyor/:id",
-    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
-      layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(EditSurveyor, _extends({}, props, {
-      parentRoute: path
-    })))
-  })))));
-};
-
-const VENDORCard = () => {
-  const _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  const history = useHistory();
-  const isCitizen = window.location.pathname.toLowerCase().includes("citizen");
-  let hasAccess = Digit.Utils.vendorAccess() || Digit.UserService.hasAccess(["WT_VENDOR", "MT_VENDOR"]);
-  if (isCitizen) {
-    hasAccess = Digit.UserService.hasAccess(["WT_VENDOR", "EKYC_VENDOR", "EKYC_SUPERVISOR"]);
-  }
-  if (!hasAccess) {
-    return null;
-  }
-  const links = [{
-    label: t("VENDOR_NEW_REGISTERATION"),
-    link: isCitizen ? "/digit-ui/citizen/vendor/registry/new-vendor" : "/digit-ui/employee/vendor/registry/new-vendor"
-  }, {
-    label: t("SEARCH_VENDOR"),
-    link: isCitizen ? "/digit-ui/citizen/vendor/search-vendor" : "/digit-ui/employee/vendor/search-vendor"
-  }];
-  const VENDORRole = Digit.UserService.hasAccess(["WT_VENDOR"]);
-  const propsForModuleCard = _extends({
-    Icon: /*#__PURE__*/React.createElement(PropertyHouse, null),
-    moduleName: t("TITLE_VENDOR_MANAGEMENT"),
-    kpis: [{
-      count: 0,
-      label: t("Inbox"),
-      link: isCitizen ? "/digit-ui/citizen/vendor/search-vendor" : "/digit-ui/employee/vendor/search-vendor"
-    }],
-    links: links.filter(link => !(link !== null && link !== void 0 && link.role) || VENDORRole)
-  }, isCitizen ? {
-    onDetailsClick: () => history.push("/digit-ui/citizen/vendor/search-vendor")
-  } : {});
-  if (isCitizen) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "wt-citizen-card-premium"
-    }, /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard));
-  }
-  return /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard);
-};
-
-const VendorDetails = _ref => {
-  var _formData$ownerKey, _formData$ownerKey2, _formData$ownerKey3, _formData$ownerKey4;
-  let t = _ref.t,
-    config = _ref.config,
-    onSelect = _ref.onSelect,
-    userType = _ref.userType,
-    formData = _ref.formData;
-  let index = 0;
-  const user = Digit.UserService.getUser().info;
-  const applicantName = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].applicantName || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey = formData.ownerKey) === null || _formData$ownerKey === void 0 ? void 0 : _formData$ownerKey.applicantName) || "";
-  const emailId = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].emailId || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey2 = formData.ownerKey) === null || _formData$ownerKey2 === void 0 ? void 0 : _formData$ownerKey2.emailId) || "";
-  const mobileNumber = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].mobileNumber || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey3 = formData.ownerKey) === null || _formData$ownerKey3 === void 0 ? void 0 : _formData$ownerKey3.mobileNumber) || (user === null || user === void 0 ? void 0 : user.mobileNumber);
-  const altMobileNumber = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].altMobileNumber || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey4 = formData.ownerKey) === null || _formData$ownerKey4 === void 0 ? void 0 : _formData$ownerKey4.altmobileNumber) || "";
-  const _useState = useState(""),
-    VendorCategory = _useState[0],
-    setVendorCategory = _useState[1];
-  const _useState2 = useState(""),
-    VendorId = _useState2[0],
-    setVendorId = _useState2[1];
-  const _useState3 = useState(""),
-    userName = _useState3[0],
-    setUserName = _useState3[1];
-  const _useState4 = useState(""),
-    Bank = _useState4[0],
-    setBank = _useState4[1];
-  const _useState5 = useState(),
-    BankbranchName = _useState5[0],
-    setBankbranchName = _useState5[1];
-  const _useState6 = useState(""),
-    IFSC = _useState6[0],
-    setIFSC = _useState6[1];
-  const _useState7 = useState(""),
-    AccountNo = _useState7[0],
-    setAccountNo = _useState7[1];
-  const _useState8 = useState(""),
-    PanNo = _useState8[0],
-    setPanNo = _useState8[1];
-  const _useState9 = useState(""),
-    GstNo = _useState9[0],
-    setGstNo = _useState9[1];
-  const _useState0 = useState(""),
-    GstState = _useState0[0],
-    setGstState = _useState0[1];
-  const _useState1 = useState(""),
-    RegistrationNo = _useState1[0],
-    setRegistrationNo = _useState1[1];
-  const _useState10 = useState(""),
-    EpfNo = _useState10[0],
-    setEpfNo = _useState10[1];
-  const _useState11 = useState(""),
-    EsiNo = _useState11[0],
-    setEsiNo = _useState11[1];
-  const _useState12 = useState(""),
-    VendorType = _useState12[0],
-    setVendorType = _useState12[1];
-  const _useState13 = useState(""),
-    Status = _useState13[0],
-    setStatus = _useState13[1];
-  const _useState14 = useState(""),
-    micrNo = _useState14[0],
-    setmicrNo = _useState14[1];
-  const _useState15 = useState(""),
-    PhoneNo = _useState15[0],
-    setPhoneNo = _useState15[1];
-  const _useState16 = useState(""),
-    ContactPerson = _useState16[0],
-    setContactPerson = _useState16[1];
+  }, [boundaryData]);
   useEffect(() => {
-    if (IFSC.length === 11 && !Bank && !BankbranchName && !micrNo) {
-      fetch("https://ifsc.razorpay.com/" + IFSC).then(response => response.json()).then(data => {
-        if (data && data.BANK && data.BRANCH && data.MICR) {
-          setBank(data.BANK);
-          setBankbranchName(data.BRANCH);
-          setmicrNo(data.MICR);
-        }
-      }).catch(() => {});
-    } else {
-      if (IFSC.length === 11 && Bank && BankbranchName) {
-        setBank(Bank);
-        setBankbranchName(BankbranchName);
-        setmicrNo(micrNo);
-      } else {
-        setBank("");
-        setBankbranchName("");
-        setmicrNo("");
-      }
-    }
-  }, [IFSC]);
-  function setvendorbank(e) {
-    setBank(e.target.value);
-  }
-  function setBankbranch(e) {
-    setBankbranchName(e.target.value);
-  }
-  function setvendorifsc(e) {
-    const input = e.target.value.replace(/[^a-zA-Z0-9]/g, "");
-    if (input.length <= 11) {
-      setIFSC(input);
+    var _genderTypeData$commo, _genderTypeData$commo2;
+    if (genderTypeData && (_genderTypeData$commo = genderTypeData["common-masters"]) !== null && _genderTypeData$commo !== void 0 && (_genderTypeData$commo2 = _genderTypeData$commo.GenderType) !== null && _genderTypeData$commo2 !== void 0 && _genderTypeData$commo2.length) {
+      var _genderTypeData$commo3, _genderTypeData$commo4;
+      const menuItems = (_genderTypeData$commo3 = genderTypeData["common-masters"]) === null || _genderTypeData$commo3 === void 0 ? void 0 : (_genderTypeData$commo4 = _genderTypeData$commo3.GenderType) === null || _genderTypeData$commo4 === void 0 ? void 0 : _genderTypeData$commo4.filter(data => data.active).map(genderDetails => ({
+        i18nKey: "COMMON_GENDER_" + genderDetails.code,
+        code: "" + genderDetails.code,
+        value: "" + genderDetails.code
+      }));
+      setGenderMenu(menuItems);
     }
-  }
-  function setvendoraccountno(e) {
-    setAccountNo(e.target.value);
-  }
-  function setpanno(e) {
-    setPanNo(e.target.value);
-  }
-  function setgstno(e) {
-    setGstNo(e.target.value);
-  }
-  function setgststate(e) {
-    setGstState(e.target.value);
-  }
-  function setregistrationno(e) {
-    setRegistrationNo(e.target.value);
-  }
-  function setepfno(e) {
-    setEpfNo(e.target.value);
-  }
-  function setesino(e) {
-    setEsiNo(e.target.value);
-  }
-  function setcontactperson(e) {
-    setContactPerson(e.target.value);
-  }
-  const tenantId = Digit.ULBService.getCurrentTenantId();
-  const _useForm = useForm(),
-    control = _useForm.control;
-  const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
-      staleTime: Infinity
-    }),
-    dsoData = _Digit$Hooks$fsm$useD.data;
+  }, [genderTypeData]);
+  const _Digit$Hooks$fsm$useV = Digit.Hooks.fsm.useVendorUpdate(tenantId),
+    mutate = _Digit$Hooks$fsm$useV.mutate;
+  const _Digit$Hooks$useToast = Digit.Hooks.useToast(),
+    setToast = _Digit$Hooks$useToast.setToast;
   useEffect(() => {
-    if (dsoData) {
-      const vendor = dsoData.find(item => item.id);
-      if (vendor) {
-        setUserName(vendor.name);
-        setVendorId(vendor.id);
-      }
+    setMutationHappened(false);
+    clearSuccessData();
+    clearError();
+  }, []);
+  useEffect(() => {
+    if (dsoData && dsoData[0]) {
+      var _dsoData$, _dsoDetails$additiona, _dsoDetails$additiona2, _dsoDetails$address, _dsoDetails$address2, _dsoDetails$address3, _dsoDetails$address4, _dsoDetails$address4$, _dsoDetails$address5, _dsoDetails$address6, _dsoDetails$address7, _dsoDetails$address8, _dsoDetails$address8$, _dsoDetails$address9, _dsoDetails$address9$, _dsoDetails$address$g, _dsoDetails$address$g2, _dsoDetails$owner, _dsoDetails$owner2, _dsoDetails$owner3, _dsoDetails$owner4, _dsoDetails$owner5, _dsoDetails$owner6, _dsoDetails$owner7, _dsoDetails$owner8, _dsoDetails$owner9, _dsoDetails$additiona3;
+      const dsoDetails = (_dsoData$ = dsoData[0]) === null || _dsoData$ === void 0 ? void 0 : _dsoData$.dsoDetails;
+      setDsoDetails(dsoDetails);
+      const serviceType = {
+        i18nKey: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$additiona = dsoDetails.additionalDetails) === null || _dsoDetails$additiona === void 0 ? void 0 : _dsoDetails$additiona.serviceType.toUpperCase(),
+        code: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$additiona2 = dsoDetails.additionalDetails) === null || _dsoDetails$additiona2 === void 0 ? void 0 : _dsoDetails$additiona2.serviceType
+      };
+      const values = {
+        vendorName: dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.name,
+        propertyAddress: {
+          pincode: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address = dsoDetails.address) === null || _dsoDetails$address === void 0 ? void 0 : _dsoDetails$address.pincode) || "",
+          city: {
+            code: tenantId,
+            name: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address2 = dsoDetails.address) === null || _dsoDetails$address2 === void 0 ? void 0 : _dsoDetails$address2.city,
+            i18nKey: "TENANT_TENANTS_" + tenantId.toUpperCase().replace(".", "_")
+          },
+          locality: _extends({}, dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address3 = dsoDetails.address) === null || _dsoDetails$address3 === void 0 ? void 0 : _dsoDetails$address3.locality, {
+            i18nkey: (dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.tenantId.toUpperCase().split(".").join("_")) + "_REVENUE_" + (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address4 = dsoDetails.address) === null || _dsoDetails$address4 === void 0 ? void 0 : (_dsoDetails$address4$ = _dsoDetails$address4.locality) === null || _dsoDetails$address4$ === void 0 ? void 0 : _dsoDetails$address4$.code)
+          }),
+          houseNo: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address5 = dsoDetails.address) === null || _dsoDetails$address5 === void 0 ? void 0 : _dsoDetails$address5.doorNo) || "",
+          streetName: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address6 = dsoDetails.address) === null || _dsoDetails$address6 === void 0 ? void 0 : _dsoDetails$address6.street) || "",
+          landmark: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address7 = dsoDetails.address) === null || _dsoDetails$address7 === void 0 ? void 0 : _dsoDetails$address7.landmark) || "",
+          latitude: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address8 = dsoDetails.address) === null || _dsoDetails$address8 === void 0 ? void 0 : (_dsoDetails$address8$ = _dsoDetails$address8.geoLocation) === null || _dsoDetails$address8$ === void 0 ? void 0 : _dsoDetails$address8$.latitude) || "",
+          longitude: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$address9 = dsoDetails.address) === null || _dsoDetails$address9 === void 0 ? void 0 : (_dsoDetails$address9$ = _dsoDetails$address9.geoLocation) === null || _dsoDetails$address9$ === void 0 ? void 0 : _dsoDetails$address9$.longitude) || ""
+        },
+        cpt: {
+          details: {
+            address: {
+              pincode: dsoDetails.address.pincode,
+              city: {
+                code: tenantId,
+                name: dsoDetails.address.city,
+                i18nKey: "TENANT_TENANTS_" + tenantId.toUpperCase().replace(".", "_")
+              },
+              locality: _extends({}, dsoDetails.address.locality, {
+                i18nKey: dsoDetails.tenantId.toUpperCase().replace(".", "_") + "_REVENUE_" + dsoDetails.address.locality.code
+              }),
+              houseNo: dsoDetails.address.doorNo,
+              street: dsoDetails.address.street,
+              landmark: dsoDetails.address.landmark,
+              geoLocation: {
+                latitude: (_dsoDetails$address$g = dsoDetails.address.geoLocation) === null || _dsoDetails$address$g === void 0 ? void 0 : _dsoDetails$address$g.latitude,
+                longitude: (_dsoDetails$address$g2 = dsoDetails.address.geoLocation) === null || _dsoDetails$address$g2 === void 0 ? void 0 : _dsoDetails$address$g2.longitude
+              }
+            },
+            additionalDetails: {
+              assembly: "",
+              block: "",
+              zone: ""
+            }
+          }
+        },
+        phone: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner = dsoDetails.owner) === null || _dsoDetails$owner === void 0 ? void 0 : _dsoDetails$owner.mobileNumber,
+        ownerName: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner2 = dsoDetails.owner) === null || _dsoDetails$owner2 === void 0 ? void 0 : _dsoDetails$owner2.name,
+        contractEndDate: Digit.DateUtils.ConvertTimestampToDate(dsoDetails.contractEndDate, "yyyy-MM-dd"),
+        contractStartDate: Digit.DateUtils.ConvertTimestampToDate(dsoDetails.contractStartDate, "yyyy-MM-dd"),
+        fatherOrHusbandName: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner3 = dsoDetails.owner) === null || _dsoDetails$owner3 === void 0 ? void 0 : _dsoDetails$owner3.fatherOrHusbandName,
+        relationship: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner4 = dsoDetails.owner) === null || _dsoDetails$owner4 === void 0 ? void 0 : _dsoDetails$owner4.relationship,
+        gender: genderMenu.find(ele => ele.code === dsoDetails.owner.gender),
+        dob: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner5 = dsoDetails.owner) === null || _dsoDetails$owner5 === void 0 ? void 0 : _dsoDetails$owner5.dob) && Digit.DateUtils.ConvertTimestampToDate(dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner6 = dsoDetails.owner) === null || _dsoDetails$owner6 === void 0 ? void 0 : _dsoDetails$owner6.dob, "yyyy-MM-dd"),
+        emailId: (dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner7 = dsoDetails.owner) === null || _dsoDetails$owner7 === void 0 ? void 0 : _dsoDetails$owner7.emailId) === "abc@egov.com" ? "" : dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner8 = dsoDetails.owner) === null || _dsoDetails$owner8 === void 0 ? void 0 : _dsoDetails$owner8.emailId,
+        correspondenceAddress: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$owner9 = dsoDetails.owner) === null || _dsoDetails$owner9 === void 0 ? void 0 : _dsoDetails$owner9.correspondenceAddress,
+        additionalDetails: dsoDetails === null || dsoDetails === void 0 ? void 0 : (_dsoDetails$additiona3 = dsoDetails.additionalDetails) === null || _dsoDetails$additiona3 === void 0 ? void 0 : _dsoDetails$additiona3.description,
+        vendorId: dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.vendor_id,
+        serviceType: serviceType,
+        zoneIds: dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.zoneIds
+      };
+      setDefaultValues(values);
     }
   }, [dsoData]);
-  const goNext = () => {
-    let owner = formData.ownerKey && formData.ownerKey[index];
-    let ownerStep;
-    if (userType === "citizen") {
-      ownerStep = _extends({}, owner, {
-        applicantName,
-        mobileNumber,
-        altMobileNumber,
-        emailId
-      });
-      onSelect(config.key, _extends({}, formData[config.key], ownerStep), false, index);
+  useEffect(() => {
+    var _dsoDetails$zoneIds;
+    if (!zones.length || !((_dsoDetails$zoneIds = dsoDetails.zoneIds) !== null && _dsoDetails$zoneIds !== void 0 && _dsoDetails$zoneIds.length)) return;
+    if (typeof dsoDetails.zoneIds[0] === "object") return;
+    setDefaultValues(prev => _extends({}, prev, {
+      zoneIds: zones.filter(z => {
+        var _prev$zoneIds;
+        return prev === null || prev === void 0 ? void 0 : (_prev$zoneIds = prev.zoneIds) === null || _prev$zoneIds === void 0 ? void 0 : _prev$zoneIds.includes(z.name);
+      })
+    }));
+  }, [dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.zoneIds, zones]);
+  const onFormValueChange = (setValue, data) => {
+    var _data$propertyAddress, _data$propertyAddress2, _data$serviceType, _data$serviceType2;
+    const isAddressFilled = (data === null || data === void 0 ? void 0 : (_data$propertyAddress = data.propertyAddress) === null || _data$propertyAddress === void 0 ? void 0 : _data$propertyAddress.city) && (data === null || data === void 0 ? void 0 : (_data$propertyAddress2 = data.propertyAddress) === null || _data$propertyAddress2 === void 0 ? void 0 : _data$propertyAddress2.locality);
+    const isVendorDetailsFilled = (data === null || data === void 0 ? void 0 : data.vendorName) && (data === null || data === void 0 ? void 0 : data.phone) && (data === null || data === void 0 ? void 0 : (_data$serviceType = data.serviceType) === null || _data$serviceType === void 0 ? void 0 : _data$serviceType.code);
+    const isEkyc = (data === null || data === void 0 ? void 0 : (_data$serviceType2 = data.serviceType) === null || _data$serviceType2 === void 0 ? void 0 : _data$serviceType2.code) === "EKYC";
+    let isEkycFieldsFilled = true;
+    if (isEkyc) {
+      var _data$zoneIds, _data$clusterIds;
+      isEkycFieldsFilled = (data === null || data === void 0 ? void 0 : data.ownerName) && (data === null || data === void 0 ? void 0 : data.contractStartDate) && (data === null || data === void 0 ? void 0 : data.contractEndDate) && (data === null || data === void 0 ? void 0 : (_data$zoneIds = data.zoneIds) === null || _data$zoneIds === void 0 ? void 0 : _data$zoneIds.length) > 0 && (data === null || data === void 0 ? void 0 : (_data$clusterIds = data.clusterIds) === null || _data$clusterIds === void 0 ? void 0 : _data$clusterIds.length) > 0 && (data === null || data === void 0 ? void 0 : data.gender) && (data === null || data === void 0 ? void 0 : data.dob);
+    }
+    if (isVendorDetailsFilled && isAddressFilled && isEkycFieldsFilled) {
+      setCanSubmit(true);
     } else {
-      ownerStep = _extends({}, owner, {
-        VendorCategory,
-        name: userName,
-        VendorId: VendorId,
-        Bank,
-        BankbranchName,
-        IFSC,
-        AccountNo,
-        PanNo,
-        GstNo,
-        GstState,
-        RegistrationNo,
-        EpfNo,
-        EsiNo,
-        VendorType,
-        Status,
-        micrNo,
-        PhoneNo,
-        ContactPerson
-      });
-      onSelect(config.key, ownerStep, false, index);
+      setCanSubmit(false);
     }
   };
-  useEffect(() => {
-    if (userType === "citizen") {
-      goNext();
+  const closeToast = () => {
+    setShowToast(null);
+  };
+  const onSubmit = data => {
+    var _address$city, _address$city2, _address$city3, _address$city4, _address$locality, _address$locality2, _address$ward, _address$ward2, _mergedData$plotNo, _mergedData$buildingN, _mergedData$serviceTy, _mergedData$address, _mergedData$address2, _mergedData$relations, _mergedData$gender, _mergedData$serviceTy2;
+    const mergedData = data;
+    const address = mergedData === null || mergedData === void 0 ? void 0 : mergedData.propertyAddress;
+    const pincode = address === null || address === void 0 ? void 0 : address.pincode;
+    const street = address === null || address === void 0 ? void 0 : address.streetName;
+    const doorNo = address === null || address === void 0 ? void 0 : address.houseNo;
+    const landmark = address === null || address === void 0 ? void 0 : address.landmark;
+    const city = address === null || address === void 0 ? void 0 : (_address$city = address.city) === null || _address$city === void 0 ? void 0 : _address$city.name;
+    const state = address === null || address === void 0 ? void 0 : (_address$city2 = address.city) === null || _address$city2 === void 0 ? void 0 : _address$city2.name;
+    const district = address === null || address === void 0 ? void 0 : (_address$city3 = address.city) === null || _address$city3 === void 0 ? void 0 : _address$city3.name;
+    const region = address === null || address === void 0 ? void 0 : (_address$city4 = address.city) === null || _address$city4 === void 0 ? void 0 : _address$city4.name;
+    const localityCode = address === null || address === void 0 ? void 0 : (_address$locality = address.locality) === null || _address$locality === void 0 ? void 0 : _address$locality.code;
+    const localityName = address === null || address === void 0 ? void 0 : (_address$locality2 = address.locality) === null || _address$locality2 === void 0 ? void 0 : _address$locality2.name;
+    const localityArea = address === null || address === void 0 ? void 0 : address.subLocality;
+    const wardCode = address === null || address === void 0 ? void 0 : (_address$ward = address.ward) === null || _address$ward === void 0 ? void 0 : _address$ward.code;
+    const wardName = address === null || address === void 0 ? void 0 : (_address$ward2 = address.ward) === null || _address$ward2 === void 0 ? void 0 : _address$ward2.name;
+    const name = mergedData === null || mergedData === void 0 ? void 0 : mergedData.vendorName;
+    const plotNo = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$plotNo = mergedData.plotNo) === null || _mergedData$plotNo === void 0 ? void 0 : _mergedData$plotNo.trim();
+    const buildingName = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$buildingN = mergedData.buildingName) === null || _mergedData$buildingN === void 0 ? void 0 : _mergedData$buildingN.trim();
+    const emailId = mergedData === null || mergedData === void 0 ? void 0 : mergedData.emailId;
+    const phone = mergedData === null || mergedData === void 0 ? void 0 : mergedData.phone;
+    const isEkyc = (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$serviceTy = mergedData.serviceType) === null || _mergedData$serviceTy === void 0 ? void 0 : _mergedData$serviceTy.i18nKey) === "EKYC";
+    let vendorData = _extends({}, dsoDetails, {
+      tenantId: tenantId,
+      name,
+      agencyType: "ULB",
+      paymentPreference: "post-service",
+      address: _extends({}, dsoDetails.address, {
+        tenantId: tenantId,
+        landmark,
+        doorNo,
+        plotNo,
+        street,
+        city,
+        district,
+        region,
+        state,
+        country: "india",
+        pincode,
+        buildingName,
+        locality: _extends({}, dsoDetails.address.locality, {
+          code: localityCode || "",
+          name: localityName || "",
+          label: "Locality",
+          area: localityArea || ""
+        }),
+        ward: wardCode ? {
+          code: wardCode,
+          name: wardName
+        } : undefined,
+        geoLocation: _extends({}, dsoDetails.address.geoLocation, {
+          latitude: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address = mergedData.address) === null || _mergedData$address === void 0 ? void 0 : _mergedData$address.latitude) || 28.6139,
+          longitude: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address2 = mergedData.address) === null || _mergedData$address2 === void 0 ? void 0 : _mergedData$address2.longitude) || 77.209
+        })
+      }),
+      owner: _extends({}, dsoDetails.owner, {
+        tenantId: "dl",
+        name: (mergedData === null || mergedData === void 0 ? void 0 : mergedData.ownerName) || name,
+        fatherOrHusbandName: (mergedData === null || mergedData === void 0 ? void 0 : mergedData.fatherOrHusbandName) || name,
+        relationship: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$relations = mergedData.relationship) === null || _mergedData$relations === void 0 ? void 0 : _mergedData$relations.code) || "OTHER",
+        gender: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$gender = mergedData.gender) === null || _mergedData$gender === void 0 ? void 0 : _mergedData$gender.code) || "MALE",
+        dob: mergedData !== null && mergedData !== void 0 && mergedData.dob ? new Date(mergedData.dob).getTime() : new Date("1/1/1970").getTime(),
+        emailId: emailId || "",
+        mobileNumber: phone
+      }),
+      additionalDetails: {
+        serviceType: isEkyc ? "ekyc" : mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$serviceTy2 = mergedData.serviceType) === null || _mergedData$serviceTy2 === void 0 ? void 0 : _mergedData$serviceTy2.code
+      },
+      vehicles: [],
+      drivers: [],
+      source: isEkyc ? "eKYC Portal" : "WhatsApp"
+    });
+    if (isEkyc) {
+      var _mergedData$zoneIds, _mergedData$clusterId;
+      vendorData = _extends({}, vendorData, {
+        zoneIds: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$zoneIds = mergedData.zoneIds) === null || _mergedData$zoneIds === void 0 ? void 0 : _mergedData$zoneIds.map(z => z === null || z === void 0 ? void 0 : z.name)) || [],
+        clusterIds: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$clusterId = mergedData.clusterIds) === null || _mergedData$clusterId === void 0 ? void 0 : _mergedData$clusterId.map(c => {
+          var _c$;
+          return c === null || c === void 0 ? void 0 : (_c$ = c[1]) === null || _c$ === void 0 ? void 0 : _c$.code;
+        })) || [],
+        contractStartDate: mergedData.contractStartDate ? new Date(mergedData.contractStartDate).getTime() : null,
+        contractEndDate: mergedData.contractEndDate ? new Date(mergedData.contractEndDate).getTime() : null
+      });
     }
-  }, [VendorCategory, VendorId, userName, Bank, BankbranchName, IFSC, AccountNo, PanNo, GstNo, GstState, RegistrationNo, EpfNo, EsiNo, VendorType, Status, micrNo, PhoneNo, ContactPerson, userType]);
+    const payload = {
+      vendor: vendorData
+    };
+    if (isEkyc) {
+      payload.RequestInfo = {
+        apiId: "Rainmaker",
+        msgId: "ekyc-vendor-create"
+      };
+    }
+    mutate(payload, {
+      onError: error => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+      },
+      onSuccess: () => {
+        queryClient.invalidateQueries("DSO_SEARCH");
+        setToast({
+          key: "success",
+          action: "ES_VENDOR_UPDATE_VENDOR"
+        });
+        history.push("/digit-ui/" + userType + "/vendor/search-vendor");
+      }
+    });
+  };
+  const config = React.useMemo(() => {
+    var _defaultValues$servic;
+    return VendorConfig(t, (defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$servic = defaultValues.serviceType) === null || _defaultValues$servic === void 0 ? void 0 : _defaultValues$servic.i18nKey) || "", genderMenu, true);
+  }, [t, defaultValues === null || defaultValues === void 0 ? void 0 : (_defaultValues$servic2 = defaultValues.serviceType) === null || _defaultValues$servic2 === void 0 ? void 0 : _defaultValues$servic2.i18nKey, genderMenu]);
+  if (daoDataLoading || isLoading || Object.keys(defaultValues).length === 0) {
+    return /*#__PURE__*/React.createElement(Loader, null);
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
     config: [{
       timeLine: [{
-        actions: t("VENDOR_ADDITIONAL_DETAILS"),
+        actions: t("ES_FSM_REGISTRY_TITLE_EDIT_VENDOR"),
         currentStep: 1
       }]
-    }, {
-      timeLine: [{
-        actions: t("VENDOR_DOCUMENT_DETAILS"),
-        currentStep: 2
-      }]
-    }, {
-      timeLine: [{
-        actions: t("VENDOR_SUMMARY"),
-        currentStep: 3
-      }]
     }],
     currentActiveIndex: 0,
     showFinalStep: false
@@ -5994,356 +5861,280 @@ const VendorDetails = _ref => {
       flex: "1",
       overflowY: "auto"
     }
-  }, /*#__PURE__*/React.createElement(FormStep, {
-    config: config,
-    onSelect: goNext,
-    t: t,
-    className: "formcomposer-grid-container-form"
-  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    className: "card-label-smaller"
-  }, /*#__PURE__*/React.createElement(CustomTooltip, {
-    label: "" + t("IFSC_CODE"),
-    isMandatory: false,
-    message: t("INVALID_IFSC_CODE_ERROR_MESSAGE")
-  })), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "IFSC",
-    value: IFSC,
-    placeholder: "Enter IFSC Code",
-    onChange: setvendorifsc,
-    style: {
-      width: "100%"
-    },
-    maxLength: 11,
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "^[A-Z]{4}0[A-Z0-9]{6}$",
-      type: "text",
-      title: t("INVALID_IFSC_CODE_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("VENDOR_BANK_NAME"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
-  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "bankName",
-    placeholder: "Bank Name Auto Select",
-    style: {
-      width: "100%"
-    },
-    value: Bank,
-    onChange: setvendorbank,
-    disabled: true
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("VENDOR_BANK_BRANCH_NAME"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
-  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "BankbranchName",
-    value: BankbranchName,
-    style: {
-      width: "100%"
-    },
-    placeholder: "Bank Branch Name Auto Select",
-    onChange: setBankbranch,
-    disabled: false
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("VENDOR_MICR_NO"), " ", /*#__PURE__*/React.createElement("span", {
-    className: "check-page-link-button"
-  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "MicrNo",
-    value: micrNo,
-    style: {
-      width: "100%"
-    },
-    placeholder: "MICR No",
-    onChange: setmicrNo,
-    disabled: false
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("ACCOUNT_NO")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "AccountNo",
-    value: AccountNo,
-    onChange: setvendoraccountno,
-    style: {
-      width: "100%"
+  }, /*#__PURE__*/React.createElement(FormComposer, {
+    isDisabled: !canSubmit,
+    label: t("ES_COMMON_APPLICATION_SUBMIT"),
+    config: config.filter(i => !i.hideInEmployee).map(config => {
+      return _extends({}, config, {
+        body: config.body.filter(a => !a.hideInEmployee)
+      });
+    }),
+    fieldStyle: {
+      marginRight: 0
     },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "[0-9]{9,18}",
-      type: "text",
-      title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("PHONE_NO")), /*#__PURE__*/React.createElement(MobileNumber, {
-    value: PhoneNo,
-    name: "PhoneNo",
-    onChange: setPhoneNo,
-    style: {
-      width: "100%"
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("CONTACT_PERSON")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "ContactPerson",
-    value: ContactPerson,
-    onChange: setcontactperson,
-    style: {
-      width: "100%"
-    },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "^[a-zA-Z0-9/-]{1,20}$",
-      type: "text",
-      title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("PAN_NO")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "PanNo",
-    value: PanNo,
-    onChange: setpanno,
-    style: {
-      width: "100%"
-    },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "[A-Z]{5}[0-9]{4}[A-Z]{1}",
-      type: "text",
-      title: t("INVALID_PAN_NO_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("GST_NO")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "GstNo",
-    value: GstNo,
-    onChange: setgstno,
-    style: {
-      width: "100%"
-    },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[A-Z0-9]{1}[Z]{1}[A-Z0-9]{1}$",
-      type: "text",
-      title: t("INVALID_GST_NO_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("GST_REGISTERED_STATE/UT")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "GstState",
-    value: GstState,
-    onChange: setgststate,
-    style: {
-      width: "100%"
-    },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "^[a-zA-Z0-9/-]{1,20}$",
-      type: "text",
-      title: t("PT_NAME_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("REGISTRATION_NO")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "RegistrationNo",
-    value: RegistrationNo,
-    onChange: setregistrationno,
-    style: {
-      width: "100%"
-    },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "^[a-zA-Z0-9/-]{1,20}$",
-      type: "text",
-      title: t("INVALID_REGISTRATION_NO_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("EPF_NO")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "EpfNo",
-    value: EpfNo,
-    onChange: setepfno,
-    style: {
-      width: "100%"
-    },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "^[a-zA-Z0-9/-]{1,15}$",
-      type: "text",
-      title: t("INVALID_EPF_NO_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("ESI_NO")), /*#__PURE__*/React.createElement(TextInput, {
-    t: t,
-    type: "text",
-    isMandatory: false,
-    optionKey: "i18nKey",
-    name: "EsiNo",
-    value: EsiNo,
-    onChange: setesino,
-    style: {
-      width: "100%"
-    },
-    ValidationRequired: true,
-    validation: {
-      isRequired: true,
-      pattern: "^[a-zA-Z0-9/-]{1,20}$",
-      type: "text",
-      title: t("INVALID_ESI_NO_ERROR_MESSAGE")
-    }
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("VENDOR_TYPE"), /*#__PURE__*/React.createElement("div", {
-    className: "tooltip",
-    style: {
-      width: "12px",
-      height: "5px",
-      marginLeft: "10px",
-      display: "inline-flex",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "tooltiptext",
-    style: {
-      whiteSpace: "pre-wrap",
-      fontSize: "small",
-      wordWrap: "break-word",
-      width: "300px",
-      marginLeft: "15px",
-      marginBottom: "-10px"
-    }
-  }, "" + t("AST_CLASSIFICATION_ASSET")))), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "VendorType",
-    defaultValue: VendorType,
-    rules: {
-      required: t("CORE_COMMON_REQUIRED_ERRMSG")
-    },
-    render: props => /*#__PURE__*/React.createElement(Dropdown, {
-      selected: VendorType,
-      select: setVendorType,
-      option: [{
-        i18nKey: "Supplier",
-        code: "SUPPLIER"
-      }, {
-        i18nKey: "Contractor",
-        code: "CONTRACTOR"
-      }],
-      optionKey: "i18nKey",
-      placeholder: "Select",
-      t: t
-    })
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("VENOR_CATEGORY"), /*#__PURE__*/React.createElement("div", {
-    className: "tooltip",
-    style: {
-      width: "12px",
-      height: "5px",
-      marginLeft: "10px",
-      display: "inline-flex",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "tooltiptext",
-    style: {
-      whiteSpace: "pre-wrap",
-      fontSize: "small",
-      wordWrap: "break-word",
-      width: "300px",
-      marginLeft: "15px",
-      marginBottom: "-10px"
-    }
-  }))), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "VendorCategory",
-    defaultValue: VendorCategory,
-    rules: {
-      required: t("CORE_COMMON_REQUIRED_ERRMSG")
-    },
-    render: props => /*#__PURE__*/React.createElement(Dropdown, {
-      selected: VendorCategory,
-      select: setVendorCategory,
-      option: [{
-        i18nKey: "Firm",
-        code: "FIRM"
-      }, {
-        i18nKey: "Individual",
-        code: "Individual"
-      }],
-      optionKey: "i18nKey",
-      placeholder: "Select",
-      t: t
-    })
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("STATUS"), /*#__PURE__*/React.createElement("div", {
-    className: "tooltip",
-    style: {
-      width: "12px",
-      height: "5px",
-      marginLeft: "10px",
-      display: "inline-flex",
-      alignItems: "center"
+    onSubmit: onSubmit,
+    defaultValues: defaultValues,
+    onFormValueChange: onFormValueChange,
+    noBreakLine: true
+  }), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error" ? true : false,
+    label: t(showToast.key === "success" ? "ES_FSM_REGISTRY_" + showToast.action + "_SUCCESS" : showToast.action),
+    onClose: closeToast
+  })));
+};
+
+const EmployeeApp = _ref => {
+  let path = _ref.path;
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const location = useLocation();
+  sessionStorage.removeItem("revalidateddone");
+  const AddDriver = Digit.ComponentRegistryService.getComponent("AddDriver");
+  const AddVehicle = Digit.ComponentRegistryService.getComponent("AddVehicle");
+  const DriverDetails = Digit.ComponentRegistryService.getComponent("DriverDetails");
+  const VehicleDetails = Digit.ComponentRegistryService.getComponent("VehicleDetails");
+  const EditDriver = Digit.ComponentRegistryService.getComponent("EditDriver");
+  const EditVehicle = Digit.ComponentRegistryService.getComponent("EditVehicle");
+  const getDynamicBreadcrumbs = () => {
+    const pathname = location.pathname;
+    let crumbs = [{
+      icon: HomeIcon,
+      path: "/digit-ui/employee"
+    }, {
+      label: t("TITLE_VENDOR_MANAGEMENT"),
+      path: "/digit-ui/employee/vendor/search-vendor"
+    }];
+    if (pathname.includes("/registry/new-vendor")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_VENDOR")
+      });
+    } else if (pathname.includes("/search-vendor")) {
+      crumbs.push({
+        label: t("SEARCH_VENDOR")
+      });
+    } else if (pathname.includes("/registry/new-driver")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_DRIVER")
+      });
+    } else if (pathname.includes("/registry/vendor-details") || pathname.includes("/registry/modify-vendor/")) {
+      crumbs.push({
+        label: t("VENDOR_VENDOR_DETAILS")
+      });
+    } else if (pathname.includes("/registry/vehicle-details") || pathname.includes("/registry/modify-vehicle/")) {
+      crumbs.push({
+        label: t("VENDOR_VEHICLE_DETAILS")
+      });
+    } else if (pathname.includes("/registry/new-vehicle")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE")
+      });
+    } else if (pathname.includes("/registry/driver-details") || pathname.includes("/registry/modify-driver/")) {
+      crumbs.push({
+        label: t("VENDOR_DRIVER_DETAILS")
+      });
+    } else if (pathname.includes("/registry/additionaldetails")) {
+      crumbs.push({
+        label: t("VENDOR_ADDITIONAL_DETAILS")
+      });
+    } else if (pathname.includes("/registry/new-supervisor")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_SUPERVISOR")
+      });
+    } else if (pathname.includes("/registry/supervisor-details") || pathname.includes("/registry/modify-supervisor/")) {
+      crumbs.push({
+        label: t("VENDOR_SUPERVISOR_DETAILS")
+      });
+    } else if (pathname.includes("/registry/new-surveyor")) {
+      crumbs.push({
+        label: t("ES_FSM_REGISTRY_TITLE_NEW_SURVEYOR")
+      });
+    } else if (pathname.includes("/registry/surveyor-details") || pathname.includes("/registry/modify-surveyor/")) {
+      crumbs.push({
+        label: t("VENDOR_SURVEYOR_DETAILS")
+      });
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "tooltiptext",
-    style: {
-      whiteSpace: "pre-wrap",
-      fontSize: "small",
-      wordWrap: "break-word",
-      width: "300px",
-      marginLeft: "15px",
-      marginBottom: "-10px"
+    return crumbs;
+  };
+  return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(AppContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "ground-container employee-app-container form-container"
+  }, /*#__PURE__*/React.createElement(ModuleHeader, {
+    leftContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowLeft, {
+      className: "icon"
+    }), "Back"),
+    onLeftClick: () => window.history.back(),
+    breadcrumbs: getDynamicBreadcrumbs()
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/search-vendor",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "normal"
+    }, /*#__PURE__*/React.createElement(SearchVendor, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/new-driver",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(AddDriver, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/new-vehicle",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(AddVehicle, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/additionaldetails",
+    component: props => {
+      const isInfoPage = props.location.pathname.includes("/info");
+      return /*#__PURE__*/React.createElement(LayoutWrapper, {
+        layoutClass: isInfoPage ? "action" : "normal"
+      }, /*#__PURE__*/React.createElement(VENDORCreate, _extends({}, props, {
+        parentRoute: path
+      })));
     }
-  }, "" + t("AST_CLASSIFICATION_ASSET")))), /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "Status",
-    defaultValue: Status,
-    rules: {
-      required: t("CORE_COMMON_REQUIRED_ERRMSG")
-    },
-    render: props => /*#__PURE__*/React.createElement(Dropdown, {
-      selected: Status,
-      select: setStatus,
-      option: [{
-        i18nKey: "Active",
-        code: "ACTIVE"
-      }, {
-        i18nKey: "Inactive",
-        code: "INACTIVE"
-      }],
-      optionKey: "i18nKey",
-      placeholder: "Select",
-      t: t
-    })
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/driver-details/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(DriverDetails, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/modify-driver/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(EditDriver, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/common-search/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "normal"
+    }, /*#__PURE__*/React.createElement(SearchApp, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/new-vendor",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(AddVendor, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/vendor-details/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(VendorDetails, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/modify-vendor/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(EditVendor, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/vehicle-details/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(VehicleDetails, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/modify-vehicle/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(EditVehicle, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/new-supervisor",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(AddSupervisor, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/supervisor-details/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(SupervisorDetails, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/modify-supervisor/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(EditSupervisor, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/new-surveyor",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(AddSurveyor, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/surveyor-details/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(SurveyorDetails, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/modify-surveyor/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(EditSurveyor, _extends({}, props, {
+      parentRoute: path
+    })))
   })))));
 };
 
+const VENDORCard = () => {
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const history = useHistory();
+  const isCitizen = window.location.pathname.toLowerCase().includes("citizen");
+  let hasAccess = Digit.Utils.vendorAccess() || Digit.UserService.hasAccess(["WT_VENDOR", "MT_VENDOR"]);
+  if (isCitizen) {
+    hasAccess = Digit.UserService.hasAccess(["WT_VENDOR", "EKYC_VENDOR", "EKYC_SUPERVISOR"]);
+  }
+  if (!hasAccess) {
+    return null;
+  }
+  const links = [{
+    label: t("VENDOR_NEW_REGISTERATION"),
+    link: isCitizen ? "/digit-ui/citizen/vendor/registry/new-vendor" : "/digit-ui/employee/vendor/registry/new-vendor"
+  }, {
+    label: t("SEARCH_VENDOR"),
+    link: isCitizen ? "/digit-ui/citizen/vendor/search-vendor" : "/digit-ui/employee/vendor/search-vendor"
+  }];
+  const VENDORRole = Digit.UserService.hasAccess(["WT_VENDOR"]);
+  const propsForModuleCard = _extends({
+    Icon: /*#__PURE__*/React.createElement(PropertyHouse, null),
+    moduleName: t("TITLE_VENDOR_MANAGEMENT"),
+    kpis: [{
+      count: 0,
+      label: t("Inbox"),
+      link: isCitizen ? "/digit-ui/citizen/vendor/search-vendor" : "/digit-ui/employee/vendor/search-vendor"
+    }],
+    links: links.filter(link => !(link !== null && link !== void 0 && link.role) || VENDORRole)
+  }, isCitizen ? {
+    onDetailsClick: () => history.push("/digit-ui/citizen/vendor/search-vendor")
+  } : {});
+  if (isCitizen) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wt-citizen-card-premium"
+    }, /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard));
+  }
+  return /*#__PURE__*/React.createElement(EmployeeModuleCard, propsForModuleCard);
+};
+
 const VendorDocuments = _ref => {
   var _formData$documents;
   let t = _ref.t,
@@ -7377,7 +7168,14 @@ const CitizenVendorApp = () => {
     path: path + "/registry/vendor-details/:id",
     component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
       layoutClass: "action"
-    }, /*#__PURE__*/React.createElement(EditVendorDetails, _extends({}, props, {
+    }, /*#__PURE__*/React.createElement(VendorDetails, _extends({}, props, {
+      parentRoute: path
+    })))
+  }), /*#__PURE__*/React.createElement(PrivateRoute, {
+    path: path + "/registry/modify-vendor/:id",
+    component: props => /*#__PURE__*/React.createElement(LayoutWrapper, {
+      layoutClass: "action"
+    }, /*#__PURE__*/React.createElement(EditVendor, _extends({}, props, {
       parentRoute: path
     })))
   }), /*#__PURE__*/React.createElement(PrivateRoute, {
@@ -7529,8 +7327,6 @@ const CheckPage = _ref2 => {
     t = _useTranslation2.t;
   const vendordet = value.vendordet,
     documents = value.documents;
-  console.log("vendordetailssppsss", vendordet);
-  console.log("documents", documents);
   const _useState = useState(false),
     agree = _useState[0],
     setAgree = _useState[1];
@@ -8122,12 +7918,12 @@ const AddDriver = () => {
   })));
 };
 
-const Heading$3 = props => {
+const Heading$2 = props => {
   return /*#__PURE__*/React.createElement("h1", {
     className: "heading-m"
   }, props.label);
 };
-const CloseBtn$2 = props => {
+const CloseBtn$1 = props => {
   return /*#__PURE__*/React.createElement("div", {
     onClick: props.onClick
   }, /*#__PURE__*/React.createElement(CloseSvg, null));
@@ -8469,10 +8265,10 @@ const DriverDetails = () => {
       }, t(value.value) || "N/A"));
     }))));
   }))), showModal && /*#__PURE__*/React.createElement(Modal, {
-    headerBarMain: /*#__PURE__*/React.createElement(Heading$3, {
+    headerBarMain: /*#__PURE__*/React.createElement(Heading$2, {
       label: t(modalHeading())
     }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$2, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$1, {
       onClick: closeModal
     }),
     actionCancelLabel: t("CS_COMMON_CANCEL"),
@@ -8662,939 +8458,1495 @@ const VehicleConfig = function (t, disabled) {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, _extends({
-          onChange: props.onChange,
-          date: props.value
-        }, customProps, {
-          max: (() => {
-            const date = new Date();
-            date.setFullYear(date.getFullYear() - 18);
-            return date.toISOString().split("T")[0];
-          })()
-        }))
-      }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_EMAIL",
-      isMandatory: false,
-      type: "text",
-      key: "emailId",
-      populators: {
-        name: "emailId",
-        validation: {
-          required: false,
-          pattern: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+$/
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, _extends({
+          onChange: props.onChange,
+          date: props.value
+        }, customProps, {
+          max: (() => {
+            const date = new Date();
+            date.setFullYear(date.getFullYear() - 18);
+            return date.toISOString().split("T")[0];
+          })()
+        }))
+      }
+    }, {
+      label: "ES_FSM_REGISTRY_NEW_EMAIL",
+      isMandatory: false,
+      type: "text",
+      key: "emailId",
+      populators: {
+        name: "emailId",
+        validation: {
+          required: false,
+          pattern: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+$/
+        },
+        error: t("FSM_REGISTRY_INVALID_EMAIL"),
+        defaultValue: ""
+      }
+    }]
+  }];
+};
+
+const AddVehicle = _ref => {
+  var _Digit$UserService$ge, _Digit$UserService$ge2;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const stateId = Digit.ULBService.getStateId();
+  const _useState = useState(null),
+    showToast = _useState[0],
+    setShowToast = _useState[1];
+  const history = useHistory();
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const queryClient = useQueryClient();
+  const _Digit$Hooks$useSessi = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false),
+    setMutationHappened = _Digit$Hooks$useSessi[1];
+  const _Digit$Hooks$useSessi2 = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false),
+    clearError = _Digit$Hooks$useSessi2[2];
+  const _Digit$Hooks$useSessi3 = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false),
+    clearSuccessData = _Digit$Hooks$useSessi3[2];
+  const isCitizen = Digit.UserService.getType() === "WT_VENDOR" || Digit.UserService.hasAccess(["WT_VENDOR"]);
+  const _Digit$Hooks$fsm$useV = Digit.Hooks.fsm.useVehicleCreate(stateId),
+    mutate = _Digit$Hooks$fsm$useV.mutate;
+  const _Digit$Hooks$fsm$useV2 = Digit.Hooks.fsm.useVendorUpdate("dl.djb"),
+    mutateVendor = _Digit$Hooks$fsm$useV2.mutate;
+  const mobileNumber = (_Digit$UserService$ge = Digit.UserService.getUser()) === null || _Digit$UserService$ge === void 0 ? void 0 : (_Digit$UserService$ge2 = _Digit$UserService$ge.info) === null || _Digit$UserService$ge2 === void 0 ? void 0 : _Digit$UserService$ge2.mobileNumber;
+  const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
+      mobileNumber: mobileNumber
+    }, {
+      enabled: !!(isCitizen && mobileNumber)
+    }),
+    vendorData = _Digit$Hooks$fsm$useD.data;
+  useEffect(() => {
+    setMutationHappened(false);
+    clearSuccessData();
+    clearError();
+  }, []);
+  const Config = VehicleConfig(t);
+  Config[0].body.forEach(item => {
+    if (item.label === "ES_FSM_REGISTRY_VEHICLE_NUMBER") {
+      item.labelChildren = /*#__PURE__*/React.createElement("div", {
+        className: "tooltip",
+        style: {
+          paddingLeft: "10px",
+          marginBottom: "-3px"
+        }
+      }, /*#__PURE__*/React.createElement(InfoIcon, null), /*#__PURE__*/React.createElement("span", {
+        className: "tooltiptext",
+        style: {
+          width: "320px",
+          left: "230%",
+          fontSize: "14px"
+        }
+      }, item.populators.validation.title));
+    }
+  });
+  const _useState2 = useState(false),
+    canSubmit = _useState2[0],
+    setSubmitValve = _useState2[1];
+  const defaultValues = {
+    serviceType: {
+      code: "WT",
+      name: "WT",
+      i18nKey: "WT"
+    },
+    tripData: {
+      noOfTrips: 1,
+      amountPerTrip: null,
+      amount: null
+    }
+  };
+  const formatVehicleNumber = input => {
+    const cleaned = input.toUpperCase().replace(/[^A-Z0-9]/g, "");
+    if (cleaned.length <= 2) return cleaned;
+    const state = cleaned.slice(0, 2);
+    const rest = cleaned.slice(2);
+    if (!rest) return state;
+    const rtoMatch = rest.match(/^(\d{1,2})/);
+    if (!rtoMatch) return state + "-" + rest;
+    const rtoDigits = rtoMatch[1];
+    const afterRto = rest.slice(rtoDigits.length);
+    const lettersMatch = afterRto.match(/^([A-Z]*)/);
+    const middleLetters = lettersMatch ? lettersMatch[1] : "";
+    const number = afterRto.slice(middleLetters.length);
+    if (!number) {
+      return state + "-" + rtoDigits + middleLetters;
+    }
+    if (middleLetters.length >= 3) {
+      const splitAt = middleLetters.length <= 3 ? 1 : 2;
+      const series = middleLetters.slice(0, splitAt);
+      const subSeries = middleLetters.slice(splitAt);
+      return state + "-" + rtoDigits + series + "-" + subSeries + "-" + number.slice(0, 4);
+    }
+    return state + "-" + rtoDigits + middleLetters + "-" + number.slice(0, 4);
+  };
+  const onFormValueChange = (setValue, formData) => {
+    var _formData$vehicle, _formData$vehicle2;
+    if (formData !== null && formData !== void 0 && formData.registrationNumber) {
+      let updatedRegNo = formatVehicleNumber(formData.registrationNumber);
+      if (updatedRegNo.length > 15) {
+        updatedRegNo = updatedRegNo.slice(0, 15);
+      }
+      if (updatedRegNo !== formData.registrationNumber) {
+        setValue("registrationNumber", updatedRegNo);
+      }
+    }
+    if (formData !== null && formData !== void 0 && formData.registrationNumber && formData !== null && formData !== void 0 && formData.ownerName && formData !== null && formData !== void 0 && formData.phone && formData !== null && formData !== void 0 && (_formData$vehicle = formData.vehicle) !== null && _formData$vehicle !== void 0 && _formData$vehicle.modal && formData !== null && formData !== void 0 && (_formData$vehicle2 = formData.vehicle) !== null && _formData$vehicle2 !== void 0 && _formData$vehicle2.type && formData !== null && formData !== void 0 && formData.selectGender && formData !== null && formData !== void 0 && formData.dob && new Date(formData === null || formData === void 0 ? void 0 : formData.dob).getTime() <= new Date().setFullYear(new Date().getFullYear() - 18)) {
+      setSubmitValve(true);
+    } else {
+      setSubmitValve(false);
+    }
+  };
+  const closeToast = () => {
+    setShowToast(null);
+  };
+  const onSubmit = data => {
+    var _data$vehicle, _data$vehicle$type, _data$vehicle2, _data$vehicle2$modal, _data$vehicle3, _data$vehicle3$type, _data$serviceType, _data$selectGender;
+    const registrationNumber = data === null || data === void 0 ? void 0 : data.registrationNumber;
+    const vehicleType = data === null || data === void 0 ? void 0 : (_data$vehicle = data.vehicle) === null || _data$vehicle === void 0 ? void 0 : (_data$vehicle$type = _data$vehicle.type) === null || _data$vehicle$type === void 0 ? void 0 : _data$vehicle$type.code;
+    const vehicleModal = data === null || data === void 0 ? void 0 : (_data$vehicle2 = data.vehicle) === null || _data$vehicle2 === void 0 ? void 0 : (_data$vehicle2$modal = _data$vehicle2.modal) === null || _data$vehicle2$modal === void 0 ? void 0 : _data$vehicle2$modal.code;
+    const tankCapacity = data === null || data === void 0 ? void 0 : (_data$vehicle3 = data.vehicle) === null || _data$vehicle3 === void 0 ? void 0 : (_data$vehicle3$type = _data$vehicle3.type) === null || _data$vehicle3$type === void 0 ? void 0 : _data$vehicle3$type.capacity;
+    const pollutionCert = new Date("" + (data === null || data === void 0 ? void 0 : data.pollutionCert)).getTime();
+    const insurance = new Date("" + (data === null || data === void 0 ? void 0 : data.insurance)).getTime();
+    const roadTax = new Date("" + (data === null || data === void 0 ? void 0 : data.roadTax)).getTime();
+    const fitnessValidity = new Date("" + (data === null || data === void 0 ? void 0 : data.fitnessValidity)).getTime();
+    const ownerName = data === null || data === void 0 ? void 0 : data.ownerName;
+    const phone = data === null || data === void 0 ? void 0 : data.phone;
+    const additionalDetails = data === null || data === void 0 ? void 0 : (_data$serviceType = data.serviceType) === null || _data$serviceType === void 0 ? void 0 : _data$serviceType.code;
+    const gender = data === null || data === void 0 ? void 0 : (_data$selectGender = data.selectGender) === null || _data$selectGender === void 0 ? void 0 : _data$selectGender.code;
+    const emailId = data === null || data === void 0 ? void 0 : data.emailId;
+    const dob = new Date("" + data.dob).getTime() || new Date("1/1/1970").getTime();
+    const formData = {
+      vehicle: {
+        tenantId: "dl.djb",
+        registrationNumber: registrationNumber,
+        model: vehicleModal,
+        type: vehicleType,
+        tankCapacity: tankCapacity,
+        suctionType: "SEWER_SUCTION_MACHINE",
+        pollutionCertiValidTill: pollutionCert,
+        InsuranceCertValidTill: insurance,
+        fitnessValidTill: fitnessValidity,
+        roadTaxPaidTill: roadTax,
+        gpsEnabled: true,
+        source: "Municipal records",
+        owner: {
+          tenantId: stateId,
+          name: ownerName,
+          fatherOrHusbandName: ownerName,
+          relationship: "OTHER",
+          correspondenceAddress: "",
+          mobileNumber: phone,
+          gender: gender,
+          dob: dob,
+          emailId: emailId || "abc@egov.com"
+        },
+        additionalDetails: {
+          serviceType: additionalDetails
         },
-        error: t("FSM_REGISTRY_INVALID_EMAIL"),
-        defaultValue: ""
+        vehicleOwner: "ULB"
       }
-    }]
-  }];
+    };
+    mutate(formData, {
+      onError: (error, variables) => {
+        var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
+        const errorMessage = (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || (error === null || error === void 0 ? void 0 : error.message) || "An error occurred";
+        setShowToast({
+          key: "error",
+          action: errorMessage
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: (data, variables) => {
+        var _data$Errors, _data$data, _data$data$Errors, _vendorData$;
+        const isError = (data === null || data === void 0 ? void 0 : data.error) === true || (data === null || data === void 0 ? void 0 : (_data$Errors = data.Errors) === null || _data$Errors === void 0 ? void 0 : _data$Errors.length) > 0 || (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$Errors = _data$data.Errors) === null || _data$data$Errors === void 0 ? void 0 : _data$data$Errors.length) > 0;
+        if (isError) {
+          var _data$data2, _data$data2$Errors, _data$data2$Errors$, _data$Errors2, _data$Errors2$;
+          const errorMessage = (data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$Errors = _data$data2.Errors) === null || _data$data2$Errors === void 0 ? void 0 : (_data$data2$Errors$ = _data$data2$Errors[0]) === null || _data$data2$Errors$ === void 0 ? void 0 : _data$data2$Errors$.message) || (data === null || data === void 0 ? void 0 : (_data$Errors2 = data.Errors) === null || _data$Errors2 === void 0 ? void 0 : (_data$Errors2$ = _data$Errors2[0]) === null || _data$Errors2$ === void 0 ? void 0 : _data$Errors2$.message) || (data === null || data === void 0 ? void 0 : data.message) || "An error occurred";
+          setShowToast({
+            key: "error",
+            action: errorMessage
+          });
+          setTimeout(closeToast, 5000);
+          return;
+        }
+        setShowToast({
+          key: "success",
+          action: "ADD_VEHICLE"
+        });
+        queryClient.invalidateQueries("FSM_VEICLES_SEARCH");
+        if (isCitizen && vendorData !== null && vendorData !== void 0 && (_vendorData$ = vendorData[0]) !== null && _vendorData$ !== void 0 && _vendorData$.dsoDetails) {
+          var _data$vehicle4;
+          const newVehicle = (data === null || data === void 0 ? void 0 : (_data$vehicle4 = data.vehicle) === null || _data$vehicle4 === void 0 ? void 0 : _data$vehicle4.map(v => _extends({}, v, {
+            vendorVehicleStatus: "ACTIVE",
+            status: "ACTIVE"
+          }))) || [];
+          const vendor = vendorData[0].dsoDetails;
+          const updatedVendor = {
+            vendor: _extends({}, vendor, {
+              vehicles: vendor.vehicles ? [...vendor.vehicles, ...newVehicle] : [...newVehicle]
+            })
+          };
+          mutateVendor(updatedVendor, {
+            onError: error => {
+              var _error$response2, _error$response2$data, _error$response2$data2, _error$response2$data3;
+              const errorMessage = (error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : (_error$response2$data2 = _error$response2$data.Errors) === null || _error$response2$data2 === void 0 ? void 0 : (_error$response2$data3 = _error$response2$data2[0]) === null || _error$response2$data3 === void 0 ? void 0 : _error$response2$data3.message) || (error === null || error === void 0 ? void 0 : error.message) || "An error occurred";
+              setShowToast({
+                key: "error",
+                action: errorMessage
+              });
+              setTimeout(closeToast, 5000);
+            },
+            onSuccess: vendorDataRes => {
+              var _vendorDataRes$Errors, _vendorDataRes$data, _vendorDataRes$data$E, _Digit$UserService$ge3, _Digit$UserService$ge4, _Digit$UserService$ge5;
+              const isError = (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : vendorDataRes.error) === true || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$Errors = vendorDataRes.Errors) === null || _vendorDataRes$Errors === void 0 ? void 0 : _vendorDataRes$Errors.length) > 0 || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$data = vendorDataRes.data) === null || _vendorDataRes$data === void 0 ? void 0 : (_vendorDataRes$data$E = _vendorDataRes$data.Errors) === null || _vendorDataRes$data$E === void 0 ? void 0 : _vendorDataRes$data$E.length) > 0;
+              if (isError) {
+                var _vendorDataRes$data2, _vendorDataRes$data2$, _vendorDataRes$data2$2, _vendorDataRes$Errors2, _vendorDataRes$Errors3;
+                const errorMessage = (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$data2 = vendorDataRes.data) === null || _vendorDataRes$data2 === void 0 ? void 0 : (_vendorDataRes$data2$ = _vendorDataRes$data2.Errors) === null || _vendorDataRes$data2$ === void 0 ? void 0 : (_vendorDataRes$data2$2 = _vendorDataRes$data2$[0]) === null || _vendorDataRes$data2$2 === void 0 ? void 0 : _vendorDataRes$data2$2.message) || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$Errors2 = vendorDataRes.Errors) === null || _vendorDataRes$Errors2 === void 0 ? void 0 : (_vendorDataRes$Errors3 = _vendorDataRes$Errors2[0]) === null || _vendorDataRes$Errors3 === void 0 ? void 0 : _vendorDataRes$Errors3.message) || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : vendorDataRes.message) || "An error occurred";
+                setShowToast({
+                  key: "error",
+                  action: errorMessage
+                });
+                setTimeout(closeToast, 5000);
+                return;
+              }
+              setShowToast({
+                key: "success",
+                action: "ADD_VEHICLE"
+              });
+              queryClient.invalidateQueries("DSO_SEARCH");
+              const userType = ((_Digit$UserService$ge3 = Digit.UserService.getUser()) === null || _Digit$UserService$ge3 === void 0 ? void 0 : (_Digit$UserService$ge4 = _Digit$UserService$ge3.info) === null || _Digit$UserService$ge4 === void 0 ? void 0 : (_Digit$UserService$ge5 = _Digit$UserService$ge4.type) === null || _Digit$UserService$ge5 === void 0 ? void 0 : _Digit$UserService$ge5.toLowerCase()) || "citizen";
+              setTimeout(() => {
+                closeToast();
+                history.push("/digit-ui/" + userType + "/vendor/search-vendor?selectedTabs=VEHICLE");
+              }, 3000);
+            }
+          });
+        } else {
+          var _Digit$UserService$ge6, _Digit$UserService$ge7, _Digit$UserService$ge8;
+          const userType = ((_Digit$UserService$ge6 = Digit.UserService.getUser()) === null || _Digit$UserService$ge6 === void 0 ? void 0 : (_Digit$UserService$ge7 = _Digit$UserService$ge6.info) === null || _Digit$UserService$ge7 === void 0 ? void 0 : (_Digit$UserService$ge8 = _Digit$UserService$ge7.type) === null || _Digit$UserService$ge8 === void 0 ? void 0 : _Digit$UserService$ge8.toLowerCase()) || "citizen";
+          queryClient.invalidateQueries("FSM_VEICLES_SEARCH");
+          setTimeout(() => {
+            closeToast();
+            history.push("/digit-ui/" + userType + "/vendor/search-vendor?selectedTabs=VEHICLE");
+          }, 3000);
+        }
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      route: "vendor-details",
+      timeLine: [{
+        actions: t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE"),
+        currentStep: 1
+      }]
+    }],
+    currentActiveIndex: 0,
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
+    }
+  }, /*#__PURE__*/React.createElement(FormComposer, {
+    isDisabled: !canSubmit,
+    label: t("ES_COMMON_APPLICATION_SUBMIT"),
+    config: Config.filter(i => !i.hideInEmployee).map(config => {
+      return _extends({}, config, {
+        isCollapsible: true,
+        isDefaultOpen: true,
+        body: config.body.filter(a => !a.hideInEmployee)
+      });
+    }),
+    fieldStyle: {
+      marginRight: 0
+    },
+    onSubmit: onSubmit,
+    defaultValues: defaultValues,
+    onFormValueChange: onFormValueChange,
+    noBreakLine: true,
+    mode: "onChange",
+    noCard: true
+  }), showToast && /*#__PURE__*/React.createElement(Toast, {
+    error: showToast.key === "error" ? true : false,
+    label: t(showToast.key === "success" ? "ES_FSM_REGISTRY_" + showToast.action + "_SUCCESS" : showToast.action),
+    onClose: closeToast
+  })));
 };
 
-const AddVehicle = _ref => {
-  var _Digit$UserService$ge, _Digit$UserService$ge2;
+const Heading$3 = props => {
+  return /*#__PURE__*/React.createElement("h1", {
+    className: "heading-m"
+  }, props.label);
+};
+const CloseBtn$2 = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: props.onClick
+  }, /*#__PURE__*/React.createElement(CloseSvg, null));
+};
+const VehicleDetails = props => {
+  var _vehicleData$6, _vehicleData$6$employ;
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const stateId = Digit.ULBService.getStateId();
-  const _useState = useState(null),
-    showToast = _useState[0],
-    setShowToast = _useState[1];
-  const history = useHistory();
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  const history = useHistory();
   const queryClient = useQueryClient();
-  const _Digit$Hooks$useSessi = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false),
-    setMutationHappened = _Digit$Hooks$useSessi[1];
-  const _Digit$Hooks$useSessi2 = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false),
-    clearError = _Digit$Hooks$useSessi2[2];
-  const _Digit$Hooks$useSessi3 = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false),
-    clearSuccessData = _Digit$Hooks$useSessi3[2];
-  const isCitizen = Digit.UserService.getType() === "WT_VENDOR" || Digit.UserService.hasAccess(["WT_VENDOR"]);
-  const _Digit$Hooks$fsm$useV = Digit.Hooks.fsm.useVehicleCreate(stateId),
-    mutate = _Digit$Hooks$fsm$useV.mutate;
-  const _Digit$Hooks$fsm$useV2 = Digit.Hooks.fsm.useVendorUpdate("dl.djb"),
-    mutateVendor = _Digit$Hooks$fsm$useV2.mutate;
-  const mobileNumber = (_Digit$UserService$ge = Digit.UserService.getUser()) === null || _Digit$UserService$ge === void 0 ? void 0 : (_Digit$UserService$ge2 = _Digit$UserService$ge.info) === null || _Digit$UserService$ge2 === void 0 ? void 0 : _Digit$UserService$ge2.mobileNumber;
-  const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
-      mobileNumber: mobileNumber
+  let _useParams = useParams(),
+    vehicleNumber = _useParams.id;
+  const _useState = useState(false),
+    displayMenu = _useState[0],
+    setDisplayMenu = _useState[1];
+  const _useState2 = useState(null),
+    selectedAction = _useState2[0],
+    setSelectedAction = _useState2[1];
+  const _useState3 = useState(false),
+    showModal = _useState3[0],
+    setShowModal = _useState3[1];
+  const _useState4 = useState(null),
+    showToast = _useState4[0],
+    setShowToast = _useState4[1];
+  const _useState5 = useState([]),
+    vendors = _useState5[0],
+    setVendors = _useState5[1];
+  const _useState6 = useState({}),
+    selectedOption = _useState6[0],
+    setSelectedOption = _useState6[1];
+  const _useState7 = useState(null),
+    vehicleId = _useState7[0],
+    setVehicleId = _useState7[1];
+  const _Digit$Hooks$fsm$useV = Digit.Hooks.fsm.useVehicleDetails(tenantId, {
+      registrationNumber: vehicleNumber
     }, {
-      enabled: !!(isCitizen && mobileNumber)
+      staleTime: Infinity
     }),
+    vehicleData = _Digit$Hooks$fsm$useV.data,
+    isLoading = _Digit$Hooks$fsm$useV.isLoading,
+    refetch = _Digit$Hooks$fsm$useV.refetch;
+  useEffect(() => {
+    if (!isLoading && vehicleData) {
+      var _vehicleData$, _vehicleData$$vehicle;
+      setVehicleId(vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$ = vehicleData[0]) === null || _vehicleData$ === void 0 ? void 0 : (_vehicleData$$vehicle = _vehicleData$.vehicleData) === null || _vehicleData$$vehicle === void 0 ? void 0 : _vehicleData$$vehicle.id);
+    }
+  }, [vehicleData, isLoading]);
+  const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
+      sortBy: "name",
+      sortOrder: "ASC",
+      status: "ACTIVE"
+    }, {}),
     vendorData = _Digit$Hooks$fsm$useD.data;
   useEffect(() => {
-    setMutationHappened(false);
-    clearSuccessData();
-    clearError();
+    if (vendorData) {
+      let vendors = vendorData.map(data => data.dsoDetails);
+      setVendors(vendors);
+    }
+  }, [vendorData]);
+  const _Digit$Hooks$fsm$useU = Digit.Hooks.fsm.useUpdateVehicle(tenantId),
+    mutate = _Digit$Hooks$fsm$useU.mutate;
+  const _Digit$Hooks$fsm$useV2 = Digit.Hooks.fsm.useVendorUpdate(tenantId),
+    mutateVendor = _Digit$Hooks$fsm$useV2.mutate;
+  function onActionSelect(action) {
+    setDisplayMenu(false);
+    setSelectedAction(action);
+  }
+  useEffect(() => {
+    refetch();
   }, []);
-  const Config = VehicleConfig(t);
-  Config[0].body.forEach(item => {
-    if (item.label === "ES_FSM_REGISTRY_VEHICLE_NUMBER") {
-      item.labelChildren = /*#__PURE__*/React.createElement("div", {
-        className: "tooltip",
-        style: {
-          paddingLeft: "10px",
-          marginBottom: "-3px"
-        }
-      }, /*#__PURE__*/React.createElement(InfoIcon, null), /*#__PURE__*/React.createElement("span", {
-        className: "tooltiptext",
-        style: {
-          width: "320px",
-          left: "230%",
-          fontSize: "14px"
-        }
-      }, item.populators.validation.title));
-    }
-  });
-  const _useState2 = useState(false),
-    canSubmit = _useState2[0],
-    setSubmitValve = _useState2[1];
-  const defaultValues = {
-    serviceType: {
-      code: "WT",
-      name: "WT",
-      i18nKey: "WT"
-    },
-    tripData: {
-      noOfTrips: 1,
-      amountPerTrip: null,
-      amount: null
+  useEffect(() => {
+    switch (selectedAction) {
+      case "DELETE":
+      case "ADD_VENDOR":
+      case "EDIT_VENDOR":
+      case "DELETE_VENDOR":
+        return setShowModal(true);
+      case "EDIT":
+        return history.push("/digit-ui/employee/fsm/registry/modify-vehicle/" + vehicleNumber);
+      case "HOME":
+        return history.push("/digit-ui/employee/fsm/registry?selectedTabs=VEHICLE");
     }
+  }, [selectedAction]);
+  const closeToast = () => {
+    setShowToast(null);
   };
-  const formatVehicleNumber = input => {
-    const cleaned = input.toUpperCase().replace(/[^A-Z0-9]/g, "");
-    if (cleaned.length <= 2) return cleaned;
-    const state = cleaned.slice(0, 2);
-    const rest = cleaned.slice(2);
-    if (!rest) return state;
-    const rtoMatch = rest.match(/^(\d{1,2})/);
-    if (!rtoMatch) return state + "-" + rest;
-    const rtoDigits = rtoMatch[1];
-    const afterRto = rest.slice(rtoDigits.length);
-    const lettersMatch = afterRto.match(/^([A-Z]*)/);
-    const middleLetters = lettersMatch ? lettersMatch[1] : "";
-    const number = afterRto.slice(middleLetters.length);
-    if (!number) {
-      return state + "-" + rtoDigits + middleLetters;
-    }
-    if (middleLetters.length >= 3) {
-      const splitAt = middleLetters.length <= 3 ? 1 : 2;
-      const series = middleLetters.slice(0, splitAt);
-      const subSeries = middleLetters.slice(splitAt);
-      return state + "-" + rtoDigits + series + "-" + subSeries + "-" + number.slice(0, 4);
-    }
-    return state + "-" + rtoDigits + middleLetters + "-" + number.slice(0, 4);
+  const closeModal = () => {
+    setSelectedAction(null);
+    setSelectedOption({});
+    setShowModal(false);
   };
-  const onFormValueChange = (setValue, formData) => {
-    var _formData$vehicle, _formData$vehicle2;
-    if (formData !== null && formData !== void 0 && formData.registrationNumber) {
-      let updatedRegNo = formatVehicleNumber(formData.registrationNumber);
-      if (updatedRegNo.length > 15) {
-        updatedRegNo = updatedRegNo.slice(0, 15);
-      }
-      if (updatedRegNo !== formData.registrationNumber) {
-        setValue("registrationNumber", updatedRegNo);
+  const handleAddVendor = () => {
+    var _vehicleData$2, _dsoDetails$owner;
+    let dsoDetails = selectedOption;
+    let vehicleDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$2 = vehicleData[0]) === null || _vehicleData$2 === void 0 ? void 0 : _vehicleData$2.vehicleData;
+    vehicleDetails.vendorVehicleStatus = "ACTIVE";
+    const formData = {
+      vendor: _extends({}, dsoDetails, {
+        owner: _extends({}, dsoDetails.owner, {
+          gender: ((_dsoDetails$owner = dsoDetails.owner) === null || _dsoDetails$owner === void 0 ? void 0 : _dsoDetails$owner.gender) || "OTHERS"
+        }),
+        vehicles: dsoDetails.vehicles ? [...dsoDetails.vehicles, vehicleDetails] : [vehicleDetails]
+      })
+    };
+    mutateVendor(formData, {
+      onError: (error, variables) => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: (data, variables) => {
+        setShowToast({
+          key: "success",
+          action: "EDIT_VENDOR"
+        });
+        refetch();
+        queryClient.invalidateQueries("DSO_SEARCH");
+        setTimeout(closeToast, 5000);
       }
-    }
-    if (formData !== null && formData !== void 0 && formData.registrationNumber && formData !== null && formData !== void 0 && formData.ownerName && formData !== null && formData !== void 0 && formData.phone && formData !== null && formData !== void 0 && (_formData$vehicle = formData.vehicle) !== null && _formData$vehicle !== void 0 && _formData$vehicle.modal && formData !== null && formData !== void 0 && (_formData$vehicle2 = formData.vehicle) !== null && _formData$vehicle2 !== void 0 && _formData$vehicle2.type && formData !== null && formData !== void 0 && formData.selectGender && formData !== null && formData !== void 0 && formData.dob && new Date(formData === null || formData === void 0 ? void 0 : formData.dob).getTime() <= new Date().setFullYear(new Date().getFullYear() - 18)) {
-      setSubmitValve(true);
-    } else {
-      setSubmitValve(false);
-    }
-  };
-  const closeToast = () => {
-    setShowToast(null);
+    });
+    setShowModal(false);
+    setSelectedAction(null);
   };
-  const onSubmit = data => {
-    var _data$vehicle, _data$vehicle$type, _data$vehicle2, _data$vehicle2$modal, _data$vehicle3, _data$vehicle3$type, _data$serviceType, _data$selectGender;
-    const registrationNumber = data === null || data === void 0 ? void 0 : data.registrationNumber;
-    const vehicleType = data === null || data === void 0 ? void 0 : (_data$vehicle = data.vehicle) === null || _data$vehicle === void 0 ? void 0 : (_data$vehicle$type = _data$vehicle.type) === null || _data$vehicle$type === void 0 ? void 0 : _data$vehicle$type.code;
-    const vehicleModal = data === null || data === void 0 ? void 0 : (_data$vehicle2 = data.vehicle) === null || _data$vehicle2 === void 0 ? void 0 : (_data$vehicle2$modal = _data$vehicle2.modal) === null || _data$vehicle2$modal === void 0 ? void 0 : _data$vehicle2$modal.code;
-    const tankCapacity = data === null || data === void 0 ? void 0 : (_data$vehicle3 = data.vehicle) === null || _data$vehicle3 === void 0 ? void 0 : (_data$vehicle3$type = _data$vehicle3.type) === null || _data$vehicle3$type === void 0 ? void 0 : _data$vehicle3$type.capacity;
-    const pollutionCert = new Date("" + (data === null || data === void 0 ? void 0 : data.pollutionCert)).getTime();
-    const insurance = new Date("" + (data === null || data === void 0 ? void 0 : data.insurance)).getTime();
-    const roadTax = new Date("" + (data === null || data === void 0 ? void 0 : data.roadTax)).getTime();
-    const fitnessValidity = new Date("" + (data === null || data === void 0 ? void 0 : data.fitnessValidity)).getTime();
-    const ownerName = data === null || data === void 0 ? void 0 : data.ownerName;
-    const phone = data === null || data === void 0 ? void 0 : data.phone;
-    const additionalDetails = data === null || data === void 0 ? void 0 : (_data$serviceType = data.serviceType) === null || _data$serviceType === void 0 ? void 0 : _data$serviceType.code;
-    const gender = data === null || data === void 0 ? void 0 : (_data$selectGender = data.selectGender) === null || _data$selectGender === void 0 ? void 0 : _data$selectGender.code;
-    const emailId = data === null || data === void 0 ? void 0 : data.emailId;
-    const dob = new Date("" + data.dob).getTime() || new Date("1/1/1970").getTime();
+  const handleEditVendor = () => {
+    var _vehicleData$3, _dsoDetails$owner2;
+    let dsoDetails = selectedOption;
+    let vehicleDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$3 = vehicleData[0]) === null || _vehicleData$3 === void 0 ? void 0 : _vehicleData$3.vehicleData;
+    vehicleDetails.vendorVehicleStatus = "ACTIVE";
     const formData = {
-      vehicle: {
-        tenantId: "dl.djb",
-        registrationNumber: registrationNumber,
-        model: vehicleModal,
-        type: vehicleType,
-        tankCapacity: tankCapacity,
-        suctionType: "SEWER_SUCTION_MACHINE",
-        pollutionCertiValidTill: pollutionCert,
-        InsuranceCertValidTill: insurance,
-        fitnessValidTill: fitnessValidity,
-        roadTaxPaidTill: roadTax,
-        gpsEnabled: true,
-        source: "Municipal records",
-        owner: {
-          tenantId: stateId,
-          name: ownerName,
-          fatherOrHusbandName: ownerName,
-          relationship: "OTHER",
-          correspondenceAddress: "",
-          mobileNumber: phone,
-          gender: gender,
-          dob: dob,
-          emailId: emailId || "abc@egov.com"
-        },
-        additionalDetails: {
-          serviceType: additionalDetails
-        },
-        vehicleOwner: "ULB"
+      vendor: _extends({}, dsoDetails, {
+        owner: _extends({}, dsoDetails.owner, {
+          gender: ((_dsoDetails$owner2 = dsoDetails.owner) === null || _dsoDetails$owner2 === void 0 ? void 0 : _dsoDetails$owner2.gender) || "OTHERS"
+        }),
+        vehicles: dsoDetails.vehicles ? [...dsoDetails.vehicles, vehicleDetails] : [vehicleDetails]
+      })
+    };
+    mutateVendor(formData, {
+      onError: (error, variables) => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: (data, variables) => {
+        setShowToast({
+          key: "success",
+          action: "EDIT_VENDOR"
+        });
+        refetch();
+        queryClient.invalidateQueries("DSO_SEARCH");
+        setTimeout(closeToast, 5000);
+      }
+    });
+    setShowModal(false);
+    setSelectedAction(null);
+  };
+  const handleDeleteVendor = () => {
+    var _vehicleData$4, _vehicleData$4$vendor, _vehicleData$4$vendor2, _dsoDetails$owner3;
+    let formData = {};
+    let dsoDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$4 = vehicleData[0]) === null || _vehicleData$4 === void 0 ? void 0 : (_vehicleData$4$vendor = _vehicleData$4.vendorDetails) === null || _vehicleData$4$vendor === void 0 ? void 0 : (_vehicleData$4$vendor2 = _vehicleData$4$vendor.vendor) === null || _vehicleData$4$vendor2 === void 0 ? void 0 : _vehicleData$4$vendor2[0];
+    let getVehicleVendorDetails = dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.vehicles;
+    getVehicleVendorDetails = getVehicleVendorDetails.map(data => {
+      if (data.id === vehicleId) {
+        data.vendorVehicleStatus = "INACTIVE";
+      }
+      return data;
+    });
+    formData = {
+      vendor: _extends({}, dsoDetails, {
+        owner: _extends({}, dsoDetails.owner, {
+          gender: ((_dsoDetails$owner3 = dsoDetails.owner) === null || _dsoDetails$owner3 === void 0 ? void 0 : _dsoDetails$owner3.gender) || "OTHERS"
+        }),
+        vehicles: getVehicleVendorDetails
+      })
+    };
+    mutateVendor(formData, {
+      onError: (error, variables) => {
+        setShowToast({
+          key: "error",
+          action: error
+        });
+        setTimeout(closeToast, 5000);
+      },
+      onSuccess: (data, variables) => {
+        setShowToast({
+          key: "success",
+          action: "DELETE_VENDOR"
+        });
+        queryClient.invalidateQueries("FSM_VENDOR_SEARCH");
+        refetch();
+        setTimeout(closeToast, 5000);
       }
+    });
+    setShowModal(false);
+  };
+  const handleModalAction = () => {
+    switch (selectedAction) {
+      case "DELETE":
+        return handleDelete();
+      case "DELETE_VENDOR":
+        return handleDeleteVendor();
+      case "ADD_VENDOR":
+        return handleAddVendor();
+      case "EDIT_VENDOR":
+        return handleEditVendor();
+    }
+  };
+  const handleDelete = () => {
+    var _vehicleData$5;
+    let vehicleDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$5 = vehicleData[0]) === null || _vehicleData$5 === void 0 ? void 0 : _vehicleData$5.vehicleData;
+    const formData = {
+      vehicle: _extends({}, vehicleDetails, {
+        status: "INACTIVE"
+      })
     };
     mutate(formData, {
       onError: (error, variables) => {
-        var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
-        const errorMessage = (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || (error === null || error === void 0 ? void 0 : error.message) || "An error occurred";
         setShowToast({
           key: "error",
-          action: errorMessage
+          action: error
         });
         setTimeout(closeToast, 5000);
       },
       onSuccess: (data, variables) => {
-        var _data$Errors, _data$data, _data$data$Errors, _vendorData$;
-        const isError = (data === null || data === void 0 ? void 0 : data.error) === true || (data === null || data === void 0 ? void 0 : (_data$Errors = data.Errors) === null || _data$Errors === void 0 ? void 0 : _data$Errors.length) > 0 || (data === null || data === void 0 ? void 0 : (_data$data = data.data) === null || _data$data === void 0 ? void 0 : (_data$data$Errors = _data$data.Errors) === null || _data$data$Errors === void 0 ? void 0 : _data$data$Errors.length) > 0;
-        if (isError) {
-          var _data$data2, _data$data2$Errors, _data$data2$Errors$, _data$Errors2, _data$Errors2$;
-          const errorMessage = (data === null || data === void 0 ? void 0 : (_data$data2 = data.data) === null || _data$data2 === void 0 ? void 0 : (_data$data2$Errors = _data$data2.Errors) === null || _data$data2$Errors === void 0 ? void 0 : (_data$data2$Errors$ = _data$data2$Errors[0]) === null || _data$data2$Errors$ === void 0 ? void 0 : _data$data2$Errors$.message) || (data === null || data === void 0 ? void 0 : (_data$Errors2 = data.Errors) === null || _data$Errors2 === void 0 ? void 0 : (_data$Errors2$ = _data$Errors2[0]) === null || _data$Errors2$ === void 0 ? void 0 : _data$Errors2$.message) || (data === null || data === void 0 ? void 0 : data.message) || "An error occurred";
-          setShowToast({
-            key: "error",
-            action: errorMessage
-          });
-          setTimeout(closeToast, 5000);
-          return;
-        }
         setShowToast({
           key: "success",
-          action: "ADD_VEHICLE"
+          action: "DELETE_VEHICLE"
         });
         queryClient.invalidateQueries("FSM_VEICLES_SEARCH");
-        if (isCitizen && vendorData !== null && vendorData !== void 0 && (_vendorData$ = vendorData[0]) !== null && _vendorData$ !== void 0 && _vendorData$.dsoDetails) {
-          var _data$vehicle4;
-          const newVehicle = (data === null || data === void 0 ? void 0 : (_data$vehicle4 = data.vehicle) === null || _data$vehicle4 === void 0 ? void 0 : _data$vehicle4.map(v => _extends({}, v, {
-            vendorVehicleStatus: "ACTIVE",
-            status: "ACTIVE"
-          }))) || [];
-          const vendor = vendorData[0].dsoDetails;
-          const updatedVendor = {
-            vendor: _extends({}, vendor, {
-              vehicles: vendor.vehicles ? [...vendor.vehicles, ...newVehicle] : [...newVehicle]
-            })
-          };
-          mutateVendor(updatedVendor, {
-            onError: error => {
-              var _error$response2, _error$response2$data, _error$response2$data2, _error$response2$data3;
-              const errorMessage = (error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : (_error$response2$data = _error$response2.data) === null || _error$response2$data === void 0 ? void 0 : (_error$response2$data2 = _error$response2$data.Errors) === null || _error$response2$data2 === void 0 ? void 0 : (_error$response2$data3 = _error$response2$data2[0]) === null || _error$response2$data3 === void 0 ? void 0 : _error$response2$data3.message) || (error === null || error === void 0 ? void 0 : error.message) || "An error occurred";
-              setShowToast({
-                key: "error",
-                action: errorMessage
-              });
-              setTimeout(closeToast, 5000);
-            },
-            onSuccess: vendorDataRes => {
-              var _vendorDataRes$Errors, _vendorDataRes$data, _vendorDataRes$data$E, _Digit$UserService$ge3, _Digit$UserService$ge4, _Digit$UserService$ge5;
-              const isError = (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : vendorDataRes.error) === true || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$Errors = vendorDataRes.Errors) === null || _vendorDataRes$Errors === void 0 ? void 0 : _vendorDataRes$Errors.length) > 0 || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$data = vendorDataRes.data) === null || _vendorDataRes$data === void 0 ? void 0 : (_vendorDataRes$data$E = _vendorDataRes$data.Errors) === null || _vendorDataRes$data$E === void 0 ? void 0 : _vendorDataRes$data$E.length) > 0;
-              if (isError) {
-                var _vendorDataRes$data2, _vendorDataRes$data2$, _vendorDataRes$data2$2, _vendorDataRes$Errors2, _vendorDataRes$Errors3;
-                const errorMessage = (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$data2 = vendorDataRes.data) === null || _vendorDataRes$data2 === void 0 ? void 0 : (_vendorDataRes$data2$ = _vendorDataRes$data2.Errors) === null || _vendorDataRes$data2$ === void 0 ? void 0 : (_vendorDataRes$data2$2 = _vendorDataRes$data2$[0]) === null || _vendorDataRes$data2$2 === void 0 ? void 0 : _vendorDataRes$data2$2.message) || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : (_vendorDataRes$Errors2 = vendorDataRes.Errors) === null || _vendorDataRes$Errors2 === void 0 ? void 0 : (_vendorDataRes$Errors3 = _vendorDataRes$Errors2[0]) === null || _vendorDataRes$Errors3 === void 0 ? void 0 : _vendorDataRes$Errors3.message) || (vendorDataRes === null || vendorDataRes === void 0 ? void 0 : vendorDataRes.message) || "An error occurred";
-                setShowToast({
-                  key: "error",
-                  action: errorMessage
-                });
-                setTimeout(closeToast, 5000);
-                return;
-              }
-              setShowToast({
-                key: "success",
-                action: "ADD_VEHICLE"
-              });
-              queryClient.invalidateQueries("DSO_SEARCH");
-              const userType = ((_Digit$UserService$ge3 = Digit.UserService.getUser()) === null || _Digit$UserService$ge3 === void 0 ? void 0 : (_Digit$UserService$ge4 = _Digit$UserService$ge3.info) === null || _Digit$UserService$ge4 === void 0 ? void 0 : (_Digit$UserService$ge5 = _Digit$UserService$ge4.type) === null || _Digit$UserService$ge5 === void 0 ? void 0 : _Digit$UserService$ge5.toLowerCase()) || "citizen";
-              setTimeout(() => {
-                closeToast();
-                history.push("/digit-ui/" + userType + "/vendor/search-vendor?selectedTabs=VEHICLE");
-              }, 3000);
-            }
-          });
-        } else {
-          var _Digit$UserService$ge6, _Digit$UserService$ge7, _Digit$UserService$ge8;
-          const userType = ((_Digit$UserService$ge6 = Digit.UserService.getUser()) === null || _Digit$UserService$ge6 === void 0 ? void 0 : (_Digit$UserService$ge7 = _Digit$UserService$ge6.info) === null || _Digit$UserService$ge7 === void 0 ? void 0 : (_Digit$UserService$ge8 = _Digit$UserService$ge7.type) === null || _Digit$UserService$ge8 === void 0 ? void 0 : _Digit$UserService$ge8.toLowerCase()) || "citizen";
-          queryClient.invalidateQueries("FSM_VEICLES_SEARCH");
-          setTimeout(() => {
-            closeToast();
-            history.push("/digit-ui/" + userType + "/vendor/search-vendor?selectedTabs=VEHICLE");
-          }, 3000);
-        }
+        setTimeout(() => {
+          closeToast();
+          history.push("/digit-ui/employee/fsm/registry");
+        }, 5000);
       }
     });
+    setShowModal(false);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
-    config: [{
-      route: "vendor-details",
-      timeLine: [{
-        actions: t("ES_FSM_REGISTRY_TITLE_NEW_VEHICLE"),
-        currentStep: 1
-      }]
-    }],
-    currentActiveIndex: 0,
-    showFinalStep: false
-  }), /*#__PURE__*/React.createElement("div", {
+  const renderModalContent = () => {
+    if (selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR") {
+      return /*#__PURE__*/React.createElement(ConfirmationBox, {
+        t: t,
+        title: "ES_FSM_REGISTRY_DELETE_TEXT"
+      });
+    }
+    if (selectedAction === "ADD_VENDOR") {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t("ES_FSM_REGISTRY_SELECT_VENODOR")), /*#__PURE__*/React.createElement(Dropdown, {
+        t: t,
+        option: vendors,
+        value: selectedOption,
+        selected: selectedOption,
+        select: setSelectedOption,
+        optionKey: "name"
+      }));
+    }
+    if (selectedAction === "EDIT_VENDOR") {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t("ES_FSM_REGISTRY_SELECT_VENODOR")), /*#__PURE__*/React.createElement(Dropdown, {
+        t: t,
+        option: vendors,
+        value: selectedOption,
+        selected: selectedOption,
+        select: setSelectedOption,
+        optionKey: "name"
+      }));
+    }
+  };
+  const modalHeading = () => {
+    switch (selectedAction) {
+      case "DELETE":
+      case "DELETE_VENDOR":
+        return "ES_FSM_REGISTRY_DELETE_POPUP_HEADER";
+      case "ADD_VENDOR":
+        return "ES_FSM_REGISTRY_ADD_VENDOR_POPUP_HEADER";
+      case "EDIT_VENDOR":
+        return "ES_FSM_REGISTRY_ADD_VENDOR_POPUP_HEADER";
+    }
+  };
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Loader, null);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-content"
+  }, /*#__PURE__*/React.createElement(Card, {
+    className: "vehicle-details-card",
     style: {
-      flex: "1",
-      overflowY: "auto"
+      position: "relative"
     }
-  }, /*#__PURE__*/React.createElement(FormComposer, {
-    isDisabled: !canSubmit,
-    label: t("ES_COMMON_APPLICATION_SUBMIT"),
-    config: Config.filter(i => !i.hideInEmployee).map(config => {
-      return _extends({}, config, {
-        isCollapsible: true,
-        isDefaultOpen: true,
-        body: config.body.filter(a => !a.hideInEmployee)
-      });
+  }, vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$6 = vehicleData[0]) === null || _vehicleData$6 === void 0 ? void 0 : (_vehicleData$6$employ = _vehicleData$6.employeeResponse) === null || _vehicleData$6$employ === void 0 ? void 0 : _vehicleData$6$employ.map((detail, index) => {
+    var _detail$values;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, index > 0 && /*#__PURE__*/React.createElement(CardSectionHeader, {
+      style: {
+        marginBottom: "16px",
+        marginTop: "32px"
+      }
+    }, t(detail.title)), /*#__PURE__*/React.createElement(Card, {
+      className: "card-with-background",
+      style: {
+        margin: "10px 16px",
+        padding: "20px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "additional-grid"
+    }, detail === null || detail === void 0 ? void 0 : (_detail$values = detail.values) === null || _detail$values === void 0 ? void 0 : _detail$values.map((value, index) => {
+      return (value === null || value === void 0 ? void 0 : value.type) === "custom" ? /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "additional-label"
+      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
+        className: "additional-value",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        }
+      }, value.value === "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("div", {
+        onClick: () => onActionSelect("ADD_VENDOR"),
+        style: {
+          color: "#a82227",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(AddIcon, {
+        className: "",
+        fill: "#a82227"
+      }), " ", t(value.value) || "N/A"), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, value.value), /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
+        onClick: () => onActionSelect("EDIT_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(EditIcon, {
+        fill: "#a82227"
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "add-details-link hover-button",
+        onClick: () => onActionSelect("DELETE_VENDOR"),
+        style: {
+          cursor: "pointer"
+        }
+      }, /*#__PURE__*/React.createElement(DeleteIcon, {
+        className: "delete",
+        fill: "#a82227"
+      }))))) : /*#__PURE__*/React.createElement(React.Fragment, {
+        key: index
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "additional-label"
+      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
+        className: "additional-value",
+        style: value.value === "ACTIVE" ? {
+          color: "green"
+        } : {}
+      }, t(value.value) || "N/A"));
+    }))));
+  })), showModal && /*#__PURE__*/React.createElement(Modal, {
+    headerBarMain: /*#__PURE__*/React.createElement(Heading$3, {
+      label: t(modalHeading())
     }),
-    fieldStyle: {
-      marginRight: 0
-    },
-    onSubmit: onSubmit,
-    defaultValues: defaultValues,
-    onFormValueChange: onFormValueChange,
-    noBreakLine: true,
-    mode: "onChange",
-    noCard: true
-  }), showToast && /*#__PURE__*/React.createElement(Toast, {
+    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$2, {
+      onClick: closeModal
+    }),
+    actionCancelLabel: t("CS_COMMON_CANCEL"),
+    actionCancelOnSubmit: closeModal,
+    actionSaveLabel: t(selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR" ? "ES_EVENT_DELETE" : "CS_COMMON_SUBMIT"),
+    actionSaveOnSubmit: handleModalAction
+  }, selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR" ? renderModalContent() : /*#__PURE__*/React.createElement(Card, {
+    style: {
+      boxShadow: "none"
+    }
+  }, renderModalContent())), showToast && /*#__PURE__*/React.createElement(Toast, {
     error: showToast.key === "error" ? true : false,
     label: t(showToast.key === "success" ? "ES_FSM_REGISTRY_" + showToast.action + "_SUCCESS" : showToast.action),
     onClose: closeToast
-  })));
+  }), /*#__PURE__*/React.createElement(ActionBar, {
+    style: {
+      zIndex: "19"
+    }
+  }, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
+    localeKeyPrefix: "ES_FSM_REGISTRY_ACTION",
+    options: ["EDIT", "DELETE"],
+    t: t,
+    onSelect: onActionSelect
+  }) : null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("ES_COMMON_TAKE_ACTION"),
+    onSubmit: () => setDisplayMenu(!displayMenu)
+  }))) : /*#__PURE__*/React.createElement(Loader, null));
 };
 
-const Heading$4 = props => {
-  return /*#__PURE__*/React.createElement("h1", {
-    className: "heading-m"
-  }, props.label);
-};
-const CloseBtn$3 = props => {
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: props.onClick
-  }, /*#__PURE__*/React.createElement(CloseSvg, null));
-};
-const VehicleDetails = props => {
-  var _vehicleData$6, _vehicleData$6$employ;
+const SelectEkycZones = _ref => {
+  let config = _ref.config,
+    onSelect = _ref.onSelect,
+    t = _ref.t,
+    formData = _ref.formData,
+    _ref$isMultiSelect = _ref.isMultiSelect,
+    isMultiSelect = _ref$isMultiSelect === void 0 ? true : _ref$isMultiSelect;
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  const history = useHistory();
-  const queryClient = useQueryClient();
-  let _useParams = useParams(),
-    vehicleNumber = _useParams.id;
-  const _useState = useState(false),
-    displayMenu = _useState[0],
-    setDisplayMenu = _useState[1];
-  const _useState2 = useState(null),
-    selectedAction = _useState2[0],
-    setSelectedAction = _useState2[1];
-  const _useState3 = useState(false),
-    showModal = _useState3[0],
-    setShowModal = _useState3[1];
-  const _useState4 = useState(null),
-    showToast = _useState4[0],
-    setShowToast = _useState4[1];
-  const _useState5 = useState([]),
-    vendors = _useState5[0],
-    setVendors = _useState5[1];
-  const _useState6 = useState({}),
-    selectedOption = _useState6[0],
-    setSelectedOption = _useState6[1];
-  const _useState7 = useState(null),
-    vehicleId = _useState7[0],
-    setVehicleId = _useState7[1];
-  const _Digit$Hooks$fsm$useV = Digit.Hooks.fsm.useVehicleDetails(tenantId, {
-      registrationNumber: vehicleNumber
-    }, {
-      staleTime: Infinity
-    }),
-    vehicleData = _Digit$Hooks$fsm$useV.data,
-    isLoading = _Digit$Hooks$fsm$useV.isLoading,
-    refetch = _Digit$Hooks$fsm$useV.refetch;
+  const _useState = useState([]),
+    zones = _useState[0],
+    setZones = _useState[1];
+  const _useState2 = useState([]),
+    selectedZones = _useState2[0],
+    setSelectedZones = _useState2[1];
+  const initialized = useRef(false);
+  const _Digit$Hooks$useCommo = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]),
+    boundaryData = _Digit$Hooks$useCommo.data,
+    isLoading = _Digit$Hooks$useCommo.isLoading;
   useEffect(() => {
-    if (!isLoading && vehicleData) {
-      var _vehicleData$, _vehicleData$$vehicle;
-      setVehicleId(vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$ = vehicleData[0]) === null || _vehicleData$ === void 0 ? void 0 : (_vehicleData$$vehicle = _vehicleData$.vehicleData) === null || _vehicleData$$vehicle === void 0 ? void 0 : _vehicleData$$vehicle.id);
+    var _boundaryData$egovLo, _boundaryData$egovLo$, _boundaryData$MdmsRes, _boundaryData$MdmsRes2, _boundaryData$MdmsRes3;
+    const tenantBoundary = (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$egovLo = boundaryData["egov-location"]) === null || _boundaryData$egovLo === void 0 ? void 0 : (_boundaryData$egovLo$ = _boundaryData$egovLo.TenantBoundary) === null || _boundaryData$egovLo$ === void 0 ? void 0 : _boundaryData$egovLo$[0]) || (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$MdmsRes = boundaryData.MdmsRes) === null || _boundaryData$MdmsRes === void 0 ? void 0 : (_boundaryData$MdmsRes2 = _boundaryData$MdmsRes["egov-location"]) === null || _boundaryData$MdmsRes2 === void 0 ? void 0 : (_boundaryData$MdmsRes3 = _boundaryData$MdmsRes2.TenantBoundary) === null || _boundaryData$MdmsRes3 === void 0 ? void 0 : _boundaryData$MdmsRes3[0]);
+    const boundaries = (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.boundary) || (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.children) || [];
+    if (Array.isArray(boundaries === null || boundaries === void 0 ? void 0 : boundaries.children)) {
+      const allZones = boundaries.children.flatMap(assembly => (assembly.children || []).map(zone => ({
+        code: zone.code,
+        name: zone.name
+      })));
+      const zonesList = [...new Map(allZones.map(z => [z.code, z])).values()];
+      setZones(zonesList);
     }
-  }, [vehicleData, isLoading]);
-  const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
-      sortBy: "name",
-      sortOrder: "ASC",
-      status: "ACTIVE"
-    }, {}),
-    vendorData = _Digit$Hooks$fsm$useD.data;
+  }, [boundaryData]);
   useEffect(() => {
-    if (vendorData) {
-      let vendors = vendorData.map(data => data.dsoDetails);
-      setVendors(vendors);
+    if (!zones.length || !Array.isArray(formData === null || formData === void 0 ? void 0 : formData.zoneIds)) return;
+    if (formData.zoneIds.length && typeof formData.zoneIds[0] === "object") {
+      setSelectedZones(formData.zoneIds);
+      return;
     }
-  }, [vendorData]);
-  const _Digit$Hooks$fsm$useU = Digit.Hooks.fsm.useUpdateVehicle(tenantId),
-    mutate = _Digit$Hooks$fsm$useU.mutate;
-  const _Digit$Hooks$fsm$useV2 = Digit.Hooks.fsm.useVendorUpdate(tenantId),
-    mutateVendor = _Digit$Hooks$fsm$useV2.mutate;
-  function onActionSelect(action) {
-    setDisplayMenu(false);
-    setSelectedAction(action);
-  }
-  useEffect(() => {
-    refetch();
-  }, []);
-  useEffect(() => {
-    switch (selectedAction) {
-      case "DELETE":
-      case "ADD_VENDOR":
-      case "EDIT_VENDOR":
-      case "DELETE_VENDOR":
-        return setShowModal(true);
-      case "EDIT":
-        return history.push("/digit-ui/employee/fsm/registry/modify-vehicle/" + vehicleNumber);
-      case "HOME":
-        return history.push("/digit-ui/employee/fsm/registry?selectedTabs=VEHICLE");
+    const selected = zones.filter(zone => formData.zoneIds.includes(zone.name));
+    setSelectedZones(selected);
+    if (!initialized.current) {
+      initialized.current = true;
+      onSelect(config.key, selected);
+    }
+  }, [zones, formData === null || formData === void 0 ? void 0 : formData.zoneIds, config.key, onSelect]);
+  const handleSelect = value => {
+    if (isMultiSelect) {
+      const selected = Array.isArray(value) ? value.map(v => Array.isArray(v) ? v[1] : v).filter(Boolean) : [];
+      setSelectedZones(selected);
+      onSelect(config.key, selected);
+    } else {
+      const selectedZone = Array.isArray(value) ? Array.isArray(value[0]) ? value[0][1] : value[0] : value;
+      setSelectedZones(selectedZone ? [selectedZone] : []);
+      onSelect(config.key, (selectedZone === null || selectedZone === void 0 ? void 0 : selectedZone.code) || "");
     }
-  }, [selectedAction]);
-  const closeToast = () => {
-    setShowToast(null);
-  };
-  const closeModal = () => {
-    setSelectedAction(null);
-    setSelectedOption({});
-    setShowModal(false);
-  };
-  const handleAddVendor = () => {
-    var _vehicleData$2, _dsoDetails$owner;
-    let dsoDetails = selectedOption;
-    let vehicleDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$2 = vehicleData[0]) === null || _vehicleData$2 === void 0 ? void 0 : _vehicleData$2.vehicleData;
-    vehicleDetails.vendorVehicleStatus = "ACTIVE";
-    const formData = {
-      vendor: _extends({}, dsoDetails, {
-        owner: _extends({}, dsoDetails.owner, {
-          gender: ((_dsoDetails$owner = dsoDetails.owner) === null || _dsoDetails$owner === void 0 ? void 0 : _dsoDetails$owner.gender) || "OTHERS"
-        }),
-        vehicles: dsoDetails.vehicles ? [...dsoDetails.vehicles, vehicleDetails] : [vehicleDetails]
-      })
-    };
-    mutateVendor(formData, {
-      onError: (error, variables) => {
-        setShowToast({
-          key: "error",
-          action: error
-        });
-        setTimeout(closeToast, 5000);
-      },
-      onSuccess: (data, variables) => {
-        setShowToast({
-          key: "success",
-          action: "EDIT_VENDOR"
-        });
-        refetch();
-        queryClient.invalidateQueries("DSO_SEARCH");
-        setTimeout(closeToast, 5000);
-      }
-    });
-    setShowModal(false);
-    setSelectedAction(null);
   };
-  const handleEditVendor = () => {
-    var _vehicleData$3, _dsoDetails$owner2;
-    let dsoDetails = selectedOption;
-    let vehicleDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$3 = vehicleData[0]) === null || _vehicleData$3 === void 0 ? void 0 : _vehicleData$3.vehicleData;
-    vehicleDetails.vendorVehicleStatus = "ACTIVE";
-    const formData = {
-      vendor: _extends({}, dsoDetails, {
-        owner: _extends({}, dsoDetails.owner, {
-          gender: ((_dsoDetails$owner2 = dsoDetails.owner) === null || _dsoDetails$owner2 === void 0 ? void 0 : _dsoDetails$owner2.gender) || "OTHERS"
-        }),
-        vehicles: dsoDetails.vehicles ? [...dsoDetails.vehicles, vehicleDetails] : [vehicleDetails]
-      })
-    };
-    mutateVendor(formData, {
-      onError: (error, variables) => {
-        setShowToast({
-          key: "error",
-          action: error
-        });
-        setTimeout(closeToast, 5000);
-      },
-      onSuccess: (data, variables) => {
-        setShowToast({
-          key: "success",
-          action: "EDIT_VENDOR"
+  if (isLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label), config.isMandatory ? " *" : ""), /*#__PURE__*/React.createElement("div", {
+    className: "field",
+    style: {
+      position: "relative",
+      zIndex: 10
+    }
+  }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
+    options: zones,
+    selected: selectedZones,
+    onSelect: handleSelect,
+    optionsKey: "name",
+    t: t,
+    multiple: isMultiSelect,
+    isMultiSelect: isMultiSelect,
+    showSelectedLabels: !isMultiSelect,
+    ServerStyle: {
+      backgroundColor: "#fff"
+    },
+    defaultLabel: isMultiSelect ? selectedZones.length + " Selected" : ""
+  })), isMultiSelect && selectedZones.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "selected-zones"
+  }, selectedZones.map(zone => /*#__PURE__*/React.createElement("span", {
+    key: zone.code,
+    className: "selected-zone-chip"
+  }, zone.name))));
+};
+
+const SelectEkycClusters = _ref => {
+  let config = _ref.config,
+    onSelect = _ref.onSelect,
+    t = _ref.t,
+    formData = _ref.formData;
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const _useState = useState([]),
+    clusters = _useState[0],
+    setClusters = _useState[1];
+  const _useState2 = useState(Array.isArray(formData === null || formData === void 0 ? void 0 : formData.clusterIds) ? formData.clusterIds : []),
+    selectedClusters = _useState2[0],
+    setSelectedClusters = _useState2[1];
+  const selectedZones = React.useMemo(() => Array.isArray(formData === null || formData === void 0 ? void 0 : formData.zoneIds) ? formData.zoneIds : [], [formData === null || formData === void 0 ? void 0 : formData.zoneIds]);
+  const _Digit$Hooks$useCommo = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]),
+    boundaryData = _Digit$Hooks$useCommo.data;
+  useEffect(() => {
+    var _boundaryData$egovLo, _boundaryData$egovLo$, _boundaryData$MdmsRes, _boundaryData$MdmsRes2, _boundaryData$MdmsRes3;
+    const tenantBoundary = (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$egovLo = boundaryData["egov-location"]) === null || _boundaryData$egovLo === void 0 ? void 0 : (_boundaryData$egovLo$ = _boundaryData$egovLo.TenantBoundary) === null || _boundaryData$egovLo$ === void 0 ? void 0 : _boundaryData$egovLo$[0]) || (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$MdmsRes = boundaryData.MdmsRes) === null || _boundaryData$MdmsRes === void 0 ? void 0 : (_boundaryData$MdmsRes2 = _boundaryData$MdmsRes["egov-location"]) === null || _boundaryData$MdmsRes2 === void 0 ? void 0 : (_boundaryData$MdmsRes3 = _boundaryData$MdmsRes2.TenantBoundary) === null || _boundaryData$MdmsRes3 === void 0 ? void 0 : _boundaryData$MdmsRes3[0]);
+    const boundaries = (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.boundary) || (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.children) || [];
+    let allClusters = [];
+    if (selectedZones.length > 0 && Array.isArray(boundaries) && boundaries.length > 0) {
+      selectedZones.forEach(zone => {
+        const zoneBoundary = boundaries.find(b => b.code === ((zone === null || zone === void 0 ? void 0 : zone.code) || zone));
+        const children = (zoneBoundary === null || zoneBoundary === void 0 ? void 0 : zoneBoundary.children) || (zoneBoundary === null || zoneBoundary === void 0 ? void 0 : zoneBoundary.boundary) || [];
+        if (Array.isArray(children)) {
+          children.forEach(child => {
+            allClusters.push({
+              code: child.code,
+              name: child.name
+            });
+          });
+        }
+      });
+    }
+    if (allClusters.length === 0) {
+      const staticClusters = {
+        "ZONE-01": [{
+          code: "CLUSTER-01",
+          name: "CLUSTER-01"
+        }],
+        "ZONE-02": [{
+          code: "CLUSTER-02",
+          name: "CLUSTER-02"
+        }],
+        "ZONE-03": [{
+          code: "CLUSTER-03",
+          name: "CLUSTER-03"
+        }],
+        "ZONE-04": [{
+          code: "CLUSTER-04",
+          name: "CLUSTER-04"
+        }],
+        "ZONE-05": [{
+          code: "CLUSTER-05",
+          name: "CLUSTER-05"
+        }]
+      };
+      if (selectedZones.length > 0) {
+        selectedZones.forEach(z => {
+          const zCode = (z === null || z === void 0 ? void 0 : z.code) || z;
+          const zName = (z === null || z === void 0 ? void 0 : z.name) || z;
+          if (staticClusters[zCode]) {
+            allClusters = [...allClusters, ...staticClusters[zCode]];
+          } else {
+            allClusters.push({
+              code: zCode + "-C1",
+              name: zName + " Cluster 1"
+            });
+          }
         });
-        refetch();
-        queryClient.invalidateQueries("DSO_SEARCH");
-        setTimeout(closeToast, 5000);
+      } else {
+        allClusters = [{
+          code: "CLUSTER-01",
+          name: "CLUSTER-01"
+        }, {
+          code: "CLUSTER-02",
+          name: "CLUSTER-02"
+        }, {
+          code: "CLUSTER-03",
+          name: "CLUSTER-03"
+        }];
       }
-    });
-    setShowModal(false);
-    setSelectedAction(null);
+    }
+    if (allClusters.length > 0) {
+      allClusters = Array.from(new Map(allClusters.map(item => [item.code, item])).values());
+    }
+    setClusters(allClusters);
+  }, [selectedZones, boundaryData]);
+  const handleSelect = value => {
+    const extractedValue = Array.isArray(value) ? value.map(v => Array.isArray(v) ? v[1] : v).filter(Boolean) : value;
+    setSelectedClusters(extractedValue);
+    onSelect(config.key, extractedValue);
   };
-  const handleDeleteVendor = () => {
-    var _vehicleData$4, _vehicleData$4$vendor, _vehicleData$4$vendor2, _dsoDetails$owner3;
-    let formData = {};
-    let dsoDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$4 = vehicleData[0]) === null || _vehicleData$4 === void 0 ? void 0 : (_vehicleData$4$vendor = _vehicleData$4.vendorDetails) === null || _vehicleData$4$vendor === void 0 ? void 0 : (_vehicleData$4$vendor2 = _vehicleData$4$vendor.vendor) === null || _vehicleData$4$vendor2 === void 0 ? void 0 : _vehicleData$4$vendor2[0];
-    let getVehicleVendorDetails = dsoDetails === null || dsoDetails === void 0 ? void 0 : dsoDetails.vehicles;
-    getVehicleVendorDetails = getVehicleVendorDetails.map(data => {
-      if (data.id === vehicleId) {
-        data.vendorVehicleStatus = "INACTIVE";
+  const isDisabled = selectedZones.length === 0;
+  return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label) + (config.isMandatory ? " *" : "")), /*#__PURE__*/React.createElement("div", {
+    className: "field",
+    style: {
+      position: "relative",
+      zIndex: 9
+    }
+  }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
+    options: clusters,
+    selected: selectedClusters,
+    onSelect: handleSelect,
+    optionsKey: "name",
+    t: t,
+    ServerStyle: {
+      backgroundColor: "#fff"
+    },
+    disable: isDisabled
+  })));
+};
+
+const SelectEkycDropdown = _ref => {
+  var _config$populators, _config$populators2;
+  let config = _ref.config,
+    onSelect = _ref.onSelect,
+    t = _ref.t,
+    formData = _ref.formData;
+  const options = (config === null || config === void 0 ? void 0 : (_config$populators = config.populators) === null || _config$populators === void 0 ? void 0 : _config$populators.options) || [];
+  const optionsKey = (config === null || config === void 0 ? void 0 : (_config$populators2 = config.populators) === null || _config$populators2 === void 0 ? void 0 : _config$populators2.optionsKey) || "name";
+  const selected = formData === null || formData === void 0 ? void 0 : formData[config.key];
+  const handleSelect = value => {
+    onSelect(config.key, value);
+  };
+  return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label)), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    selected: selected,
+    option: options,
+    select: handleSelect,
+    optionKey: optionsKey,
+    t: t
+  })));
+};
+
+const AdditionalDetails = _ref => {
+  var _formData$ownerKey, _formData$ownerKey2, _formData$ownerKey3, _formData$ownerKey4;
+  let t = _ref.t,
+    config = _ref.config,
+    onSelect = _ref.onSelect,
+    userType = _ref.userType,
+    formData = _ref.formData;
+  let index = 0;
+  const user = Digit.UserService.getUser().info;
+  const applicantName = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].applicantName || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey = formData.ownerKey) === null || _formData$ownerKey === void 0 ? void 0 : _formData$ownerKey.applicantName) || "";
+  const emailId = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].emailId || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey2 = formData.ownerKey) === null || _formData$ownerKey2 === void 0 ? void 0 : _formData$ownerKey2.emailId) || "";
+  const mobileNumber = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].mobileNumber || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey3 = formData.ownerKey) === null || _formData$ownerKey3 === void 0 ? void 0 : _formData$ownerKey3.mobileNumber) || (user === null || user === void 0 ? void 0 : user.mobileNumber);
+  const altMobileNumber = formData.ownerKey && formData.ownerKey[index] && formData.ownerKey[index].altMobileNumber || (formData === null || formData === void 0 ? void 0 : (_formData$ownerKey4 = formData.ownerKey) === null || _formData$ownerKey4 === void 0 ? void 0 : _formData$ownerKey4.altmobileNumber) || "";
+  const _useState = useState(""),
+    VendorCategory = _useState[0],
+    setVendorCategory = _useState[1];
+  const _useState2 = useState(""),
+    VendorId = _useState2[0],
+    setVendorId = _useState2[1];
+  const _useState3 = useState(""),
+    userName = _useState3[0],
+    setUserName = _useState3[1];
+  const _useState4 = useState(""),
+    Bank = _useState4[0],
+    setBank = _useState4[1];
+  const _useState5 = useState(),
+    BankbranchName = _useState5[0],
+    setBankbranchName = _useState5[1];
+  const _useState6 = useState(""),
+    IFSC = _useState6[0],
+    setIFSC = _useState6[1];
+  const _useState7 = useState(""),
+    AccountNo = _useState7[0],
+    setAccountNo = _useState7[1];
+  const _useState8 = useState(""),
+    PanNo = _useState8[0],
+    setPanNo = _useState8[1];
+  const _useState9 = useState(""),
+    GstNo = _useState9[0],
+    setGstNo = _useState9[1];
+  const _useState0 = useState(""),
+    GstState = _useState0[0],
+    setGstState = _useState0[1];
+  const _useState1 = useState(""),
+    RegistrationNo = _useState1[0],
+    setRegistrationNo = _useState1[1];
+  const _useState10 = useState(""),
+    EpfNo = _useState10[0],
+    setEpfNo = _useState10[1];
+  const _useState11 = useState(""),
+    EsiNo = _useState11[0],
+    setEsiNo = _useState11[1];
+  const _useState12 = useState(""),
+    VendorType = _useState12[0],
+    setVendorType = _useState12[1];
+  const _useState13 = useState(""),
+    Status = _useState13[0],
+    setStatus = _useState13[1];
+  const _useState14 = useState(""),
+    micrNo = _useState14[0],
+    setmicrNo = _useState14[1];
+  const _useState15 = useState(""),
+    PhoneNo = _useState15[0],
+    setPhoneNo = _useState15[1];
+  const _useState16 = useState(""),
+    ContactPerson = _useState16[0],
+    setContactPerson = _useState16[1];
+  useEffect(() => {
+    if (IFSC.length === 11 && !Bank && !BankbranchName && !micrNo) {
+      fetch("https://ifsc.razorpay.com/" + IFSC).then(response => response.json()).then(data => {
+        if (data && data.BANK && data.BRANCH && data.MICR) {
+          setBank(data.BANK);
+          setBankbranchName(data.BRANCH);
+          setmicrNo(data.MICR);
+        }
+      }).catch(() => {});
+    } else {
+      if (IFSC.length === 11 && Bank && BankbranchName) {
+        setBank(Bank);
+        setBankbranchName(BankbranchName);
+        setmicrNo(micrNo);
+      } else {
+        setBank("");
+        setBankbranchName("");
+        setmicrNo("");
       }
-      return data;
-    });
-    formData = {
-      vendor: _extends({}, dsoDetails, {
-        owner: _extends({}, dsoDetails.owner, {
-          gender: ((_dsoDetails$owner3 = dsoDetails.owner) === null || _dsoDetails$owner3 === void 0 ? void 0 : _dsoDetails$owner3.gender) || "OTHERS"
-        }),
-        vehicles: getVehicleVendorDetails
-      })
-    };
-    mutateVendor(formData, {
-      onError: (error, variables) => {
-        setShowToast({
-          key: "error",
-          action: error
-        });
-        setTimeout(closeToast, 5000);
-      },
-      onSuccess: (data, variables) => {
-        setShowToast({
-          key: "success",
-          action: "DELETE_VENDOR"
-        });
-        queryClient.invalidateQueries("FSM_VENDOR_SEARCH");
-        refetch();
-        setTimeout(closeToast, 5000);
+    }
+  }, [IFSC]);
+  function setvendorbank(e) {
+    setBank(e.target.value);
+  }
+  function setBankbranch(e) {
+    setBankbranchName(e.target.value);
+  }
+  function setvendorifsc(e) {
+    const input = e.target.value.replace(/[^a-zA-Z0-9]/g, "");
+    if (input.length <= 11) {
+      setIFSC(input);
+    }
+  }
+  function setvendoraccountno(e) {
+    setAccountNo(e.target.value);
+  }
+  function setpanno(e) {
+    setPanNo(e.target.value);
+  }
+  function setgstno(e) {
+    setGstNo(e.target.value);
+  }
+  function setgststate(e) {
+    setGstState(e.target.value);
+  }
+  function setregistrationno(e) {
+    setRegistrationNo(e.target.value);
+  }
+  function setepfno(e) {
+    setEpfNo(e.target.value);
+  }
+  function setesino(e) {
+    setEsiNo(e.target.value);
+  }
+  function setcontactperson(e) {
+    setContactPerson(e.target.value);
+  }
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const _useForm = useForm(),
+    control = _useForm.control;
+  const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
+      staleTime: Infinity
+    }),
+    dsoData = _Digit$Hooks$fsm$useD.data;
+  useEffect(() => {
+    if (dsoData) {
+      const vendor = dsoData.find(item => item.id);
+      if (vendor) {
+        setUserName(vendor.name);
+        setVendorId(vendor.id);
       }
-    });
-    setShowModal(false);
-  };
-  const handleModalAction = () => {
-    switch (selectedAction) {
-      case "DELETE":
-        return handleDelete();
-      case "DELETE_VENDOR":
-        return handleDeleteVendor();
-      case "ADD_VENDOR":
-        return handleAddVendor();
-      case "EDIT_VENDOR":
-        return handleEditVendor();
     }
-  };
-  const handleDelete = () => {
-    var _vehicleData$5;
-    let vehicleDetails = vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$5 = vehicleData[0]) === null || _vehicleData$5 === void 0 ? void 0 : _vehicleData$5.vehicleData;
-    const formData = {
-      vehicle: _extends({}, vehicleDetails, {
-        status: "INACTIVE"
-      })
-    };
-    mutate(formData, {
-      onError: (error, variables) => {
-        setShowToast({
-          key: "error",
-          action: error
-        });
-        setTimeout(closeToast, 5000);
-      },
-      onSuccess: (data, variables) => {
-        setShowToast({
-          key: "success",
-          action: "DELETE_VEHICLE"
-        });
-        queryClient.invalidateQueries("FSM_VEICLES_SEARCH");
-        setTimeout(() => {
-          closeToast();
-          history.push("/digit-ui/employee/fsm/registry");
-        }, 5000);
-      }
-    });
-    setShowModal(false);
-  };
-  const renderModalContent = () => {
-    if (selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR") {
-      return /*#__PURE__*/React.createElement(ConfirmationBox, {
-        t: t,
-        title: "ES_FSM_REGISTRY_DELETE_TEXT"
+  }, [dsoData]);
+  const goNext = () => {
+    let owner = formData.ownerKey && formData.ownerKey[index];
+    let ownerStep;
+    if (userType === "citizen") {
+      ownerStep = _extends({}, owner, {
+        applicantName,
+        mobileNumber,
+        altMobileNumber,
+        emailId
+      });
+      onSelect(config.key, _extends({}, formData[config.key], ownerStep), false, index);
+    } else {
+      ownerStep = _extends({}, owner, {
+        VendorCategory,
+        name: userName,
+        VendorId: VendorId,
+        Bank,
+        BankbranchName,
+        IFSC,
+        AccountNo,
+        PanNo,
+        GstNo,
+        GstState,
+        RegistrationNo,
+        EpfNo,
+        EsiNo,
+        VendorType,
+        Status,
+        micrNo,
+        PhoneNo,
+        ContactPerson
       });
+      onSelect(config.key, ownerStep, false, index);
     }
-    if (selectedAction === "ADD_VENDOR") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t("ES_FSM_REGISTRY_SELECT_VENODOR")), /*#__PURE__*/React.createElement(Dropdown, {
-        t: t,
-        option: vendors,
-        value: selectedOption,
-        selected: selectedOption,
-        select: setSelectedOption,
-        optionKey: "name"
-      }));
+  };
+  useEffect(() => {
+    if (userType === "citizen") {
+      goNext();
     }
-    if (selectedAction === "EDIT_VENDOR") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t("ES_FSM_REGISTRY_SELECT_VENODOR")), /*#__PURE__*/React.createElement(Dropdown, {
-        t: t,
-        option: vendors,
-        value: selectedOption,
-        selected: selectedOption,
-        select: setSelectedOption,
-        optionKey: "name"
-      }));
+  }, [VendorCategory, VendorId, userName, Bank, BankbranchName, IFSC, AccountNo, PanNo, GstNo, GstState, RegistrationNo, EpfNo, EsiNo, VendorType, Status, micrNo, PhoneNo, ContactPerson, userType]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      timeLine: [{
+        actions: t("VENDOR_ADDITIONAL_DETAILS"),
+        currentStep: 1
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_DOCUMENT_DETAILS"),
+        currentStep: 2
+      }]
+    }, {
+      timeLine: [{
+        actions: t("VENDOR_SUMMARY"),
+        currentStep: 3
+      }]
+    }],
+    currentActiveIndex: 0,
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "1",
+      overflowY: "auto"
     }
-  };
-  const modalHeading = () => {
-    switch (selectedAction) {
-      case "DELETE":
-      case "DELETE_VENDOR":
-        return "ES_FSM_REGISTRY_DELETE_POPUP_HEADER";
-      case "ADD_VENDOR":
-        return "ES_FSM_REGISTRY_ADD_VENDOR_POPUP_HEADER";
-      case "EDIT_VENDOR":
-        return "ES_FSM_REGISTRY_ADD_VENDOR_POPUP_HEADER";
+  }, /*#__PURE__*/React.createElement(FormStep, {
+    config: config,
+    onSelect: goNext,
+    t: t,
+    className: "formcomposer-grid-container-form"
+  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    className: "card-label-smaller"
+  }, /*#__PURE__*/React.createElement(CustomTooltip, {
+    label: "" + t("IFSC_CODE"),
+    isMandatory: false,
+    message: t("INVALID_IFSC_CODE_ERROR_MESSAGE")
+  })), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "IFSC",
+    value: IFSC,
+    placeholder: "Enter IFSC Code",
+    onChange: setvendorifsc,
+    style: {
+      width: "100%"
+    },
+    maxLength: 11,
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "^[A-Z]{4}0[A-Z0-9]{6}$",
+      type: "text",
+      title: t("INVALID_IFSC_CODE_ERROR_MESSAGE")
+    }
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("VENDOR_BANK_NAME"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "check-page-link-button"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "bankName",
+    placeholder: "Bank Name Auto Select",
+    style: {
+      width: "100%"
+    },
+    value: Bank,
+    onChange: setvendorbank,
+    disabled: true
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("VENDOR_BANK_BRANCH_NAME"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "check-page-link-button"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "BankbranchName",
+    value: BankbranchName,
+    style: {
+      width: "100%"
+    },
+    placeholder: "Bank Branch Name Auto Select",
+    onChange: setBankbranch,
+    disabled: false
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("VENDOR_MICR_NO"), " ", /*#__PURE__*/React.createElement("span", {
+    className: "check-page-link-button"
+  }, "*")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "MicrNo",
+    value: micrNo,
+    style: {
+      width: "100%"
+    },
+    placeholder: "MICR No",
+    onChange: setmicrNo,
+    disabled: false
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("ACCOUNT_NO")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "AccountNo",
+    value: AccountNo,
+    onChange: setvendoraccountno,
+    style: {
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "[0-9]{9,18}",
+      type: "text",
+      title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
+    }
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("PHONE_NO")), /*#__PURE__*/React.createElement(MobileNumber, {
+    value: PhoneNo,
+    name: "PhoneNo",
+    onChange: setPhoneNo,
+    style: {
+      width: "100%"
+    }
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("CONTACT_PERSON")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "ContactPerson",
+    value: ContactPerson,
+    onChange: setcontactperson,
+    style: {
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "^[a-zA-Z0-9/-]{1,20}$",
+      type: "text",
+      title: t("INVALID_ACCOUNT_NO_ERROR_MESSAGE")
     }
-  };
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loader, null);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isLoading ? /*#__PURE__*/React.createElement("div", {
-    className: "employee-form-content"
-  }, /*#__PURE__*/React.createElement(Card, {
-    className: "vehicle-details-card",
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("PAN_NO")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "PanNo",
+    value: PanNo,
+    onChange: setpanno,
     style: {
-      position: "relative"
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "[A-Z]{5}[0-9]{4}[A-Z]{1}",
+      type: "text",
+      title: t("INVALID_PAN_NO_ERROR_MESSAGE")
     }
-  }, vehicleData === null || vehicleData === void 0 ? void 0 : (_vehicleData$6 = vehicleData[0]) === null || _vehicleData$6 === void 0 ? void 0 : (_vehicleData$6$employ = _vehicleData$6.employeeResponse) === null || _vehicleData$6$employ === void 0 ? void 0 : _vehicleData$6$employ.map((detail, index) => {
-    var _detail$values;
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: index
-    }, index > 0 && /*#__PURE__*/React.createElement(CardSectionHeader, {
-      style: {
-        marginBottom: "16px",
-        marginTop: "32px"
-      }
-    }, t(detail.title)), /*#__PURE__*/React.createElement(Card, {
-      className: "card-with-background",
-      style: {
-        margin: "10px 16px",
-        padding: "20px"
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "additional-grid"
-    }, detail === null || detail === void 0 ? void 0 : (_detail$values = detail.values) === null || _detail$values === void 0 ? void 0 : _detail$values.map((value, index) => {
-      return (value === null || value === void 0 ? void 0 : value.type) === "custom" ? /*#__PURE__*/React.createElement(React.Fragment, {
-        key: index
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "additional-label"
-      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
-        className: "additional-value",
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "8px"
-        }
-      }, value.value === "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement("div", {
-        onClick: () => onActionSelect("ADD_VENDOR"),
-        style: {
-          color: "#a82227",
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          cursor: "pointer"
-        }
-      }, /*#__PURE__*/React.createElement(AddIcon, {
-        className: "",
-        fill: "#a82227"
-      }), " ", t(value.value) || "N/A"), value.value !== "ES_FSM_REGISTRY_DETAILS_ADD_VENDOR" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, value.value), /*#__PURE__*/React.createElement("div", {
-        className: "add-details-link hover-button",
-        onClick: () => onActionSelect("EDIT_VENDOR"),
-        style: {
-          cursor: "pointer"
-        }
-      }, /*#__PURE__*/React.createElement(EditIcon, {
-        fill: "#a82227"
-      })), /*#__PURE__*/React.createElement("div", {
-        className: "add-details-link hover-button",
-        onClick: () => onActionSelect("DELETE_VENDOR"),
-        style: {
-          cursor: "pointer"
-        }
-      }, /*#__PURE__*/React.createElement(DeleteIcon, {
-        className: "delete",
-        fill: "#a82227"
-      }))))) : /*#__PURE__*/React.createElement(React.Fragment, {
-        key: index
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "additional-label"
-      }, t(value.title)), /*#__PURE__*/React.createElement("div", {
-        className: "additional-value",
-        style: value.value === "ACTIVE" ? {
-          color: "green"
-        } : {}
-      }, t(value.value) || "N/A"));
-    }))));
-  })), showModal && /*#__PURE__*/React.createElement(Modal, {
-    headerBarMain: /*#__PURE__*/React.createElement(Heading$4, {
-      label: t(modalHeading())
-    }),
-    headerBarEnd: /*#__PURE__*/React.createElement(CloseBtn$3, {
-      onClick: closeModal
-    }),
-    actionCancelLabel: t("CS_COMMON_CANCEL"),
-    actionCancelOnSubmit: closeModal,
-    actionSaveLabel: t(selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR" ? "ES_EVENT_DELETE" : "CS_COMMON_SUBMIT"),
-    actionSaveOnSubmit: handleModalAction
-  }, selectedAction === "DELETE" || selectedAction === "DELETE_VENDOR" ? renderModalContent() : /*#__PURE__*/React.createElement(Card, {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("GST_NO")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "GstNo",
+    value: GstNo,
+    onChange: setgstno,
     style: {
-      boxShadow: "none"
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[A-Z0-9]{1}[Z]{1}[A-Z0-9]{1}$",
+      type: "text",
+      title: t("INVALID_GST_NO_ERROR_MESSAGE")
     }
-  }, renderModalContent())), showToast && /*#__PURE__*/React.createElement(Toast, {
-    error: showToast.key === "error" ? true : false,
-    label: t(showToast.key === "success" ? "ES_FSM_REGISTRY_" + showToast.action + "_SUCCESS" : showToast.action),
-    onClose: closeToast
-  }), /*#__PURE__*/React.createElement(ActionBar, {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("GST_REGISTERED_STATE/UT")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "GstState",
+    value: GstState,
+    onChange: setgststate,
     style: {
-      zIndex: "19"
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "^[a-zA-Z0-9/-]{1,20}$",
+      type: "text",
+      title: t("PT_NAME_ERROR_MESSAGE")
     }
-  }, displayMenu ? /*#__PURE__*/React.createElement(Menu, {
-    localeKeyPrefix: "ES_FSM_REGISTRY_ACTION",
-    options: ["EDIT", "DELETE"],
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("REGISTRATION_NO")), /*#__PURE__*/React.createElement(TextInput, {
     t: t,
-    onSelect: onActionSelect
-  }) : null, /*#__PURE__*/React.createElement(SubmitBar, {
-    label: t("ES_COMMON_TAKE_ACTION"),
-    onSubmit: () => setDisplayMenu(!displayMenu)
-  }))) : /*#__PURE__*/React.createElement(Loader, null));
-};
-
-const SelectEkycZones = _ref => {
-  var _formData$zoneIds;
-  let config = _ref.config,
-    onSelect = _ref.onSelect,
-    t = _ref.t,
-    formData = _ref.formData,
-    _ref$isMultiSelect = _ref.isMultiSelect,
-    isMultiSelect = _ref$isMultiSelect === void 0 ? true : _ref$isMultiSelect;
-  const tenantId = Digit.ULBService.getCurrentTenantId();
-  const _useState = useState([]),
-    zones = _useState[0],
-    setZones = _useState[1];
-  const _useState2 = useState([]),
-    selectedZones = _useState2[0],
-    setSelectedZones = _useState2[1];
-  const _Digit$Hooks$useCommo = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]),
-    boundaryData = _Digit$Hooks$useCommo.data,
-    isLoading = _Digit$Hooks$useCommo.isLoading;
-  useEffect(() => {
-    if (!zones.length) return;
-    if (isMultiSelect) {
-      setSelectedZones(Array.isArray(formData === null || formData === void 0 ? void 0 : formData.zoneIds) ? zones.filter(ele => formData.zoneIds.includes(ele.code)) : []);
-    } else {
-      const selected = zones.find(ele => {
-        return ele.code === (formData === null || formData === void 0 ? void 0 : formData.zoneIds) || ele.name === (formData === null || formData === void 0 ? void 0 : formData.zoneIds);
-      });
-      setSelectedZones(selected ? [selected] : []);
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "RegistrationNo",
+    value: RegistrationNo,
+    onChange: setregistrationno,
+    style: {
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "^[a-zA-Z0-9/-]{1,20}$",
+      type: "text",
+      title: t("INVALID_REGISTRATION_NO_ERROR_MESSAGE")
     }
-  }, [zones, formData === null || formData === void 0 ? void 0 : formData.zoneIds, isMultiSelect]);
-  useEffect(() => {
-    var _boundaryData$egovLo, _boundaryData$egovLo$, _boundaryData$MdmsRes, _boundaryData$MdmsRes2, _boundaryData$MdmsRes3;
-    const tenantBoundary = (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$egovLo = boundaryData["egov-location"]) === null || _boundaryData$egovLo === void 0 ? void 0 : (_boundaryData$egovLo$ = _boundaryData$egovLo.TenantBoundary) === null || _boundaryData$egovLo$ === void 0 ? void 0 : _boundaryData$egovLo$[0]) || (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$MdmsRes = boundaryData.MdmsRes) === null || _boundaryData$MdmsRes === void 0 ? void 0 : (_boundaryData$MdmsRes2 = _boundaryData$MdmsRes["egov-location"]) === null || _boundaryData$MdmsRes2 === void 0 ? void 0 : (_boundaryData$MdmsRes3 = _boundaryData$MdmsRes2.TenantBoundary) === null || _boundaryData$MdmsRes3 === void 0 ? void 0 : _boundaryData$MdmsRes3[0]);
-    const boundaries = (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.boundary) || (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.children) || [];
-    if (Array.isArray(boundaries === null || boundaries === void 0 ? void 0 : boundaries.children) && (boundaries === null || boundaries === void 0 ? void 0 : boundaries.children.length) > 0) {
-      const allZones = boundaries.children.flatMap(assembly => ((assembly === null || assembly === void 0 ? void 0 : assembly.children) || []).map(zone => ({
-        code: zone.code,
-        name: zone.name
-      })));
-      const zonesList = [...new Map(allZones.map(zone => [zone.code, zone])).values()];
-      setZones(zonesList);
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("EPF_NO")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "EpfNo",
+    value: EpfNo,
+    onChange: setepfno,
+    style: {
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "^[a-zA-Z0-9/-]{1,15}$",
+      type: "text",
+      title: t("INVALID_EPF_NO_ERROR_MESSAGE")
     }
-  }, [boundaryData]);
-  const handleSelect = value => {
-    if (isMultiSelect) {
-      const extractedValue = Array.isArray(value) ? value.map(v => Array.isArray(v) ? v[1] : v).filter(Boolean) : [];
-      onSelect(config.key, extractedValue);
-    } else {
-      const selectedZone = Array.isArray(value) ? Array.isArray(value[0]) ? value[0][1] : value[0] : value;
-      setSelectedZones(selectedZone ? [selectedZone] : []);
-      onSelect(config.key, (selectedZone === null || selectedZone === void 0 ? void 0 : selectedZone.name) || "");
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, "" + t("ESI_NO")), /*#__PURE__*/React.createElement(TextInput, {
+    t: t,
+    type: "text",
+    isMandatory: false,
+    optionKey: "i18nKey",
+    name: "EsiNo",
+    value: EsiNo,
+    onChange: setesino,
+    style: {
+      width: "100%"
+    },
+    ValidationRequired: true,
+    validation: {
+      isRequired: true,
+      pattern: "^[a-zA-Z0-9/-]{1,20}$",
+      type: "text",
+      title: t("INVALID_ESI_NO_ERROR_MESSAGE")
+    }
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("VENDOR_TYPE"), /*#__PURE__*/React.createElement("div", {
+    className: "tooltip",
+    style: {
+      width: "12px",
+      height: "5px",
+      marginLeft: "10px",
+      display: "inline-flex",
+      alignItems: "center"
     }
-  };
-  if (isLoading) return /*#__PURE__*/React.createElement(Loader, null);
-  return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label) + (config.isMandatory ? " *" : "")), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "tooltiptext",
     style: {
-      position: "relative",
-      zIndex: 10
+      whiteSpace: "pre-wrap",
+      fontSize: "small",
+      wordWrap: "break-word",
+      width: "300px",
+      marginLeft: "15px",
+      marginBottom: "-10px"
     }
-  }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
-    options: zones,
-    selected: selectedZones,
-    onSelect: handleSelect,
-    optionsKey: "name",
-    t: t,
-    multiple: isMultiSelect,
-    ServerStyle: {
-      backgroundColor: "#fff"
+  }, "" + t("AST_CLASSIFICATION_ASSET")))), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "VendorType",
+    defaultValue: VendorType,
+    rules: {
+      required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    isMultiSelect: isMultiSelect,
-    showSelectedLabels: !isMultiSelect,
-    defaultLabel: isMultiSelect ? ((formData === null || formData === void 0 ? void 0 : (_formData$zoneIds = formData.zoneIds) === null || _formData$zoneIds === void 0 ? void 0 : _formData$zoneIds.length) || 0) + " Selected" : ""
-  })), isMultiSelect && Array.isArray(formData === null || formData === void 0 ? void 0 : formData.zoneIds) && formData.zoneIds.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "selected-zones"
-  }, formData.zoneIds.map(zone => /*#__PURE__*/React.createElement("span", {
-    key: zone.code,
-    className: "selected-zone-chip"
-  }, zone.name))));
-};
-
-const SelectEkycClusters = _ref => {
-  let config = _ref.config,
-    onSelect = _ref.onSelect,
-    t = _ref.t,
-    formData = _ref.formData;
-  const tenantId = Digit.ULBService.getCurrentTenantId();
-  const _useState = useState([]),
-    clusters = _useState[0],
-    setClusters = _useState[1];
-  const _useState2 = useState(Array.isArray(formData === null || formData === void 0 ? void 0 : formData.clusterIds) ? formData.clusterIds : []),
-    selectedClusters = _useState2[0],
-    setSelectedClusters = _useState2[1];
-  const selectedZones = React.useMemo(() => Array.isArray(formData === null || formData === void 0 ? void 0 : formData.zoneIds) ? formData.zoneIds : [], [formData === null || formData === void 0 ? void 0 : formData.zoneIds]);
-  const _Digit$Hooks$useCommo = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]),
-    boundaryData = _Digit$Hooks$useCommo.data;
-  useEffect(() => {
-    var _boundaryData$egovLo, _boundaryData$egovLo$, _boundaryData$MdmsRes, _boundaryData$MdmsRes2, _boundaryData$MdmsRes3;
-    const tenantBoundary = (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$egovLo = boundaryData["egov-location"]) === null || _boundaryData$egovLo === void 0 ? void 0 : (_boundaryData$egovLo$ = _boundaryData$egovLo.TenantBoundary) === null || _boundaryData$egovLo$ === void 0 ? void 0 : _boundaryData$egovLo$[0]) || (boundaryData === null || boundaryData === void 0 ? void 0 : (_boundaryData$MdmsRes = boundaryData.MdmsRes) === null || _boundaryData$MdmsRes === void 0 ? void 0 : (_boundaryData$MdmsRes2 = _boundaryData$MdmsRes["egov-location"]) === null || _boundaryData$MdmsRes2 === void 0 ? void 0 : (_boundaryData$MdmsRes3 = _boundaryData$MdmsRes2.TenantBoundary) === null || _boundaryData$MdmsRes3 === void 0 ? void 0 : _boundaryData$MdmsRes3[0]);
-    const boundaries = (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.boundary) || (tenantBoundary === null || tenantBoundary === void 0 ? void 0 : tenantBoundary.children) || [];
-    let allClusters = [];
-    if (selectedZones.length > 0 && Array.isArray(boundaries) && boundaries.length > 0) {
-      selectedZones.forEach(zone => {
-        const zoneBoundary = boundaries.find(b => b.code === ((zone === null || zone === void 0 ? void 0 : zone.code) || zone));
-        const children = (zoneBoundary === null || zoneBoundary === void 0 ? void 0 : zoneBoundary.children) || (zoneBoundary === null || zoneBoundary === void 0 ? void 0 : zoneBoundary.boundary) || [];
-        if (Array.isArray(children)) {
-          children.forEach(child => {
-            allClusters.push({
-              code: child.code,
-              name: child.name
-            });
-          });
-        }
-      });
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: VendorType,
+      select: setVendorType,
+      option: [{
+        i18nKey: "Supplier",
+        code: "SUPPLIER"
+      }, {
+        i18nKey: "Contractor",
+        code: "CONTRACTOR"
+      }],
+      optionKey: "i18nKey",
+      placeholder: "Select",
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("VENOR_CATEGORY"), /*#__PURE__*/React.createElement("div", {
+    className: "tooltip",
+    style: {
+      width: "12px",
+      height: "5px",
+      marginLeft: "10px",
+      display: "inline-flex",
+      alignItems: "center"
     }
-    if (allClusters.length === 0) {
-      const staticClusters = {
-        "ZONE-01": [{
-          code: "CLUSTER-01",
-          name: "CLUSTER-01"
-        }],
-        "ZONE-02": [{
-          code: "CLUSTER-02",
-          name: "CLUSTER-02"
-        }],
-        "ZONE-03": [{
-          code: "CLUSTER-03",
-          name: "CLUSTER-03"
-        }],
-        "ZONE-04": [{
-          code: "CLUSTER-04",
-          name: "CLUSTER-04"
-        }],
-        "ZONE-05": [{
-          code: "CLUSTER-05",
-          name: "CLUSTER-05"
-        }]
-      };
-      if (selectedZones.length > 0) {
-        selectedZones.forEach(z => {
-          const zCode = (z === null || z === void 0 ? void 0 : z.code) || z;
-          const zName = (z === null || z === void 0 ? void 0 : z.name) || z;
-          if (staticClusters[zCode]) {
-            allClusters = [...allClusters, ...staticClusters[zCode]];
-          } else {
-            allClusters.push({
-              code: zCode + "-C1",
-              name: zName + " Cluster 1"
-            });
-          }
-        });
-      } else {
-        allClusters = [{
-          code: "CLUSTER-01",
-          name: "CLUSTER-01"
-        }, {
-          code: "CLUSTER-02",
-          name: "CLUSTER-02"
-        }, {
-          code: "CLUSTER-03",
-          name: "CLUSTER-03"
-        }];
-      }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "tooltiptext",
+    style: {
+      whiteSpace: "pre-wrap",
+      fontSize: "small",
+      wordWrap: "break-word",
+      width: "300px",
+      marginLeft: "15px",
+      marginBottom: "-10px"
     }
-    if (allClusters.length > 0) {
-      allClusters = Array.from(new Map(allClusters.map(item => [item.code, item])).values());
+  }))), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "VendorCategory",
+    defaultValue: VendorCategory,
+    rules: {
+      required: t("CORE_COMMON_REQUIRED_ERRMSG")
+    },
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: VendorCategory,
+      select: setVendorCategory,
+      option: [{
+        i18nKey: "Firm",
+        code: "FIRM"
+      }, {
+        i18nKey: "Individual",
+        code: "Individual"
+      }],
+      optionKey: "i18nKey",
+      placeholder: "Select",
+      t: t
+    })
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", null, t("STATUS"), /*#__PURE__*/React.createElement("div", {
+    className: "tooltip",
+    style: {
+      width: "12px",
+      height: "5px",
+      marginLeft: "10px",
+      display: "inline-flex",
+      alignItems: "center"
     }
-    setClusters(allClusters);
-  }, [selectedZones, boundaryData]);
-  const handleSelect = value => {
-    const extractedValue = Array.isArray(value) ? value.map(v => Array.isArray(v) ? v[1] : v).filter(Boolean) : value;
-    setSelectedClusters(extractedValue);
-    onSelect(config.key, extractedValue);
-  };
-  const isDisabled = selectedZones.length === 0;
-  return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label) + (config.isMandatory ? " *" : "")), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "tooltiptext",
     style: {
-      position: "relative",
-      zIndex: 9
+      whiteSpace: "pre-wrap",
+      fontSize: "small",
+      wordWrap: "break-word",
+      width: "300px",
+      marginLeft: "15px",
+      marginBottom: "-10px"
     }
-  }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
-    options: clusters,
-    selected: selectedClusters,
-    onSelect: handleSelect,
-    optionsKey: "name",
-    t: t,
-    ServerStyle: {
-      backgroundColor: "#fff"
+  }, "" + t("AST_CLASSIFICATION_ASSET")))), /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "Status",
+    defaultValue: Status,
+    rules: {
+      required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    disable: isDisabled
-  })));
-};
-
-const SelectEkycDropdown = _ref => {
-  var _config$populators, _config$populators2;
-  let config = _ref.config,
-    onSelect = _ref.onSelect,
-    t = _ref.t,
-    formData = _ref.formData;
-  const options = (config === null || config === void 0 ? void 0 : (_config$populators = config.populators) === null || _config$populators === void 0 ? void 0 : _config$populators.options) || [];
-  const optionsKey = (config === null || config === void 0 ? void 0 : (_config$populators2 = config.populators) === null || _config$populators2 === void 0 ? void 0 : _config$populators2.optionsKey) || "name";
-  const selected = formData === null || formData === void 0 ? void 0 : formData[config.key];
-  const handleSelect = value => {
-    onSelect(config.key, value);
-  };
-  return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label)), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    selected: selected,
-    option: options,
-    select: handleSelect,
-    optionKey: optionsKey,
-    t: t
-  })));
+    render: props => /*#__PURE__*/React.createElement(Dropdown, {
+      selected: Status,
+      select: setStatus,
+      option: [{
+        i18nKey: "Active",
+        code: "ACTIVE"
+      }, {
+        i18nKey: "Inactive",
+        code: "INACTIVE"
+      }],
+      optionKey: "i18nKey",
+      placeholder: "Select",
+      t: t
+    })
+  })))));
 };
 
 const componentsToRegister = {
-  VendorDetails,
   VendorDocuments,
   ServiceDoc,
   VendorSelectAddress,
@@ -9610,7 +9962,10 @@ const componentsToRegister = {
   SupervisorAreaAssignment,
   SelectEkycZones,
   SelectEkycClusters,
-  SelectEkycDropdown
+  SelectEkycDropdown,
+  VendorDetails,
+  EditVendor,
+  AdditionalDetails
 };
 const addComponentsToRegistry = () => {
   Object.entries(componentsToRegister).forEach(_ref => {