@djb25/digit-ui-module-vendor 1.0.64 → 1.0.65

package/dist/index.modern.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useCallback, useReducer, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useEffect, useCallback, useReducer, 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, UploadFile, RadioOrSelect, MultiSelectDropdown, CitizenHomeCard, CardHeader, CardSubHeader, StatusTable, LinkButton, Banner, InfoIcon, CustomTooltip } from '@djb25/digit-ui-react-components';
+import { Loader, VerticalTimeline, FormComposer, Toast, Card, ShippingTruck, Table, CheckBox, 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';
 
@@ -123,6 +123,22 @@ const SurveyorConfig = function (t, agencies, reportingManagers, disabled) {
         },
         className: "payment-form-text-input-correction"
       }
+    }, {
+      label: t("ES_VENDOR_ZONE"),
+      isMandatory: true,
+      type: "component",
+      key: "zoneIds",
+      populators: {
+        name: "zoneIds",
+        validation: {
+          required: true
+        },
+        className: "mb-16"
+      },
+      props: {
+        isMultiSelect: false
+      },
+      component: "SelectEkycZones"
     }, {
       label: t("ES_VENDOR_SURVEYOR_DESCRIPTION"),
       isMandatory: false,
@@ -136,7 +152,7 @@ const SurveyorConfig = function (t, agencies, reportingManagers, disabled) {
 };
 
 const AddSurveyor = _ref => {
-  var _Digit$UserService$ge;
+  var _Digit$UserService$ge, _userInfo$roles;
   const _useTranslation = useTranslation(),
     t = _useTranslation.t;
   const history = useHistory();
@@ -153,14 +169,63 @@ const AddSurveyor = _ref => {
     setCanSubmit = _useState2[1];
   const _Digit$Hooks$fsm$useS = Digit.Hooks.fsm.useSurveyorCreate(tenantId),
     mutateAsync = _Digit$Hooks$fsm$useS.mutateAsync;
-  const Config = SurveyorConfig(t);
-  const defaultValues = {
-    role: {
-      code: "SURVEYOR",
-      name: "Surveyor"
-    },
-    mobileNumber: ""
-  };
+  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 _Digit$Hooks$fsm$useS2 = Digit.Hooks.fsm.useSupervisorSearch(tenantId, {
+      status: "ACTIVE"
+    }, {
+      enabled: isSupervisor,
+      staleTime: Infinity
+    }),
+    supervisorSearchResponse = _Digit$Hooks$fsm$useS2.data,
+    isSupervisorSearchLoading = _Digit$Hooks$fsm$useS2.isLoading;
+  const matchedSupervisor = useMemo(() => {
+    if (!(supervisorSearchResponse !== null && supervisorSearchResponse !== void 0 && supervisorSearchResponse.supervisors)) return null;
+    return supervisorSearchResponse.supervisors.find(s => {
+      var _s$id, _userInfo$uuid, _s$owner, _s$owner$uuid, _userInfo$uuid2, _s$owner2;
+      return ((_s$id = s.id) === null || _s$id === void 0 ? void 0 : _s$id.toLowerCase()) === (userInfo === null || userInfo === void 0 ? void 0 : (_userInfo$uuid = userInfo.uuid) === null || _userInfo$uuid === void 0 ? void 0 : _userInfo$uuid.toLowerCase()) || ((_s$owner = s.owner) === null || _s$owner === void 0 ? void 0 : (_s$owner$uuid = _s$owner.uuid) === null || _s$owner$uuid === void 0 ? void 0 : _s$owner$uuid.toLowerCase()) === (userInfo === null || userInfo === void 0 ? void 0 : (_userInfo$uuid2 = userInfo.uuid) === null || _userInfo$uuid2 === void 0 ? void 0 : _userInfo$uuid2.toLowerCase()) || ((_s$owner2 = s.owner) === null || _s$owner2 === void 0 ? void 0 : _s$owner2.mobileNumber) === (userInfo === null || userInfo === void 0 ? void 0 : userInfo.mobileNumber) || s.mobileNo === (userInfo === null || userInfo === void 0 ? void 0 : userInfo.mobileNumber);
+    });
+  }, [supervisorSearchResponse, userInfo]);
+  const _useState3 = useState(null),
+    defaultValues = _useState3[0],
+    setDefaultValues = _useState3[1];
+  useEffect(() => {
+    if (!isSupervisor) {
+      setDefaultValues({
+        role: {
+          code: "SURVEYOR",
+          name: "Surveyor"
+        },
+        mobileNumber: ""
+      });
+    } else if (supervisorSearchResponse && !isSupervisorSearchLoading) {
+      setDefaultValues({
+        role: {
+          code: "SURVEYOR",
+          name: "Surveyor"
+        },
+        mobileNumber: "",
+        zoneIds: (matchedSupervisor === null || matchedSupervisor === void 0 ? void 0 : matchedSupervisor.assignedZoneId) || ""
+      });
+    }
+  }, [isSupervisor, supervisorSearchResponse, isSupervisorSearchLoading, matchedSupervisor]);
+  const Config = useMemo(() => {
+    const baseConfig = SurveyorConfig(t);
+    if (isSupervisor) {
+      return baseConfig.map(section => _extends({}, section, {
+        body: section.body.map(field => {
+          if (field.key === "zoneIds") {
+            return _extends({}, field, {
+              props: _extends({}, field.props, {
+                disable: true
+              })
+            });
+          }
+          return field;
+        })
+      }));
+    }
+    return baseConfig;
+  }, [t, isSupervisor]);
   const isValidAge = dateStr => {
     if (!dateStr) return false;
     const today = new Date();
@@ -185,8 +250,8 @@ const AddSurveyor = _ref => {
   };
   const onSubmit = function (data) {
     try {
-      var _userInfo$roles, _Digit$UserService$ge2, _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");
+      var _data$zoneIds, _Digit$UserService$ge2, _data$gender;
+      const assignedZone = Array.isArray(data === null || data === void 0 ? void 0 : data.zoneIds) ? (data === null || data === void 0 ? void 0 : (_data$zoneIds = data.zoneIds) === null || _data$zoneIds === void 0 ? void 0 : _data$zoneIds.map(ele => ele.code).join(",")) || "" : (data === null || data === void 0 ? void 0 : data.zoneIds) || "";
       const formData = {
         RequestInfo: _extends({
           apiId: "Rainmaker",
@@ -208,6 +273,9 @@ const AddSurveyor = _ref => {
         }),
         surveyor: {
           tenantId: tenantId,
+          vendorId: isSupervisor ? matchedSupervisor === null || matchedSupervisor === void 0 ? void 0 : matchedSupervisor.vendorId : undefined,
+          supervisorId: isSupervisor ? matchedSupervisor === null || matchedSupervisor === void 0 ? void 0 : matchedSupervisor.id : undefined,
+          assignedZoneId: assignedZone,
           description: (data === null || data === void 0 ? void 0 : data.description) || "",
           correspondenceAddress: data === null || data === void 0 ? void 0 : data.correspondenceAddress,
           additionalDetails: {
@@ -250,6 +318,9 @@ const AddSurveyor = _ref => {
       return Promise.reject(e);
     }
   };
+  if (isSupervisor && (isSupervisorSearchLoading || !defaultValues)) {
+    return /*#__PURE__*/React.createElement(Loader, null);
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VerticalTimeline, {
     config: [{
       route: "surveyor-details",
@@ -1017,7 +1088,7 @@ const VendorInbox = props => {
   const userInfo = Digit.SessionStorage.get("User");
   const userRoles = userInfo.info.roles;
   const userType = (_userInfo$info$type = userInfo.info.type) === null || _userInfo$info$type === void 0 ? void 0 : _userInfo$info$type.toLowerCase();
-  const EKYC_ROLES = ["EKYC_VENDOR", "EKYC_SUPERVISOR", "EKYC_SURVEYOR"];
+  const EKYC_ROLES = ["EKYC_SUPERVISOR", "EKYC_SURVEYOR"];
   const isEkycRole = userRoles === null || userRoles === void 0 ? void 0 : userRoles.some(role => EKYC_ROLES.includes((role === null || role === void 0 ? void 0 : role.code) || role));
   const openWorkOrderModal = vendorDetails => {
     setSelectedVendorForWorkOrder(vendorDetails);
@@ -1342,9 +1413,11 @@ const VendorInbox = props => {
         });
       },
       onSuccess: (data, variables) => {
+        console.log("newStatus:", newStatus, "isDisable:", newStatus === "DISABLED");
         setShowToast({
           key: "success",
-          action: "SUPERVISOR"
+          action: "SUPERVISOR",
+          isDisable: newStatus === "DISABLED"
         });
         queryClient.invalidateQueries("FSM_SUPERVISOR_SEARCH");
         queryClient.invalidateQueries("SUPERVISOR_SEARCH");
@@ -1378,9 +1451,11 @@ const VendorInbox = props => {
         });
       },
       onSuccess: (data, variables) => {
+        console.log("newStatus:", newStatus, "isDisable:", newStatus === "DISABLED");
         setShowToast({
           key: "success",
-          action: "SURVEYOR"
+          action: "SURVEYOR",
+          isDisable: newStatus === "DISABLED"
         });
         queryClient.invalidateQueries("FSM_SURVEYOR_SEARCH");
         queryClient.invalidateQueries("SURVEYOR_SEARCH");
@@ -4639,7 +4714,8 @@ const VendorConfig = function (t, module, genderMenu, update) {
       isMandatory: true,
       type: "component",
       key: "zoneIds",
-      component: "SelectEkycZones"
+      component: "SelectEkycZones",
+      disable: update
     }, {
       label: "ES_FSM_REGISTRY_NEW_OWNER_NAME",
       isMandatory: true,
@@ -4672,13 +4748,26 @@ const VendorConfig = function (t, module, genderMenu, update) {
       populators: {
         name: "dob",
         validation: {
-          required: true
+          required: true,
+          validate: value => {
+            if (!value) return true;
+            const dob = new Date(value);
+            const today = new Date();
+            let age = today.getFullYear() - dob.getFullYear();
+            const m = today.getMonth() - dob.getMonth();
+            if (m < 0 || m === 0 && today.getDate() < dob.getDate()) {
+              age--;
+            }
+            return age >= 18 || t("ES_VENDOR_DOB_MIN_AGE_ERROR") || "Vendor must be 18 years or older";
+          }
         },
         component: (props, customProps) => /*#__PURE__*/React.createElement(DatePicker$4, _extends({
           onChange: props.onChange,
           date: props.value
         }, customProps, {
-          max: convertEpochToDate(new Date().setFullYear(new Date().getFullYear()))
+          isDOB: true,
+          minAge: 18,
+          max: convertEpochToDate(new Date().setFullYear(new Date().getFullYear() - 18))
         }))
       }
     }] : [])]
@@ -5685,12 +5774,19 @@ const VENDORCreate = _ref => {
   React.useEffect(() => {
     const searchParams = new URLSearchParams(search || window.location.search);
     const vendorId = searchParams.get("vendorId");
-    if (vendorId && params.vendor_id !== vendorId) {
-      setParams(_extends({}, params, {
-        vendor_id: vendorId
-      }));
+    if (vendorId) {
+      if (params.vendor_id !== vendorId) {
+        setParams(_extends({}, params, {
+          vendor_id: vendorId
+        }));
+      }
+    } else {
+      if (params && Object.keys(params).length > 0 && window.location.href.includes("/info") && sessionStorage.getItem("docReqScreenByBack") !== "true") {
+        clearParams();
+        queryClient.invalidateQueries("VENDOR_CREATE");
+      }
     }
-  }, [search, window.location.search, params, setParams]);
+  }, [search, pathname, params, setParams, clearParams, queryClient]);
   const goNext = (skipStep, index, isAddMultiple, key) => {
     let currentPath = pathname.split("/").pop(),
       lastchar = currentPath.charAt(currentPath.length - 1),
@@ -5732,10 +5828,6 @@ const VENDORCreate = _ref => {
     }
     redirectWithHistory(nextPage);
   };
-  if (params && Object.keys(params).length > 0 && window.location.href.includes("/info") && sessionStorage.getItem("docReqScreenByBack") !== "true") {
-    clearParams();
-    queryClient.invalidateQueries("VENDOR_CREATE");
-  }
   const vendorcreate = function () {
     try {
       history.push(match.path + "/acknowledgement");
@@ -9460,13 +9552,15 @@ const VehicleDetails = props => {
 };
 
 const SelectEkycZones = _ref => {
-  var _Digit$SessionStorage, _loggedInUser$roles;
+  var _Digit$SessionStorage, _loggedInUser$roles, _config$props;
   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;
+    isMultiSelect = _ref$isMultiSelect === void 0 ? true : _ref$isMultiSelect,
+    _ref$disable = _ref.disable,
+    disable = _ref$disable === void 0 ? false : _ref$disable;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const _useState = useState([]),
     zones = _useState[0],
@@ -9475,16 +9569,25 @@ const SelectEkycZones = _ref => {
     selectedZones = _useState2[0],
     setSelectedZones = _useState2[1];
   const initialized = useRef(false);
+  const isVendorPage = window.location.pathname.includes("/new-vendor") || window.location.pathname.includes("/modify-vendor") || window.location.href.includes("/new-vendor") || window.location.href.includes("/modify-vendor");
   const loggedInUser = (_Digit$SessionStorage = Digit.SessionStorage.get("User")) === null || _Digit$SessionStorage === void 0 ? void 0 : _Digit$SessionStorage.info;
   const roles = (loggedInUser === null || loggedInUser === void 0 ? void 0 : (_loggedInUser$roles = loggedInUser.roles) === null || _loggedInUser$roles === void 0 ? void 0 : _loggedInUser$roles.map(r => r.code)) || [];
   const isEkycVendor = roles.includes("EKYC_VENDOR");
+  const isEkycSupervisor = roles.includes("EKYC_SUPERVISOR");
   const _Digit$Hooks$fsm$useD = Digit.Hooks.fsm.useDsoSearch(tenantId, {
       status: "ACTIVE"
     }, {
-      enabled: isEkycVendor
+      enabled: isEkycVendor && !isVendorPage
     }),
     vendorSearchResponse = _Digit$Hooks$fsm$useD.data,
     isVendorSearchLoading = _Digit$Hooks$fsm$useD.isLoading;
+  const _Digit$Hooks$fsm$useS = Digit.Hooks.fsm.useSupervisorSearch(tenantId, {
+      status: "ACTIVE"
+    }, {
+      enabled: isEkycSupervisor
+    }),
+    supervisorSearchResponse = _Digit$Hooks$fsm$useS.data,
+    isSupervisorSearchLoading = _Digit$Hooks$fsm$useS.isLoading;
   const matchedVendor = React.useMemo(() => {
     var _vendorSearchResponse, _vendorSearchResponse2;
     if (!vendorSearchResponse) return null;
@@ -9498,6 +9601,13 @@ const SelectEkycZones = _ref => {
       return userUuid && ownerUuid === userUuid || userMobile && ownerMobile === userMobile;
     })) === null || _vendorSearchResponse === void 0 ? void 0 : _vendorSearchResponse.dsoDetails) || ((_vendorSearchResponse2 = vendorSearchResponse[0]) === null || _vendorSearchResponse2 === void 0 ? void 0 : _vendorSearchResponse2.dsoDetails) || vendorSearchResponse[0];
   }, [vendorSearchResponse, loggedInUser]);
+  const matchedSupervisor = React.useMemo(() => {
+    if (!(supervisorSearchResponse !== null && supervisorSearchResponse !== void 0 && supervisorSearchResponse.supervisors)) return null;
+    return supervisorSearchResponse.supervisors.find(s => {
+      var _s$id, _loggedInUser$uuid, _s$owner, _s$owner$uuid, _loggedInUser$uuid2, _s$owner2;
+      return ((_s$id = s.id) === null || _s$id === void 0 ? void 0 : _s$id.toLowerCase()) === (loggedInUser === null || loggedInUser === void 0 ? void 0 : (_loggedInUser$uuid = loggedInUser.uuid) === null || _loggedInUser$uuid === void 0 ? void 0 : _loggedInUser$uuid.toLowerCase()) || ((_s$owner = s.owner) === null || _s$owner === void 0 ? void 0 : (_s$owner$uuid = _s$owner.uuid) === null || _s$owner$uuid === void 0 ? void 0 : _s$owner$uuid.toLowerCase()) === (loggedInUser === null || loggedInUser === void 0 ? void 0 : (_loggedInUser$uuid2 = loggedInUser.uuid) === null || _loggedInUser$uuid2 === void 0 ? void 0 : _loggedInUser$uuid2.toLowerCase()) || ((_s$owner2 = s.owner) === null || _s$owner2 === void 0 ? void 0 : _s$owner2.mobileNumber) === (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.mobileNumber) || s.mobileNo === (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.mobileNumber);
+    });
+  }, [supervisorSearchResponse, loggedInUser]);
   const _Digit$Hooks$useCommo = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]),
     boundaryData = _Digit$Hooks$useCommo.data,
     isLoading = _Digit$Hooks$useCommo.isLoading;
@@ -9511,22 +9621,18 @@ const SelectEkycZones = _ref => {
         name: zone.name
       })));
       let zonesList = [...new Map(allZones.map(z => [z.code, z])).values()];
-      if (isEkycVendor && matchedVendor !== null && matchedVendor !== void 0 && matchedVendor.zoneIds) {
-        const assignedZoneCodes = matchedVendor.zoneIds.map(z => String(z).toUpperCase());
-        zonesList = zonesList.filter(z => assignedZoneCodes.includes(String(z.code).toUpperCase()) || assignedZoneCodes.includes(String(z.name).toUpperCase()));
-      }
       setZones(zonesList);
     }
-  }, [boundaryData, isEkycVendor, matchedVendor]);
+  }, [boundaryData, isEkycVendor, matchedVendor, isEkycSupervisor, matchedSupervisor, isVendorPage]);
   useEffect(() => {
     if (!zones.length || !(formData !== null && formData !== void 0 && formData.zoneIds)) return;
     if (isMultiSelect) {
       if (!Array.isArray(formData.zoneIds)) return;
-      if (formData.zoneIds.length && typeof formData.zoneIds[0] === "object") {
-        setSelectedZones(formData.zoneIds);
+      if (formData.zoneIds.length && typeof formData.zoneIds[0] === "object" && formData.zoneIds[0] !== null) {
+        setSelectedZones(formData.zoneIds.filter(Boolean));
         return;
       }
-      const selected = zones.filter(zone => formData.zoneIds.includes(zone.name) || formData.zoneIds.includes(zone.code));
+      const selected = zones.filter(zone => zone && (formData.zoneIds.includes(zone.name) || formData.zoneIds.includes(zone.code)));
       setSelectedZones(selected);
       if (!initialized.current) {
         initialized.current = true;
@@ -9538,10 +9644,10 @@ const SelectEkycZones = _ref => {
         var _selectedVal$, _selectedVal$2;
         selectedVal = ((_selectedVal$ = selectedVal[0]) === null || _selectedVal$ === void 0 ? void 0 : _selectedVal$.name) || ((_selectedVal$2 = selectedVal[0]) === null || _selectedVal$2 === void 0 ? void 0 : _selectedVal$2.code) || selectedVal[0] || "";
       }
-      if (typeof selectedVal === "object") {
+      if (selectedVal && typeof selectedVal === "object") {
         selectedVal = selectedVal.name || selectedVal.code || "";
       }
-      const selected = zones.find(zone => zone.name === selectedVal || zone.code === selectedVal);
+      const selected = zones.find(zone => zone && (zone.name === selectedVal || zone.code === selectedVal));
       setSelectedZones(selected ? [selected] : []);
       if (!initialized.current && selected) {
         initialized.current = true;
@@ -9549,6 +9655,13 @@ const SelectEkycZones = _ref => {
       }
     }
   }, [zones, formData === null || formData === void 0 ? void 0 : formData.zoneIds, config.key, onSelect, isMultiSelect]);
+  useEffect(() => {
+    if (isEkycSupervisor && zones.length > 0 && !(formData !== null && formData !== void 0 && formData.zoneIds) && !initialized.current) {
+      initialized.current = true;
+      setSelectedZones([zones[0]]);
+      onSelect(config.key, zones[0].name || "");
+    }
+  }, [isEkycSupervisor, 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) : [];
@@ -9560,7 +9673,7 @@ const SelectEkycZones = _ref => {
       onSelect(config.key, (selectedZone === null || selectedZone === void 0 ? void 0 : selectedZone.name) || "");
     }
   };
-  if (isLoading || isEkycVendor && isVendorSearchLoading) return /*#__PURE__*/React.createElement(Loader, null);
+  if (isLoading || isEkycVendor && !isVendorPage && isVendorSearchLoading || isEkycSupervisor && isSupervisorSearchLoading) 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("span", {
     className: "check-page-link-button"
   }, " * ") : ""), /*#__PURE__*/React.createElement("div", {
@@ -9581,10 +9694,11 @@ const SelectEkycZones = _ref => {
     ServerStyle: {
       backgroundColor: "#fff"
     },
-    defaultLabel: isMultiSelect ? selectedZones.length + " Selected" : ""
+    defaultLabel: isMultiSelect ? selectedZones.length + " Selected" : "",
+    disable: disable || isEkycSupervisor || ((_config$props = config.props) === null || _config$props === void 0 ? void 0 : _config$props.disable) || config.disable
   })), isMultiSelect && selectedZones.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: "selected-zones"
-  }, selectedZones.map(zone => /*#__PURE__*/React.createElement("span", {
+  }, selectedZones.filter(zone => zone && zone.code).map(zone => /*#__PURE__*/React.createElement("span", {
     key: zone.code,
     className: "selected-zone-chip"
   }, zone.name))));