@djb25/digit-ui-module-vendor 1.0.41 → 1.0.43

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useLocation, Switch, useHistory, useParams, Link, useRouteMatch, Redirect, Route } from 'react-router-dom';
-import { AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, VerticalTimeline, FormStep, LabelFieldPair, CardLabel, CustomTooltip, TextInput, MobileNumber, Dropdown as Dropdown$3, UploadFile, Toast, Loader, Card, ActionBar, SubmitBar, RadioOrSelect, Header, SearchForm, SearchField, CardLabelError, DatePicker as DatePicker$5, Table, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ApplyFilterBar, AddIcon, Menu, LinkLabel, ViewsIcon, ToggleSwitch, Modal, MdClose, MultiSelectDropdown, CitizenHomeCard, CardSectionHeader, Row, EditIcon, DeleteIcon, CardText, FormComposer, CardHeader, CardSubHeader, StatusTable, LinkButton, Banner, InfoIcon } from '@djb25/digit-ui-react-components';
+import { AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, LayoutWrapper, HomeIcon, PropertyHouse, EmployeeModuleCard, VerticalTimeline, FormStep, LabelFieldPair, CardLabel, CustomTooltip, TextInput, MobileNumber, Dropdown as Dropdown$2, UploadFile, Toast, Loader, Card, ActionBar, SubmitBar, RadioOrSelect, Header, SearchForm, SearchField, CardLabelError, DatePicker as DatePicker$4, Table, ShippingTruck, CheckBox, RadioButtons, CloseSvg, Localities, RemoveableTag, ApplyFilterBar, AddIcon, Menu, LinkLabel, ViewsIcon, ToggleSwitch, Modal, MdClose, MultiSelectDropdown, CitizenHomeCard, CardSectionHeader, Row, EditIcon, DeleteIcon, CardText, FormComposer, CardHeader, CardSubHeader, StatusTable, LinkButton, Banner, InfoIcon } from '@djb25/digit-ui-react-components';
 import { useTranslation } from 'react-i18next';
 import { useForm, Controller } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
@@ -697,7 +697,7 @@ const VendorDetails = ({
     rules: {
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    render: props => /*#__PURE__*/React.createElement(Dropdown$3, {
+    render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
       selected: VendorType,
       select: setVendorType,
       option: [{
@@ -737,7 +737,7 @@ const VendorDetails = ({
     rules: {
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    render: props => /*#__PURE__*/React.createElement(Dropdown$3, {
+    render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
       selected: VendorCategory,
       select: setVendorCategory,
       option: [{
@@ -777,7 +777,7 @@ const VendorDetails = ({
     rules: {
       required: t("CORE_COMMON_REQUIRED_ERRMSG")
     },
-    render: props => /*#__PURE__*/React.createElement(Dropdown$3, {
+    render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
       selected: Status,
       select: setStatus,
       option: [{
@@ -1061,11 +1061,21 @@ const VendorSelectAddress = ({
   } = Digit.Hooks.useBoundaryLocalities(selectedCity === null || selectedCity === void 0 ? void 0 : selectedCity.code, "revenue", {
     enabled: !!selectedCity
   }, t);
+  const {
+    data: fetchedWards
+  } = Digit.Hooks.useBoundaryLocalities(selectedCity === null || selectedCity === void 0 ? void 0 : selectedCity.code, "admin", {
+    enabled: !!selectedCity
+  }, t);
   const [localities, setLocalities] = useState();
   const [selectedLocality, setSelectedLocality] = useState(() => {
     var _property2, _property2$propertyDe, _property2$propertyDe2, _formData$cpt, _formData$cpt$details, _formData$cpt$details2, _formData$address2;
     return ((_property2 = property) === null || _property2 === void 0 ? void 0 : (_property2$propertyDe = _property2.propertyDetails) === null || _property2$propertyDe === void 0 ? void 0 : (_property2$propertyDe2 = _property2$propertyDe.address) === null || _property2$propertyDe2 === void 0 ? void 0 : _property2$propertyDe2.locality) || (formData === null || formData === void 0 ? void 0 : (_formData$cpt = formData.cpt) === null || _formData$cpt === void 0 ? void 0 : (_formData$cpt$details = _formData$cpt.details) === null || _formData$cpt$details === void 0 ? void 0 : (_formData$cpt$details2 = _formData$cpt$details.address) === null || _formData$cpt$details2 === void 0 ? void 0 : _formData$cpt$details2.locality) || (formData === null || formData === void 0 ? void 0 : (_formData$address2 = formData.address) === null || _formData$address2 === void 0 ? void 0 : _formData$address2.locality);
   });
+  const [wards, setWards] = useState();
+  const [selectedWard, setSelectedWard] = useState(() => {
+    var _formData$address3;
+    return formData === null || formData === void 0 ? void 0 : (_formData$address3 = formData.address) === null || _formData$address3 === void 0 ? void 0 : _formData$address3.ward;
+  });
   useEffect(() => {
     if (cities) {
       if (cities.length === 1) {
@@ -1075,10 +1085,10 @@ const VendorSelectAddress = ({
   }, [cities]);
   useEffect(() => {
     if (selectedCity && fetchedLocalities) {
-      var _formData$address3, _formData$cpt2, _formData$cpt2$detail, _formData$cpt2$detail2, _property3, _property3$propertyDe, _property3$propertyDe2, _formData$address4;
+      var _formData$address4, _formData$cpt2, _formData$cpt2$detail, _formData$cpt2$detail2, _property3, _property3$propertyDe, _property3$propertyDe2, _formData$address5;
       let __localityList = fetchedLocalities;
       let filteredLocalityList = [];
-      if (formData !== null && formData !== void 0 && (_formData$address3 = formData.address) !== null && _formData$address3 !== void 0 && _formData$address3.locality) {
+      if (formData !== null && formData !== void 0 && (_formData$address4 = formData.address) !== null && _formData$address4 !== void 0 && _formData$address4.locality) {
         setSelectedLocality(formData.address.locality);
       } else if (formData !== null && formData !== void 0 && (_formData$cpt2 = formData.cpt) !== null && _formData$cpt2 !== void 0 && (_formData$cpt2$detail = _formData$cpt2.details) !== null && _formData$cpt2$detail !== void 0 && (_formData$cpt2$detail2 = _formData$cpt2$detail.address) !== null && _formData$cpt2$detail2 !== void 0 && _formData$cpt2$detail2.locality) {
         setSelectedLocality(formData.cpt.details.address.locality);
@@ -1086,13 +1096,13 @@ const VendorSelectAddress = ({
         var _property4, _property4$propertyDe, _property4$propertyDe2;
         setSelectedLocality((_property4 = property) === null || _property4 === void 0 ? void 0 : (_property4$propertyDe = _property4.propertyDetails) === null || _property4$propertyDe === void 0 ? void 0 : (_property4$propertyDe2 = _property4$propertyDe.address) === null || _property4$propertyDe2 === void 0 ? void 0 : _property4$propertyDe2.locality);
       }
-      if (formData !== null && formData !== void 0 && (_formData$address4 = formData.address) !== null && _formData$address4 !== void 0 && _formData$address4.pincode) {
-        var _formData$address5;
+      if (formData !== null && formData !== void 0 && (_formData$address5 = formData.address) !== null && _formData$address5 !== void 0 && _formData$address5.pincode) {
+        var _formData$address6;
         filteredLocalityList = __localityList.filter(obj => {
           var _obj$pincode;
           return (_obj$pincode = obj.pincode) === null || _obj$pincode === void 0 ? void 0 : _obj$pincode.find(item => item == formData.address.pincode);
         });
-        if (!(formData !== null && formData !== void 0 && (_formData$address5 = formData.address) !== null && _formData$address5 !== void 0 && _formData$address5.locality)) setSelectedLocality();
+        if (!(formData !== null && formData !== void 0 && (_formData$address6 = formData.address) !== null && _formData$address6 !== void 0 && _formData$address6.locality)) setSelectedLocality();
       }
       if (userType === "employee") {
         onSelect(config.key, {
@@ -1112,9 +1122,20 @@ const VendorSelectAddress = ({
       }
     }
   }, [selectedCity, formData === null || formData === void 0 ? void 0 : (_formData$cpt3 = formData.cpt) === null || _formData$cpt3 === void 0 ? void 0 : (_formData$cpt3$detail = _formData$cpt3.details) === null || _formData$cpt3$detail === void 0 ? void 0 : _formData$cpt3$detail.address, fetchedLocalities]);
+  useEffect(() => {
+    if (selectedCity && fetchedWards) {
+      var _formData$address7;
+      if (formData !== null && formData !== void 0 && (_formData$address7 = formData.address) !== null && _formData$address7 !== void 0 && _formData$address7.ward) {
+        setSelectedWard(formData.address.ward);
+      }
+      setWards(fetchedWards);
+    }
+  }, [selectedCity, fetchedWards]);
   function selectCity(city) {
     setSelectedLocality(null);
     setLocalities(null);
+    setSelectedWard(null);
+    setWards(null);
     Digit.SessionStorage.set("fsm.file.address.city", city);
     setSelectedCity(city);
   }
@@ -1123,6 +1144,17 @@ const VendorSelectAddress = ({
     if (userType === "employee") {
       onSelect(config.key, {
         ...formData[config.key],
+        locality: selectedLocality,
+        ward: selectedWard
+      });
+    }
+  }
+  function selectWard(ward) {
+    setSelectedWard(ward);
+    if (userType === "employee") {
+      onSelect(config.key, {
+        ...formData[config.key],
+        ward: ward,
         locality: selectedLocality
       });
     }
@@ -1130,11 +1162,12 @@ const VendorSelectAddress = ({
   function onSubmit() {
     onSelect(config.key, {
       city: selectedCity,
-      locality: selectedLocality
+      locality: selectedLocality,
+      ward: selectedWard
     });
   }
   if (userType === "employee") {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("MYCITY_CODE_LABEL"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$3, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("MYCITY_CODE_LABEL"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
       className: "",
       isMandatory: true,
       selected: (cities === null || cities === void 0 ? void 0 : cities.length) === 1 ? cities[0] : selectedCity,
@@ -1143,7 +1176,15 @@ const VendorSelectAddress = ({
       select: selectCity,
       optionKey: "code",
       t: t
-    })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_NEW_APPLICATION_LOCATION_MOHALLA"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$3, {
+    })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_NEW_APPLICATION_LOCATION_WARD"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
+      className: "",
+      isMandatory: true,
+      selected: selectedWard,
+      option: wards,
+      select: selectWard,
+      optionKey: "name",
+      t: t
+    })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_NEW_APPLICATION_LOCATION_MOHALLA"), config.isMandatory ? " * " : null), /*#__PURE__*/React.createElement(Dropdown$2, {
       className: "",
       isMandatory: true,
       selected: selectedLocality,
@@ -1157,13 +1198,20 @@ const VendorSelectAddress = ({
     config: config,
     onSelect: onSubmit,
     t: t,
-    isDisabled: selectedLocality ? false : true
+    isDisabled: selectedLocality && selectedWard ? false : true
   }, /*#__PURE__*/React.createElement(CardLabel, null, `${t("MYCITY_CODE_LABEL")} *`), /*#__PURE__*/React.createElement(RadioOrSelect, {
     options: cities,
     selectedOption: selectedCity,
     optionKey: "i18nKey",
     onSelect: selectCity,
     t: t
+  }), selectedCity && wards && /*#__PURE__*/React.createElement(CardLabel, null, `${t("ES_NEW_APPLICATION_LOCATION_WARD")} *`), selectedCity && wards && /*#__PURE__*/React.createElement(RadioOrSelect, {
+    isMandatory: config.isMandatory,
+    options: wards,
+    selectedOption: selectedWard,
+    optionKey: "name",
+    onSelect: selectWard,
+    t: t
   }), selectedCity && localities && /*#__PURE__*/React.createElement(CardLabel, null, `${t("CS_CREATECOMPLAINT_MOHALLA")} *`), selectedCity && localities && /*#__PURE__*/React.createElement(RadioOrSelect, {
     isMandatory: config.isMandatory,
     options: localities,
@@ -1302,7 +1350,7 @@ const VendorSearchApplication = ({
     name: "vendorName",
     render: field => {
       var _vendorData$vendor2;
-      return /*#__PURE__*/React.createElement(Dropdown$3, {
+      return /*#__PURE__*/React.createElement(Dropdown$2, {
         selected: field.value || "",
         select: field.onChange,
         onBlur: field.onBlur,
@@ -1336,7 +1384,7 @@ const VendorSearchApplication = ({
       className: "employee-card-input employee-card-input--front"
     }, "+91")
   }), /*#__PURE__*/React.createElement(CardLabelError, null, formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$mob = _formState$errors["mobileNumber"]) === null || _formState$errors$mob === void 0 ? void 0 : _formState$errors$mob.message)), /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("VENDOR_FROM_DATE")), /*#__PURE__*/React.createElement(Controller, {
-    render: props => /*#__PURE__*/React.createElement(DatePicker$5, {
+    render: props => /*#__PURE__*/React.createElement(DatePicker$4, {
       date: props.value,
       disabled: false,
       onChange: props.onChange
@@ -1344,7 +1392,7 @@ const VendorSearchApplication = ({
     name: "fromDate",
     control: control
   })), /*#__PURE__*/React.createElement(SearchField, null, /*#__PURE__*/React.createElement("label", null, t("VENDOR_TO_DATE")), /*#__PURE__*/React.createElement(Controller, {
-    render: props => /*#__PURE__*/React.createElement(DatePicker$5, {
+    render: props => /*#__PURE__*/React.createElement(DatePicker$4, {
       date: props.value,
       disabled: false,
       onChange: props.onChange
@@ -1845,7 +1893,7 @@ const DropdownStatus = ({
   applicationStatuses,
   areApplicationStatus
 }) => {
-  return areApplicationStatus ? /*#__PURE__*/React.createElement(Dropdown$3, {
+  return areApplicationStatus ? /*#__PURE__*/React.createElement(Dropdown$2, {
     option: applicationStatuses,
     optionKey: "name",
     selected: value,
@@ -1942,7 +1990,7 @@ const RegisteredVendorSearch = ({
     switch (input.type) {
       case "date":
         return /*#__PURE__*/React.createElement(Controller, {
-          render: props => /*#__PURE__*/React.createElement(DatePicker$5, {
+          render: props => /*#__PURE__*/React.createElement(DatePicker$4, {
             date: props.value,
             onChange: props.onChange
           }),
@@ -1962,7 +2010,7 @@ const RegisteredVendorSearch = ({
         });
       case "dropdown":
         return /*#__PURE__*/React.createElement(Controller, {
-          render: props => /*#__PURE__*/React.createElement(Dropdown$3, {
+          render: props => /*#__PURE__*/React.createElement(Dropdown$2, {
             option: input.options,
             optionKey: input.optionsKey,
             value: props.value,
@@ -2841,7 +2889,7 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            return /*#__PURE__*/React.createElement(Dropdown$3, {
+            return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
               selected: getSelectedVendorOption(row.original, vendors),
               option: vendors,
@@ -2896,7 +2944,7 @@ const VendorInbox = props => {
           }) => {
             const selectedVendor = getSelectedVendorOption(row.original, vendors);
             const vendorFillingPoints = getVendorFillingPoints(selectedVendor);
-            return /*#__PURE__*/React.createElement(Dropdown$3, {
+            return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
               selected: getSelectedFillingPointOption(row.original, vendorFillingPoints),
               option: vendorFillingPoints,
@@ -2925,7 +2973,7 @@ const VendorInbox = props => {
             const selectedVendor = getSelectedVendorOption(row.original, vendors);
             const selectedFillingPoint = getSelectedFillingPointOption(row.original, getVendorFillingPoints(selectedVendor));
             const availableDrivers = getVendorDriversForFillingPoint(selectedVendor, selectedFillingPoint);
-            return /*#__PURE__*/React.createElement(Dropdown$3, {
+            return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
               selected: getSelectedDriverOption(row.original, availableDrivers),
               option: availableDrivers,
@@ -3018,7 +3066,7 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            return /*#__PURE__*/React.createElement(Dropdown$3, {
+            return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
               selected: (vendors === null || vendors === void 0 ? void 0 : vendors.find(vendor => {
                 var _row$original$vendorD, _row$original$vendor;
@@ -3128,7 +3176,7 @@ const VendorInbox = props => {
           Cell: ({
             row
           }) => {
-            return /*#__PURE__*/React.createElement(Dropdown$3, {
+            return /*#__PURE__*/React.createElement(Dropdown$2, {
               className: "fsm-registry-dropdown",
               selected: (vendors === null || vendors === void 0 ? void 0 : vendors.find(vendor => {
                 var _row$original$vendorD2, _row$original$vendor2;
@@ -3865,7 +3913,6 @@ const SelectServiceType = ({
   formData
 }) => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const stateId = Digit.ULBService.getStateId();
   const [serviceTypes, setserviceTypes] = useState(formData === null || formData === void 0 ? void 0 : formData.serviceType);
   const [formattedServiceTypes, setFormattedServiceTypes] = useState([]);
   const {
@@ -3908,7 +3955,7 @@ const SelectServiceType = ({
     return /*#__PURE__*/React.createElement(Loader, null);
   }
   if (userType === "employee") {
-    return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label)), /*#__PURE__*/React.createElement(Dropdown$3, {
+    return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label)), /*#__PURE__*/React.createElement(Dropdown$2, {
       className: "payment-form-text-input-correction",
       isMandatory: config.isMandatory,
       selected: serviceTypes,
@@ -4012,14 +4059,14 @@ const SelectVehicleType = ({
   if (!vehicleData || !serviceTypeData) {
     return /*#__PURE__*/React.createElement("div", null, t("ERROR_FETCHING_DATA"));
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_MODEL")), /*#__PURE__*/React.createElement(Dropdown$3, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_MODEL")), /*#__PURE__*/React.createElement(Dropdown$2, {
     className: "form-field",
     selected: selectedModal,
     option: modals,
     select: selectModal,
     optionKey: "name",
     t: t
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_TYPE")), /*#__PURE__*/React.createElement(Dropdown$3, {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_FSM_REGISTRY_VEHICLE_TYPE")), /*#__PURE__*/React.createElement(Dropdown$2, {
     className: "form-field",
     selected: selectedType,
     option: types,
@@ -4311,7 +4358,7 @@ const SupervisorAreaAssignment = ({
     onSelect(config.key, updatedData);
   };
   if (isLoading) return /*#__PURE__*/React.createElement(Loader, null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_ZONE") + " *"), /*#__PURE__*/React.createElement(Dropdown$3, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_ZONE") + " *"), /*#__PURE__*/React.createElement(Dropdown$2, {
     selected: selectedZone,
     option: zones,
     select: val => {
@@ -4320,7 +4367,7 @@ const SupervisorAreaAssignment = ({
     },
     optionKey: "name",
     t: t
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_CLUSTER") + " *"), /*#__PURE__*/React.createElement(Dropdown$3, {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_CLUSTER") + " *"), /*#__PURE__*/React.createElement(Dropdown$2, {
     selected: selectedCluster,
     option: clusters,
     select: val => {
@@ -4330,7 +4377,7 @@ const SupervisorAreaAssignment = ({
     optionKey: "name",
     t: t,
     disable: !selectedZone
-  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_WARD") + " *"), /*#__PURE__*/React.createElement(Dropdown$3, {
+  })), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t("ES_VENDOR_SUPERVISOR_WARD") + " *"), /*#__PURE__*/React.createElement(Dropdown$2, {
     selected: selectedWard,
     option: wards,
     select: val => {
@@ -4349,7 +4396,10 @@ const SupervisorAreaAssignment = ({
     },
     optionsKey: "name",
     t: t,
-    disable: !selectedWard
+    disable: !selectedWard,
+    ServerStyle: {
+      backgroundColor: "#fff"
+    }
   })));
 };
 
@@ -4367,8 +4417,8 @@ const CitizenVendorApp = () => {
       icon: HomeIcon,
       path: "/digit-ui/citizen"
     }, {
-      label: t("WT_MODULE_NAME"),
-      path: `${path}/wt-Vendor`
+      label: t("CITIZEN_VENDOR"),
+      path: `${path}/citizen-Vendor`
     }];
     if (pathname.includes("/inbox")) {
       let label = "ES_COMMON_INBOX";
@@ -4596,8 +4646,8 @@ const CitizenVendorApp = () => {
       to: {
         pathname: `/digit-ui/citizen/login`,
         state: {
-          from: `${path}/wt-Vendor`,
-          role: "WT_VENDOR"
+          from: `${path}`,
+          role: "CITIZEN_VENDOR"
         }
       }
     }),
@@ -4920,7 +4970,7 @@ const EditVendorDetails = props => {
       });
     }
     if (selectedAction === "ADD_VEHICLE") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VEHICLE`)), /*#__PURE__*/React.createElement(Dropdown$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VEHICLE`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: vehicles,
         value: selectedOption,
@@ -4930,7 +4980,7 @@ const EditVendorDetails = props => {
       }));
     }
     if (selectedAction === "ADD_DRIVER") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_DRIVER`)), /*#__PURE__*/React.createElement(Dropdown$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_DRIVER`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: drivers,
         value: selectedOption,
@@ -5187,15 +5237,13 @@ const EditVendorDetails = props => {
   }))) : /*#__PURE__*/React.createElement(Loader, null));
 };
 
-const {
-  DatePicker,
-  Dropdown
-} = require("@djb25/digit-ui-react-components");
 const VendorConfig = (t, disabled = false, formData = {}) => {
   var _formData$serviceType;
   const isEkyc = (formData === null || formData === void 0 ? void 0 : (_formData$serviceType = formData.serviceType) === null || _formData$serviceType === void 0 ? void 0 : _formData$serviceType.code) === "EKYC";
   return [{
     head: "ES_VRNDOR_NEW_VENDOR_DETAILS",
+    isCollapsible: true,
+    isDefaultOpen: true,
     body: [{
       label: "ES_FSM_REGISTRY_NEW_VENDOR_NAME",
       isMandatory: true,
@@ -5275,7 +5323,7 @@ const VendorConfig = (t, disabled = false, formData = {}) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -5290,7 +5338,7 @@ const VendorConfig = (t, disabled = false, formData = {}) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -5301,12 +5349,6 @@ const VendorConfig = (t, disabled = false, formData = {}) => {
       type: "component",
       key: "zoneIds",
       component: "SelectEkycZones"
-    }, {
-      label: "ES_VENDOR_CLUSTER",
-      isMandatory: true,
-      type: "component",
-      key: "clusterIds",
-      component: "SelectEkycClusters"
     }, {
       label: "ES_FSM_REGISTRY_NEW_OWNER_NAME",
       isMandatory: true,
@@ -5320,17 +5362,6 @@ const VendorConfig = (t, disabled = false, formData = {}) => {
         error: t("FSM_REGISTRY_INVALID_NAME"),
         className: "payment-form-text-input-correction"
       }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_FATHER_NAME",
-      isMandatory: true,
-      type: "text",
-      populators: {
-        name: "fatherOrHusbandName",
-        validation: {
-          required: true
-        },
-        className: "payment-form-text-input-correction"
-      }
     }, {
       label: "ES_FSM_REGISTRY_NEW_GENDER",
       isMandatory: true,
@@ -5361,113 +5392,25 @@ const VendorConfig = (t, disabled = false, formData = {}) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps, {
           max: convertEpochToDate(new Date().setFullYear(new Date().getFullYear()))
         }))
       }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_RELATIONSHIP",
-      isMandatory: true,
-      type: "component",
-      key: "relationship",
-      component: "SelectEkycDropdown",
-      populators: {
-        name: "relationship",
-        options: [{
-          code: "FATHER",
-          name: "ES_COMMON_RELATION_FATHER"
-        }, {
-          code: "HUSBAND",
-          name: "ES_COMMON_RELATION_HUSBAND"
-        }, {
-          code: "OTHER",
-          name: "ES_COMMON_RELATION_OTHER"
-        }],
-        optionsKey: "name"
-      }
     }] : [])]
   }, {
-    head: "ES_FSM_REGISTRY_NEW_ADDRESS_DETAILS",
+    isCreateConnection: true,
+    className: "new-application-card",
     body: [{
-      label: "HOUSE_NO",
-      isMandatory: false,
-      type: "text",
-      key: "doorNo",
-      populators: {
-        name: "doorNo",
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
-      }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_PLOT",
-      isMandatory: false,
-      type: "text",
-      key: "plotNo",
-      populators: {
-        name: "plotNo",
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
-      }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_BUILDING_NAME",
-      isMandatory: false,
-      type: "text",
-      key: "buildingName",
-      populators: {
-        name: "buildingName",
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
-      }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_STREET",
-      isMandatory: false,
-      type: "text",
-      key: "street",
-      populators: {
-        name: "street",
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
-      }
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_PINCODE",
-      isMandatory: false,
-      type: "text",
-      key: "pincode",
-      populators: {
-        name: "pincode",
-        validation: {
-          required: false,
-          pattern: /^[1-9][0-9]{5}$/
-        },
-        error: t("FSM_REGISTRY_INVALID_PINCODE"),
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
-      }
-    }, {
-      route: "address",
-      component: "VendorSelectAddress",
+      type: "component",
+      key: "propertyAddress",
+      component: "CPTPropertyLocationDetails",
       withoutLabel: true,
-      texts: {
-        headerCaption: "CS_FILE_APPLICATION_PROPERTY_LOCATION_LABEL",
-        header: "CS_FILE_APPLICATION_PROPERTY_LOCATION_ADDRESS_TEXT",
-        cardText: "CS_FILE_APPLICATION_PROPERTY_LOCATION_CITY_MOHALLA_TEXT",
-        submitBarLabel: "CS_COMMON_NEXT"
-      },
-      key: "address",
-      isMandatory: true,
-      type: "component"
-    }, {
-      label: "ES_FSM_REGISTRY_NEW_LANDMARK",
-      isMandatory: false,
-      type: "text",
-      key: "landmark",
-      populators: {
-        name: "landmark",
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
+      props: {
+        hidePropertySearch: true,
+        hideZRO: true
       }
     }]
   }];
@@ -5478,14 +5421,12 @@ const AddVendor = ({
   heading
 }) => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const stateId = Digit.ULBService.getStateId();
   const {
     t
   } = useTranslation();
   const history = useHistory();
   const [currentStep, setCurrentStep] = useState(1);
   const [showToast, setShowToast] = useState(null);
-  const [canSubmit, setCanSubmit] = useState(false);
   const [, setMutationHappened] = Digit.Hooks.useSessionStorage("FSM_MUTATION_HAPPENED", false);
   const [,, clearError] = Digit.Hooks.useSessionStorage("FSM_ERROR_DATA", false);
   const [,, clearSuccessData] = Digit.Hooks.useSessionStorage("FSM_MUTATION_SUCCESS_DATA", false);
@@ -5512,23 +5453,26 @@ const AddVendor = ({
   const [formData, setFormData] = useState(defaultValues);
   const Config = VendorConfig(t, false, formData);
   const onFormValueChange = (setValue, data) => {
-    var _data$serviceType, _formData$serviceType, _data$serviceType2, _data$serviceType3, _data$address, _data$address2;
-    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$serviceType = formData.serviceType) === null || _formData$serviceType === void 0 ? void 0 : _formData$serviceType.code) || JSON.stringify(data === null || data === void 0 ? void 0 : data.zoneIds) !== JSON.stringify(formData === null || formData === void 0 ? void 0 : formData.zoneIds)) {
-      setFormData(data);
-    }
-    const isEkyc = (data === null || data === void 0 ? void 0 : (_data$serviceType2 = data.serviceType) === null || _data$serviceType2 === void 0 ? void 0 : _data$serviceType2.code) === "EKYC";
-    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$serviceType3 = data.serviceType) === null || _data$serviceType3 === void 0 ? void 0 : _data$serviceType3.code);
-    const isAddressFilled = (data === null || data === void 0 ? void 0 : (_data$address = data.address) === null || _data$address === void 0 ? void 0 : _data$address.city) && (data === null || data === void 0 ? void 0 : (_data$address2 = data.address) === null || _data$address2 === void 0 ? void 0 : _data$address2.locality);
-    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.fatherOrHusbandName) && (data === null || data === void 0 ? void 0 : data.gender) && (data === null || data === void 0 ? void 0 : data.dob) && (data === null || data === void 0 ? void 0 : data.relationship);
+    var _data$zoneIds, _data$serviceType, _formData$serviceType, _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 => {
+      var _item$;
+      return item === null || item === void 0 ? void 0 : (_item$ = item[1]) === 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$serviceType = formData.serviceType) === null || _formData$serviceType === void 0 ? void 0 : _formData$serviceType.code) || zoneChanged) {
+      setFormData(prev => ({
+        ...prev,
+        serviceType: data === null || data === void 0 ? void 0 : data.serviceType
+      }));
     }
-    if (isVendorDetailsFilled && isAddressFilled && isEkycFieldsFilled) {
-      setCanSubmit(true);
-    } else {
-      setCanSubmit(false);
+    if (zoneChanged) {
+      setFormData(prev => ({
+        ...prev,
+        zoneIds: currentZoneCodes
+      }));
     }
+    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$serviceType2 = data.serviceType) === null || _data$serviceType2 === void 0 ? void 0 : _data$serviceType2.code);
     if (isVendorDetailsFilled) {
       if (currentStep === 1) {
         setCurrentStep(2);
@@ -5563,22 +5507,24 @@ const AddVendor = ({
     setShowToast(null);
   };
   const onSubmit = data => {
-    var _mergedData$street, _mergedData$doorNo, _mergedData$plotNo, _mergedData$landmark, _mergedData$address, _mergedData$address$c, _mergedData$address2, _mergedData$address2$, _mergedData$address3, _mergedData$address3$, _mergedData$address4, _mergedData$address4$, _mergedData$buildingN, _mergedData$address5, _mergedData$address5$, _mergedData$address6, _mergedData$address6$, _mergedData$address7, _mergedData$address7$, _mergedData$serviceTy, _mergedData$address8, _mergedData$address9, _mergedData$relations, _mergedData$gender, _mergedData$serviceTy2;
+    var _address$city, _address$city2, _address$city3, _address$city4, _address$locality, _address$locality2, _mergedData$plotNo, _mergedData$buildingN, _mergedData$serviceTy, _mergedData$address, _mergedData$address2, _mergedData$relations, _mergedData$gender, _mergedData$serviceTy2;
+    console.log("-=-=-=-=-=-==-", data);
     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 name = mergedData === null || mergedData === void 0 ? void 0 : mergedData.vendorName;
-    const pincode = mergedData === null || mergedData === void 0 ? void 0 : mergedData.pincode;
-    const street = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$street = mergedData.street) === null || _mergedData$street === void 0 ? void 0 : _mergedData$street.trim();
-    const doorNo = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$doorNo = mergedData.doorNo) === null || _mergedData$doorNo === void 0 ? void 0 : _mergedData$doorNo.trim();
     const plotNo = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$plotNo = mergedData.plotNo) === null || _mergedData$plotNo === void 0 ? void 0 : _mergedData$plotNo.trim();
-    const landmark = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$landmark = mergedData.landmark) === null || _mergedData$landmark === void 0 ? void 0 : _mergedData$landmark.trim();
-    const city = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address = mergedData.address) === null || _mergedData$address === void 0 ? void 0 : (_mergedData$address$c = _mergedData$address.city) === null || _mergedData$address$c === void 0 ? void 0 : _mergedData$address$c.name;
-    const state = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address2 = mergedData.address) === null || _mergedData$address2 === void 0 ? void 0 : (_mergedData$address2$ = _mergedData$address2.city) === null || _mergedData$address2$ === void 0 ? void 0 : _mergedData$address2$.state;
-    const district = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address3 = mergedData.address) === null || _mergedData$address3 === void 0 ? void 0 : (_mergedData$address3$ = _mergedData$address3.city) === null || _mergedData$address3$ === void 0 ? void 0 : _mergedData$address3$.name;
-    const region = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address4 = mergedData.address) === null || _mergedData$address4 === void 0 ? void 0 : (_mergedData$address4$ = _mergedData$address4.city) === null || _mergedData$address4$ === void 0 ? void 0 : _mergedData$address4$.name;
     const buildingName = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$buildingN = mergedData.buildingName) === null || _mergedData$buildingN === void 0 ? void 0 : _mergedData$buildingN.trim();
-    const localityCode = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address5 = mergedData.address) === null || _mergedData$address5 === void 0 ? void 0 : (_mergedData$address5$ = _mergedData$address5.locality) === null || _mergedData$address5$ === void 0 ? void 0 : _mergedData$address5$.code;
-    const localityName = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address6 = mergedData.address) === null || _mergedData$address6 === void 0 ? void 0 : (_mergedData$address6$ = _mergedData$address6.locality) === null || _mergedData$address6$ === void 0 ? void 0 : _mergedData$address6$.name;
-    const localityArea = mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address7 = mergedData.address) === null || _mergedData$address7 === void 0 ? void 0 : (_mergedData$address7$ = _mergedData$address7.locality) === null || _mergedData$address7$ === void 0 ? void 0 : _mergedData$address7$.area;
     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.code) === "EKYC";
@@ -5606,9 +5552,13 @@ const AddVendor = ({
           label: "Locality",
           area: localityArea || ""
         },
+        ward: wardCode ? {
+          code: wardCode,
+          name: wardName
+        } : undefined,
         geoLocation: {
-          latitude: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address8 = mergedData.address) === null || _mergedData$address8 === void 0 ? void 0 : _mergedData$address8.latitude) || 28.6139,
-          longitude: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$address9 = mergedData.address) === null || _mergedData$address9 === void 0 ? void 0 : _mergedData$address9.longitude) || 77.2090
+          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: {
@@ -5632,12 +5582,19 @@ const AddVendor = ({
       var _mergedData$zoneIds, _mergedData$clusterId;
       vendorData = {
         ...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.code)) || [],
-        clusterIds: (mergedData === null || mergedData === void 0 ? void 0 : (_mergedData$clusterId = mergedData.clusterIds) === null || _mergedData$clusterId === void 0 ? void 0 : _mergedData$clusterId.map(c => c.code)) || [],
+        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$ = z[1]) === null || _z$ === void 0 ? void 0 : _z$.code;
+        })) || [],
+        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
       };
     }
+    console.log(vendorData);
     const payload = {
       vendor: vendorData
     };
@@ -5689,19 +5646,14 @@ const AddVendor = ({
       overflowY: "auto"
     }
   }, /*#__PURE__*/React.createElement(FormComposer, {
+    config: Config,
+    userType: "employee",
+    onFormValueChange: onFormValueChange,
     label: t("ES_COMMON_APPLICATION_SUBMIT"),
-    config: Config.filter(i => !i.hideInEmployee).map(config => ({
-      ...config,
-      isCollapsible: true,
-      isDefaultOpen: true,
-      body: config.body.filter(a => !a.hideInEmployee)
-    })),
     onSubmit: onSubmit,
     defaultValues: defaultValues,
-    onFormValueChange: onFormValueChange,
-    noBreakLine: true,
     noCard: true,
-    isDisabled: !canSubmit
+    noBreakLine: true
   }), showToast && /*#__PURE__*/React.createElement(Toast, {
     error: showToast.key === "error",
     label: t(showToast.key === "success" ? `ES_FSM_REGISTRY_${showToast.action}_SUCCESS` : showToast.action),
@@ -5710,8 +5662,8 @@ const AddVendor = ({
 };
 
 const {
-  Dropdown: Dropdown$1,
-  DatePicker: DatePicker$1
+  Dropdown,
+  DatePicker
 } = require("@djb25/digit-ui-react-components");
 const SupervisorConfig = (t, agencies = [], reportingManagers = [], disabled = false) => {
   return [{
@@ -5763,18 +5715,6 @@ const SupervisorConfig = (t, agencies = [], reportingManagers = [], disabled = f
         defaultValue: "",
         className: "payment-form-text-input-correction"
       }
-    }, {
-      label: t("ES_VENDOR_SUPERVISOR_EMPLOYEE_ID"),
-      isMandatory: true,
-      type: "text",
-      populators: {
-        name: "employeeId",
-        validation: {
-          required: true
-        },
-        defaultValue: "",
-        className: "payment-form-text-input-correction"
-      }
     }, {
       label: t("ES_VENDOR_SUPERVISOR_GENDER"),
       isMandatory: true,
@@ -5822,7 +5762,7 @@ const SupervisorConfig = (t, agencies = [], reportingManagers = [], disabled = f
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$1, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -5899,7 +5839,6 @@ const AddSupervisor = ({
   } = useLocation();
   const queryParams = new URLSearchParams(search);
   const vendorIdParam = queryParams.get("vendorId");
-  const vendorId = vendorIdParam || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.uuid);
   const Config = SupervisorConfig(t);
   const defaultValues = {
     role: {
@@ -5943,7 +5882,6 @@ const AddSupervisor = ({
       },
       supervisor: {
         tenantId: tenantId,
-        vendorId: vendorId,
         assignedZoneId: (data === null || data === void 0 ? void 0 : (_data$assignedZone = data.assignedZone) === null || _data$assignedZone === void 0 ? void 0 : _data$assignedZone.code) || (data === null || data === void 0 ? void 0 : data.assignedZone) || null,
         description: (data === null || data === void 0 ? void 0 : data.description) || "",
         owner: {
@@ -6313,7 +6251,7 @@ const SupervisorDetails = props => {
       });
     }
     if (selectedAction === "ADD_VENDOR" || 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$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -6657,8 +6595,8 @@ const EditSupervisor = () => {
 };
 
 const {
-  Dropdown: Dropdown$2,
-  DatePicker: DatePicker$2
+  Dropdown: Dropdown$1,
+  DatePicker: DatePicker$1
 } = require("@djb25/digit-ui-react-components");
 const SurveyorConfig = (t, agencies = [], reportingManagers = [], disabled = false) => {
   return [{
@@ -6699,16 +6637,6 @@ const SurveyorConfig = (t, agencies = [], reportingManagers = [], disabled = fal
         },
         error: t("ES_VENDOR_INVALID_EMAIL")
       }
-    }, {
-      label: "ES_VENDOR_SURVEYOR_STAFF_CODE",
-      isMandatory: true,
-      type: "text",
-      populators: {
-        name: "employeeId",
-        validation: {
-          required: true
-        }
-      }
     }, {
       label: t("ES_VENDOR_SURVEYOR_GENDER"),
       isMandatory: true,
@@ -6756,7 +6684,7 @@ const SurveyorConfig = (t, agencies = [], reportingManagers = [], disabled = fal
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$2, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$1, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -6825,7 +6753,7 @@ const AddSurveyor = ({
     setShowToast(null);
   };
   const onSubmit = data => {
-    var _userInfo$roles, _Digit$UserService$ge2, _data$agencyName, _data$agencyName2, _data$reportingManage, _data$reportingManage2, _data$relationship, _data$gender;
+    var _userInfo$roles, _Digit$UserService$ge2, _data$relationship, _data$gender;
     const isSupervisor = userInfo === null || userInfo === void 0 ? void 0 : (_userInfo$roles = userInfo.roles) === null || _userInfo$roles === void 0 ? void 0 : _userInfo$roles.some(role => role.code === "EKYC_SUPERVISOR");
     const formData = {
       RequestInfo: {
@@ -6849,8 +6777,6 @@ const AddSurveyor = ({
       },
       surveyor: {
         tenantId: tenantId,
-        vendorId: vendorIdParam || (data === null || data === void 0 ? void 0 : (_data$agencyName = data.agencyName) === null || _data$agencyName === void 0 ? void 0 : _data$agencyName.code) || (data === null || data === void 0 ? void 0 : (_data$agencyName2 = data.agencyName) === null || _data$agencyName2 === void 0 ? void 0 : _data$agencyName2.id) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.uuid),
-        supervisorId: (data === null || data === void 0 ? void 0 : (_data$reportingManage = data.reportingManager) === null || _data$reportingManage === void 0 ? void 0 : _data$reportingManage.code) || (data === null || data === void 0 ? void 0 : (_data$reportingManage2 = data.reportingManager) === null || _data$reportingManage2 === void 0 ? void 0 : _data$reportingManage2.id) || null,
         description: (data === null || data === void 0 ? void 0 : data.description) || "",
         additionalDetails: {
           serviceType: "ekyc"
@@ -7218,7 +7144,7 @@ const SurveyorDetails = props => {
       });
     }
     if (selectedAction === "ADD_VENDOR" || 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$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -7947,7 +7873,7 @@ const VENDORCreate = ({
 };
 
 const {
-  DatePicker: DatePicker$3
+  DatePicker: DatePicker$2
 } = require("@djb25/digit-ui-react-components");
 const DriverConfig = (t, disabled = false) => {
   return [{
@@ -8041,7 +7967,7 @@ const DriverConfig = (t, disabled = false) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$2, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps, {
@@ -8566,7 +8492,7 @@ const DriverDetails = () => {
       });
     }
     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$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -8576,7 +8502,7 @@ const DriverDetails = () => {
       }));
     }
     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$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -8690,7 +8616,7 @@ const DriverDetails = () => {
 };
 
 const {
-  DatePicker: DatePicker$4
+  DatePicker: DatePicker$3
 } = require("@djb25/digit-ui-react-components");
 const VehicleConfig = (t, disabled = false) => {
   return [{
@@ -8746,7 +8672,7 @@ const VehicleConfig = (t, disabled = false) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -8761,7 +8687,7 @@ const VehicleConfig = (t, disabled = false) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -8776,7 +8702,7 @@ const VehicleConfig = (t, disabled = false) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -8791,7 +8717,7 @@ const VehicleConfig = (t, disabled = false) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps))
@@ -8846,7 +8772,7 @@ const VehicleConfig = (t, disabled = false) => {
         validation: {
           required: true
         },
-        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$3, Object.assign({
           onChange: props.onChange,
           date: props.value
         }, customProps, {
@@ -9431,7 +9357,7 @@ const VehicleDetails = props => {
       });
     }
     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$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -9441,7 +9367,7 @@ const VehicleDetails = props => {
       }));
     }
     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$3, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardText, null, t(`ES_FSM_REGISTRY_SELECT_VENODOR`)), /*#__PURE__*/React.createElement(Dropdown$2, {
         t: t,
         option: vendors,
         value: selectedOption,
@@ -9592,8 +9518,8 @@ const SelectEkycZones = ({
     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) && boundaries.length > 0) {
-      const zonesList = boundaries.map(b => ({
+    if (Array.isArray(boundaries === null || boundaries === void 0 ? void 0 : boundaries.children) && (boundaries === null || boundaries === void 0 ? void 0 : boundaries.children.length) > 0) {
+      const zonesList = boundaries === null || boundaries === void 0 ? void 0 : boundaries.children.map(b => ({
         code: b.code,
         name: b.name
       }));
@@ -9618,18 +9544,26 @@ const SelectEkycZones = ({
     }
   }, [boundaryData, isLoading]);
   const handleSelect = value => {
-    setSelectedZones(value);
-    onSelect(config.key, value);
+    const extractedValue = Array.isArray(value) ? value.map(v => Array.isArray(v) ? v[1] : v).filter(Boolean) : value;
+    setSelectedZones(extractedValue);
+    onSelect(config.key, extractedValue);
   };
   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"
+    className: "field",
+    style: {
+      position: "relative",
+      zIndex: 10
+    }
   }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
     options: zones,
     selected: selectedZones,
     onSelect: handleSelect,
     optionsKey: "name",
-    t: t
+    t: t,
+    ServerStyle: {
+      backgroundColor: "#fff"
+    }
   })));
 };
 
@@ -9642,7 +9576,7 @@ const SelectEkycClusters = ({
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const [clusters, setClusters] = useState([]);
   const [selectedClusters, setSelectedClusters] = useState(Array.isArray(formData === null || formData === void 0 ? void 0 : formData.clusterIds) ? formData.clusterIds : []);
-  const selectedZones = Array.isArray(formData === null || formData === void 0 ? void 0 : formData.zoneIds) ? formData.zoneIds : [];
+  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 {
     data: boundaryData
   } = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]);
@@ -9712,20 +9646,33 @@ const SelectEkycClusters = ({
         }];
       }
     }
+    if (allClusters.length > 0) {
+      allClusters = Array.from(new Map(allClusters.map(item => [item.code, item])).values());
+    }
     setClusters(allClusters);
   }, [selectedZones, boundaryData]);
   const handleSelect = value => {
-    setSelectedClusters(value);
-    onSelect(config.key, 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"
+    className: "field",
+    style: {
+      position: "relative",
+      zIndex: 9
+    }
   }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
     options: clusters,
     selected: selectedClusters,
     onSelect: handleSelect,
     optionsKey: "name",
-    t: t
+    t: t,
+    ServerStyle: {
+      backgroundColor: "#fff"
+    },
+    disable: isDisabled
   })));
 };
 
@@ -9744,7 +9691,7 @@ const SelectEkycDropdown = ({
   };
   return /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, null, t(config.label)), /*#__PURE__*/React.createElement("div", {
     className: "field"
-  }, /*#__PURE__*/React.createElement(Dropdown$3, {
+  }, /*#__PURE__*/React.createElement(Dropdown$2, {
     selected: selected,
     option: options,
     select: handleSelect,