\r\n {/* */}\r\n \r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react'\r\nimport APIFunctions from \"../src/utils/APIFunctions\";\r\nimport { monthTranslator, getLang, setLanguage } from '../src/utils/common.js'\r\nimport { CanvasJSChart } from 'canvasjs-react-charts'\r\nimport './css/CustomStyle.css';\r\n\r\nexport default class Dashboard extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n numOfCustomers: \"\",\r\n regRequests: \"\",\r\n numOfPackages: \"\",\r\n numOfCompanies: \"\",\r\n sales: null,\r\n customerPerPackage: null,\r\n active: null\r\n };\r\n\r\n }\r\n componentDidMount() {\r\n this.changeLang();\r\n this.getStatistics();\r\n this.getBarGraph();\r\n\r\n \r\n \r\n\r\n }\r\n\r\n changeLang(){\r\n if (getLang() != \"en\"){\r\n setLanguage(\"en\");\r\n window.location.reload(false);\r\n }\r\n }\r\n\r\n getBarGraph() {\r\n APIFunctions.getForBarChart()\r\n .then((response) => {\r\n\r\n var _customers = response.data.customers;\r\n var arr = [];\r\n _customers.map((val, idx) => {\r\n var item = new Object();\r\n item.label = val.packageName;\r\n item.y = val.total;\r\n\r\n arr.push(item);\r\n });\r\n\r\n var _sales = response.data.sales;\r\n var arr2 = [];\r\n _sales.map((val, idx) => {\r\n var item = new Object();\r\n item.label = monthTranslator(val.month);\r\n item.y = val.total;\r\n\r\n arr2.push(item);\r\n });\r\n\r\n var arr3 = [\r\n { name: \"Activated\", y: response.data.active.activeCount },\r\n { name: \"DeActivated\", y: response.data.active.deactivatedCount },\r\n ]\r\n\r\n this.setState({\r\n sales: arr2,\r\n customerPerPackage: arr,\r\n active: arr3\r\n });\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n getStatistics() {\r\n APIFunctions.getStatistics()\r\n .then((response) => {\r\n\r\n this.setState({\r\n numOfCompanies: response.data.numOfCompanies,\r\n numOfCustomers: response.data.numOfCustomers, regRequests: response.data.regRequests,\r\n numOfPackages: response.data.numOfPackages\r\n });\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n\r\n render() {\r\n const options = {\r\n animationEnabled: true,\r\n theme: \"light2\",\r\n title: {\r\n text: \"Companies Per Package\"\r\n },\r\n axisX: {\r\n title: \"Package\",\r\n reversed: true,\r\n },\r\n axisY: {\r\n title: \"Number of Companies\",\r\n includeZero: true,\r\n labelFormatter: this.addSymbols\r\n },\r\n data: [{\r\n type: \"bar\",\r\n dataPoints: this.state.customerPerPackage\r\n }]\r\n }\r\n\r\n const options2 = {\r\n exportEnabled: true,\r\n animationEnabled: true,\r\n title: {\r\n text: \"Total Registrations Per Month\"\r\n },\r\n data: [{\r\n type: \"pie\",\r\n startAngle: 75,\r\n toolTipContent: \"{label}: {y}\",\r\n showInLegend: \"true\",\r\n legendText: \"{label}\",\r\n indexLabelFontSize: 10,\r\n indexLabel: \"{label} - {y}\",\r\n dataPoints: this.state.sales\r\n }],\r\n }\r\n const options3 = {\r\n animationEnabled: true,\r\n title: {\r\n text: \"Active/InActive Customer Packages\"\r\n },\r\n subtitles: [{\r\n verticalAlign: \"center\",\r\n fontSize: 24,\r\n dockInsidePlotArea: true\r\n }],\r\n data: [{\r\n type: \"doughnut\",\r\n showInLegend: true,\r\n indexLabel: \"{name}: {y}\",\r\n yValueFormatString: \"#,###''\",\r\n dataPoints: this.state.active\r\n }]\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {getValue(\"Logout\", getLang())}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n )\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\n\r\nexport default class Footer extends Component {\r\n render() {\r\n return (\r\n \r\n {/* Content Header (Page header) */}\r\n \r\n \r\n
\r\n \r\n
\r\n {/* /.content-header */}\r\n {/* Main content */}\r\n \r\n
{/* /.container-fluid */}\r\n \r\n
{/* /.row */}\r\n \r\n {/*
{/* /.col */}\r\n Dashboard
*/}\r\n\r\n {/* Small boxes (Stat box) */}\r\n
\r\n\r\n \r\n
\r\n \r\n {/* small box */}\r\n \r\n
\r\n {/* ./col */}\r\n \r\n {/* small box */}\r\n \r\n
\r\n {/* ./col */}\r\n \r\n {/* small box */}\r\n \r\n
\r\n {/* ./col */}\r\n \r\n {/* small box */}\r\n \r\n
\r\n {/* ./col */}\r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {this.state.customerPerPackage &&
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {this.state.active &&
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport Button from \"react-bootstrap/Button\";\r\nimport Spinner from \"react-bootstrap/Spinner\";\r\n\r\nconst icons = {\r\n facebook: \"fab fa-facebook\",\r\n google: \"fab fa-google\",\r\n googlePlus: \"fab fa-google-plus\",\r\n};\r\n\r\nconst AppButton = ({\r\n children,\r\n isLoading,\r\n icon,\r\n theme = \"primary\",\r\n disabled,\r\n ...otherProps\r\n}) => {\r\n let spinnerTemplate;\r\n let iconTemplate;\r\n\r\n if (isLoading) {\r\n spinnerTemplate = (\r\n \r\n {\" \"}\r\n 
\r\n
\r\n );\r\n}\r\n\r\nconst useFormInput = (initialValue) => {\r\n const [value, setValue] = useState(initialValue);\r\n\r\n const handleChange = (e) => {\r\n setValue(e.target.value);\r\n };\r\n return {\r\n value,\r\n onChange: handleChange,\r\n };\r\n};\r\n\r\nexport default Login;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { AlertConfirm, AlertError, AlertSuccess } from \"../components/f_Alerts\";\r\nimport { useTable, useSortBy } from \"react-table\";\r\n\r\nimport Modal from \"react-bootstrap/Modal\";\r\nconst User = (props) => {\r\n const [users, setUsers] = useState([]);\r\n const [searchTitle, setSearchTitle] = useState(\"\");\r\n const [isOpen3, setIsOpen3] = useState(false);\r\n const [newPassword, setNewPassword] = React.useState(\"\");\r\n const [confirmPassword, setConfirmPassword] = React.useState(\"\");\r\n const [userName, setUserName] = React.useState(\"\");\r\n \r\n const usersRef = useRef();\r\n\r\n\r\n usersRef.current = users;\r\n\r\n useEffect(() => {\r\n retrieveUsers();\r\n }, []);\r\n\r\n const onChangeSearchTitle = (e) => {\r\n const searchTitle = e.target.value;\r\n setSearchTitle(searchTitle);\r\n };\r\n\r\n const retrieveUsers = () => {\r\n APIFunctions.getAll()\r\n .then((response) => {\r\n setUsers(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const refreshList = () => {\r\n retrieveUsers();\r\n };\r\n\r\n const removeAllUsers = () => {\r\n APIFunctions.removeAll()\r\n .then((response) => {\r\n refreshList();\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const _resetPassword = (rowIndex) => {\r\n\r\n const id = usersRef.current[rowIndex].id;\r\n var user = usersRef.current;\r\n user = user.filter((item) => item.id == id);\r\n\r\n setUserName(user[0].userName);\r\n setIsOpen3(true);\r\n setNewPassword(\"\");\r\n setConfirmPassword(\"\");\r\n }\r\n\r\n const resetPassword = (index) => {\r\n if (newPassword == \"\" || newPassword == null\r\n || confirmPassword == \"\" || confirmPassword == null) {\r\n AlertError(\"Please fill required fields\");\r\n return;\r\n}\r\nif (newPassword !== confirmPassword) {\r\n AlertError(\"Passwords do not match\");\r\n return;\r\n}\r\n\r\nvar NewPassowrd = btoa(newPassword);\r\n\r\n APIFunctions.changePassword(userName, NewPassowrd)\r\n .then((response) => {\r\n if (response.data.success) {\r\n AlertSuccess(response.data.messageEn);\r\n setTimeout(() => { setIsOpen3(false) }, 500);\r\n }\r\n else {\r\n AlertError(response.data.messageEn);\r\n }\r\n console.log(response)\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n const findByTitle = () => {\r\n APIFunctions.findByTitle(searchTitle)\r\n .then((response) => {\r\n setUsers(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const newUser = () => {\r\n props.history.push(\"/EditUser/0\");\r\n };\r\n\r\n const openUser = (rowIndex) => {\r\n const id = usersRef.current[rowIndex].id;\r\n\r\n props.history.push(\"/EditUser/\" + id);\r\n };\r\n\r\n \r\n \r\n\r\n const hideModal3 = () => {\r\n setIsOpen3(false);\r\n };\r\n\r\n\r\n\r\n const deleteUser = (rowIndex) => {\r\n\r\n AlertConfirm(\"Are you sure you want to delete ?\").then((res) => {\r\n if (res.value) {\r\n const id = usersRef.current[rowIndex].id;\r\n APIFunctions.deleteUsers(id)\r\n .then((response) => {\r\n AlertSuccess(\"Operation done successfully\");\r\n let newUsers = [...usersRef.current];\r\n newUsers.splice(rowIndex, 1);\r\n\r\n setUsers(newUsers);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n });\r\n\r\n };\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"UserName\",\r\n accessor: \"userName\",\r\n },\r\n {\r\n Header: \"Email\",\r\n accessor: \"email\",\r\n },\r\n {\r\n Header: \"Active\",\r\n accessor: \"isLocked\",\r\n Cell: (props) => {\r\n return props.isLocked ? \"Locked\" : \"Active\";\r\n },\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n const rowIdx = props.row.id;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n sign in
\r\n \r\n\r\n \r\n \r\n\r\n openUser(rowIdx)}\r\n className=\" btn btn-primary btn-xs\"\r\n >\r\n \r\n \r\n deleteUser(rowIdx)}\r\n className=\"btn btn-danger btn-xs\"\r\n >\r\n \r\n \r\n _resetPassword(rowIdx)}\r\n className=\"btn btn-secondary btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: users,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Users
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n {/* newUser()}\r\n >\r\n New\r\n */}\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n { setNewPassword(e.target.value) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n { setConfirmPassword(e.target.value) }}\r\n />\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default EditUser;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\n\r\nimport dateFormat from \"dateformat\";\r\nimport { useTable } from \"react-table\";\r\nimport Select from \"react-select\";\r\nimport { getLang } from \"../utils/common\";\r\nimport DatePicker from \"react-datepicker\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { AlertError, AlertSuccess, AlertConfirm } from \"./f_Alerts\";\r\n\r\nconst EditSocioEconomics = (props) => {\r\n useEffect(() => {\r\n selectCSS();\r\n }, []);\r\n\r\n const selectCSS = () => {\r\n if (getLang() === \"ar\") {\r\n // require(\"../assets/CustomStyleAr.css\");\r\n //require(\"../assets/resources_ar.js\");\r\n } else {\r\n //require(\"../assets/CustomStyleEn.css\");\r\n //require(\"../assets/resources_en.js\");\r\n }\r\n };\r\n\r\n const initialSocioEconomicState = {\r\n id: 0,\r\n year: \"\",\r\n month: \"\",\r\n countryId: \"\",\r\n sourceId: \"\",\r\n typeId: null,\r\n value: \"\",\r\n isDeleted: \"\",\r\n };\r\n\r\n const [selectedFile, setSelectedFile] = useState(null);\r\n const [startDate, setStartDate] = useState(new Date());\r\n const [result, emplist] = useState([]);\r\n const [resultCountry, emplistCountry] = useState([]);\r\n const [resultSources, emplistSources] = useState([]);\r\n const [resultTypes, emplistTypes] = useState([]);\r\n const [currentSocioEconomic, setCurrentSocioEconomic] = useState(\r\n initialSocioEconomicState\r\n );\r\n const [message, setMessage] = useState(\"\");\r\n const [checked, setChecked] = React.useState(false);\r\n const [checked2, setChecked2] = React.useState(false);\r\n const [role, setRole] = useState(-1);\r\n\r\n const [countryId, setCountryId] = useState(\"\");\r\n const [sourceId, setSourceId] = useState(\"\");\r\n const [typeId, setTypeId] = useState(\"\");\r\n const [value, setValue] = useState(\"\");\r\n const [isNew, setIsNew] = useState(\"\");\r\n\r\n const handleChange = () => {\r\n setChecked(!checked);\r\n };\r\n const handleChangeCountry = (selectedOptions) => {\r\n setCountryId(selectedOptions.countryId);\r\n };\r\n const handleInputChange = (event) => {\r\n const { name, value } = event.target;\r\n setCurrentSocioEconomic({ ...currentSocioEconomic, [name]: value });\r\n };\r\n\r\n const handleChangeSource = (selectedOptions) => {\r\n setSourceId(selectedOptions.id);\r\n };\r\n const handleChangeType = (selectedOptions) => {\r\n setTypeId(selectedOptions.id);\r\n };\r\n\r\n const handleChange2 = () => {\r\n setChecked2(!checked2);\r\n };\r\n useEffect(() => {\r\n APIFunctions.getAllCountries()\r\n .then((resp) => resp)\r\n .then((resp) => emplistCountry(resp.data));\r\n }, []);\r\n useEffect(() => {\r\n APIFunctions.GetLookupsByParentId(\"SOC_SRC\")\r\n .then((resp) => resp)\r\n .then((resp) => emplistSources(resp.data));\r\n }, []);\r\n useEffect(() => {\r\n APIFunctions.GetLookupsByParentId(\"SOC_TYP\")\r\n .then((resp) => resp)\r\n .then((resp) => emplistTypes(resp.data));\r\n }, []);\r\n useEffect(() => {\r\n APIFunctions.getAllRoles()\r\n .then((resp) => resp)\r\n .then((resp) => emplist(resp.data));\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.match.params.id != 0) {\r\n getData(props.match.params.id);\r\n setIsNew(false);\r\n }\r\n else {\r\n setIsNew(true);\r\n }\r\n }, [props.match.params.id]);\r\n\r\n const getData = (id) => {\r\n APIFunctions.getSocioEconomicById(id)\r\n .then((response) => {\r\n setCurrentSocioEconomic(response.data);\r\n\r\n setCountryId(response.data.countryId);\r\n setSourceId(response.data.sourceId);\r\n setTypeId(response.data.typeId);\r\n var issueDt = new Date();\r\n issueDt.setFullYear(response.data.year, response.data.month + 1, 0);\r\n if (response.data.year != 0) {\r\n setStartDate(issueDt);\r\n } else {\r\n setStartDate(null);\r\n }\r\n })\r\n\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const updateSocioEconomic = () => {\r\n\r\n\r\n if (countryId == \"\"\r\n || sourceId == \"\" || currentSocioEconomic.value == \"\"\r\n || startDate == null) {\r\n AlertError(\"Please fill required fields\");\r\n return;\r\n }\r\n\r\n currentSocioEconomic.countryId = countryId;\r\n currentSocioEconomic.sourceId = sourceId;\r\n currentSocioEconomic.typeId = null;\r\n if (startDate != null) {\r\n currentSocioEconomic.year = startDate.getFullYear();\r\n currentSocioEconomic.month = null;\r\n }\r\n if (currentSocioEconomic.id == 0) {\r\n currentSocioEconomic.isDeleted = false;\r\n }\r\n\r\n\r\n APIFunctions.saveSocioEconomic(\r\n currentSocioEconomic.id,\r\n currentSocioEconomic\r\n )\r\n .then((response) => {\r\n if (response.data) {\r\n AlertSuccess(\"Operation Done Successfully\");\r\n setTimeout(() => { props.history.push(\"/AdminSocioEconomics\") }, 500);\r\n }\r\n else {\r\n AlertError(\"Something went wrong\");\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n const cancelSocioEconomic = () => {\r\n props.history.push(\"/AdminSocioEconomics\");\r\n };\r\n\r\n const deleteSocioEconomic = () => {\r\n AlertConfirm('Are you sure you want to delete ?')\r\n .then(res => {\r\n if (res.value) {\r\n APIFunctions.removeSocioEconomic(currentSocioEconomic.id)\r\n .then((response) => {\r\n AlertSuccess(\"Operation Done Successfully\");\r\n setTimeout(() => { props.history.push(\"/AdminSocioEconomics\") }, 500);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {currentUser ? (\r\n \r\n \r\n\r\n Save\r\n \r\n \r\n \r\n\r\n\r\n\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n\r\n User Details
\r\n{message}
\r\n\r\n
\r\n
\r\n )}\r\n \r\n
Please click on a User...
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default EditSocioEconomics;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport dateFormat from \"dateformat\";\r\nimport { useTable } from \"react-table\";\r\nimport Select from \"react-select\";\r\nimport { getLang, BindImageURL } from \"../utils/common\";\r\nimport { AlertError, AlertSuccess } from \"./f_Alerts\";\r\n\r\nconst EditLatestNews = (props) => {\r\n useEffect(() => {\r\n selectCSS();\r\n }, []);\r\n\r\n const selectCSS = () => {\r\n if (getLang() === \"ar\") {\r\n // require(\"../assets/CustomStyleAr.css\");\r\n //require(\"../assets/resources_ar.js\");\r\n } else {\r\n //require(\"../assets/CustomStyleEn.css\");\r\n //require(\"../assets/resources_en.js\");\r\n }\r\n };\r\n\r\n const initialLatestNew = {\r\n id: 0,\r\n titleEn: \"\",\r\n titleAr: \"\",\r\n titleFr: \"\",\r\n descriptionAr: \"\",\r\n descriptionEn: \"\",\r\n descriptionFr: \"\",\r\n isPublished: false,\r\n isDeleted: false,\r\n imageUrl: \"\",\r\n url: \"\",\r\n };\r\n const [result, emplist] = useState([]);\r\n const [currentLatestNews, setCurrentLatestNews] = useState(initialLatestNew);\r\n const [image, setImage] = useState('');\r\n const [displayImage, setDisplayImage] = useState(false);\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n\r\n\r\n useEffect(() => {\r\n APIFunctions.getAllRoles()\r\n .then((resp) => resp)\r\n .then((resp) => emplist(resp.data));\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.match.params.id != 0) {\r\n getLatesNews(props.match.params.id);\r\n setDisplayImage(true);\r\n };\r\n }, [props.match.params.id]);\r\n\r\n const getLatesNews = (id) => {\r\n APIFunctions.getLatesNewsById(id)\r\n .then((response) => {\r\n console.log(response.data);\r\n setCurrentLatestNews(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const update = () => {\r\n var valid = true;\r\n\r\n\r\n if (currentLatestNews.titleEn == \"\" || currentLatestNews.titleEn == null) {\r\n valid = false;\r\n }\r\n if (currentLatestNews.titleAr == \"\" || currentLatestNews.titleAr == null) {\r\n valid = false;\r\n }\r\n if (currentLatestNews.titleFr == \"\" || currentLatestNews.titleFr == null) {\r\n valid = false;\r\n }\r\n if (currentLatestNews.descriptionEn == \"\" || currentLatestNews.descriptionEn == null) {\r\n valid = false;\r\n }\r\n if (currentLatestNews.descriptionAr == \"\" || currentLatestNews.descriptionAr == null) {\r\n valid = false;\r\n }\r\n if (currentLatestNews.descriptionFr == \"\" || currentLatestNews.descriptionFr == null) {\r\n valid = false;\r\n }\r\n if (currentLatestNews.imageUrl == \"\" || currentLatestNews.imageUrl == null) {\r\n valid = false;\r\n }\r\n\r\n if (!valid) {\r\n AlertError(\"Please fill required fields\");\r\n return;\r\n }\r\n\r\n setSaveTxt(\"Saving...\")\r\n\r\n if (currentLatestNews.id == 0) {\r\n currentLatestNews.isDeleted = false;\r\n }\r\n APIFunctions.saveLatestNews(currentLatestNews.id, currentLatestNews)\r\n .then((response) => {\r\n if (response.data != null) {\r\n AlertSuccess(\"Successfully saved\");\r\n setTimeout(() => { props.history.push(\"/LatestNews\"); }, 500);\r\n return;\r\n }\r\n else {\r\n AlertError(\"Something went wrong\");\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n\r\n const cancel = () => {\r\n props.history.push(\"/LatestNews\");\r\n };\r\n\r\n const viewResource = () => {\r\n var image = BindImageURL(currentLatestNews.imageUrl);\r\n window.open(image);\r\n }\r\n\r\n const onFileChange2 = (event) => {\r\n\r\n if (event.target.files.length == 0) {\r\n return;\r\n }\r\n const formData = new FormData();\r\n formData.append(\r\n \"file\",\r\n event.target.files[0]\r\n );\r\n\r\n APIFunctions.uploadMedia(formData)\r\n .then((response) => {\r\n var obj = currentLatestNews;\r\n obj.imageUrl = response.data;\r\n setImage(response.data);\r\n setCurrentLatestNews(obj);\r\n setDisplayImage(true);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n\r\n\r\n }\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {currentSocioEconomic ? (\r\n \r\n
\r\n\r\n Save\r\n {\" \"}\r\n \r\n Delete\r\n \r\n \r\n {\" \"}\r\n Cancel\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n \r\n Socio Economic Details
\r\n\r\n
\r\n
\r\n
\r\n )}\r\n \r\n
Please click on a User...
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {headerGroups.map(headerGroup => (\r\n
\r\n )\r\n }\r\n\r\n useEffect(() => {\r\n APIFunctions.getPublicPackages()\r\n .then((resp) => resp)\r\n .then((resp) => setResultPackage(resp.data));\r\n }, []);\r\n\r\n useEffect(() => {\r\n APIFunctions.GetLookupsByParentId(\"CURRENCY\")\r\n .then((resp) => resp)\r\n .then((resp) => setCurrencyResult(resp.data));\r\n }, []);\r\n\r\n \r\n const viewResource = () => {\r\n var img = BindImageURL(image);\r\n window.open(img);\r\n }\r\n\r\n\r\n const handlPackageChange = (selectedOptions) => {\r\n APIFunctions.getPackagePermissionsById(selectedOptions.id)\r\n .then((resp) => resp)\r\n .then((resp) => setPackagePermissions(resp.data));\r\n\r\n var _companyPackage = companyPackage;\r\n _companyPackage.packageId = selectedOptions.id;\r\n setCompanyPackage(_companyPackage);\r\n\r\n\r\n setTimeout(() => { saveClientPermissions() }, 300)\r\n renderPackagePermissions();\r\n\r\n //setPreRegistration({ ...preRegistration, preferredPackage: selectedOptions.id })\r\n };\r\n\r\n\r\n const onFileChange2 = (event) => {\r\n\r\n if (event.target.files.length == 0) {\r\n return;\r\n }\r\n LoadingAlert(\"Show\");\r\n const formData = new FormData();\r\n formData.append(\r\n \"file\",\r\n event.target.files[0]\r\n );\r\n\r\n APIFunctions.uploadMedia(formData)\r\n .then((response) => {\r\n var obj = company;\r\n obj.logo = response.data;\r\n setImage(response.data);\r\n setDisplayView(true);\r\n setCompany(obj);\r\n LoadingAlert(\"hide\");\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n LoadingAlert(\"hide\");\r\n });\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (props.match.params.id != 0) {\r\n getDetails(props.match.params.id);\r\n setDisplayStep1(true);\r\n }\r\n else {\r\n setDisplayStep1(false);\r\n }\r\n }, [props.match.params.id]);\r\n\r\n\r\n const getDetails = (id) => {\r\n APIFunctions.getCompanyPackageById(id)\r\n .then((response) => {\r\n console.log(response.data);\r\n setCompany(response.data.company);\r\n setImage(response.data.company.logo);\r\n setTheArray(response.data.users);\r\n\r\n if (response.data.company.logo != '' && response.data.company.logo != null)\r\n setDisplayView(true);\r\n\r\n var obj = new Object();\r\n obj.id = response.data.id;\r\n obj.companyId = response.data.companyId;\r\n obj.packageId = response.data.packageId;\r\n obj.numberOfUsers = response.data.numberOfUsers;\r\n obj.price = response.data.price;\r\n obj.currency = response.data.currency;\r\n obj.startDate = dateFormat(response.data.startDate, \"yyyy-mm-dd\");\r\n obj.endDate = dateFormat(response.data.endDate, \"yyyy-mm-dd\");\r\n obj.isActive = response.data.isActive;\r\n\r\n setCompanyPackage(obj);\r\n setPackagePermissions(response.data.packagePermissions);\r\n setUserPackagePermissions(response.data.cPackageDetails);\r\n\r\n console.log(userPackagePermissions);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n\r\n const cancel = () => {\r\n props.history.push(\"/CompanyPackages\");\r\n }\r\n\r\n const handleCurrencyChange = (selectedOptions) => {\r\n\r\n setCompanyPackage({ ...companyPackage, currency: selectedOptions.id });\r\n\r\n };\r\n\r\n const saveClientPermissions = () => {\r\n\r\n var _clientPermissions = [];\r\n packagePermissions.map((val, idx) => {\r\n var item = new Object();\r\n item.id = 0;\r\n item.companyPackageId = 0;\r\n item.packagePagePermissionId = val.id;\r\n item.countryId = 0;\r\n item.isDeleted = false;\r\n\r\n _clientPermissions.push(item);\r\n\r\n });\r\n setUserPackagePermissions(_clientPermissions);\r\n }\r\n\r\n const openModal = (e) => {\r\n myUser.id = generateNewID();\r\n e.preventDefault();\r\n setIsOpen(true);\r\n }\r\n\r\n const hideModal = () => {\r\n myUser.id = generateNewID();\r\n setUser(myUser);\r\n setIsOpen(false);\r\n };\r\n\r\n const hideModal2 = () => {\r\n setIsOpen2(false);\r\n };\r\n\r\n const hideModal3 = () => {\r\n setIsOpen3(false);\r\n };\r\n\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"Users\");\r\n };\r\n\r\n const modalLoaded2 = () => {\r\n setTitle(\"Unaccepted Users\");\r\n };\r\n\r\n const modalLoaded3 = () => {\r\n setTitle(\"Reset Password\");\r\n };\r\n\r\n\r\n useEffect(() => {\r\n setTheArray(userArr)\r\n }, []);\r\n\r\n\r\n const checkIfUserNameExists = (userName) => {\r\n var valid = true;\r\n var _users = userArr;\r\n\r\n _users.map((val, idx) => {\r\n if (val.userName == userName) {\r\n valid = false;\r\n return;\r\n }\r\n\r\n });\r\n\r\n return valid;\r\n }\r\n\r\n const checkIfEmailExists = (email) => {\r\n var valid = true;\r\n var _users = userArr;\r\n\r\n _users.map((val, idx) => {\r\n if (val.email == email) {\r\n valid = false;\r\n return;\r\n }\r\n\r\n });\r\n\r\n return valid;\r\n }\r\n\r\n const saveUser = () => {\r\n if (user.name == \"\" || user.name == null\r\n || user.email == \"\" || user.email == null\r\n || user.userName == \"\" || user.userName == null\r\n || user.password == \"\" || user.password == null) {\r\n AlertError(\"Please fill required fields\");\r\n return;\r\n }\r\n\r\n if (!checkIfUserNameExists(user.userName)) {\r\n AlertError(\"Another user with the same username exists\");\r\n return;\r\n }\r\n\r\n if (!checkIfEmailExists(user.email)) {\r\n AlertError(\"Another user with the same email exists\");\r\n return;\r\n }\r\n\r\n if (!validateEmail(user.email)) {\r\n AlertError(\"Please enter a valid email\");\r\n return;\r\n }\r\n\r\n\r\n var result = userArr;\r\n result.push(user);\r\n myUser.id = generateNewID();\r\n setUser(myUser);\r\n setTheArray(result);\r\n setIsOpen(false);\r\n }\r\n\r\n\r\n const _delete = (index) => {\r\n AlertConfirm('Are you sure you want to delete ?')\r\n .then(res => {\r\n if (res.value) {\r\n var _result = userRef.current;\r\n _result = _result.filter((item) => item.id != index);\r\n\r\n setTheArray(_result)\r\n\r\n\r\n\r\n }\r\n })\r\n }\r\n\r\n const _resetPassword = (id) => {\r\n\r\n var user = userRef.current;\r\n user = user.filter((item) => item.id == id);\r\n\r\n setUserName(user[0].userName);\r\n setIsOpen3(true);\r\n setNewPassword(\"\");\r\n setConfirmPassword(\"\");\r\n }\r\n\r\n const resetPassword = () => {\r\n if (newPassword == \"\" || newPassword == null\r\n || confirmPassword == \"\" || confirmPassword == null) {\r\n AlertError(\"Please fill required fields\");\r\n return;\r\n }\r\n if (newPassword !== confirmPassword) {\r\n AlertError(\"Passwords do not match\");\r\n return;\r\n }\r\n\r\n var NewPassowrd = btoa(newPassword);\r\n\r\n APIFunctions.changePassword(userName, NewPassowrd)\r\n .then((response) => {\r\n if (response.data.success) {\r\n AlertSuccess(response.data.messageEn);\r\n setTimeout(() => { setIsOpen3(false) }, 500);\r\n }\r\n else {\r\n AlertError(response.data.messageEn);\r\n }\r\n console.log(response)\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n var columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Name\",\r\n accessor: \"name\",\r\n },\r\n {\r\n Header: \"Email\",\r\n accessor: \"email\",\r\n },\r\n {\r\n Header: \"Username\",\r\n accessor: \"userName\",\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n const Id = props.row.original.id;\r\n return (\r\n \r\n \r\n \r\n {firstHeaderGroups.map((headerGroup) => (\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ContactMessages;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { AlertConfirm, AlertError, AlertSuccess } from \"./f_Alerts\";\r\nimport dateFormat from \"dateformat\";\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\n\r\nconst CompanyPackages = (props) => {\r\n\r\n var mySelected =\r\n {\r\n id: 0,\r\n email: '',\r\n name: '',\r\n message: '',\r\n reply: ''\r\n }\r\n\r\n const [selectedItem, setSelectedItem] = useState(mySelected);\r\n const [companyPackages, setCompanyPackages] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"Reply\");\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const companyPackageReg = useRef();\r\n\r\n companyPackageReg.current = companyPackages;\r\n\r\n useEffect(() => {\r\n getCompanyPackages();\r\n }, []);\r\n\r\n\r\n const getCompanyPackages = () => {\r\n APIFunctions.getCompanyPackageWithDetails()\r\n .then((response) => {\r\n setCompanyPackages(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const refreshList = () => {\r\n getCompanyPackages();\r\n };\r\n\r\n\r\n const editDetails = (id) => {\r\n props.history.push(\"/CompanyPackageDetails/\" + id);\r\n }\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Company Name\",\r\n accessor: \"companyName\",\r\n },\r\n {\r\n Header: \"Company Email\",\r\n accessor: \"companyEmail\",\r\n },\r\n {\r\n Header: \"Package\",\r\n accessor: \"packageName\",\r\n\r\n },\r\n {\r\n Header: \"Start Date\",\r\n accessor: \"startDate\",\r\n Cell: (props) => {\r\n const startDate = props.row.original.startDate;\r\n return (\r\n dateFormat(startDate, \"mmm d, yyyy\")\r\n );\r\n },\r\n },\r\n {\r\n Header: \"End Date\",\r\n accessor: \"endDate\",\r\n Cell: (props) => {\r\n const endDate = props.row.original.endDate;\r\n return (\r\n dateFormat(endDate, \"mmm d, yyyy\")\r\n );\r\n },\r\n\r\n },\r\n {\r\n Header: \"Is Active\",\r\n accessor: \"isActive\",\r\n Cell: (props) => {\r\n const isActive = props.row.original.isActive == true ? \"Yes\" : \"No\";\r\n return (\r\n isActive\r\n );\r\n },\r\n\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n const rowIdx = props.row.original.companyPackageId;\r\n return (\r\n \r\n
\r\n Latest New Details
\r\n\r\n { editDetails(rowIdx) }}\r\n className=\"btn btn-primary btn-xs\">\r\n \r\n \r\n {/* deletenew(rowIdx)}\r\n className=\"btn btn-danger btn-xs\"\r\n style={{ margin: \"3px\" }}>\r\n \r\n */}\r\n\r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: companyPackages,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CompanyPackages;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { getLang, BindImageURL } from \"../utils/common\";\r\nimport { AlertError, AlertSuccess, AlertConfirm, LoadingAlert } from \"./f_Alerts\";\r\nimport Select from \"react-select\";\r\nimport { Form } from \"react-bootstrap\";\r\nimport { Steps } from 'rsuite';\r\nimport 'bs-stepper/dist/css/bs-stepper.min.css';\r\nimport Stepper from 'bs-stepper';\r\nimport 'bs-stepper/dist/css/bs-stepper.min.css';\r\nimport '../css/CustomStyle.css';\r\nimport $, { event } from 'jquery';\r\nimport dateFormat from \"dateformat\";\r\nimport { MultiSelect } from \"react-multi-select-component\";\r\nimport { validateEmail, generateNewID } from '../utils/common.js';\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\n\r\nconst CompanyPackageDetails = (props) => {\r\n\r\n\r\n var stepper = null;\r\n\r\n const _users = [];\r\n const myUser = {\r\n id: 0,\r\n name: '',\r\n email: '',\r\n userName: '',\r\n password: '',\r\n }\r\n\r\n const myPreRegistration = {\r\n id: 0,\r\n name: \"\",\r\n email: \"\",\r\n phoneNumber: \"\",\r\n message: \"\",\r\n preferredPackage: 0,\r\n isDeleted: false,\r\n isViewed: false,\r\n creationDate: null\r\n };\r\n\r\n const myCompany = {\r\n id: 0,\r\n name: \"\",\r\n email: \"\",\r\n phoneNumber: \"\",\r\n isDeleted: false,\r\n logo: ''\r\n };\r\n\r\n const myCompanyPackage = {\r\n id: 0,\r\n packageId: 0,\r\n companyId: 0,\r\n startDate: null,\r\n endDate: null,\r\n price: '',\r\n currency: '',\r\n numberOfUsers: '',\r\n isActive: false,\r\n isDeleted: false, \r\n \r\n };\r\n\r\n const [user, setUser] = useState([]);\r\n const [userArr, setTheArray] = useState([]);\r\n const [tblData, setTableDats] = useState([]);\r\n const [preRegistration, setPreRegistration] = useState(myPreRegistration);\r\n const [company, setCompany] = useState(myCompany);\r\n const [displayStep1, setDisplayStep1] = useState(true);\r\n const [resultPackage, setResultPackage] = useState([]);\r\n const [packagePermissions, setPackagePermissions] = useState([]);\r\n const [currencyResult, setCurrencyResult] = useState([]);\r\n const [resultCountry, emplistCountry] = useState([]);\r\n const [options, setoptions] = useState([]);\r\n const [selected, setSelected] = useState([]);\r\n const [companyPackage, setCompanyPackage] = useState(myCompanyPackage);\r\n const [userPackagePermissions, setUserPackagePermissions] = useState([]);\r\n const [save, setSave] = useState(\"Save\");\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isOpen2, setIsOpen2] = useState(false);\r\n const [isOpen3, setIsOpen3] = useState(false);\r\n const [title, setTitle] = React.useState(\"Users\");\r\n const [errorUsers, setErrorUsers] = React.useState([]);\r\n const [newPassword, setNewPassword] = React.useState(\"\");\r\n const [confirmPassword, setConfirmPassword] = React.useState(\"\");\r\n const [userName, setUserName] = React.useState(\"\");\r\n\r\n const [image, setImage] = useState('');\r\n const [displayView, setDisplayView] = useState(false);\r\n\r\n const userRef = useRef();\r\n userRef.current = userArr;\r\n\r\n useEffect(() => {\r\n stepper = new Stepper(document.querySelector('#stepper1'), {\r\n linear: false,\r\n animation: true\r\n });\r\n $('#test-l-1').removeClass('dstepper-none');\r\n }, []);\r\n\r\n useEffect(() => {\r\n APIFunctions.getAllCountries()\r\n .then((resp) => resp)\r\n .then((resp) => bindOptions(resp.data));\r\n }, []);\r\n\r\n const bindOptions = (data) => {\r\n var arr = [];\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n var ob = new Object();\r\n ob.label = data[i].nameEn;\r\n ob.value = data[i].countryId;\r\n arr.push(ob);\r\n }\r\n setoptions(arr);\r\n };\r\n\r\n const setNumberOfUsers = (e) => {\r\n setCompanyPackage({ ...companyPackage, numberOfUsers: e.target.value, });\r\n\r\n }\r\n\r\n function Table({ columns, data }) {\r\n // Use the state and functions returned from useTable to build your UI\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n rows,\r\n prepareRow,\r\n } = useTable({\r\n columns,\r\n data,\r\n })\r\n\r\n // Render the UI for your table\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Company Packages
\r\n\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n | {column.render('Header')} | \r\n ))}\r\n
|---|
| {cell.render('Cell')} | \r\n })}\r\n
\r\n _resetPassword(Id)}\r\n className=\" btn btn-primary btn-xs\"\r\n >\r\n \r\n \r\n _delete(Id)}\r\n style={{ margin: \"3px\" }}\r\n className=\" btn btn-danger btn-xs\"\r\n >\r\n \r\n \r\n\r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n\r\n const data = React.useMemo(() => userArr, [])\r\n const _columns = React.useMemo(() => columns, []);\r\n\r\n const renderHtml = () => {\r\n return (\r\n
);\r\n }\r\n\r\n\r\n\r\n const submitValues = (e) => {\r\n\r\n\r\n var errorMessage = 'Please enter: ';\r\n e.preventDefault();\r\n\r\n var valid = true;\r\n\r\n if (company.name == \"\" || company.name == null) {\r\n errorMessage = errorMessage + ' company name,'\r\n valid = false;\r\n }\r\n if (company.email == \"\" || company.email == null) {\r\n errorMessage = errorMessage + ' company email,'\r\n valid = false;\r\n }\r\n if (company.phoneNumber == \"\" || company.phoneNumber == null) {\r\n errorMessage = errorMessage + ' company phone number,'\r\n valid = false;\r\n }\r\n if (companyPackage.packageId == 0) {\r\n errorMessage = errorMessage + ' package,'\r\n valid = false;\r\n }\r\n if (companyPackage.startDate == 0) {\r\n errorMessage = errorMessage + ' package start date,'\r\n valid = false;\r\n }\r\n if (companyPackage.endDate == null) {\r\n errorMessage = errorMessage + ' package end date,'\r\n valid = false;\r\n }\r\n if (companyPackage.price == '' || companyPackage.price == null) {\r\n errorMessage = errorMessage + ' package price,'\r\n valid = false;\r\n }\r\n if (companyPackage.currency == '' || companyPackage.currency == null) {\r\n errorMessage = errorMessage + ' package price currency,'\r\n valid = false;\r\n }\r\n if (companyPackage.numberOfUsers == '' || companyPackage.numberOfUsers == null) {\r\n errorMessage = errorMessage + ' number of Users,'\r\n valid = false;\r\n }\r\n\r\n\r\n\r\n errorMessage = errorMessage.substring(0, errorMessage.length - 1);\r\n if (!valid) {\r\n AlertError(errorMessage)\r\n return;\r\n }\r\n if (!validateEmail(company.email)) {\r\n AlertError(\"Please enter a valid email\");\r\n return;\r\n }\r\n\r\n var _startDate = new Date(companyPackage.startDate);\r\n var _endDate = new Date(companyPackage.endDate);\r\n\r\n if (_startDate.getTime() > _endDate.getTime()) {\r\n AlertError(\"Start date must be greater than to date\");\r\n return;\r\n }\r\n\r\n\r\n if (parseInt(companyPackage.numberOfUsers) != userArr.length) {\r\n AlertError(\"Number of users must be equal to user accounts inserted\");\r\n return;\r\n }\r\n\r\n\r\n\r\n\r\n setSave(\"Saving...\");\r\n var data =\r\n {\r\n PreRegistrationId: 0,\r\n company: company,\r\n Id: parseInt(props.match.params.id),\r\n PackageId: companyPackage.packageId,\r\n Logo: companyPackage.logo,\r\n CompanyPackageId: parseInt(props.match.params.id),\r\n CompanyId: 0,\r\n CreationDate: companyPackage.creationDate,\r\n StartDate: dateFormat(companyPackage.startDate, 'yyyy-mm-dd'),\r\n EndDate: dateFormat(companyPackage.endDate, 'yyyy-mm-dd'),\r\n Price: companyPackage.price,\r\n Currency: companyPackage.currency,\r\n NumberOfUsers: companyPackage.numberOfUsers,\r\n IsActive: companyPackage.isActive,\r\n IsDeleted: false,\r\n cPackageDetails: userPackagePermissions,\r\n users: userArr\r\n }\r\n\r\n APIFunctions.updateCompanyPackage(data)\r\n .then((response) => {\r\n\r\n if (response.data.success) {\r\n AlertSuccess(\"Operation done successfully\");\r\n setSave(\"Save\");\r\n setTimeout(() => { props.history.push(\"/CompanyPackages\") }, 500);\r\n }\r\n else {\r\n setIsOpen2(true);\r\n setErrorUsers(response.data.users);\r\n //renderErrorMessage(response.data.users)\r\n setSave(\"Save\");\r\n return;\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n\r\n }\r\n\r\n const renderErrorMessage = () => {\r\n var item = errorUsers;\r\n if (item != null || item != undefined) {\r\n {\r\n return (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setCompany({ ...company, name: e.target.value, })}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n setCompany({ ...company, email: e.target.value, })}\r\n />\r\n
\r\n \r\n
\r\n {/* */}\r\n\r\n \r\n
\r\n \r\n \r\n setCompany({ ...company, phoneNumber: e.target.value, })}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n \r\n viewResource()}>\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {renderPackagePermissions()}\r\n {/*\r\n Save\r\n */}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n return obj.id == companyPackage.packageId;\r\n })}\r\n getOptionLabel={(option) => option.nameEn}\r\n getOptionValue={(option) => option.id}\r\n options={resultPackage}\r\n onChange={handlPackageChange}\r\n >\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n setCompanyPackage({ ...companyPackage, startDate: e.target.value, })}\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n setCompanyPackage({ ...companyPackage, endDate: e.target.value, })}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setCompanyPackage({ ...companyPackage, price: e.target.value, })}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n return obj.id == companyPackage.currency;\r\n })}\r\n getOptionLabel={(option) => option.name}\r\n getOptionValue={(option) => option.id}\r\n options={currencyResult}\r\n onChange={handleCurrencyChange}\r\n >\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setCompanyPackage({ ...companyPackage, numberOfUsers: e.target.value, })}\r\n />\r\n
\r\n \r\n
\r\n \r\n setCompanyPackage({ ...companyPackage, isActive: e.target.checked })}\r\n >\r\n \r\n
\r\n \r\n \r\n {renderPackagePermissions()}\r\n {/*
\r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n \r\n Reset Password \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {save}\r\n \r\n \r\n Cancel\r\n \r\n
\r\n User Details
\r\n\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n { setUser({ ...user, password: e.target.value }) }}\r\n onChange={(e) => { setUser({ ...user, name: e.target.value }) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n { setUser({ ...user, email: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n { setUser({ ...user, userName: e.target.value }) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n { setUser({ ...user, password: e.target.value }) }}\r\n />\r\n
\r\n \r\n\r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n { setNewPassword(e.target.value) }}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n { setConfirmPassword(e.target.value) }}\r\n />\r\n
\r\n - {item.map((val, idx) => (\r\n
- {val.type + \": \"} {val.value + \" \" + val.message} \r\n ))}
\r\n {packagePermissions.map((val, idx) => (\r\n
);\r\n }\r\n }\r\n\r\n\r\n\r\n return (\r\n\r\n \r\n
\r\n ))\r\n }\r\n \r\n
\r\n \r\n \r\n {val.pageName}\r\n
\r\n \r\n \r\n option.countryId}\r\n options={options}\r\n value={getValueByPackageId(val.id)}\r\n onChange={(e) => { setCountryLimit(e, val.id) }}\r\n labelledBy=\"Select\"\r\n />\r\n
\r\n \r\n \r\n \r\n Unaccepted Users \r\n {/* */}\r\n \r\n \r\n {isOpen2 && renderErrorMessage()}\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n );\r\n};\r\n\r\nexport default CompanyPackageDetails;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport \"../css/CustomStyle.css\";\r\nimport { Alert, LoadingAlert, AlertError } from \"../components/f_Alerts\";\r\nimport jsPDF from \"jspdf\";\r\nimport {\r\n getIMF,\r\n displayPricingPop,\r\n getLang,\r\n ArialBold,\r\n ArialRegular,\r\n BindImageURL,\r\n} from \"../utils/common\";\r\nimport \"jspdf-autotable\";\r\nimport lastPage from \"../Assets/Images/lastPage.png\";\r\nimport rightBg2 from \"../Assets/Images/rightBg.png\";\r\nimport left from \"../Assets/Images/left.png\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\n\r\n// Benchmark Backup\r\nclass Pricing2 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n userInfo: {\r\n name: \"\",\r\n email: \"\",\r\n companyName: \"\",\r\n packageId: 0,\r\n startDate: null,\r\n endDate: null,\r\n logo: \"\",\r\n },\r\n imfType: \"\",\r\n svgToInsert: \"\",\r\n imageData: \"\",\r\n imgSource: \"\",\r\n wbType: \"\",\r\n result: [],\r\n };\r\n this.bindData = this.bindData.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n var svg = this.props.svg;\r\n var _svg = svg;\r\n\r\n var encodedData = btoa(unescape(encodeURIComponent(_svg)));\r\n var source = \"data:image/svg+xml;base64,\" + encodedData;\r\n this.setState({ imgSource: source });\r\n let image = new Image();\r\n image.src = source;\r\n var canvas = document.querySelector(\"canvas\");\r\n var context = canvas.getContext(\"2d\", { preserveDrawingBuffer: true });\r\n context.imageSmoothingEnabled = false;\r\n context.mozImageSmoothingEnabled = false;\r\n context.webkitImageSmoothingEnabled = false;\r\n context.msImageSmoothingEnabled = false;\r\n //context.fillStyle = \"white\";\r\n context.canvas.width = 1250;\r\n context.canvas.height = 500;\r\n image.onload = function () {\r\n context.drawImage(image, 0, 0);\r\n };\r\n\r\n // change non-opaque pixels to white\r\n var imgData = context.getImageData(0, 0, canvas.width, canvas.height);\r\n var data = imgData.data;\r\n for (var i = 0; i < data.length; i += 4) {\r\n if (data[i + 3] < 255) {\r\n data[i] = 255;\r\n data[i + 1] = 255;\r\n data[i + 2] = 255;\r\n data[i + 3] = 255;\r\n }\r\n }\r\n\r\n context.putImageData(imgData, 0, 0);\r\n\r\n var dataURL = \"\";\r\n setTimeout(\r\n function () {\r\n var canvas = document.querySelector(\"canvas\");\r\n dataURL = canvas.toDataURL(\"image/jpeg\");\r\n this.setState({ imageData: dataURL });\r\n }.bind(this),\r\n 300\r\n );\r\n\r\n var obj = [];\r\n var _awards = this.props.awards;\r\n var imF = getIMF() == \"true\" ? true : false;\r\n var txtIMF = this.props.filters.IsIMF == true ? \"IMF\" : \"WB\";\r\n var txtPPP = this.props.filters.IsPPP == true ? \"PPP\" : \"nominal\";\r\n\r\n this.setState({ imfType: txtIMF, wbType: txtPPP });\r\n\r\n console.log(this.props.awards);\r\n if (this.props.filters.uniqueAwards == true) {\r\n _awards.map((val, idx) =>\r\n obj.push([\r\n val.countryName,\r\n displayPricingPop(val.pop),\r\n val.gdp == null\r\n ? \"\"\r\n : val.gdp\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(?\r\n obj.push([\r\n val.countryName,\r\n displayPricingPop(val.pop),\r\n val.gdp == null\r\n ? \"\"\r\n : val.gdp\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? resp)\r\n .then((resp) => this.bindData(resp.data));\r\n }\r\n\r\n bindData(obj) {\r\n this.state.userInfo = obj;\r\n\r\n setTimeout(() => {\r\n this.downloadData();\r\n LoadingAlert(\"Hide\");\r\n }, 5000);\r\n }\r\n\r\n downloadData() {\r\n if (getLang() == \"ar\") {\r\n var callAddFont = function () {\r\n this.addFileToVFS(\"arial-normal.ttf\", ArialRegular);\r\n this.addFont(\"arial-normal.ttf\", \"arial\", \"normal\");\r\n\r\n this.addFileToVFS(\"arialbd-bold.ttf\", ArialBold);\r\n this.addFont(\"arialbd-bold.ttf\", \"arial\", \"bold\");\r\n };\r\n\r\n jsPDF.API.events.push([\"addFonts\", callAddFont]);\r\n }\r\n\r\n window.jsPDF = jsPDF;\r\n const leftBg = left;\r\n const rightBg = rightBg2;\r\n const chart = \"\";\r\n\r\n const lastPageBgFull = lastPage;\r\n const textAlign = getLang() === \"ar\" ? \"right\" : \"left\";\r\n\r\n var doc = new jsPDF(\"p\", \"mm\", [297, 210]);\r\n if (getLang() == \"ar\") {\r\n doc.setLanguage(\"ar\");\r\n doc.setFont(\"arial\", \"bold\");\r\n }\r\n\r\n let dateOptions = { year: \"numeric\", month: \"long\", day: \"numeric\" };\r\n const dateStr = new Date().toLocaleString(\"en-LB\", dateOptions);\r\n\r\n /*==================================================\r\n PAGE 1\r\n ================================================*/\r\n\r\n //top left background\r\n doc.addImage(leftBg, \"png\", 0, 0, 145, 300);\r\n //top right background\r\n doc.addImage(rightBg, \"png\", 195, 0, 14, 300);\r\n\r\n if (this.state.userInfo.logo != null) {\r\n var logo = this.state.userInfo.logo;\r\n var fileExtension = logo.split(\".\").pop();\r\n const Image = BindImageURL(this.state.userInfo.logo);\r\n doc.addImage(Image, fileExtension, 158, 10, (10 * 853) / 210, 10, \"logo\");\r\n }\r\n\r\n // SPECTRUM PRICING\r\n doc.setFontSize(35);\r\n doc.setTextColor(89, 89, 89);\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 40,\r\n 100,\r\n getValue(\"PDFTitle\", getLang()),\r\n { align: textAlign }\r\n );\r\n\r\n //PARAGRAPH under SPECTRUM PRICING\r\n doc.setFontSize(13);\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 40,\r\n 115,\r\n getValue(\"Abstract\", getLang()),\r\n { maxWidth: 132, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n if (getLang() != \"ar\") doc.line(40, 116, 58, 116);\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 40,\r\n 140,\r\n getValue(\"AwardDate\", getLang()) + dateStr,\r\n { maxWidth: 132, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n\r\n if (getLang() != \"ar\") doc.line(40, 141, 51, 141);\r\n\r\n //footer email\r\n\r\n /*==================================================\r\n PAGE 2\r\n ================================================*/\r\n\r\n doc.addPage();\r\n //doc.addImage(logo, \"png\", 171, 10, 6 * 853 / 210, 6, \"logo\");\r\n\r\n //user information\r\n doc.setFontSize(10);\r\n doc.setFont(undefined, \"bold\");\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 20,\r\n getValue(\"UserInformation\", getLang()),\r\n { align: textAlign }\r\n );\r\n if (getLang() === \"ar\") {\r\n let arHead = [\r\n [\r\n {\r\n content: getValue(\"UserRunInformation\", getLang()),\r\n colSpan: 2,\r\n styles: { halign: \"center\" },\r\n },\r\n ],\r\n ];\r\n\r\n arHead = arHead.map((r) => r.reverse());\r\n\r\n let arBody = [\r\n [getValue(\"User\", getLang()), this.state.userInfo.name],\r\n [getValue(\"Organisation\", getLang()), this.state.userInfo.companyName],\r\n [getValue(\"AwardDate\", getLang()), dateStr],\r\n [\"S/W Version\", \"Release 2.01\"],\r\n ];\r\n\r\n arBody = arBody.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1, font: \"arial\" },\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n startY: 25,\r\n headerStyles: {\r\n font: \"arial\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n head: arHead,\r\n body: arBody,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1 },\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n startY: 25,\r\n head: [\r\n [\r\n {\r\n content: getValue(\"UserRunInformation\", getLang()),\r\n colSpan: 2,\r\n styles: { halign: \"center\" },\r\n },\r\n ],\r\n ],\r\n body: [\r\n [getValue(\"User\", getLang()), this.state.userInfo.name],\r\n [\r\n getValue(\"Organisation\", getLang()),\r\n this.state.userInfo.companyName,\r\n ],\r\n [getValue(\"AwardDate\", getLang()), dateStr],\r\n [\"S/W Version\", \"Release 2.01\"],\r\n ],\r\n });\r\n }\r\n\r\n //SELECTED PARAMETERS OF AWARDS\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 63,\r\n getValue(\"SelectedParameteres\", getLang()),\r\n { align: textAlign }\r\n );\r\n if (getLang() == \"ar\") {\r\n let arHead2 = [\r\n [\r\n getValue(\"Parameter\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ];\r\n arHead2 = arHead2.map((r) => r.reverse());\r\n\r\n let arBody2 = [\r\n [\r\n getValue(\"SingleBand\", getLang()),\r\n this.props.filters.IsSingle == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"MultiBand\", getLang()),\r\n this.props.filters.IsMultiple == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithPaired\", getLang()),\r\n this.props.filters.IsPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithUnPaired\", getLang()),\r\n this.props.filters.IsUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithBoth\", getLang()),\r\n this.props.filters.IsPairedAndUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"RegionalLicenses\", getLang()),\r\n this.props.filters.RegionalLicense == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [getValue(\"MinGDPUS$\", getLang()), this.props.filters.MinGDP],\r\n [getValue(\"MaxGDPUS$\", getLang()), this.props.filters.MaxGDP],\r\n [getValue(\"AwardsFrom\", getLang()), this.props.filters.FromYear],\r\n [getValue(\"AwardsTo\", getLang()), this.props.filters.ToYear],\r\n ];\r\n arBody2 = arBody2.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1, font: \"arial\" },\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n headerStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n startY: 67,\r\n head: arHead2,\r\n body: arBody2,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1 },\r\n startY: 67,\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n head: [\r\n [\r\n getValue(\"Parameter\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ],\r\n body: [\r\n [\r\n getValue(\"SingleBand\", getLang()),\r\n this.props.filters.IsSingle == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"MultiBand\", getLang()),\r\n this.props.filters.IsMultiple == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithPaired\", getLang()),\r\n this.props.filters.IsPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithUnPaired\", getLang()),\r\n this.props.filters.IsUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithBoth\", getLang()),\r\n this.props.filters.IsPairedAndUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"RegionalLicenses\", getLang()),\r\n this.props.filters.RegionalLicense == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [getValue(\"MinGDPUS$\", getLang()), this.props.filters.MinGDP],\r\n [getValue(\"MaxGDPUS$\", getLang()), this.props.filters.MaxGDP],\r\n [getValue(\"AwardsFrom\", getLang()), this.props.filters.FromYear],\r\n [getValue(\"AwardsTo\", getLang()), this.props.filters.ToYear],\r\n ],\r\n });\r\n }\r\n\r\n //SELECTED PARAMETERS FOR ANALYSIS\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 140,\r\n getValue(\"SelParametersForAna\", getLang()),\r\n { align: textAlign }\r\n );\r\n if (getLang() == \"ar\") {\r\n //table head\r\n let arHead3 = [\r\n [\r\n getValue(\"AnalysisOptions\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ];\r\n arHead3 = arHead3.map((r) => r.reverse());\r\n\r\n let arBody3 = [\r\n [getValue(\"Term\", getLang()), this.props.filters.term],\r\n [getValue(\"DiscountRate\", getLang()), this.props.filters.discountRate],\r\n [getValue(\"IssueDate\", getLang()), this.props.filters.issueDate],\r\n [\r\n getValue(\"AwardsTypsPa\", getLang()),\r\n this.props.filters.uniqueAwards == true\r\n ? getValue(\"UniqueAwards\", getLang())\r\n : this.props.filters.averageAwards == true\r\n ? getValue(\"AvgUnitPrice\", getLang())\r\n : getValue(\"AvgBySum\", getLang()),\r\n ],\r\n\r\n [\r\n getValue(\"BlockMHzParam\", getLang()),\r\n this.props.filters.sumBand == \"p\"\r\n ? getValue(\"Paired\", getLang())\r\n : this.props.filters.sumBand == \"u\"\r\n ? getValue(\"Unpaired\", getLang())\r\n : getValue(\"PairedUnpaired\", getLang()),\r\n ],\r\n [\r\n getValue(\"ExcludeOutliers\", getLang()),\r\n this.props.filters.outliers == \"-1\"\r\n ? getValue(\"NotIncluded\", getLang())\r\n : this.props.filters.outliers == \"0\"\r\n ? getValue(\"Percentile\", getLang())\r\n : this.props.filters.outliers == \"1\"\r\n ? getValue(\"IterativeRegression\", getLang())\r\n : this.props.filters.outliers == \"2\"\r\n ? getValue(\"Interquartile\", getLang())\r\n : this.props.filters.outliers == \"3\"\r\n ? getValue(\"StandardDeviation\", getLang())\r\n : getValue(\"AutoFiltering\", getLang()),\r\n ],\r\n // this.props.filters.outliers != \"-1\" ?\r\n this.props.filters.outliers == \"0\"\r\n ? [getValue(\"Upper%\", getLang()), this.props.filters.UpperPercentile]\r\n : this.props.filters.outliers == \"1\"\r\n ? [\"%\", this.props.filters.regression]\r\n : this.props.filters.outliers == \"2\"\r\n ? [getValue(\"kValue\", getLang()), this.props.filters.KValue]\r\n : this.props.filters.outliers == \"3\"\r\n ? [\r\n getValue(\"StandardDeviation\", getLang()),\r\n this.props.filters.StandardDeviationValue,\r\n ]\r\n : [,],\r\n\r\n this.props.filters.outliers == \"0\"\r\n ? [getValue(\"Lower%\", getLang()), this.props.filters.LowerPercentile]\r\n : [,],\r\n ];\r\n arBody3 = arBody3.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1, font: \"arial\" },\r\n\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n headerStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n startY: 144,\r\n head: arHead3,\r\n body: arBody3,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1 },\r\n startY: 144,\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n head: [\r\n [\r\n getValue(\"AnalysisOptions\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ],\r\n body: [\r\n [getValue(\"Term\", getLang()), this.props.filters.term],\r\n [\r\n getValue(\"DiscountRate\", getLang()),\r\n this.props.filters.discountRate,\r\n ],\r\n [getValue(\"IssueDate\", getLang()), this.props.filters.issueDate],\r\n [\r\n \"Awards within same auction are\",\r\n this.props.filters.uniqueAwards == true\r\n ? getValue(\"UniqueAwards\", getLang())\r\n : this.props.filters.averageAwards == true\r\n ? getValue(\"AvgUnitPrice\", getLang())\r\n : getValue(\"AvgBySum\", getLang()),\r\n ],\r\n\r\n [\r\n \"Block MHz considered in paired + unpaired Awards\",\r\n this.props.filters.sumBand == \"p\"\r\n ? getValue(\"Paired\", getLang())\r\n : this.props.filters.sumBand == \"u\"\r\n ? getValue(\"Unpaired\", getLang())\r\n : getValue(\"PairedUnpaired\", getLang()),\r\n ],\r\n [\r\n \"Exclude Outliers\",\r\n this.props.filters.outliers == \"-1\"\r\n ? getValue(\"NotIncluded\", getLang())\r\n : this.props.filters.outliers == \"0\"\r\n ? getValue(\"Percentile\", getLang())\r\n : this.props.filters.outliers == \"1\"\r\n ? getValue(\"IterativeRegression\", getLang())\r\n : this.props.filters.outliers == \"2\"\r\n ? getValue(\"Interquartile\", getLang())\r\n : this.props.filters.outliers == \"3\"\r\n ? getValue(\"StandardDeviation\", getLang())\r\n : getValue(\"AutoFiltering\", getLang()),\r\n ],\r\n // this.props.filters.outliers != \"-1\" ?\r\n this.props.filters.outliers == \"0\"\r\n ? [\r\n getValue(\"Upper%\", getLang()),\r\n this.props.filters.UpperPercentile,\r\n ]\r\n : this.props.filters.outliers == \"1\"\r\n ? [\"%\", this.props.filters.regression]\r\n : this.props.filters.outliers == \"2\"\r\n ? [getValue(\"kValue\", getLang()), this.props.filters.KValue]\r\n : this.props.filters.outliers == \"3\"\r\n ? [\r\n getValue(\"StandardDeviation\", getLang()),\r\n this.props.filters.StandardDeviationValue,\r\n ]\r\n : [,],\r\n\r\n this.props.filters.outliers == \"0\"\r\n ? [\r\n getValue(\"Lower%\", getLang()),\r\n this.props.filters.LowerPercentile,\r\n ]\r\n : [,],\r\n ],\r\n });\r\n }\r\n\r\n //SSELECTED ADJUSTMENTS\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 205,\r\n getValue(\"SelectedAdjustments\", getLang()),\r\n { align: textAlign }\r\n );\r\n\r\n if (getLang() == \"ar\") {\r\n //table head\r\n let arHead4 = [\r\n [\r\n getValue(\"Adjustment\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ];\r\n arHead4 = arHead4.map((r) => r.reverse());\r\n\r\n let arBody4 = [\r\n [\r\n getValue(\"AdjustInflation\", getLang()),\r\n this.props.filters.AdjustByInflationFactor == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"AdjustPPPFactor\", getLang()),\r\n this.props.filters.AdjustByPPPFactor == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"AddAnualPmt\", getLang()),\r\n this.props.filters.IsIncludeAnnual == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"NormalizeByGDPc\", getLang()),\r\n this.props.filters.AdjustByGDPFactor == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"AnnualizePrices\", getLang()),\r\n this.props.filters.AnnualizePrice == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n ];\r\n arBody4 = arBody4.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1, font: \"arial\" },\r\n startY: 209,\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n headerStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n head: arHead4,\r\n body: arBody4,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1 },\r\n startY: 209,\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n head: [\r\n [\r\n getValue(\"Adjustment\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ],\r\n body: [\r\n [\r\n getValue(\"AdjustInflation\", getLang()),\r\n this.props.filters.AdjustByInflationFactor == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"AdjustPPPFactor\", getLang()),\r\n this.props.filters.AdjustByPPPFactor == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"AddAnualPmt\", getLang()),\r\n this.props.filters.IsIncludeAnnual == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"NormalizeByGDPc\", getLang()),\r\n this.props.filters.AdjustByGDPFactor == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n [\r\n getValue(\"AnnualizePrices\", getLang()),\r\n this.props.filters.AnnualizePrice == true\r\n ? getValue(\"Yes\", getLang())\r\n : getValue(\"No\", getLang()),\r\n ],\r\n ],\r\n });\r\n }\r\n\r\n /*==================================================\r\n PAGE 3\r\n ================================================*/\r\n doc.addPage();\r\n // doc.addImage(logo, \"png\", 171, 10, 6 * 853 / 210, 6, \"logo\");\r\n\r\n //SPECTRE ANALYSIS RESULTS\r\n doc.setFontSize(10);\r\n doc.setFont(undefined, \"bold\");\r\n //doc.text(20, 20, getValue(\"SpectreAnalysisResult\", getLang()));\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 20,\r\n getValue(\"SpectreAnalysisResult\", getLang()),\r\n { align: textAlign }\r\n );\r\n doc.setFont(undefined, \"normal\");\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 28,\r\n getValue(\"PricingResultDescP1\", getLang()) +\r\n this.props.filters.term +\r\n getValue(\"PricingResultDescP2\", getLang()) +\r\n this.props.filters.discountRate +\r\n getValue(\"PricingResultDescP3\", getLang()),\r\n getLang() === \"ar\" ? \"right\" : \"left\",\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n\r\n if (getLang() == \"ar\") {\r\n let arHead5 = [\r\n this.props.filters.uniqueAwards == true\r\n ? [\r\n getValue(\"Countries\", getLang()),\r\n getValue(\"Pop\", getLang()),\r\n \"GDPc, US$\",\r\n getValue(\"Operator\", getLang()),\r\n getValue(\"AwardDate\", getLang()),\r\n getValue(\"Price$M\", getLang()),\r\n getValue(\"Term\", getLang()),\r\n getValue(\"Band\", getLang()),\r\n this.props.filters.Header,\r\n ]\r\n : [\r\n getValue(\"Countries\", getLang()),\r\n getValue(\"Pop\", getLang()),\r\n getValue(\"Price$M\", getLang()),\r\n getValue(\"AwardDate\", getLang()),\r\n getValue(\"Term\", getLang()),\r\n getValue(\"Band\", getLang()),\r\n this.props.filters.Header,\r\n ],\r\n ];\r\n arHead5 = arHead5.map((r) => r.reverse());\r\n\r\n let arBody5 = this.state.result;\r\n arBody5 = arBody5.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 8, cellPadding: 1, font: \"arial\" },\r\n startY: 43,\r\n headerStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n head: arHead5,\r\n body: arBody5,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 8, cellPadding: 1 },\r\n startY: 43,\r\n head: [\r\n this.props.filters.uniqueAwards == true\r\n ? [\r\n getValue(\"Countries\", getLang()),\r\n getValue(\"Pop\", getLang()),\r\n \"GDPc, US$\",\r\n getValue(\"Operator\", getLang()),\r\n getValue(\"AwardDate\", getLang()),\r\n getValue(\"Price$M\", getLang()),\r\n getValue(\"Term\", getLang()),\r\n getValue(\"Band\", getLang()),\r\n this.props.filters.Header,\r\n ]\r\n : [\r\n getValue(\"Countries\", getLang()),\r\n getValue(\"Pop\", getLang()),\r\n getValue(\"Price$M\", getLang()),\r\n getValue(\"AwardDate\", getLang()),\r\n getValue(\"Term\", getLang()),\r\n getValue(\"Band\", getLang()),\r\n this.props.filters.Header,\r\n ],\r\n ],\r\n body: this.state.result,\r\n });\r\n }\r\n\r\n let finalY = doc.lastAutoTable.finalY; // The y position on the page\r\n\r\n if (finalY > 210 - 50) {\r\n doc.addPage();\r\n finalY = 20;\r\n }\r\n\r\n doc\r\n .text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 5,\r\n getValue(\"Notes\", getLang()),\r\n getLang() === \"ar\" ? \"right\" : \"left\"\r\n )\r\n .setFontSize(8);\r\n // doc.text(getValue(\"Notes\", getLang()), 20, finalY + 5).setFontSize(8);\r\n doc.setFont(undefined, \"normal\");\r\n doc\r\n .text(\r\n \"1. \" + getValue(\"NormalizeNote\", getLang()),\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 10,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n doc\r\n .text(\r\n \"2. \" + getValue(\"AnnualizeNote\", getLang()),\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 20,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n doc.text(\r\n \"3. \" +\r\n getValue(\"GDPNoteP1\", getLang()) +\r\n \" \" +\r\n this.state.wbType +\r\n \" \" +\r\n getValue(\"GDPNoteP2\", getLang()),\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 30,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n doc\r\n .text(\r\n \"4. \" + getValue(\"SocialNote\", getLang()) + \" \" + this.state.imfType,\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 35,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n /*==================================================\r\n PAGE 4\r\n ================================================*/\r\n\r\n doc.addPage();\r\n //doc.addImage(logo, \"png\", 171, 10, 6 * 853 / 210, 6, \"logo\");\r\n\r\n //notes\r\n doc.setFont(undefined, \"bold\");\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 20,\r\n getValue(\"GraphicalPresentation\", getLang()),\r\n { align: textAlign }\r\n );\r\n //doc.text(getValue(\"GraphicalPresentation\", getLang()), 20, 20);\r\n doc.setFont(undefined, \"normal\");\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 30,\r\n getValue(\"PricingGraphPresDesc\", getLang()),\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n\r\n doc.addImage(this.state.imageData, \"jpeg\", 20, 60, (111 * 1400) / 834, 111);\r\n // doc.addImage(this.state.imageData, \"png\", 20, 80, 111 * 1314 / 834, 111);\r\n\r\n //footer\r\n\r\n /*==================================================\r\n LAST PAGE\r\n ================================================*/\r\n\r\n doc.addPage();\r\n doc.addImage(lastPageBgFull, \"png\", 0, 0, 297, 300);\r\n //doc.addImage(logo, \"png\", 18, 80, 10 * 853 / 210, 10, \"logo\");\r\n\r\n //notes\r\n doc.setFont(undefined, \"normal\");\r\n doc.setFontSize(11);\r\n doc.text(\r\n getValue(\"LastPageNote\", getLang()),\r\n getLang() == \"ar\" ? 195 : 20,\r\n 100,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n doc.textWithLink(\"www.spectre.com\", 20, 115, {\r\n url: \"http://www.spectre.com\",\r\n });\r\n //download pdf\r\n\r\n const pageCount = doc.internal.getNumberOfPages();\r\n for (var i = 1; i < pageCount; i++) {\r\n doc.setFont(undefined, \"normal\");\r\n doc.setPage(i);\r\n doc.text(\"SPECTRE Report\", 20, 290);\r\n doc.text(`Page | ` + i, 100, 290);\r\n doc.text(dateStr, 167, 290);\r\n }\r\n\r\n doc.save(\"report.pdf\");\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Pricing2;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport dateFormat from \"dateformat\";\r\nimport Select from \"react-select\";\r\nimport { ReactExcel, readFile, generateObjects } from \"@ramonak/react-excel\";\r\nimport { useTable, useSortBy, usePagination } from \"react-table\";\r\nimport YearPicker from \"react-year-picker\";\r\nimport DatePicker from \"react-datepicker\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { MultiSelect } from \"react-multi-select-component\";\r\nimport \"../css/CustomStyle.css\";\r\nimport { Alert, LoadingAlert, AlertError } from \"../components/f_Alerts\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport { BindImageURL, validateEmail, getLang } from \"../utils/common\";\r\n\r\n// Valuation Backup\r\nconst Valuations2 = (props) => {\r\n // var newClassName = \"current-menu-item\";\r\n // var element_social_id = \"social-active\";\r\n // var element_awards_id = \"awards-active\";\r\n // var element_pricing_id = \"pricing-active\";\r\n // var element = document.getElementById(element_pricing_id);\r\n // document.getElementById(\"pricing-active\").classList.remove(\"current-menu-item\");\r\n // document.getElementById(\"social-active\").classList.remove(\"current-menu-item\");\r\n // element.className += \" \" + newClassName;\r\n\r\n /************************\r\n * Drawer Script\r\n ***********************/\r\n\r\n var drawer = function () {\r\n /**\r\n * Element.closest() polyfill\r\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill\r\n */\r\n if (!Element.prototype.closest) {\r\n if (!Element.prototype.matches) {\r\n Element.prototype.matches =\r\n Element.prototype.msMatchesSelector ||\r\n Element.prototype.webkitMatchesSelector;\r\n }\r\n Element.prototype.closest = function (s) {\r\n var el = this;\r\n var ancestor = this;\r\n if (!document.documentElement.contains(el)) return null;\r\n do {\r\n if (ancestor.matches(s)) return ancestor;\r\n ancestor = ancestor.parentElement;\r\n } while (ancestor !== null);\r\n return null;\r\n };\r\n }\r\n\r\n // Trap Focus\r\n // https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element\r\n //\r\n function trapFocus(element) {\r\n var focusableEls = element.querySelectorAll(\r\n 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type=\"text\"]:not([disabled]), input[type=\"radio\"]:not([disabled]), input[type=\"checkbox\"]:not([disabled]), select:not([disabled])'\r\n );\r\n var firstFocusableEl = focusableEls[0];\r\n var lastFocusableEl = focusableEls[focusableEls.length - 1];\r\n var KEYCODE_TAB = 9;\r\n\r\n element.addEventListener(\"keydown\", function (e) {\r\n var isTabPressed = e.key === \"Tab\" || e.keyCode === KEYCODE_TAB;\r\n\r\n if (!isTabPressed) {\r\n return;\r\n }\r\n\r\n if (e.shiftKey) {\r\n /* shift + tab */ if (document.activeElement === firstFocusableEl) {\r\n lastFocusableEl.focus();\r\n e.preventDefault();\r\n }\r\n } /* tab */ else {\r\n if (document.activeElement === lastFocusableEl) {\r\n firstFocusableEl.focus();\r\n e.preventDefault();\r\n }\r\n }\r\n });\r\n }\r\n\r\n //\r\n // Settings\r\n //\r\n var settings = {\r\n speedOpen: 50,\r\n speedClose: 350,\r\n activeClass: \"is-active\",\r\n visibleClass: \"is-visible\",\r\n selectorTarget: \"[data-drawer-target]\",\r\n selectorTrigger: \"[data-drawer-trigger]\",\r\n selectorClose: \"[data-drawer-close]\",\r\n };\r\n\r\n //\r\n // Methods\r\n //\r\n\r\n // Toggle accessibility\r\n var toggleAccessibility = function (event) {\r\n if (event.getAttribute(\"aria-expanded\") === \"true\") {\r\n event.setAttribute(\"aria-expanded\", false);\r\n } else {\r\n event.setAttribute(\"aria-expanded\", true);\r\n }\r\n };\r\n\r\n // Open Drawer\r\n var openDrawer = function (trigger) {\r\n // Find target\r\n var target = document.getElementById(\r\n trigger.getAttribute(\"aria-controls\")\r\n );\r\n\r\n // Make it active\r\n target.classList.add(settings.activeClass);\r\n\r\n // Make body overflow hidden so it's not scrollable\r\n document.documentElement.style.overflow = \"hidden\";\r\n\r\n // Toggle accessibility\r\n toggleAccessibility(trigger);\r\n\r\n // Make it visible\r\n setTimeout(function () {\r\n target.classList.add(settings.visibleClass);\r\n trapFocus(target);\r\n }, settings.speedOpen);\r\n };\r\n\r\n // Close Drawer\r\n var closeDrawer = function (event) {\r\n // Find target\r\n var closestParent = event.closest(settings.selectorTarget),\r\n childrenTrigger = document.querySelector(\r\n '[aria-controls=\"' + closestParent.id + '\"'\r\n );\r\n\r\n // Make it not visible\r\n closestParent.classList.remove(settings.visibleClass);\r\n\r\n // Remove body overflow hidden\r\n document.documentElement.style.overflow = \"\";\r\n\r\n // Toggle accessibility\r\n toggleAccessibility(childrenTrigger);\r\n\r\n // Make it not active\r\n setTimeout(function () {\r\n closestParent.classList.remove(settings.activeClass);\r\n }, settings.speedClose);\r\n };\r\n\r\n // Click Handler\r\n var clickHandler = function (event) {\r\n // Find elements\r\n var toggle = event.target,\r\n open = toggle.closest(settings.selectorTrigger),\r\n close = toggle.closest(settings.selectorClose);\r\n\r\n // Open drawer when the open button is clicked\r\n if (open) {\r\n openDrawer(open);\r\n }\r\n\r\n // Close drawer when the close button (or overlay area) is clicked\r\n if (close) {\r\n closeDrawer(close);\r\n }\r\n\r\n // Prevent default link behavior\r\n if (open || close) {\r\n event.preventDefault();\r\n }\r\n };\r\n\r\n // Keydown Handler, handle Escape button\r\n var keydownHandler = function (event) {\r\n if (event.key === \"Escape\" || event.keyCode === 27) {\r\n // Find all possible drawers\r\n var drawers = document.querySelectorAll(settings.selectorTarget),\r\n i;\r\n\r\n // Find active drawers and close them when escape is clicked\r\n for (i = 0; i < drawers.length; ++i) {\r\n if (drawers[i].classList.contains(settings.activeClass)) {\r\n closeDrawer(drawers[i]);\r\n }\r\n }\r\n }\r\n };\r\n\r\n //\r\n // Inits & Event Listeners\r\n //\r\n document.addEventListener(\"click\", clickHandler, false);\r\n document.addEventListener(\"keydown\", keydownHandler, false);\r\n };\r\n\r\n drawer();\r\n\r\n /************************\r\n * Drawer Script end\r\n ***********************/\r\n\r\n const [columns, setColumns] = useState([]);\r\n const [columnsValuation, setColumnsValuation] = useState([]);\r\n const [selected, setSelected] = useState([]);\r\n const [SelectedBands, setSelectedBands] = useState([]);\r\n\r\n const [popCoveredValue, setPopCoveredValue] = useState(\"\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"Transitioning...\");\r\n const [selectedBandRows, setSelectedBandRows] = useState([]);\r\n\r\n const [bands, setBands] = useState([]);\r\n const [bandId, setBandId] = useState(\"\");\r\n const [regressionVisibilityValue, setRegressionVisibilityValue] =\r\n useState(\"none\");\r\n const [isPPPValue, setPPPValue] = useState(\"\");\r\n const [quartileVisibiltyValue, setquatileVisibiltyValue] = useState(\"none\");\r\n const [standardDeviationValue, setstandardDeviationValue] = useState(\"none\");\r\n const [upperPercentileValue, setUpperPercentileValue] = useState(\"none\");\r\n const [lowerPercentileValue, setLowerPercentileValue] = useState(\"none\");\r\n\r\n const [hasPercentileValue, setHasPercentileValue] = useState(false);\r\n\r\n const [regionalLicenseValue, setRegionalLicenseValue] = useState(false);\r\n const [methodTypeValue, setMethodTypeValue] = useState(false);\r\n const [annualPaymentsValue, setAnnualPaymentsValue] = useState(false);\r\n const [annualPrizeValue, setAnnualPrizeValue] = useState(false);\r\n\r\n const [selectedPaired, setSelectedPaired] = useState([]);\r\n const [regionalLicenseForFilter, setRegionalLicenseForFilter] =\r\n useState(false);\r\n const [methodTypeValueForFilter, setMethodTypeValueForFilter] =\r\n useState(false);\r\n\r\n const [adjustByPPPValueForFilter, setAdjustByPPPValueForFilter] = useState(0);\r\n const [normalizeByGDPValue, setNormalizeByGDPValue] = useState(0);\r\n const [inflationFactorValue, setInflationFactorValue] = useState(0);\r\n const [normalizeByGdp, setNormalizeByGdp] = useState(0);\r\n const [inflationFactor, setInflationFactor] = useState(0);\r\n\r\n const [adjustByPPPValue, setAdjustByPPPValue] = useState(false);\r\n\r\n const [annualPaymentForFilter, setannualPaymentForFilter] = useState(false);\r\n const [annualPrizeValueForFilter, setAnnualPrizeValueForFilter] =\r\n useState(false);\r\n\r\n const [bandTypeValue, setBandTypeValue] = useState(\"\");\r\n\r\n const [pairedValue, setPairedValue] = useState(\"\");\r\n const [pairedValueForFilter, setPairedValueForFilter] = useState(\"\");\r\n\r\n const [awards, setAwards] = useState([]);\r\n const [valuationValues, setValuationValues] = useState([]);\r\n const awardsRef = useRef();\r\n const [startDate, setStartDate] = useState(new Date());\r\n const [issueDate, setIssueDate] = useState(new Date());\r\n\r\n const [ToDate, setToDate] = useState(new Date());\r\n\r\n const [selectedCountry, setSelectedCountry] = useState(\"\");\r\n const [CountryValueFiltered, setCountryValueForFilter] = useState(\"\");\r\n const [selectedCountryValue, setSelectedCountryValue] = useState(\"\");\r\n const [resultFilter, emplistFilter] = useState([]);\r\n const [countryId, setCountryId] = useState(\"\");\r\n const [minGDPValue, setMinGDP] = useState(\"\");\r\n const [discountRateValue, setDiscountRate] = useState(\"\");\r\n\r\n const [maxGDPValue, setMaxGDP] = useState(\"\");\r\n const [termValue, setTermValue] = useState(\"\");\r\n const [discountValue, setDiscountValue] = useState(\"\");\r\n const [annualPayment, setAnnualPayments] = useState(\"\");\r\n const [addjustPP, setAdjustPPP] = useState(\"\");\r\n const [sumBandsValue, setSumBandsValue] = useState(\"\");\r\n const [sumBandsValueFiltered, setSumBandsValueFiltered] = useState(\"\");\r\n\r\n const [awardTypeValue, setAwardTypeValue] = useState(\"\");\r\n const [awardTypeSelectedValue, setAwardTypeSelectedValue] = useState(\"\");\r\n\r\n const [hasRegressionValue, setHasRegressionValue] = useState(false);\r\n const [regressionValue, setRegressionValue] = useState(0);\r\n\r\n const [upperPercentileValueSelected, setUpperPercentileValueSelected] =\r\n useState(0);\r\n const [lowerPercentilteValueSelected, setLowerPercentilteValueSelected] =\r\n useState(0);\r\n\r\n const [hasQuartileValue, setHasQuartileValue] = useState(false);\r\n const [quartileValue, setQuartileValue] = useState(0);\r\n const [standardDeviationValueInput, setStandardDeviationInput] = useState(0);\r\n\r\n const [hasStandardDeviation, sethasStandardDeviation] = useState(false);\r\n const [standardDeviationValueAdded, setstandardDeviationValueAdded] =\r\n useState(0);\r\n\r\n const [distancingData, setDistancingData]= useState([]);\r\n const [options, setoptions] = useState([]);\r\n\r\n const [arrayOfPrices, setArrayOfPrices] = useState([]);\r\n const OptionsChart = {\r\n series: [\r\n {\r\n name: \"Website Blog\",\r\n type: \"column\",\r\n data: arrayOfPrices == null ? [] : arrayOfPrices,\r\n },\r\n {\r\n name: \"Social Media\",\r\n type: \"line\",\r\n data: [42, 42, 42, 42, 42, 42, 42, 31, 22, 22, 12, 16],\r\n },\r\n ],\r\n options: {\r\n chart: {\r\n height: 350,\r\n type: \"line\",\r\n },\r\n stroke: {\r\n width: [0, 4],\r\n },\r\n title: {\r\n text: \"Traffic Sources\",\r\n },\r\n dataLabels: {\r\n enabled: false,\r\n enabledOnSeries: [1],\r\n },\r\n\r\n xaxis: {\r\n type: \"datetime\",\r\n },\r\n yaxis: [\r\n {\r\n title: {\r\n text: \"Website Blog\",\r\n },\r\n },\r\n {\r\n opposite: true,\r\n title: {\r\n text: \"Social Media\",\r\n },\r\n },\r\n ],\r\n },\r\n };\r\n\r\n const AwardFilter = {\r\n countryIds: \"\",\r\n sourceId: 1,\r\n Band: \"\",\r\n ISPPP: true,\r\n MaxGDP: 0,\r\n MinGDP: 0,\r\n FromYear: \"\",\r\n ToYear: \"\",\r\n RegionalLicencse: false,\r\n IsPairedAndUnPaired: true,\r\n IsPaired: false,\r\n IsSingle: \"\",\r\n ISIMF: false,\r\n term: 0,\r\n IsIncludeAnnual: true,\r\n };\r\n const awardsTypes = [\r\n { value: 1, label: \"Average Awards\" },\r\n { value: 0, label: \"Unique\" },\r\n { value: -1, label: \"Average sum of prices/ sum of MHz \" },\r\n ];\r\n const bandOptions = [\r\n { value: \"m\", label: getValue(\"All\", getLang()) },\r\n { value: \"s\", label: getValue(\"SingleBand\", getLang()) },\r\n { value: \"i\", label: getValue(\"MultiBand\", getLang()) },\r\n ];\r\n const regionalLicenseOptions = [\r\n { value: true, label: getValue(\"Yes\", getLang()) },\r\n { value: false, label: getValue(\"No\", getLang()) },\r\n ];\r\n\r\n const methodTypesOptions = [\r\n { value: 0, label: getValue(\"Value/Regression\", getLang()) },\r\n { value: 1, label: getValue(\"Value/Bencmark\", getLang()) },\r\n { value: -1, label: getValue(\"Value/Distance\", getLang()) },\r\n ];\r\n const annualPayments = [\r\n { value: 1, label: getValue(\"Yes\", getLang()) },\r\n { value: 0, label: getValue(\"No\", getLang()) },\r\n ];\r\n const addjustByPPP = [\r\n { value: 1, label: getValue(\"Yes\", getLang()) },\r\n { value: 0, label: getValue(\"No\", getLang()) },\r\n ];\r\n const normalizeByGDP = [\r\n { value: 1, label: getValue(\"Yes\", getLang()) },\r\n { value: 0, label: getValue(\"No\", getLang()) },\r\n ];\r\n const adjustInflation = [\r\n { value: 1, label: getValue(\"Yes\", getLang()) },\r\n { value: 0, label: getValue(\"No\", getLang()) },\r\n ];\r\n const excOutliers = [\r\n { value: 0, label: getValue(\"Percentile\", getLang()) },\r\n { value: 1, label: getValue(\"IterativeRegression\", getLang()) },\r\n { value: 2, label: getValue(\"Interquartile\", getLang()) },\r\n { value: 3, label: getValue(\"StandardDeviation\", getLang()) },\r\n { value: 4, label: getValue(\"AutoFiltering\", getLang()) },\r\n ];\r\n const annualizePrice = [\r\n { value: 1, label: getValue(\"Yes\", getLang()) },\r\n { value: 0, label: getValue(\"No\", getLang()) },\r\n ];\r\n const showMarkers = [\r\n { value: 1, label: getValue(\"Yes\", getLang()) },\r\n { value: 0, label: getValue(\"No\", getLang()) },\r\n ];\r\n const sumBands = [\r\n { value: \"pu\", label: getValue(\"PairedUnpaired\", getLang()) },\r\n { value: \"p\", label: getValue(\"Paired\", getLang()) },\r\n { value: \"u\", label: getValue(\"Unpaired\", getLang()) },\r\n ];\r\n\r\n const pairOptions = [\r\n { value: -1, label: getValue(\"PairedUnpaired\", getLang()) },\r\n { value: 1, label: getValue(\"Paired\", getLang()) },\r\n { value: 0, label: getValue(\"Unpaired\", getLang()) },\r\n ];\r\n\r\n awardsRef.current = awards;\r\n const ShowPlot = () => {\r\n setIsOpen(true);\r\n };\r\n useEffect(() => {\r\n APIFunctions.getAllFilters(\"Pricing\")\r\n .then((resp) => resp)\r\n .then((resp) => emplistFilter(resp.data));\r\n }, []);\r\n\r\n const handleChangeCountry = (selectedOptions) => {\r\n console.log(selectedOptions.value);\r\n setCountryValueForFilter(selectedOptions.value);\r\n console.log(CountryValueFiltered);\r\n setSelectedCountry(selectedOptions.value);\r\n };\r\n const handleChange = (idx) => (e) => {\r\n const { name, value } = e.target;\r\n var arr = selectedBandRows;\r\n arr[idx].term = value;\r\n\r\n // for (var i = 0, l = SelectedBands.length; i < l; i++) {\r\n // SelectedBands[i].term = 0;\r\n // if (SelectedBands[i].value == selectedBandRows[idx].band) {\r\n // }\r\n // }\r\n setSelectedBandRows(arr);\r\n console.log(arr);\r\n };\r\n const handleChangePPP = (event) => {\r\n setPPPValue(false);\r\n };\r\n const handleChangePPP2 = (event) => {\r\n setPPPValue(true);\r\n };\r\n const SaveFilterResult = () => {\r\n console.log(selected);\r\n var countryIds = \"\";\r\n\r\n var value = [];\r\n for (var i = 0, l = selected.length; i < l; i++) {\r\n value.push(selected[i].value);\r\n }\r\n countryIds = value.join(\",\");\r\n\r\n var arr = [];\r\n var dataOfCountries = {\r\n TemplateId: 0,\r\n ControlType: \"Select\",\r\n ControlValue: countryIds,\r\n ControlName: \"Country\",\r\n IsDeleted: false,\r\n CreatedBy: 0,\r\n CreationDate: null,\r\n };\r\n arr.push(dataOfCountries);\r\n\r\n APIFunctions.addFilterPricing(arr)\r\n .then((response) => {})\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n setTitle(\"Transitioning...\");\r\n };\r\n const handleChangePaired = (selectedOptions) => {\r\n AwardFilter.IsPairedAndUnPaired = selectedOptions.id;\r\n setPairedValue(selectedOptions.id);\r\n setPairedValueForFilter(selectedOptions.value);\r\n };\r\n const handleChangeRegionalLicense = (selectedOptions) => {\r\n setRegionalLicenseForFilter(selectedOptions.value);\r\n setRegionalLicenseValue(selectedOptions.id);\r\n };\r\n const handleChangeMethodType = (selectedOptions) => {\r\n setMethodTypeValueForFilter(selectedOptions.value);\r\n setMethodTypeValue(selectedOptions.id);\r\n };\r\n\r\n const handleChangeaAjustByPPPValue = (selectedOptions) => {\r\n setAdjustByPPPValueForFilter(selectedOptions.value);\r\n setAdjustByPPPValue(selectedOptions.id);\r\n };\r\n const handleChangeNormalizeGDP = (selectedOptions) => {\r\n setNormalizeByGdp(selectedOptions.value);\r\n setNormalizeByGDPValue(selectedOptions.id);\r\n };\r\n const handleChangeInflationFactor = (selectedOptions) => {\r\n setInflationFactor(selectedOptions.value);\r\n setInflationFactorValue(selectedOptions.id);\r\n };\r\n const handleChanegPopCovered = (event) => {\r\n const { name, value } = event.target;\r\n setPopCoveredValue(value);\r\n };\r\n\r\n const handleChangeAnnualPayment = (selectedOptions) => {\r\n setannualPaymentForFilter(selectedOptions.value);\r\n setAnnualPaymentsValue(selectedOptions.id);\r\n };\r\n const handleChangeAnnualizePriceValue = (selectedOptions) => {\r\n setAnnualPrizeValueForFilter(selectedOptions.value);\r\n setAnnualPrizeValue(selectedOptions.id);\r\n };\r\n const modalLoaded = () => {\r\n setTitle(\"Pricing Plot\");\r\n };\r\n\r\n const checkIfCanView = () => {\r\n APIFunctions.checkIfCanView(\"Valuations\")\r\n .then((response) => {\r\n if (response.data) {\r\n filterAwards();\r\n } else {\r\n AlertError(\"Feature not available, please upgrade your package\");\r\n return;\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const doDistancing = () => {\r\n var obj = new Object();\r\n var bandsArray = [];\r\n for (var i = 0, l = SelectedBands.length; i < l; i++) {\r\n bandsArray.push(SelectedBands[i].value);\r\n }\r\n AwardFilter.Band = bandsArray.join(\",\");\r\n\r\n obj.ValutatedCountryId = parseInt(CountryValueFiltered);\r\n obj.TargetBand = bandsArray.join(\",\");\r\n obj.FilteredAwards = distancingData;\r\n\r\n console.log(obj);\r\n\r\n APIFunctions.getDistancingResult(obj)\r\n .then((resp) => resp)\r\n .then((resp) => console.log(resp.data));\r\n\r\n }\r\n\r\n const handleCheckbox = (name, country, band, arr) => {\r\n console.log(arr);\r\n var count = document.querySelectorAll(\"[name='\"+name+\"[]']\").length;\r\n var checked = document.querySelectorAll(\"[name='\"+name+\"[]']:checked\").length;\r\n var target_band = selectedBandRows[0].band;\r\n \r\n if(target_band == band && checked == 0) {\r\n var all = document.querySelectorAll(\"[data-country='\"+country+\"']\");\r\n for(var i = 0; i < all.length; i++) {\r\n document.querySelectorAll(\"[data-country='\"+country+\"']\")[i].checked = false;\r\n }\r\n } else {\r\n if(target_band < band && checked == 0) {\r\n var f = 0;\r\n for(var i = 0; i < arr.length; i++) {\r\n if(target_band < arr[i].Band) {\r\n var c = document.querySelectorAll(`[data-country=\"${country}\"][data-band=\"${arr[i].Band}\"]`);\r\n for(var j = 0; j < c.length; j++) {\r\n if(c[j].checked) {\r\n f = 1;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n if(f == 0) {\r\n var all = document.querySelectorAll(\"[data-country='\"+country+\"']\");\r\n for(var i = 0; i < all.length; i++) {\r\n document.querySelectorAll(\"[data-country='\"+country+\"']\")[i].checked = false;\r\n }\r\n }\r\n } \r\n if(target_band > band && checked == 0) {\r\n var f = 0;\r\n for(var i = 0; i < arr.length; i++) {\r\n if(target_band > arr[i].Band) {\r\n var c = document.querySelectorAll(`[data-country=\"${country}\"][data-band=\"${arr[i].Band}\"]`);\r\n for(var j = 0; j < c.length; j++) {\r\n if(c[j].checked) {\r\n f = 1;\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n if(f == 0) {\r\n var all = document.querySelectorAll(\"[data-country='\"+country+\"']\");\r\n for(var i = 0; i < all.length; i++) {\r\n document.querySelectorAll(\"[data-country='\"+country+\"']\")[i].checked = false;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n const filterAwards = () => {\r\n var element = document.getElementById(\"table-content\");\r\n element.scrollIntoView(true, { block: \"start\", inline: \"nearest\" });\r\n //SaveFilterResult();\r\n if (discountRateValue == \"\") setDiscountRate(null);\r\n if (termValue == \"\") setTermValue(null);\r\n AwardFilter.ISPPP = isPPPValue;\r\n AwardFilter.ISIMF = false;\r\n\r\n AwardFilter.IsPairedAndUnPaired = false;\r\n AwardFilter.IsPaired = false;\r\n\r\n AwardFilter.IsUnPaired = false;\r\n for (var i = 0, l = selectedPaired.length; i < l; i++) {\r\n if (selectedPaired[i].value == -1) {\r\n AwardFilter.IsPairedAndUnPaired = true;\r\n }\r\n if (selectedPaired[i].value == 0) {\r\n AwardFilter.IsUnPaired = true;\r\n }\r\n if (selectedPaired[i].value == 1) {\r\n AwardFilter.IsPaired = true;\r\n }\r\n }\r\n\r\n if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n else AwardFilter.AverageSumPricesAndMHZ = false;\r\n if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n else AwardFilter.averageAwards = false;\r\n if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n else AwardFilter.uniqueAwards = false;\r\n\r\n AwardFilter.regionalLicense = regionalLicenseForFilter;\r\n AwardFilter.FromYear = startDate.getFullYear();\r\n AwardFilter.ToYear = ToDate.getFullYear();\r\n\r\n AwardFilter.MinGDP = parseInt(minGDPValue);\r\n AwardFilter.MaxGDP = parseInt(maxGDPValue);\r\n AwardFilter.issueDate = issueDate.getFullYear();\r\n AwardFilter.discountRate = parseFloat(discountRateValue);\r\n AwardFilter.term = 0;\r\n \r\n console.log('aaaa');\r\n console.log(sumBandsValueFiltered);\r\n\r\n AwardFilter.sumBand = sumBandsValueFiltered;\r\n\r\n if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n else AwardFilter.averageAwards = false;\r\n if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n else AwardFilter.uniqueAwards = false;\r\n if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n else AwardFilter.AverageSumPricesAndMHZ = false;\r\n\r\n AwardFilter.hasRegression = hasRegressionValue;\r\n AwardFilter.regression = regressionValue;\r\n AwardFilter.HasPercentile = hasPercentileValue;\r\n AwardFilter.UpperPercentile = parseFloat(upperPercentileValueSelected);\r\n AwardFilter.LowerPercentile = parseFloat(lowerPercentilteValueSelected);\r\n AwardFilter.HasQuartile = hasQuartileValue;\r\n AwardFilter.KValue = quartileValue;\r\n AwardFilter.HasStandardDeviation = hasStandardDeviation;\r\n AwardFilter.StandardDeviationValue = standardDeviationValueAdded;\r\n\r\n AwardFilter.AdjustByInflationFactor = inflationFactor == 1 ? true : false;\r\n AwardFilter.AdjustByGDPFactor = normalizeByGdp == 1 ? true : false;\r\n AwardFilter.AdjustByPPPFactor =\r\n adjustByPPPValueForFilter == 1 ? true : false;\r\n AwardFilter.AnnualizePrice = annualPrizeValueForFilter == 1 ? true : false;\r\n AwardFilter.IsIncludeAnnual = annualPaymentForFilter == 1 ? true : false;\r\n AwardFilter.IsSingle = true;\r\n AwardFilter.IsMultiple = false;\r\n\r\n console.log(methodTypeValueForFilter);\r\n if (methodTypeValueForFilter == 0) AwardFilter.IsRegression = true;\r\n else AwardFilter.IsRegression = false;\r\n if (methodTypeValueForFilter == 1) AwardFilter.IsBenchMark = true;\r\n else AwardFilter.IsBenchMark = false;\r\n if (methodTypeValueForFilter == -1) AwardFilter.IsDistance = true;\r\n else AwardFilter.IsDistance = false;\r\n AwardFilter.EnforeBPositive = false;\r\n // AwardFilter.IsRegression = false;\r\n // AwardFilter.IsBenchMark = false;\r\n // AwardFilter.IsDistance = false;\r\n AwardFilter.CountryId = CountryValueFiltered.toString();\r\n AwardFilter.PopCovered = popCoveredValue == \"\" ? 0 : parseFloat(popCoveredValue);\r\n\r\n\r\n\r\n if (methodTypeValueForFilter == -1 && selectedBandRows.length > 1) {\r\n alert(\r\n \"You cannot choose more than one band for valuation by distance method\"\r\n );\r\n setAwards([]);\r\n setArrayOfPrices([]);\r\n setColumns([]);\r\n setColumnsValuation([]);\r\n return;\r\n }\r\n \r\n console.log(selectedBandRows);\r\n var value2 = [];\r\n var bandCount = [];\r\n var bandSum = [];\r\n var bandMean = [];\r\n var bandMedian = [];\r\n var bandValues = [];\r\n for (var i = 0, l = selectedBandRows.length; i < l; i++) {\r\n value2.push(selectedBandRows[i].term);\r\n bandCount.push({\r\n \"band\": selectedBandRows[i].band,\r\n \"count_value\": 0\r\n });\r\n bandSum.push({\r\n \"band\": selectedBandRows[i].band,\r\n \"sum_value\": 0\r\n });\r\n bandMean.push({\r\n \"band\": selectedBandRows[i].band,\r\n \"mean_value\": 0\r\n });\r\n bandMedian.push({\r\n \"band\": selectedBandRows[i].band,\r\n \"median_value\": 0\r\n });\r\n bandValues.push({\r\n \"band\": selectedBandRows[i].band,\r\n \"band_values\": []\r\n });\r\n }\r\n // console.log(bandCount);\r\n AwardFilter.Terms = value2.join(\",\");\r\n var value = [];\r\n for (var i = 0, l = selected.length; i < l; i++) {\r\n value.push(selected[i].value);\r\n }\r\n AwardFilter.countryIds = value.join(\",\");\r\n\r\n var bandsArray = [];\r\n for (var i = 0, l = SelectedBands.length; i < l; i++) {\r\n bandsArray.push(SelectedBands[i].value);\r\n }\r\n AwardFilter.Band = bandsArray.join(\",\");\r\n AwardFilter.BandTerms = selectedBandRows;\r\n\r\n console.log(AwardFilter);\r\n LoadingAlert(\"Show\");\r\n APIFunctions.FilterValuations(AwardFilter)\r\n .then((response) => {\r\n // console.log(response.data);\r\n LoadingAlert(\"Hide\");\r\n var arrFiltered = [];\r\n console.log(response.data);\r\n\r\n response.data.forEach(function (element, index) {\r\n var commonAwards = response.data.filter(\r\n (x) =>\r\n x.countryName == element.countryName &&\r\n x.year == element.year &&\r\n x.band == element.band\r\n );\r\n if (\r\n !arrFiltered.some(\r\n (e) =>\r\n e.Year == element.year &&\r\n e.Band == element.band &&\r\n e.CountryName == element.countryName\r\n )\r\n ) {\r\n arrFiltered.push({\r\n CountryName: element.countryName,\r\n NumberOfAwards: element.numberOfAwards,\r\n Band: element.band,\r\n Year: element.year,\r\n MHZPrice: element.mhz,\r\n Price: element.price,\r\n });\r\n }\r\n });\r\n console.log(arrFiltered);\r\n if (methodTypeValueForFilter == -1) {\r\n\r\n \r\n var arr = response.data;\r\n setDistancingData(arr);\r\n var clmns = [];\r\n clmns.push({\r\n id: \"checkBox\",\r\n Header: \"\",\r\n Cell: (props) => {\r\n const band = props.row.cells[2].value;\r\n const country = props.row.cells[1].value;\r\n const chkName = country+\"_band_\"+band;\r\n var new_arr = arrFiltered.filter(function (el) {\r\n return el.CountryName == country;\r\n }); \r\n return (\r\n \r\n handleCheckbox(chkName, country, band, new_arr)}\r\n data-country={country}\r\n data-band={band}\r\n defaultChecked\r\n />\r\n
\r\n );\r\n },\r\n });\r\n clmns.push({\r\n id: \"Country\",\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"CountryName\",\r\n });\r\n clmns.push({\r\n id: \"Band\",\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"Band\",\r\n });\r\n clmns.push({\r\n id: \"awardDate\",\r\n Header: getValue(\"AwardDate\", getLang()),\r\n accessor: \"Year\",\r\n });\r\n\r\n clmns.push({\r\n id: \"NumberOfAwards\",\r\n Header: \"Number Of Awards\",\r\n accessor: \"NumberOfAwards\",\r\n });\r\n\r\n\r\n clmns.push({\r\n id: \"Price\",\r\n Header: \"Price\",\r\n accessor: \"Price\",\r\n });\r\n\r\n setColumns(clmns);\r\n\r\n console.log(arrFiltered);\r\n\r\n setAwards(arrFiltered);\r\n\r\n var arr2 = arr.map(function (val) {\r\n return val.gdp;\r\n });\r\n setArrayOfPrices(arr2);\r\n } \r\n else {\r\n if(methodTypeValueForFilter == 0) {\r\n // value / regression\r\n var arr = response.data;\r\n var clmns = [];\r\n clmns.push({\r\n id: \"Country\",\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n });\r\n clmns.push({\r\n id: \"AwardDate\",\r\n Header: getValue(\"AwardDate\", getLang()),\r\n accessor: \"year\",\r\n });\r\n clmns.push({\r\n id: \"Bands\",\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n });\r\n clmns.push({\r\n id: \"Operator\",\r\n Header: getValue(\"Operator\", getLang()),\r\n accessor: \"operatorName\",\r\n });\r\n clmns.push({\r\n id: \"Terms\",\r\n Header: getValue(\"Term\", getLang()),\r\n accessor: \"terms\",\r\n Cell: (props) => {\r\n if (props.value != null)\r\n return props.value;\r\n else return \"\";\r\n },\r\n });\r\n clmns.push({\r\n id: \"GDP\",\r\n Header: \"GDPc\",\r\n accessor: \"gdp\",\r\n show: true,\r\n Cell: (props) => {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(3)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value))\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return parseFloat(props.value).toFixed(3);\r\n else return \"\";\r\n },\r\n });\r\n\r\n setColumns(clmns);\r\n\r\n setAwards(response.data);\r\n var arr2 = arr.map(function (val) {\r\n return val.gdp;\r\n });\r\n setArrayOfPrices(arr2);\r\n }\r\n else {\r\n // value / benchmark\r\n var arr = response.data;\r\n console.log(arr);\r\n var clmns = [];\r\n clmns.push({\r\n id: \"Country\",\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n });\r\n \r\n clmns.push({\r\n id: \"awardDate\",\r\n Header: getValue(\"AwardDate\", getLang()),\r\n accessor: \"year\",\r\n });\r\n \r\n clmns.push({\r\n id: \"Band\",\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n });\r\n clmns.push({\r\n id: \"POP\",\r\n Header: getValue(\"Pop\", getLang()),\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value)) return props.value;\r\n else return props.value.toFixed(3);\r\n },\r\n });\r\n clmns.push({\r\n id: \"GDPc\",\r\n Header: \"GDPc\",\r\n accessor: \"gdp\",\r\n Cell: (props) => {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(3)\r\n .toString()\r\n .replace(/\\B(? {\r\n console.log(e);\r\n });\r\n };\r\n const getPOPValue = () => {\r\n console.log(selectedCountry);\r\n APIFunctions.GetByCountryAndYear(\r\n selectedCountry,\r\n issueDate.getFullYear(),\r\n AwardFilter.ISIMF\r\n )\r\n .then((response) => {\r\n setPopCoveredValue(response.data.value);\r\n console.log(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n useEffect(() => {\r\n APIFunctions.getAllBands()\r\n .then((resp) => resp)\r\n .then((resp) => setBands(resp.data));\r\n }, []);\r\n\r\n useEffect(() => {\r\n APIFunctions.getUserCountries(\"Valuations\")\r\n .then((resp) => resp)\r\n .then((resp) => bindOptions(resp.data));\r\n }, []);\r\n\r\n const bindOptions = (data) => {\r\n var arr = [];\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n var ob = new Object();\r\n ob.label = data[i].nameEn;\r\n ob.value = data[i].countryId;\r\n arr.push(ob);\r\n }\r\n setoptions(arr);\r\n };\r\n\r\n const GetCountryNameById = (id) => {\r\n return options.find((x) => x.value === id).label;\r\n };\r\n const handleMinGdpChange = (event) => {\r\n const { name, value } = event.target;\r\n setMinGDP(value);\r\n AwardFilter.MinGDP = value;\r\n };\r\n\r\n const handleDiscountRateChange = (event) => {\r\n const { name, value } = event.target;\r\n setDiscountRate(value);\r\n AwardFilter.discountRate = value;\r\n };\r\n\r\n const handleRegressionValue = (event) => {\r\n const { name, value } = event.target;\r\n setRegressionValue(value);\r\n };\r\n const handleChangeQuartile = (event) => {\r\n const { name, value } = event.target;\r\n setQuartileValue(value);\r\n };\r\n const handleStandardDeviationValue = (event) => {\r\n const { name, value } = event.target;\r\n setstandardDeviationValueAdded(value);\r\n };\r\n const handleUpperPercentileValue = (event) => {\r\n const { name, value } = event.target;\r\n setUpperPercentileValueSelected(value);\r\n };\r\n const handleLowerPercentileValue = (event) => {\r\n const { name, value } = event.target;\r\n setLowerPercentilteValueSelected(value);\r\n };\r\n const handleMaxGdpChange = (event) => {\r\n const { name, value } = event.target;\r\n setMaxGDP(value);\r\n AwardFilter.MaxGDP = value;\r\n };\r\n\r\n const handleTermChange = (event) => {\r\n const { name, value } = event.target;\r\n setTermValue(value);\r\n\r\n AwardFilter.term = value;\r\n };\r\n\r\n const handleChangeSumBands = (selectedOptions) => {\r\n AwardFilter.sumBands = selectedOptions.id;\r\n setSumBandsValue(selectedOptions.id);\r\n setSumBandsValueFiltered(selectedOptions.value);\r\n };\r\n const handleChangeAwardType = (selectedOptions) => {\r\n // AwardFilter.sumBands = selectedOptions.id;\r\n setAwardTypeValue(selectedOptions.id);\r\n setAwardTypeSelectedValue(selectedOptions.value);\r\n };\r\n const handleChangeExcOutliers = (selectedOptions) => {\r\n if (selectedOptions.value == 0) {\r\n setLowerPercentileValue(\"block\");\r\n setUpperPercentileValue(\"block\");\r\n setHasPercentileValue(true);\r\n } else {\r\n setUpperPercentileValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setHasPercentileValue(false);\r\n }\r\n\r\n if (selectedOptions.value == 1) {\r\n setRegressionVisibilityValue(\"block\");\r\n setHasRegressionValue(true);\r\n } else {\r\n setRegressionVisibilityValue(\"none\");\r\n setHasRegressionValue(false);\r\n }\r\n if (selectedOptions.value == 2) setquatileVisibiltyValue(\"block\");\r\n else setquatileVisibiltyValue(\"none\");\r\n if (selectedOptions.value == 3) {\r\n setstandardDeviationValue(\"block\");\r\n sethasStandardDeviation(true);\r\n } else {\r\n setstandardDeviationValue(\"none\");\r\n sethasStandardDeviation(false);\r\n }\r\n\r\n //if(selectedOptions.value==3)\r\n //sethasStandardDeviation(\"\")\r\n };\r\n const handleChangeBands = (selectedOptions) => {\r\n var value = [];\r\n var arr = [];\r\n\r\n for (var i = 0, l = selectedOptions.length; i < l; i++) {\r\n value.push(selectedOptions[i].value);\r\n const item = {};\r\n\r\n item.band = selectedOptions[i].value;\r\n\r\n for (var i2 = 0, l2 = selectedBandRows.length; i2 < l2; i2++) {\r\n if (selectedBandRows[i2].band == selectedOptions[i].value) {\r\n console.log(selectedBandRows[i2]);\r\n item.term = selectedBandRows[i2].term;\r\n }\r\n }\r\n arr.push(item);\r\n }\r\n //setBands(selectedOptions);\r\n setSelectedBands(selectedOptions);\r\n AwardFilter.Band = value.join(\",\");\r\n\r\n setSelectedBandRows(arr);\r\n };\r\n\r\n const handleNewField = (value) => ({\r\n label: value,\r\n value: value.toUpperCase(),\r\n });\r\n const handleChangeFilter = (selectedOptions) => {\r\n APIFunctions.GetDetailsByFilterId(selectedOptions.id)\r\n .then((response) => {\r\n var details = response.data;\r\n for (var i = 0, l = details.length; i < l; i++) {\r\n var control = details[i].controlName;\r\n if (control == \"Country\") {\r\n var values = details[i].controlValue.split(\",\");\r\n var arr = [];\r\n for (var k = 0; k < values.length; k++) {\r\n var ob = new Object();\r\n ob.value = parseInt(values[k]);\r\n ob.label = GetCountryNameById(parseInt(values[k]));\r\n arr.push(ob);\r\n }\r\n setSelected(arr);\r\n } else if (control == \"Band\") {\r\n var values = details[i].controlValue.split(\",\");\r\n var arr = [];\r\n for (var k = 0; k < values.length; k++) {\r\n var ob = new Object();\r\n ob.value = values[k];\r\n ob.label = values[k];\r\n arr.push(ob);\r\n }\r\n\r\n setSelectedBands(arr);\r\n } else if (control == \"MinGDP\") {\r\n setMinGDP(parseFloat(details[i].controlValue));\r\n } else if (control == \"MaxGDP\") {\r\n setMaxGDP(parseFloat(details[i].controlValue));\r\n } else if (control == \"FromYear\") {\r\n var currentDate = new Date();\r\n currentDate.setYear(parseInt(details[i].controlValue));\r\n setStartDate(currentDate);\r\n } else if (control == \"ToYear\") {\r\n var currentDate = new Date();\r\n currentDate.setYear(parseInt(details[i].controlValue));\r\n setToDate(currentDate);\r\n } else if (control == \"RegionalLicense\") {\r\n setRegionalLicenseValue({\r\n value: parseInt(details[i].controlValue),\r\n label: regionalLicenseOptions.find(\r\n (x) => x.value == parseInt(details[i].controlValue)\r\n ).label,\r\n });\r\n } else if (control == \"Paired\") {\r\n setPairedValue({\r\n value: parseInt(details[i].controlValue),\r\n label: pairOptions.find(\r\n (x) => x.value == parseInt(details[i].controlValue)\r\n ).label,\r\n });\r\n } else if (control == \"BandType\") {\r\n setBandTypeValue({\r\n value: parseInt(details[i].controlValue),\r\n label: bandOptions.find(\r\n (x) => x.value == parseInt(details[i].controlValue)\r\n ).label,\r\n });\r\n }\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n const handleChangeBandType = (selectedOptions) => {\r\n AwardFilter.IsSingle = selectedOptions.value;\r\n setBandTypeValue(selectedOptions.id);\r\n };\r\n const handleAwardType = (selectedOptions) => {\r\n AwardFilter.IsPaired = selectedOptions.value;\r\n };\r\n // const columns = useMemo(\r\n // () => [\r\n // {\r\n // Header: \"Country\",\r\n // accessor: \"countryName\",\r\n // },\r\n // {\r\n // Header: \"Award Date\",\r\n // accessor: \"year\",\r\n // },\r\n // {\r\n // Header: \"Band\",\r\n // accessor: \"band\",\r\n // },\r\n\r\n // {\r\n // Header: \"POP\",\r\n // accessor: \"pop\",\r\n // Cell: (props) => {\r\n // if (props.value == null) return \"\";\r\n // if (Number.isInteger(props.value)) return props.value;\r\n // else return props.value.toFixed(3);\r\n // },\r\n // },\r\n // {\r\n // Header: \"GDPc\",\r\n // accessor: \"gdp\",\r\n // show: true,\r\n // Cell: (props) => {\r\n // if (props.value != null)\r\n // return props.value\r\n // .toFixed(3)\r\n // .toString()\r\n // .replace(/\\B(? {\r\n // return dateFormat(props.creationDate, \"mmmm dS, yyyy\");\r\n // },\r\n // },\r\n // ],\r\n // []\r\n // );\r\n\r\n const firstTable = useTable(\r\n {\r\n columns,\r\n data: awards,\r\n initialState: {\r\n hiddenColumns: columns.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n const {\r\n getTableProps: getFirstTableProps,\r\n getTableBodyProps: getFirstTableBodyProps,\r\n headerGroups: firstHeaderGroups,\r\n page: firstPage,\r\n nextPage: firstNextPage,\r\n previousPage: firstPreviousPage,\r\n canNextPage: firstCanNextPage,\r\n canPreviousPage: firstCanPreviousPage,\r\n pageOptions: firstPageOptions,\r\n gotoPage: firstGotoPage,\r\n pageCount: firstPageCount,\r\n setPageSize: firstSetPageSize,\r\n state: firstState,\r\n prepareRow: firstPrepareRow,\r\n } = firstTable;\r\n\r\n const secondTable = useTable(\r\n {\r\n columns: columnsValuation,\r\n data: valuationValues,\r\n initialState: {\r\n hiddenColumns: columnsValuation.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n const {\r\n getTableProps: getSecondTableProps,\r\n getTableBodyProps: getSecondTableBodyProps,\r\n headerGroups: secondHeaderGroups,\r\n page: secondPage,\r\n nextPage: secondNextPage,\r\n previousPage: secondPreviousPage,\r\n canNextPage: secondCanNextPage,\r\n canPreviousPage: secondCanPreviousPage,\r\n pageOptions: secondPageOptions,\r\n gotoPage: secondGotoPage,\r\n pageCount: secondPageCount,\r\n setPageSize: secondSetPageSize,\r\n state: secondState,\r\n prepareRow: secondPrepareRow,\r\n } = secondTable;\r\n\r\n const { pageIndex, pageSize } = firstState;\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n
{\" \"}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Valuations
\r\n\r\n
\r\n \r\n \r\n option.value}\r\n getOptionValue={(option) => option.id}\r\n options={bands}\r\n isMulti\r\n value={SelectedBands}\r\n allowSelectAll={true}\r\n onChange={handleChangeBands}\r\n >\r\n
\r\n \r\n \r\n option.countryId}\r\n options={options}\r\n value={selected}\r\n onChange={setSelected}\r\n labelledBy=\"Select\"\r\n />\r\n
\r\n \r\n \r\n option.id}\r\n options={pairOptions}\r\n value={selectedPaired}\r\n onChange={setSelectedPaired}\r\n labelledBy=\"Select\"\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setStartDate(date)}\r\n showYearPicker\r\n value={startDate}\r\n dateFormat=\"yyyy\"\r\n className=\"w-100 height-40 cstm-input\"\r\n />\r\n
\r\n \r\n \r\n setToDate(date)}\r\n showYearPicker\r\n value={ToDate}\r\n dateFormat=\"yyyy\"\r\n className=\"w-100 height-40 cstm-input\"\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {selectedBandRows.map((item, idx) => (\r\n \r\n \r\n {\" \"}\r\n {selectedBandRows[idx].band}\r\n \r\n \r\n \r\n \r\n ))}\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\" \"}\r\n {\r\n setIssueDate(date);\r\n getPOPValue();\r\n }}\r\n showYearPicker\r\n value={issueDate}\r\n dateFormat=\"yyyy\"\r\n className=\"cstm-input\"\r\n />\r\n
\r\n \r\n \r\n {\r\n return obj.value === selectedCountry;\r\n })}\r\n onChange={handleChangeCountry}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {/* \r\n filterAwards()}\r\n onClick={() => doDistancing()}\r\n >\r\n \r\n Do Distancing\r\n \r\n filterAwards()}\r\n onClick={() => checkIfCanView()}\r\n >\r\n \r\n {getValue(\"Search\", getLang())}\r\n \r\n \r\n \r\n {getValue(\"Clear\", getLang())}\r\n \r\n {/* ShowPlot()}\r\n >\r\n \r\n Plot\r\n */}\r\n {getValue(\"Plot\", getLang())}\r\n {/* */}\r\n filterAwards()}\r\n >\r\n \r\n {getValue(\"Save\", getLang())}\r\n \r\n
\r\n \r\n Search Filters\r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Page{\" \"}\r\n \r\n {pageIndex + 1} of {firstPageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | Go to page:\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n firstGotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n firstGotoPage(0)}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n firstPreviousPage()}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {getValue(\"Previous\", getLang())}\r\n \r\n firstNextPage()}\r\n disabled={!firstCanNextPage}\r\n >\r\n {getValue(\"Next\", getLang())}\r\n \r\n firstGotoPage(firstPageCount - 1)}\r\n disabled={!firstCanNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {secondHeaderGroups.map((headerGroup) => (\r\n
\r\n
\r\n Valuation Case Results
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n\r\n const getUserFilters = () => {\r\n // LoadingAlert(\"Show\");\r\n APIFunctions.getUserFilters(\"Trends\")\r\n .then((resp) => resp)\r\n .then((resp) => {\r\n var data = resp.data;\r\n if (data.length > 0) {\r\n var fromYear = data.filter((item) => item.field == \"FromYear\");\r\n var toYear = data.filter((item) => item.field == \"ToYear\");\r\n var issueDate = data.filter((item) => item.field == \"IssueDate\");\r\n var awardTypeSelectedValue = data.filter((item) => item.field == \"awardTypeSelectedValue\");\r\n var discountRate = data.filter((item) => item.field == \"discountRate\");\r\n var term = data.filter((item) => item.field == \"term\");\r\n var adjustByInflationFactor = data.filter((item) => item.field == \"AdjustByInflationFactor\");\r\n var adjustByGDPFactor = data.filter((item) => item.field == \"AdjustByGDPFactor\");\r\n var adjustByPPPFactor = data.filter((item) => item.field == \"AdjustByPPPFactor\");\r\n var annualizePrice = data.filter((item) => item.field == \"AnnualizePrice\");\r\n var isIncludeAnnual = data.filter((item) => item.field == \"IsIncludeAnnual\");\r\n var regression = data.filter((item) => item.field == \"regression\");\r\n var upperPercentile = data.filter((item) => item.field == \"UpperPercentile\");\r\n var lowerPercentile = data.filter((item) => item.field == \"LowerPercentile\");\r\n var kValue = data.filter((item) => item.field == \"KValue\");\r\n var standardDeviationValue = data.filter((item) => item.field == \"StandardDeviationValue\");\r\n var ddlOutliers = data.filter((item) => item.field == \"ddlOutliers\");\r\n var sumBand = data.filter((item) => item.field == \"sumBand\");\r\n var maxValue = data.filter((item) => item.field == \"MaxGDP\");\r\n var minGDP = data.filter((item) => item.field == \"MinGDP\");\r\n var regionalLicense = data.filter((item) => item.field == \"RegionalLicense\");\r\n var unPaired = data.filter((item) => item.field == \"IsUnPaired\");\r\n var pairedUnpaired = data.filter((item) => item.field == \"IsPairedAndUnPaired\");\r\n var paired = data.filter((item) => item.field == \"Paired\");\r\n var multiple = data.filter((item) => item.field == \"IsMultiple\");\r\n var single = data.filter((item) => item.field == \"IsSingle\");\r\n var bands = data.filter((item) => item.field == \"Bands\");\r\n var countries = data.filter((item) => item.field == \"Country\");\r\n setMinGDP(minGDP[0].value);\r\n setMaxGDP(maxValue[0].value);\r\n setPaired(paired[0].value == \"true\" ? true : false);\r\n setUnPaired(unPaired[0].value == \"true\" ? true : false);\r\n setPairedUnPaired(pairedUnpaired[0].value == \"true\" ? true : false);\r\n setIncludeRegional(regionalLicense[0].value == \"true\" ? true : false);\r\n setMultiBand(multiple[0].value == \"true\" ? true : false);\r\n setSingleBand(single[0].value == \"true\" ? true : false);\r\n var tempBands = JSON.parse(bands[0].value);\r\n tempBands.map(function (val) {\r\n setCheckBand(val.value, val.isChecked);\r\n });\r\n var tempCountries = JSON.parse(countries[0].value);\r\n // tempCountries.map(function (val) {\r\n // setCountryChecked(val.value, val.isChecked);\r\n // });\r\n setoptions(tempCountries);\r\n setFromDate(fromYear[0].value);\r\n setToDate(toYear[0].value);\r\n $('#issueDate').val(issueDate[0].value);\r\n $('#showResults').val(awardTypeSelectedValue[0].value);\r\n setDiscountRate(discountRate[0].value);\r\n setTermValue(term[0].value);\r\n setAdjustByInflation(adjustByInflationFactor[0].value == \"true\" ? true : false);\r\n setNormalizeByGDPc(adjustByGDPFactor[0].value == \"true\" ? true : false);\r\n setAdjustByPPPFactor(adjustByPPPFactor[0].value == \"true\" ? true : false);\r\n setAnnualizePrices(annualizePrice[0].value == \"true\" ? true : false);\r\n setAddAnnualPayment(isIncludeAnnual[0].value == \"true\" ? true : false);\r\n setRegressionValue(regression[0].value);\r\n setUpperPercentileValueSelected(upperPercentile[0].value);\r\n setLowerPercentileValueSelected(lowerPercentile[0].value);\r\n setQuartileValue(kValue[0].value);\r\n setstandardDeviationValueAdded(standardDeviationValue[0].value);\r\n $('#ddlOutliers').val(ddlOutliers[0].value);\r\n excludeOutliers();\r\n $('#sumBands').val(sumBand[0].value);\r\n\r\n var _data = JSON.parse(countries[0].value);\r\n var lstChecked = _data.filter((x) => x.isChecked == true).length;\r\n var lst = _data.length;\r\n var value = lstChecked == lst ? true : false;\r\n if (lstChecked == 0)\r\n setCheckAll(false)\r\n else {\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value)\r\n }\r\n\r\n var _data2 = JSON.parse(bands[0].value);\r\n var lstChecked2 = _data2.filter((x) => x.isChecked == true).length;\r\n var lst2 = _data2.length;\r\n var value2 = lstChecked2 == lst2 ? true : false;\r\n\r\n if (lstChecked2.length == 0)\r\n setCheckAllBands(false);\r\n else \r\n setCheckAllBands(value2);\r\n } else {\r\n setDiscountRate(8.86);\r\n setTermValue(15);\r\n setRegressionValue(0);\r\n setQuartileValue(1);\r\n setUpperPercentileValueSelected(75);\r\n setLowerPercentileValueSelected(25);\r\n setstandardDeviationValueAdded(2);\r\n setMinGDP(0);\r\n setMaxGDP(200000);\r\n setFromDate(1985);\r\n setToDate(new Date().getFullYear());\r\n }\r\n\r\n // LoadingAlert(\"Hide\");\r\n\r\n });\r\n }\r\n\r\n optionsRef.current = options;\r\n bandOptionsListRef.current = bandOptionsList;\r\n\r\n function searchCountry() {\r\n var input, filter, found, div, label, i;\r\n input = document.getElementById(\"searchCountry\");\r\n filter = input.value.toUpperCase();\r\n div = document.getElementById(\"countries\");\r\n label = div.getElementsByTagName(\"label\");\r\n for (i = 0; i < label.length; i++) {\r\n if (label[i].innerHTML.toUpperCase().indexOf(filter) > -1) {\r\n found = true;\r\n }\r\n if (found) {\r\n label[i].style.display = \"\";\r\n found = false;\r\n } else {\r\n label[i].style.display = \"none\";\r\n }\r\n }\r\n }\r\n\r\n // const exportToPDF = () => {\r\n \r\n // LoadingAlert(\"Show\");\r\n \r\n // var AwardFilter = new Object();\r\n // AwardFilter.FromYear = parseInt(fromDate);\r\n // AwardFilter.Lang = getLang();\r\n // AwardFilter.ToYear = parseInt(toDate);\r\n // AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n // AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n // //AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n // AwardFilter.IsSingle = singleBand;\r\n // AwardFilter.IsMultiple = multiBand;\r\n // AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n // AwardFilter.IsPaired = paired;\r\n // AwardFilter.IsUnPaired = unPaired;\r\n // AwardFilter.RegionalLicense = includeRegional;\r\n // AwardFilter.minGDPValue = parseInt(minGDP);\r\n // AwardFilter.maxGDPValue = parseInt(maxGDP);\r\n // AwardFilter.MaxGDP = parseInt(maxGDP);\r\n // AwardFilter.MinGDP = parseInt(minGDP);\r\n // //AwardFilter.Band = selectedBands.join(\",\");\r\n // AwardFilter.issueDate = parseInt($(\"#issueDate\").val());\r\n // var awardTypeSelectedValue = $(\"#showResults\").val();\r\n // if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n // else AwardFilter.AverageSumPricesAndMHZ = false;\r\n // if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n // else AwardFilter.averageAwards = false;\r\n // if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n // else AwardFilter.uniqueAwards = false;\r\n // AwardFilter.discountRate = discountRateValue;\r\n // AwardFilter.term = termValue;\r\n // AwardFilter.AdjustByInflationFactor = adjustByInflation;\r\n // AwardFilter.AdjustByGDPFactor = normalizeByGDPc;\r\n // AwardFilter.AdjustByPPPFactor = adjustByPPPFactor;\r\n // AwardFilter.AnnualizePrice = annualizePrices;\r\n // AwardFilter.IsIncludeAnnual = addAnnualPayment;\r\n // AwardFilter.hasRegression = hasRegressionValue;\r\n // AwardFilter.regression = regressionValue;\r\n // AwardFilter.HasPercentile = hasPercentileValue;\r\n // AwardFilter.UpperPercentile = upperPercentileValueSelected;\r\n // AwardFilter.LowerPercentile = lowerPercentileValueSelected;\r\n // AwardFilter.HasQuartile = hasQuartileValue;\r\n // AwardFilter.KValue = parseFloat(quartileValue);\r\n // AwardFilter.HasStandardDeviation = hasStandardDeviation;\r\n // AwardFilter.StandardDeviationValue = standardDeviationValueAdded;\r\n // AwardFilter.AutoFiltering = hasAutoFiltering;\r\n // AwardFilter.sumBand = $(\"#sumBands\").val();\r\n // AwardFilter.ShowMarkers = $('#showMarkers').val() == \"1\" ? true : false;\r\n // AwardFilter.outliers = $('#ddlOutliers').val();\r\n\r\n // AwardFilter.Header = myHeader;\r\n // setFilters(AwardFilter);\r\n // _exportedFilters = AwardFilter;\r\n\r\n \r\n \r\n // setisExportPDF(true);\r\n\r\n // setTimeout(() => {\r\n // setisExportPDF(false);\r\n // }, 300);\r\n // }\r\n\r\n\r\n function excludeOutliers() {\r\n var val = $(\"#ddlOutliers\").val();\r\n if (val == 0) {\r\n setLowerPercentileValue(\"block\");\r\n setUpperPercentileValue(\"block\");\r\n setstandardDeviationValue(\"none\");\r\n setRegressionVisibilityValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setHasPercentileValue(true);\r\n setHasRegressionValue(false);\r\n setHasQuartileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n }\r\n else if (val == 1) {\r\n setRegressionVisibilityValue(\"block\");\r\n setstandardDeviationValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setHasRegressionValue(true);\r\n setHasPercentileValue(false);\r\n setHasQuartileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n }\r\n else if (val == 2) {\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n setquatileVisibiltyValue(\"block\");\r\n setHasQuartileValue(true);\r\n\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n\r\n }\r\n else if (val == 3) {\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"block\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(true);\r\n setHasAutoFiltering(false);\r\n }\r\n else if (val == 4) {\r\n setHasAutoFiltering(true);\r\n\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n } else {\r\n setHasAutoFiltering(false);\r\n\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n }\r\n }\r\n const setDisplay = () => {\r\n\r\n setShowDisplay2(!showDisplay);\r\n setIconClass(!showDisplay == true ? \"spectre-angle-up btn btn-primary background-color-2 color-white mr-2\"\r\n : \"spectre-angle-down btn btn-primary background-color-2 color-white mr-2\");\r\n setShowTxt(!showDisplay == true ? getValue(\"ShowLess\", getLang()) : getValue(\"ShowMore\", getLang()))\r\n }\r\n\r\n const handleCheckAll = (isChecked) => {\r\n setCheckAll(isChecked);\r\n var updatedSelectedCountries = options;\r\n updatedSelectedCountries.map((row, i) => {\r\n row.isChecked = isChecked;\r\n })\r\n setoptions(updatedSelectedCountries);\r\n\r\n };\r\n const getCheckedCountry = (id) => {\r\n var checked = false;\r\n var allData = options;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n }\r\n\r\n const renderBands = () => {\r\n var bands = bandOptionsList;\r\n if (bands != null && bands.length > 0) {\r\n {\r\n return (bands.map((val, idx) => (\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n const getCheckedBand = (id) => {\r\n var checked = false;\r\n var allData = bandOptionsList;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n }\r\n\r\n const setCheckBand = (id, isChecked) => {\r\n var data = bandOptionsListRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, { value: id, isChecked: isChecked, label: item[0].label });\r\n\r\n\r\n setSelectedBandsOptions(data);\r\n }\r\n\r\n\r\n\r\n const setCountryChecked = (id, isChecked) => {\r\n var data = optionsRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, { value: id, isChecked: isChecked, label: item[0].label, labelAr: item[0].labelAr });\r\n\r\n\r\n setoptions(data);\r\n var lstChecked = data.filter((x) => x.checked == true).length;\r\n var lst = options.length;\r\n var value = lstChecked == lst ? true : false;\r\n if (lstChecked == 0)\r\n setCheckAll(false)\r\n else {\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value)\r\n }\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n setIsOpenLin(false);\r\n setIsOpenLog(false);\r\n setIsOpenLinear(false);\r\n setIsOpenChartType(false);\r\n setTitle(\"Transitioning...\");\r\n };\r\n\r\n const modalLoaded = () => {\r\n if (trendTypeValue == 0)\r\n setTitle(\"Price / Band (lin x-scale)\");\r\n else\r\n if (trendTypeValue == 1)\r\n setTitle(\"Price / Band (log y-scale)\");\r\n else\r\n if (trendTypeValue == 2)\r\n setTitle(\"Prices against year\");\r\n else\r\n setTitle(\"Price / Linear freq scale\");\r\n };\r\n\r\n const saveUserFilters = (list) => {\r\n console.log(list);\r\n APIFunctions.saveUserFilters(list)\r\n .then((resp) => resp)\r\n .then((resp) => console.log(resp));\r\n };\r\n\r\n const checkIfCanOpen = (target) => {\r\n if (target == \"countrySelection\"){\r\n setIsOpen5(true);\r\n }\r\n }\r\n\r\n const checkIfCanView = () => {\r\n APIFunctions.checkIfCanView(\"Trends\")\r\n .then((response) => {\r\n if (response.data) {\r\n filterAwards();\r\n } else {\r\n Alert(getValue(\"FeatureNotAvailable\", getLang()));\r\n return;\r\n }\r\n })\r\n .catch((e) => {\r\n LoadingAlert(\"Hide\");\r\n console.log(e);\r\n });\r\n };\r\n\r\n const filterAwards = () => {\r\n var selectedCountries = [];\r\n var selectedBands = [];\r\n\r\n // Validations Begin\r\n if (minGDP == null || minGDP == \"\" || maxGDP == null || maxGDP == \"\"\r\n || fromDate == null || fromDate == \"\" || toDate == null || toDate == \"\"){\r\n AlertError(getValue(\"PleaseFillMissingFields\", getLang()));\r\n return;\r\n }\r\n\r\n for (var i = 0, l = options.length; i < l; i++) {\r\n if (options[i].isChecked) {\r\n selectedCountries.push(options[i].value);\r\n }\r\n }\r\n for (var i = 0, l = bandOptionsList.length; i < l; i++) {\r\n if (bandOptionsList[i].isChecked) {\r\n selectedBands.push(bandOptionsList[i].value);\r\n }\r\n }\r\n\r\n if (selectedCountries.length == 0) {\r\n AlertError(getValue(\"ChooseOneCountry\", getLang()));\r\n return;\r\n }\r\n if (selectedBands.length == 0) {\r\n AlertError(getValue(\"ChooseOneBand\", getLang()));\r\n return;\r\n }\r\n if (parseInt(minGDP) > parseInt(maxGDP)) {\r\n AlertError(getValue(\"GDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > parseInt(toDate)) {\r\n AlertError(getValue(\"DateValidation\", getLang()));\r\n return;\r\n }\r\n if (fromDate.length > 4 || fromDate.length < 4) {\r\n AlertError(getValue(\"ValidToDate\", getLang()));\r\n return;\r\n }\r\n if (toDate.length > 4 || toDate.length < 4) {\r\n AlertError(getValue(\"ValidToDate\", getLang()));\r\n return;\r\n }\r\n if(termValue == \"\" || termValue == null || termValue <= 0) {\r\n AlertError(getValue(\"MinTermValue\", getLang()));\r\n return;\r\n }\r\n if (termValue > 40) {\r\n AlertError(getValue(\"MaxTermValue\", getLang()));\r\n return;\r\n }\r\n if(discountRateValue == \"\" || discountRateValue == null || discountRateValue < 0) {\r\n AlertError(getValue(\"MinDiscountRate\", getLang()));\r\n return;\r\n }\r\n if (discountRateValue > 100) {\r\n AlertError(getValue(\"MaxDiscountRate\", getLang()));\r\n return;\r\n }\r\n if (parseInt($(\"#issueDate\").val()) < parseInt(toDate)) {\r\n AlertError(getValue(\"IssueDateValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) < 1985) {\r\n AlertError(getValue(\"MinimumFromDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > new Date().getFullYear()) {\r\n AlertError(getValue(\"MaximumFromDate\", getLang()) + new Date().getFullYear());\r\n return;\r\n }\r\n if (parseInt(toDate) < 1985) {\r\n AlertError(getValue(\"MinimumToDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(toDate) > new Date().getFullYear()) {\r\n AlertError(getValue(\"MaximumToDate\", getLang()) + new Date().getFullYear());\r\n return;\r\n }\r\n\r\n if (!(singleBand || multiBand)) {\r\n AlertError(getValue(\"SingleValidation\", getLang()));\r\n return;\r\n }\r\n\r\n if (!(paired || unPaired || pairedUnpaired)) {\r\n AlertError(getValue(\"SelectPairing\", getLang()));\r\n return;\r\n }\r\n\r\n if ($(\"#ddlOutliers\").val() == 0) {\r\n if (upperPercentileValueSelected < 0) {\r\n AlertError(getValue(\"UpperPercentileMinValidation\", getLang()));\r\n return;\r\n }\r\n if (upperPercentileValueSelected > 100) {\r\n AlertError(getValue(\"UpperPercentileMaxValidation\", getLang()));\r\n return;\r\n } if (lowerPercentileValueSelected < 0) {\r\n AlertError(getValue(\"LowerPercentileMinValidation\", getLang()));\r\n return;\r\n }\r\n if (lowerPercentileValueSelected > 100) {\r\n AlertError(getValue(\"LowerPercentileMaxValidation\", getLang()));\r\n return;\r\n }\r\n if (upperPercentileValueSelected < lowerPercentileValueSelected) {\r\n AlertError(getValue(\"LowePerLessThan\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 1) {\r\n if (regressionValue < 0) {\r\n AlertError(getValue(\"Min%\", getLang()));\r\n return;\r\n }\r\n if (regressionValue > 100) {\r\n AlertError(getValue(\"Max%\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 2) {\r\n if (quartileValue < 0) {\r\n AlertError(getValue(\"MinKValue\", getLang()));\r\n return;\r\n }\r\n if (quartileValue > 3) {\r\n AlertError(getValue(\"MaxKValue\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 3) {\r\n if (standardDeviationValueAdded < 1) {\r\n AlertError(getValue(\"MinSD\", getLang()));\r\n return;\r\n }\r\n if (standardDeviationValueAdded > 3) {\r\n AlertError(getValue(\"MaxSD\", getLang()));\r\n return;\r\n }\r\n }\r\n\r\n // Validations End\r\n\r\n var AwardFilter = new Object();\r\n AwardFilter.FromYear = parseInt(fromDate);\r\n AwardFilter.Lang = getLang();\r\n AwardFilter.ToYear = parseInt(toDate);\r\n AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n AwardFilter.IsSingle = singleBand;\r\n AwardFilter.IsMultiple = multiBand;\r\n AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n AwardFilter.IsPaired = paired;\r\n AwardFilter.IsUnPaired = unPaired;\r\n AwardFilter.RegionalLicense = includeRegional;\r\n AwardFilter.minGDPValue = parseInt(minGDP);\r\n AwardFilter.maxGDPValue = parseInt(maxGDP);\r\n AwardFilter.MaxGDP = parseInt(maxGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n AwardFilter.Band = selectedBands.join(\",\");\r\n AwardFilter.issueDate = parseInt($(\"#issueDate\").val());\r\n var awardTypeSelectedValue = $(\"#showResults\").val();\r\n if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n else AwardFilter.AverageSumPricesAndMHZ = false;\r\n if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n else AwardFilter.averageAwards = false;\r\n if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n else AwardFilter.uniqueAwards = false;\r\n AwardFilter.discountRate = discountRateValue;\r\n AwardFilter.term = termValue;\r\n AwardFilter.AdjustByInflationFactor = adjustByInflation;\r\n AwardFilter.AdjustByGDPFactor = normalizeByGDPc;\r\n AwardFilter.AdjustByPPPFactor = adjustByPPPFactor;\r\n AwardFilter.AnnualizePrice = annualizePrices;\r\n AwardFilter.IsIncludeAnnual = addAnnualPayment;\r\n AwardFilter.hasRegression = hasRegressionValue;\r\n AwardFilter.regression = regressionValue;\r\n AwardFilter.HasPercentile = hasPercentileValue;\r\n AwardFilter.UpperPercentile = upperPercentileValueSelected;\r\n AwardFilter.LowerPercentile = lowerPercentileValueSelected;\r\n AwardFilter.HasQuartile = hasQuartileValue;\r\n AwardFilter.KValue = quartileValue;\r\n AwardFilter.HasStandardDeviation = hasStandardDeviation;\r\n AwardFilter.StandardDeviationValue = standardDeviationValueAdded;\r\n AwardFilter.AutoFiltering = hasAutoFiltering;\r\n AwardFilter.sumBand = $(\"#sumBands\").val();\r\n\r\n console.log(AwardFilter);\r\n\r\n var list = [];\r\n list.push(\r\n { id: 0, pageUrl: \"Trends\", field: \"FromYear\", value: fromDate.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"ToYear\", value: toDate.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"IssueDate\", value: $(\"#issueDate\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"awardTypeSelectedValue\", value: $(\"#showResults\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"discountRate\", value: discountRateValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"term\", value: termValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"AdjustByInflationFactor\", value: adjustByInflation.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"AdjustByGDPFactor\", value: normalizeByGDPc.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"AdjustByPPPFactor\", value: adjustByPPPFactor.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"AnnualizePrice\", value: annualizePrices.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"IsIncludeAnnual\", value: addAnnualPayment.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"regression\", value: regressionValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"UpperPercentile\", value: upperPercentileValueSelected.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"LowerPercentile\", value: lowerPercentileValueSelected.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"KValue\", value: quartileValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"StandardDeviationValue\", value: standardDeviationValueAdded.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"ddlOutliers\", value: $(\"#ddlOutliers\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"sumBand\", value: $(\"#sumBands\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"MinGDP\", value: minGDP.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"MaxGDP\", value: maxGDP.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"RegionalLicense\", value: includeRegional.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"Paired\", value: AwardFilter.IsPaired.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"IsUnPaired\", value: AwardFilter.IsUnPaired.toString(), UserId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"IsPairedAndUnPaired\", value: AwardFilter.IsPairedAndUnPaired.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"IsMultiple\", value: AwardFilter.IsMultiple.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"IsSingle\", value: AwardFilter.IsSingle.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"Bands\", value: JSON.stringify(bandOptionsList), userId: 0 },\r\n { id: 0, pageUrl: \"Trends\", field: \"Country\", value: JSON.stringify(options), userId: 0 })\r\n\r\n console.log(list);\r\n\r\n saveUserFilters(list);\r\n\r\n LoadingAlert(\"Show\");\r\n APIFunctions.FilterPricing(AwardFilter)\r\n .then((response) => {\r\n console.log(response.data);\r\n LoadingAlert(\"Hide\");\r\n if (response.data == 0) {\r\n Alert(getValue(\"NoDataToDisplay\", getLang()));\r\n setAwards([]);\r\n return;\r\n } else {\r\n setAwards(response.data);\r\n var nbr_of_awards = response.data.length;\r\n setNumberOfAwards(response.data.length);\r\n\r\n var data = response.data;\r\n var CustomPriceHeader = \"$/M/P x1\";\r\n var count = 0;\r\n var min = Number.MAX_VALUE;\r\n\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n min = Math.min(min, data[i].price);\r\n }\r\n\r\n if (min != 0) {\r\n while (min < 0.001) {\r\n min *= 10;\r\n count++;\r\n console.log(min)\r\n }\r\n }\r\n\r\n var CustomPriceHeader = \"$/M/P\"; \r\n if (annualizePrices){\r\n CustomPriceHeader += \"/year\"\r\n }\r\n \r\n if (normalizeByGDPc) {\r\n CustomPriceHeader += \"/GDPc x \" + Math.pow(10, count);\r\n for (var i = 0, l = response.data.length; i < l; i++) {\r\n response.data[i].price *= Math.pow(10, count);\r\n }\r\n }\r\n else {\r\n CustomPriceHeader += \"x 1\";\r\n }\r\n \r\n setMyHeader(CustomPriceHeader);\r\n \r\n var all_bands = [];\r\n for (var i = 0; i < bandOptionsList.length; i++) {\r\n all_bands.push(bandOptionsList[i].value);\r\n }\r\n\r\n setAllBands(all_bands);\r\n\r\n //lin series\r\n var series = [];\r\n for (var i = 0; i < response.data.length; i++) {\r\n var data_arr = [];\r\n for (var j = 0; j < all_bands.length; j++) {\r\n if (all_bands[j] == response.data[i].band)\r\n data_arr.push(response.data[i].price.toFixed(3));\r\n else\r\n data_arr.push(null);\r\n }\r\n series.push({\r\n name: response.data[i].countryName,\r\n data: data_arr\r\n });\r\n }\r\n setLinSeries(series);\r\n\r\n // Linear freq scale\r\n var bands_linear = [];\r\n for (var i = 400; i < 30000;) {\r\n bands_linear.push(i);\r\n i < 900 ? i += 50 : i == 900 ? i = 1000 : i < 4000 ? i += 1000 : i == 4000 ? i = 23000 : i += 1000;\r\n }\r\n console.log(bands_linear);\r\n setLinearScaleBands(bands_linear);\r\n var linear_scale_series = [];\r\n for (var i = 0; i < response.data.length; i++) {\r\n var data_arr = [];\r\n for (var j = 0; j < bands_linear.length; j++) {\r\n if (bands_linear[j] == response.data[i].band)\r\n data_arr.push(response.data[i].price.toFixed(3));\r\n else\r\n data_arr.push(null);\r\n }\r\n linear_scale_series.push({\r\n data: data_arr\r\n });\r\n }\r\n setLinearScaleSeries(linear_scale_series);\r\n\r\n console.log(awards);\r\n var arr_band_countries = [];\r\n for (var k = 0; k < response.data.length; k++) {\r\n arr_band_countries.push(response.data[k].bandCountry);\r\n }\r\n console.log(arr_band_countries);\r\n var arr = response.data.map(function (val) {\r\n return val.price == null ? 0 : val.price.toFixed(3);\r\n });\r\n\r\n var arr2 = response.data.map(function (val) {\r\n return (\r\n val.band +\r\n \"-\" +\r\n val.countryName +\r\n \"-\" +\r\n val.year +\r\n \"-\" +\r\n val.operatorName +\r\n \" Price=\" +\r\n val.price +\r\n \" $/M/P x1\"\r\n );\r\n });\r\n\r\n var arr3 = response.data.map(function (val) {\r\n return val.price;\r\n });\r\n \r\n console.log(min);\r\n\r\n var mean = 0;\r\n var sum = 0;\r\n var count = response.data.length;\r\n for (var i = 0; i < data.length; i++) {\r\n sum += data[i].price;\r\n }\r\n\r\n mean = calculateMean(sum, count);\r\n\r\n var min = 0;\r\n if (awardTypeSelectedValue == 0) {\r\n const columnsAdded = [\r\n {\r\n Header: ()=>{getValue(\"NumberOfAwards\", getLang())}: {nbr_of_awards}
,\r\n accessor:\"numberOfAwards\",\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n },\r\n {\r\n Header: getValue(\"Pop\", getLang()),\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value))\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return parseFloat(props.value).toFixed(2);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Term\", getLang()),\r\n accessor: \"terms\",\r\n Cell: (props) => {\r\n if (props.value != null || props.value != \"\")\r\n return parseFloat(props.value).toFixed(1);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n },\r\n {\r\n Header: () => {getValue(\"Mean\", getLang())}: {mean}
,\r\n accessor: \"Mean\",\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n Header: CustomPriceHeader,\r\n accessor: \"price\",\r\n sortType: (rowA, rowB) => {\r\n if (rowA.original.price > rowB.original.price) return -1;\r\n if (rowB.original.price > rowA.original.price) return 1;\r\n },\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(3);\r\n else return \"\";\r\n },\r\n },\r\n ],\r\n },\r\n ];\r\n setColumns(columnsAdded);\r\n } else {\r\n const columnsAdded = [\r\n {\r\n Header: ()=>{getValue(\"NumberOfAwards\", getLang())}: {nbr_of_awards}
,\r\n accessor:\"numberOfAwards\",\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n },\r\n {\r\n Header: \"POP .M\",\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value))\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null || props.value != \"\")\r\n return parseFloat(props.value).toFixed(1);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n },\r\n {\r\n Header: () => {getValue(\"Mean\", getLang())}: {mean}
,\r\n accessor: \"Mean\",\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n Header: CustomPriceHeader,\r\n accessor: \"price\",\r\n sortType: (rowA, rowB) => {\r\n if (rowA.original.price > rowB.original.price) return -1;\r\n if (rowB.original.price > rowA.original.price) return 1;\r\n },\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(3);\r\n else return \"\";\r\n },\r\n },\r\n ],\r\n },\r\n ];\r\n setColumns(columnsAdded);\r\n }\r\n\r\n // Plots start\r\n\r\n // console.log(tst)\r\n var arr = response.data.map(function (val) {\r\n return { x: val.year, y: parseInt(val.mhz) };\r\n });\r\n var arr_years = [];\r\n // for (var i = fromDate; i < toDate; i++) {\r\n // arr_years.push(i.toString());\r\n // }\r\n var min_year = response.data[0].year;\r\n for (var i = 0; i < response.data.length; i++) {\r\n if (parseInt(response.data[i].year) < min_year) {\r\n min_year = parseInt(response.data[i].year);\r\n }\r\n }\r\n for (var i = min_year; i < toDate; i++) {\r\n arr_years.push(i.toString());\r\n }\r\n console.log(\"array of years: \", arr_years);\r\n setArrYears(arr_years);\r\n console.log(arr);\r\n\r\n var year_series = [];\r\n for (var i = 0; i < response.data.length; i++) {\r\n var data_arr = [];\r\n for (var j = 0; j < arr_years.length; j++) {\r\n if (parseInt(arr_years[j]) == response.data[i].year)\r\n data_arr.push(response.data[i].price.toFixed(3));\r\n else\r\n data_arr.push(null);\r\n }\r\n year_series.push({\r\n name: response.data[i].countryName,\r\n data: data_arr\r\n });\r\n }\r\n setArrYearsSeries(year_series);\r\n\r\n\r\n var arrOfLin = response.data.map(function (val) {\r\n return { x: val.band.toString(), y: parseInt(val.price.toFixed(3)) };\r\n });\r\n\r\n var arrOfYears = [];\r\n var arrOfYearValues = [];\r\n var yearsData = [];\r\n var i = 0;\r\n var flag = 0;\r\n response.data.map(function (val) {\r\n for (i = 0; i < arrOfYears.length; i++) {\r\n if (arrOfYears[i] == val.year) {\r\n flag = 1;\r\n break;\r\n } else {\r\n flag = 0;\r\n }\r\n }\r\n if (flag == 1) {\r\n arrOfYearValues[i] += 1;\r\n } else {\r\n arrOfYears[i] = val.year;\r\n arrOfYearValues[i] = 1;\r\n }\r\n });\r\n\r\n for (i = 0; i < arr.length; i++) {\r\n yearsData.push({ \"year\": arrOfYears[i], \"value\": arrOfYearValues[i] });\r\n // yearsData.push({\"x\": arr[i][0], \"y\" : arr[i][1]});\r\n // yearsData.push({[arrOfYears[i]]: arrOfYearValues[i]});\r\n }\r\n // console.log(yearsData);\r\n\r\n\r\n var arr_bands = response.data.map(function (val) {\r\n var v = parseInt(val.band);\r\n return v;\r\n });\r\n\r\n // Plots end\r\n\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n LoadingAlert(\"hide\");\r\n });\r\n }\r\n\r\n const renderCountries = () => {\r\n var countries = options;\r\n if (countries != null && countries.length > 0) {\r\n {\r\n return (countries.map((val, idx) => (\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n const ShowPlotQuestion = () => {\r\n setIsOpenChartType(true);\r\n };\r\n\r\n function calculateMean(sum, count) {\r\n return (sum / count).toFixed(3);\r\n }\r\n\r\n const ShowPlot = () => {\r\n hideModal();\r\n var t = $(\"#chartType\").val();\r\n setTrendTypeValue(t);\r\n if (t == 0)\r\n setIsOpenLin(true);\r\n else\r\n if (t == 1)\r\n setIsOpenLog(true);\r\n else\r\n if (t == 2)\r\n setIsOpen(true);\r\n else\r\n setIsOpenLinear(true);\r\n\r\n console.log(linSeries);\r\n\r\n\r\n };\r\n\r\n const firstTable = useTable(\r\n {\r\n columns,\r\n data: awards,\r\n initialState: {\r\n hiddenColumns: columns.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n\r\n const {\r\n getTableProps: getFirstTableProps,\r\n getTableBodyProps: getFirstTableBodyProps,\r\n headerGroups: firstHeaderGroups,\r\n page: firstPage,\r\n nextPage: firstNextPage,\r\n previousPage: firstPreviousPage,\r\n canNextPage: firstCanNextPage,\r\n canPreviousPage: firstCanPreviousPage,\r\n pageOptions: firstPageOptions,\r\n gotoPage: firstGotoPage,\r\n pageCount: firstPageCount,\r\n setPageSize: firstSetPageSize,\r\n state: firstState,\r\n prepareRow: firstPrepareRow,\r\n } = firstTable;\r\n\r\n const { pageIndex, pageSize } = firstState;\r\n\r\n const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n const fileExtension = '.xlsx';\r\n\r\n const exportToCSV = (csvData, fileName) => {\r\n\r\n\r\n var result = [];\r\n if ($('#showResults').val() == \"0\"){\r\n csvData.map((val, i) => {\r\n var item = new Object();\r\n item.Country = val.countryName;\r\n item[\"Pop,M\"] = val.pop;\r\n item[\"GDPc, $\"] = val.gdp;\r\n item.Operator = val.operatorName;\r\n item.Date = val.year;\r\n item[\"Price, $M\t\"] = val.PriceM;\r\n item[\"Term (Y)\"] = val.terms;\r\n item.Band = val.band;\r\n item[myHeader] = val.price;\r\n\r\n\r\n \r\n result.push(item);\r\n });\r\n }\r\n else {\r\n csvData.map((val, i) => {\r\n var item = new Object();\r\n item.Country = val.countryName;\r\n item[\"Pop,M\"] = val.pop;\r\n item[\"GDPc, $\"] = val.gdp;\r\n item.Date = val.year;\r\n item[\"Price, $M\t\"] = val.PriceM;\r\n item[\"Term (Y)\"] = val.terms;\r\n item.Band = val.band;\r\n item[myHeader] = val.price;\r\n result.push(item);\r\n });\r\n }\r\n \r\n\r\n const ws = XLSX.utils.json_to_sheet(result);\r\n const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };\r\n const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });\r\n const data = new Blob([excelBuffer], { type: fileType });\r\n FileSaver.saveAs(data, fileName + fileExtension);\r\n }\r\n\r\n function inputNumberCheck(e) {\r\n if(e.which == 69 || e.which == 187 || e.which == 189 || e.which == 8) {\r\n e.preventDefault();\r\n }\r\n}\r\n\r\n\r\n return (\r\n \r\n \r\n \r\n {getValue(\"YearPlotTitle\", getLang())} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {getValue(\"BandPlotTitle\", getLang())} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {getValue(\"LogPlotTitle\", getLang())} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n Chart Type \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {/* License Certifications */}\r\n
\r\n {/* Filter Actions */}\r\n \r\n {/* Term */}\r\n
\r\n {/* Include Awards */}\r\n \r\n \r\n
\r\n {/* Issue date */}\r\n \r\n \r\n
\r\n\r\n {/* Discount rate */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {/* Country Selection */}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {checkIfCanOpen(e.target.id)}}>\r\n
\r\n {/* Band Selection */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {renderCountries()}\r\n
\r\n selectAllBands(e.target.id)}>\r\n
\r\n {/* Adjustments */}\r\n \r\n {renderBands()}\r\n
\r\n \r\n
\r\n {/* Anaysis */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n setDisplay()}> {showTxt}\r\n \r\n
\r\n \r\n\r\n
\r\n {/* side menu */}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {firstHeaderGroups.map((headerGroup) => (\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {getValue(\"Trends\", getLang())}
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {getValue(\"Page\", getLang())}{\" \"}\r\n \r\n {pageIndex + 1} / {firstPageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | {getValue(\"GoToPage\", getLang())}\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n firstGotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n firstGotoPage(0)}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n firstPreviousPage()}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {getValue(\"Previous\", getLang())}\r\n \r\n firstNextPage()}\r\n disabled={!firstCanNextPage}\r\n >\r\n {getValue(\"Next\", getLang())}\r\n \r\n firstGotoPage(firstPageCount - 1)}\r\n disabled={!firstCanNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n - \r\n
- { exportToCSV(awards, \"Trends\") }} className=\"list-group-item\" style={{ cursor: \"pointer\" }}>
- {exportToPDF()}} className=\"list-group-item\" style={{cursor: \"pointer\"}}> {getValue(\"ExportToPDF\", getLang())} \r\n {isExportPDF &&
\r\n {renderCountries2()}\r\n
\r\n \r\n
\r\n \r\n Back to Filters\r\n \r\n {/* side menu */}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n Socio Economics
\r\n\r\n
\r\n
\r\n\r\n {/* Filter by Indicator Filters */}\r\n \r\n \r\n {\r\n return obj.id === filterId;\r\n })}\r\n getOptionLabel={(option) => option.name}\r\n getOptionValue={(option) => option.id}\r\n options={resultFilters}\r\n onChange={handleChangeFilter}\r\n >\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n return obj.id === sourceId;\r\n })}\r\n getOptionLabel={(option) => option.name}\r\n getOptionValue={(option) => option.id}\r\n options={resultSources}\r\n onChange={handleChangeSource}\r\n >\r\n
\r\n\r\n \r\n \r\n option.countryId}\r\n options={options}\r\n value={selected}\r\n onChange={setSelected}\r\n labelledBy=\"Select\"\r\n />\r\n
\r\n \r\n
\r\n\r\n {/* Filter by Country Filters */}\r\n \r\n filterSocioEconomics()}\r\n onClick={() => checkIfCanView(\"Ecnomics\")}\r\n >\r\n \r\n Search\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n return obj.id === countryFilterId;\r\n })}\r\n getOptionLabel={(option) => option.nameEn}\r\n getOptionValue={(option) => option.countryId}\r\n options={resultCountries}\r\n onChange={handleChangeCountry}\r\n >\r\n
\r\n \r\n
\r\n\r\n \r\n filterSocioEconomicsByCountry()}\r\n onClick={() => checkIfCanView(\"Country\")}\r\n >\r\n \r\n Search\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {\" \"}\r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" ↓\"\r\n : \" ↑\"\r\n : \"\"}{\" \"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {page.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n \r\n setPageSize(Number(e.target.value))\r\n }\r\n >\r\n {[10, 25, 50].map((pageSize) => (\r\n \r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Page{\" \"}\r\n \r\n {pageIndex + 1} of {pageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | Go to page:\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n gotoPage(pageNumber);\r\n }}\r\n style={{ width: \"50px\", height: \"25px\", borderBottom: 0 }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n gotoPage(0)}\r\n disabled={!canPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n previousPage()}\r\n disabled={!canPreviousPage}\r\n >\r\n Previous\r\n \r\n nextPage()}\r\n disabled={!canNextPage}\r\n >\r\n Next\r\n \r\n gotoPage(pageCount - 1)}\r\n disabled={!canNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SocioEconomics2;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport \"../css/CustomStyle.css\";\r\nimport { Alert, LoadingAlert, AlertError } from \"../components/f_Alerts\";\r\nimport jsPDF from \"jspdf\";\r\nimport \"jspdf-autotable\";\r\nimport {\r\n getIMF,\r\n displayPop,\r\n getLang,\r\n ArialBold,\r\n ArialRegular,\r\n BindImageURL,\r\n} from \"../utils/common\";\r\nimport lastPage from \"../Assets/Images/lastPage.png\";\r\nimport rightBg2 from \"../Assets/Images/rightBg.png\";\r\nimport left from \"../Assets/Images/left.png\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport { get } from \"jquery\";\r\n// Benchmark Backup\r\nclass Awards2 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n userInfo: {\r\n name: \"\",\r\n email: \"\",\r\n companyName: \"\",\r\n packageId: 0,\r\n startDate: null,\r\n endDate: null,\r\n logo: \"\",\r\n },\r\n imfType: \"\",\r\n wbType: \"\",\r\n space: \":\",\r\n direction: \"left\",\r\n result: [],\r\n };\r\n this.bindData = this.bindData.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n var obj = [];\r\n var _awards = this.props.awards;\r\n var imF = getIMF() == \"true\" ? true : false;\r\n var txtIMF = this.props.filters.IsIMF == true ? \"IMF\" : \"WB\";\r\n var txtPPP = this.props.filters.IsPPP == true ? \"PPP\" : \"nominal\";\r\n\r\n if (getLang() == \"ar\") {\r\n this.setState({ direction: \"right\" });\r\n }\r\n this.setState({ imfType: txtIMF, wbType: txtPPP });\r\n console.log(this.props.awards);\r\n _awards.map((val, idx) =>\r\n obj.push([\r\n val.countryName,\r\n displayPop(val.pop, imF),\r\n val.gdp == null\r\n ? \"\"\r\n : val.gdp\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? resp)\r\n .then((resp) => this.bindData(resp.data));\r\n }\r\n\r\n bindData(obj) {\r\n this.state.userInfo = obj;\r\n\r\n setTimeout(() => {\r\n this.downloadData();\r\n LoadingAlert(\"Hide\");\r\n }, 5000);\r\n }\r\n\r\n downloadData() {\r\n if (getLang() === \"ar\") {\r\n var callAddFont = function () {\r\n this.addFileToVFS(\"arial-normal.ttf\", ArialRegular);\r\n this.addFont(\"arial-normal.ttf\", \"arial\", \"normal\");\r\n\r\n this.addFileToVFS(\"arialbd-bold.ttf\", ArialBold);\r\n this.addFont(\"arialbd-bold.ttf\", \"arial\", \"bold\");\r\n };\r\n\r\n jsPDF.API.events.push([\"addFonts\", callAddFont]);\r\n }\r\n\r\n const textAlign = getLang() === \"ar\" ? \"right\" : \"left\";\r\n\r\n window.jsPDF = jsPDF;\r\n\r\n const leftBg = left;\r\n const rightBg = rightBg2;\r\n const chart = \"\";\r\n const lastPageBgFull = lastPage;\r\n\r\n var doc = new jsPDF(\"p\", \"mm\", [297, 210]);\r\n\r\n if (getLang() == \"ar\") {\r\n doc.setLanguage(\"ar\");\r\n doc.setFont(\"arial\", \"bold\");\r\n }\r\n\r\n let dateOptions = { year: \"numeric\", month: \"long\", day: \"numeric\" };\r\n const dateStr = new Date().toLocaleString(\"en-LB\", dateOptions);\r\n\r\n /*==================================================\r\n PAGE 1\r\n ================================================*/\r\n\r\n //top left background\r\n doc.addImage(leftBg, \"png\", 0, 0, 145, 300);\r\n //top right background\r\n doc.addImage(rightBg, \"png\", 195, 0, 14, 300);\r\n //top right logo\r\n\r\n if (this.state.userInfo.logo != null) {\r\n var logo = this.state.userInfo.logo;\r\n var fileExtension = logo.split(\".\").pop();\r\n\r\n const Image = BindImageURL(this.state.userInfo.logo);\r\n doc.addImage(Image, fileExtension, 158, 10, (10 * 853) / 210, 10, \"logo\");\r\n }\r\n\r\n // SPECTRUM PRICING\r\n doc.setFontSize(35);\r\n doc.setTextColor(89, 89, 89);\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 40,\r\n 100,\r\n getValue(\"PDFTitle\", getLang()),\r\n { align: textAlign }\r\n );\r\n\r\n //PARAGRAPH under SPECTRUM PRICING\r\n doc.setFontSize(13);\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 40,\r\n 115,\r\n getValue(\"Abstract\", getLang()),\r\n { maxWidth: 132, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n if (getLang() != \"ar\") doc.line(40, 116, 58, 116);\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 40,\r\n 140,\r\n getValue(\"AwardDate\", getLang()) + \": \" + dateStr,\r\n { maxWidth: 132, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n\r\n if (getLang() != \"ar\") doc.line(40, 141, 51, 141);\r\n\r\n //footer email\r\n\r\n /*==================================================\r\n PAGE 2\r\n ================================================*/\r\n\r\n doc.addPage();\r\n // doc.addImage(logo, \"png\", 171, 10, 6 * 853 / 210, 6, \"logo\");\r\n\r\n //user information\r\n doc.setFontSize(10);\r\n doc.setFont(undefined, \"bold\");\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 20,\r\n getValue(\"UserInformation\", getLang()),\r\n { align: textAlign }\r\n );\r\n\r\n if (getLang() === \"ar\") {\r\n //table head\r\n let arHead = [\r\n [\r\n {\r\n content: getValue(\"UserRunInformation\", getLang()),\r\n colSpan: 2,\r\n styles: { halign: \"center\" },\r\n },\r\n ],\r\n ];\r\n if (getLang() === \"ar\") arHead = arHead.map((r) => r.reverse());\r\n\r\n let arBody = [\r\n [getValue(\"User\", getLang()), this.state.userInfo.name],\r\n [getValue(\"Organisation\", getLang()), this.state.userInfo.companyName],\r\n [getValue(\"AwardDate\", getLang()), dateStr],\r\n [\"S/W Version\", \"Release 2.01\"],\r\n ];\r\n if (getLang() === \"ar\") arBody = arBody.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1, font: \"arial\" },\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n startY: 25,\r\n headerStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n head: arHead,\r\n body: arBody,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1 },\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n startY: 25,\r\n head: [\r\n [\r\n {\r\n content: getValue(\"UserRunInformation\", getLang()),\r\n colSpan: 2,\r\n styles: { halign: \"center\" },\r\n },\r\n ],\r\n ],\r\n body: [\r\n [getValue(\"User\", getLang()), this.state.userInfo.name],\r\n [\r\n getValue(\"Organisation\", getLang()),\r\n this.state.userInfo.companyName,\r\n ],\r\n [getValue(\"AwardDate\", getLang()), dateStr],\r\n [\"S/W Version\", \"Release 2.01\"],\r\n ],\r\n });\r\n }\r\n\r\n //SELECTED PARAMETERS OF AWARDS\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 63,\r\n getValue(\"SelectedParameteres\", getLang()),\r\n { align: textAlign }\r\n );\r\n if (getLang() === \"ar\") {\r\n let arHead2 = [\r\n [\r\n getValue(\"Parameter\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ];\r\n arHead2 = arHead2.map((r) => r.reverse());\r\n\r\n let arBody2 = [\r\n [\r\n getValue(\"SingleBand\", getLang()),\r\n this.props.filters.IsSingle == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"MultiBand\", getLang()),\r\n this.props.filters.IsMultiple == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithPaired\", getLang()),\r\n this.props.filters.IsPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithUnPaired\", getLang()),\r\n this.props.filters.IsUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithBoth\", getLang()),\r\n this.props.filters.IsPairedAndUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"RegionalLicenses\", getLang()),\r\n this.props.filters.RegionalLicense == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [getValue(\"MinGDPUS$\", getLang()), this.props.filters.MinGDP],\r\n [getValue(\"MaxGDPUS$\", getLang()), this.props.filters.MaxGDP],\r\n [getValue(\"AwardsFrom\", getLang()), this.props.filters.FromYear],\r\n [getValue(\"AwardsTo\", getLang()), this.props.filters.ToYear],\r\n ];\r\n arBody2 = arBody2.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1, font: \"arial\" },\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n headerStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n startY: 67,\r\n head: arHead2,\r\n body: arBody2,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 9, cellPadding: 1 },\r\n columnStyles: {\r\n 0: { cellWidth: 120 },\r\n },\r\n startY: 67,\r\n head: [\r\n [\r\n getValue(\"Parameter\", getLang()),\r\n getValue(\"UserSelection\", getLang()),\r\n ],\r\n ],\r\n body: [\r\n [\r\n getValue(\"SingleBand\", getLang()),\r\n this.props.filters.IsSingle == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"MultiBand\", getLang()),\r\n this.props.filters.IsMultiple == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithPaired\", getLang()),\r\n this.props.filters.IsPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithUnPaired\", getLang()),\r\n this.props.filters.IsUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"AwardsWithBoth\", getLang()),\r\n this.props.filters.IsPairedAndUnPaired == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [\r\n getValue(\"RegionalLicenses\", getLang()),\r\n this.props.filters.RegionalLicense == true\r\n ? getValue(\"Included\", getLang())\r\n : getValue(\"NotIncluded\", getLang()),\r\n ],\r\n [getValue(\"MinGDPUS$\", getLang()), this.props.filters.MinGDP],\r\n [getValue(\"MaxGDPUS$\", getLang()), this.props.filters.MaxGDP],\r\n [getValue(\"AwardsFrom\", getLang()), this.props.filters.FromYear],\r\n [getValue(\"AwardsTo\", getLang()), this.props.filters.ToYear],\r\n ],\r\n });\r\n }\r\n\r\n /*==================================================\r\n PAGE 3\r\n ================================================*/\r\n doc.addPage();\r\n\r\n doc.setFontSize(10);\r\n doc.setFont(undefined, \"bold\");\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 20,\r\n getValue(\"ListOfAwards\", getLang()),\r\n { align: textAlign }\r\n );\r\n // doc.text(20, 20, getValue(\"ListOfAwards\", getLang()));\r\n doc.setFont(undefined, \"normal\");\r\n\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 28,\r\n getValue(\"ListOfAwardsDescription\", getLang()),\r\n { align: textAlign }\r\n );\r\n // doc.text(20, 28, getValue(\"ListOfAwardsDescription\", getLang()), { maxWidth: 170, lineHeightFactor: 1.3 });\r\n\r\n if (getLang() === \"ar\") {\r\n //table head\r\n let arHead3 = [\r\n [\r\n getValue(\"Countries\", getLang()),\r\n getValue(\"Pop\", getLang()),\r\n \"GDPC, $\",\r\n getValue(\"Operator\", getLang()),\r\n getValue(\"AwardDate\", getLang()),\r\n getValue(\"Price$M\", getLang()),\r\n getValue(\"Term\", getLang()),\r\n getValue(\"Bands\", getLang()),\r\n getValue(\"Pairing\", getLang()),\r\n getValue(\"TotalMHz\", getLang()),\r\n getValue(\"Coverage\", getLang()),\r\n ],\r\n ];\r\n arHead3 = arHead3.map((r) => r.reverse());\r\n\r\n let arBody3 = this.state.result;\r\n arBody3 = arBody3.map((r) => r.reverse());\r\n\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 8, cellPadding: 1, font: \"arial\" },\r\n columnStyles: {\r\n 0: { cellWidth: 18 },\r\n 1: { cellWidth: 13 },\r\n 2: { cellWidth: 13 },\r\n 3: { cellWidth: 20 },\r\n 4: { cellWidth: 13 },\r\n 5: { cellWidth: 13 },\r\n 6: { cellWidth: 13 },\r\n 7: { cellWidth: 13 },\r\n 8: { cellWidth: 10 },\r\n 9: { cellWidth: 13 },\r\n 10: { cellWidth: 20 },\r\n 11: { cellWidth: 20 },\r\n },\r\n startY: 43,\r\n headerStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n bodyStyles: {\r\n font: \"arial\",\r\n halign: \"right\",\r\n },\r\n head: arHead3,\r\n body: arBody3,\r\n });\r\n } else {\r\n doc.autoTable({\r\n margin: { left: 20 },\r\n styles: { fontSize: 8, cellPadding: 1 },\r\n columnStyles: {\r\n 0: { cellWidth: 18 },\r\n 1: { cellWidth: 13 },\r\n 2: { cellWidth: 13 },\r\n 3: { cellWidth: 20 },\r\n 4: { cellWidth: 13 },\r\n 5: { cellWidth: 13 },\r\n 6: { cellWidth: 13 },\r\n 7: { cellWidth: 13 },\r\n 8: { cellWidth: 10 },\r\n 9: { cellWidth: 13 },\r\n 10: { cellWidth: 20 },\r\n 11: { cellWidth: 20 },\r\n },\r\n startY: 43,\r\n head: [\r\n [\r\n getValue(\"Countries\", getLang()),\r\n getValue(\"Pop\", getLang()),\r\n \"GDPC, $\",\r\n getValue(\"Operator\", getLang()),\r\n getValue(\"AwardDate\", getLang()),\r\n getValue(\"Price$M\", getLang()),\r\n getValue(\"Term\", getLang()),\r\n getValue(\"Bands\", getLang()),\r\n getValue(\"Pairing\", getLang()),\r\n getValue(\"TotalMHz\", getLang()),\r\n getValue(\"Coverage\", getLang()),\r\n ],\r\n ],\r\n body: this.state.result,\r\n });\r\n }\r\n\r\n let finalY = doc.lastAutoTable.finalY; // The y position on the page\r\n\r\n if (finalY > 210 - 50) {\r\n doc.addPage();\r\n finalY = 20;\r\n }\r\n\r\n doc\r\n .text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 10,\r\n getValue(\"Notes\", getLang()),\r\n { align: textAlign }\r\n )\r\n .setFontSize(8);\r\n doc.setFont(undefined, \"normal\");\r\n\r\n doc\r\n .text(\r\n \"1. \" +\r\n getValue(\"GDPNoteP1\", getLang()) +\r\n \" \" +\r\n this.state.wbType +\r\n \" \" +\r\n getValue(\"GDPNoteP2\", getLang()),\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 15,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n doc\r\n .text(\r\n \"2. \" + getValue(\"BandPairingNote\", getLang()),\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 20,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n doc\r\n .text(\r\n \"3. \" + getValue(\"CoverageNote\", getLang()),\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 28,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n doc\r\n .text(\r\n \"4. \" + getValue(\"PopulationNote\", getLang()),\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 33,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n doc\r\n .text(\r\n \"5. \" + getValue(\"SocialNote\", getLang()) + \" \" + this.state.imfType,\r\n getLang() === \"ar\" ? 195 : 20,\r\n finalY + 43,\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n )\r\n .setFontSize(8);\r\n\r\n /*==================================================\r\n LAST PAGE\r\n ================================================*/\r\n\r\n doc.addPage();\r\n doc.addImage(lastPageBgFull, \"png\", 0, 0, 297, 300);\r\n //doc.addImage(logo, \"png\", 18, 80, 10 * 853 / 210, 10, \"logo\");\r\n\r\n //notes\r\n doc.setFont(undefined, \"normal\");\r\n doc.setFontSize(11);\r\n doc.text(\r\n getLang() === \"ar\" ? 195 : 20,\r\n 100,\r\n getValue(\"LastPageNote\", getLang()),\r\n { maxWidth: 170, lineHeightFactor: 1.3, align: textAlign }\r\n );\r\n // doc.text(getValue(\"LastPageNote\", getLang()), 20, 100, { maxWidth: 170, lineHeightFactor: 1.3 });\r\n doc.textWithLink(\"www.spectre.com\", 20, 115, {\r\n url: \"http://www.spectre.com\",\r\n });\r\n //download pdf\r\n const pageCount = doc.internal.getNumberOfPages();\r\n for (var i = 1; i < pageCount; i++) {\r\n doc.setFont(undefined, \"normal\");\r\n doc.setPage(i);\r\n doc.text(\"SPECTRE Report\", 20, 290);\r\n doc.text(`Page | ` + i, 100, 290);\r\n doc.text(dateStr, 167, 290);\r\n }\r\n doc.save(\"report.pdf\");\r\n // //or open it in a new tab instead\r\n // var string = doc.output('datauristring');\r\n // var embed = \"\"\r\n // var x = window.open();\r\n // x.document.open();\r\n // x.document.write(embed);\r\n // x.document.close();\r\n }\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n edit(props.row.original.id)}\r\n className=\" btn btn-primary btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: footerData,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Footer;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport '../css/CustomStyle.css';\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport { param } from \"jquery\";\r\nimport { AlertError, AlertSuccess , AlertConfirm} from \"./f_Alerts\";\r\nimport { BindImageURL } from \"../utils/common\";\r\nimport { queryAllByDisplayValue } from \"@testing-library/react\";\r\nimport Select from \"react-select\";\r\n\r\nconst Features = (props) => {\r\n\r\n const myFeatures = {\r\n id: 0,\r\n titleEn: '',\r\n titleFr: '',\r\n titleAr: '',\r\n descriptionEn: '',\r\n descriptionFr: '',\r\n descriptionAr: '',\r\n imageUrl: '',\r\n }\r\n\r\n var myPermissions =\r\n {\r\n canEdit: false,\r\n canAdd: false,\r\n canDelete: false,\r\n }\r\n\r\n const addNew = () => {\r\n if (permissions.canAdd) {\r\n var tmp = {\r\n id: 0,\r\n referenceText: '',\r\n imageUrl: '',\r\n isDeleted: false,\r\n }\r\n\r\n setEdited(tmp);\r\n setDisplayView(false);\r\n setImage('');\r\n setIsOpen(true);\r\n }\r\n\r\n }\r\n\r\n const [permissions, setPermissions] = useState(myPermissions);\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const [arrServices, setArrServices] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"Service Details\");\r\n const [edited, setEdited] = useState(myFeatures);\r\n const [image, setImage] = useState('');\r\n const serviceRef = useRef();\r\n const [displayView, setDisplayView] = useState(false);\r\n const [icons, setIncon] = useState([]);\r\n\r\n serviceRef.current = arrServices;\r\n\r\n\r\n useEffect(() => {\r\n getUserPermissions();\r\n }, []);\r\n\r\n useEffect(() => {\r\n APIFunctions.getAllIcons()\r\n .then((resp) => resp)\r\n .then((resp) => setIncon(resp.data));\r\n }, []);\r\n\r\n\r\n \r\n const handlIconChange = (selectedOptions) => {\r\n var _edited = edited;\r\n _edited.icon = selectedOptions.icon1;\r\n setEdited(_edited)\r\n //setCurrentPackage({ ...currentPackage, imageUrl: selectedOptions.icon1 })\r\n console.log(edited);\r\n\r\n };\r\n\r\n\r\n const getUserPermissions = async () => {\r\n APIFunctions.getUserPermissions(\"Services\")\r\n .then((response) => {\r\n var _permissions = [];\r\n var result = response.data;\r\n result.map((element) => {\r\n if (element.pageUrl == \"Services\") {\r\n _permissions.push(element);\r\n }\r\n })\r\n\r\n var edit = (_permissions.find((element) => { return element.action == \"Edit\" })) === undefined ? false : true;\r\n var add = (_permissions.find((element) => { return element.action == \"Add\" })) === undefined ? false : true;\r\n var remove = (_permissions.find((element) => { return element.action == \"Delete\" })) === undefined ? false : true;\r\n\r\n\r\n\r\n var obj = permissions;\r\n obj.canEdit = edit;\r\n obj.canAdd = add;\r\n obj.canDelete = remove;\r\n setPermissions(obj);\r\n getServices();\r\n })\r\n\r\n }\r\n\r\n\r\n const getServices = () => {\r\n APIFunctions.getAllFeatures()\r\n .then((response) => {\r\n setArrServices(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n\r\n const edit = (id) => {\r\n\r\n if (permissions.canEdit) {\r\n var data = serviceRef.current;\r\n var obj = new Object();\r\n data.map((val, x) => {\r\n if (val.id == id)\r\n obj = val;\r\n });\r\n\r\n //console.log(obj);\r\n if (obj != null) {\r\n setImage(obj.imageUrl);\r\n setEdited(obj);\r\n setDisplayView(true);\r\n setIsOpen(true);\r\n }\r\n }\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n };\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"Service Details\");\r\n };\r\n\r\n const onFileChange2 = (event) => {\r\n\r\n if (event.target.files.length == 0) {\r\n return;\r\n }\r\n const formData = new FormData();\r\n formData.append(\r\n \"file\",\r\n event.target.files[0]\r\n );\r\n\r\n APIFunctions.uploadMedia(formData)\r\n .then((response) => {\r\n var obj = edited;\r\n obj.icon = response.data;\r\n setImage(response.data);\r\n setDisplayView(true);\r\n setEdited(obj);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n\r\n\r\n }\r\n\r\n const viewResource = () => {\r\n var image = BindImageURL(edited.imageUrl);\r\n window.open(image);\r\n }\r\n\r\n const save = () => {\r\n\r\n setSaveTxt(\"Saving...\");\r\n\r\n if (edited.titleEn == \"\" || edited.titleEn == null\r\n || edited.titleAr == \"\" || edited.titleAr == null\r\n || edited.titleFr == \"\" || edited.titleFr == null\r\n || edited.descriptionEn == \"\" || edited.descriptionEn == null\r\n || edited.descriptionFr == \"\" || edited.descriptionFr == null\r\n || edited.descriptionAr == \"\" || edited.descriptionAr == null\r\n || edited.imageUrl == \"\" ) {\r\n AlertError(\"Please enter required fields\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n\r\n\r\n APIFunctions.saveFeature(edited)\r\n .then((response) => {\r\n if (!response.data) {\r\n AlertError(\"Something went wrong\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n else {\r\n AlertSuccess(\"Operation done successfully\");\r\n getServices();\r\n setTimeout(() => { setIsOpen(false); }, 300);\r\n setSaveTxt(\"Save\");\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n const remove = (id, rowIndex) => {\r\n if (permissions.canDelete) {\r\n AlertConfirm('Are you sure you want to delete ?')\r\n .then(res => {\r\n if (res.value) {\r\n APIFunctions.deleteFeature(id)\r\n .then((response) => {\r\n if (response) {\r\n let newRes = [...serviceRef.current];\r\n newRes.splice(rowIndex, 1);\r\n setArrServices(newRes);\r\n AlertSuccess(\"Deleted Successfully\");\r\n }\r\n else {\r\n AlertError(\"Something went wrong\");\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n })\r\n }\r\n\r\n }\r\n\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Title In English\",\r\n accessor: \"titleEn\",\r\n },\r\n {\r\n Header: \"Title In Arabic\",\r\n accessor: \"titleAr\",\r\n },\r\n {\r\n Header: \"Title In French\",\r\n accessor: \"titleFr\",\r\n },\r\n {\r\n Header: \"Description In English\",\r\n accessor: \"descriptionEn\",\r\n },\r\n {\r\n Header: \"Description In Arabic\",\r\n accessor: \"descriptionAr\",\r\n },\r\n {\r\n Header: \"Description In French\",\r\n accessor: \"descriptionFr\",\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Footer Data
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, titleAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, titleFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, buildingEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, buildingAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, buildingFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, streetEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, streetAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, streetFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, cityEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, cityAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, cityFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, addressEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, addressAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, addressFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n { setEdited({ ...edited, email: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, phoneNumber: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n edit(props.row.original.id)}\r\n className=\" btn btn-primary btn-xs\"\r\n >\r\n \r\n \r\n remove(props.row.original.id)}\r\n className=\" btn btn-danger btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: arrServices,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Features;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport '../css/CustomStyle.css';\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport { param } from \"jquery\";\r\nimport { AlertError, AlertSuccess, AlertConfirm, LoadingAlert } from \"./f_Alerts\";\r\nimport { BindImageURL } from \"../utils/common\";\r\n\r\nconst FQA = (props) => {\r\n\r\n const myService = {\r\n id: 0,\r\n questionEn: '',\r\n questionFr: '',\r\n questionAr: '',\r\n answerEn: '',\r\n answerFr: '',\r\n answerAr: '',\r\n isDeleted: false,\r\n }\r\n var myPermissions =\r\n {\r\n canAdd: false,\r\n canEdit: false,\r\n canDelete: false,\r\n }\r\n\r\n const [permissions, setPermissions] = useState(myPermissions);\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const [arrServices, setArrServices] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"FAQs\");\r\n const [edited, setEdited] = useState(myService);\r\n const serviceRef = useRef();\r\n\r\n serviceRef.current = arrServices;\r\n\r\n\r\n useEffect(() => {\r\n getUserPermissions();\r\n }, []);\r\n \r\n\r\n const getUserPermissions = async () => {\r\n APIFunctions.getUserPermissions(\"FQA\")\r\n .then((response) => {\r\n var _permissions = [];\r\n var result = response.data;\r\n result.map((element) => {\r\n if (element.pageUrl == \"FQA\") {\r\n _permissions.push(element);\r\n }\r\n })\r\n \r\n \r\n var add = (_permissions.find((element) => { return element.action == \"Add\" })) === undefined ? false : true;\r\n var edit = (_permissions.find((element) => { return element.action == \"Edit\" })) === undefined ? false : true;\r\n var _delete = (_permissions.find((element) => { return element.action == \"Delete\" })) === undefined ? false : true;\r\n \r\n \r\n \r\n \r\n var obj = permissions;\r\n obj.canAdd = add;\r\n obj.canEdit = edit;\r\n obj.canDelete = _delete;\r\n getServices();\r\n setPermissions(obj);\r\n \r\n })\r\n \r\n }\r\n\r\n const getServices = () => {\r\n APIFunctions.getAllFQA()\r\n .then((response) => {\r\n setArrServices(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const edit = (id) => {\r\n var data = serviceRef.current;\r\n var obj = new Object();\r\n data.map((val, x) => {\r\n if (val.id == id)\r\n obj = val;\r\n });\r\n\r\n //console.log(obj);\r\n if (obj != null) {\r\n setEdited(obj);\r\n setIsOpen(true);\r\n }\r\n }\r\n\r\n const remove = (rowIndex) => {\r\n \r\n AlertConfirm('Are you sure you want to delete ?')\r\n .then(res => {\r\n \r\n if (res.value) {\r\n const id = serviceRef.current[rowIndex].id;\r\n\r\n LoadingAlert(\"Show\");\r\n APIFunctions.deleteFQA(id)\r\n .then((response) => {\r\n \r\n LoadingAlert(\"Hide\");\r\n AlertSuccess(\"Operation done successfully\");\r\n let obj = [...serviceRef.current];\r\n obj.splice(rowIndex, 1);\r\n\r\n setArrServices(obj);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n })\r\n\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n };\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"FAQ\");\r\n };\r\n\r\n const addNew = () => {\r\n setEdited(myService);\r\n setIsOpen(true);\r\n }\r\n\r\n const save = () => {\r\n\r\n setSaveTxt(\"Saving...\");\r\n\r\n if (edited.questionEn == \"\" || edited.questionEn == null\r\n || edited.questionAr == \"\" || edited.questionAr == null\r\n || edited.questionFr == \"\" || edited.questionFr == null\r\n || edited.answerEn == \"\" || edited.answerEn == null\r\n || edited.answerFr == \"\" || edited.answerFr == null\r\n || edited.answerAr == \"\" || edited.answerAr == null) {\r\n AlertError(\"Please enter required fields\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n\r\n APIFunctions.saveFQA(edited)\r\n .then((response) => {\r\n if (!response.data) {\r\n AlertError(\"Something went wrong\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n else {\r\n AlertSuccess(\"Operation done successfully\");\r\n getServices();\r\n setTimeout(() => { setIsOpen(false); }, 300);\r\n setSaveTxt(\"Save\");\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Question In English\",\r\n accessor: \"questionEn\",\r\n },\r\n {\r\n Header: \"Question In Arabic\",\r\n accessor: \"questionAr\",\r\n },\r\n {\r\n Header: \"Question In French\",\r\n accessor: \"questionFr\",\r\n },\r\n {\r\n Header: \"Answer In English\",\r\n accessor: \"answerEn\",\r\n },\r\n {\r\n Header: \"Answer In Arabic\",\r\n accessor: \"answerAr\",\r\n },\r\n {\r\n Header: \"Answer In French\",\r\n accessor: \"answerFr\",\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n const rowIdx = props.row.id;\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Services
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, titleAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionFr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {\r\n return obj.icon1 == edited.imageUrl;\r\n })}\r\n getOptionLabel={(option) => {option.icon1}}\r\n getOptionValue={(option) => option.id}\r\n options={icons}\r\n onChange={handlIconChange}\r\n >\r\n \r\n \r\n
\r\n \r\n edit(props.row.original.id)}\r\n className=\" btn btn-primary btn-xs\">\r\n \r\n \r\n\r\n remove(rowIdx)}\r\n className=\" btn btn-danger btn-xs\">\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: arrServices,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FQA;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport '../css/CustomStyle.css';\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport { param } from \"jquery\";\r\nimport { AlertError, AlertSuccess } from \"./f_Alerts\";\r\nimport { BindImageURL } from \"../utils/common\";\r\nimport Select from \"react-select\";\r\n\r\nconst HelpService = (props) => {\r\n\r\n const myService = {\r\n id: 0,\r\n titleEn: '',\r\n titleFr: '',\r\n titleAr: '',\r\n descriptionEn: '',\r\n descriptionFr: '',\r\n descriptionAr: '',\r\n readMoreEn: '', \r\n readMoreAr: '', \r\n readMoreFr: '',\r\n icon: '',\r\n }\r\n var myPermissions =\r\n {\r\n canAdd: false,\r\n canEdit: false,\r\n canDelete: false,\r\n }\r\n\r\n const [permissions, setPermissions] = useState(myPermissions);\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const [arrServices, setArrServices] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"Feature Details\");\r\n const [edited, setEdited] = useState(myService);\r\n\r\n const [icons, setIncon] = useState([]);\r\n const [image, setImage] = useState('');\r\n const serviceRef = useRef();\r\n \r\n\r\n serviceRef.current = arrServices;\r\n\r\n \r\n \r\n useEffect(() => {\r\n getUserPermissions();\r\n }, []);\r\n \r\n const getUserPermissions = async () => {\r\n APIFunctions.getUserPermissions(\"Glossary\")\r\n .then((response) => {\r\n var _permissions = [];\r\n var result = response.data;\r\n result.map((element) => {\r\n if (element.pageUrl == \"Glossary\") {\r\n _permissions.push(element);\r\n }\r\n })\r\n \r\n \r\n var add = (_permissions.find((element) => { return element.action == \"Add\" })) === undefined ? false : true;\r\n var edit = (_permissions.find((element) => { return element.action == \"Edit\" })) === undefined ? false : true;\r\n var _delete = (_permissions.find((element) => { return element.action == \"Delete\" })) === undefined ? false : true;\r\n \r\n \r\n \r\n \r\n var obj = permissions;\r\n obj.canAdd = add;\r\n obj.canEdit = edit;\r\n obj.canDelete = _delete;\r\n getServices();\r\n setPermissions(obj);\r\n \r\n })\r\n \r\n }\r\n\r\n useEffect(() => {\r\n APIFunctions.getAllIcons()\r\n .then((resp) => resp)\r\n .then((resp) => setIncon(resp.data));\r\n }, []);\r\n\r\n\r\n const getServices = () => {\r\n APIFunctions.getAllHelpServices()\r\n .then((response) => {\r\n setArrServices(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n // const refreshList = () => {\r\n // getServices();\r\n // };\r\n\r\n\r\n const edit = (id) => {\r\n var data = serviceRef.current;\r\n var obj = new Object();\r\n data.map((val, x) => {\r\n if (val.id == id)\r\n obj = val;\r\n });\r\n\r\n //console.log(obj);\r\n if (obj != null) {\r\n setImage(obj.icon);\r\n setEdited(obj);\r\n setIsOpen(true);\r\n }\r\n\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n };\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"Service Details\");\r\n };\r\n\r\n\r\n const handlIconChange = (selectedOptions) => {\r\n var _edited = edited;\r\n _edited.icon = selectedOptions.icon1;\r\n setEdited(_edited)\r\n //setCurrentPackage({ ...currentPackage, imageUrl: selectedOptions.icon1 })\r\n console.log(edited);\r\n\r\n };\r\n\r\n const viewResource = () => {\r\n var image = BindImageURL(edited.icon);\r\n window.open(image);\r\n }\r\n\r\n const save = () => {\r\n\r\n setSaveTxt(\"Saving...\");\r\n\r\n if (edited.titleEn == \"\" || edited.titleEn == null\r\n || edited.titleAr == \"\" || edited.titleAr == null\r\n || edited.titleFr == \"\" || edited.titleFr == null\r\n || edited.descriptionEn == \"\" || edited.descriptionEn == null\r\n || edited.descriptionFr == \"\" || edited.descriptionFr == null\r\n || edited.descriptionAr == \"\" || edited.descriptionAr == null\r\n || edited.readMoreEn == \"\" || edited.readMoreEn == null\r\n || edited.readMoreFr == \"\" || edited.readMoreFr == null\r\n || edited.readMoreAr == \"\" || edited.readMoreAr == null) {\r\n AlertError(\"Please enter required fields\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n\r\n APIFunctions.saveHelpServices(edited)\r\n .then((response) => {\r\n if (!response.data) {\r\n AlertError(\"Something went wrong\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n else {\r\n AlertSuccess(\"Operation done successfully\");\r\n getServices();\r\n setTimeout(() => { setIsOpen(false); }, 300);\r\n setSaveTxt(\"Save\");\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Title In English\",\r\n accessor: \"titleEn\",\r\n },\r\n {\r\n Header: \"Title In Arabic\",\r\n accessor: \"titleAr\",\r\n },\r\n {\r\n Header: \"Title In French\",\r\n accessor: \"titleFr\",\r\n },\r\n {\r\n Header: \"Description In English\",\r\n accessor: \"descriptionEn\",\r\n },\r\n {\r\n Header: \"Description In Arabic\",\r\n accessor: \"descriptionAr\",\r\n },\r\n {\r\n Header: \"Description In French\",\r\n accessor: \"descriptionFr\",\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n return (\r\n \r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: arrServices,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n FAQa
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, questionEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, questionAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n { setEdited({ ...edited, questionFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, answerEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, answerAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, answerFr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n\r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HelpService;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport '../css/CustomStyle.css';\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport { param } from \"jquery\";\r\nimport { AlertError, AlertSuccess, AlertConfirm, LoadingAlert } from \"./f_Alerts\";\r\nimport { BindImageURL } from \"../utils/common\";\r\n\r\nconst Glossary = (props) => {\r\n\r\n const myService = {\r\n id: 0,\r\n nameEn: '',\r\n nameFr: '',\r\n nameAr: '',\r\n descriptionEn: '',\r\n descriptionFr: '',\r\n descriptionAr: '',\r\n isDeleted: false,\r\n }\r\n\r\n var myPermissions =\r\n {\r\n canAdd: false,\r\n canEdit: false,\r\n canDelete: false,\r\n }\r\n\r\n const [permissions, setPermissions] = useState(myPermissions);\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const [arrServices, setArrServices] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"FAQs\");\r\n const [edited, setEdited] = useState(myService);\r\n const serviceRef = useRef();\r\n\r\n serviceRef.current = arrServices;\r\n\r\n useEffect(() => {\r\n getUserPermissions();\r\n }, []);\r\n \r\n const getUserPermissions = async () => {\r\n APIFunctions.getUserPermissions(\"Glossary\")\r\n .then((response) => {\r\n var _permissions = [];\r\n var result = response.data;\r\n result.map((element) => {\r\n if (element.pageUrl == \"Glossary\") {\r\n _permissions.push(element);\r\n }\r\n })\r\n \r\n \r\n var add = (_permissions.find((element) => { return element.action == \"Add\" })) === undefined ? false : true;\r\n var edit = (_permissions.find((element) => { return element.action == \"Edit\" })) === undefined ? false : true;\r\n var _delete = (_permissions.find((element) => { return element.action == \"Delete\" })) === undefined ? false : true;\r\n \r\n \r\n \r\n \r\n var obj = permissions;\r\n obj.canAdd = add;\r\n obj.canEdit = edit;\r\n obj.canDelete = _delete;\r\n getServices();\r\n setPermissions(obj);\r\n \r\n })\r\n \r\n }\r\n \r\n\r\n // useEffect(() => {\r\n // getServices();\r\n // }, []);\r\n\r\n const getServices = () => {\r\n APIFunctions.getAllGlossary()\r\n .then((response) => {\r\n setArrServices(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const edit = (id) => {\r\n var data = serviceRef.current;\r\n var obj = new Object();\r\n data.map((val, x) => {\r\n if (val.id == id)\r\n obj = val;\r\n });\r\n\r\n //console.log(obj);\r\n if (obj != null) {\r\n setEdited(obj);\r\n setIsOpen(true);\r\n }\r\n }\r\n\r\n const remove = (rowIndex) => {\r\n \r\n AlertConfirm('Are you sure you want to delete ?')\r\n .then(res => {\r\n \r\n if (res.value) {\r\n const id = serviceRef.current[rowIndex].id;\r\n\r\n LoadingAlert(\"Show\");\r\n APIFunctions.deleteGlossary(id)\r\n .then((response) => {\r\n \r\n LoadingAlert(\"Hide\");\r\n AlertSuccess(\"Operation done successfully\");\r\n let obj = [...serviceRef.current];\r\n obj.splice(rowIndex, 1);\r\n\r\n setArrServices(obj);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n })\r\n\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n };\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"Glossary\");\r\n };\r\n\r\n const addNew = () => {\r\n setEdited(myService);\r\n setIsOpen(true);\r\n }\r\n\r\n const save = () => {\r\n\r\n setSaveTxt(\"Saving...\");\r\n\r\n if (edited.nameEn == \"\" || edited.nameEn == null\r\n || edited.nameAr == \"\" || edited.nameAr == null\r\n || edited.nameFr == \"\" || edited.nameFr == null\r\n || edited.descriptionEn == \"\" || edited.descriptionEn == null\r\n || edited.descriptionFr == \"\" || edited.descriptionFr == null\r\n || edited.descriptionAr == \"\" || edited.descriptionAr == null) {\r\n AlertError(\"Please enter required fields\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n\r\n APIFunctions.saveGlossary(edited)\r\n .then((response) => {\r\n if (!response.data) {\r\n AlertError(\"Something went wrong\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n else {\r\n AlertSuccess(\"Operation done successfully\");\r\n getServices();\r\n setTimeout(() => { setIsOpen(false); }, 300);\r\n setSaveTxt(\"Save\");\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Word In English\",\r\n accessor: \"nameEn\",\r\n },\r\n {\r\n Header: \"Word In Arabic\",\r\n accessor: \"nameAr\",\r\n },\r\n {\r\n Header: \"Word In French\",\r\n accessor: \"nameFr\",\r\n },\r\n {\r\n Header: \"Definition In English\",\r\n accessor: \"descriptionEn\",\r\n },\r\n {\r\n Header: \"Definition In Arabic\",\r\n accessor: \"descriptionAr\",\r\n },\r\n {\r\n Header: \"Definition In French\",\r\n accessor: \"descriptionFr\",\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n const rowIdx = props.row.id;\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Help Services
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, titleAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionFr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, readMoreEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, readMoreAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, readMoreFr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n {\r\n return obj.icon1 == edited.icon;\r\n })}\r\n getOptionLabel={(option) => {option.icon1}}\r\n getOptionValue={(option) => option.id}\r\n options={icons}\r\n onChange={handlIconChange}\r\n >\r\n \r\n
\r\n \r\n edit(props.row.original.id)}\r\n className=\" btn btn-primary btn-xs\">\r\n \r\n \r\n\r\n remove(rowIdx)}\r\n className=\" btn btn-danger btn-xs\">\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: arrServices,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Glossary;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport \"../css/CustomStyle.css\";\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport { param } from \"jquery\";\r\nimport {\r\n AlertError,\r\n AlertSuccess,\r\n AlertConfirm,\r\n LoadingAlert,\r\n} from \"./f_Alerts\";\r\nimport {\r\n BindImageURL,\r\n getLang,\r\n setIMF,\r\n setPPP,\r\n getIMF,\r\n getPPP,\r\n setLanguage,\r\n} from \"../utils/common\";\r\n\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport dateFormat from \"dateformat\";\r\nimport $, { isNumeric } from \"jquery\";\r\n\r\nconst Account = () => {\r\n // const myPackage = {\r\n // companyPackages: [],\r\n // companyPreRegistrations: [],\r\n // descriptionEn: \"\",\r\n // descriptionFr: \"\",\r\n // descriptionSpa: \"\",\r\n // fromYearLimit: \"\",\r\n // id: \"\",\r\n // imageUrl: \"\",\r\n // isDeleted: false,\r\n // isDemoPackage: false,\r\n // isVisible: false,\r\n // nameEn: \"\",\r\n // nameFr: \"\",\r\n // nameSpa: \"\",\r\n // order: null,\r\n // packagePagePermissions: [],\r\n // toYearLimit: null\r\n\r\n // }\r\n const user = {\r\n name: \"\",\r\n email: \"\",\r\n companyName: \"\",\r\n packageId: null,\r\n startDate: null,\r\n endDate: null,\r\n };\r\n\r\n const [arrNotifications, setArrNotifications] = useState([]);\r\n const [arrUserFeatures, setUserFeatures] = useState([]);\r\n const [arrPackages, setArrPackages] = useState([]);\r\n const [userInfo, setuserInfo] = useState(user);\r\n const [imf, setIMF2] = useState(false);\r\n const [isPPP, setIsPP] = useState(false);\r\n const [isEnglish, setEnglish] = useState(true);\r\n const [isArabic, setArabic] = useState(false);\r\n const [isFrench, setFrench] = useState(false);\r\n\r\n useEffect(() => {\r\n $(\".menuItems\").removeClass(\"active\");\r\n $(\"#Account_page\").addClass(\"active\");\r\n });\r\n\r\n useEffect(() => {\r\n var isIMF = getIMF();\r\n setIMF2(isIMF == \"true\" ? true : false);\r\n\r\n var isPPP = getPPP();\r\n setIsPP(isPPP == \"true\" ? true : false);\r\n\r\n var lang = getLang();\r\n if (lang == \"en\") {\r\n setEnglish(true);\r\n setArabic(false);\r\n setFrench(false);\r\n } else if (lang == \"ar\") {\r\n setEnglish(false);\r\n setArabic(true);\r\n setFrench(false);\r\n } else {\r\n setEnglish(false);\r\n setArabic(false);\r\n setFrench(true);\r\n }\r\n\r\n getUserFeatures();\r\n getUserInfo();\r\n getUserNotifications();\r\n getPackages();\r\n updateSeenNotifications();\r\n }, []);\r\n\r\n const updateSeenNotifications = () => {\r\n APIFunctions.setUserNotificationAsSeen()\r\n .then((response) => {})\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const getAvailableFeatures = (pageURL) => {\r\n var allData = arrUserFeatures;\r\n var obj = allData.filter((item) => {\r\n if (item.pageUrl == pageURL) {\r\n return item;\r\n }\r\n });\r\n\r\n if (obj.length > 0) {\r\n if (obj[0].hasLimit) {\r\n return \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Glossary
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, nameEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, nameAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n { setEdited({ ...edited, nameFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionFr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n\r\n \r\n
\r\n \r\n {/* side menu */}\r\n \r\n );\r\n};\r\n\r\nexport default Account;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport '../css/CustomStyle.css';\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport { param } from \"jquery\";\r\nimport { AlertError, AlertSuccess, AlertConfirm, LoadingAlert } from \"./f_Alerts\";\r\nimport { BindImageURL } from \"../utils/common\";\r\n\r\nconst HelpUsing = (props) => {\r\n\r\n const myService = {\r\n id: 0,\r\n titleEn: '',\r\n titleFr: '',\r\n titleAr: '',\r\n descriptionEn: '',\r\n descriptionFr: '',\r\n descriptionAr: '',\r\n imageUrl: '',\r\n isDeleted: false\r\n }\r\n var myPermissions =\r\n {\r\n canAdd: false,\r\n canEdit: false,\r\n canDelete: false,\r\n }\r\n\r\n const [permissions, setPermissions] = useState(myPermissions);\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const [arrServices, setArrServices] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"Feature Details\");\r\n const [edited, setEdited] = useState(myService);\r\n const [image, setImage] = useState('');\r\n const [viewResource2, setViewResource2] = useState(false);\r\n const serviceRef = useRef();\r\n\r\n serviceRef.current = arrServices;\r\n\r\n \r\n useEffect(() => {\r\n getUserPermissions();\r\n }, []);\r\n \r\n\r\n const getUserPermissions = async () => {\r\n APIFunctions.getUserPermissions(\"FQA\")\r\n .then((response) => {\r\n var _permissions = [];\r\n var result = response.data;\r\n result.map((element) => {\r\n if (element.pageUrl == \"FQA\") {\r\n _permissions.push(element);\r\n }\r\n })\r\n \r\n \r\n var add = (_permissions.find((element) => { return element.action == \"Add\" })) === undefined ? false : true;\r\n var edit = (_permissions.find((element) => { return element.action == \"Edit\" })) === undefined ? false : true;\r\n var _delete = (_permissions.find((element) => { return element.action == \"Delete\" })) === undefined ? false : true;\r\n \r\n \r\n \r\n \r\n var obj = permissions;\r\n obj.canAdd = add;\r\n obj.canEdit = edit;\r\n obj.canDelete = _delete;\r\n getServices();\r\n setPermissions(obj);\r\n \r\n })\r\n \r\n }\r\n \r\n const addNew = () => {\r\n setEdited(myService);\r\n setViewResource2(false);\r\n setIsOpen(true);\r\n }\r\n\r\n const getServices = () => {\r\n APIFunctions.getAllHelpUsing()\r\n .then((response) => {\r\n setArrServices(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n // const refreshList = () => {\r\n // getServices();\r\n // };\r\n\r\n\r\n const edit = (id) => {\r\n var data = serviceRef.current;\r\n var obj = new Object();\r\n data.map((val, x) => {\r\n if (val.id == id)\r\n obj = val;\r\n });\r\n\r\n //console.log(obj);\r\n if (obj != null) {\r\n setImage(obj.imageUrl);\r\n setEdited(obj);\r\n setIsOpen(true);\r\n setViewResource2(true);\r\n }\r\n\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n };\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"Service Details\");\r\n };\r\n\r\n const onFileChange2 = (event) => {\r\n\r\n if (event.target.files.length == 0) {\r\n return;\r\n }\r\n const formData = new FormData();\r\n formData.append(\r\n \"file\",\r\n event.target.files[0]\r\n );\r\n\r\n APIFunctions.uploadMedia(formData)\r\n .then((response) => {\r\n var obj = edited;\r\n obj.imageUrl = response.data;\r\n setImage(response.data);\r\n setViewResource2(true);\r\n setEdited(obj);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n\r\n\r\n }\r\n\r\n const viewResource = () => {\r\n var image = BindImageURL(edited.imageUrl);\r\n window.open(image);\r\n }\r\n\r\n const save = () => {\r\n\r\n setSaveTxt(\"Saving...\");\r\n\r\n if (edited.titleEn == \"\" || edited.titleEn == null\r\n || edited.titleAr == \"\" || edited.titleAr == null\r\n || edited.titleFr == \"\" || edited.titleFr == null\r\n || edited.descriptionEn == \"\" || edited.descriptionEn == null\r\n || edited.descriptionFr == \"\" || edited.descriptionFr == null\r\n || edited.descriptionAr == \"\" || edited.descriptionAr == null\r\n || edited.imageUrl == \"\" || edited.imageUrl == null) {\r\n AlertError(\"Please enter required fields\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n\r\n APIFunctions.saveHelpUsing(edited)\r\n .then((response) => {\r\n if (!response.data) {\r\n AlertError(\"Something went wrong\");\r\n setSaveTxt(\"Save\");\r\n return;\r\n }\r\n else {\r\n AlertSuccess(\"Operation done successfully\");\r\n getServices();\r\n setTimeout(() => { setIsOpen(false); }, 300);\r\n setSaveTxt(\"Save\");\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n const removeElm = (rowIndex) => {\r\n \r\n AlertConfirm('Are you sure you want to delete ?')\r\n .then(res => {\r\n \r\n if (res.value) {\r\n const id = serviceRef.current[rowIndex].id;\r\n \r\n LoadingAlert(\"Show\");\r\n APIFunctions.deleteHelpUsing(id)\r\n .then((response) => {\r\n \r\n LoadingAlert(\"Hide\");\r\n AlertSuccess(\"Operation done successfully\");\r\n let obj = [...serviceRef.current];\r\n obj.splice(rowIndex, 1);\r\n \r\n setArrServices(obj);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n })\r\n \r\n }\r\n\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Title In English\",\r\n accessor: \"titleEn\",\r\n },\r\n {\r\n Header: \"Title In Arabic\",\r\n accessor: \"titleAr\",\r\n },\r\n {\r\n Header: \"Title In French\",\r\n accessor: \"titleFr\",\r\n },\r\n {\r\n Header: \"Description In English\",\r\n accessor: \"descriptionEn\",\r\n },\r\n {\r\n Header: \"Description In Arabic\",\r\n accessor: \"descriptionAr\",\r\n },\r\n {\r\n Header: \"Description In French\",\r\n accessor: \"descriptionFr\",\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n const rowIdx = props.row.id;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {getValue(\"LicenseStartDate\", getLang())}:\r\n {\" \"}\r\n \r\n {\" \"}\r\n {userInfo.startDate == null\r\n ? \"N/A\"\r\n : dateFormat(userInfo.startDate, \"yyyy-mm-dd\")}\r\n \r\n \r\n \r\n \r\n {getValue(\"LicenseEndDate\", getLang())}:\r\n {\" \"}\r\n \r\n {\" \"}\r\n {userInfo.endDate == null\r\n ? \"N/A\"\r\n : dateFormat(userInfo.endDate, \"yyyy-mm-dd\")}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {/* ![\"user\"](\"\")
*/}\r\n
\r\n \r\n {getValue(\"Name\", getLang())}\r\n
\r\n {userInfo.name}\r\n \r\n {getValue(\"Email\", getLang())}\r\n
\r\n {userInfo.email}\r\n \r\n {getValue(\"CompanyName\", getLang())}\r\n
\r\n {userInfo.companyName}\r\n \r\n {getValue(\"SUBSCRIBEDPACKAGE\", getLang())}\r\n
\r\n{renderPackages()}
\r\n \r\n {getValue(\"Notifications\", getLang())}\r\n
\r\n- {renderNotifications()}
\r\n {getValue(\"Settings\", getLang())}\r\n
\r\n\r\n {getValue(\"SocioEconomicDataSource\", getLang())}\r\n
\r\n \r\n \r\n\r\n {getValue(\"GDPUsed\", getLang())}\r\n
\r\n \r\n \r\n\r\n {getValue(\"Language\", getLang())}\r\n
\r\n \r\n \r\n \r\nAvailable Features
\r\n| \r\n {\" \"}\r\n {getValue(\"Awards\", getLang())}\r\n | \r\n{getAvailableFeatures(\"AwardsMenuTest\")} | \r\n
| {getValue(\"Pricing\", getLang())} | \r\n{getAvailableFeatures(\"PricingTest\")} | \r\n
| {getValue(\"Valuation\", getLang())} | \r\n{getAvailableFeatures(\"Valuations\")} | \r\n
| {getValue(\"Benchmarks\", getLang())} | \r\n{getAvailableFeatures(\"Benchmark\")} | \r\n
| {getValue(\"Trends\", getLang())} | \r\n{getAvailableFeatures(\"Trends\")} | \r\n
| {getValue(\"SocialData\", getLang())} | \r\n{getAvailableFeatures(\"PublicSocioEconomics\")} | \r\n
\r\n edit(props.row.original.id)}\r\n className=\" btn btn-primary btn-xs\"\r\n >\r\n \r\n \r\n\r\n removeElm(rowIdx)}\r\n className=\" btn btn-danger btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: arrServices,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default HelpUsing;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport dateFormat from \"dateformat\";\r\nimport { useTable } from \"react-table\";\r\nimport Select from \"react-select\";\r\nimport { getLang, validateEmail } from \"../utils/common\";\r\nimport DatePicker from \"react-datepicker\";\r\nimport { AlertConfirm, AlertError, AlertSuccess, Alert } from \"../components/f_Alerts\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\n\r\nconst SendNotifications = (props) => {\r\n\r\n const [textEn, setTextEn] = useState('');\r\n const [textAr, setTextAr] = useState('');\r\n const [textFr, setTextFr] = useState('');\r\n\r\n\r\n\r\n const send = () => {\r\n \r\n if (textEn == null || textEn == \"\" \r\n || textAr == null || textAr == \"\" \r\n || textFr == null || textFr == \"\") {\r\n AlertError(\"Please enter required fields\");\r\n return;\r\n }\r\n APIFunctions.sendNotification(textEn, textAr, textFr)\r\n .then((response) => {\r\n if (!response.data) {\r\n AlertError(\"Something went wrong\");\r\n return;\r\n }\r\n else {\r\n AlertSuccess(\"Operation done successfully\");\r\n setTextAr(\"\");\r\n setTextEn(\"\");\r\n setTextFr(\"\");\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Help Using
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, titleAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionFr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n \r\n viewResource()}>\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SendNotifications;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { useTable, useSortBy, usePagination } from \"react-table\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport { BindImageURL, validateEmail, getLang } from \"../utils/common\";\r\nimport { Alert, LoadingAlert, AlertError } from \"../components/f_Alerts\";\r\n\r\n\r\n\r\nconst FQAView = (props) => {\r\n\r\n \r\n const [data, setData] = useState([]);\r\n\r\n useEffect(() => {\r\n getGettingStartedView();\r\n }, []);\r\n\r\n const getGettingStartedView = () => {\r\n APIFunctions.getAllFQA()\r\n .then((response) => {\r\n setData(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n const renderFQAs = () => {\r\n console.log(data);\r\n if (data != null && data.length > 0){\r\n {\r\n return (data.map((val, idx) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n Send\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n Announcment Details
\r\n\r\n
\r\n )\r\n \r\n }\r\n ));\r\n }\r\n }\r\n }\r\n\r\n \r\n\r\n return (\r\n \r\n {getLang()==\"en\" ?\r\n val.questionEn : getLang()== \"ar\" ? val.questionAr : val.questionFr}\r\n
\r\n \r\n
\r\n {getLang()==\"en\" ?\r\n val.answerEn : getLang()== \"ar\" ? val.answerAr : val.answerFr}
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default FQAView;\r\n","import React, { useState, useEffect, useMemo, useRef } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport { param } from \"jquery\";\r\nimport { AlertError, AlertSuccess } from \"./f_Alerts\";\r\n\r\nconst AboutUs = (props) => {\r\n\r\n const myAboutUs = {\r\n id: 0,\r\n titleEn: '',\r\n titleFr: '',\r\n titleAr: '',\r\n descriptionEn: '',\r\n descriptionFr: '',\r\n descriptionAr: '',\r\n }\r\n\r\n const [aboutUs, setAbout] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"About Us\");\r\n const [edited, setEdited] = useState(myAboutUs);\r\n const aboutRef = useRef();\r\n\r\n aboutRef.current = aboutUs;\r\n\r\n\r\n\r\n\r\n useEffect(() => {\r\n getAboutUs();\r\n }, []);\r\n\r\n\r\n const getAboutUs = () => {\r\n APIFunctions.getHelpAbout()\r\n .then((response) => {\r\n setAbout(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const refreshList = () => {\r\n getAboutUs();\r\n };\r\n\r\n\r\n const edit = (id) => {\r\n\r\n var data = aboutRef.current;\r\n var elem = data.map((val, x) => {\r\n if (val.id === id)\r\n return val;\r\n });\r\n\r\n if (elem.length > 0) {\r\n setEdited(elem[0]);\r\n }\r\n setIsOpen(true);\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n };\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"About Us\");\r\n };\r\n\r\n const save = () => {\r\n if (edited.titleEn == \"\" || edited.titleEn == null\r\n || edited.titleAr == \"\" || edited.titleAr == null\r\n || edited.titleFr == \"\" || edited.titleFr == null\r\n || edited.descriptionEn == \"\" || edited.descriptionEn == null\r\n || edited.descriptionFr == \"\" || edited.descriptionFr == null\r\n || edited.descriptionAr == \"\" || edited.descriptionAr == null) {\r\n AlertError(\"Please enter required fields\");\r\n return;\r\n }\r\n\r\n APIFunctions.updateHelpAbout(edited)\r\n .then((response) => {\r\n if (!response.data) {\r\n AlertError(\"Something went wrong\");\r\n return;\r\n }\r\n else {\r\n AlertSuccess(\"Operation done successfully\");\r\n getAboutUs();\r\n setTimeout(() => { setIsOpen(false); }, 300);\r\n }\r\n\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: \"Title In English\",\r\n accessor: \"titleEn\",\r\n },\r\n {\r\n Header: \"Title In Arabic\",\r\n accessor: \"titleAr\",\r\n },\r\n {\r\n Header: \"Title In French\",\r\n accessor: \"titleFr\",\r\n },\r\n // {\r\n // Header: \"Description In English\",\r\n // accessor: \"descriptionEn\",\r\n // },\r\n // {\r\n // Header: \"Description In Arabic\",\r\n // accessor: \"descriptionAr\",\r\n // },\r\n // {\r\n // Header: \"Description In French\",\r\n // accessor: \"descriptionFr\",\r\n // },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n {/*
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {getValue(\"FAQ\", getLang())}
\r\n\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {renderFQAs()}\r\n \r\n
\r\n\r\n \r\n {/*
\r\n
*/}\r\n \r\n
\r\n![](\"../public_pages/images/getting-started-2.jpg\")
\r\n
\r\n \r\n
\r\n \r\n
\r\n Awards Menu
\r\n\r\n
\r\n - \r\n
- A list of parameters. This will set the criteria on which awards to include. Refer to section \"Glossary\" for a clear definition on each \r\n
- Additional conditions can be added on awards included by setting the max and min GDPc and even specifying the time period of awards. \r\n
- Country selection can help the user select awards in specific countries as needed \r\n
- A list of all IMT bands available for user to select from. Multiple selections can be done. \r\n
- Press the key \"show \" to run the selected scenario \r\n
- The list of awards is shown as per selection:\r\n Country: specifies country of award\r\n PoP,M: population of country at date of award\r\n GDPc: the gross domestic product per capita at date of award, presented in US$\r\n Operator: the name of operator who won the licenses\r\n Date: date in which license was awarded\r\n Price,$M: the upfront fees paid by operator at award date, presented in US$, and converted from local currency using \tthe WB exchange\r\n Term: is the license duration\r\n Bands:\r\n Paring: the offered license pairing, \"p\" for paired, \"u\" for unpaired, \"b\" for paired+ unpaired, and \"Multi-band\" is \taward includes several bands\r\n Total MHz:\r\n Coverage: \r\n
- You can export your results into an excel or a pdf format (full detailed report) \r\n
\r\n
\r\n edit(props.row.original.id)}\r\n className=\" btn btn-primary btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: aboutUs,\r\n },\r\n useSortBy\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n {title} \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AboutUs;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { useTable, useSortBy, usePagination } from \"react-table\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { trackPromise } from \"react-promise-tracker\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport { getLang, getIMF, getPPP, displayPop } from \"../utils/common\";\r\nimport dateFormat from \"dateformat\";\r\n\r\nconst ExceptionLogs = (props) => {\r\n const [awards, setAwards] = useState([]);\r\n\r\n useEffect(() => {\r\n APIFunctions.getExceptionLogs()\r\n .then((resp) => resp)\r\n .then((resp) => setAwards(resp.data));\r\n }, []);\r\n\r\n const columns = useMemo(\r\n () => [\r\n // {\r\n // Header: \"Subject\",\r\n // accessor: \"subject\",\r\n // },\r\n {\r\n Header: \"Details\",\r\n accessor: \"details\",\r\n },\r\n {\r\n Header: \"Inner Message\",\r\n accessor: \"innerMessage\",\r\n },\r\n {\r\n Header: \"Date\",\r\n accessor: \"exceptionDate\",\r\n Cell: (props) => {\r\n return dateFormat(props.value, \"mmmm dS, yyyy\");\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n page,\r\n nextPage,\r\n previousPage,\r\n canNextPage,\r\n canPreviousPage,\r\n pageOptions,\r\n gotoPage,\r\n pageCount,\r\n setPageSize,\r\n state,\r\n prepareRow,\r\n } = useTable(\r\n {\r\n columns,\r\n data: awards,\r\n initialState: {\r\n hiddenColumns: columns.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n const { pageIndex, pageSize } = state;\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n About Us
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, titleAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n\r\n\r\n \r\n \r\n { setEdited({ ...edited, titleFr: e.target.value }) }}\r\n\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionEn: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionAr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n \r\n { setEdited({ ...edited, descriptionFr: e.target.value }) }}\r\n class=\"form-control required\"\r\n />\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ExceptionLogs;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { useTable, useSortBy, usePagination } from \"react-table\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport { trackPromise } from \"react-promise-tracker\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport { getLang, getIMF, getPPP, displayPop } from \"../utils/common\";\r\nimport { Alert, LoadingAlert, AlertError } from \"../components/f_Alerts\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport * as FileSaver from 'file-saver';\r\nimport * as XLSX from 'xlsx';\r\nimport $ from 'jquery';\r\nimport Awards2 from \"./Awards2\";\r\n\r\nconst AwardsMenuTest = (props) => {\r\n\r\n const [filters, setFilters] = useState();\r\n const [checkAll, setCheckAll] = React.useState(false);\r\n const [singleBand, setSingleBand] = useState(true);\r\n const [multiBand, setMultiBand] = useState(false);\r\n const [includeRegional, setIncludeRegional] = useState(false);\r\n const [paired, setPaired] = useState(true);\r\n const [unPaired, setUnPaired] = useState(false);\r\n const [pairedUnpaired, setPairedUnPaired] = useState(false);\r\n const [minGDP, setMinGDP] = useState();\r\n const [maxGDP, setMaxGDP] = useState();\r\n const [fromDate, setFromDate] = useState();\r\n const [toDate, setToDate] = useState();\r\n const [bandOptionsList, setSelectedBandsOptions] = useState([]);\r\n const [options, setoptions] = useState([]);\r\n const [awards, setAwards] = useState([]);\r\n const [showDisplay, setShowDisplay2] = useState(true);\r\n const [iconClass, setIconClass] = useState(\"spectre-angle-up btn btn-primary background-color-2 color-white mr-2\");\r\n const [showTxt, setShowTxt] = useState(getValue(\"ShowLess\", getLang()));\r\n const [numberOfAwards, setNumberOfAwards] = useState(0);\r\n const [isIMF, setIsIMF] = useState(false);\r\n const [isPPP, setIsPPP] = useState(true);\r\n const optionsRef = useRef();\r\n const bandOptionsListRef = useRef();\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"Transitioning...\");\r\n const [isExportPDF, setisExportPDF] = useState(false);\r\n\r\n const [isOpen3, setIsOpen3] = useState(false);\r\n\r\n\r\n const [checkAllBands, setCheckAllBands] = useState(false);\r\n\r\n var _exportedFilters;\r\n //const tableRef = useRef(null);\r\n\r\n useEffect(() => {\r\n APIFunctions.getUserCountries(\"AwardsMenuTest\")\r\n .then((resp) => resp)\r\n .then((resp) => bindOptions(resp.data))\r\n .then((resp) => getUserFilters());\r\n }, []);\r\n\r\n useEffect(() => {\r\n APIFunctions.getAllBands()\r\n .then((resp) => resp)\r\n .then((resp) => bindOptionsBand(resp.data));\r\n }, []);\r\n\r\n useEffect(() => {\r\n $('.menuItems').removeClass(\"active\");\r\n $('#AwardsMenuTest_page').addClass(\"active\");\r\n })\r\n\r\n const bindOptions = (data) => {\r\n var arr = [];\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n var ob = new Object();\r\n ob.label = data[i].nameEn;\r\n ob.labelAr = data[i].nameAr;\r\n // ob.label = getLang() == \"ar\" ? data[i].nameAr : data[i].nameEn;\r\n ob.value = data[i].countryId;\r\n ob.isChecked = true;\r\n arr.push(ob);\r\n }\r\n\r\n setoptions(arr);\r\n };\r\n const bindOptionsBand = (data) => {\r\n var arr = [];\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n var ob = new Object();\r\n ob.label = data[i].value;\r\n ob.value = data[i].value;\r\n data[i].value == 700 ? ob.isChecked = true : ob.isChecked = false;\r\n arr.push(ob);\r\n }\r\n setSelectedBandsOptions(arr);\r\n };\r\n\r\n optionsRef.current = options;\r\n bandOptionsListRef.current = bandOptionsList;\r\n const setDisplay = () => {\r\n setShowDisplay2(!showDisplay);\r\n setIconClass(!showDisplay == true ? \"spectre-angle-up btn btn-primary background-color-2 color-white mr-2\"\r\n : \"spectre-angle-down btn btn-primary background-color-2 color-white mr-2\");\r\n setShowTxt(!showDisplay == true ? getValue(\"ShowLess\", getLang()) : getValue(\"ShowMore\", getLang()))\r\n }\r\n\r\n const setCountryChecked = (id, isChecked) => {\r\n var data = optionsRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, { value: id, isChecked: isChecked, label: item[0].label, labelAr: item[0].labelAr });\r\n\r\n\r\n setoptions(data);\r\n var lstChecked = data.filter((x) => x.checked == true).length;\r\n var lst = options.length;\r\n\r\n if (lstChecked == 0)\r\n setCheckAll(false)\r\n else {\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value)\r\n }\r\n\r\n }\r\n\r\n const getCheckedCountry = (id) => {\r\n var checked = false;\r\n var allData = options;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n }\r\n\r\n const renderCountries = () => {\r\n var countries = options;\r\n if(getLang() == \"ar\") \r\n countries.sort((a, b) => (a.labelAr > b.labelAr) ? 1 : ((b.labelAr > a.labelAr) ? -1 : 0));\r\n else \r\n countries.sort((a, b) => (a.labelEn > b.labelEn) ? 1 : ((b.labelEn > a.labelEn) ? -1 : 0));\r\n if (countries != null && countries.length > 0) {\r\n {\r\n return (countries.map((val, idx) => (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Exception Logs
\r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n \r\n {getValue(\"Page\", getLang())}{\" \"}\r\n \r\n {pageOptions.length !== 0 ? pageIndex + 1 : 0}{\" \"}\r\n {getValue(\"Of\", getLang())} {pageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | {getValue(\"GoToPage\", getLang())}\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n gotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n gotoPage(0)}\r\n disabled={!canPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n previousPage()}\r\n disabled={!canPreviousPage}\r\n >\r\n {getValue(\"Previous\", getLang())}\r\n \r\n nextPage()}\r\n disabled={!canNextPage}\r\n >\r\n {getValue(\"Next\", getLang())}{\" \"}\r\n \r\n gotoPage(pageCount - 1)}\r\n disabled={!canNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n const renderCountries2 = () => {\r\n var countries = options;\r\n if(getLang() == \"ar\") \r\n countries.sort((a, b) => (a.labelAr > b.labelAr) ? 1 : ((b.labelAr > a.labelAr) ? -1 : 0));\r\n else \r\n countries.sort((a, b) => (a.labelEn > b.labelEn) ? 1 : ((b.labelEn > a.labelEn) ? -1 : 0));\r\n if (countries != null && countries.length > 0) {\r\n {\r\n return (countries.map((val, idx) => (\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n const getCheckedBand = (id) => {\r\n var checked = false;\r\n var allData = bandOptionsList;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n }\r\n\r\n const setCheckBand = (id, isChecked) => {\r\n var data = bandOptionsListRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n if (item.length > 0) {\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, { value: id, isChecked: isChecked, label: item[0].label });\r\n }\r\n setSelectedBandsOptions(data);\r\n }\r\n\r\n\r\n const handleCheckAll = (isChecked) => {\r\n setCheckAll(isChecked);\r\n var updatedSelectedCountries = options;\r\n updatedSelectedCountries.map((row, i) => {\r\n row.isChecked = isChecked;\r\n })\r\n setoptions(updatedSelectedCountries);\r\n\r\n };\r\n\r\n const renderBands = () => {\r\n var bands = bandOptionsList;\r\n if (bands != null && bands.length > 0) {\r\n {\r\n return (bands.map((val, idx) => (\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n const exportToPDF = () => {\r\n\r\n var AwardFilter = new Object();\r\n AwardFilter.Lang = getLang();\r\n AwardFilter.FromYear = parseInt(fromDate);\r\n AwardFilter.ToYear = parseInt(toDate);\r\n AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n // AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n AwardFilter.IsSingle = singleBand;\r\n AwardFilter.IsMultiple = multiBand;\r\n AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n AwardFilter.IsPaired = paired;\r\n AwardFilter.IsUnPaired = unPaired;\r\n AwardFilter.RegionalLicense = includeRegional;\r\n AwardFilter.MaxGDP = parseInt(maxGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n\r\n // AwardFilter.Band = selectedBands.join(\",\");\r\n\r\n setFilters(AwardFilter);\r\n _exportedFilters = AwardFilter;\r\n\r\n\r\n console.log(_exportedFilters);\r\n\r\n\r\n LoadingAlert(\"Show\");\r\n setisExportPDF(true);\r\n\r\n setTimeout(() => {\r\n setisExportPDF(false);\r\n }, 300);\r\n }\r\n\r\n\r\n const checkIfCanSearch = () => {\r\n APIFunctions.checkIfCanView(\"AwardsMenuTest\")\r\n .then((response) => {\r\n if (response.data) {\r\n filterAwards();\r\n }\r\n else {\r\n setNumberOfAwards(0);\r\n Alert(getValue(\"FeatureNotAvailable\", getLang()));\r\n return;\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n const selectAllBands = (evt) => {\r\n\r\n if (evt == \"bandSelection\") {\r\n var updatedSelectedCountries = bandOptionsList;\r\n updatedSelectedCountries.map((row, i) => {\r\n row.isChecked = !checkAllBands;\r\n })\r\n\r\n setCheckAllBands(!checkAllBands);\r\n setSelectedBandsOptions(bandOptionsList);\r\n }\r\n }\r\n const filterAwards = () => {\r\n var selectedCountries = [];\r\n var selectedBands = [];\r\n\r\n // Validations Begin\r\n\r\n var valid = true;\r\n\r\n if ((minGDP == \"\" || minGDP == null) && minGDP != \"0\") {\r\n valid = false;\r\n }\r\n if (maxGDP == null || maxGDP == \"\"\r\n || fromDate == null || fromDate == \"\" || toDate == null || toDate == \"\") {\r\n valid = false;\r\n\r\n }\r\n if (!valid) {\r\n AlertError(getValue(\"PleaseFillMissingFields\", getLang()));\r\n return;\r\n }\r\n\r\n for (var i = 0, l = options.length; i < l; i++) {\r\n if (options[i].isChecked) {\r\n selectedCountries.push(options[i].value);\r\n }\r\n }\r\n for (var i = 0, l = bandOptionsList.length; i < l; i++) {\r\n if (bandOptionsList[i].isChecked) {\r\n selectedBands.push(bandOptionsList[i].value);\r\n }\r\n }\r\n\r\n if (selectedCountries.length == 0) {\r\n AlertError(getValue(\"ChooseOneCountry\", getLang()));\r\n return;\r\n }\r\n if (selectedBands.length == 0) {\r\n AlertError(getValue(\"ChooseOneBand\", getLang()));\r\n return;\r\n }\r\n if (parseInt(minGDP) < 0) {\r\n AlertError(getValue(\"MinGDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(minGDP) > 200000) {\r\n AlertError(getValue(\"MaxGDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(maxGDP) < 0) {\r\n AlertError(getValue(\"MinGDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(maxGDP) > 200000) {\r\n AlertError(getValue(\"MaxGDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(minGDP) > parseInt(maxGDP)) {\r\n AlertError(getValue(\"GDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > parseInt(toDate)) {\r\n AlertError(getValue(\"DateValidation\", getLang()));\r\n return;\r\n }\r\n if (fromDate.length > 4 || fromDate.length < 4) {\r\n AlertError(getValue(\"ValidToDate\", getLang()));\r\n return;\r\n }\r\n if (toDate.length > 4 || toDate.length < 4) {\r\n AlertError(getValue(\"ValidFromDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) < 1985) {\r\n AlertError(getValue(\"MinimumFromDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > new Date().getFullYear()) {\r\n AlertError(getValue(\"MaximumFromDate\", getLang()) + new Date().getFullYear());\r\n return;\r\n }\r\n if (parseInt(toDate) < 1985) {\r\n AlertError(getValue(\"MinimumToDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(toDate) > new Date().getFullYear()) {\r\n AlertError(getValue(\"MaximumToDate\", getLang()) + new Date().getFullYear());\r\n return;\r\n }\r\n\r\n if (!(singleBand || multiBand)) {\r\n AlertError(getValue(\"SingleValidation\", getLang()));\r\n return;\r\n }\r\n\r\n if (!(paired || unPaired || pairedUnpaired)) {\r\n AlertError(getValue(\"SelectPairing\", getLang()));\r\n return;\r\n }\r\n\r\n // Validations End\r\n\r\n var AwardFilter = new Object();\r\n AwardFilter.Lang = getLang();\r\n AwardFilter.FromYear = parseInt(fromDate);\r\n AwardFilter.ToYear = parseInt(toDate);\r\n AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n AwardFilter.IsSingle = singleBand;\r\n AwardFilter.IsMultiple = multiBand;\r\n AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n AwardFilter.IsPaired = paired;\r\n AwardFilter.IsUnPaired = unPaired;\r\n AwardFilter.RegionalLicense = includeRegional;\r\n AwardFilter.MaxGDP = parseInt(maxGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n AwardFilter.Band = selectedBands.join(\",\");\r\n\r\n\r\n var list = [];\r\n list.push({ id: 0, pageUrl: \"AwardsMenuTest\", field: \"MinGDP\", value: minGDP, userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"MaxGDP\", value: maxGDP, userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"FromYear\", value: fromDate.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"ToYear\", value: toDate.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"RegionalLicense\", value: includeRegional.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"Paired\", value: AwardFilter.IsPaired.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"IsUnPaired\", value: AwardFilter.IsUnPaired.toString(), UserId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"IsPairedAndUnPaired\", value: AwardFilter.IsPairedAndUnPaired.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"IsMultiple\", value: AwardFilter.IsMultiple.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"IsSingle\", value: AwardFilter.IsSingle.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"Bands\", value: JSON.stringify(bandOptionsList), userId: 0 },\r\n { id: 0, pageUrl: \"AwardsMenuTest\", field: \"Country\", value: JSON.stringify(options), userId: 0 })\r\n\r\n console.log(list);\r\n\r\n console.log(options);\r\n\r\n LoadingAlert(\"Show\");\r\n\r\n trackPromise(\r\n APIFunctions.filterAwards(AwardFilter)\r\n .then((response) => {\r\n LoadingAlert(\"hide\");\r\n if (response.data == 0 || response.data.length < 1 || !Array.isArray(response.data)) {\r\n Alert(getValue(\"NoDataToDisplay\", getLang()));\r\n setAwards([]);\r\n setNumberOfAwards(0);\r\n saveUserFilters(list);\r\n return;\r\n }\r\n else {\r\n setAwards(response.data);\r\n setNumberOfAwards(response.data.length);\r\n var element = document.getElementById(\"table-content\");\r\n element.scrollIntoView(true, {\r\n block: \"start\",\r\n inline: \"nearest\",\r\n behavior: \"smooth\",\r\n });\r\n saveUserFilters(list);\r\n return;\r\n }\r\n })\r\n .catch((e) => {\r\n LoadingAlert(\"hide\");\r\n console.log(e);\r\n })\r\n );\r\n\r\n\r\n\r\n }\r\n\r\n const saveUserFilters = (list) => {\r\n APIFunctions.saveUserFilters(list)\r\n .then((resp) => resp)\r\n .then((resp) => console.log(resp));\r\n };\r\n\r\n const getUserFilters = () => {\r\n // LoadingAlert(\"Show\");\r\n APIFunctions.getUserFilters(\"AwardsMenuTest\")\r\n .then((resp) => resp)\r\n .then((resp) => {\r\n var data = resp.data;\r\n\r\n if (data.length > 0) {\r\n\r\n var fromYear = data.filter((item) => item.field == \"FromYear\");\r\n var toYear = data.filter((item) => item.field == \"ToYear\");\r\n var maxValue = data.filter((item) => item.field == \"MaxGDP\");\r\n var minGDP = data.filter((item) => item.field == \"MinGDP\");\r\n var regionalLicense = data.filter((item) => item.field == \"RegionalLicense\");\r\n var unPaired = data.filter((item) => item.field == \"IsUnPaired\");\r\n var pairedUnpaired = data.filter((item) => item.field == \"IsPairedAndUnPaired\");\r\n var paired = data.filter((item) => item.field == \"Paired\");\r\n var multiple = data.filter((item) => item.field == \"IsMultiple\");\r\n var single = data.filter((item) => item.field == \"IsSingle\");\r\n var bands = data.filter((item) => item.field == \"Bands\");\r\n var countries = data.filter((item) => item.field == \"Country\");\r\n setFromDate(fromYear[0].value);\r\n setToDate(toYear[0].value);\r\n setMinGDP(minGDP[0].value);\r\n setMaxGDP(maxValue[0].value);\r\n setPaired(paired[0].value == \"true\" ? true : false);\r\n setUnPaired(unPaired[0].value == \"true\" ? true : false);\r\n setPairedUnPaired(pairedUnpaired[0].value == \"true\" ? true : false);\r\n setIncludeRegional(regionalLicense[0].value == \"true\" ? true : false);\r\n setMultiBand(multiple[0].value == \"true\" ? true : false);\r\n setSingleBand(single[0].value == \"true\" ? true : false);\r\n var tempBands = JSON.parse(bands[0].value);\r\n tempBands.map(function (val) {\r\n setCheckBand(val.value, val.isChecked);\r\n });\r\n var tempCountries = JSON.parse(countries[0].value);\r\n // tempCountries.map(function (val) {\r\n // setCountryChecked(val.value, val.isChecked);\r\n // });\r\n setoptions(tempCountries);\r\n\r\n var _data = JSON.parse(countries[0].value);\r\n var lstChecked = _data.filter((x) => x.isChecked == true).length;\r\n var lst = _data.length;\r\n var value = lstChecked == lst ? true : false;\r\n\r\n if (lstChecked.length == 0)\r\n setCheckAll(false);\r\n else\r\n setCheckAll(value);\r\n\r\n\r\n var _data2 = JSON.parse(bands[0].value);\r\n var lstChecked2 = _data2.filter((x) => x.isChecked == true).length;\r\n var lst2 = _data2.length;\r\n var value2 = lstChecked2 == lst2 ? true : false;\r\n\r\n if (lstChecked2.length == 0)\r\n setCheckAllBands(false);\r\n else\r\n setCheckAllBands(value2);\r\n } else {\r\n setMinGDP(0);\r\n setMaxGDP(200000);\r\n setFromDate(1985);\r\n setToDate(new Date().getFullYear());\r\n }\r\n\r\n // LoadingAlert(\"Hide\");\r\n });\r\n }\r\n\r\n const checkIfCanOpen = (target) => {\r\n if (target == \"countrySelection\") {\r\n setIsOpen3(true);\r\n }\r\n }\r\n\r\n const columns = useMemo(\r\n () => [\r\n {\r\n Header: getValue(\"Countries\", getLang()),\r\n accessor: \"countryName\",\r\n Cell: (props) => {\r\n if (props.value == null)\r\n return \"\";\r\n if (props.value.length < 16)\r\n return props.value.toString();\r\n else\r\n return props.value.toString().substr(0, 15)\r\n },\r\n },\r\n {\r\n Header: getValue(\"Pop\", getLang()),\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null || props.value == 0) return \"\";\r\n if (Number.isInteger(props.value)) {\r\n if (getIMF() == \"true\") {\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n if (props.value == 0) {\r\n return '';\r\n }\r\n else {\r\n return props.value\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(2);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Term\", getLang()),\r\n accessor: \"terms\",\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\") return parseFloat(props.value).toFixed(1);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n },\r\n {\r\n Header: getValue(\"Pairing\", getLang()),\r\n accessor: \"pairing\",\r\n },\r\n {\r\n Header: getValue(\"TotalMHz\", getLang()),\r\n accessor: \"mhz\",\r\n },\r\n // {\r\n // Header: getValue(\"ReservePrice\", getLang()),\r\n // accessor: \"reservePrice\",\r\n // Cell: (props) => {\r\n // if (props.value != null && props.value != \"\") return parseFloat(props.value).toFixed(3);\r\n // else return \"\";\r\n // },\r\n // },\r\n {\r\n Header: getValue(\"Coverage\", getLang()),\r\n accessor: \"coverage\",\r\n Cell: (props) => {\r\n console.log(\"props.value\", props.value);\r\n\r\n if (props.value.trim() == 'National') {\r\n if (getLang() == 'ar')\r\n return 'وطني'\r\n else\r\n return props.value\r\n } else {\r\n if (getLang() == 'ar')\r\n return 'مناطقي'\r\n else\r\n return props.value\r\n }\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n page,\r\n nextPage,\r\n previousPage,\r\n canNextPage,\r\n canPreviousPage,\r\n pageOptions,\r\n gotoPage,\r\n pageCount,\r\n setPageSize,\r\n state,\r\n prepareRow,\r\n } = useTable(\r\n {\r\n columns,\r\n data: awards,\r\n initialState: {\r\n hiddenColumns: columns.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n const { pageIndex, pageSize } = state;\r\n\r\n function searchCountry() {\r\n var input, filter, found, div, label, i;\r\n input = document.getElementById(\"searchCountry\");\r\n filter = input.value.toUpperCase();\r\n div = document.getElementById(\"countries\");\r\n label = div.getElementsByTagName(\"label\");\r\n for (i = 0; i < label.length; i++) {\r\n if (label[i].innerHTML.toUpperCase().indexOf(filter) > -1) {\r\n found = true;\r\n }\r\n if (found) {\r\n label[i].style.display = \"\";\r\n found = false;\r\n } else {\r\n label[i].style.display = \"none\";\r\n }\r\n }\r\n }\r\n\r\n const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n const fileExtension = '.xlsx';\r\n\r\n const exportToCSV = (csvData, fileName) => {\r\n\r\n\r\n var result = [];\r\n csvData.map((val, i) => {\r\n\r\n\r\n var imf = getIMF();\r\n imf = imf == \"true\" ? true : false;\r\n var item = new Object();\r\n item.Country = val.countryName;\r\n item[\"Pop,M\"] = displayPop(val.pop, imf);\r\n item[\"GDPc, $\"] = (val.gdp == 0 || val.gdp == null) ? '' : val.gdp.toFixed(0);\r\n item.Operator = val.operatorName;\r\n item.Date = val.year;\r\n item[\"Price, $M\"] = val.upFrontFees;\r\n item[\"Term (Y)\"] = val.terms;\r\n item.Band = val.band;\r\n item[\"Total MHz\"] = val.mhz;\r\n item.Pairing = val.pairing;\r\n item.Coverage = val.coverage;\r\n\r\n result.push(item);\r\n\r\n });\r\n\r\n const ws = XLSX.utils.json_to_sheet(result);\r\n const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };\r\n const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });\r\n const data = new Blob([excelBuffer], { type: fileType });\r\n FileSaver.saveAs(data, fileName + fileExtension);\r\n }\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"Export\");\r\n };\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n setTitle(\"Export\");\r\n };\r\n\r\n const hideModal3 = () => {\r\n setIsOpen3(false);\r\n };\r\n\r\n function inputNumberCheck(e) {\r\n if (e.which == 69 || e.which == 187 || e.which == 189 || e.which == 109) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n { checkIfCanOpen(e.target.id) }}>\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {renderCountries()}\r\n
\r\n selectAllBands(e.target.id)}>\r\n
\r\n \r\n {renderBands()}\r\n
\r\n \r\n\r\n
\r\n \r\n\r\n
\r\n \r\n setDisplay()}> {showTxt}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {getValue(\"ListOfAwards\", getLang())}
\r\n\r\n {/*
\r\n \r\n
{getValue(\"NumberOfAwards\", getLang())}: {numberOfAwards}
\r\n| \r\n {/* \r\n {column.isSorted ? column.isSortedDesc ? \" ↓\" : \" ↑\" : \"\"}{\" \"}\r\n */}\r\n {column.render(\"Header\")}\r\n | \r\n ))}\r\n
|---|
| \r\n {cell.render(\"Cell\")}\r\n | \r\n );\r\n })}\r\n
\r\n
\r\n \r\n \r\n {getValue(\"Page\", getLang())}{\" \"}\r\n \r\n {pageOptions.length !== 0 ? pageIndex + 1 : 0} {getValue(\"Of\", getLang())} {pageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | {getValue(\"GoToPage\", getLang())}\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n gotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n gotoPage(0)}\r\n disabled={!canPreviousPage}>{\"<<\"}\r\n \r\n \r\n gotoPage(pageCount - 1)}\r\n disabled={!canNextPage}>{\">>\"}\r\n
\r\n \r\n
- \r\n
- { exportToCSV(awards, \"AwardsData\") }} className=\"list-group-item\" style={{ cursor: \"pointer\" }}>
- { exportToPDF() }} className=\"list-group-item\" style={{ cursor: \"pointer\" }}> {getValue(\"ExportToPDF\", getLang())} \r\n {isExportPDF &&
\r\n {renderCountries2()}\r\n
\r\n \r\n
\r\n\r\n );\r\n};\r\n\r\nexport default SettingParameters;\r\n","import React, { useEffect, useState, useRef, useMemo } from \"react\";\r\nimport { Container } from \"reactstrap\";\r\nimport TableContainer from \"./TableContainer\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport $ from \"jquery\";\r\nimport Slider from \"react-slick\";\r\nimport { BindImageURL, validateEmail, getLang } from \"../utils/common\";\r\nimport dateFormat from \"dateformat\";\r\nimport Select from \"react-select\";\r\nimport { AlertError, AlertSuccess } from \"./f_Alerts\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport { Footer } from \"rsuite\";\r\nimport MainFooter from \"../components/Footer\";\r\n\r\nfunction SampleNextArrow(props) {\r\n const { className, onClick } = props;\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction SamplePrevArrow(props) {\r\n const { className, onClick } = props;\r\n return (\r\n \r\n );\r\n}\r\n\r\nconst MainPageTest = () => {\r\n var mycontactUs = {\r\n id: 0,\r\n name: \"\",\r\n email: \"\",\r\n companyName: \"\",\r\n countryId: \"\",\r\n message: \"\",\r\n phoneNumber: \"\",\r\n isDeleted: false,\r\n };\r\n\r\n const [contactUs, setContactUs] = useState(mycontactUs);\r\n const [arrServices, setArrServices] = useState([]);\r\n const [arrVisualize, setArrVisualize] = useState([]);\r\n const [arrAbout, setArrAbout] = useState([]);\r\n const [arrSnaps, setArrSnaps] = useState([]);\r\n const [arrPackages, setArrPackages] = useState([]);\r\n const [_arrLatestNews, _setLatestNews] = useState([]);\r\n const [resultCountry, emplistCountry] = useState([]);\r\n const [footer, setFooter] = useState([]);\r\n const [arrFeatures, setArrFeatures] = useState([]);\r\n\r\n const settings = {\r\n centerMode: true,\r\n centerPadding: \"60px\",\r\n arrows: true,\r\n slidesToShow: 5,\r\n infinite: true,\r\n nextArrow: \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n ![\"Spectre]({\"./public_pages/images/spectre-logo.svg\"})
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Login\r\n
\r\n \r\n
\r\n\r\n
\r\n {/* side menu */}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Spectrum Price Setting Parameters
\r\n\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n Analysis Options
\r\n\r\n \r\n
\r\n
\r\n | \r\n |
| \r\n |
| \r\n |
| \r\n |
| \r\n |
| Sum bands: paired + unpaired | \r\n
| \r\n \r\n | \r\n
| \r\n \r\n | \r\n
\r\n
\r\n Bands
\r\n \r\n\r\n
\r\n Show Awards
\r\n\r\n \r\n
\r\n
\r\n | \r\n | \r\n |
| \r\n | \r\n |
| \r\n | \r\n |
| \r\n | |
| \r\n | |
| \r\n | |
| \r\n |
\r\n
\r\n License Terms
\r\n\r\n \r\n
\r\n
\r\n | \r\n |
| \r\n |
| \r\n |
\r\n
\r\n Countries
\r\n \r\n\r\n \r\n
\r\n \r\n {/*
\r\n ));\r\n }\r\n };\r\n\r\n const handleChangeCountry = (selectedOptions) => {\r\n setContactUs({ ...contactUs, countryId: selectedOptions.countryId });\r\n };\r\n\r\n const getReportSnaps = () => {\r\n var _snaps = arrSnaps;\r\n if (_snaps != null && _snaps.length > 0) {\r\n return _snaps.map((val, idx) => (\r\n \r\n })
\r\n
*/}\r\n \r\n \r\n
\r\n \r\n {\" \"}\r\n {getLang() === \"en\"\r\n ? val.titleEn\r\n : getLang() === \"fr\"\r\n ? val.titleFr\r\n : val.titleAr}\r\n \r\n {renderDescription2(val)}
\r\n \r\n
\r\n ));\r\n }\r\n };\r\n\r\n const renderFooter = () => {\r\n var _footer = footer;\r\n if (_footer != null && _footer.length > 0) {\r\n return _footer.map((val, idx) => (\r\n \r\n \r\n
\r\n ));\r\n }\r\n };\r\n\r\n const renderDescription = (val) => {\r\n var desc =\r\n getLang() === \"en\"\r\n ? val.descriptionEn.split(\"\\n\")\r\n : getLang() === \"ar\"\r\n ? val.descriptionSpa.split(\"\\n\")\r\n : val.descriptionFr.split(\"\\n\");\r\n return desc.map((val, idx) => {\r\n if (val.length > 0) {\r\n return (\r\n {val}
;\r\n }\r\n });\r\n }\r\n };\r\n\r\n const renderUrl = (url) => {\r\n if (url !== \"\" && url != null) {\r\n return (\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {dateFormat(val.creationDate, \"mmm d, yyyy\")}\r\n
\r\n \r\n
\r\n {renderUrl(val.url)}\r\n
\r\n \r\n \r\n {getLang() == \"en\"\r\n ? val.descriptionEn\r\n : getLang() == \"fr\"\r\n ? val.descriptionFr\r\n : val.descriptionAr}\r\n \r\n
\r\n\r\n {renderUrl(val.url)}\r\n
\r\n
\r\n ));\r\n }\r\n };\r\n\r\n const submitForm = () => {\r\n var valid = true;\r\n var message = \"Please enter \";\r\n if (contactUs.name == \"\" || contactUs.name == null) {\r\n valid = false;\r\n message = message + \"name \";\r\n }\r\n if (contactUs.email == \"\" || contactUs.email == null) {\r\n if (valid == false) message = message + \" and email\";\r\n else message = message + \" email\";\r\n }\r\n\r\n if (!valid) {\r\n AlertError(message);\r\n return;\r\n }\r\n\r\n if (!validateEmail(contactUs.email)) {\r\n AlertError(\"Please enter a valid email\");\r\n return;\r\n }\r\n\r\n APIFunctions.saveContactUs(contactUs)\r\n .then((response) => {\r\n if (response.data != null) {\r\n AlertSuccess(\"Successfully sent\");\r\n } else {\r\n AlertError(\"Something went wrong, please try again later\");\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n const settings_packages = {\r\n centerMode: true,\r\n centerPadding: \"30px\",\r\n arrows: true,\r\n slidesToShow: 3,\r\n nextArrow: \r\n \r\n
\r\n \r\n {getLang() === \"en\"\r\n ? val.nameEn\r\n : getLang() === \"ar\"\r\n ? val.nameSpa\r\n : val.nameFr}\r\n \r\n {renderDescription(val)}
\r\n \r\n
\r\n ));\r\n }\r\n };\r\n\r\n $(document).ready(function () {\r\n let observerOptions = {\r\n root: null,\r\n rootMargin: \"-50% 0px -50% 0px\",\r\n threshold: 0,\r\n };\r\n let observerCallback = (entries, observer) => {\r\n entries.forEach((entry) => {\r\n $(`#menu a[href=\"#${$(entry.target).attr(\"id\")}\"]`)\r\n .closest(\"li\")\r\n .toggleClass(\"current-menu-item\", entry.isIntersecting);\r\n });\r\n };\r\n\r\n let observer = new IntersectionObserver(observerCallback, observerOptions);\r\n //observe all sections\r\n $(\r\n \"#home-about,#home-features,#home-screenshots,#home-packages,#home-news-slider,#home-contact\"\r\n ).each(function () {\r\n observer.observe($(this)[0]);\r\n });\r\n\r\n $(document).on(\"scroll\", function () {\r\n $(\".mouse\").css({ opacity: +!$(this).scrollTop() });\r\n });\r\n\r\n $(\".slide\").on(\"mousedown touchstart\", function (e) {\r\n $(this).addClass(\"grabbing\");\r\n });\r\n\r\n $(\".slide\").on(\"mouseup touchend\", function (e) {\r\n $(this).removeClass(\"grabbing\");\r\n });\r\n });\r\n useEffect(() => {\r\n CheckUserIsAdmin();\r\n }, []);\r\n const [isAdmin, setAdmin] = React.useState(false);\r\n const CheckUserIsAdmin = () => {\r\n APIFunctions.CheckIfUserIsAdmin()\r\n .then((response) => {\r\n setAdmin(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n return (\r\n \r\n })
\r\n
\r\n \r\n {getLang() === \"en\"\r\n ? val.titleEn\r\n : getLang() === \"fr\"\r\n ? val.titleFr\r\n : val.titleAr}\r\n
\r\n\r\n {getLang() === \"en\"\r\n ? val.descriptionEn\r\n : getLang() === \"fr\"\r\n ? val.descriptionFr\r\n : val.descriptionAr}\r\n
\r\n \r\n
\r\n {/* side menu */}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {/* about */}\r\n
\r\n {/* screenshots */}\r\n \r\n
\r\n {/* features */}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n {getLang() == \"en\"\r\n ? renderAboutDesc(arrAbout.descriptionEn)\r\n : getLang() == \"fr\"\r\n ? renderAboutDesc(arrAbout.descriptionFr)\r\n : renderAboutDesc(arrAbout.descriptionAr)}\r\n
\r\n
\r\n \r\n {getLang() == \"en\"\r\n ? arrAbout.titleEn\r\n : getLang() == \"fr\"\r\n ? arrAbout.titleFr\r\n : arrAbout.titleAr}\r\n
\r\n\r\n\r\n {getLang() == \"en\"\r\n ? renderAboutDesc(arrAbout.descriptionEn)\r\n : getLang() == \"fr\"\r\n ? renderAboutDesc(arrAbout.descriptionFr)\r\n : renderAboutDesc(arrAbout.descriptionAr)}\r\n
{/* {arrAbout.descriptionEn} */}
\r\n\r\n
\r\n
\r\n \r\n
\r\n \r\n {/* ![](\"images/home_internet2_pic4.png\")
*/}\r\n
\r\n */}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {getValue(\"ExploreTools\", getLang())}\r\n
\r\n\r\n {renderServices()}\r\n
\r\n \r\n
\r\n {/* packages */}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {getLang() === \"en\"\r\n ? arrVisualize.titleEn\r\n : getLang() === \"fr\"\r\n ? arrVisualize.titleFr\r\n : arrVisualize.titleAr}\r\n
\r\n\r\n \r\n {getReportSnaps()}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {getLang() == \"en\"\r\n ? arrVisualize.descriptionEn\r\n : getLang() == \"fr\"\r\n ? arrVisualize.descriptionFr\r\n : arrVisualize.descriptionAr}\r\n
\r\n {/*\r\n You may request a specific analysis scenario: pricing\r\n of a band or calculation of a license price. Data is\r\n displayed in different formats including tabularized\r\n results, bar-charts, and scatter plots. In addition,\r\n you can download a detailed analysis report of the\r\n studied scenario.\r\n
\r\n\r\n You may also select to show prices as: unit spectrum\r\n price, in $/MHz/pop, or in $/MHz for a defined\r\n country, or as a license price for the whole duration\r\n you choose, or as annualised payments.\r\n
*/}\r\n\r\n
\r\n {/* news */}\r\n \r\n
\r\n \r\n
\r\n\r\n {/* Packges */}\r\n \r\n
\r\n \r\n {getValue(\"ExplorePackages\", getLang())}\r\n
\r\n\r\n \r\n {renderPackages()}\r\n \r\n
\r\n\r\n {/* Services */}\r\n \r\n \r\n {renderFeatures()}\r\n \r\n
\r\n \r\n
\r\n {/* contact */}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {getValue(\"RecentNews\", getLang())}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Recent post
*/}\r\n- \r\n {_renderLatestNews()}\r\n {/*
- \r\n \r\n\r\n\r\n\r\n\r\n\r\nMay 13, 2014\r\n\r\n\r\n
\r\n \r\n Lorem ipsum dolor sit amet consectetur\r\n adipisicing elit. Ipsum voluptatum\r\n aliquid accusamus illo minus quisquam\r\n necessitatibus unde quod numquam\r\n explicabo, molestias modi debitis nisi\r\n illum.\r\n \r\n
\r\n
\r\n */}\r\n {/* - \r\n \r\n\r\n\r\n\r\n\r\n\r\nMay 13, 2014\r\n\r\n\r\n
\r\n \r\n Lorem ipsum dolor sit amet consectetur\r\n adipisicing elit. Amet provident\r\n dignissimos, quam, iure necessitatibus\r\n harum soluta atque doloribus enim\r\n tempora odit repudiandae error\r\n aspernatur et.\r\n \r\n
\r\n
\r\n \r\n - \r\n \r\n\r\n\r\n\r\n\r\n\r\nMay 13, 2014\r\n\r\n\r\n
\r\n \r\n Lorem ipsum dolor sit amet, consectetur\r\n adipisicing elit. Quidem saepe\r\n necessitatibus eveniet vitae, autem\r\n cupiditate deleniti, nemo dicta eligendi\r\n dolores aperiam soluta, animi a nobis?\r\n \r\n
\r\n
\r\n \r\n - \r\n \r\n\r\n\r\n\r\n\r\n\r\nMay 13, 2014\r\n\r\n\r\n
\r\n \r\n Lorem ipsum dolor sit amet, consectetur\r\n adipisicing elit. Quidem saepe\r\n necessitatibus eveniet vitae, autem\r\n cupiditate deleniti, nemo dicta eligendi\r\n dolores aperiam soluta, animi a nobis?\r\n \r\n
\r\n
\r\n \r\n - \r\n \r\n\r\n\r\n\r\n\r\n\r\nMay 13, 2014\r\n\r\n\r\n
\r\n \r\n Video post with youtube / vimeo\r\n \r\n
\r\n
\r\n */}\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {getValue(\"ContactForm\", getLang())}\r\n
\r\n{getValue(\"ContactFormMessage\", getLang())}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default MainPageTest;\r\n","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { useTable, useSortBy, usePagination } from \"react-table\";\r\nimport \"react-datepicker/dist/react-datepicker.css\";\r\nimport \"../css/CustomStyle.css\";\r\nimport { Alert, LoadingAlert, AlertError } from \"../components/f_Alerts\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\nimport { getValue } from \"../Assets/Language/Entries\";\r\nimport { getLang, getIMF, getPPP, displayPop } from \"../utils/common\";\r\nimport $ from 'jquery';\r\nimport * as FileSaver from 'file-saver';\r\nimport * as XLSX from 'xlsx';\r\nimport Pricing2 from \"./Pricing2\";\r\nimport {\r\n Chart, Series, Legend, ValueAxis, ConstantLine, Point, ZoomAndPan,\r\n CommonSeriesSettings, Border, CommonPaneSettings, Title, Tooltip, ArgumentAxis, Grid, Label, Export, VisualRange, Tick, Font\r\n} from 'devextreme-react/chart';\r\nimport { Size } from \"devextreme-react/bar-gauge\";\r\n\r\n\r\nconst PricingTest = (props) => {\r\n\r\n const [plotMean, setPlotMean] = React.useState(null);\r\n const [plotMedian, setPlotMedian] = React.useState(null);\r\n const [upperPlot, setPlotUpper] = React.useState(null);\r\n const [lowerPlot, setPlotLower] = React.useState(null);\r\n\r\n const [checkAll, setCheckAll] = React.useState(false);\r\n const [singleBand, setSingleBand] = useState(true);\r\n const [multiBand, setMultiBand] = useState(false);\r\n const [includeRegional, setIncludeRegional] = useState(false);\r\n const [paired, setPaired] = useState(true);\r\n const [unPaired, setUnPaired] = useState(false);\r\n const [pairedUnpaired, setPairedUnPaired] = useState(false);\r\n const [minGDP, setMinGDP] = useState();\r\n const [maxGDP, setMaxGDP] = useState();\r\n const [fromDate, setFromDate] = useState();\r\n const [toDate, setToDate] = useState();\r\n const [adjustByInflation, setAdjustByInflation] = useState(false);\r\n const [adjustByPPPFactor, setAdjustByPPPFactor] = useState(false);\r\n const [addAnnualPayment, setAddAnnualPayment] = useState(false);\r\n const [normalizeByGDPc, setNormalizeByGDPc] = useState(false);\r\n const [annualizePrices, setAnnualizePrices] = useState(false);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [title, setTitle] = React.useState(\"Transitioning...\");\r\n const [showDisplay, setShowDisplay2] = useState(true);\r\n const [regressionVisibilityValue, setRegressionVisibilityValue] = useState(\"none\");\r\n const [quartileVisibiltyValue, setquatileVisibiltyValue] = useState(\"none\");\r\n const [standardDeviationValue, setstandardDeviationValue] = useState(\"none\");\r\n const [upperPercentileValue, setUpperPercentileValue] = useState(\"none\");\r\n const [lowerPercentileValue, setLowerPercentileValue] = useState(\"none\");\r\n const [hasPercentileValue, setHasPercentileValue] = useState(false);\r\n const [awards, setAwards] = useState([]);\r\n const [awardsNew, setAwardsNew] = useState([]);\r\n const awardsRef = useRef();\r\n const awardsNewRef = useRef();\r\n const optionsRef = useRef();\r\n const bandOptionsListRef = useRef();\r\n const [iconClass, setIconClass] = useState(\"spectre-angle-up btn btn-primary background-color-2 color-white mr-2\");\r\n const [showTxt, setShowTxt] = useState(getValue(\"ShowLess\", getLang()));\r\n const [discountRateValue, setDiscountRate] = useState();\r\n const [termValue, setTermValue] = useState();\r\n const [hasRegressionValue, setHasRegressionValue] = useState(false);\r\n const [regressionValue, setRegressionValue] = useState();\r\n const [upperPercentileValueSelected, setUpperPercentileValueSelected] = useState();\r\n const [lowerPercentileValueSelected, setLowerPercentileValueSelected] = useState();\r\n const [hasQuartileValue, setHasQuartileValue] = useState(false);\r\n const [quartileValue, setQuartileValue] = useState();\r\n const [hasStandardDeviation, sethasStandardDeviation] = useState(false);\r\n const [hasAutoFiltering, setHasAutoFiltering] = useState(false);\r\n const [standardDeviationValueAdded, setstandardDeviationValueAdded] = useState();\r\n const [bandOptionsList, setSelectedBandsOptions] = useState([]);\r\n const [options, setoptions] = useState([]);\r\n const [arrayOfBandCountries, setArrayOfBandCountries] = useState([]);\r\n const [columns, setColumns] = useState([]);\r\n const [columnsNew, setColumnsNew] = useState([]);\r\n const [chartSeries, setChartSeries] = useState([]);\r\n const [deSelectChecked, setDeseltectChecked] = useState(false);\r\n const [numberOfAwards, setNumberOfAwards] = useState(0);\r\n const [awardsWithMarkers, setAwardsWithMar] = useState(false);\r\n const [deselectedIndicator, setDeselectedIndicator] = useState(true);\r\n const [btnShowClicked, setBtnShowClicked] = useState(false);\r\n\r\n const [filters, setFilters] = useState();\r\n const [isOpen3, setIsOpen3] = useState(false);\r\n const [isOpen5, setIsOpen5] = useState(false);\r\n const [myHeader, setMyHeader] = useState(\"\");\r\n const [checkAllBands, setCheckAllBands] = useState(false);\r\n const [awardsForChart, setAwardsForCharts] = useState([]);\r\n const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n const fileExtension = '.xlsx';\r\n const [svg, setSVG] = useState(\"\");\r\n\r\n const [isExportPDF, setisExportPDF] = useState(false);\r\n const [hiddenAwards, setHiddenAwards] = useState([]);\r\n const [plotMinVal, setPlotMinVal] = useState(null);\r\n const [plotMaxVal, setPlotMaxVal] = useState(null);\r\n const [plotMinValErr, setPlotMinValErr] = useState(false);\r\n const [plotMaxValErr, setPlotMaxValErr] = useState(false);\r\n\r\n\r\n var _exportedFilters;\r\n const chartRef = useRef(null);\r\n\r\n\r\n\r\n\r\n awardsRef.current = awards;\r\n awardsNewRef.current = awardsNew;\r\n optionsRef.current = options;\r\n bandOptionsListRef.current = bandOptionsList;\r\n\r\n\r\n const ShowPlot = () => {\r\n\r\n setPlotMinVal(null);\r\n setPlotMaxVal(null);\r\n setPlotMinValErr(false);\r\n setPlotMaxValErr(false);\r\n var data = [];\r\n let _awardsForChart = [...awards];\r\n _awardsForChart = _awardsForChart.sort((a, b) => (parseFloat(a.price) < parseFloat(b.price)) ? 1 : -1);\r\n let sum = 0;\r\n var arr = [];\r\n for (var i = 0; i < _awardsForChart.length; i++) {\r\n sum += _awardsForChart[i].price;\r\n }\r\n var arr_prices = _awardsForChart.map(function (val) {\r\n return val.price == null ? 0 : val.price.toFixed(3);\r\n });\r\n let lengthBeforeHidden = _awardsForChart.length;\r\n for (var i = 0; i < hiddenAwards.length; i++) {\r\n _awardsForChart.push(hiddenAwards[i]);\r\n }\r\n _awardsForChart = _awardsForChart.sort((a, b) => (parseFloat(a.price) < parseFloat(b.price)) ? 1 : -1);\r\n\r\n var lowerValue = null;\r\n var upperValue = null;\r\n\r\n // console.log(\"custom header: \", myHeader);\r\n let multiplier = parseInt(myHeader.split(\"x\")[1].trim());\r\n // console.log(\"multiplier = \", multiplier);\r\n\r\n _awardsForChart.map((val, i) => {\r\n var item = new Object();\r\n item.index = i.toString();\r\n item.bandCountry = val.bandCountry;\r\n item.price = parseFloat(val.price.toFixed(3));\r\n item.mean = calculateMean(sum, _awardsForChart.length);\r\n item.median = calculateMedian(arr_prices);\r\n item.upperValue = val.upperValue == null ? null : normalizeByGDPc ? (val.upperValue * multiplier).toFixed(3) : val.upperValue.toFixed(3);\r\n item.lowerValue = val.lowerValue == null ? null : normalizeByGDPc ? (val.lowerValue * multiplier).toFixed(3) : val.lowerValue.toFixed(3);\r\n lowerValue = val.lowerValue == null ? null : normalizeByGDPc ? (val.lowerValue * multiplier).toFixed(3) : val.lowerValue.toFixed(3);\r\n upperValue = val.upperValue == null ? null : normalizeByGDPc ? (val.upperValue * multiplier).toFixed(3) : val.upperValue.toFixed(3);\r\n arr.push(item);\r\n });\r\n // console.log(\"awards for chart: \", arr);\r\n setAwardsForCharts(arr);\r\n // console.log(\"upper and lower values: \", upperValue, lowerValue);\r\n\r\n setPlotMean(calculateMean(sum, lengthBeforeHidden));;\r\n setPlotMedian(calculateMedian(arr_prices));\r\n setPlotUpper(upperValue);\r\n setPlotLower(lowerValue);\r\n\r\n setTimeout(() => {\r\n var _svg = chartRef.current.instance.svg();\r\n setSVG(_svg);\r\n }, 3000);\r\n\r\n\r\n setIsOpen(true);\r\n\r\n\r\n return;\r\n };\r\n\r\n\r\n function prepareMarkup(chartSvg, markup) {\r\n var svg = '`;\r\n\r\n console.log('svg')\r\n console.log(svg)\r\n }\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n setTitle(\"Transitioning...\");\r\n };\r\n\r\n const modalLoaded = () => {\r\n setTitle(\"Pricing Plot\");\r\n };\r\n\r\n const modalLoaded3 = () => {\r\n setTitle(\"Export\");\r\n };\r\n\r\n const hideModal3 = () => {\r\n setIsOpen3(false);\r\n setTitle(\"Export\");\r\n };\r\n\r\n\r\n const exportToPDF = () => {\r\n\r\n LoadingAlert(\"Show\");\r\n\r\n var AwardFilter = new Object();\r\n AwardFilter.FromYear = parseInt(fromDate);\r\n AwardFilter.Lang = getLang();\r\n AwardFilter.ToYear = parseInt(toDate);\r\n AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n //AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n AwardFilter.IsSingle = singleBand;\r\n AwardFilter.IsMultiple = multiBand;\r\n AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n AwardFilter.IsPaired = paired;\r\n AwardFilter.IsUnPaired = unPaired;\r\n AwardFilter.RegionalLicense = includeRegional;\r\n AwardFilter.minGDPValue = parseInt(minGDP);\r\n AwardFilter.maxGDPValue = parseInt(maxGDP);\r\n AwardFilter.MaxGDP = parseInt(maxGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n //AwardFilter.Band = selectedBands.join(\",\");\r\n AwardFilter.issueDate = parseInt($(\"#issueDate\").val());\r\n var awardTypeSelectedValue = $(\"#showResults\").val();\r\n if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n else AwardFilter.AverageSumPricesAndMHZ = false;\r\n if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n else AwardFilter.averageAwards = false;\r\n if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n else AwardFilter.uniqueAwards = false;\r\n AwardFilter.discountRate = discountRateValue;\r\n AwardFilter.term = termValue;\r\n AwardFilter.AdjustByInflationFactor = adjustByInflation;\r\n AwardFilter.AdjustByGDPFactor = normalizeByGDPc;\r\n AwardFilter.AdjustByPPPFactor = adjustByPPPFactor;\r\n AwardFilter.AnnualizePrice = annualizePrices;\r\n AwardFilter.IsIncludeAnnual = addAnnualPayment;\r\n AwardFilter.hasRegression = hasRegressionValue;\r\n AwardFilter.regression = regressionValue;\r\n AwardFilter.HasPercentile = hasPercentileValue;\r\n AwardFilter.UpperPercentile = upperPercentileValueSelected;\r\n AwardFilter.LowerPercentile = lowerPercentileValueSelected;\r\n AwardFilter.HasQuartile = hasQuartileValue;\r\n AwardFilter.KValue = parseFloat(quartileValue);\r\n AwardFilter.HasStandardDeviation = hasStandardDeviation;\r\n AwardFilter.StandardDeviationValue = standardDeviationValueAdded;\r\n AwardFilter.AutoFiltering = hasAutoFiltering;\r\n AwardFilter.sumBand = $(\"#sumBands\").val();\r\n AwardFilter.ShowMarkers = $('#showMarkers').val() == \"1\" ? true : false;\r\n AwardFilter.outliers = $('#ddlOutliers').val();\r\n\r\n AwardFilter.Header = myHeader;\r\n setFilters(AwardFilter);\r\n _exportedFilters = AwardFilter;\r\n ShowPlot();\r\n\r\n setTimeout(() => {\r\n var _svg = chartRef.current.instance.svg();\r\n setSVG(_svg);\r\n setisExportPDF(true);\r\n setTimeout(() => {\r\n setIsOpen(false);\r\n setisExportPDF(false);\r\n }, 300)\r\n }, 3000);\r\n\r\n }\r\n\r\n const hideModal5 = () => {\r\n setIsOpen5(false);\r\n };\r\n\r\n\r\n const exportToCSV = (csvData, fileName) => {\r\n\r\n console.log(csvData);\r\n\r\n\r\n\r\n var result = [];\r\n if ($('#showResults').val() == \"0\") {\r\n csvData.map((val, i) => {\r\n var item = new Object();\r\n item.Country = val.countryName;\r\n item[\"Pop,M\"] = displayPop(val.pop, getIMF());\r\n item[\"GDPc, $\"] = (val.gdp == 0 || val.gdp == null) ? '' : val.gdp.toFixed(0);\r\n item.Operator = val.operatorName;\r\n item.Date = val.year;\r\n item[\"Price, $M\t\"] = val.upFrontFees;\r\n item[\"Term (Y)\"] = val.terms;\r\n item.Band = val.band;\r\n item[myHeader] = val.price;\r\n\r\n\r\n\r\n result.push(item);\r\n });\r\n }\r\n else {\r\n csvData.map((val, i) => {\r\n var item = new Object();\r\n item.Country = val.countryName;\r\n item[\"Pop,M\"] = displayPop(val.pop, getIMF());\r\n item[\"GDPc, $\"] = (val.gdp == 0 || val.gdp == null) ? '' : val.gdp.toFixed(0);\r\n item.Date = val.year;\r\n item[\"Term (Y)\"] = val.terms;\r\n item.Band = val.band;\r\n item[myHeader] = val.price;\r\n result.push(item);\r\n });\r\n }\r\n\r\n\r\n const ws = XLSX.utils.json_to_sheet(result);\r\n const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };\r\n const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });\r\n const data = new Blob([excelBuffer], { type: fileType });\r\n FileSaver.saveAs(data, fileName + fileExtension);\r\n }\r\n\r\n\r\n\r\n const checkIfCanView = () => {\r\n APIFunctions.checkIfCanView(\"PricingTest\")\r\n .then((response) => {\r\n if (response.data) {\r\n filterAwards();\r\n } else {\r\n setNumberOfAwards(0);\r\n document.getElementById(\"numberOfAwards\").innerHTML = \"0\";\r\n document.getElementById(\"meanValueContainer\").innerHTML = `${getValue(\"Mean\", getLang())}: 0`;\r\n Alert(getValue(\"FeatureNotAvailable\", getLang()));\r\n return;\r\n }\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n };\r\n\r\n // useEffect(()=> {\r\n // console.log(awards);\r\n // })\r\n const filterAwards = () => {\r\n\r\n setBtnShowClicked(true);\r\n\r\n var selectedCountries = [];\r\n var selectedBands = [];\r\n\r\n // Validations Begin\r\n var valid = true;\r\n\r\n if ((minGDP == \"\" || minGDP == null) && minGDP != \"0\") {\r\n valid = false;\r\n }\r\n if (maxGDP == null || maxGDP == \"\"\r\n || fromDate == null || fromDate == \"\" || toDate == null || toDate == \"\") {\r\n valid = false;\r\n\r\n }\r\n if (!valid) {\r\n AlertError(getValue(\"PleaseFillMissingFields\", getLang()));\r\n return;\r\n }\r\n\r\n for (var i = 0, l = options.length; i < l; i++) {\r\n if (options[i].isChecked) {\r\n selectedCountries.push(options[i].value);\r\n }\r\n }\r\n for (var i = 0, l = bandOptionsList.length; i < l; i++) {\r\n if (bandOptionsList[i].isChecked) {\r\n selectedBands.push(bandOptionsList[i].value);\r\n }\r\n }\r\n\r\n if (selectedCountries.length == 0) {\r\n AlertError(getValue(\"ChooseOneCountry\", getLang()));\r\n return;\r\n }\r\n if (selectedBands.length == 0) {\r\n AlertError(getValue(\"ChooseOneBand\", getLang()));\r\n return;\r\n }\r\n if (parseInt(minGDP) > parseInt(maxGDP)) {\r\n AlertError(getValue(\"GDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > parseInt(toDate)) {\r\n AlertError(getValue(\"DateValidation\", getLang()));\r\n return;\r\n }\r\n if (fromDate.length > 4 || fromDate.length < 4) {\r\n AlertError(getValue(\"ValidFromDate\", getLang()));\r\n return;\r\n }\r\n if (toDate.length > 4 || toDate.length < 4) {\r\n AlertError(getValue(\"ValidFromDate\", getLang()));\r\n return;\r\n }\r\n if (termValue == \"\" || termValue == null || termValue <= 0) {\r\n AlertError(getValue(\"MinTermValue\", getLang()));\r\n return;\r\n }\r\n if (termValue > 40) {\r\n AlertError(getValue(\"MaxTermValue\", getLang()));\r\n return;\r\n }\r\n if (discountRateValue == \"\" || discountRateValue == null || discountRateValue < 0) {\r\n AlertError(getValue(\"MinDiscountRate\", getLang()));\r\n return;\r\n }\r\n if (discountRateValue > 100) {\r\n AlertError(getValue(\"MaxDiscountRate\", getLang()));\r\n return;\r\n }\r\n if (parseInt($(\"#issueDate\").val()) < parseInt(toDate)) {\r\n AlertError(getValue(\"IssueDateValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) < 1985) {\r\n AlertError(getValue(\"MinimumFromDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > new Date().getFullYear()) {\r\n AlertError(getValue(\"MaximumFromDate\", getLang()) + new Date().getFullYear());\r\n return;\r\n }\r\n if (parseInt(toDate) < 1985) {\r\n AlertError(getValue(\"MinimumToDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(toDate) > new Date().getFullYear()) {\r\n AlertError(getValue(\"MaximumToDate\", getLang()) + new Date().getFullYear());\r\n return;\r\n }\r\n\r\n if (!(singleBand || multiBand)) {\r\n AlertError(getValue(\"SingleValidation\", getLang()));\r\n return;\r\n }\r\n\r\n if (!(paired || unPaired || pairedUnpaired)) {\r\n AlertError(getValue(\"SelectPairing\", getLang()));\r\n return;\r\n }\r\n\r\n if ($(\"#ddlOutliers\").val() == 0) {\r\n if (upperPercentileValueSelected.trim() == '' || lowerPercentileValueSelected.trim() == '') {\r\n AlertError(getValue(\"UpperLowerPercentileEmpty\", getLang()));\r\n return;\r\n }\r\n if (upperPercentileValueSelected < 0) {\r\n AlertError(getValue(\"UpperPercentileMinValidation\", getLang()));\r\n return;\r\n }\r\n if (upperPercentileValueSelected > 100) {\r\n AlertError(getValue(\"UpperPercentileMaxValidation\", getLang()));\r\n return;\r\n } if (lowerPercentileValueSelected < 0) {\r\n AlertError(getValue(\"LowerPercentileMinValidation\", getLang()));\r\n return;\r\n }\r\n if (lowerPercentileValueSelected > 100) {\r\n AlertError(getValue(\"LowerPercentileMaxValidation\", getLang()));\r\n return;\r\n }\r\n if (upperPercentileValueSelected < lowerPercentileValueSelected) {\r\n AlertError(getValue(\"LowePerLessThan\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 1) {\r\n if (regressionValue.trim() == '') {\r\n AlertError(getValue(\"RegressionValueEmpty\", getLang()));\r\n return;\r\n }\r\n if (regressionValue < 0) {\r\n AlertError(getValue(\"Min%\", getLang()));\r\n return;\r\n }\r\n if (regressionValue > 100) {\r\n AlertError(getValue(\"Max%\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 2) {\r\n if (quartileValue.trim() == '') {\r\n AlertError(getValue(\"KValueEmpty\", getLang()));\r\n return;\r\n }\r\n if (quartileValue < 0) {\r\n AlertError(getValue(\"MinKValue\", getLang()));\r\n return;\r\n }\r\n if (quartileValue > 3) {\r\n AlertError(getValue(\"MaxKValue\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 3) {\r\n if (standardDeviationValueAdded.trim() == '') {\r\n AlertError(getValue(\"SDValueEmpty\", getLang()));\r\n return;\r\n }\r\n if (standardDeviationValueAdded < 1) {\r\n AlertError(getValue(\"MinSD\", getLang()));\r\n return;\r\n }\r\n if (standardDeviationValueAdded > 3) {\r\n AlertError(getValue(\"MaxSD\", getLang()));\r\n return;\r\n }\r\n }\r\n\r\n // Validations End\r\n\r\n var AwardFilter = new Object();\r\n AwardFilter.FromYear = parseInt(fromDate);\r\n AwardFilter.Lang = getLang();\r\n AwardFilter.ToYear = parseInt(toDate);\r\n AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n AwardFilter.IsSingle = singleBand;\r\n AwardFilter.IsMultiple = multiBand;\r\n AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n AwardFilter.IsPaired = paired;\r\n AwardFilter.IsUnPaired = unPaired;\r\n AwardFilter.RegionalLicense = includeRegional;\r\n AwardFilter.minGDPValue = parseInt(minGDP);\r\n AwardFilter.maxGDPValue = parseInt(maxGDP);\r\n AwardFilter.MaxGDP = parseInt(maxGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n AwardFilter.Band = selectedBands.join(\",\");\r\n AwardFilter.issueDate = parseInt($(\"#issueDate\").val());\r\n var awardTypeSelectedValue = $(\"#showResults\").val();\r\n if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n else AwardFilter.AverageSumPricesAndMHZ = false;\r\n if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n else AwardFilter.averageAwards = false;\r\n if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n else AwardFilter.uniqueAwards = false;\r\n AwardFilter.discountRate = discountRateValue;\r\n AwardFilter.term = termValue;\r\n AwardFilter.AdjustByInflationFactor = adjustByInflation;\r\n AwardFilter.AdjustByGDPFactor = normalizeByGDPc;\r\n AwardFilter.AdjustByPPPFactor = adjustByPPPFactor;\r\n AwardFilter.AnnualizePrice = annualizePrices;\r\n AwardFilter.IsIncludeAnnual = addAnnualPayment;\r\n AwardFilter.hasRegression = hasRegressionValue;\r\n AwardFilter.regression = regressionValue;\r\n AwardFilter.HasPercentile = hasPercentileValue;\r\n AwardFilter.UpperPercentile = upperPercentileValueSelected;\r\n AwardFilter.LowerPercentile = lowerPercentileValueSelected;\r\n AwardFilter.HasQuartile = hasQuartileValue;\r\n AwardFilter.KValue = parseFloat(quartileValue);\r\n AwardFilter.HasStandardDeviation = hasStandardDeviation;\r\n AwardFilter.StandardDeviationValue = standardDeviationValueAdded;\r\n AwardFilter.AutoFiltering = hasAutoFiltering;\r\n AwardFilter.sumBand = $(\"#sumBands\").val();\r\n AwardFilter.ShowMarkers = $('#showMarkers').val() == \"1\" ? true : false;\r\n\r\n console.log(AwardFilter);\r\n var list = [];\r\n list.push(\r\n { id: 0, pageUrl: \"PricingTest\", field: \"FromYear\", value: fromDate.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"ToYear\", value: toDate.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"IssueDate\", value: $(\"#issueDate\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"awardTypeSelectedValue\", value: $(\"#showResults\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"discountRate\", value: discountRateValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"term\", value: termValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"AdjustByInflationFactor\", value: adjustByInflation.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"AdjustByGDPFactor\", value: normalizeByGDPc.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"AdjustByPPPFactor\", value: adjustByPPPFactor.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"AnnualizePrice\", value: annualizePrices.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"IsIncludeAnnual\", value: addAnnualPayment.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"regression\", value: regressionValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"UpperPercentile\", value: upperPercentileValueSelected.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"LowerPercentile\", value: lowerPercentileValueSelected.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"KValue\", value: quartileValue.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"StandardDeviationValue\", value: standardDeviationValueAdded.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"ddlOutliers\", value: $(\"#ddlOutliers\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"sumBand\", value: $(\"#sumBands\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"showMarkers\", value: $(\"#showMarkers\").val(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"MinGDP\", value: minGDP.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"MaxGDP\", value: maxGDP.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"RegionalLicense\", value: includeRegional.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"Paired\", value: AwardFilter.IsPaired.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"IsUnPaired\", value: AwardFilter.IsUnPaired.toString(), UserId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"IsPairedAndUnPaired\", value: AwardFilter.IsPairedAndUnPaired.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"IsMultiple\", value: AwardFilter.IsMultiple.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"IsSingle\", value: AwardFilter.IsSingle.toString(), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"Bands\", value: JSON.stringify(bandOptionsList), userId: 0 },\r\n { id: 0, pageUrl: \"PricingTest\", field: \"Country\", value: JSON.stringify(options), userId: 0 })\r\n\r\n console.log(list);\r\n LoadingAlert(\"Show\");\r\n APIFunctions.FilterPricing(AwardFilter)\r\n .then((response) => {\r\n console.log(response.data);\r\n LoadingAlert(\"Hide\");\r\n if (response.data == 0 || response.data.length < 1 || !Array.isArray(response.data)) {\r\n Alert(getValue(\"NoDataToDisplay\", getLang()));\r\n setAwards([]);\r\n setNumberOfAwards(0);\r\n var numberOfAwardsContainer = document.getElementById(\"numberOfAwards\");\r\n if (typeof (numberOfAwardsContainer) != 'undefined' && numberOfAwardsContainer != null)\r\n document.getElementById(\"numberOfAwards\").innerHTML = 0;\r\n var meanContainer = document.getElementById(\"meanValueContainer\");\r\n if (typeof (meanContainer) != 'undefined' && meanContainer != null)\r\n meanContainer.innerHTML = `${getValue(\"Mean\", getLang())}: 0`;\r\n saveUserFilters(list);\r\n return;\r\n } else {\r\n\r\n var data = response.data;\r\n var hiddenData = data.filter((item) => item.isHidden);\r\n // console.log(\"hidden data: \", hiddenData);\r\n setHiddenAwards(hiddenData);\r\n data = data.filter((item) => item.isHidden == null || item.isHidden == false);\r\n\r\n var min = Number.MAX_VALUE;\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n min = Math.min(min, data[i].price);\r\n }\r\n\r\n var count = 0;\r\n if (min != 0) {\r\n while (min < 0.001) {\r\n min *= 10;\r\n count++;\r\n console.log(min)\r\n }\r\n }\r\n\r\n var CustomPriceHeader = \"$/M/P\";\r\n if (annualizePrices) {\r\n CustomPriceHeader += \"/Y\"\r\n }\r\n\r\n if (normalizeByGDPc) {\r\n CustomPriceHeader += \"/GDPc x \" + Math.pow(10, count);\r\n for (var i = 0, l = response.data.length; i < l; i++) {\r\n response.data[i].price *= Math.pow(10, count);\r\n }\r\n }\r\n else {\r\n CustomPriceHeader += \" x 1\";\r\n }\r\n\r\n\r\n setMyHeader(CustomPriceHeader);\r\n var nbr_of_awards = data.length;\r\n setNumberOfAwards(data.length);\r\n $(\"#numberOfAwards\").html(data.length);\r\n var mean = 0;\r\n var sum = 0;\r\n var count = data.length;\r\n for (var i = 0; i < data.length; i++) {\r\n sum += data[i].price;\r\n }\r\n\r\n mean = calculateMean(sum, count);\r\n\r\n console.log('Filtered Data');\r\n console.log(data);\r\n setAwards(data);\r\n console.log(awards);\r\n\r\n setAwardsWithMar(response.data);\r\n\r\n var arr_band_countries = [];\r\n for (var k = 0; k < data.length; k++) {\r\n arr_band_countries.push(data[k].bandCountry);\r\n }\r\n console.log(arr_band_countries);\r\n setArrayOfBandCountries(arr_band_countries);\r\n var arr = data.map(function (val) {\r\n return val.price == null ? 0 : val.price.toFixed(3);\r\n });\r\n\r\n console.log(response.data)\r\n var arr2 = data.map(function (val) {\r\n return (\r\n val.band +\r\n \"-\" +\r\n val.countryName +\r\n \"-\" +\r\n val.year +\r\n \"-\" +\r\n val.operatorName +\r\n \" Price=\" +\r\n val.price +\r\n \" $/M/P x1\"\r\n );\r\n });\r\n\r\n console.log('680')\r\n var arr3 = data.map(function (val) {\r\n return val.price;\r\n });\r\n\r\n var min = 0;\r\n if (awardTypeSelectedValue == 0) {\r\n const columnsAdded = [\r\n {\r\n Header: () => \r\n \r\n \r\n \r\n
\r\n \r\n {getValue(\"NumberOfAwards\", getLang())}: {nbr_of_awards}
,\r\n accessor: \"numberOfAwards\",\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n id: \"checkBox\",\r\n Header: \"\",\r\n Cell: (props) => {\r\n const rowId = props.row.id;\r\n return (\r\n \r\n handleCheckbox(rowId)}\r\n />\r\n
\r\n );\r\n },\r\n },\r\n {\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n },\r\n {\r\n Header: getValue(\"Pop\", getLang()),\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value))\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(2);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Term\", getLang()),\r\n accessor: \"terms\",\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(1);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n },\r\n {\r\n Header: () => {getValue(\"Mean\", getLang())}: {mean}
,\r\n accessor: getValue(\"Mean\", getLang()),\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n Header: CustomPriceHeader,\r\n accessor: \"price\",\r\n sortType: (rowA, rowB) => {\r\n if (rowA.original.price > rowB.original.price) return -1;\r\n if (rowB.original.price > rowA.original.price) return 1;\r\n },\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(3);\r\n else return \"\";\r\n },\r\n },\r\n ],\r\n },\r\n ];\r\n const columnsNew = [\r\n {\r\n id: \"checkBox\",\r\n Header: \"\",\r\n Cell: (props) => {\r\n const rowId = props.row.id;\r\n return (\r\n \r\n handleCheckboxDeselect(rowId)}\r\n />\r\n
\r\n );\r\n },\r\n },\r\n {\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n },\r\n {\r\n Header: getValue(\"Pop\", getLang()),\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value))\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(2);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Term\", getLang()),\r\n accessor: \"terms\",\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(1);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n },\r\n {\r\n Header: CustomPriceHeader,\r\n accessor: \"price\",\r\n sortType: (rowA, rowB) => {\r\n if (rowA.original.price > rowB.original.price) return -1;\r\n if (rowB.original.price > rowA.original.price) return 1;\r\n },\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(3);\r\n else return \"\";\r\n },\r\n },\r\n ];\r\n setColumns(columnsAdded);\r\n setColumnsNew(columnsNew);\r\n } else {\r\n const columnsAdded = [\r\n {\r\n Header: () => {getValue(\"NumberOfAwards\", getLang())}: {nbr_of_awards}
,\r\n accessor: \"numberOfAwards\",\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n id: \"checkBox\",\r\n Header: \"\",\r\n Cell: (props) => {\r\n const rowId = props.row.id;\r\n return (\r\n \r\n handleCheckbox(rowId)}\r\n />\r\n
\r\n );\r\n },\r\n },\r\n {\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n },\r\n {\r\n Header: \"POP, M\",\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value))\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(1);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n },\r\n {\r\n Header: () => {getValue(\"Mean\", getLang())}: {mean}
,\r\n accessor: \"Mean\",\r\n disableSortBy: true,\r\n columns: [\r\n {\r\n Header: CustomPriceHeader,\r\n accessor: \"price\",\r\n sortType: (rowA, rowB) => {\r\n if (rowA.original.price > rowB.original.price) return -1;\r\n if (rowB.original.price > rowA.original.price) return 1;\r\n },\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(3);\r\n else return \"\";\r\n },\r\n },\r\n ],\r\n },\r\n ];\r\n const columnsNew = [\r\n {\r\n id: \"checkBox\",\r\n Header: \"\",\r\n Cell: (props) => {\r\n const rowId = props.row.id;\r\n return (\r\n \r\n handleCheckboxDeselect(rowId)}\r\n />\r\n
\r\n );\r\n },\r\n },\r\n {\r\n Header: getValue(\"Country\", getLang()),\r\n accessor: \"countryName\",\r\n },\r\n {\r\n Header: \"POP, M\",\r\n accessor: \"pop\",\r\n Cell: (props) => {\r\n if (props.value == null) return \"\";\r\n if (Number.isInteger(props.value))\r\n return props.value\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null)\r\n return props.value\r\n .toFixed(0)\r\n .toString()\r\n .replace(/\\B(? {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(1);\r\n else return \"\";\r\n },\r\n },\r\n {\r\n Header: getValue(\"Bands\", getLang()),\r\n accessor: \"band\",\r\n },\r\n\r\n {\r\n Header: CustomPriceHeader,\r\n accessor: \"price\",\r\n Cell: (props) => {\r\n if (props.value != null && props.value != \"\")\r\n return parseFloat(props.value).toFixed(3);\r\n else return \"\";\r\n },\r\n },\r\n ];\r\n setColumns(columnsAdded);\r\n setColumnsNew(columnsNew);\r\n }\r\n }\r\n\r\n setAwardsNew([]);\r\n saveUserFilters(list);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n LoadingAlert(\"hide\");\r\n });\r\n };\r\n\r\n const saveUserFilters = (list) => {\r\n console.log(list);\r\n APIFunctions.saveUserFilters(list)\r\n .then((resp) => resp)\r\n .then((resp) => console.log(resp));\r\n };\r\n\r\n const checkIfCanOpen = (target) => {\r\n if (target == \"countrySelection\") {\r\n setIsOpen5(true);\r\n }\r\n }\r\n\r\n const getUserFilters = () => {\r\n // LoadingAlert(\"Show\");\r\n APIFunctions.getUserFilters(\"PricingTest\")\r\n .then((resp) => resp)\r\n .then((resp) => {\r\n\r\n var data = resp.data;\r\n if (data.length > 0) {\r\n var fromYear = data.filter((item) => item.field == \"FromYear\");\r\n var toYear = data.filter((item) => item.field == \"ToYear\");\r\n var issueDate = data.filter((item) => item.field == \"IssueDate\");\r\n var awardTypeSelectedValue = data.filter((item) => item.field == \"awardTypeSelectedValue\");\r\n var discountRate = data.filter((item) => item.field == \"discountRate\");\r\n var term = data.filter((item) => item.field == \"term\");\r\n var adjustByInflationFactor = data.filter((item) => item.field == \"AdjustByInflationFactor\");\r\n var adjustByGDPFactor = data.filter((item) => item.field == \"AdjustByGDPFactor\");\r\n var adjustByPPPFactor = data.filter((item) => item.field == \"AdjustByPPPFactor\");\r\n var annualizePrice = data.filter((item) => item.field == \"AnnualizePrice\");\r\n var isIncludeAnnual = data.filter((item) => item.field == \"IsIncludeAnnual\");\r\n var regression = data.filter((item) => item.field == \"regression\");\r\n var upperPercentile = data.filter((item) => item.field == \"UpperPercentile\");\r\n var lowerPercentile = data.filter((item) => item.field == \"LowerPercentile\");\r\n var kValue = data.filter((item) => item.field == \"KValue\");\r\n var standardDeviationValue = data.filter((item) => item.field == \"StandardDeviationValue\");\r\n var ddlOutliers = data.filter((item) => item.field == \"ddlOutliers\");\r\n var sumBand = data.filter((item) => item.field == \"sumBand\");\r\n var maxValue = data.filter((item) => item.field == \"MaxGDP\");\r\n var minGDP = data.filter((item) => item.field == \"MinGDP\");\r\n var regionalLicense = data.filter((item) => item.field == \"RegionalLicense\");\r\n var unPaired = data.filter((item) => item.field == \"IsUnPaired\");\r\n var pairedUnpaired = data.filter((item) => item.field == \"IsPairedAndUnPaired\");\r\n var paired = data.filter((item) => item.field == \"Paired\");\r\n var multiple = data.filter((item) => item.field == \"IsMultiple\");\r\n var single = data.filter((item) => item.field == \"IsSingle\");\r\n var bands = data.filter((item) => item.field == \"Bands\");\r\n var countries = data.filter((item) => item.field == \"Country\");\r\n var showMarkersVal = data.filter((item) => item.field == \"showMarkers\");\r\n setMinGDP(minGDP[0].value);\r\n setMaxGDP(maxValue[0].value);\r\n setPaired(paired[0].value == \"true\" ? true : false);\r\n setUnPaired(unPaired[0].value == \"true\" ? true : false);\r\n setPairedUnPaired(pairedUnpaired[0].value == \"true\" ? true : false);\r\n setIncludeRegional(regionalLicense[0].value == \"true\" ? true : false);\r\n setMultiBand(multiple[0].value == \"true\" ? true : false);\r\n setSingleBand(single[0].value == \"true\" ? true : false);\r\n var tempBands = JSON.parse(bands[0].value);\r\n tempBands.map(function (val) {\r\n setCheckBand(val.value, val.isChecked);\r\n });\r\n var tempCountries = JSON.parse(countries[0].value);\r\n // tempCountries.map(function (val) {\r\n // setCountryChecked(val.value, val.isChecked);\r\n // });\r\n setoptions(tempCountries);\r\n setFromDate(fromYear[0].value);\r\n setToDate(toYear[0].value);\r\n $('#issueDate').val(issueDate[0].value);\r\n $('#showResults').val(awardTypeSelectedValue[0].value);\r\n setDiscountRate(discountRate[0].value);\r\n setTermValue(term[0].value);\r\n setAdjustByInflation(adjustByInflationFactor[0].value == \"true\" ? true : false);\r\n setNormalizeByGDPc(adjustByGDPFactor[0].value == \"true\" ? true : false);\r\n setAdjustByPPPFactor(adjustByPPPFactor[0].value == \"true\" ? true : false);\r\n setAnnualizePrices(annualizePrice[0].value == \"true\" ? true : false);\r\n setAddAnnualPayment(isIncludeAnnual[0].value == \"true\" ? true : false);\r\n setRegressionValue(regression[0].value);\r\n setUpperPercentileValueSelected(upperPercentile[0].value);\r\n setLowerPercentileValueSelected(lowerPercentile[0].value);\r\n setQuartileValue(kValue[0].value);\r\n setstandardDeviationValueAdded(standardDeviationValue[0].value);\r\n $('#ddlOutliers').val(ddlOutliers[0].value);\r\n excludeOutliers();\r\n $('#showMarkers').val(typeof showMarkersVal[0] !== \"undefined\" ? showMarkersVal[0].value : 0);\r\n $('#sumBands').val(sumBand[0].value);\r\n\r\n var _data = JSON.parse(countries[0].value);\r\n var lstChecked = _data.filter((x) => x.isChecked == true).length;\r\n var lst = _data.length;\r\n var value = lstChecked == lst ? true : false;\r\n\r\n if (lstChecked == 0)\r\n setCheckAll(false)\r\n else {\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value)\r\n }\r\n\r\n var _data2 = JSON.parse(bands[0].value);\r\n var lstChecked2 = _data2.filter((x) => x.isChecked == true).length;\r\n var lst2 = _data2.length;\r\n var value2 = lstChecked2 == lst2 ? true : false;\r\n\r\n if (lstChecked2.length == 0)\r\n setCheckAllBands(false);\r\n else\r\n setCheckAllBands(value2);\r\n\r\n } else {\r\n setDiscountRate(8.86);\r\n setTermValue(15);\r\n setRegressionValue(0);\r\n setQuartileValue(1);\r\n setUpperPercentileValueSelected(75);\r\n setLowerPercentileValueSelected(25);\r\n setstandardDeviationValueAdded(2);\r\n setMinGDP(0);\r\n setMaxGDP(200000);\r\n setFromDate(1985);\r\n setToDate(new Date().getFullYear());\r\n }\r\n\r\n // LoadingAlert(\"Hide\");\r\n });\r\n }\r\n\r\n const handleCheckbox = (rowId) => {\r\n\r\n setBtnShowClicked(false);\r\n\r\n setDeseltectChecked(true);\r\n\r\n var nbr = parseInt($('#numberOfAwards').html());\r\n nbr -= 1;\r\n $(\"#numberOfAwards\").html(nbr);\r\n\r\n let newArray = [...awardsRef.current];\r\n let deselectedAwards = [...awardsNewRef.current];\r\n let deselected = newArray[rowId];\r\n deselectedAwards.push(deselected);\r\n deselectedAwards.sort((a, b) => (a.countryName > b.countryName) ? 1 : ((b.countryName > a.countryName) ? -1 : 0));\r\n newArray.splice(rowId, 1);\r\n setAwards(newArray);\r\n setAwardsNew(deselectedAwards);\r\n\r\n var mean = 0;\r\n var sum = 0;\r\n var count = newArray.length;\r\n for (var i = 0; i < newArray.length; i++) {\r\n sum += newArray[i].price;\r\n }\r\n\r\n mean = calculateMean(sum, count);\r\n console.log(mean);\r\n $(\"#meanValueContainer\").html(`${getValue(\"Mean\", getLang())}: ` + mean);\r\n\r\n setDeseltectChecked(false);\r\n\r\n }\r\n\r\n const handleCheckboxDeselect = (rowId) => {\r\n\r\n setBtnShowClicked(false);\r\n\r\n setDeseltectChecked(true);\r\n\r\n var nbr = parseInt($('#numberOfAwards').html());\r\n nbr += 1;\r\n console.log(\"nbr after: \", nbr);\r\n $(\"#numberOfAwards\").html(nbr);\r\n\r\n let newArray = [...awardsRef.current];\r\n let deselectedAwards = [...awardsNewRef.current];\r\n let deselected = deselectedAwards[rowId];\r\n newArray.push(deselected);\r\n newArray.sort((a, b) => (a.countryName > b.countryName) ? 1 : ((b.countryName > a.countryName) ? -1 : 0));\r\n deselectedAwards.splice(rowId, 1);\r\n setAwards(newArray);\r\n setAwardsNew(deselectedAwards);\r\n\r\n var mean = 0;\r\n var sum = 0;\r\n var count = newArray.length;\r\n for (var i = 0; i < newArray.length; i++) {\r\n sum += newArray[i].price;\r\n }\r\n\r\n mean = calculateMean(sum, count);\r\n console.log(mean);\r\n $(\"#meanValueContainer\").html(`${getValue(\"Mean\", getLang())}: ` + mean);\r\n\r\n setDeseltectChecked(false);\r\n\r\n }\r\n\r\n useEffect(() => {\r\n APIFunctions.getUserCountries(\"PricingTest\")\r\n .then((resp) => resp)\r\n .then((resp) => bindOptions(resp.data))\r\n .then((resp) => getUserFilters());\r\n }, []);\r\n\r\n useEffect(() => {\r\n APIFunctions.getAllBands()\r\n .then((resp) => resp)\r\n .then((resp) => bindOptionsBand(resp.data));\r\n }, []);\r\n\r\n useEffect(() => {\r\n $('.menuItems').removeClass(\"active\");\r\n $('#PricingTest_page').addClass(\"active\");\r\n\r\n })\r\n\r\n const bindOptions = (data) => {\r\n var arr = [];\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n var ob = new Object();\r\n ob.label = data[i].nameEn;\r\n ob.labelAr = data[i].nameAr;\r\n // ob.label = getLang() == \"ar\" ? data[i].nameAr : data[i].nameEn;\r\n ob.value = data[i].countryId;\r\n ob.isChecked = true;\r\n arr.push(ob);\r\n }\r\n setoptions(arr);\r\n };\r\n\r\n const bindOptionsBand = (data) => {\r\n var arr = [];\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n var ob = new Object();\r\n ob.label = data[i].value;\r\n ob.value = data[i].value;\r\n data[i].value == 700 ? ob.isChecked = true : ob.isChecked = false;\r\n arr.push(ob);\r\n }\r\n setSelectedBandsOptions(arr);\r\n };\r\n\r\n const getCheckedBand = (id) => {\r\n var checked = false;\r\n var allData = bandOptionsList;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n }\r\n\r\n const getCheckedCountry = (id) => {\r\n var checked = false;\r\n var allData = options;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n }\r\n\r\n const setCountryChecked = (id, isChecked) => {\r\n var data = optionsRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, { value: id, isChecked: isChecked, label: item[0].label, labelAr: item[0].labelAr });\r\n\r\n\r\n setoptions(data);\r\n var lstChecked = data.filter((x) => x.checked == true).length;\r\n var lst = options.length;\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value)\r\n }\r\n\r\n const setCheckBand = (id, isChecked) => {\r\n var data = bandOptionsListRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n if (item.length > 0) {\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, { value: id, isChecked: isChecked, label: item[0].label });\r\n }\r\n setSelectedBandsOptions(data);\r\n }\r\n\r\n const firstTable = useTable(\r\n {\r\n columns,\r\n data: awards,\r\n initialState: {\r\n hiddenColumns: columns.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n autoResetSortBy: false,\r\n autoResetPage: btnShowClicked,\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n const {\r\n getTableProps: getFirstTableProps,\r\n getTableBodyProps: getFirstTableBodyProps,\r\n headerGroups: firstHeaderGroups,\r\n page: firstPage,\r\n nextPage: firstNextPage,\r\n previousPage: firstPreviousPage,\r\n canNextPage: firstCanNextPage,\r\n canPreviousPage: firstCanPreviousPage,\r\n pageOptions: firstPageOptions,\r\n gotoPage: firstGotoPage,\r\n pageCount: firstPageCount,\r\n setPageSize: firstSetPageSize,\r\n state: firstState,\r\n prepareRow: firstPrepareRow,\r\n } = firstTable;\r\n\r\n const secondTable = useTable(\r\n {\r\n columns: columnsNew,\r\n data: awardsNew,\r\n initialState: {\r\n hiddenColumns: columns.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n autoResetSortBy: false,\r\n autoResetPage: btnShowClicked,\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n const {\r\n getTableProps: getSecondTableProps,\r\n getTableBodyProps: getSecondTableBodyProps,\r\n headerGroups: secondHeaderGroups,\r\n page: secondPage,\r\n nextPage: secondNextPage,\r\n previousPage: secondPreviousPage,\r\n canNextPage: secondCanNextPage,\r\n canPreviousPage: secondCanPreviousPage,\r\n pageOptions: secondPageOptions,\r\n gotoPage: secondGotoPage,\r\n pageCount: secondPageCount,\r\n setPageSize: secondSetPageSize,\r\n state: secondState,\r\n prepareRow: secondPrepareRow,\r\n } = secondTable;\r\n\r\n const { pageIndex } = firstState;\r\n const secondPageIndex = secondState.pageIndex;\r\n\r\n const setDisplay = () => {\r\n setShowDisplay2(!showDisplay);\r\n setIconClass(!showDisplay == true ? \"spectre-angle-up btn btn-primary background-color-2 color-white mr-2\"\r\n : \"spectre-angle-down btn btn-primary background-color-2 color-white mr-2\");\r\n setShowTxt(!showDisplay == true ? getValue(\"ShowLess\", getLang()) : getValue(\"ShowMore\", getLang()))\r\n }\r\n\r\n const handleCheckAll = (isChecked) => {\r\n setCheckAll(isChecked);\r\n var updatedSelectedCountries = options;\r\n updatedSelectedCountries.map((row, i) => {\r\n row.isChecked = isChecked;\r\n })\r\n setoptions(updatedSelectedCountries);\r\n };\r\n\r\n const renderBands = () => {\r\n var bands = bandOptionsList;\r\n if (bands != null && bands.length > 0) {\r\n {\r\n return (bands.map((val, idx) => (\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n const renderCountries = () => {\r\n var countries = options;\r\n if (getLang() == \"ar\")\r\n countries.sort((a, b) => (a.labelAr > b.labelAr) ? 1 : ((b.labelAr > a.labelAr) ? -1 : 0));\r\n else\r\n countries.sort((a, b) => (a.labelEn > b.labelEn) ? 1 : ((b.labelEn > a.labelAr) ? -1 : 0));\r\n console.log(\"countries: \", countries);\r\n if (countries != null && countries.length > 0) {\r\n {\r\n return (countries.map((val, idx) => (\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n const renderCountries2 = () => {\r\n var countries = options;\r\n if (countries != null && countries.length > 0) {\r\n {\r\n return (countries.map((val, idx) => (\r\n \r\n \r\n
\r\n )));\r\n }\r\n }\r\n }\r\n\r\n const selectAllBands = (evt) => {\r\n\r\n if (evt == \"bandSelection\") {\r\n var updatedSelectedCountries = bandOptionsList;\r\n updatedSelectedCountries.map((row, i) => {\r\n row.isChecked = !checkAllBands;\r\n })\r\n\r\n setCheckAllBands(!checkAllBands);\r\n setSelectedBandsOptions(bandOptionsList);\r\n }\r\n }\r\n\r\n function calculateMean(sum, count) {\r\n return (sum / count).toFixed(3);\r\n }\r\n\r\n function calculateMedian(arr) {\r\n var values = arr;\r\n var median = 0;\r\n values.sort(function (a, b) {\r\n return a - b;\r\n });\r\n\r\n var half = Math.floor(values.length / 2);\r\n\r\n if (values.length % 2)\r\n median = parseFloat(values[half]);\r\n else {\r\n median = (parseFloat(values[half - 1]) + parseFloat(values[half])) / 2.0;\r\n }\r\n\r\n return median.toFixed(3);\r\n }\r\n\r\n function searchCountry() {\r\n var input, filter, found, div, label, i;\r\n input = document.getElementById(\"searchCountry\");\r\n filter = input.value.toUpperCase();\r\n div = document.getElementById(\"countries\");\r\n label = div.getElementsByTagName(\"label\");\r\n for (i = 0; i < label.length; i++) {\r\n if (label[i].innerHTML.toUpperCase().indexOf(filter) > -1) {\r\n found = true;\r\n }\r\n if (found) {\r\n label[i].style.display = \"\";\r\n found = false;\r\n } else {\r\n label[i].style.display = \"none\";\r\n }\r\n }\r\n }\r\n\r\n function renderDate() {\r\n var now = new Date().getFullYear();\r\n var arr_years = [];\r\n for (var i = now; i >= 1985; i--) {\r\n arr_years.push(i);\r\n }\r\n return (arr_years.map((val, idx) => (\r\n \r\n )));\r\n }\r\n\r\n\r\n\r\n function excludeOutliers() {\r\n var val = $(\"#ddlOutliers\").val();\r\n if (val == 0) {\r\n setLowerPercentileValue(\"block\");\r\n setUpperPercentileValue(\"block\");\r\n setstandardDeviationValue(\"none\");\r\n setRegressionVisibilityValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setHasPercentileValue(true);\r\n setHasRegressionValue(false);\r\n setHasQuartileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n }\r\n else if (val == 1) {\r\n setRegressionVisibilityValue(\"block\");\r\n setstandardDeviationValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setHasRegressionValue(true);\r\n setHasPercentileValue(false);\r\n setHasQuartileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n }\r\n else if (val == 2) {\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n setquatileVisibiltyValue(\"block\");\r\n setHasQuartileValue(true);\r\n\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n\r\n }\r\n else if (val == 3) {\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"block\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(true);\r\n setHasAutoFiltering(false);\r\n }\r\n else if (val == 4) {\r\n setHasAutoFiltering(true);\r\n\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n } else {\r\n setHasAutoFiltering(false);\r\n\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n }\r\n }\r\n\r\n function deselectedGridVisibility() {\r\n $(\".deselected-grid\").is(\":visible\") ? $(\".deselected-grid\").hide() : $(\".deselected-grid\").show();\r\n deselectedIndicator == true ? setDeselectedIndicator(false) : setDeselectedIndicator(true);\r\n }\r\n\r\n function inputNumberCheck(e) {\r\n if (e.which == 69 || e.which == 187 || e.which == 189 || e.which == 109) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n function getLabels(pointInfo) {\r\n var item = awardsForChart.filter((item) => item.index == pointInfo.value);\r\n if (item.length >= 0) {\r\n return item[0].bandCountry;\r\n } else {\r\n return \"\";\r\n }\r\n }\r\n\r\n function customizeTooltip(pointInfo) {\r\n // console.log(pointInfo);\r\n var txt = pointInfo.point.data.bandCountry + \"- \" + pointInfo.point.data.price;\r\n return { text: txt };\r\n }\r\n\r\n function saveYScaleValues() {\r\n let newMinVal = parseFloat($(\"#yScaleMinVal\").val());\r\n let newMaxVal = parseFloat($(\"#yScaleMaxVal\").val());\r\n if (newMinVal < newMaxVal) {\r\n setPlotMinVal(newMinVal);\r\n setPlotMaxVal(newMaxVal);\r\n setPlotMinValErr(false);\r\n setPlotMaxValErr(false);\r\n } else {\r\n if (newMinVal == \"\" || isNaN(newMinVal)) {\r\n setPlotMinValErr(true);\r\n } else {\r\n if (newMinVal >= newMaxVal) {\r\n setPlotMinValErr(true);\r\n } else {\r\n setPlotMinValErr(false);\r\n }\r\n }\r\n if (newMaxVal == \"\" || isNaN(newMaxVal)) {\r\n setPlotMaxValErr(true);\r\n } else {\r\n setPlotMaxValErr(false);\r\n }\r\n }\r\n }\r\n\r\n // $(\".dx-visibility-change-handler svg\").removeAttr(\"width\");\r\n // $(\".dx-visibility-change-handler svg\").css(\"width\", \"100%\");\r\n\r\n\r\n return (\r\n \r\n
\r\n {/* side menu */}\r\n {/* \r\n
\r\n \r\n {/* License Conditions */}\r\n
\r\n {/* Filter Actions */}\r\n \r\n {/* Term */}\r\n
\r\n {/* Include Awards */}\r\n \r\n \r\n
\r\n\r\n {/* Issue date */}\r\n \r\n \r\n
\r\n {/* Discount rate */}\r\n \r\n \r\n
\r\n \r\n
\r\n {/* Country Selection */}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n { checkIfCanOpen(e.target.id) }}>\r\n
\r\n {/* Band Selection */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {renderCountries()}\r\n
\r\n selectAllBands(e.target.id)}>\r\n
\r\n {/* Adjustments */}\r\n \r\n\r\n {renderBands()}\r\n
\r\n \r\n
\r\n {/* Anaysis */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n setDisplay()}> {showTxt}\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {/* Deselected rows */}\r\n \r\n \r\n \r\n \r\n {firstHeaderGroups.map((headerGroup) => (\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {getValue(\"PriceBenchmarks\", getLang())}
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {getValue(\"Page\", getLang())}{\" \"}\r\n \r\n {firstPageOptions.length !== 0 ? pageIndex + 1 : 0} {getValue(\"Of\", getLang())} {firstPageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | {getValue(\"GoToPage\", getLang())}\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n firstGotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n firstGotoPage(0)}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n firstPreviousPage()}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {getValue(\"Previous\", getLang())}\r\n \r\n firstNextPage()}\r\n disabled={!firstCanNextPage}\r\n >\r\n {getValue(\"Next\", getLang())}\r\n \r\n firstGotoPage(firstPageCount - 1)}\r\n disabled={!firstCanNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {secondHeaderGroups.map((headerGroup) => (\r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n deselectedGridVisibility()}>
\r\n
\r\n deselectedGridVisibility()}>![]({\"./public_pages/images/plus-icon.png\"})
{getValue(\"DeSelectedAwards\", getLang())}
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {getValue(\"Page\", getLang())}{\" \"}\r\n \r\n {secondPageOptions.length !== 0 ? secondPageIndex + 1 : 0} {getValue(\"Of\", getLang())} {secondPageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | {getValue(\"GoToPage\", getLang())}\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n secondGotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n secondGotoPage(0)}\r\n disabled={!secondCanPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n secondPreviousPage()}\r\n disabled={!secondCanPreviousPage}\r\n >\r\n {getValue(\"Previous\", getLang())}\r\n \r\n secondNextPage()}\r\n disabled={!secondCanNextPage}\r\n >\r\n {getValue(\"Next\", getLang())}\r\n \r\n secondGotoPage(secondPageCount - 1)}\r\n disabled={!secondCanNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n \r\n
\r\n */}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {/*
\r\n \r\n
*/}\r\n {getValue(\"PricePlotTitle\", getLang()) + \" \" + myHeader + \" \" + getValue(\"ForA\", getLang()) + termValue + \"\" + getValue(\"PricePlotTitle2\", getLang())}
\r\n\r\n \r\n inputNumberCheck(e)} />\r\n \r\n inputNumberCheck(e)} />\r\n \r\n
\r\n - \r\n
- { exportToCSV(awards, \"Pricing\") }} className=\"list-group-item\" style={{ cursor: \"pointer\" }}>
- { exportToPDF() }} className=\"list-group-item\" style={{ cursor: \"pointer\" }}> {getValue(\"ExportToPDF\", getLang())} \r\n {isExportPDF &&
\r\n {renderCountries2()}\r\n
\r\n \r\n \r\n
\r\n ));\r\n }\r\n }\r\n };\r\n\r\n const getUserFilters = () => {\r\n // LoadingAlert(\"Show\");\r\n APIFunctions.getUserFilters(\"Trends\")\r\n .then((resp) => resp)\r\n .then((resp) => {\r\n var data = resp.data;\r\n if (data.length > 0) {\r\n var fromYear = data.filter((item) => item.field == \"FromYear\");\r\n var toYear = data.filter((item) => item.field == \"ToYear\");\r\n var issueDate = data.filter((item) => item.field == \"IssueDate\");\r\n var awardTypeSelectedValue = data.filter(\r\n (item) => item.field == \"awardTypeSelectedValue\"\r\n );\r\n var discountRate = data.filter(\r\n (item) => item.field == \"discountRate\"\r\n );\r\n var term = data.filter((item) => item.field == \"term\");\r\n var adjustByInflationFactor = data.filter(\r\n (item) => item.field == \"AdjustByInflationFactor\"\r\n );\r\n var adjustByGDPFactor = data.filter(\r\n (item) => item.field == \"AdjustByGDPFactor\"\r\n );\r\n var adjustByPPPFactor = data.filter(\r\n (item) => item.field == \"AdjustByPPPFactor\"\r\n );\r\n var annualizePrice = data.filter(\r\n (item) => item.field == \"AnnualizePrice\"\r\n );\r\n var isIncludeAnnual = data.filter(\r\n (item) => item.field == \"IsIncludeAnnual\"\r\n );\r\n var regression = data.filter((item) => item.field == \"regression\");\r\n var upperPercentile = data.filter(\r\n (item) => item.field == \"UpperPercentile\"\r\n );\r\n var lowerPercentile = data.filter(\r\n (item) => item.field == \"LowerPercentile\"\r\n );\r\n var kValue = data.filter((item) => item.field == \"KValue\");\r\n var standardDeviationValue = data.filter(\r\n (item) => item.field == \"StandardDeviationValue\"\r\n );\r\n var ddlOutliers = data.filter((item) => item.field == \"ddlOutliers\");\r\n var sumBand = data.filter((item) => item.field == \"sumBand\");\r\n var maxValue = data.filter((item) => item.field == \"MaxGDP\");\r\n var minGDP = data.filter((item) => item.field == \"MinGDP\");\r\n var regionalLicense = data.filter(\r\n (item) => item.field == \"RegionalLicense\"\r\n );\r\n var unPaired = data.filter((item) => item.field == \"IsUnPaired\");\r\n var pairedUnpaired = data.filter(\r\n (item) => item.field == \"IsPairedAndUnPaired\"\r\n );\r\n var paired = data.filter((item) => item.field == \"Paired\");\r\n var multiple = data.filter((item) => item.field == \"IsMultiple\");\r\n var single = data.filter((item) => item.field == \"IsSingle\");\r\n var bands = data.filter((item) => item.field == \"Bands\");\r\n var countries = data.filter((item) => item.field == \"Country\");\r\n setMinGDP(minGDP[0].value);\r\n setMaxGDP(maxValue[0].value);\r\n setPaired(paired[0].value == \"true\" ? true : false);\r\n setUnPaired(unPaired[0].value == \"true\" ? true : false);\r\n setPairedUnPaired(pairedUnpaired[0].value == \"true\" ? true : false);\r\n setIncludeRegional(regionalLicense[0].value == \"true\" ? true : false);\r\n setMultiBand(multiple[0].value == \"true\" ? true : false);\r\n setSingleBand(single[0].value == \"true\" ? true : false);\r\n var tempBands = JSON.parse(bands[0].value);\r\n tempBands.map(function (val) {\r\n setCheckBand(val.value, val.isChecked);\r\n });\r\n var tempCountries = JSON.parse(countries[0].value);\r\n // tempCountries.map(function (val) {\r\n // setCountryChecked(val.value, val.isChecked);\r\n // });\r\n setoptions(tempCountries);\r\n setFromDate(fromYear[0].value);\r\n setToDate(toYear[0].value);\r\n $(\"#issueDate\").val(issueDate[0].value);\r\n $(\"#showResults\").val(awardTypeSelectedValue[0].value);\r\n setDiscountRate(discountRate[0].value);\r\n setTermValue(term[0].value);\r\n setAdjustByInflation(\r\n adjustByInflationFactor[0].value == \"true\" ? true : false\r\n );\r\n setNormalizeByGDPc(\r\n adjustByGDPFactor[0].value == \"true\" ? true : false\r\n );\r\n setAdjustByPPPFactor(\r\n adjustByPPPFactor[0].value == \"true\" ? true : false\r\n );\r\n setAnnualizePrices(annualizePrice[0].value == \"true\" ? true : false);\r\n setAddAnnualPayment(\r\n isIncludeAnnual[0].value == \"true\" ? true : false\r\n );\r\n setRegressionValue(regression[0].value);\r\n setUpperPercentileValueSelected(upperPercentile[0].value);\r\n setLowerPercentileValueSelected(lowerPercentile[0].value);\r\n setQuartileValue(kValue[0].value);\r\n setstandardDeviationValueAdded(standardDeviationValue[0].value);\r\n $(\"#ddlOutliers\").val(ddlOutliers[0].value);\r\n excludeOutliers();\r\n $(\"#sumBands\").val(sumBand[0].value);\r\n\r\n var _data = JSON.parse(countries[0].value);\r\n var lstChecked = _data.filter((x) => x.isChecked == true).length;\r\n var lst = _data.length;\r\n var value = lstChecked == lst ? true : false;\r\n if (lstChecked == 0) setCheckAll(false);\r\n else {\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value);\r\n }\r\n\r\n var _data2 = JSON.parse(bands[0].value);\r\n var lstChecked2 = _data2.filter((x) => x.isChecked == true).length;\r\n var lst2 = _data2.length;\r\n var value2 = lstChecked2 == lst2 ? true : false;\r\n\r\n if (lstChecked2.length == 0) setCheckAllBands(false);\r\n else setCheckAllBands(value2);\r\n } else {\r\n setDiscountRate(8.86);\r\n setTermValue(15);\r\n setRegressionValue(0);\r\n setQuartileValue(1);\r\n setUpperPercentileValueSelected(75);\r\n setLowerPercentileValueSelected(25);\r\n setstandardDeviationValueAdded(2);\r\n setMinGDP(0);\r\n setMaxGDP(200000);\r\n setFromDate(1985);\r\n setToDate(new Date().getFullYear());\r\n }\r\n\r\n // LoadingAlert(\"Hide\");\r\n });\r\n };\r\n\r\n optionsRef.current = options;\r\n bandOptionsListRef.current = bandOptionsList;\r\n\r\n function searchCountry() {\r\n var input, filter, found, div, label, i;\r\n input = document.getElementById(\"searchCountry\");\r\n filter = input.value.toUpperCase();\r\n div = document.getElementById(\"countries\");\r\n label = div.getElementsByTagName(\"label\");\r\n for (i = 0; i < label.length; i++) {\r\n if (label[i].innerHTML.toUpperCase().indexOf(filter) > -1) {\r\n found = true;\r\n }\r\n if (found) {\r\n label[i].style.display = \"\";\r\n found = false;\r\n } else {\r\n label[i].style.display = \"none\";\r\n }\r\n }\r\n }\r\n\r\n const exportToPDF = () => {\r\n LoadingAlert(\"Show\");\r\n\r\n var AwardFilter = new Object();\r\n AwardFilter.FromYear = parseInt(fromDate);\r\n AwardFilter.Lang = getLang();\r\n AwardFilter.ToYear = parseInt(toDate);\r\n AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n //AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n AwardFilter.IsSingle = singleBand;\r\n AwardFilter.IsMultiple = multiBand;\r\n AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n AwardFilter.IsPaired = paired;\r\n AwardFilter.IsUnPaired = unPaired;\r\n AwardFilter.RegionalLicense = includeRegional;\r\n AwardFilter.minGDPValue = parseInt(minGDP);\r\n AwardFilter.maxGDPValue = parseInt(maxGDP);\r\n AwardFilter.MaxGDP = parseInt(maxGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n //AwardFilter.Band = selectedBands.join(\",\");\r\n AwardFilter.issueDate = parseInt($(\"#issueDate\").val());\r\n var awardTypeSelectedValue = $(\"#showResults\").val();\r\n if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n else AwardFilter.AverageSumPricesAndMHZ = false;\r\n if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n else AwardFilter.averageAwards = false;\r\n if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n else AwardFilter.uniqueAwards = false;\r\n AwardFilter.discountRate = discountRateValue;\r\n AwardFilter.term = termValue;\r\n AwardFilter.AdjustByInflationFactor = adjustByInflation;\r\n AwardFilter.AdjustByGDPFactor = normalizeByGDPc;\r\n AwardFilter.AdjustByPPPFactor = adjustByPPPFactor;\r\n AwardFilter.AnnualizePrice = annualizePrices;\r\n AwardFilter.IsIncludeAnnual = addAnnualPayment;\r\n AwardFilter.hasRegression = hasRegressionValue;\r\n AwardFilter.regression = regressionValue;\r\n AwardFilter.HasPercentile = hasPercentileValue;\r\n AwardFilter.UpperPercentile = upperPercentileValueSelected;\r\n AwardFilter.LowerPercentile = lowerPercentileValueSelected;\r\n AwardFilter.HasQuartile = hasQuartileValue;\r\n AwardFilter.KValue = parseFloat(quartileValue);\r\n AwardFilter.HasStandardDeviation = hasStandardDeviation;\r\n AwardFilter.StandardDeviationValue = standardDeviationValueAdded;\r\n AwardFilter.AutoFiltering = hasAutoFiltering;\r\n AwardFilter.sumBand = $(\"#sumBands\").val();\r\n AwardFilter.ShowMarkers = $(\"#showMarkers\").val() == \"1\" ? true : false;\r\n AwardFilter.outliers = $(\"#ddlOutliers\").val();\r\n\r\n AwardFilter.Header = myHeader;\r\n setFilters(AwardFilter);\r\n _exportedFilters = AwardFilter;\r\n\r\n setisExportPDF(true);\r\n\r\n setTimeout(() => {\r\n setisExportPDF(false);\r\n }, 300);\r\n };\r\n\r\n function excludeOutliers() {\r\n var val = $(\"#ddlOutliers\").val();\r\n if (val == 0) {\r\n setLowerPercentileValue(\"block\");\r\n setUpperPercentileValue(\"block\");\r\n setstandardDeviationValue(\"none\");\r\n setRegressionVisibilityValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setHasPercentileValue(true);\r\n setHasRegressionValue(false);\r\n setHasQuartileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n } else if (val == 1) {\r\n setRegressionVisibilityValue(\"block\");\r\n setstandardDeviationValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setHasRegressionValue(true);\r\n setHasPercentileValue(false);\r\n setHasQuartileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n } else if (val == 2) {\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n setquatileVisibiltyValue(\"block\");\r\n setHasQuartileValue(true);\r\n\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n setHasAutoFiltering(false);\r\n } else if (val == 3) {\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"block\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(true);\r\n setHasAutoFiltering(false);\r\n } else if (val == 4) {\r\n setHasAutoFiltering(true);\r\n\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n } else {\r\n setHasAutoFiltering(false);\r\n\r\n setRegressionVisibilityValue(\"none\");\r\n setLowerPercentileValue(\"none\");\r\n setUpperPercentileValue(\"none\");\r\n setquatileVisibiltyValue(\"none\");\r\n setstandardDeviationValue(\"none\");\r\n\r\n setHasQuartileValue(false);\r\n setHasRegressionValue(false);\r\n setHasPercentileValue(false);\r\n sethasStandardDeviation(false);\r\n }\r\n }\r\n const setDisplay = () => {\r\n setShowDisplay2(!showDisplay);\r\n setIconClass(\r\n !showDisplay == true\r\n ? \"spectre-angle-up btn btn-primary background-color-2 color-white mr-2\"\r\n : \"spectre-angle-down btn btn-primary background-color-2 color-white mr-2\"\r\n );\r\n setShowTxt(\r\n !showDisplay == true\r\n ? getValue(\"ShowLess\", getLang())\r\n : getValue(\"ShowMore\", getLang())\r\n );\r\n };\r\n\r\n const handleCheckAll = (isChecked) => {\r\n setCheckAll(isChecked);\r\n var updatedSelectedCountries = options;\r\n updatedSelectedCountries.map((row, i) => {\r\n row.isChecked = isChecked;\r\n });\r\n setoptions(updatedSelectedCountries);\r\n };\r\n const getCheckedCountry = (id) => {\r\n var checked = false;\r\n var allData = options;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n };\r\n\r\n const renderBands = () => {\r\n var bands = bandOptionsList;\r\n if (bands != null && bands.length > 0) {\r\n {\r\n return bands.map((val, idx) => (\r\n \r\n \r\n
\r\n ));\r\n }\r\n }\r\n };\r\n const getCheckedBand = (id) => {\r\n var checked = false;\r\n var allData = bandOptionsList;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n };\r\n\r\n const setCheckBand = (id, isChecked) => {\r\n var data = bandOptionsListRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n if (item.length > 0) {\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, {\r\n value: id,\r\n isChecked: isChecked,\r\n label: item[0].label,\r\n });\r\n }\r\n setSelectedBandsOptions(data);\r\n };\r\n\r\n const setCountryChecked = (id, isChecked) => {\r\n var data = optionsRef.current;\r\n var item = data.filter((item) => item.value == id);\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, {\r\n value: id,\r\n isChecked: isChecked,\r\n label: item[0].label,\r\n labelAr: item[0].labelAr,\r\n });\r\n\r\n setoptions(data);\r\n var lstChecked = data.filter((x) => x.checked == true).length;\r\n var lst = options.length;\r\n var value = lstChecked == lst ? true : false;\r\n if (lstChecked == 0) setCheckAll(false);\r\n else {\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value);\r\n }\r\n };\r\n\r\n const hideModal = () => {\r\n setIsOpen(false);\r\n setIsOpenLin(false);\r\n setIsOpenLog(false);\r\n setIsOpenLinear(false);\r\n setIsOpenChartType(false);\r\n setTitle(\"Transitioning...\");\r\n };\r\n\r\n const modalLoaded = () => {\r\n if (trendTypeValue == 0) setTitle(\"Price / Band (lin x-scale)\");\r\n else if (trendTypeValue == 1) setTitle(\"Price / Band (log y-scale)\");\r\n else if (trendTypeValue == 2) setTitle(\"Prices against year\");\r\n else setTitle(\"Price / Linear freq scale\");\r\n };\r\n\r\n const saveUserFilters = (list) => {\r\n console.log(list);\r\n APIFunctions.saveUserFilters(list)\r\n .then((resp) => resp)\r\n .then((resp) => console.log(resp));\r\n };\r\n\r\n const checkIfCanOpen = (target) => {\r\n if (target == \"countrySelection\") {\r\n setIsOpen5(true);\r\n }\r\n };\r\n\r\n const checkIfCanView = () => {\r\n APIFunctions.checkIfCanView(\"Trends\")\r\n .then((response) => {\r\n if (response.data) {\r\n filterAwards();\r\n } else {\r\n Alert(getValue(\"FeatureNotAvailable\", getLang()));\r\n return;\r\n }\r\n })\r\n .catch((e) => {\r\n LoadingAlert(\"Hide\");\r\n console.log(e);\r\n });\r\n };\r\n\r\n const filterAwards = () => {\r\n var selectedCountries = [];\r\n var selectedBands = [];\r\n\r\n // Validations Begin\r\n var valid = true;\r\n\r\n if ((minGDP == \"\" || minGDP == null) && minGDP != \"0\") {\r\n valid = false;\r\n }\r\n if (\r\n maxGDP == null ||\r\n maxGDP == \"\" ||\r\n fromDate == null ||\r\n fromDate == \"\" ||\r\n toDate == null ||\r\n toDate == \"\"\r\n ) {\r\n valid = false;\r\n }\r\n if (!valid) {\r\n AlertError(getValue(\"PleaseFillMissingFields\", getLang()));\r\n return;\r\n }\r\n\r\n for (var i = 0, l = options.length; i < l; i++) {\r\n if (options[i].isChecked) {\r\n selectedCountries.push(options[i].value);\r\n }\r\n }\r\n for (var i = 0, l = bandOptionsList.length; i < l; i++) {\r\n if (bandOptionsList[i].isChecked) {\r\n selectedBands.push(bandOptionsList[i].value);\r\n }\r\n }\r\n\r\n if (selectedCountries.length == 0) {\r\n AlertError(getValue(\"ChooseOneCountry\", getLang()));\r\n return;\r\n }\r\n if (selectedBands.length == 0) {\r\n AlertError(getValue(\"ChooseOneBand\", getLang()));\r\n return;\r\n }\r\n if (parseInt(minGDP) > parseInt(maxGDP)) {\r\n AlertError(getValue(\"GDPValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > parseInt(toDate)) {\r\n AlertError(getValue(\"DateValidation\", getLang()));\r\n return;\r\n }\r\n if (fromDate.length > 4 || fromDate.length < 4) {\r\n AlertError(getValue(\"ValidToDate\", getLang()));\r\n return;\r\n }\r\n if (toDate.length > 4 || toDate.length < 4) {\r\n AlertError(getValue(\"ValidToDate\", getLang()));\r\n return;\r\n }\r\n if (termValue == \"\" || termValue == null || termValue <= 0) {\r\n AlertError(getValue(\"MinTermValue\", getLang()));\r\n return;\r\n }\r\n if (termValue > 40) {\r\n AlertError(getValue(\"MaxTermValue\", getLang()));\r\n return;\r\n }\r\n if (\r\n discountRateValue == \"\" ||\r\n discountRateValue == null ||\r\n discountRateValue < 0\r\n ) {\r\n AlertError(getValue(\"MinDiscountRate\", getLang()));\r\n return;\r\n }\r\n if (discountRateValue > 100) {\r\n AlertError(getValue(\"MaxDiscountRate\", getLang()));\r\n return;\r\n }\r\n if (parseInt($(\"#issueDate\").val()) < parseInt(toDate)) {\r\n AlertError(getValue(\"IssueDateValidation\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) < 1985) {\r\n AlertError(getValue(\"MinimumFromDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(fromDate) > new Date().getFullYear()) {\r\n AlertError(\r\n getValue(\"MaximumFromDate\", getLang()) + new Date().getFullYear()\r\n );\r\n return;\r\n }\r\n if (parseInt(toDate) < 1985) {\r\n AlertError(getValue(\"MinimumToDate\", getLang()));\r\n return;\r\n }\r\n if (parseInt(toDate) > new Date().getFullYear()) {\r\n AlertError(\r\n getValue(\"MaximumToDate\", getLang()) + new Date().getFullYear()\r\n );\r\n return;\r\n }\r\n\r\n if (!(singleBand || multiBand)) {\r\n AlertError(getValue(\"SingleValidation\", getLang()));\r\n return;\r\n }\r\n\r\n if (!(paired || unPaired || pairedUnpaired)) {\r\n AlertError(getValue(\"SelectPairing\", getLang()));\r\n return;\r\n }\r\n\r\n if ($(\"#ddlOutliers\").val() == 0) {\r\n if (upperPercentileValueSelected < 0) {\r\n AlertError(getValue(\"UpperPercentileMinValidation\", getLang()));\r\n return;\r\n }\r\n if (upperPercentileValueSelected > 100) {\r\n AlertError(getValue(\"UpperPercentileMaxValidation\", getLang()));\r\n return;\r\n }\r\n if (lowerPercentileValueSelected < 0) {\r\n AlertError(getValue(\"LowerPercentileMinValidation\", getLang()));\r\n return;\r\n }\r\n if (lowerPercentileValueSelected > 100) {\r\n AlertError(getValue(\"LowerPercentileMaxValidation\", getLang()));\r\n return;\r\n }\r\n if (upperPercentileValueSelected < lowerPercentileValueSelected) {\r\n AlertError(getValue(\"LowePerLessThan\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 1) {\r\n if (regressionValue < 0) {\r\n AlertError(getValue(\"Min%\", getLang()));\r\n return;\r\n }\r\n if (regressionValue > 100) {\r\n AlertError(getValue(\"Max%\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 2) {\r\n if (quartileValue < 0) {\r\n AlertError(getValue(\"MinKValue\", getLang()));\r\n return;\r\n }\r\n if (quartileValue > 3) {\r\n AlertError(getValue(\"MaxKValue\", getLang()));\r\n return;\r\n }\r\n }\r\n if ($(\"#ddlOutliers\").val() == 3) {\r\n if (standardDeviationValueAdded < 1) {\r\n AlertError(getValue(\"MinSD\", getLang()));\r\n return;\r\n }\r\n if (standardDeviationValueAdded > 3) {\r\n AlertError(getValue(\"MaxSD\", getLang()));\r\n return;\r\n }\r\n }\r\n\r\n // Validations End\r\n\r\n var AwardFilter = new Object();\r\n AwardFilter.FromYear = parseInt(fromDate);\r\n AwardFilter.Lang = getLang();\r\n AwardFilter.ToYear = parseInt(toDate);\r\n AwardFilter.IsPPP = getPPP() == \"true\" ? true : false;\r\n AwardFilter.IsIMF = getIMF() == \"true\" ? true : false;\r\n AwardFilter.CountryIds = selectedCountries.join(\",\");\r\n AwardFilter.IsSingle = singleBand;\r\n AwardFilter.IsMultiple = multiBand;\r\n AwardFilter.IsPairedAndUnPaired = pairedUnpaired;\r\n AwardFilter.IsPaired = paired;\r\n AwardFilter.IsUnPaired = unPaired;\r\n AwardFilter.RegionalLicense = includeRegional;\r\n AwardFilter.minGDPValue = parseInt(minGDP);\r\n AwardFilter.maxGDPValue = parseInt(maxGDP);\r\n AwardFilter.MaxGDP = parseInt(maxGDP);\r\n AwardFilter.MinGDP = parseInt(minGDP);\r\n AwardFilter.Band = selectedBands.join(\",\");\r\n AwardFilter.issueDate = parseInt($(\"#issueDate\").val());\r\n var awardTypeSelectedValue = $(\"#showResults\").val();\r\n if (awardTypeSelectedValue == -1) AwardFilter.AverageSumPricesAndMHZ = true;\r\n else AwardFilter.AverageSumPricesAndMHZ = false;\r\n if (awardTypeSelectedValue == 1) AwardFilter.averageAwards = true;\r\n else AwardFilter.averageAwards = false;\r\n if (awardTypeSelectedValue == 0) AwardFilter.uniqueAwards = true;\r\n else AwardFilter.uniqueAwards = false;\r\n AwardFilter.discountRate = discountRateValue;\r\n AwardFilter.term = termValue;\r\n AwardFilter.AdjustByInflationFactor = adjustByInflation;\r\n AwardFilter.AdjustByGDPFactor = normalizeByGDPc;\r\n AwardFilter.AdjustByPPPFactor = adjustByPPPFactor;\r\n AwardFilter.AnnualizePrice = annualizePrices;\r\n AwardFilter.IsIncludeAnnual = addAnnualPayment;\r\n AwardFilter.hasRegression = hasRegressionValue;\r\n AwardFilter.regression = regressionValue;\r\n AwardFilter.HasPercentile = hasPercentileValue;\r\n AwardFilter.UpperPercentile = upperPercentileValueSelected;\r\n AwardFilter.LowerPercentile = lowerPercentileValueSelected;\r\n AwardFilter.HasQuartile = hasQuartileValue;\r\n AwardFilter.KValue = quartileValue;\r\n AwardFilter.HasStandardDeviation = hasStandardDeviation;\r\n AwardFilter.StandardDeviationValue = standardDeviationValueAdded;\r\n AwardFilter.AutoFiltering = hasAutoFiltering;\r\n AwardFilter.sumBand = $(\"#sumBands\").val();\r\n\r\n console.log(AwardFilter);\r\n\r\n var list = [];\r\n list.push(\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"FromYear\",\r\n value: fromDate.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"ToYear\",\r\n value: toDate.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"IssueDate\",\r\n value: $(\"#issueDate\").val(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"awardTypeSelectedValue\",\r\n value: $(\"#showResults\").val(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"discountRate\",\r\n value: discountRateValue.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"term\",\r\n value: termValue.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"AdjustByInflationFactor\",\r\n value: adjustByInflation.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"AdjustByGDPFactor\",\r\n value: normalizeByGDPc.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"AdjustByPPPFactor\",\r\n value: adjustByPPPFactor.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"AnnualizePrice\",\r\n value: annualizePrices.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"IsIncludeAnnual\",\r\n value: addAnnualPayment.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"regression\",\r\n value: regressionValue.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"UpperPercentile\",\r\n value: upperPercentileValueSelected.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"LowerPercentile\",\r\n value: lowerPercentileValueSelected.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"KValue\",\r\n value: quartileValue.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"StandardDeviationValue\",\r\n value: standardDeviationValueAdded.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"ddlOutliers\",\r\n value: $(\"#ddlOutliers\").val(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"sumBand\",\r\n value: $(\"#sumBands\").val(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"MinGDP\",\r\n value: minGDP.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"MaxGDP\",\r\n value: maxGDP.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"RegionalLicense\",\r\n value: includeRegional.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"Paired\",\r\n value: AwardFilter.IsPaired.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"IsUnPaired\",\r\n value: AwardFilter.IsUnPaired.toString(),\r\n UserId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"IsPairedAndUnPaired\",\r\n value: AwardFilter.IsPairedAndUnPaired.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"IsMultiple\",\r\n value: AwardFilter.IsMultiple.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"IsSingle\",\r\n value: AwardFilter.IsSingle.toString(),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"Bands\",\r\n value: JSON.stringify(bandOptionsList),\r\n userId: 0,\r\n },\r\n {\r\n id: 0,\r\n pageUrl: \"Trends\",\r\n field: \"Country\",\r\n value: JSON.stringify(options),\r\n userId: 0,\r\n }\r\n );\r\n\r\n console.log(list);\r\n\r\n saveUserFilters(list);\r\n\r\n LoadingAlert(\"Show\");\r\n APIFunctions.FilterTrends(AwardFilter)\r\n .then((response) => {\r\n console.log(response.data);\r\n LoadingAlert(\"Hide\");\r\n if (response.data == 0) {\r\n Alert(getValue(\"NoDataToDisplay\", getLang()));\r\n setAwards([]);\r\n setNumberOfAwards(0);\r\n document.getElementById(\"numberOfAwards\").innerHTML = 0;\r\n var meanContainer = document.getElementById(\"meanValueContainer\");\r\n if (typeof meanContainer != \"undefined\" && meanContainer != null)\r\n meanContainer.innerHTML = \"Mean: 0\";\r\n return;\r\n } else {\r\n setAwards(response.data);\r\n var nbr_of_awards = response.data.length;\r\n setNumberOfAwards(response.data.length);\r\n\r\n var data = response.data;\r\n var CustomPriceHeader = \"$/M/P x1\";\r\n var count = 0;\r\n var min = Number.MAX_VALUE;\r\n\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n min = Math.min(min, data[i].price);\r\n }\r\n\r\n if (min != 0) {\r\n while (min < 0.001) {\r\n min *= 10;\r\n count++;\r\n console.log(min);\r\n }\r\n }\r\n\r\n var CustomPriceHeader = \"$/M/P\";\r\n if (annualizePrices) {\r\n CustomPriceHeader += \"/Y\";\r\n }\r\n\r\n if (normalizeByGDPc) {\r\n CustomPriceHeader += \"/GDPc x \" + Math.pow(10, count);\r\n for (var i = 0, l = response.data.length; i < l; i++) {\r\n response.data[i].price *= Math.pow(10, count);\r\n }\r\n } else {\r\n CustomPriceHeader += \" x 1\";\r\n }\r\n\r\n setMyHeader(CustomPriceHeader);\r\n\r\n var all_bands = [];\r\n for (var i = 0; i < bandOptionsList.length; i++) {\r\n all_bands.push(bandOptionsList[i].value);\r\n }\r\n\r\n setAllBands(all_bands);\r\n\r\n //lin series\r\n var series = [];\r\n for (var i = 0; i < response.data.length; i++) {\r\n var data_arr = [];\r\n for (var j = 0; j < all_bands.length; j++) {\r\n if (all_bands[j] == response.data[i].band)\r\n data_arr.push(response.data[i].price.toFixed(3));\r\n else data_arr.push(null);\r\n }\r\n series.push({\r\n name: response.data[i].countryName,\r\n data: data_arr,\r\n });\r\n }\r\n setLinSeries(series);\r\n\r\n // Linear freq scale\r\n var bands_linear = [];\r\n for (var i = 400; i < 30000; ) {\r\n bands_linear.push(i);\r\n i < 900\r\n ? (i += 50)\r\n : i == 900\r\n ? (i = 1000)\r\n : i < 4000\r\n ? (i += 1000)\r\n : i == 4000\r\n ? (i = 23000)\r\n : (i += 1000);\r\n }\r\n console.log(bands_linear);\r\n setLinearScaleBands(bands_linear);\r\n var linear_scale_series = [];\r\n for (var i = 0; i < response.data.length; i++) {\r\n var data_arr = [];\r\n for (var j = 0; j < bands_linear.length; j++) {\r\n if (bands_linear[j] == response.data[i].band)\r\n data_arr.push(response.data[i].price.toFixed(3));\r\n else data_arr.push(null);\r\n }\r\n linear_scale_series.push({\r\n data: data_arr,\r\n });\r\n }\r\n setLinearScaleSeries(linear_scale_series);\r\n\r\n console.log(awards);\r\n var arr_band_countries = [];\r\n for (var k = 0; k < response.data.length; k++) {\r\n arr_band_countries.push(response.data[k].bandCountry);\r\n }\r\n console.log(arr_band_countries);\r\n var arr = response.data.map(function (val) {\r\n return val.price == null ? 0 : val.price.toFixed(3);\r\n });\r\n\r\n var arr2 = response.data.map(function (val) {\r\n return (\r\n val.band +\r\n \"-\" +\r\n val.countryName +\r\n \"-\" +\r\n val.year +\r\n \"-\" +\r\n val.operatorName +\r\n \" Price=\" +\r\n val.price +\r\n \" $/M/P x1\"\r\n );\r\n });\r\n\r\n var arr3 = response.data.map(function (val) {\r\n return val.price;\r\n });\r\n\r\n console.log(min);\r\n\r\n var mean = 0;\r\n var sum = 0;\r\n var count = response.data.length;\r\n for (var i = 0; i < data.length; i++) {\r\n sum += data[i].price;\r\n }\r\n\r\n mean = calculateMean(sum, count);\r\n\r\n var min = 0;\r\n if (awardTypeSelectedValue == 0) {\r\n const columnsAdded = [\r\n {\r\n Header: () => (\r\n \r\n \r\n
\r\n ));\r\n }\r\n }\r\n };\r\n\r\n const ShowPlotQuestion = () => {\r\n setIsOpenChartType(true);\r\n };\r\n\r\n function calculateMean(sum, count) {\r\n return (sum / count).toFixed(3);\r\n }\r\n\r\n const ShowPlot = () => {\r\n setPlotMinValLin(null);\r\n setPlotMaxValLin(null);\r\n setPlotMinValLog(null);\r\n setPlotMaxValLog(null);\r\n setPlotMinValYear(null);\r\n setPlotMaxValYear(null);\r\n var t = $(\"#chartType\").val();\r\n var arr = [];\r\n var data = awards;\r\n if (t == 2) {\r\n var _minYear = data.reduce(function (prev, curr) {\r\n return prev.year < curr.year ? prev : curr;\r\n });\r\n\r\n var _minY = _minYear.year;\r\n for (var i = _minY; i < toDate; i++) {\r\n var item = new Object();\r\n item.year = i;\r\n item.price = null;\r\n item.countryName = \"\";\r\n item.band = \"\";\r\n arr.push(item);\r\n }\r\n data = data.sort((a, b) =>\r\n parseFloat(a.year) > parseFloat(b.year) ? 1 : -1\r\n );\r\n } else if (t == 0 || t == 1) {\r\n data = data.sort((a, b) =>\r\n parseInt(a.band) > parseInt(b.band) ? 1 : -1\r\n );\r\n } else if (t == 2) {\r\n for (var i = 0; i < bandOptionsList.length; i++) {\r\n var item = new Object();\r\n item.year = null;\r\n item.price = null;\r\n item.countryName = \"\";\r\n item.band = bandOptionsList[i].value;\r\n arr.push(item);\r\n }\r\n }\r\n\r\n data.map((val, i) => {\r\n var count = getBandsCount(val.band);\r\n var item = new Object();\r\n item.year = val.year.toString();\r\n item.price = parseFloat(val.price.toFixed(3));\r\n item.countryName = val.countryName;\r\n item.band = val.band;\r\n item.bandCount = val.band + \" (\" + count + \")\";\r\n arr.push(item);\r\n });\r\n setYearPriceArr(arr);\r\n\r\n hideModal();\r\n setTrendTypeValue(t);\r\n if (t == 0) setIsOpenLin(true);\r\n else if (t == 1) setIsOpenLog(true);\r\n else if (t == 2) setIsOpen(true);\r\n };\r\n\r\n function getBandsCount(band) {\r\n var count = 0;\r\n awards.map(function (val) {\r\n if (val.band == band) {\r\n count++;\r\n }\r\n });\r\n\r\n return count;\r\n }\r\n\r\n function customizeTooltip(pointInfo) {\r\n var txt =\r\n pointInfo.point.data.countryName +\r\n \"-\" +\r\n pointInfo.point.data.band +\r\n \"-\" +\r\n \"(\" +\r\n pointInfo.point.data.year +\r\n \")\" +\r\n \" \" +\r\n pointInfo.point.data.price.toString();\r\n return { text: txt };\r\n }\r\n\r\n const firstTable = useTable(\r\n {\r\n columns,\r\n data: awards,\r\n initialState: {\r\n hiddenColumns: columns.map((column) => {\r\n if (column.show === false) return column.accessor || column.id;\r\n }),\r\n },\r\n },\r\n useSortBy,\r\n usePagination\r\n );\r\n\r\n const {\r\n getTableProps: getFirstTableProps,\r\n getTableBodyProps: getFirstTableBodyProps,\r\n headerGroups: firstHeaderGroups,\r\n page: firstPage,\r\n nextPage: firstNextPage,\r\n previousPage: firstPreviousPage,\r\n canNextPage: firstCanNextPage,\r\n canPreviousPage: firstCanPreviousPage,\r\n pageOptions: firstPageOptions,\r\n gotoPage: firstGotoPage,\r\n pageCount: firstPageCount,\r\n setPageSize: firstSetPageSize,\r\n state: firstState,\r\n prepareRow: firstPrepareRow,\r\n } = firstTable;\r\n\r\n const { pageIndex, pageSize } = firstState;\r\n\r\n const fileType =\r\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8\";\r\n const fileExtension = \".xlsx\";\r\n\r\n const exportToCSV = (csvData, fileName) => {\r\n var result = [];\r\n if ($(\"#showResults\").val() == \"0\") {\r\n csvData.map((val, i) => {\r\n var item = new Object();\r\n item.Country = val.countryName;\r\n item[\"Pop,M\"] = displayPop(val.pop, getIMF());\r\n item[\"GDPc, $\"] =\r\n val.gdp == 0 || val.gdp == null ? \"\" : val.gdp.toFixed(0);\r\n item.Operator = val.operatorName;\r\n item.Date = val.year;\r\n item[\"Price, $M\t\"] = val.upFrontFees;\r\n item[\"Term (Y)\"] = val.terms;\r\n item.Band = val.band;\r\n item[myHeader] = val.price.toFixed(3);\r\n\r\n result.push(item);\r\n });\r\n } else {\r\n csvData.map((val, i) => {\r\n var item = new Object();\r\n item.Country = val.countryName;\r\n item[\"Pop,M\"] = displayPop(val.pop, getIMF());\r\n item[\"GDPc, $\"] =\r\n val.gdp == 0 || val.gdp == null ? \"\" : val.gdp.toFixed(0);\r\n item.Date = val.year;\r\n item[\"Term (Y)\"] = val.terms;\r\n item.Band = val.band;\r\n item[myHeader] = val.price;\r\n result.push(item);\r\n });\r\n }\r\n\r\n const ws = XLSX.utils.json_to_sheet(result);\r\n const wb = { Sheets: { data: ws }, SheetNames: [\"data\"] };\r\n const excelBuffer = XLSX.write(wb, { bookType: \"xlsx\", type: \"array\" });\r\n const data = new Blob([excelBuffer], { type: fileType });\r\n FileSaver.saveAs(data, fileName + fileExtension);\r\n };\r\n\r\n function inputNumberCheck(e) {\r\n if (e.which == 69 || e.which == 187 || e.which == 189 || e.which == 109) {\r\n e.preventDefault();\r\n }\r\n }\r\n\r\n function saveYScaleValuesLin() {\r\n let newMinVal = parseFloat($(\"#yScaleMinValLin\").val());\r\n let newMaxVal = parseFloat($(\"#yScaleMaxValLin\").val());\r\n if (newMinVal < newMaxVal) {\r\n setPlotMinValLin(newMinVal);\r\n setPlotMaxValLin(newMaxVal);\r\n setPlotMinValLinErr(false);\r\n setPlotMaxValLinErr(false);\r\n } else {\r\n if (newMinVal == \"\" || isNaN(newMinVal)) {\r\n setPlotMinValLinErr(true);\r\n } else {\r\n if (newMinVal >= newMaxVal) {\r\n setPlotMinValLinErr(true);\r\n } else {\r\n setPlotMinValLinErr(false);\r\n }\r\n }\r\n if (newMaxVal == \"\" || isNaN(newMaxVal)) {\r\n setPlotMaxValLinErr(true);\r\n } else {\r\n setPlotMaxValLinErr(false);\r\n }\r\n }\r\n }\r\n\r\n function saveYScaleValuesLog() {\r\n let newMinVal = parseFloat($(\"#yScaleMinValLog\").val());\r\n let newMaxVal = parseFloat($(\"#yScaleMaxValLog\").val());\r\n if (newMinVal < newMaxVal) {\r\n setPlotMinValLog(newMinVal);\r\n setPlotMaxValLog(newMaxVal);\r\n setPlotMinValLogErr(false);\r\n setPlotMaxValLogErr(false);\r\n } else {\r\n if (newMinVal == \"\" || isNaN(newMinVal)) {\r\n setPlotMinValLogErr(true);\r\n } else {\r\n if (newMinVal >= newMaxVal) {\r\n setPlotMinValLogErr(true);\r\n } else {\r\n setPlotMinValLogErr(false);\r\n }\r\n }\r\n if (newMaxVal == \"\" || isNaN(newMaxVal)) {\r\n setPlotMaxValLogErr(true);\r\n } else {\r\n setPlotMaxValLogErr(false);\r\n }\r\n }\r\n }\r\n\r\n function saveYScaleValuesYear() {\r\n let newMinVal = parseFloat($(\"#yScaleMinValYear\").val());\r\n let newMaxVal = parseFloat($(\"#yScaleMaxValYear\").val());\r\n if (newMinVal < newMaxVal) {\r\n setPlotMinValYear(parseFloat(newMinVal));\r\n setPlotMaxValYear(parseFloat(newMaxVal));\r\n setPlotMinValYearErr(false);\r\n setPlotMaxValYearErr(false);\r\n } else {\r\n if (newMinVal == \"\" || isNaN(newMinVal)) {\r\n setPlotMinValYearErr(true);\r\n } else {\r\n if (newMinVal >= newMaxVal) {\r\n setPlotMinValYearErr(true);\r\n } else {\r\n setPlotMinValYearErr(false);\r\n }\r\n }\r\n if (newMaxVal == \"\" || isNaN(newMaxVal)) {\r\n setPlotMaxValYearErr(true);\r\n } else {\r\n setPlotMaxValYearErr(false);\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n selectAllBands(e.target.id)}\r\n >\r\n
\r\n {/* Adjustments */}\r\n \r\n \r\n {/* License Certifications */}\r\n {\r\n checkIfCanOpen(e.target.id);\r\n }}\r\n >\r\n
\r\n {/* Band Selection */}\r\n \r\n {/* Term */}\r\n
\r\n {/* Include Awards */}\r\n \r\n \r\n
\r\n {/* Issue date */}\r\n \r\n \r\n
\r\n\r\n {/* Discount rate */}\r\n \r\n \r\n
\r\n \r\n
\r\n {/* Country Selection */}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {renderCountries()}\r\n
\r\n \r\n {renderBands()}\r\n
\r\n \r\n
\r\n {/* Anaysis */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {/* side menu */}\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {firstHeaderGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {/* \r\n {\" \"}\r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" ↓\"\r\n : \" ↑\"\r\n : \"\"}{\" \"}\r\n */}\r\n {column.render(\"Header\")}\r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {firstPage.map((row, i) => {\r\n firstPrepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {\" \"}\r\n {getValue(\"Trends\", getLang())}\r\n \r\n
\r\n \r\n \r\n 0}\r\n onClick={() => ShowPlotQuestion()}\r\n class={\r\n awards.length > 0\r\n ? \"btn chart-btn-color\"\r\n : \"btn\"\r\n }\r\n >\r\n \r\n \r\n 0}\r\n class={\r\n awards.length > 0\r\n ? \"btn chart-btn-color\"\r\n : \"btn\"\r\n }\r\n onClick={(e) => setIsOpen3(true)}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {getValue(\"Page\", getLang())}{\" \"}\r\n \r\n {firstPageOptions.length !== 0 ? pageIndex + 1 : 0}{\" \"}\r\n {getValue(\"Of\", getLang())}{\" \"}\r\n {firstPageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | {getValue(\"GoToPage\", getLang())}\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n firstGotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n firstGotoPage(0)}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n firstPreviousPage()}\r\n disabled={!firstCanPreviousPage}\r\n >\r\n {getValue(\"Previous\", getLang())}\r\n \r\n firstNextPage()}\r\n disabled={!firstCanNextPage}\r\n >\r\n {getValue(\"Next\", getLang())}\r\n \r\n firstGotoPage(firstPageCount - 1)}\r\n disabled={!firstCanNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n \r\n {/*
\r\n \r\n
*/}\r\n {getValue(\"YearPlotTitle\", getLang())}
\r\n\r\n \r\n inputNumberCheck(e)}\r\n />\r\n \r\n inputNumberCheck(e)}\r\n />\r\n saveYScaleValuesYear()}\r\n className=\"btn btn-primary background-color-2 input-chart-btn me-2\"\r\n >\r\n {getValue(\"Refresh\", getLang())}\r\n \r\n
\r\n \r\n {/*
\r\n \r\n
*/}\r\n {getValue(\"BandPlotTitle\", getLang())}
\r\n\r\n \r\n inputNumberCheck(e)}\r\n />\r\n \r\n inputNumberCheck(e)}\r\n />\r\n saveYScaleValuesLin()}\r\n className=\"btn btn-primary background-color-2 input-chart-btn me-2\"\r\n >\r\n {getValue(\"Refresh\", getLang())}\r\n \r\n
\r\n \r\n {/*
\r\n \r\n
*/}\r\n {getValue(\"LogPlotTitle\", getLang())}
\r\n\r\n \r\n inputNumberCheck(e)}\r\n />\r\n \r\n inputNumberCheck(e)}\r\n />\r\n saveYScaleValuesLog()}\r\n className=\"btn btn-primary background-color-2 input-chart-btn me-2\"\r\n >\r\n {getValue(\"Refresh\", getLang())}\r\n \r\n
\r\n \r\n \r\n
\r\n - \r\n
\r\n {renderCountries2()}\r\n
\r\n \r\n \r\n
\r\n ));\r\n }\r\n }\r\n };\r\n\r\n const getCheckedCountry = (id) => {\r\n var checked = false;\r\n var allData = options;\r\n if (allData.length > 0) {\r\n var obj = allData.filter((item) => {\r\n if (item.value == id) {\r\n return item;\r\n }\r\n });\r\n\r\n checked = obj[0].isChecked;\r\n }\r\n return checked;\r\n };\r\n\r\n const setCountryChecked = (id, isChecked) => {\r\n var data = options;\r\n var item = data.filter((item) => item.value == id);\r\n var itemIndex = data.indexOf(item[0]);\r\n data = data.filter((item) => item.value != id);\r\n data.splice(itemIndex, 0, {\r\n value: id,\r\n isChecked: isChecked,\r\n label: item[0].label,\r\n });\r\n\r\n setoptions(data);\r\n var lstChecked = data.filter((x) => x.checked == true).length;\r\n var lst = options.length;\r\n var value = lstChecked == lst ? true : false;\r\n setCheckAll(value);\r\n };\r\n\r\n const setDisplay = () => {\r\n setShowDisplay2(!showDisplay);\r\n setIconClass(\r\n !showDisplay == true\r\n ? \"spectre-angle-up btn btn-primary background-color-2 color-white mr-2\"\r\n : \"spectre-angle-down btn btn-primary background-color-2 color-white mr-2\"\r\n );\r\n setShowTxt(\r\n !showDisplay == true\r\n ? getValue(\"ShowLess\", getLang())\r\n : getValue(\"ShowMore\", getLang())\r\n );\r\n };\r\n\r\n const setFilterOption = (val) => {\r\n setColumns([]);\r\n setAwards([]);\r\n document.getElementById(\"data-table-div\").style.display = \"contents\";\r\n if (val == 1) {\r\n setFilterOptionByIndicator(true);\r\n setFilterOptionByCountry(false);\r\n setFilterOptionByYear(false);\r\n } else {\r\n if (val == 2) {\r\n setFilterOptionByIndicator(false);\r\n setFilterOptionByCountry(true);\r\n setFilterOptionByYear(false);\r\n } else {\r\n setFilterOptionByIndicator(false);\r\n setFilterOptionByCountry(false);\r\n setFilterOptionByYear(true);\r\n }\r\n }\r\n };\r\n\r\n const renderIndicators = () => {\r\n if (indicators != null && indicators.length > 0) {\r\n {\r\n return indicators.map((val, idx) => (\r\n \r\n ));\r\n }\r\n }\r\n };\r\n\r\n const renderValuatedCountries = () => {\r\n var countries = options;\r\n if (countries != null && countries.length > 0) {\r\n {\r\n return countries.map((val, idx) => (\r\n \r\n ));\r\n }\r\n }\r\n };\r\n\r\n function renderDate() {\r\n var now = new Date().getFullYear();\r\n var arr_years = [];\r\n for (var i = now; i >= 1985; i--) {\r\n arr_years.push(i);\r\n }\r\n return arr_years.map((val, idx) => );\r\n }\r\n\r\n return (\r\n \r\n \r\n {renderCountries()}\r\n
\r\n \r\n \r\n {/* Filtering */}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {/* Country Selection */}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {/* Filter Actions */}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* side menu */}\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {/* Main Table */}\r\n \r\n \r\n
\r\n \r\n
\r\n 0\r\n ? \"\"\r\n : \"none\",\r\n }}\r\n className=\"row\"\r\n >\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {getValue(\"SocialData\", getLang())}\r\n \r\n \r\n setIsOpen3(true)}\r\n >\r\n \r\n \r\n
\r\n \r\n
\r\n {$(\"#indicator option:selected\").text()},{\" \"}\r\n {getIMF() == \"true\" ? \"IMF\" : \"WB\"}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map(\r\n (column) => (\r\n \r\n {/* \r\n {\" \"}\r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" ↓\"\r\n : \" ↑\"\r\n : \"\"}{\" \"}\r\n */}\r\n {column.render(\"Header\")}{\" \"}\r\n \r\n )\r\n )}\r\n \r\n ))}\r\n \r\n \r\n {page.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {getValue(\"Page\", getLang())}{\" \"}\r\n \r\n {pageOptions.length !== 0\r\n ? pageIndex + 1\r\n : 0}{\" \"}\r\n {getValue(\"Of\", getLang())}{\" \"}\r\n {pageOptions.length}\r\n {\" \"}\r\n \r\n \r\n | {getValue(\"GoToPage\", getLang())}:\r\n {\r\n const pageNumber = e.target.value\r\n ? Number(e.target.value) - 1\r\n : 0;\r\n gotoPage(pageNumber);\r\n }}\r\n style={{\r\n width: \"50px\",\r\n height: \"25px\",\r\n borderBottom: 0,\r\n }}\r\n className=\"cstm-input ml-1\"\r\n />\r\n \r\n
\r\n \r\n gotoPage(0)}\r\n disabled={!canPreviousPage}\r\n >\r\n {\"<<\"}\r\n \r\n previousPage()}\r\n disabled={!canPreviousPage}\r\n >\r\n {getValue(\"Previous\", getLang())}\r\n \r\n nextPage()}\r\n disabled={!canNextPage}\r\n >\r\n {getValue(\"Next\", getLang())}\r\n \r\n \r\n gotoPage(pageCount - 1)\r\n }\r\n disabled={!canNextPage}\r\n >\r\n {\">>\"}\r\n \r\n
\r\n - \r\n
\r\n Marked As Viewed\r\n
\r\n ),\r\n accessor: \"viewed\",\r\n Cell: (props) => {\r\n const rowIdx = props.row.id;\r\n if (props.row.original.isViewed == null || props.row.original.isViewed == false) {\r\n return (\r\n \r\n setAsViewed(props.row.original.id)}\r\n className=\" btn btn-dark-blue btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n }\r\n else {\r\n return ('')\r\n }\r\n },\r\n width: 10,\r\n },\r\n {\r\n Header: \"Actions\",\r\n accessor: \"actions\",\r\n Cell: (props) => {\r\n const rowIdx = props.row.id;\r\n return (\r\n \r\n openRegistration(props.row.original.id)}\r\n className=\" btn btn-primary btn-xs\"\r\n >\r\n \r\n \r\n deleteRegistration(props.row.original.id, rowIdx)}\r\n className=\"btn btn-danger btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =\r\n useTable(\r\n {\r\n columns,\r\n data: registrations,\r\n },\r\n useSortBy\r\n );\r\n return (\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nexport default CustomerRegistrations;","import React, { useState, useEffect, useMemo, useRef, Component } from \"react\";\r\nimport APIFunctions from \"../utils/APIFunctions\";\r\nimport { getLang, BindImageURL } from \"../utils/common\";\r\nimport { AlertError, AlertSuccess, AlertConfirm, LoadingAlert } from \"./f_Alerts\";\r\nimport Select from \"react-select\";\r\nimport { Form } from \"react-bootstrap\";\r\nimport { Steps } from 'rsuite';\r\nimport 'bs-stepper/dist/css/bs-stepper.min.css';\r\nimport Stepper from 'bs-stepper';\r\nimport 'bs-stepper/dist/css/bs-stepper.min.css';\r\nimport '../css/CustomStyle.css';\r\nimport $, { event } from 'jquery';\r\nimport dateFormat from \"dateformat\";\r\nimport { MultiSelect } from \"react-multi-select-component\";\r\nimport { validateEmail } from '../utils/common.js';\r\nimport { useTable, useSortBy } from \"react-table\";\r\nimport Modal from \"react-bootstrap/Modal\";\r\n\r\n\r\nconst EditPreRegistration = (props) => {\r\n\r\n\r\n var stepper = null;\r\n\r\n const _users = [];\r\n const myUser = {\r\n id: 0,\r\n name: '',\r\n email: '',\r\n userName: '',\r\n password: '',\r\n }\r\n\r\n const myPreRegistration = {\r\n id: 0,\r\n name: \"\",\r\n email: \"\",\r\n phoneNumber: \"\",\r\n companyName: \"\",\r\n message: \"\",\r\n preferredPackage: 0,\r\n isDeleted: false,\r\n isViewed: false,\r\n creationDate: null\r\n };\r\n\r\n const myCompany = {\r\n id: 0,\r\n name: \"\",\r\n email: \"\",\r\n phoneNumber: \"\",\r\n isDeleted: false,\r\n logo: ''\r\n };\r\n\r\n const myCompanyPackage = {\r\n id: 0,\r\n packageId: 0,\r\n companyId: 0,\r\n startDate: null,\r\n endDate: null,\r\n price: '',\r\n currency: '',\r\n numberOfUsers: '',\r\n isActive: true,\r\n isDeleted: false\r\n };\r\n\r\n const [user, setUser] = useState([]);\r\n const [userArr, setTheArray] = useState([]);\r\n const [tblData, setTableDats] = useState([]);\r\n const [preRegistration, setPreRegistration] = useState(myPreRegistration);\r\n const [company, setCompany] = useState(myCompany);\r\n const [displayStep1, setDisplayStep1] = useState(true);\r\n const [resultPackage, setResultPackage] = useState([]);\r\n const [packagePermissions, setPackagePermissions] = useState([]);\r\n const [currencyResult, setCurrencyResult] = useState([]);\r\n const [resultCountry, emplistCountry] = useState([]);\r\n const [options, setoptions] = useState([]);\r\n const [selected, setSelected] = useState([]);\r\n const [companyPackage, setCompanyPackage] = useState(myCompanyPackage);\r\n const [userPackagePermissions, setUserPackagePermissions] = useState([]);\r\n const [save, setSave] = useState(\"Save\");\r\n const [saveTxt, setSaveTxt] = useState(\"Save\");\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [isOpen2, setIsOpen2] = useState(false);\r\n const [title, setTitle] = React.useState(\"Users\");\r\n const [errorUsers, setErrorUsers] = React.useState([]);\r\n\r\n const [image, setImage] = useState('');\r\n const [displayView, setDisplayView] = useState(false);\r\n\r\n useEffect(() => {\r\n stepper = new Stepper(document.querySelector('#stepper1'), {\r\n linear: false,\r\n animation: true\r\n });\r\n $('#test-l-1').removeClass('dstepper-none');\r\n }, []);\r\n\r\n useEffect(() => {\r\n APIFunctions.getAllCountries()\r\n .then((resp) => resp)\r\n .then((resp) => bindOptions(resp.data));\r\n }, []);\r\n\r\n const bindOptions = (data) => {\r\n var arr = [];\r\n for (var i = 0, l = data.length; i < l; i++) {\r\n var ob = new Object();\r\n ob.label = data[i].nameEn;\r\n ob.value = data[i].countryId;\r\n arr.push(ob);\r\n }\r\n setoptions(arr);\r\n };\r\n\r\n const onFileChange2 = (event) => {\r\n\r\n if (event.target.files.length == 0) {\r\n return;\r\n }\r\n LoadingAlert(\"Show\");\r\n const formData = new FormData();\r\n formData.append(\r\n \"file\",\r\n event.target.files[0]\r\n );\r\n\r\n APIFunctions.uploadMedia(formData)\r\n .then((response) => {\r\n var obj = company;\r\n obj.logo = response.data;\r\n setImage(response.data);\r\n setDisplayView(true);\r\n setCompany(obj);\r\n LoadingAlert(\"hide\");\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n LoadingAlert(\"hide\");\r\n });\r\n }\r\n\r\n\r\n\r\n const setNumberOfUsers = (e) => {\r\n setCompanyPackage({ ...companyPackage, numberOfUsers: e.target.value, });\r\n\r\n }\r\n\r\n const viewResource = () => {\r\n var img = BindImageURL(image);\r\n window.open(img);\r\n }\r\n\r\n\r\n function Table({ columns, data }) {\r\n // Use the state and functions returned from useTable to build your UI\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n rows,\r\n prepareRow,\r\n } = useTable({\r\n columns,\r\n data,\r\n })\r\n\r\n // Render the UI for your table\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Company Registrations
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n \r\n {headerGroup.headers.map((column) => (\r\n \r\n {column.render(\"Header\")}{\" \"}\r\n \r\n {column.isSorted\r\n ? column.isSortedDesc\r\n ? \" 🔽\"\r\n : \" 🔼\"\r\n : \"\"}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n \r\n {rows.map((row, i) => {\r\n prepareRow(row);\r\n return (\r\n \r\n {row.cells.map((cell) => {\r\n return (\r\n \r\n {cell.render(\"Cell\")}\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n | {column.render('Header')} | \r\n ))}\r\n
|---|
| {cell.render('Cell')} | \r\n })}\r\n
\r\n _delete(rowIdx)}\r\n className=\" btn btn-danger btn-xs\"\r\n >\r\n \r\n \r\n
\r\n );\r\n },\r\n },\r\n ],\r\n []\r\n );\r\n\r\n const data = React.useMemo(() => userArr, [])\r\n const _columns = React.useMemo(() => columns, []);\r\n\r\n const renderHtml = () => {\r\n\r\n if (props.match.params.id != 0) {\r\n return (\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n