Notes

import React, { useState, useEffect } from "react";
import "./ActiveReportUserMap.css";
import ReactMultiSelect from "../commonComponents/multiSelectComponent";
import {
getActivatedReportMap,
getActiveReportStateFilter,
getActiveReportStateBasedZipCodeFilter,
getActiveReportZipCodeSearch,
getActiverUserMapTable,
getactivationMaxDate
} from "../services/request";
import { activeReportPopupColumns } from "../dashboards/ActiveReportPopupColums";
import SingleSelectComponent from "../commonComponents/SingleSelectComponent";
import MapTableComponent from "../MapKTComponents/MapTableComponent";
import moment from "moment";
import Button from "@mui/material/Button";
import CustomSearchMultiselect from "../commonComponents/CustomSearchMultiselect";
import Alertmodal from "../commonComponents/Alert";
import Loader from "../commonComponents/Loader";
import DeviceModelAlert from "./DeviceModelAlertComponent";
import { useLocation } from "react-router-dom";
import MapComponent from "../MapKTComponents/MapComponent";
import { dateChecker } from "../utils/UtilFunctions";
import CalldropTickerPopup from "./CallDropsComponent/CalldropTicketPopup";
import { PdfTopFilter } from "../commonComponents/PdfTopFilter";

const columns = ["Date", "State", "Users Count"];
const ActiveReportUserMap = (props) => {
let location = useLocation();
const parameters = new URLSearchParams(location.search);
const pdfDefaultFlow = parameters.get("isDefault")
? parameters.get("isDefault")
: "";
const dateParams = parameters.get("subscription_date")
? parameters.get("subscription_date")
: "";
let topfiltersParams = parameters.get("topfilters")
? parameters.get("topfilters")
: "";
let stateParams = parameters.get("state") ? parameters.get("state") : "";
let zipcodeParams = parameters.get("zip_code")
? parameters.get("zip_code")
: "";
const monthParam = parameters.get("month") ? parameters.get("month") : "";
const dayParam = parameters.get("day") ? parameters.get("day") : "";

const urlParam = parameters.get("open") ? parameters.get("open") : "";

const [stateList, setStateList] = useState([]);
const [selectedStateList, setSelectedStateList] = useState([]);
const [tableData, setTableData] = useState(null);
const [zipCodeList, setZipCodeList] = useState([]);
const [selectedZipCode, setSelectedZipCode] = useState([]);
const [zipCodeAll, setZipCodeAll] = useState(true);
const [zipCount, setZipCount] = useState(0);

const [mapData, setMapData] = useState(null);
const [data, setData] = useState([]);

const [modelData, setModelData] = useState([]);
const [mapTableData, setMapTableData] = useState(null);

const [noDataExist, setNoDataExists] = useState(false);

const [show, setShow] = useState(false);
const [alertMessage, setAlertMessage] = useState("");
const [loading, setLoading] = useState(false);
const [show1, setShow1] = useState(false);
const [isGoActive, setGoActive] = useState(false);
const [stateShow, setStateShow] = useState(false);
const [zipCodeSearch, setZipCodeSearch] = useState("");
const [allSelectedZip, setAllSelectedZip] = useState([
{ label: "Select all Zip Codes", value: "All" },
]);
const [topFilterValue, setTopFilterValue] = useState({
value: 5,
label: "Top 5 States",
});

const [load, setLoad] = useState({
default: false,
});

const [isDialogOpen, setIsDialogOpen] = useState(false);
const [type, setType] = useState("");
const [msg, setMsg] = useState("");
const [popupSelected, setPopupSelected] = useState([]);

const [zipStatus,setZipStatus] = useState(false);

const optionsStates = [
{ value: 5, label: "Top 5 States" },
{ value: 10, label: "Top 10 States" },
{ value: 15, label: "Top 15 States" },
];
const PDF_SUB_ID = parameters.get("PDF_SUB_ID")
? parameters.get("PDF_SUB_ID")
: "";
const SUB_ID = parameters.get("SUB_ID")
? parameters.get("SUB_ID")
: "";
const topFilterHadler = (selectedValue) => {
loadTableData(mapTableData, false, selectedValue["value"]);
setTopFilterValue(selectedValue);
props.setPdfMapTopValue(selectedValue.value);
let tempObj = {
isDefault: false,
date:
props.date && props.date["date"]
? moment(props.date["date"]).format("YYYY-MM-DD")
: "",
State:
selectedStateList && selectedStateList.length > 0
? valueProvider(selectedStateList)
: ["All"],
stateList: stateList,
"Zip Code": zipCodeAll ? ["All"] : valueProvider(selectedZipCode),
selectedValue: selectedValue.value,
};
// props.generateXL({
// // screenId: props.screenID_subscription
// screenName: props.screenName,
// ...tempObj,
// });
props.setExcelParams({
// screenId: props.screenID_subscription
screenName: props.screenName,
...tempObj,
});
};
const clickHandler = () => {
if (popupSelected && popupSelected.length > 0) {
setIsDialogOpen(false);
if (type === "State") {
setSelectedStateList(popupSelected);
}
if (type === "Zip Code") {
setSelectedZipCode(popupSelected);
}
}
};
const popupHanlder = (selectedValue) => {
setPopupSelected(selectedValue);
};
const stateChangeHandler = (selectedOptions, flag = true) => {
if (selectedOptions.length === 0) {
setIsDialogOpen(true);
setMsg("Select at least One State");
setType("State");
setPopupSelected([]);
} else {
setSelectedStateList(selectedOptions);
}
setGoActive(true);
setSelectedZipCode([{ label: "Select all Zip Codes", value: "All" }]);
setAllSelectedZip([{ label: "Select all Zip Codes", value: "All" }]);
setStateShow(true);
setZipCodeAll(true);
// setZipCodeList([])
// setSelectedZipCode([])
};
const updateFilterValues = (
stateParam,
zipcodeParam,
stateTopValue,
zipCodeTopValue
) => {
let zipCodeList = [];
let stateList = [];
if (Number(stateTopValue) > 0) {
if (stateParam === "All") {
setSelectedStateList([{ label: "Select All", value: "Select All" }]);
setStateList([{ label: "Select All", value: "Select All" }]);
} else {
stateParam.split(",").map((val) => {
stateList.push({ label: val, value: val });
});
setSelectedStateList(stateList);
}
} else if (stateTopValue === "null") {
setSelectedStateList([{ label: "Select All", value: "Select All" }]);
setStateList([{ label: "Select All", value: "Select All" }]);
} else {
if (stateParam === "All") {
setSelectedStateList([{ label: "Select All", value: "Select All" }]);
setStateList([{ label: "Select All", value: "Select All" }]);
}else{
setSelectedStateList([]);
}

}

if (Number(zipCodeTopValue) > 0) {
if (zipcodeParam === "All") {
setSelectedZipCode([{ label: "All", value: "All" }]);
} else {
zipcodeParam.split(",").map((val) => {
zipCodeList.push({ label: val, value: val });
});
setAllSelectedZip([]);
setSelectedZipCode(zipCodeList);
}
} else if (zipCodeTopValue === "null") {
setSelectedZipCode([{ label: "All", value: "All" }]);
} else {
if (zipcodeParam === "All") {
setSelectedZipCode([{ label: "All", value: "All" }]);
} else {
setSelectedZipCode([]);
}
}
};
const newZipChangeHandler = (selectedValue) => {
if (selectedValue.length === zipCount) {
setZipCodeAll(true);
} else {
if (zipCodeAll) {
setZipCodeAll(false);
}
setGoActive(true);
}
if (selectedValue.length === 0) {
setIsDialogOpen(true);
setMsg("Select at least One Zip Code");
setType("Zip Code");
setPopupSelected([]);
} else {
let selectedAll = selectedValue.filter((el) => el.value === "All");
let previousSelectedAll = selectedZipCode.filter(
(el) => el.value === "All"
);
if (selectedValue.length > 0 && selectedAll.length > 0) {
if (previousSelectedAll.length === 0 && selectedAll.length > 0) {
setSelectedZipCode(allSelectedZip);
setZipCodeAll(true);
} else if (
selectedValue.length < selectedZipCode.length &&
previousSelectedAll.length > 0
) {
setSelectedZipCode(selectedValue.filter((el) => el.value !== "All"));
} else {
setSelectedZipCode(allSelectedZip);
setZipCodeAll(true);
}
} else if (selectedAll.length === 0 && previousSelectedAll.length > 0) {
setIsDialogOpen(true);
setMsg("Select at least One Zip Code");
setType("Zip Code");
setPopupSelected([]);
} else {
setSelectedZipCode(selectedValue);
}
}
};

let query = {
selectedFilters: {
State: [],
"Zip Code": [],
date: "",
},
};

const stateFilter = (req, urlSubscriptionFlow = false) => {
getActiveReportStateFilter(req).then((response) => {
if (response.data) {
setStateList(response.data);
setSelectedStateList(response.data);
if (!urlSubscriptionFlow) {
setSelectedStateList(response.data);
}
}
if(response.data && response.data.length>0){
setZipCodeList(allSelectedZip);
setSelectedZipCode(allSelectedZip);
setZipStatus(false)
}else{
setZipCodeList([]);
setSelectedZipCode([]);
setZipStatus(true)
}
});
};

const zipCodeFilter = (
query,
urlSubscriptionFlow = false,
selectedZipCode = []
) => {
setLoading(true);
getActiveReportStateBasedZipCodeFilter(query).then((response) => {
if (response.data) {
// setZipCodeList([])
if (response.data && response.data.length > 0) {
if (response.data.length === 50) {
setAllSelectedZip([
{ label: "Select all Zip Codes", value: "All" },
]);
setSelectedZipCode(
urlSubscriptionFlow
? selectedZipCode
: [{ label: "Select all Zip Codes", value: "All" }]
);
} else {
setAllSelectedZip([
{ label: "Select all Zip Codes", value: "All" },
...response.data,
]);
setSelectedZipCode(
urlSubscriptionFlow ? selectedZipCode : response.data
);
}
}
setZipCount(response.data.length);
setZipCodeAll(true);
}
setLoading(false);
});
};

// const outageMap = (query) => {
// setLoading(true);
// props.setLoading(true);
// setData([]);
// setMapData(null);
// getActivatedReportMap(query).then((resp) => {
// loadTableData(resp.data, true);
// if (resp.data && resp.data.length>0) {
// // let values = Object.values(resp.data.chartResponse);
// // setData(resp.data.stateMapResponse, resp.data.chartResponse);
// setMapTableData(resp.data, true);
// // loadTableData(resp.data, true);
// setMapData(resp.data);
// if (resp.data.length > 0) {
// setNoDataExists(false);
// } else {
// setMapData([]);
// setNoDataExists(true);
// }
// // setLoading(false)
// } else {
// setData([]);
// setMapData([]);
// // setLoading(false)
// }
// setLoading(false);
// props.setLoading(false);
// setGoActive(false);
// });
// };
const outageMap = (query) => {
setLoading(true);
props.setLoading(true);
setData([]);
setMapData(null);
getActivatedReportMap(query)
.then((resp) => {
loadTableData(resp.data, true);
if (resp.data && resp.data.length > 0) {
// let values = Object.values(resp.data.chartResponse);
// setData(resp.data.stateMapResponse, resp.data.chartResponse);
setMapTableData(resp.data, true);
// loadTableData(resp.data, true);
setMapData(resp.data);
if (resp.data.length > 0) {
setNoDataExists(false);
} else {
setMapData([]);
setNoDataExists(true);
}
// setLoading(false)
} else {
setData([]);
setMapData([]);
// setLoading(false)
}
setLoading(false);
props.setLoading(false);
setGoActive(false);
})
.catch((err) => {
console.log(err);
setData([]);
setMapData([]);
});
};

const getMapTableData = async (payload) => {
setLoading(true);
// setModelData([])
await getActiverUserMapTable(payload)
.then((res) => {
if (res["data"] && res["data"].length > 0) {
setShow1(true);
setLoading(false);
setModelData(res.data);
}
})
.catch((err) => {
console.log(err);
setModelData([]);
})
.finally(() => {
setLoading(false);
});
};
useEffect(async() => {
if (props.urlSubscriptionData) {
let {
date: dateParam,
state: stateParam,
zip_code: zipcodeParam,
topfilters: topfiltersParam,
day: dayParam,
month: monthParam,
} = props.urlSubscriptionData;
let mapTop, stateTopValue, zipCodeTopValue;

if (
(monthParam === "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam != "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam === "*" &&
(dayParam != "*" ||
dayParam != "MON-FRI" ||
dayParam != "Every Week"))
) {
let dateValue = await getactivationMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
let maxDate = dateList[0];
return maxDate
}
})
.catch((error) => {
console.log(error);
});
dateParam = dateValue;
// dateParam = moment(new Date()).format("YYYY-MM-DD");
// dateParam = dateChecker(dateParam,true)
} else {
dateParam = dateParam && dateParam != "Invalid date" ? dateParam : await getactivationMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
let maxDate = dateList[0];
return maxDate
}
})
.catch((error) => {
console.log(error);
});;
}
// if (stateParam && stateParam !== "All") {
// setStateShow(true);
// }
if (topfiltersParam) {
mapTop = topfiltersParam && topfiltersParam.MapTopValue
? topfiltersParam.MapTopValue
: 5;
}
setTopFilterValue([
{ label: `Top ${mapTop ? mapTop : 5} States`, value: mapTop },
]);
stateTopValue = topfiltersParam && topfiltersParam.statePdf
? topfiltersParam.statePdf
: "0";
zipCodeTopValue = topfiltersParam && topfiltersParam.zipCodePdf
? topfiltersParam.zipCodePdf
: "0";
let stateValue = stateParam
? stateParam === "All"
? []
: stateParam.split(",")
: [];
let zipCodeValue = zipcodeParam
? zipcodeParam === "All"
? []
: zipcodeParam.split(",")
: [];
updateFilterValues(
stateParam,
zipcodeParam,
stateTopValue,
zipCodeTopValue
);

let query1 = {
selectedFilters: {
date: dateParam,
State: stateValue,
"Zip Code": zipCodeValue,
},
};

outageMap(query1);
if (stateValue.length === 0) {
let req = {date : dateParam }
stateFilter(req,true);
}
if (stateValue.length > 0) {
// let zipList = [];
// zipList = zipCodeValue.map((val) => {
// return { label: val, value: val };
// });
// let query = { state: stateValue };
// zipCodeFilter(query, true, zipList);
setAllSelectedZip([
{ label: "Select all Zip Codes", value: "All" },
]);
setSelectedZipCode(
[{ label: "Select all Zip Codes", value: "All" }]
);
}
}
}, [props.urlSubscriptionData]);
useEffect(() => {
if (load.default) {
let query = {
selectedFilters: {
date: moment(props.date["date"]).format("YYYY-MM-DD"),
State:
selectedStateList && selectedStateList.length > 0
? valueProvider(selectedStateList)
: ["All"],
"Zip Code": zipCodeAll ? ["All"] : valueProvider(selectedZipCode),
},
};
outageMap(query);
setTopFilterValue({ value: 5, label: "Top 5 States" });
}
}, [load]);
const newZipHandler = (selectedValue) => {
// setPopupSelected(selectedValue);
setZipCodeAll(false);
let selectedAll = selectedValue.filter((el) => el.value === "All");
let previousSelectedAll = popupSelected.filter(
(el) => el.value === "All"
);
if (selectedValue.length > 0 && selectedAll.length > 0) {
if (previousSelectedAll.length === 0 && selectedAll.length > 0) {
setPopupSelected(allSelectedZip);
setZipCodeAll(true);
} else if (
selectedValue.length < popupSelected.length &&
previousSelectedAll.length > 0
) {
setPopupSelected(selectedValue.filter((el) => el.value !== "All"));
} else {
setPopupSelected(allSelectedZip);
setZipCodeAll(true);
}
} else if (selectedAll.length === 0 && previousSelectedAll.length > 0) {
setPopupSelected([]);
} else {
setPopupSelected(selectedValue);
}
};
useEffect(async() => {
if (pdfDefaultFlow) {
let topValue = PdfTopFilter("Activation Report",topfiltersParams)
let mapTop, stateTopValue, zipCodeTopValue;
if (topfiltersParams) {
mapTop = topValue && topValue.MapTopValue
? topValue.MapTopValue
: 5;
stateTopValue = topValue && topValue.statePdf
? topValue.statePdf
: "0";
zipCodeTopValue = topValue && topValue.zipCodePdf
? topValue.zipCodePdf
: "0";
}
setTopFilterValue([
{ label: `Top ${mapTop ? mapTop : 5} States`, value: mapTop },
]);
let date1;
if (
(monthParam === "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam != "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam === "*" &&
(dayParam != "*" ||
dayParam != "MON-FRI" ||
dayParam != "Every Week"))
) {
let dateValue = await getactivationMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
let maxDate = dateList[0];
return maxDate
}
})
.catch((error) => {
console.log(error);
});
date1 = dateValue;
// date1 = moment(new Date()).format("YYYY-MM-DD");
// date1 = dateChecker(date1,true)
} else {
date1 = dateParams && dateParams != "Invalid date" ? dateParams : await getactivationMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
let maxDate = dateList[0];
return maxDate
}
})
.catch((error) => {
console.log(error);
});
}
if (pdfDefaultFlow === "0") {
let stateValue = stateParams === "All" ? [] : stateParams.split(",");
let zipCodeValue =
zipcodeParams === "All" ? [] : zipcodeParams.split(",");

updateFilterValues(
stateParams,
zipcodeParams,
stateTopValue,
zipCodeTopValue
);

let query1 = {
selectedFilters: {
date: date1,
State: stateValue,
"Zip Code": zipCodeValue,
},
};

outageMap(query1);
} else {
if (
(monthParam === "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam != "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam === "*" &&
(dayParam != "*" ||
dayParam != "MON-FRI" ||
dayParam != "Every Week"))
) {
outageMap({
selectedFilters: {
date: date1,
State: [],
"Zip Code": [],
},
});
} else {
outageMap(query);
}
let req = {date : date1}
stateFilter(req);
setZipCodeList(allSelectedZip);
setSelectedZipCode(allSelectedZip);
// if (props.date != null) {
// outageMap(query);
// stateFilter();
// setZipCodeList(allSelectedZip);
// setSelectedZipCode(allSelectedZip);
// }
}
} else {
if (props.date && !props.defaultload && !props.urlSubscriptionData) {
query.selectedFilters.date = moment(props.date["date"]).format(
"YYYY-MM-DD"
);
let req = {date : moment(props.date["date"]).format("YYYY-MM-DD") }
outageMap(query);
stateFilter(req);
// setZipCodeList(allSelectedZip);
// setSelectedZipCode(allSelectedZip);
setTopFilterValue({ value: 5, label: "Top 5 States" });
} else {
if (
props.date != null &&
urlParam === "" &&
!props.urlSubscriptionData
) {
let req = {date : moment(props.date["date"]).format("YYYY-MM-DD") }
outageMap(query);
stateFilter(req);
// setZipCodeList(allSelectedZip);
// setSelectedZipCode(allSelectedZip);
}
}
}
}, [props.date]);

// useEffect(() => {
// if (selectedStateList.length != 0 && stateShow == true) {
// let query = { state: valueProvider(selectedStateList) };
// zipCodeFilter(query);
// }
// }, [selectedStateList]);

const GoHandler = () => {
// if(selectedStateList.length === 0) {
// setShow(true);
// setAlertMessage("State must be Selected.");
// return false;
// }
let query = {
selectedFilters: {
date:
props.date && props.date["date"]
? moment(props.date["date"]).format("YYYY-MM-DD")
: "",
State:
selectedStateList && selectedStateList.length > 0
? valueProvider(selectedStateList)
: ["All"],
"Zip Code": zipCodeAll ? ["All"] : valueProvider(selectedZipCode),
},
};
outageMap(query);
setTopFilterValue({ value: 5, label: "Top 5 States" });
props.setPdfMapTopValue(5);
let tempObj = {
isDefault: false,
date:
props.date && props.date["date"]
? moment(props.date["date"]).format("YYYY-MM-DD")
: "",
State:
selectedStateList && selectedStateList.length > 0
? valueProvider(selectedStateList)
: ["All"],
"Zip Code": zipCodeAll ? ["All"] : valueProvider(selectedZipCode),
};
props.setPdfParams(tempObj);
props.setStatePdf(selectedStateList.length);
props.setzipCodePdf(selectedZipCode.length);
// props.generateXL({
// // screenId: props.screenID_subscription
// screenName: props.screenName,
// ...tempObj,
// });
props.setExcelParams({
// screenId: props.screenID_subscription
screenName: props.screenName,
...tempObj,
});
};

const onStateCick = async (value) => {
// setLoading(true)
let payload = {
date: moment(props.date["date"]).format("YYYY-MM-DD"),
State: value.state,
zipcode: zipCodeAll ? ["All"] : valueProvider(selectedZipCode),
};
// getActiverUserMapTable();
await getMapTableData(payload);
// setShow1(true);
};

const valueProvider = (tempArray) => {
let temp = [];
tempArray.forEach((element) => {
temp.push(element.value);
});
return temp;
};

const loadTableData = (data, defaultScenario, length = 5) => {
if (defaultScenario) {
setMapTableData(data);
}
let tableArr = [];
if (data.length > 0) {
tableArr = [...data];
}
if (tableArr?.length > 0) {
tableArr.sort(function (a, b) {
return parseFloat(b.Anomalies_count) - parseFloat(a.Anomalies_count);
});
tableArr = tableArr?.slice(0, length);
}
setTableData(tableArr);
};

const tableDataChangeHandler = (date, outage) => {
setLoading(true);
// getActiverUserMapTable();
setLoading(false);
};

const zipSearchHandler = (options, filter) => {
let opt = [];
if(stateList && stateList.length>0){
if (filter !== "" && filter != zipCodeSearch) {
let enodeBValue = selectedZipCode.map((el) => el.value);
if (enodeBValue.includes("All")) {
setSelectedZipCode([]);
}
setZipCodeSearch(filter);
if (!filter) {
opt = options;
} else {
let payload = {
search: filter,
state:
selectedStateList.length > 0
? selectedStateList.map((el) => el.value)
: ["All"],
date : moment(props.date["date"]).format(
"YYYY-MM-DD"
)
};
getActiveReportZipCodeSearch(payload).then((response) => {
setAllSelectedZip([
{ label: "Select all Zip Codes", value: "All" },
...response.data,
]);
if (filter === zipCodeSearch) {
opt = response.data;
} else {
opt = options;
}
});
}
} else {
if (filter === "" && filter !== zipCodeSearch) {
// setAllSelectedZip([]);
// setZipCodeSearch(filter);
if (selectedZipCode.length > 0) {
let val = selectedZipCode.filter((res) => res.value === "All");
if (val && val.length !== 0) {
options = selectedZipCode;
} else {
options = [
{ label: "Select all Zip Codes", value: "All" },
...selectedZipCode,
];
setSelectedZipCode(options);
}
}else{
options = [{ label: "Select all Zip Codes", value: "All" }]
setSelectedZipCode([{ label: "Select all Zip Codes", value: "All" }]);
}
}
if (filter === "") {
if (selectedZipCode.length > 0) {
let val = selectedZipCode.filter((res) => res.value === "All");
if (val && val.length !== 0) {
options = selectedZipCode;
} else {
options = [
{ label: "Select all Zip Codes", value: "All" },
...selectedZipCode,
];
setSelectedZipCode(selectedZipCode);
}
}else{
options = [{ label: "Select all Zip Codes", value: "All" }]
setSelectedZipCode([{ label: "Select all Zip Codes", value: "All" }]);
}
}
// let query = {
// state:
// selectedStateList.length > 0
// ? valueProvider(selectedStateList)
// : [],
// };
// getActiveReportStateBasedZipCodeFilter(query).then((response) => {
// if (response.data) {
// setAllSelectedZip(response.data);
// setZipCount(response.data.length);
// }
// setLoading(false);
// });
opt = options;
}
}else{
setZipCodeList([]);
setSelectedZipCode([]);
}
return opt;
};

return (
<div className="ActiveReportUserMapMainContainer">
<section className="ActiveReportUserMapFlexContainer">
<div className="ActiveReportUserMapFlexSubContainer">
<div className="ActiveReportUserMapHeadingContainer d-flex justify-content-between">
<h5 className="cardTitle">
{" "}
Regional User Activation Distribution
</h5>
<div
className={`mapSelect ${
noDataExist ? `pdfFlowactivationmapSelect` : ""
}`}
//className="mapSelect"
>
<div style={{ width: "150px" }}>
<React.Fragment>
<label className="ActiveReportUserMaplabels">States</label>
<SingleSelectComponent
optionsList={optionsStates}
onChange={topFilterHadler}
selectedValue={topFilterValue}
/>
</React.Fragment>
</div>
</div>
</div>
<div>{/* {!message ? ( */}</div>
<div
className={`ActiveReportUserMapFilterContainer ${
noDataExist ? `activationfilterSelect` : ""
}`}
>
<div className="ActiveReportUserMapFilter StateFilter">
<label className="ActiveReportUserMaplabels State">State</label>
<ReactMultiSelect
customWidth="160"
optionsList={stateList}
defaultValue={selectedStateList}
unSelectAll={false}
hasSelectAll={true}
onChange={stateChangeHandler}
// tooltipRequred="Yes"
// toolTipPosition="top"
/>
</div>
<div
className={
selectedZipCode.length == 1 ||
selectedZipCode.length == 0 ||
selectedZipCode[0].value == "All"
? "ActiveReportUserMapFilter ZipCodeFilterAll"
: "ActiveReportUserMapFilter ZipCodeFilter"
}
>
<label className="ActiveReportUserMaplabels ZipCode">
Zip Code
</label>
<CustomSearchMultiselect
type="zip"
customWidth="160"
optionsList={allSelectedZip}
defaultValue={selectedZipCode}
unSelectAll={false}
hasSelectAll={false}
onChange={newZipChangeHandler}
// tooltipRequred="Yes"
// toolTipPosition="top"
asyncSearch={zipSearchHandler}
status = {zipStatus}
/>
</div>
{(PDF_SUB_ID === "" && SUB_ID === "") ? (
<div className="ActiveReportUserMapGoButton">
<Button
variant="contained"
style={{
backgroundColor: isGoActive ? "black" : "#e6e6e6",
borderRadius: "25px",
fontSize: ".9rem",
textTransform: "capitalize",
height: "30px",
boxShadow: "none",
paddingTop: "2px",
color: isGoActive ? "white" : "black",
fontWeight: isGoActive ? "bold" : "normal",
}}
onClick={() => GoHandler()}
>
Go
</Button>
</div>
) : null}
</div>

{/* <div
className={`ActiveReportUserMapContainer ${
PDF_SUB_ID ? "pdfFlowActiveMap" : ""
}`}
> */}
<div
className={`mapContainer MapTableDiv ${
PDF_SUB_ID || SUB_ID? `pdfFlowactivationmapContainer` : ""
}`}
style={{ width:"100%" }}
>
<div style={{width:"60%", marginRight:"24px"}}>
{mapData ? (
<MapComponent
id="Activation"
height="470px"
legendTitle="Users Count"
data={mapData}
// selectedAnomaly={props.selectedAnomaly}
zoom={4}
geoType={data}
zoomControlFlag={true}
legendFlag1={mapData && mapData.length > 0 ? true : false}
layersControlFlag={true}
tooltipControlFlag={true}
scrollWheelZoom={true}
stateName={(value) => onStateCick(value)}
setLoad={setLoad}
/>
) : (
[]
)}
</div>
{/* </div> */}
<div
className="activationfiltermap"
// style={{ marginTop: "1.8rem" }}
>
<div className="ActiveReportUserMapTable">
<div className="ActiveReportUserMapTableData">
<MapTableComponent
title={"Activation Count"}
columns={columns}
tableData={tableData}
/>
</div>
</div>
</div>
</div>
</div>
<div>{loading ? <Loader /> : null}</div>
{show1 && modelData.length > 0 ? (
<DeviceModelAlert
// className="popupTable"
date={props.date}
changedDate={props.date["date"]}
minDate={props.minDate}
maxDate={props.maxDate}
tableDataChangeHandler={(date, group) =>
tableDataChangeHandler(date, group)
}
show={show1}
setShow={(status) => {
setShow1(status);
if (!status) {
setModelData([]);
}
}}
tableData={modelData}
exportFileName={"Regional User Activation Report"}
title={"Regional User Activation Report"}
columns={activeReportPopupColumns}
loading={loading}
/>
) : null}
{show ? (
<Alertmodal show={show} setShow={setShow} alertmsg={alertMessage} />
) : null}
{isDialogOpen ? (
<CalldropTickerPopup
isDialogOpen={isDialogOpen}
setIsDialogOpen={setIsDialogOpen}
list={type === "State" ? stateList : allSelectedZip}
selectedList={popupSelected}
Handler={popupHanlder}
handleSubmit={clickHandler}
msg={msg}
type={type}
searchHandler={zipSearchHandler}
changeHandler={newZipHandler}
/>
) : null}
</section>
</div>
);
};

export default ActiveReportUserMap;