\r\n {item.category} \r\n \r\n
\r\n {item.category}\r\n \r\n \r\n {selectedItem?.checked ? (\r\n
\r\n {modal && loading && \r\n \r\n \r\n \r\n {renderCheckboxes(getBoundariesData)}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\nexport default React.memo(MapPreferences);\r\nMapPreferences.propTypes = {\r\n // eslint-disable-next-line react/no-typos\r\n isToggle: PropTypes.bool,\r\n productModalData: PropTypes.object,\r\n handleToggle: PropTypes.func,\r\n Map_Preferences: PropTypes.object,\r\n handleRenderingList: PropTypes.func,\r\n handleCheckBoxRenderingList: PropTypes.func,\r\n renderingList: PropTypes.object,\r\n handleShow: PropTypes.func,\r\n};\r\n","import React, { lazy, Suspense, useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n getDmsEventsRequest,\n getDmsNewsfeedRequest,\n getDmsPillarsRequest,\n getDmsStatisticsRequest,\n getDmsTestimonialsRequest,\n} from '../../redux/home/homeActions';\n\nimport { NEWS_FEED_URL_CONSTANT } from '../../Components/constants';\n\nconst ContactUs = lazy(() => import('./ContactUs'));\nconst ContentSection = lazy(() => import('./ContentSection'));\nconst Footer = lazy(() => import('./Footer'));\nconst HeroSection = lazy(() => import('../../Components/common/HeroSection'));\nconst MaximizingImpact = lazy(() => import('./MaximizingImpact'));\nconst NewsCarousel = lazy(() => import('./NewsCarousel'));\nconst Pillars = lazy(() => import('./RiskManagement'));\nconst SourceSection = lazy(() => import('./SourceSection'));\nconst Testimonials = lazy(() => import('./Testimonials'));\nconst WhatWeOffer = lazy(() => import('./WhatWeOfferSection'));\nconst VideoSection = lazy(() => import('./VideoSection'));\n\nfunction HomePage() {\n const dispatch = useDispatch();\n const [statisticsData, setStatisticsData] = useState([]);\n const [testimonialsData, setTestimonialsData] = useState([]);\n const [upcomingEventsData, setUpcomingEventsData] = useState([]);\n const [newsfeedData, setNewsfeedData] = useState([]);\n const [pillarsData, setPillarsData] = useState([]);\n const [reportsData, setReportsData] = useState([]);\n const [blogsData, setBlogsData] = useState([]);\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n useEffect(() => {\n dispatch(getDmsStatisticsRequest());\n dispatch(getDmsTestimonialsRequest());\n dispatch(getDmsEventsRequest({ event_type: 'upcoming' }));\n dispatch(getDmsNewsfeedRequest({ category: 'south-asia', limit: 10 }));\n dispatch(getDmsPillarsRequest());\n const axios = require('axios');\n\n // Publications\n const fetchPublications = async () => {\n try {\n const response = await axios.get(NEWS_FEED_URL_CONSTANT.RESOURCE_URL);\n const data = response.data.items;\n setReportsData(data);\n } catch (err) {\n setReportsData([]);\n }\n };\n\n fetchPublications();\n\n const fetchBlogs = async () => {\n try {\n const response = await axios.get(NEWS_FEED_URL_CONSTANT.BLOGS_URL);\n const data = response.data.items;\n setBlogsData(data);\n } catch (err) {\n setBlogsData([]);\n }\n };\n\n fetchBlogs();\n\n const countryData = JSON.stringify({});\n localStorage.setItem('countryData', countryData);\n localStorage.setItem('selectedCountry', JSON.stringify(''));\n // window.scrollTo(0, 0);\n }, []);\n\n useEffect(() => {\n if (LandingPageData.getDmsStatisticsData) {\n const { result } = LandingPageData.getDmsStatisticsData.data;\n setStatisticsData(result);\n }\n }, [LandingPageData.getDmsStatisticsData]);\n\n useEffect(() => {\n if (LandingPageData.getDmsTestimonialsData) {\n const { result } = LandingPageData.getDmsTestimonialsData.data;\n setTestimonialsData(result);\n }\n }, [LandingPageData.getDmsTestimonialsData]);\n\n useEffect(() => {\n if (LandingPageData.getDmsEventsData) {\n const { result } = LandingPageData.getDmsEventsData.data;\n setUpcomingEventsData(result);\n }\n }, [LandingPageData.getDmsEventsData]);\n\n useEffect(() => {\n if (LandingPageData.getDmsNewsfeedData) {\n const { result } = LandingPageData.getDmsNewsfeedData.data;\n if (result?.items?.length) {\n setNewsfeedData(result?.items);\n }\n }\n }, [LandingPageData.getDmsNewsfeedData]);\n\n useEffect(() => {\n if (LandingPageData.getDmsPillarsData) {\n const { result } = LandingPageData.getDmsPillarsData.data;\n setPillarsData(result);\n }\n }, [LandingPageData.getDmsPillarsData]);\n\n return (\n \r\n {t('WEATHER_FORECAST.MAP_PREFERENCES.HEADER.TITLE')}
\r\n \r\n {t('WEATHER_FORECAST.MAP_PREFERENCES.HEADER.SUB_TITLE')}\r\n \r\n
\r\n
\n
\n );\n}\n\nexport default NewsEvents;\n","import classnames from 'classnames';\nimport React, { useEffect, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Col, Container, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap';\n\nimport Breadcrumb from '../../../Components/common/BreadCrumbsComponent';\nimport { getDmsPartnersDonorsRequest } from '../../../redux/home/homeActions';\nimport Footer from '../Footer';\n\nconst PartnersAndDonors = () => {\n const dispatch = useDispatch();\n const [investmentPartners, setInvestmentPartners] = useState([]);\n const [researchPartners, setResearchPartners] = useState([]);\n const [supportPartners, setSupportPartners] = useState([]);\n const [activeTab, setActiveTab] = useState('investment_partners');\n\n const toggle = tab => {\n if (activeTab !== tab) setActiveTab(tab);\n };\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n useEffect(() => {\n dispatch(getDmsPartnersDonorsRequest());\n }, [dispatch]);\n\n useEffect(() => {\n if (LandingPageData.getDmsPartnersDonorsData) {\n const { result } = LandingPageData.getDmsPartnersDonorsData.data;\n if (result?.length) {\n const { investmentPartners, researchPartners, supportPartners } = result.reduce(\n (acc, item) => {\n if (item.category === 'Investment Partners') {\n acc.investmentPartners.push(item);\n } else if (item.category === 'Research Partners') {\n acc.researchPartners.push(item);\n } else if (item.category === 'Support partners') {\n acc.supportPartners.push(item);\n }\n return acc;\n },\n { investmentPartners: [], researchPartners: [], supportPartners: [] },\n );\n\n setInvestmentPartners(investmentPartners);\n setResearchPartners(researchPartners);\n setSupportPartners(supportPartners);\n }\n }\n }, [LandingPageData.getDmsPartnersDonorsData]);\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n
\n );\n};\n\nexport default PartnersAndDonors;\n","import React from 'react';\nimport { Container, Row, Col } from 'reactstrap';\nimport StarIcon from '../../../assets/Images/star_icon.png';\nimport HandIcon from '../../../assets/Images/hand_icon.png';\nimport './Achievements.css';\n\nconst Achievements = () => {\n return (\n \n
\n {t('LANDING_PAGE.PARTNER_MAIN_HEADER')}
\n{t('LANDING_PAGE.PARTNER_SUB_HEADER')}
\n\n
\n {t('LANDING_PAGE.PARTNERS_DONORS_DESC')}
\n- \n {investmentPartners?.map(investment => (\n
- {investment.name} \n ))}\n
- \n {researchPartners?.map(research => (\n
- {research.name} \n ))}\n
- \n {supportPartners?.map(research => (\n
- {research.name} \n ))}\n
\n \n \n
\n \n
\n \n
\n );\n};\n\nexport default Achievements;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAYAAABXuSs3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHBSURBVHgB7ZqLbcIwEIaPTsAI6QbpBrABnYCO0A3aTWgnaDcIG9ANTCegG/y9K+cSQRL8iEMs5ZNOIOLHh4GzHUOUCACFBOWEShuNgnKARUuOA06IfEljpkHachitfIf0eOUdpMcn7yHdq/yMuqVAN2TGtF27o0yZxIdmEh+alOI/GklIKf7J8U6JSJnH7znmHDsKJCiPR85uW+5zz/ElzykQb4eAafycda2tBcJxXx70IG0a2oxp77p8pLTUM6iNdq3dZ70W03bZh7TB8SsgdQryBMetXaltGMc+L+Vx2iP6sEPEfpLrzrUNHw7/fQZKWwzCR9wgDCP1YyeggqOCR9rSspXWjUNHIPaXv3boZ4XIjAX9hP9GXCYLflhS+NpCZsgHh3ILLRuCuD2q62nm1FkuRr5yKLOlMMRpqY7NIDyXXx1JHDOJL0lnz91ZffnNVBwfOMs68Msm/ncEVN6VTW1EXxquy2tzLfMGd1ql+1rWPnF8c8gbKFrK7Dletc8NOdC1rO1LfE/ueVk2GCuXgkOIJ2G6ITQmJvGhmcSzAze6sd8LyPEoxYIcD68syPG40KLyJitpC3I8Ercg8Z8QfgEOS8r3fhRGhQAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAwCAYAAAB5R9gVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHlSURBVHgB7ZiLccIwDIYF1wEYId0gI9BROkG7AekEhQmgk4ROwHWCZAPYQJWC7wjGDzm2E7jjuzPkodh/JFt2DDAARFxROaryDVPCAvCWCqZCeUXnCLnwhQMthNYjFeMNh0QQpgorCsIhFDQ4rDO9MaMRkdrGxhzujKegPt6RKOywqWyMI3GyTq1G3UIzOU0pyGjzop1/gR+JzWC8eWEIMR7KNcpOwms3XIWMRHMnK6ksQcaeXnpvuL6hstKu/UAIJOYDzXOQj1q9iF7fGi85pjLct6cGPCeoGCoIBG0TMP0UGE/wAo1fwlDPmm/sMAFaY1sqZe98iecofGp2t2HFYf1Gp+41UjrsuK3C5Tke9guIp58sS4cdt1U7RWGkZ6gstfoa4bNbNITVJ6hBj4s1MSuMxCeoGlMMqmHfOAz4XuEQwSmDE+oB01Dz1NFSsTXK1xs0z4M5+ONR9gv3Qz3D8zyU71NYTksT9eucfnhZsIfp6VYD3YJJddwDpEmSQ2ipvJFz2m6BxgeQeWnqoVIarkHzDJybtVPqyKJ2IGEkUUbPzByiCvrjZUUBGbDthMwdD3R5gQ7fYURE32XsX0hMsIem4inIx1OQj4cVJNq5CMBan1TQBtISthNiAi+fvTEYd0L6/AO0lBNE9oWcYAAAAABJRU5ErkJggg==\"","export default __webpack_public_path__ + \"static/media/journey-timeline-icon.74522bd5.svg\";","export default __webpack_public_path__ + \"static/media/2014_image.6f795b72.png\";","export default __webpack_public_path__ + \"static/media/2019_image.11913ee4.png\";","export default __webpack_public_path__ + \"static/media/2022_image.cb606873.png\";","export default __webpack_public_path__ + \"static/media/2023_image.9b7641ef.png\";","import React from 'react';\nimport { Chrono } from 'react-chrono';\nimport JourneyIcon from '../../../assets/Images/journey-timeline-icon.svg';\nimport Image2014 from '../../../assets/Images/2014_image.png';\nimport Image2019 from '../../../assets/Images/2019_image.png';\nimport Image2022 from '../../../assets/Images/2022_image.png';\nimport Image2023 from '../../../assets/Images/2023_image.png';\nimport './Ourjourney.css'; // Import the CSS file\n\nconst Ourjourney = () => {\n const items = [\n {\n title: 2004,\n cardTitle:\n 'IWMI develops the Southwest Asia Drought monitor to provide drought monitoring and earlAy warning information for the region.',\n },\n {\n title: (\n Key Achievements
\n \n\n 
\n
\n Geospatial World Excellence Award 2020
\n\n IWMI's SADMS received this prestigious award, recognizing its positive impact in\n mitigating drought.\n
\n \n\n 
\n
\n Empowering Decision-Makers
\n\n IWMI's tools and data have informed policies and interventions at various levels,\n helping to build resilience in drought-prone communities.\n
\n \n\n
\n ),\n cardTitle:\n 'IWMI launches the South Asia Drought Monitoring System (SADMS) portal through the Integrated Drought management Program (IDMP) and Indian Council of Agricultural Research (ICAR), a web-based platform providing access to operational drought-related information.',\n },\n {\n title: 2015,\n cardTitle:\n 'IWMI expands its drought management work to include the development of drought resilience plans, drought index insurance, and drought action plans.',\n },\n {\n title: 2015,\n cardTitle:\n 'IWMI partners with the CGIAR Research Program on Climate Change, Agriculture and Food Security (CCAFS) to launch the bundled climate smart solutions (BICSA), which aims to scale up the use of index insurance for drought risk management.',\n },\n {\n title: (\n \n 2019\n
\n ),\n cardTitle:\n 'IWMI launches the MENADrought program to promote integrated drought management efforts in Jordan, Morocco.',\n },\n {\n title: 2020,\n cardTitle:\n 'IWMI partners with the World Bank to launch the Southern Africa Drought Resilience Initiative (SADRI), which aims to strengthen drought resilience in the region.',\n },\n {\n title: 2020s,\n cardTitle:\n 'IWMI received the Geospatial World Excellence Award for its innovative work using remote sensing technology to help nations monitor and mitigate the impacts of drought.',\n },\n {\n title: 2021,\n cardTitle:\n 'IWMI expands continental scale Africa drought monitoring information and evaluate the impact of drought to water, agriculture and nutritional risks with The Leona M. and Harry B. Helmsley Charitable Trust.',\n },\n {\n title: (\n \n 2022\n
\n ),\n cardTitle:\n 'IWMI launches next generation of SADMS platform to promote integrated end-to-end drought monitoring and management system for South Asia in collaboration with SAARC Disaster Management Center and supported by Indian Council of Agricultural Research (ICAR) and CGIAR initiatives on Nexus Gains.',\n },\n {\n title: (\n \n 2023\n 
\n
\n ),\n cardTitle:\n 'IWMI launches the CGIAR initiatives on Climate Resilience AWARE platform, a global platform in promoting anticipatory action mechanism to climate shocks such as drought, floods and landslides for timely early action.',\n },\n {\n title: 2023s,\n cardTitle:\n 'IWMI continues to advance its drought management work through the development of innovative tools and approaches, such as the use of artificial intelligence and machine learning for drought prediction and the integration of drought risk management into national policies and plans.',\n },\n ];\n\n return (\n \n
\n );\n};\n\nexport default Ourjourney;\n","import React, { useEffect } from 'react';\nimport './Firstsection.css';\nimport { Container, Row, Col, Card, CardBody } from 'reactstrap';\nimport Achievement from '../AboutUs/Achievemeents';\nimport Ourjourney from '../AboutUs/Ourjourney';\nimport Footer from '../Footer';\nimport Breadcrumb from '../../../Components/common/BreadCrumbsComponent';\n\nconst Firstsection = () => {\n useEffect(() => {\n window.scrollTo(0, 0);\n }, []);\n\n return (\n Our Journey
\n\n \n
\n \n {items.map(img => (\n
\n \n \n \n \n
\n {/* \n
\n );\n};\n\nexport default Firstsection;\n","export default __webpack_public_path__ + \"static/media/no-results-icon.f9e89543.svg\";","import React from 'react';\nimport { t } from 'react-multi-lang';\nimport { useHistory } from 'react-router-dom';\n\nimport { Card, CardBody, CardHeader, CardText } from 'reactstrap';\nimport NoResultIcon from '../../../assets/Images/no-results-icon.svg';\nimport { isLogedIn } from '../../../Components/common/utils';\n\nfunction ToolsData({ items, selectedCategory }) {\n const history = useHistory();\n // const [isExpanded, setIsExpanded] = useState(false);\n\n const handleOpenFile = (evt, data) => {\n evt.preventDefault();\n let result = data.country_slug;\n const countryData = JSON.stringify(data);\n localStorage.setItem('countryData', countryData);\n // localStorage.setItem('selectedCountry', JSON.stringify(result));\n\n if (data.file) {\n window.open(data.file, '_blank');\n } else {\n if (data.website_url) {\n if (data.website_url.includes('drougth-monitor')) {\n if (!isLogedIn()) {\n history.push({\n pathname: '/login',\n search: `?Country=${result}&prevPath=drought-monitor`,\n state: {\n countryData: data,\n },\n });\n } else {\n history.push({\n pathname: '/drought-monitor',\n search: `?Country=${result}`,\n state: {\n countryData: data,\n },\n });\n }\n } else {\n window.open(data.website_url, '_blank').focus();\n }\n } else {\n if (!isLogedIn()) {\n history.push({\n pathname: '/login',\n search: `?Country=${result}&prevPath=drought-management-system`,\n state: {\n countryData: data,\n },\n });\n } else {\n history.push({\n pathname: `/drought-management-system`,\n search: `?Country=${result}`,\n state: {\n countryData: data,\n },\n });\n }\n }\n }\n };\n\n // const toggleReadMore = event => {\n // event.stopPropagation(); // Prevents the card click event\n // setIsExpanded(!isExpanded);\n // };\n\n // // Limit description to 300 characters and append \"...\" when truncated\n // const truncateDescription = description => {\n // if (description.length > 300) {\n // return isExpanded ? description : `${description.slice(0, 300)}...`;\n // }\n // return description;\n // };\n\n return items?.length ? (\n items.map(item => {\n return selectedCategory === 'monitoring_early_warning' ? (\n \n Integrated Drought Management:{' '}\n IWMI and Partners in Action\n
\n\n IWMI has been at the forefront of drought management for over two decades, leveraging\n technology and data to mitigate the impact of drought in vulnerable regions.\n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
*/}\n Early Efforts (2004)
\n\n A prototype regional Drought Monitoring System (DMS) for South-West Asia was\n developed, showcasing the potential of remote sensing for drought assessment.\n
\nSouth Asia Drought Monitoring System (SADMS) (2014)
\n\n A major breakthrough, SADMS provided weekly maps of drought conditions across South\n Asia, enabling timely action at national, state, and district levels. This has\n significantly helped smallholder farmers in India and Sri Lanka cope with prolonged\n dry spells.\n
\nExpanding Impact
\n\n Beyond South Asia, IWMI's work has informed drought response systems in countries\n like Afghanistan, Morocco, Jordan, Zambia and several others. The institute has also\n partnered with the World Bank on the Next Generation Drought Index project, aiming\n to trigger financial responses to drought conditions in Senegal. Recently through\n the CGIAR initiatives on Nexus Gains, Climate Resilience, and Ukama Ustawi and The\n Leona M. and Harry B. Helmsley Charitable Trust expanded to more than 15 countries\n globally.\n
\nContinued Innovation
\n\n Today, IWMI continues to develop advanced drought indices and decision-support\n tools, utilizing technologies like satellite imagery, machine learning, and\n on-the-ground data collection for drought management efforts.\n
\n\n 
\n
\n );\n}\n\nexport default ToolsData;\n","import React, { useEffect, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Button, Col, Container, Row } from 'reactstrap';\n\nimport Breadcrumb from '../../../Components/common/BreadCrumbsComponent';\nimport { getDmsPillarsRequest } from '../../../redux/home/homeActions';\nimport Footer from '../Footer';\n// import Preparedness from './Preparedness';\nimport ToolsData from './ToolsData';\n\nconst ToolsManagement = () => {\n const dispatch = useDispatch();\n const URLParams = new URLSearchParams(window.location.search);\n const selectedTool = URLParams.get('selectedTool');\n const [selectedCategory, setSelectedCategory] = useState('monitoring_early_warning');\n const [pillarsData, setPillarsData] = useState([]);\n const [categoryData, setCategoryData] = useState([]);\n // const [selectedSubRiskMitigation, setSelectedSubMitigation] = useState('');4\n\n const contentData = {\n monitoring_early_warning: t('LANDING_PAGE.MONITORING_EARLY_WARNING_DESC'),\n risk_impact: t('LANDING_PAGE.RISK_IMPACT_DESC'),\n risk_mitigation: t('LANDING_PAGE.RISK_MITIGATION_DESC'),\n };\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n useEffect(() => {\n window.scrollTo(0, 0);\n dispatch(getDmsPillarsRequest());\n if (selectedTool === 'risk_mitigation') {\n setSelectedCategory(selectedTool);\n // const subTool = URLParams.get('selectedSubTool');\n // setSelectedSubMitigation(subTool || 'risk_mitigation_category');\n } else {\n setSelectedCategory(selectedTool || 'monitoring_early_warning');\n }\n }, [selectedTool]);\n\n // useEffect(() => {\n // window.scrollTo(0, 0);\n // if (locationData?.state) setSelectedCategory(locationData?.state?.selected);\n // }, [locationData]);\n\n useEffect(() => {\n if (LandingPageData.getDmsPillarsData) {\n const { result } = LandingPageData.getDmsPillarsData.data;\n const filteredData = result.filter(pillar => pillar.pillar_type === selectedCategory);\n setCategoryData(filteredData);\n setPillarsData(result);\n }\n }, [LandingPageData.getDmsPillarsData]);\n\n const renderContent = content => {\n return {t('LANDING_PAGE.NO_RESULTS_FOUND')}
\n{content}
;\n };\n\n const handleSelectCategory = categoryName => {\n const filteredData = pillarsData.filter(pillar => pillar.pillar_type === categoryName);\n setCategoryData(filteredData);\n setSelectedCategory(categoryName);\n };\n return (\n\n \n \n
\n \n handleSelectCategory('monitoring_early_warning')}\n >\n {t('LANDING_PAGE.MONITORING_EARLY_WARNING')}\n \n \n handleSelectCategory('risk_impact')}\n >\n {t('LANDING_PAGE.RISK_IMPACT')}\n \n \n handleSelectCategory('risk_mitigation')}\n >\n {t('LANDING_PAGE.RISK_MITIGATION')}\n \n \n
\n \n
\n \n {/* \n \n
\n );\n};\n\nexport default ToolsManagement;\n","import React, { useEffect, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport { Col, Container, Row } from 'reactstrap';\n\nconst CountrySpecificContent = () => {\n const URLParams = new URLSearchParams(window.location.search);\n const queryCountry = URLParams.get('Country');\n const [selectedCountry, setSelectedCountry] = useState('');\n\n useEffect(() => {\n if (queryCountry) {\n setSelectedCountry(queryCountry);\n } else {\n setSelectedCountry('DMS'); // Default value when no country is present\n }\n }, [queryCountry]);\n\n const getTitleKey = () => {\n switch (selectedCountry) {\n case 'india':\n return t('LANDING_PAGE.UNVEILING_IDMS');\n case 'srilanka':\n return t('LANDING_PAGE.UNVEILING_SLDMS');\n case 'southasia':\n return t('LANDING_PAGE.UNVEILING_SADMS');\n default:\n return t('LANDING_PAGE.UNVEILING_COUNTRY_DMS');\n }\n };\n\n const getDescription = () => {\n switch (selectedCountry) {\n case 'india':\n return (\n <>\n {t('LANDING_PAGE.PILLARS_OF_DISATER')}
\n \n{t('LANDING_PAGE.IDMS_DESCRIPTION_1')}
\n{t('LANDING_PAGE.IDMS_DESCRIPTION_2')}
\n \n );\n case 'srilanka':\n return (\n <>\n{t('LANDING_PAGE.SLDMS_DESCRIPTION')}
\n \n );\n case 'southasia':\n return (\n <>\n{t('LANDING_PAGE.SADMS_DESCRIPTION_1')}
\n {/*{t('LANDING_PAGE.SADMS_DESCRIPTION_2')}
*/}\n \n );\n default:\n return (\n <>\n{t('LANDING_PAGE.SADMS_DESCRIPTION_1')}
\n \n );\n }\n };\n\n return (\n\n
\n \n \n {/* {t('LANDING_PAGE.EMPOWERING_DROUGHT')}{' '} */}\n {getTitleKey()}\n
\n' + labels.join('
');\n } else {\n if (layer.units) {\n containerDiv.innerHTML =\n layer?.dataSource === 'IRI'\n ? '' +\n layer?.dataSource +\n '
' +\n ` White indicates Climatological odds
` +\n labels.join('
') +\n '
' +\n (layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\n ' ' +\n '(' +\n layer.units +\n ')' +\n '
'\n : '' +\n (layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\n ' ' +\n '(' +\n layer.units +\n ')' +\n '
' +\n labels.join('
');\n } else {\n if (layer.dataSource === DRY_SPELL.FINAL_DROUGHT_MAP) {\n containerDiv.innerHTML =\n '' + layer.dataSource + '
' + labels.join('
');\n } else {\n /**\n * added by sai krishna thalla\n * reason: lulc legends names are not displaying their respective label names\n * date: 19-sep-2022\n */\n containerDiv.innerHTML =\n '' +\n (layer?.fromMapPreferences\n ? layer?.dataSource == LAND_USE_LAND_COVER\n ? layer.id\n : layer?.dataSource\n : layer.parameter) +\n '
' +\n labels.join('
');\n }\n }\n }\n // let containerOfContainerDiv = L.DomUtil.create('div');\n // containerOfContainerDiv.className = 'container-of-container-div';\n // let datesContainer = L.DomUtil.create('div');\n // const monthSpanContainer = L.DomUtil.create('div');\n // datesContainer.className = 'discrete-legend-container-of-container-div';\n // monthSpanContainer.className = 'dates-span-container-iri';\n // if (layer?.selectedDates?.startDate && layer?.selectedDates?.endDate) {\n // datesContainer.innerHTML =\n // ' ' +\n // layer.selectedDates.startDate +\n // ' to ' +\n // layer.selectedDates.endDate +\n // ' ';\n // containerOfContainerDiv.appendChild(datesContainer);\n\n // if (layer?.forecastMonth) {\n // monthSpanContainer.innerHTML = `${layer?.forecastMonth} `;\n // containerOfContainerDiv.appendChild(monthSpanContainer);\n // legendDiv.appendChild(containerOfContainerDiv);\n // }\n // legendDiv.append(containerOfContainerDiv);\n // containerOfContainerDiv.appendChild(containerDiv);\n // } else {\n // legendDiv.append(containerDiv);\n // }\n legendDiv.append(containerDiv);\n return legendDiv;\n };\n if (layer && !_.isEmpty(legend) && !_.isEmpty(map)) {\n if (!_.isEmpty(map?._layers)) {\n legend?.addTo(map);\n }\n }\n } else {\n if (layer) {\n const image = document.getElementById(id || 'legend_div');\n legend.onRemove = () => {\n if (image) {\n L.DomUtil.remove(image);\n }\n };\n legend.onRemove();\n }\n }\n }\n }, [add, map, layer]); //here add map\n return null;\n}\n\nexport default DiscreteLandingPageLegend;\n","import React from 'react';\nimport { GeoJSON } from 'react-leaflet';\nimport {\n GEOJSON_COUNTRY_TOOLTIP_DATA,\n MAP_PREFERENCES_lABELS,\n} from '../../../Components/constants';\n\nfunction GeoJsonMapContainer({ geoJsonData, countryData }) {\n const handleEachFeatureChange = (selectedCountry, locationType, feat, layer) => {\n let selectedCountryData = GEOJSON_COUNTRY_TOOLTIP_DATA?.find(\n item => item.selectedCountry === selectedCountry?.country_name,\n );\n let labelprop = selectedCountryData ? selectedCountryData[locationType] : '';\n if (labelprop && feat.properties[labelprop])\n layer.bindTooltip(feat.properties[labelprop] + '', { sticky: true, direction: 'auto' });\n };\n\n return (\n <>\n
{t('LANDING_PAGE.DROUGHT_INSIGHTS')}
\n \n\n handleSelectInsight(e, 'drought-monitor')}\n >\n {t('LANDING_PAGE.DROUGHT_MONITORING')}\n \n handleSelectInsight(e, 'drought-prediction')}\n >\n {t('LANDING_PAGE.DROUGHT_PREDICTION')}\n \n
\n \n {selectedInsight === 'drought-monitor'\n ? t('LANDING_PAGE.DROUGHT_MONITORING_DESC', { country: countryData?.country_name })\n : t('LANDING_PAGE.DROUGHT_PREDICTION_DESC')}\n
\n\n
\n
\n \n
\n \n \n {touched && ((error && {error}) || (warning && {warning}))}\n
\n \n );\n};\n\nexport const renderFileField = ({\n input,\n placeholder,\n className,\n controlledValue,\n readOnly,\n autoFocus,\n type,\n id,\n accept,\n meta: { touched, error, warning },\n}) => (\n <>\n \n \n \n \n {touched && ((error && {error}) || (warning && {warning}))}\n
\n \n);\n\nexport const renderTextField = ({\n input,\n placeholder,\n className,\n readOnly,\n autoFocus,\n type,\n isDisabled,\n required,\n min,\n max,\n meta: { touched, error, warning },\n}) => (\n <>\n \n {touched && ((error && {error}) || (warning && {warning}))}\n
\n \n);\n\nexport const renderReactSelectInputField = ({\n input,\n options,\n name,\n id,\n placeholder,\n isClearable,\n isDisabled,\n className,\n isMulti,\n isLoading,\n onMenuOpen,\n onMenuClose,\n meta: { touched, error, warning },\n}) => {\n return (\n <>\n \n {touched && ((error && {error}) || (warning && {warning}))}\n
\n \n );\n};\nexport const renderReactUserInputField = ({\n input,\n options,\n name,\n id,\n type,\n placeholder,\n isClearable,\n isDisabled,\n className,\n isMulti,\n isLoading,\n onMenuOpen,\n onMenuClose,\n meta: { touched, error, warning },\n}) => {\n return (\n <>\n \n {touched && ((error && {error}) || (warning && {warning}))}\n
\n \n );\n};\nexport const renderSelectDropdownField = ({\n input,\n placeholder,\n className,\n controlledValue,\n disabled,\n type,\n meta: { touched, error },\n children,\n}) => (\n <>\n \n
\n \n);\n\nexport const renderDateField = ({\n input,\n placeholder,\n className,\n readOnly,\n autoFocus,\n required,\n meta: { touched, error, warning },\n}) => (\n <>\n \n
\n \n \n {children}\n \n
\n \n {touched && error &&
\n {error}
}\n\n {touched && ((error && {error}) || (warning && {warning}))}\n
\n \n);\n\nexport const renderFileInput = () => {\n return (\n \n
\n );\n}\n\nexport default Apicategories;\nApicategories.propTypes = {\n handleApiCategories: PropTypes.func,\n};\n","import React, { useEffect, useRef, useState } from 'react';\nimport { Container, Row, Col, Card, FormGroup, Label, Spinner } from 'reactstrap';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from 'react-multi-lang';\nimport { Field, reduxForm } from 'redux-form';\nimport { toast } from 'react-toastify';\nimport SwaggerUI from 'swagger-ui-react';\nimport 'swagger-ui-react/swagger-ui.css';\nimport Footer from '../new-landing-page/Footer';\nimport RightImg from '../../assets/Images/right-img.png';\nimport LeftImg from '../../assets/Images/left-img.png';\nimport { COUNTRIES_JSON_LIST } from '../../Components/constants/index';\nimport {\n renderTextField,\n renderReactSelectInputField,\n} from '../../Components/common/renderInputField';\nimport { getParametersRequest } from '../../redux/home/homeActions';\nimport { getAccessKeyRequest, getCountryRequest } from '../../redux/actions';\nimport { LOCATION, SWAGGER_JSON_FILE_URL_LIST } from '../../Components/constants';\nimport { showSuccess, showError } from '../../Components/Notifications';\nimport myConstClass from '../../Constants';\nimport Apicategories from '../../Components/Apicategories';\n\n// Redux-form validate function\nconst validate = values => {\n const errors = {};\n const requiredFields = [\n 'name',\n 'email',\n 'organization',\n 'access_country_id',\n 'country_name',\n 'api_ids',\n 'purpose',\n 'application_url',\n ];\n\n requiredFields.forEach(field => {\n if (!values[field]) {\n errors[field] = t('PUBLIC_API.FIELD_REQUIRED');\n }\n });\n if (!values.name) {\n errors.name = t('PUBLIC_API.NAME_REQUIRED');\n }\n if (!values.email) {\n errors.email = t('PUBLIC_API.EMAIL_REQUIRED');\n } else if (!myConstClass.EMAIL_REGEX.test(values.email)) {\n errors.email = t('PUBLIC_API.INVALID_EMAIL');\n }\n if (!values.organization) {\n errors.organization = t('PUBLIC_API.ORGANIZATION_REQUIRED');\n }\n if (!values.access_country_id) {\n errors.access_country_id = t('PUBLIC_API.COUNTRY_REQUIRED');\n }\n if (!values.country_name) {\n errors.country_name = t('PUBLIC_API.COUNTRY_REQUIRED');\n }\n if (!values.api_ids) {\n errors.api_ids = t('PUBLIC_API.API_REQUIRED');\n }\n if (!values.purpose) {\n errors.purpose = t('PUBLIC_API.PURPOSE_REQUIRED');\n }\n if (values.application_url) {\n if (!myConstClass.URL_REGEX.test(values.application_url)) {\n errors.application_url = t('PUBLIC_API.APPLICATION_URL_INVALID');\n }\n }\n return errors;\n};\n\nconst PublicApi = props => {\n toast.configure();\n const dispatch = useDispatch();\n const { handleSubmit, reset } = props;\n const [loading, setLoading] = useState('');\n const [country, setCountry] = useState({});\n const [accessCountryList, setAccessCountryList] = useState();\n const [selectedAccessCountryList, setSelectedAccessCountryList] = useState([]);\n const [selectedAPI, setSelectedAPI] = useState([]);\n const [parametersList, setParams] = useState([]);\n const [activeCategoryUrl, setActiveCategoryUrl] = useState();\n\n const { Parameters, AccessKey, Location } = useSelector(state => ({\n Parameters: state.Home,\n AccessKey: state.AccessKey,\n Location: state.Location,\n }));\n\n useEffect(() => {\n setActiveCategoryUrl(SWAGGER_JSON_FILE_URL_LIST[0].url);\n dispatch(getParametersRequest());\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\n window.scrollTo({ top: 0, behavior: 'instant' });\n /*scrolling behavior changed by Ramya.s on 6/9/2022*/\n }, []);\n\n useEffect(() => {\n if (Location.countryList) {\n if (Location.countryList.result) {\n setAccessCountryList(Location.countryList.result);\n }\n }\n }, [Location.countryList]);\n\n useEffect(() => {\n if (Parameters.getParametersData) {\n if (Parameters.getParametersData.data) {\n const { result } = Parameters.getParametersData.data;\n setParams(result);\n }\n } else if (Parameters.getParametersDataError) {\n setParams([]);\n } else if (Parameters.getParametersDataNetworkError) {\n setParams([]);\n }\n }, [\n Parameters.isGetParametersDataRequesting,\n Parameters.getParametersData,\n Parameters.getParametersDataError,\n Parameters.getParametersDataNetworkError,\n ]);\n\n const isGetAccessKeyFirstRun = useRef(true);\n useEffect(() => {\n if (isGetAccessKeyFirstRun.current) {\n isGetAccessKeyFirstRun.current = false;\n return;\n }\n if (AccessKey.accessKeyRequesting) {\n setLoading(true);\n }\n\n if (AccessKey.accessKeyData) {\n setLoading(false);\n if (AccessKey.accessKeyData.data) {\n showSuccess(t('PUBLIC_API.SUCCESSFULLY_REGISTERED'));\n reset('publicApiForm');\n }\n } else if (AccessKey.accessKeyDataError) {\n if (AccessKey.accessKeyDataError.data) {\n const { response } = AccessKey.accessKeyDataError.data;\n let errorMessage = response.data?.errors;\n if (typeof errorMessage === 'object' && Object.keys(errorMessage).length) {\n let firstValue = Object.values(errorMessage)[0];\n showError(firstValue[0]);\n }\n setLoading(false);\n } else {\n setLoading(false);\n showError(t('PUBLIC_API.ERROR_GENERATE_KEY'));\n }\n } else if (AccessKey.accessKeyDataNetworkError) {\n setLoading(false);\n showError(t('PUBLIC_API.ERROR_GENERATE_KEY'));\n }\n }, [\n AccessKey.accessKeyRequesting,\n AccessKey.accessKeyData,\n AccessKey.accessKeyDataError,\n AccessKey.accessKeyDataNetworkError,\n AccessKey,\n ]);\n\n const handleAPIChange = selectedOption => {\n setSelectedAPI(selectedOption);\n };\n\n const onFormSubmit = props => {\n props.country_name = country.id;\n props.api_ids = selectedAPI.map(item => item.id);\n props.choosed_access_countries = selectedAccessCountryList.map(item => item.id);\n dispatch(getAccessKeyRequest(props));\n };\n\n const handleCountryChange = (options, e) => {\n const selectedOption = options.find(item => item.name === e.value);\n setCountry({ name: e.value, id: selectedOption.name });\n };\n\n const handleAccessCountryChange = selectedOption => {\n setSelectedAccessCountryList(selectedOption);\n };\n const renderAPIParameterOptions = (list, value) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n params.map(param => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: value === 'country' ? param.name : param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n };\n\n const handleApiCategories = value => {\n SWAGGER_JSON_FILE_URL_LIST.map(i => {\n if (i.id === value) {\n setActiveCategoryUrl(i.url);\n }\n });\n };\n return (\n <>\n {t('PUBLIC_API.API_DIRECTORIES')}
\n \n\n 
\n \n \n \n
\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n handleCountryChange(COUNTRIES_JSON_LIST, e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(COUNTRIES_JSON_LIST, 'country')}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n 
\n \n
\n \n \n
\n \n );\n};\n\nexport default reduxForm({\n form: 'publicApiForm',\n validate,\n enableReinitialize: true,\n})(PublicApi);\n","export default \"data:image/png;base64,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ABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEf8G2O8rfkxKOXIAAAAASUVORK5CYII=\"","const GraphLoader = () => {\n return (\n <>\n {t('PUBLIC_API.SADMS')}
\n{t('PUBLIC_API.DESC_ONE')}
\n{t('PUBLIC_API.DESC_TWO')}
\n{t('PUBLIC_API.DESC_THREE')}
\n\n
\n {t('PUBLIC_API.GENERATE_KEY')}
\n {t('PUBLIC_API.MORE_DETAILS')}\n\n \n {t('PUBLIC_API.GENERATE_KEY')}\n \n {loading &&
\n \n \n
\n {t('PUBLIC_API.CLICK_GENERATE_KEY')}
\n\n \n {t('PUBLIC_API.TERMS')}\n \n\n
\n {t('PUBLIC_API.API_DESC')}
\n\n
\n \n );\n};\n\nexport default GraphLoader;\n","var _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgAdvancedSearch(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 19,\n height: 20,\n viewBox: \"0 0 19 20\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.1667 3.33325H18.1667M11.5 13.3333L16.5 18.3333L11.5 13.3333ZM7.33333 14.9999C8.09938 14.9999 8.85792 14.849 9.56565 14.5559C10.2734 14.2627 10.9164 13.8331 11.4581 13.2914C11.9998 12.7497 12.4295 12.1066 12.7226 11.3989C13.0158 10.6912 13.1667 9.93263 13.1667 9.16659C13.1667 8.40054 13.0158 7.642 12.7226 6.93427C12.4295 6.22653 11.9998 5.58347 11.4581 5.0418C10.9164 4.50012 10.2734 4.07044 9.56565 3.77729C8.85792 3.48414 8.09938 3.33325 7.33333 3.33325C5.78624 3.33325 4.30251 3.94783 3.20854 5.0418C2.11458 6.13576 1.5 7.61949 1.5 9.16659C1.5 10.7137 2.11458 12.1974 3.20854 13.2914C4.30251 14.3853 5.78624 14.9999 7.33333 14.9999V14.9999ZM15.6667 0.833252V5.83325V0.833252Z\",\n stroke: \"#DC9023\",\n strokeWidth: 2\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgAdvancedSearch);\nexport default __webpack_public_path__ + \"static/media/AdvancedSearch.9bbd4ee8.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState, useEffect, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport _, { isNumber } from 'lodash';\nimport PropTypes from 'prop-types';\nimport { useHistory } from 'react-router-dom';\nimport Geocode from 'react-geocode';\nimport Autocomplete from 'react-google-autocomplete';\nimport Button from 'reactstrap-button-loader';\nimport ReactTooltip from 'react-tooltip';\nimport {\n Card,\n CardBody,\n Col,\n Form,\n FormGroup,\n Input,\n InputGroup,\n InputGroupAddon,\n InputGroupText,\n Label,\n Row,\n} from 'reactstrap';\nimport { BiCurrentLocation, BiPlus, BiMinus } from 'react-icons/bi';\nimport { BsSearch } from 'react-icons/bs';\nimport { RxCross2 } from 'react-icons/rx';\nimport { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md';\nimport { ReactComponent as AdvancedSearch } from '../../assets/Images/AdvancedSearch.svg';\nimport moment from 'moment';\nimport Select from 'react-select';\nimport * as turf from '@turf/turf';\nimport {\n BASE_TIME_ECMWF,\n FORECAST_LIST_ECMWF,\n SHOW_VALIDTIME_AND_LAYERS,\n PARAMETER_SLUGS,\n SOIL_MOISTURE_LAYER_ECMWF,\n SHOW_DAY_AND_QUANTILE,\n SOUTH_ASIA_COUNTRY,\n} from '../../Components/constants';\nimport { parseCoordinate } from '../../Components/helpers';\n\nimport {\n getCountryRequest,\n getStateByCountryRequest,\n getDistrictByStateRequest,\n getWeatherForecastSources,\n getMapPreferenceRequest,\n} from '../../redux/actions';\nimport TRANSLATIONS from '../../translations/en.json';\nimport {\n LOCATION,\n DATE_FORMAT,\n TEMPORAL_AGGREGATION,\n ADDRESS_CONSTS,\n DATA_SOURCES,\n DISPLAY_DATE_FORMAT,\n DEFAULT_COUNTRY,\n INDIA_COORDINATE,\n SOUTH_ASIA_CONST,\n weatherForecastIndices,\n DISTRICT_ZOOM_LEVEL,\n GRAPH,\n OPEN_WEATHER_CHART_PARAMS,\n} from '../constants';\nimport { t } from 'react-multi-lang';\nimport {\n getUserLocationBasedOnIP,\n isOpenWeatherDataSource,\n isUserLocationExists,\n renderValidCommonFilterDates,\n} from './utils';\nimport { showError } from '../Notifications';\nimport { WEATHER_FORECAST_MODULE } from '../../Components/constants/index';\nimport axios from 'axios';\nimport myConstClass from '../../Constants';\nimport SAJson from '../../Components/JsonFiles/SA.json';\nfunction Filter(props) {\n const {\n initialValues: {\n isHideBar,\n staticResourceSelectedLocation,\n fromStaticResources,\n dataSourceId,\n years,\n dates,\n isDefaultSelectedSourceId,\n region,\n selectedParam,\n mapPreferencesData,\n },\n clearForecastData,\n clearDatesHandler,\n forecastLeadTimeHandler,\n forecastCompareYearMonthHandler,\n forecastCompareLeadTimeHandler,\n forecastTimeYearHandler,\n forecastTimeMonthHandler,\n compareForecastTimeYearHandler,\n compareForecastTimeMonthHandler,\n compareIRIAvailableYearList,\n compareIRIForecastTime,\n compareIRIAvailableMonthList,\n compareIRIAvailableLeadTimeList,\n IRIAvailableYearList,\n IRIForecastTime,\n IRIAvailableMonthList,\n IRIAvailableLeadTimeList,\n setCompareIRIForecastTime,\n setCurrenUserLocation,\n ecmwfProducts,\n selectedEcmwfProducts,\n setSelectedEcmwfProducts,\n staticResourceBaseTimeData,\n validTimeOptions,\n validLayerOptions,\n selectedValidTime,\n selectedValidLayer,\n daysData,\n quantileData,\n forecastType,\n selectedBasetime,\n\n setSelectedBaseTime,\n setValidTimeOptions,\n setSelectedValidTime,\n setValidLayerOptions,\n setSelectedValidLayer,\n setForecastType,\n setDaysData,\n setQuantileData,\n staticResourceData,\n onHandleEcmwf,\n setSelectedDataSource,\n selectedDataSource,\n setSearchMarker,\n countryJson,\n // setSelectedLocationEcmwf,\n // selectedLocationEcmwf,\n } = props;\n const dispatch = useDispatch();\n\n const autoCompleteRef = useRef(null);\n const history = useHistory();\n const [location, setLocation] = useState('');\n const [cordinates, setCordinates] = useState({\n lat: '',\n lng: '',\n });\n const [isAdvanceSearch, setAdvanceSearch] = useState(false);\n const [isClickedOnPlus, setIsClickedOnPlus] = useState(false);\n const [initialSelectedDate, setSelectedDate] = useState({\n graph: {\n startDate: moment().format(DATE_FORMAT),\n endDate: moment()\n .add(6, 'days')\n .format(DATE_FORMAT),\n minStartDate: '',\n maxStartDate: '',\n maxEndDate: '',\n },\n map: {\n startDate: moment().format(DATE_FORMAT),\n endDate: moment()\n .add(6, 'days')\n .format(DATE_FORMAT),\n minStartDate: '',\n maxStartDate: '',\n maxEndDate: '',\n },\n });\n const [updatedSelectedDate, setUpdatedSelectedDate] = useState({\n startDate: moment().format(DATE_FORMAT),\n endDate: moment()\n .add(6, 'days')\n .format(DATE_FORMAT),\n minStartDate: '',\n maxStartDate: '',\n maxEndDate: '',\n });\n const [finalSelectedDate, setFinalSelectedDate] = useState({\n startDate: moment().format(DATE_FORMAT),\n endDate: moment()\n .add(6, 'days')\n .format(DATE_FORMAT),\n minStartDate: '',\n maxStartDate: '',\n maxEndDate: '',\n });\n const [updatedSelectedCompareDate, setUpdatedSelectedCompareDate] = useState({\n startDate: moment().format(DATE_FORMAT),\n endDate: moment()\n .add(6, 'days')\n .format(DATE_FORMAT),\n minStartDate: '',\n maxStartDate: '',\n maxEndDate: '',\n });\n const [selectedLocation, setSelectedLocation] = useState({\n country: '',\n state: '',\n District: '',\n });\n const [compareLocation, setCompareLocation] = useState({\n country: '',\n state: '',\n District: '',\n });\n const [country, setCountry] = useState('');\n const [compareCountry, setCompareCountry] = useState('');\n const [dataSources, setDataSources] = useState({\n firstDataSources: [],\n secondDataSources: [],\n });\n const [countryList, setCountryList] = useState();\n const [stateList, setStateList] = useState([]);\n const [compareStateList, setCompareStateList] = useState([]);\n // const [selectedDataSource, setSelectedDataSource] = useState({\n // firstDataSource: [],\n // secondDataSource: [],\n // });\n const [temporalAggregation, setTemporalAggregation] = useState(TEMPORAL_AGGREGATION);\n const [range] = useState({\n min: null,\n max: null,\n });\n const [isCompare, setIsCompare] = useState([\n { name: 'map', value: 'Map', selected: true },\n { name: 'graph', value: 'Graph', selected: false },\n ]);\n const [compareData, setCompareData] = useState('Map');\n const [firstDataSourceSelected, setFirstDataSourceSelected] = useState({});\n\n const [selectedRegion, setSelectedRegion] = useState('');\n const [selectedOption, setSelectedOption] = useState({});\n const [defaultSelectedOption, setDefaultSelectedOption] = useState({});\n const [compareSelectedOption, setCompareSelectedOption] = useState({});\n const [defaultCompareSelectedOption, setDefaultCompareSelectedOption] = useState({});\n const [defaultRegionName, setDefaultRegionName] = useState();\n const [selectedDateRange, setSelectedDateRange] = useState([]);\n const [selectedDefaultDateRange, setSelectedDefaultDateRange] = useState({});\n const [selectedYearList, setSelectedYearList] = useState([]);\n const [selectedDefaultYear, setSelectedDefaultYear] = useState(null);\n const [state, setState] = useState();\n const [compareState, setCompareState] = useState();\n const [districtList, setDistrictList] = useState();\n const [compareDistrictList, setCompareDistrictList] = useState();\n const [selectedDisctrict, setSelectedDistrict] = useState(null);\n const [selectedCompareDistrict, setSelectedCompareDistrict] = useState(null);\n const [isOpenWeather, setIsOpenWeather] = useState(false);\n const [isDefaultDataSource, setIsDefaultDataSource] = useState('');\n const [isUpdateGraph, setIsUpdateGraph] = useState(true);\n const [isApplyLayer, setIsApplyLayer] = useState(true);\n const [showToolTip, setShowToolTip] = useState(false);\n const [showMapPreferenceTooltip, setShowMapPreferenceTooltip] = useState(false);\n const [isDataSourceOpen, setIsDataSourceOpen] = useState();\n const [isIriNotSelected, setIsIriNotSelected] = useState(true);\n const [hasSelectedParamChart, setHasSelectedParamChart] = useState(true);\n const [parentCountryObj, setParentCountryObj] = useState({});\n const [parentStateObj, setParentStateObj] = useState({});\n Geocode.setApiKey(process.env.REACT_APP_LOCATION_API_KEY);\n Geocode.setLanguage('en');\n Geocode.setLocationType('ROOFTOP');\n Geocode.enableDebug();\n //NOAA GFS start and end dates\n const [noaaMaxEndDate, setNoaaMaxEndDate] = useState(false);\n const [finalNoaaEndDate, setFinalNoaaEndDate] = useState('');\n const [finalNoaaMaxEndDate, setFinalNoaaMaxEndDate] = useState('');\n\n //NOAA GFS compare start and end dates\n const [noaaCompareMaxEndDate, setNoaaCompareMaxEndDate] = useState(false);\n const [finalNoaaCompareEndDate, setFinalNoaaCompareEndDate] = useState('');\n const [finalNoaaCompareMaxEndDate, setFinalNoaaCompareMaxEndDate] = useState('');\n const [countryData, setCountryData] = useState({});\n const handleInfo = e => {\n e?.stopPropagation();\n window.open(\n `/user-guide-details?topicId=${WEATHER_FORECAST_MODULE.id}&&sub-topic-name=${selectedDataSource.firstDataSource[0].name}&topic_name=Weather Forecast`,\n );\n };\n //getting all country ,state ,district from store\n const { Location, Weather, isEcmwfControlsLoading } = useSelector(state => ({\n Location: state.Location,\n Weather: state.Weather,\n isEcmwfControlsLoading: state?.Weather?.isEcmwfControlsLoading,\n }));\n\n // !setting selected region for south asia so that all the required API's are called\n useEffect(() => {\n const countryInfo = localStorage.getItem('countryData');\n // Convert the JSON string back to an object\n const countrySpecificData = JSON.parse(countryInfo);\n if (countrySpecificData?.country_slug === 'southasia') {\n setSelectedRegion({\n name: SOUTH_ASIA_CONST.name,\n label: SOUTH_ASIA_CONST.name,\n value: SOUTH_ASIA_CONST.id,\n id: SOUTH_ASIA_CONST.id,\n });\n }\n }, []);\n\n useEffect(() => {\n let defaultSelectedAggregation = TEMPORAL_AGGREGATION?.find(item => item.name === 'Mean');\n let data = isUserLocationExists();\n if (data) {\n setCurrenUserLocation(data);\n } else {\n getUserLocationData();\n }\n if (!_.isEmpty(defaultSelectedAggregation)) {\n setTemporalAggregation(defaultSelectedAggregation);\n }\n if (autoCompleteRef && !_.isEmpty(autoCompleteRef?.current)) {\n autoCompleteRef.current.autocomplete = false;\n }\n // let currentUserLocation = Cookies.get('ip-based-user-location');\n // if(currentUserLocation) setCurrenUserLocation(currentUserLocation)\n const countryInfo = localStorage.getItem('countryData');\n\n // Convert the JSON string back to an object\n const countrySpecificData = JSON.parse(countryInfo);\n\n setCountryData(countrySpecificData);\n }, []);\n\n //for getting country\n useEffect(() => {\n if (!fromStaticResources) {\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\n } else {\n dispatch(getWeatherForecastSources({ region_id: SOUTH_ASIA_CONST.id }));\n }\n }, [fromStaticResources]);\n\n useEffect(() => {\n if (!_.isEmpty(staticResourceSelectedLocation)) {\n setDefaultRegionName(staticResourceSelectedLocation);\n } else {\n setDefaultRegionName(null);\n }\n }, [staticResourceSelectedLocation]);\n\n useEffect(() => {\n if (selectedLocation) props.handleSelectedLocation(selectedLocation);\n }, [selectedLocation]);\n\n useEffect(() => {\n props.handleCompareView(isCompare);\n }, [isCompare]);\n\n //global function to compare props\n function usePrevious(value) {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n }\n\n const getUserLocationData = async () => {\n const response = await axios.post(myConstClass.GEO_LOCATION_USER_LOCATION_URL, {\n considerIp: true,\n });\n if (response?.status === 200) {\n const cordinates = response?.data?.location;\n getAddress(cordinates?.lat, cordinates?.lng, { fromCurrentLocation: false });\n }\n };\n\n useEffect(() => {\n if (firstDataSourceSelected?.length) {\n let secondDataSourceList = dataSources?.firstDataSources?.filter(\n i => i.type === 'non-static' || i.value === 'IRI',\n );\n let filteredList = secondDataSourceList;\n if (compareData === 'Graph') {\n filteredList =\n firstDataSourceSelected[0].id === DATA_SOURCES.IRI.id\n ? secondDataSourceList?.filter(i => i.id === DATA_SOURCES.IRI.id)\n : secondDataSourceList?.filter(i => i.id !== DATA_SOURCES.IRI.id);\n setSelectedDataSource(prev => ({\n ...prev,\n secondDataSource: [],\n }));\n setDataSources(prev => ({\n ...prev,\n secondDataSources: filteredList,\n }));\n } else if (compareData === 'Map') {\n let secondDataSourceFilteredList = dataSources?.firstDataSources?.filter(\n i => i.type === 'non-static' || i.value === 'IRI',\n );\n setDataSources(prev => ({\n ...prev,\n secondDataSources: secondDataSourceFilteredList,\n }));\n setSelectedDataSource(prev => ({\n ...prev,\n secondDataSource: [],\n }));\n clearForecastData();\n }\n }\n }, [compareData, firstDataSourceSelected]);\n\n useEffect(() => {\n if (!_.isEmpty(location)) {\n setIsClickedOnPlus(false);\n }\n }, [location]);\n\n useEffect(() => {\n if (mapPreferencesData?.length === 2) {\n setShowMapPreferenceTooltip(true);\n } else setShowMapPreferenceTooltip(false);\n }, [mapPreferencesData]);\n\n useEffect(() => {\n if (Location.countryList) {\n const { result } = Location.countryList;\n setAdvanceSearch(true);\n if (result) {\n let defaultCountry = result?.find(data => data.id === countryData.country_id);\n if (defaultCountry) {\n defaultCountry.label = defaultCountry.name;\n defaultCountry.value = defaultCountry.name;\n setSelectedOption(defaultCountry);\n setParentCountryObj(defaultCountry);\n setDefaultSelectedOption(defaultCountry);\n props.handleCompareSearch({ country: defaultCountry.value });\n\n setCompareSelectedOption(defaultCountry);\n setDefaultCompareSelectedOption(defaultCountry);\n\n setCountry(defaultCountry.name);\n setCompareCountry(defaultCountry.name);\n setSelectedLocation(prev => {\n return {\n ...prev,\n country: defaultCountry,\n };\n });\n setCompareLocation(prev => {\n return {\n ...prev,\n country: defaultCountry,\n };\n });\n }\n }\n if (result?.[0]) {\n let arr = [];\n result.map(i => {\n return arr.push({\n id: i.id,\n name: i.name,\n value: i.name,\n label: i.name,\n region_id: i.region_id,\n latitude: i.latitude,\n longitude: i.longitude,\n zoom_level: i.zoom_level,\n });\n });\n setCountryList(arr);\n\n if (fromStaticResources) {\n props.handleRegionId(result[0].id);\n //setDefaultRegionName(result[0].name);\n dispatch(getWeatherForecastSources({ region_id: result[0].id }));\n }\n }\n }\n }, [Location.countryList]);\n\n useEffect(() => {\n if (Object.keys(selectedOption).length && selectedOption?.latitude) {\n const { latitude, longitude, zoom_level } = selectedOption;\n return props.handleCordinates(\n [latitude ? latitude : INDIA_COORDINATE.lat, longitude ? longitude : INDIA_COORDINATE.long],\n zoom_level ? zoom_level : INDIA_COORDINATE.zoom_level,\n );\n } else {\n return props.handleCordinates(\n [INDIA_COORDINATE.lat, INDIA_COORDINATE.long],\n SOUTH_ASIA_CONST.zoom_level,\n );\n }\n }, [selectedOption]);\n\n useEffect(() => {\n if (Object.keys(compareSelectedOption).length) {\n const { latitude, longitude, zoom_level } = compareSelectedOption;\n return props.handleCompareCordinates(\n [latitude ? latitude : INDIA_COORDINATE.lat, longitude ? longitude : INDIA_COORDINATE.long],\n zoom_level ? zoom_level : INDIA_COORDINATE.zoom_level,\n );\n } else {\n return props.handleCompareCordinates(\n [INDIA_COORDINATE.lat, INDIA_COORDINATE.long],\n SOUTH_ASIA_CONST.zoom_level,\n );\n }\n }, [compareSelectedOption]);\n\n function updateDate(dataSource) {\n if (dataSource?.id === DATA_SOURCES?.OPEN_WEATHER?.id) {\n return DATA_SOURCES?.OPEN_WEATHER?.dateRange;\n } else if (dataSource?.id === DATA_SOURCES?.GFS_NOAA.id) {\n return DATA_SOURCES.GFS_NOAA.dateRange;\n } else if (dataSource?.id === DATA_SOURCES?.ERPAS.id) {\n return DATA_SOURCES.ERPAS.dateRange;\n } else {\n return {\n startDate: moment().format(DATE_FORMAT),\n endDate: moment()\n .add(6, 'days')\n .format(DATE_FORMAT),\n minStartDate: '',\n maxStartDate: '',\n maxEndDate: '',\n };\n }\n }\n\n useEffect(() => {\n if (selectedDataSource?.firstDataSource?.length) {\n let dataSource = selectedDataSource?.firstDataSource[0];\n let date = updateDate(dataSource);\n setSelectedDate(prev => {\n return {\n ...prev,\n map: date,\n graph: date,\n };\n });\n setUpdatedSelectedDate(date);\n }\n }, [selectedDataSource?.firstDataSource]);\n\n useEffect(() => {\n if (selectedDataSource?.secondDataSource?.length) {\n let dataSource = selectedDataSource?.secondDataSource[0];\n let date = updateDate(dataSource);\n setFinalSelectedDate(date);\n setUpdatedSelectedCompareDate(date);\n }\n }, [selectedDataSource?.secondDataSource]);\n\n useEffect(() => {\n if (selectedLocation.country && selectedLocation.country.name !== SOUTH_ASIA_CONST.name) {\n dispatch(\n getStateByCountryRequest({\n requestObj: {\n location_type: LOCATION.State,\n parent_id: selectedLocation.country?.id,\n },\n isCompareLocation: false,\n }),\n );\n dispatch(getWeatherForecastSources({ country_id: selectedLocation.country?.id }));\n dispatch(getMapPreferenceRequest({ country_id: selectedLocation.country?.id }));\n }\n }, [selectedLocation.country]);\n\n //for getting state by country-id\n useEffect(() => {\n if (selectedLocation.state && selectedLocation?.state?.id) {\n dispatch(\n getDistrictByStateRequest({\n requestObj: {\n location_type: LOCATION.District,\n parent_id: selectedLocation.state?.id,\n },\n isCompareLocation: false,\n }),\n );\n }\n }, [selectedLocation.state]);\n\n useEffect(() => {\n if (!_.isEmpty(selectedRegion)) {\n if (\n selectedLocation.country?.name === SOUTH_ASIA_CONST.name &&\n selectedRegion.value === SOUTH_ASIA_CONST.id\n ) {\n dispatch(getWeatherForecastSources({ region_id: SOUTH_ASIA_CONST.id }));\n dispatch(getMapPreferenceRequest({ region_id: SOUTH_ASIA_CONST.id }));\n } else if (\n selectedRegion.value === '' &&\n selectedLocation.country?.name !== SOUTH_ASIA_CONST.name\n ) {\n dispatch(getWeatherForecastSources({ country_id: selectedLocation.country?.id }));\n dispatch(getMapPreferenceRequest({ country_id: selectedLocation.country?.id }));\n }\n }\n }, [selectedRegion, selectedLocation.country]);\n\n //for getting state by country-id\n useEffect(() => {\n if (compareLocation.country && compareLocation.country.name !== SOUTH_ASIA_CONST.name) {\n dispatch(\n getStateByCountryRequest({\n requestObj: {\n location_type: LOCATION.State,\n parent_id: compareLocation.country?.id,\n },\n isCompareLocation: true,\n }),\n );\n }\n }, [compareLocation.country]);\n\n useEffect(() => {\n if (compareLocation?.state && compareLocation?.state?.id) {\n dispatch(\n getDistrictByStateRequest({\n requestObj: {\n location_type: LOCATION.District,\n parent_id: compareLocation.state?.id,\n },\n isCompareLocation: true,\n }),\n );\n }\n }, [compareLocation.state]);\n\n useEffect(() => {\n let arr = [];\n if (Location.stateList) {\n let result = '';\n let config = Location?.stateList?.config;\n if (Location?.stateList?.data) result = Location?.stateList?.data?.result;\n if (result) {\n result.map(i => {\n return arr.push({\n id: i.id,\n name: i.name,\n value: i.name,\n label: i.name,\n country_id: i.country_id,\n latitude: i.latitude,\n longitude: i.longitude,\n zoom_level: i.zoom_level,\n });\n });\n }\n if (!config?.isCompareLocation) {\n setStateList(arr);\n } else {\n setCompareStateList(arr);\n }\n }\n }, [Location.stateList]);\n\n useEffect(() => {\n let arr = [];\n if (Location.districtList) {\n let result = '';\n let config = Location?.districtList?.config;\n if (Location?.districtList?.data) result = Location?.districtList?.data?.result;\n if (result) {\n result.map(i => {\n return arr.push({\n id: i.id,\n name: i.name,\n value: i.name,\n label: i.name,\n state_id: i.state_id,\n latitude: i.latitude,\n longitude: i.longitude,\n zoom_level: i.zoom_level,\n });\n });\n }\n if (!config?.isCompareLocation) {\n setDistrictList(arr);\n } else {\n setCompareDistrictList(arr);\n }\n }\n }, [Location.districtList]);\n\n useEffect(() => {\n if (selectedDataSource?.firstDataSource?.length) {\n const selectedItem = selectedDataSource?.firstDataSource?.some(\n i => i.id === DATA_SOURCES.OPEN_WEATHER.id,\n );\n setIsOpenWeather(selectedItem);\n props.handleProps({\n dataSources: selectedDataSource?.firstDataSource,\n initialSelectedDate,\n temporalAggregation,\n range,\n });\n if (isClickedOnPlus) {\n props.handleProps({\n compareDataSource: selectedDataSource?.secondDataSource,\n initialSelectedDate,\n finalSelectedDate: finalSelectedDate,\n temporalAggregation,\n range,\n });\n }\n }\n }, [\n initialSelectedDate,\n selectedDataSource.firstDataSource,\n selectedDataSource.secondDataSource,\n isClickedOnPlus,\n finalSelectedDate,\n temporalAggregation,\n range,\n ]);\n\n useEffect(() => {\n props.handleIsOpenWeather(isOpenWeather);\n }, [isOpenWeather]);\n\n useEffect(() => {\n if (!isClickedOnPlus) {\n let compareData = JSON.parse(JSON.stringify(isCompare));\n const nextCompare = compareData.map(item => {\n if (item.name === 'map') {\n return {\n ...item,\n selected: true,\n };\n } else {\n return {\n ...item,\n selected: false,\n };\n }\n });\n setIsCompare(nextCompare);\n setCompareData('Map');\n const { secondDataSource } = selectedDataSource;\n if (secondDataSource?.length) {\n setSelectedDataSource(prev => ({\n ...prev,\n secondDataSource: [],\n }));\n setFinalSelectedDate({\n startDate: moment().format(DATE_FORMAT),\n endDate: moment()\n .add(6, 'days')\n .format(DATE_FORMAT),\n minStartDate: '',\n maxStartDate: '',\n maxEndDate: '',\n });\n props.handleProps({\n compareDataSource: [],\n initialSelectedDate,\n finalSelectedDate: '',\n });\n props.handleCompareParamsData('', selectedDataSource?.firstDataSource[0]);\n }\n }\n props.handleIsCompare(isClickedOnPlus);\n setCompareIRIForecastTime({\n year: null,\n month: null,\n lead_time: null,\n });\n }, [isClickedOnPlus]);\n\n useEffect(() => {\n let isMap = '';\n let isGraph = '';\n let mapPreferencesCount = mapPreferencesData?.length;\n let hasSelectedParamChart = true;\n if (!_.isEmpty(selectedParam) && isOpenWeather) {\n hasSelectedParamChart = OPEN_WEATHER_CHART_PARAMS.find(\n x => x.name === selectedParam.parameter.name,\n )\n ? true\n : false;\n }\n setHasSelectedParamChart(hasSelectedParamChart);\n if (isClickedOnPlus) {\n isMap = isCompare.some(item => item.name === 'map' && item.selected);\n isGraph = isCompare.some(item => item.name === 'graph' && item.selected);\n\n if (\n (!_.isEmpty(temporalAggregation) && temporalAggregation?.value === 'median') ||\n isMap ||\n (!selectedDataSource.secondDataSource?.length && !region?.length) ||\n _.isEmpty(initialSelectedDate.graph.startDate) ||\n _.isEmpty(initialSelectedDate.graph.endDate) ||\n _.isEmpty(selectedParam)\n ) {\n if (selectedParam?.forecast_data_source_id === DATA_SOURCES.IRI.id) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time) ||\n mapPreferencesCount === 2\n ) {\n setIsApplyLayer(false);\n } else {\n setIsApplyLayer(true);\n }\n } else if (mapPreferencesCount < 2) {\n setIsApplyLayer(true);\n } else {\n setIsApplyLayer(false);\n }\n setIsUpdateGraph(false);\n } else {\n if (selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time)\n ) {\n setIsUpdateGraph(false);\n } else {\n setIsUpdateGraph(true);\n }\n } else if (hasSelectedParamChart) {\n setIsUpdateGraph(true);\n } else {\n setIsUpdateGraph(false);\n }\n }\n if (\n isGraph ||\n !selectedDataSource.secondDataSource?.length ||\n _.isEmpty(initialSelectedDate.map.startDate) ||\n _.isEmpty(initialSelectedDate.map.endDate) ||\n _.isEmpty(selectedParam) ||\n region.length ||\n mapPreferencesCount === 2\n ) {\n setIsApplyLayer(false);\n } else {\n if (selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id) {\n if (\n _.isEmpty(compareIRIForecastTime?.year) ||\n _.isEmpty(compareIRIForecastTime?.month) ||\n _.isEmpty(compareIRIForecastTime?.lead_time) ||\n mapPreferencesCount === 2\n ) {\n setIsApplyLayer(false);\n } else {\n if (selectedParam?.weather_forecast_source_id === DATA_SOURCES.IRI.id) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time) ||\n mapPreferencesCount === 2\n ) {\n setIsApplyLayer(false);\n } else {\n setIsApplyLayer(true);\n }\n } else if (mapPreferencesCount < 2) {\n setIsApplyLayer(true);\n } else {\n setIsApplyLayer(false);\n }\n }\n } else if (mapPreferencesCount < 2) {\n setIsApplyLayer(true);\n } else {\n setIsApplyLayer(false);\n }\n }\n } else {\n if (region?.length) setShowToolTip(true);\n if (region.length || _.isEmpty(selectedParam) || mapPreferencesCount === 2) {\n setIsApplyLayer(false);\n } else {\n if (selectedParam?.forecast_data_source_id === DATA_SOURCES.IRI.id) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time) ||\n mapPreferencesCount === 2\n ) {\n setIsApplyLayer(false);\n } else {\n setIsApplyLayer(true);\n }\n } else if (mapPreferencesCount < 2) {\n setIsApplyLayer(true);\n } else {\n setIsApplyLayer(false);\n }\n if (!region?.length) setShowToolTip(false);\n }\n //let isUpdate = temporalAggregation?.value === 'median' || _.isEmpty(selectedParam) ? true : false;\n let isUpdate;\n if (\n (temporalAggregation?.value === 'median' || _.isEmpty(selectedParam)) &&\n selectedDataSource?.firstDataSource[0]?.id !== DATA_SOURCES.OPEN_WEATHER.id\n ) {\n if (isOpenWeather) {\n if (hasSelectedParamChart) {\n isUpdate = true;\n } else {\n isUpdate = false;\n }\n } else {\n isUpdate = true;\n }\n } else {\n if (selectedParam?.forecast_data_source_id === DATA_SOURCES.IRI.id) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time)\n ) {\n isUpdate = true;\n } else {\n isUpdate = false;\n }\n } else if (hasSelectedParamChart) {\n isUpdate = false;\n } else {\n isUpdate = true;\n }\n }\n setIsUpdateGraph(!isUpdate);\n }\n }, [\n isCompare,\n isClickedOnPlus,\n temporalAggregation,\n selectedDataSource.secondDataSource,\n region,\n initialSelectedDate,\n finalSelectedDate,\n selectedParam,\n IRIForecastTime,\n compareIRIForecastTime,\n mapPreferencesData,\n selectedDataSource.firstDataSource,\n ]);\n //for getting weather forecast data sources\n useEffect(() => {\n if (country) {\n props.handleCountry(country);\n }\n }, [country]);\n\n useEffect(() => {\n if (years) {\n setSelectedYearList(years);\n setSelectedDefaultYear(years[0]);\n }\n }, [years]);\n\n useEffect(() => {\n setSelectedDateRange([]);\n setSelectedDefaultDateRange(null);\n if (dates && dates?.length) {\n let arr = [];\n if (selectedDataSource) {\n if (selectedDataSource?.firstDataSource[0]?.name) {\n dates?.map(item => {\n arr.push({\n value: item.group_date\n ? selectedDataSource?.firstDataSource[0]?.name === 'ERPAS (Static)'\n ? moment(item.group_date).format(DISPLAY_DATE_FORMAT)\n : item.group_date\n : '',\n label: item.group_date\n ? selectedDataSource?.firstDataSource[0]?.name === 'ERPAS (Static)'\n ? moment(item.group_date).format(DISPLAY_DATE_FORMAT)\n : item.group_date\n : '',\n });\n });\n }\n }\n setSelectedDefaultDateRange(arr[0]);\n setSelectedDateRange(arr);\n props.handleSelectedDate(arr[0]?.label);\n }\n }, [dates, selectedDataSource.firstDataSource]);\n\n useEffect(() => {\n props.handleDefaultDataSource(isDefaultDataSource);\n }, [isDefaultDataSource]);\n\n useEffect(() => {\n if (Weather.weatherForecastSourcesData) {\n if (Weather.weatherForecastSourcesData.data) {\n const { result } = Weather.weatherForecastSourcesData.data;\n let options = [];\n if (result) {\n result?.map(item => {\n item?.data?.map(data_source => {\n const {\n forecast_data_source: {\n id,\n name,\n type,\n master_server,\n api_url,\n forecast_data_source_with_parameter: parameter,\n },\n } = data_source;\n return options.push({\n id,\n name,\n value: name,\n label: name,\n type,\n master_server,\n api_url,\n parameterData: parameter,\n category: item.category,\n });\n });\n });\n\n let secondDataSourceList = options?.filter(i => i.type === 'non-static');\n options.map(i => {\n if (i?.id === DATA_SOURCES.IRI.id) {\n secondDataSourceList.push(i);\n }\n });\n let optionsCopy = options;\n options = changeorder(optionsCopy);\n setDataSources(prev => ({\n ...prev,\n firstDataSources: options,\n secondDataSources: secondDataSourceList,\n }));\n } else {\n setDataSources(prev => ({\n ...prev,\n firstDataSources: [],\n secondDataSources: [],\n }));\n }\n }\n }\n }, [Weather.weatherForecastSourcesData]);\n useEffect(() => {\n if (dataSources?.firstDataSources?.length) {\n let selectedDataSourceParamList = dataSources?.firstDataSources?.filter(\n i => i.id === dataSourceId,\n );\n if (selectedDataSourceParamList[0]) {\n setSelectedDataSource(prev => ({\n ...prev,\n firstDataSource: selectedDataSourceParamList,\n }));\n setFirstDataSourceSelected(selectedDataSourceParamList);\n if (selectedDataSourceParamList[0].id !== DATA_SOURCES.OPEN_WEATHER.id) {\n if (isDefaultDataSource) setIsDefaultDataSource(false);\n }\n props.handleParamData({ values: selectedDataSourceParamList[0], fromCompare: false });\n }\n }\n }, [dataSources.firstDataSources, dataSourceId, isDefaultSelectedSourceId]);\n\n useEffect(() => {\n if (!isDefaultSelectedSourceId) {\n if (dataSources?.firstDataSources?.length) {\n const filterdefaultSource = dataSources?.firstDataSources?.filter(\n data => data.id === DATA_SOURCES.OPEN_WEATHER.id,\n );\n if (!selectedDataSource?.firstDataSource?.length && filterdefaultSource.length) {\n filterdefaultSource[0].parameterData.forEach(value => {\n value.type = filterdefaultSource[0].type;\n value.dataSource = filterdefaultSource[0].name;\n });\n props.handleParamData({ values: filterdefaultSource[0], fromCompare: false });\n setSelectedDataSource(prev => ({\n ...prev,\n firstDataSource: filterdefaultSource,\n }));\n setFirstDataSourceSelected(filterdefaultSource);\n if (!isDefaultDataSource) {\n setIsDefaultDataSource(true);\n }\n // let countryName = countryData.country_name ? countryData.country_name.split(' ') : '';\n let result = countryData.country_slug;\n // if (countryName.length > 1) {\n // result = countryName.join('_');\n // } else {\n // result = countryData.country_name;\n // }\n\n history.push({\n pathname: '/weather-forecast',\n search: `?Country=${result}&dataSourceId=${filterdefaultSource[0].id}`,\n state: {\n countryData: countryData,\n },\n });\n\n const country = JSON.stringify(countryData);\n localStorage.setItem('countryData', country);\n }\n }\n }\n }, [dataSources.firstDataSources]);\n\n useEffect(() => {\n if (region?.length) {\n //setIsClickedOnPlus(false);\n setIsUpdateGraph(true);\n }\n }, [region]);\n\n const setCompareToggle = () => {\n if (!region.length && _.isEmpty(location)) {\n setIsClickedOnPlus(!isClickedOnPlus);\n }\n };\n\n useEffect(() => {\n if (isCompare.some(item => item.name === 'graph' && item.selected)) {\n if (selectedDataSource.secondDataSource?.length) {\n let firstSource = selectedDataSource.firstDataSource[0];\n let secondSource = selectedDataSource.secondDataSource[0];\n let firstDataSource = '';\n let secondDataSource = '';\n for (const [key, value] of Object.entries(DATA_SOURCES)) {\n if (value.id === firstSource.id) {\n firstDataSource = value;\n }\n if (value.id === secondSource.id) {\n secondDataSource = value;\n }\n }\n if (firstSource?.id === secondSource?.id) {\n return;\n } else {\n /*\n Changed By: sai krishna thalla\n Reason: on selectin erpas and in compare selecting open weather and changing map to graph the dates of erpas are changing.\n Date: sep-5-2022\n */\n if (\n firstSource?.id !== DATA_SOURCES.IRI.id &&\n secondSource?.id !== DATA_SOURCES.IRI.id &&\n secondDataSource?.id !== DATA_SOURCES.OPEN_WEATHER.id &&\n secondDataSource?.id !== DATA_SOURCES.GFS_NOAA.id &&\n secondDataSource?.id !== DATA_SOURCES.ERPAS.id\n ) {\n let date = renderValidCommonFilterDates(\n firstDataSource,\n secondDataSource,\n updatedSelectedDate,\n firstSource,\n );\n if (!_.isEmpty(date)) {\n setSelectedDate(prev => {\n return {\n ...prev,\n graph: date,\n };\n });\n }\n }\n }\n }\n }\n }, [\n isCompare,\n selectedDataSource.secondDataSource,\n selectedDataSource.firstDataSource,\n updatedSelectedDate,\n ]);\n\n useEffect(() => {\n if (\n selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES.IRI.id &&\n selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id\n ) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time) ||\n _.isEmpty(compareIRIForecastTime?.year) ||\n _.isEmpty(compareIRIForecastTime?.month) ||\n _.isEmpty(compareIRIForecastTime?.lead_time)\n ) {\n setIsApplyLayer(false);\n } else {\n setIsApplyLayer(true);\n }\n } else if (\n selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES.IRI.id &&\n selectedDataSource?.secondDataSource[0]?.id\n ) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time)\n ) {\n setIsApplyLayer(false);\n } else {\n setIsApplyLayer(true);\n }\n } else if (\n selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id &&\n selectedDataSource?.firstDataSource[0]?.id\n ) {\n if (\n _.isEmpty(compareIRIForecastTime?.year) ||\n _.isEmpty(compareIRIForecastTime?.month) ||\n _.isEmpty(compareIRIForecastTime?.lead_time)\n ) {\n setIsApplyLayer(false);\n } else {\n setIsApplyLayer(true);\n }\n }\n }, [IRIForecastTime, compareIRIForecastTime]);\n\n useEffect(() => {\n if (!_.isEmpty(region)) {\n if (selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES.IRI.id) {\n if (\n _.isEmpty(IRIForecastTime?.year) ||\n _.isEmpty(IRIForecastTime?.month) ||\n _.isEmpty(IRIForecastTime?.lead_time)\n ) {\n setIsUpdateGraph(false);\n } else {\n setIsUpdateGraph(true);\n }\n }\n }\n }, [region, IRIForecastTime]);\n\n useEffect(() => {\n if (!_.isEmpty(location)) {\n // const currentLoc = location.toLocaleLowerCase();\n // // const val1 = false;\n // if (\n // location.length > 9 &&\n // // val1 &&\n // currentLoc.indexOf('india') === -1 &&\n // currentLoc.indexOf('pakistan') === -1 &&\n // currentLoc.indexOf('nepal') === -1 &&\n // currentLoc.indexOf('sri lanka') === -1 &&\n // currentLoc.indexOf('afganistan') === -1 &&\n // currentLoc.indexOf('bhutan') === -1 &&\n // currentLoc.indexOf('bangladesh') === -1\n // ) {\n // showError('Please select location inside South Asia countries only.');\n // setLocation('');\n // }\n setAdvanceSearch(false);\n }\n }, [location]);\n\n useEffect(() => {\n if (isAdvanceSearch) {\n if (!_.isEmpty(location)) {\n if (autoCompleteRef && !_.isEmpty(autoCompleteRef?.current)) {\n autoCompleteRef.current.value = '';\n }\n //setSelectedOption(parentCountryObj);\n //handleOptions(countryList, parentCountryObj, 'country');\n props.handleCordinates(\n [\n selectedOption?.latitude ? selectedOption.latitude : INDIA_COORDINATE.lat,\n selectedOption?.longitude ? selectedOption.longitude : INDIA_COORDINATE.long,\n ],\n selectedOption?.zoom_level ? selectedOption.zoom_level : INDIA_COORDINATE.zoom_level,\n );\n\n setLocation('');\n setSearchMarker('');\n props.handleCountry(country);\n props.handleAdvancedSearch({\n state: state?.value || '',\n district: selectedDisctrict?.value || '',\n });\n }\n }\n }, [isAdvanceSearch]);\n\n useEffect(() => {\n if (isAdvanceSearch && _.isEmpty(location)) {\n if (!_.isEmpty(selectedOption)) {\n const { latitude, longitude, zoom_level } = selectedOption;\n return props.handleCordinates(\n [\n latitude ? latitude : INDIA_COORDINATE.lat,\n longitude ? longitude : INDIA_COORDINATE.long,\n ],\n zoom_level ? zoom_level : INDIA_COORDINATE.zoom_level,\n );\n }\n }\n }, [isAdvanceSearch, location]);\n\n useEffect(() => {\n if (!_.isEmpty(selectedRegion) && country === SOUTH_ASIA_CONST.name) {\n props.handleSelectedRegion(selectedRegion?.value);\n } else {\n props.handleSelectedRegion('');\n }\n }, [selectedRegion, location, country]);\n\n const handleDateSelectionChange = selectedItem => {\n setSelectedDefaultDateRange(selectedItem);\n props.handleSelectedDate(selectedItem.label);\n };\n\n useEffect(() => {\n if (!_.isEmpty(selectedDefaultYear)) {\n props.handleSelectedYear(selectedDefaultYear.label);\n } else {\n props.handleSelectedYear(null);\n }\n }, [selectedDefaultYear]);\n\n const changeorder = dynamicIndices => {\n let indices = [];\n for (let i = 0; i < weatherForecastIndices.length; i++) {\n let a = weatherForecastIndices[i];\n for (let j = 0; j < dynamicIndices.length; j++) {\n if (a == dynamicIndices[j].name) {\n indices.push(dynamicIndices[j]);\n }\n }\n }\n return indices;\n };\n\n const handleYearSelectionChange = selectedItem => {\n setSelectedDefaultYear(selectedItem);\n };\n\n const handleEcmwfProducts = e => {\n setSelectedEcmwfProducts(e);\n };\n\n const handleSearch = places => {\n if (!_.isEmpty(places)) {\n const { formatted_address, geometry, address_components } = places;\n const lat = geometry?.location?.lat();\n const lng = geometry?.location?.lng();\n\n address_components?.map(item => {\n const { types, long_name } = item;\n\n if (types[0] === ADDRESS_CONSTS.COUNTRY) {\n props.handleAdvancedSearch({ country: long_name });\n } else if (types[0] === ADDRESS_CONSTS.STATE) {\n props.handleAdvancedSearch({ state: long_name });\n } else if (types[0] === ADDRESS_CONSTS.DISTRICT) {\n props.handleAdvancedSearch({ district: long_name });\n }\n });\n if (isNumber(lat) && isNumber(lng)) {\n setCordinates({ lat, lng });\n }\n setLocation(formatted_address);\n } else {\n setLocation('');\n }\n };\n\n const isLatLng = input => {\n // Regular expression for standard numerical lat,lng format with optional spaces\n const standardLatLngPattern = /^\\s*-?\\d+(\\.\\d+)?\\s*,\\s*-?\\d+(\\.\\d+)?\\s*$/;\n // Regular expression for degrees and direction format with optional spaces\n const degreesLatLngPattern = /^\\s*-?\\d+(\\.\\d+)?\\s*°?\\s*[NS]\\s*,\\s*-?\\d+(\\.\\d+)?\\s*°?\\s*[EW]\\s*$/;\n\n return standardLatLngPattern.test(input) || degreesLatLngPattern.test(input);\n };\n\n const handleFilter = async (loc, cordinates) => {\n const islatlng = isLatLng(loc);\n if (islatlng) {\n const locArray = loc.split(',');\n const lat = parseCoordinate(locArray?.[0]);\n const lng = parseCoordinate(locArray?.[1]);\n\n if (locArray?.length === 2 && isNumber(parseFloat(lat)) && isNumber(parseFloat(lng))) {\n const point = turf.point([parseFloat(lng), parseFloat(lat)]);\n const isInsideAnyPolygon = countryJson.features.some(feature => {\n return turf.booleanPointInPolygon(point, feature);\n });\n if (isInsideAnyPolygon) {\n setSearchMarker([parseFloat(lat), parseFloat(lng)]);\n props.handleCordinates([parseFloat(lat), parseFloat(lng)], DISTRICT_ZOOM_LEVEL);\n } else {\n setSearchMarker();\n showError(\n `Please select location inside ${selectedLocation?.country?.name} country only.`,\n );\n }\n } else {\n setSearchMarker();\n showError('Please enter valid data .');\n }\n } else {\n const responseData = await axios.get(\n `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(\n JSON.stringify(loc),\n )}&key=AIzaSyAzWsZ_PyD0lshvP-sCwWP6d_1wzE0dYA0`,\n );\n if (responseData?.data?.results?.length) {\n const point = turf.point([\n parseFloat(responseData?.data?.results?.[0]?.geometry?.location?.lng),\n parseFloat(responseData?.data?.results?.[0]?.geometry?.location?.lat),\n ]);\n const isInsideAnyPolygon1 = countryJson.features.some(feature => {\n return turf.booleanPointInPolygon(point, feature);\n });\n\n if (!isInsideAnyPolygon1) {\n setSearchMarker();\n showError(\n `Please select location inside ${selectedLocation?.country?.name} country only.`,\n );\n setLocation('');\n } else {\n setSearchMarker([\n responseData?.data?.results?.[0]?.geometry?.location?.lat,\n responseData?.data?.results?.[0]?.geometry?.location?.lng,\n ]);\n props.handleCordinates(\n [\n responseData?.data?.results?.[0]?.geometry?.location?.lat,\n responseData?.data?.results?.[0]?.geometry?.location?.lng,\n ],\n DISTRICT_ZOOM_LEVEL,\n );\n }\n } else {\n setSearchMarker();\n showError(`Please select location inside ${selectedLocation?.country?.name} country only.`);\n }\n }\n\n setCordinates({ lat: '', lng: '' });\n };\n\n //map marker on the basis of selected country\n //get current location\n const getCurrentLocation = () => {\n if ('geolocation' in navigator) {\n let latitude = '';\n let longitude = '';\n /* geolocation is available */\n navigator.geolocation.getCurrentPosition(position => {\n latitude = position.coords.latitude;\n longitude = position.coords.longitude;\n getAddress(latitude, longitude, { fromCurrentLocation: true });\n if (latitude && longitude)\n props.handleCordinates([latitude, longitude], DISTRICT_ZOOM_LEVEL);\n });\n } else {\n /* geolocation IS NOT available */\n }\n };\n\n const getAddress = (lat, lng, { fromCurrentLocation }) => {\n if (isNumber(lat) && isNumber(lng) && fromCurrentLocation) {\n setCordinates({ lat, lng });\n }\n Geocode.fromLatLng(lat, lng).then(\n response => {\n let country, state, district;\n const { address_components: components } = response.results[0];\n for (let i = 0; i < components.length; i++) {\n for (let j = 0; j < components[i].types.length; j++) {\n if (components[i].types[j] === ADDRESS_CONSTS.COUNTRY) {\n country = components[i].long_name;\n if (fromCurrentLocation) props.handleCountry(country);\n else {\n setCurrenUserLocation(country);\n getUserLocationBasedOnIP(country);\n }\n }\n if (components[i].types[j] === ADDRESS_CONSTS.STATE) {\n state = components[i].long_name;\n if (fromCurrentLocation) props.handleAdvancedSearch({ state: state });\n }\n if (components[i].types[j] === ADDRESS_CONSTS.DISTRICT) {\n district = components[i].long_name;\n if (fromCurrentLocation) props.handleAdvancedSearch({ district: district });\n }\n }\n }\n if (fromCurrentLocation) {\n setLocation(`${district}, ${state}, ${country}`);\n props.handleAdvancedSearch({ state: state });\n props.handleAdvancedSearch({ district: district });\n }\n },\n error => {\n console.error(error);\n },\n );\n };\n const handleOnChange = selectedOptions => {\n setNoaaMaxEndDate(false);\n clearForecastData();\n const {\n category,\n id,\n label,\n name,\n parameterData,\n type,\n value,\n api_url,\n master_server,\n } = Array.isArray(selectedOptions) ? selectedOptions[0] : selectedOptions;\n let selectedDataArray = [];\n const selectedObj = {\n category,\n id,\n label,\n name,\n parameterData,\n type,\n value,\n api_url,\n master_server,\n };\n selectedDataArray.push(selectedObj);\n if (id) {\n // let countryName = countryData.country_name ? countryData.country_name.split(' ') : '';\n let result = countryData.country_slug;\n // if (countryName.length > 1) {\n // result = countryName.join('_');\n // } else {\n // result = countryData.country_name;\n // }\n\n history.push({\n pathname: '/weather-forecast',\n search: `?Country=${result}&dataSourceId=${id}`,\n state: {\n countryData: countryData,\n },\n });\n\n const country = JSON.stringify(countryData);\n localStorage.setItem('countryData', country);\n }\n if (isDefaultDataSource) {\n setIsDefaultDataSource(false);\n }\n\n let isNonStaticDataSource = selectedObj.type === 'non-static';\n if (isNonStaticDataSource) {\n let secondDataSourceList = dataSources?.firstDataSources?.filter(\n i => i.type === 'non-static',\n );\n dataSources?.firstDataSources.map(i => {\n if (i?.id === DATA_SOURCES.IRI.id) {\n secondDataSourceList.push(i);\n }\n });\n setDataSources(prev => ({\n ...prev,\n secondDataSources: secondDataSourceList,\n }));\n } else {\n //let secondDataSourceList = dataSources?.firstDataSources;\n let isNonStaticDataSource = selectedObj.type === 'non-static';\n if (isNonStaticDataSource) {\n let secondDataSourceList = dataSources?.firstDataSources?.filter(\n i => i.type === 'non-static',\n );\n dataSources?.firstDataSources.map(i => {\n if (i?.id === DATA_SOURCES.IRI.id) {\n secondDataSourceList.push(i);\n }\n });\n\n setDataSources(prev => ({\n ...prev,\n secondDataSources: secondDataSourceList,\n }));\n }\n }\n setSelectedDataSource(prev => ({\n ...prev,\n firstDataSource: selectedDataArray,\n }));\n setFirstDataSourceSelected(selectedDataArray);\n props.handleParamData({ values: selectedDataArray[0], fromCompare: false });\n props.handleProps({\n dataSources: selectedDataArray,\n initialSelectedDate,\n });\n\n setSelectedDefaultYear(null);\n clearDatesHandler();\n setCompareIRIForecastTime({\n year: null,\n month: null,\n lead_time: null,\n });\n\n if (selectedOptions.name === DATA_SOURCES.IRI.name) {\n setIsIriNotSelected(false);\n let defaultSelectedAggregation = TEMPORAL_AGGREGATION?.find(item => item.name === 'Mean');\n if (!_.isEmpty(defaultSelectedAggregation)) {\n setTemporalAggregation(defaultSelectedAggregation);\n }\n }\n };\n\n // const handleFinalForecastYearMonth = type => {\n // return moment(selectedForecastCompareYearMonth?.map[type]).format('YYYY-MM');\n // };\n\n const handleCompareDataSourceChange = selectedOptions => {\n setNoaaCompareMaxEndDate(false);\n const {\n category,\n id,\n label,\n name,\n parameterData,\n type,\n value,\n api_url,\n master_server,\n } = Array.isArray(selectedOptions) ? selectedOptions[0] : selectedOptions;\n let selectedDataArray = [];\n const selectedObj = {\n category,\n id,\n label,\n name,\n parameterData,\n type,\n value,\n api_url,\n master_server,\n };\n selectedDataArray.push(selectedObj);\n setSelectedDataSource(prev => ({\n ...prev,\n secondDataSource: selectedDataArray,\n }));\n props.handleProps({\n compareDataSource: selectedDataArray,\n finalSelectedDate,\n });\n props.handleCompareParamsData(selectedDataArray[0], selectedDataSource?.firstDataSource[0]);\n setCompareIRIForecastTime({\n year: null,\n month: null,\n lead_time: null,\n });\n };\n\n const onSubmitHandler = e => {\n e.preventDefault();\n };\n\n const handleForecastTimeYear = e => {\n forecastTimeYearHandler(e);\n setIsIriNotSelected(false);\n };\n\n const handleForecastTimeMonth = e => {\n forecastTimeMonthHandler(e);\n setIsIriNotSelected(false);\n };\n\n const handleCompareForecastTimeYear = e => {\n compareForecastTimeYearHandler(e);\n };\n\n const handleCompareForecastTimeMonth = e => {\n compareForecastTimeMonthHandler(e);\n };\n\n const handleForecastLeadTimeChange = e => {\n // formData.forecast_lead_time = e;\n //setFormData({ ...formData });\n forecastLeadTimeHandler(e);\n setIsIriNotSelected(true);\n };\n\n const handleCompareForecastLeadTimeChange = e => {\n forecastCompareLeadTimeHandler(e);\n };\n\n //handle apply layers onclick\n const handleApplyLayers = () => {\n props.showCharts(false);\n props.handleApplyLayers(true);\n };\n\n //display chart\n const displayChart = () => {\n props.handleTimeSeries();\n props.showCharts(true);\n };\n\n const handleTemporalAggregation = selectedOption => {\n setTemporalAggregation(selectedOption);\n };\n const handleCompareLocationRender = () => {\n let isGraphCompare = isCompare.find(item => item.name === 'graph' && item.selected);\n if (isGraphCompare) {\n return (\n <>\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n {!_.isEmpty(countryData) && countryData?.country_name !== SOUTH_ASIA_COUNTRY\n ? 'Select State'\n : 'Select Region'}\n \n \n
\n {compareCountry && compareLocation?.country?.name !== SOUTH_ASIA_CONST.name && (\n \n
\n )}\n {compareState && compareDistrictList?.length ? (\n \n
\n ) : (\n ''\n )}\n \n \n );\n }\n };\n\n const renderAPIParameterOptions = (list, action) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n let default_option =\n action === 'country'\n ? {\n name: SOUTH_ASIA_CONST.name,\n label: SOUTH_ASIA_CONST.name,\n value: SOUTH_ASIA_CONST.id,\n id: SOUTH_ASIA_CONST.id,\n }\n : { value: '', label: 'Select', id: 'select' };\n if (\n action !== 'forecast_year_list' &&\n action !== 'forecast_month_list' &&\n action !== 'forecast_lead_time_list' &&\n action !== 'compare_forecast_year_list' &&\n action !== 'compare_forecast_month_list' &&\n action !== 'compare_forecast_lead_time_list'\n ) {\n options.push(default_option);\n }\n params.map(param => {\n options.push(param);\n return true;\n });\n return options;\n }\n }\n };\n\n const renderIRIParameterOptions = (list, action) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n // let default_option = action === \"country\" ? { name: 'South Asia', label: 'South Asia', value: SOUTH_ASIA_CONST.id, id: SOUTH_ASIA_CONST.id } : { value: '', label: 'select', id: 'select' };\n // if(action !== \"forecast_year_list\" && action !== \"forecast_month_list\" && action !== \"forecast_lead_time_list\" && action !== \"compare_forecast_year_list\" && action !== \"compare_forecast_month_list\" && action !== \"compare_forecast_lead_time_list\"){\n // options.push(default_option);\n // }\n params.map(param => {\n if (!_.isEmpty(param)) {\n let data = {\n value: param?.name,\n label: `${param?.name}`,\n id: param?.id,\n monthValue: param?.indexValue,\n };\n options.push(data);\n }\n return true;\n });\n return options;\n }\n }\n };\n\n const handleAdvanceSearchRender = () => {\n if (fromStaticResources) return <>;\n return (\n \n \n
\n {country && selectedLocation?.country?.name !== SOUTH_ASIA_CONST.name && (\n \n {TRANSLATIONS.FILTER.ADVANCE_SEARCH}\n setAdvanceSearch(false)}>\n {t('FILTER.HIDE')}\n \n
\n {/* \n
*/}\n \n
\n )}\n {state && districtList?.length ? (\n \n
\n ) : (\n ''\n )}\n \n );\n };\n\n const handleOptions = (options, newValue, action) => {\n if (options && options.length) {\n let selectedOption = options.find(item => item.name === newValue?.value);\n if (selectedOption || action.name === 'country') {\n if (action.name === 'country') {\n if (newValue.name === SOUTH_ASIA_CONST.name) {\n setDefaultSelectedOption(newValue);\n setSelectedOption(newValue);\n setSelectedLocation(prev => {\n return {\n ...prev,\n [action.name]: newValue || '',\n };\n });\n } else {\n setDefaultSelectedOption(selectedOption);\n setSelectedOption(selectedOption);\n }\n } else {\n setSelectedOption(selectedOption);\n }\n } else {\n if (action.name === 'country') {\n setDefaultSelectedOption('');\n }\n setSelectedOption('');\n }\n if (\n (newValue?.name !== SOUTH_ASIA_CONST.name && !_.isEmpty(selectedOption)) ||\n newValue?.id === 'select'\n )\n setSelectedLocation(prev => {\n return {\n ...prev,\n country: action.name === 'country' ? selectedOption : prev.country,\n state:\n action.name === 'country'\n ? ''\n : action.name === 'state'\n ? selectedOption\n : prev.state,\n district: action.name === 'country' || action.name === 'state' ? '' : selectedOption,\n };\n });\n }\n };\n\n const handleCompareOptions = (options, newValue, action) => {\n if (options && options.length) {\n if (newValue.value) {\n let selectedOption = options.find(item => item.name === newValue.value);\n if (!_.isEmpty(selectedOption)) {\n if (action.name === 'country') {\n setDefaultCompareSelectedOption(selectedOption);\n }\n setCompareSelectedOption(selectedOption);\n setCompareLocation(prev => {\n return {\n ...prev,\n [action.name]: selectedOption,\n };\n });\n }\n } else {\n if (action.name === 'country') {\n setDefaultCompareSelectedOption('');\n }\n setCompareSelectedOption('');\n setCompareLocation(prev => {\n return {\n ...prev,\n [action.name]: '',\n };\n });\n }\n }\n };\n\n //handling selected data from selector and setting to state\n const handleSelectedItem = (newValue, action) => {\n if (action.name === 'country') {\n props.handleCountry(newValue.value);\n setCountry(newValue.value);\n\n setParentCountryObj(newValue);\n handleOptions(countryList, newValue, action);\n setState(null);\n props.handleAdvancedSearch({ state: '', district: '' });\n if (newValue.name === SOUTH_ASIA_CONST.name) {\n setSelectedRegion(newValue);\n setCountry(newValue.name);\n setStateList([]);\n }\n handleCompareSelectedItem(newValue, action);\n } else if (action.name === 'state') {\n setState(newValue);\n setSelectedDistrict(null);\n props.handleAdvancedSearch({ state: newValue.value, district: '' });\n if (newValue.value) {\n setParentStateObj(newValue);\n handleOptions(stateList, newValue, action);\n } else {\n // handleOptions(countryList, parentCountryObj, 'country');\n setSelectedOption(parentCountryObj);\n setSelectedLocation(prev => {\n return {\n ...prev,\n state: {},\n };\n });\n }\n\n if (newValue.value === '') setDistrictList([]);\n if (_.isEmpty(compareCountry) || country === compareCountry) {\n handleCompareSelectedItem(newValue, action);\n }\n } else if (action.name === 'district') {\n setSelectedDistrict(newValue);\n\n if (newValue.value !== '') {\n handleOptions(districtList, newValue, action);\n } else {\n setSelectedOption(parentStateObj);\n setSelectedLocation(prev => {\n return {\n ...prev,\n district: {},\n };\n });\n //handleOptions(stateList, parentStateObj, 'state');\n }\n props.handleAdvancedSearch({ district: newValue.value });\n if (_.isEmpty(compareState) || state?.value === compareState?.value) {\n handleCompareSelectedItem(newValue, action);\n }\n }\n };\n\n //handling selected location for compare\n const handleCompareSelectedItem = (newValue, action) => {\n if (action.name === 'country') {\n props.handleCompareSearch({ country: newValue.value, state: '', district: '' });\n setCompareCountry(newValue.value);\n handleCompareOptions(countryList, newValue, action);\n setCompareState(null);\n if (newValue.name === SOUTH_ASIA_CONST.name) {\n props.handleCompareSearch({ country: newValue.name });\n setDefaultCompareSelectedOption(newValue);\n setCompareSelectedOption(newValue);\n setCompareLocation(prev => {\n return {\n ...prev,\n [action.name]: newValue,\n };\n });\n setCompareStateList([]);\n }\n if (newValue.value === '') setCompareStateList([]);\n } else if (action.name === 'state') {\n setCompareState(newValue);\n setSelectedCompareDistrict(null);\n props.handleCompareSearch({ state: newValue.value, district: '' });\n handleCompareOptions(compareStateList, newValue, action);\n props.stateValue(newValue);\n if (newValue.value === '') setCompareDistrictList([]);\n } else if (action.name === 'district') {\n props.handleCompareSearch({ district: newValue.value });\n handleCompareOptions(compareDistrictList, newValue, action);\n setSelectedCompareDistrict(newValue);\n }\n };\n\n const handleCompareToggle = ({ target }) => {\n let compareData = isCompare;\n const nextCompare = compareData.map(item => {\n if (item.value === target.value) {\n return {\n ...item,\n selected: target.checked,\n };\n } else {\n return {\n ...item,\n selected: false,\n };\n }\n });\n setIsCompare(nextCompare);\n setCompareData(target.value);\n setCompareIRIForecastTime({\n year: null,\n month: null,\n lead_time: null,\n });\n };\n const renderCompareDates = isCompare => {\n let isGraphCompare = isCompare.find(item => item.name === 'graph');\n if (!isGraphCompare.selected) {\n return selectedDataSource?.secondDataSource[0]?.id !== DATA_SOURCES.IRI.id ? (\n <>\n \n
\n {renderCompareDates(isCompare)}\n \n );\n };\n const handleOnPlaceChange = event => {\n if (event && event?.target && event?.target?.value === '') {\n setLocation('');\n\n props.handleCountry(country);\n props.handleAdvancedSearch({\n state: state?.value || '',\n district: selectedDisctrict?.value || '',\n });\n } else {\n setLocation(event.target.value);\n }\n };\n\n // const handleInitialForecastYearMonth = type => {\n // return moment(selectedForecastYearMonth?.map[type]).format('YYYY-MM');\n // };\n\n // const handleforecastYearMonth = e => {\n // forecastYearMonthHandler(e.target.value);\n // };\n // const isFirstRun = useRef(true);\n\n const handleInitialDate = type => {\n if (isCompare?.length && isCompare.some(item => item.name === 'graph' && item.selected)) {\n return initialSelectedDate?.graph[type];\n } else {\n return initialSelectedDate?.map[type];\n }\n };\n\n useEffect(() => {\n if (selectedDataSource?.firstDataSource[0]?.label === 'GFS - NOAA') {\n const nwdate = new Date(updatedSelectedDate?.startDate);\n nwdate.setDate(nwdate.getDate() + 15);\n const x = moment(nwdate).format(DATE_FORMAT);\n if (new Date(x).getTime() < new Date(updatedSelectedDate?.maxEndDate).getTime()) {\n setSelectedDate(prev => {\n return {\n ...prev,\n map: {\n ...initialSelectedDate.map,\n // startDate: e.target.value,\n endDate: x,\n },\n graph: {\n ...initialSelectedDate.graph,\n // startDate: e.target.value,\n endDate: x,\n },\n };\n });\n setFinalNoaaEndDate(x);\n setFinalNoaaMaxEndDate(x);\n } else if (new Date(x).getTime() > new Date(updatedSelectedDate?.maxEndDate).getTime()) {\n setSelectedDate(prev => {\n return {\n ...prev,\n map: {\n ...initialSelectedDate.map,\n // startDate: e.target.value,\n endDate: updatedSelectedDate?.maxEndDate,\n },\n graph: {\n ...initialSelectedDate.graph,\n // startDate: e.target.value,\n endDate: updatedSelectedDate?.maxEndDate,\n },\n };\n });\n setFinalNoaaEndDate(updatedSelectedDate?.maxEndDate);\n setFinalNoaaMaxEndDate(updatedSelectedDate?.maxEndDate);\n } else {\n setSelectedDate(prev => {\n return {\n ...prev,\n map: {\n ...initialSelectedDate.map,\n // startDate: e.target.value,\n endDate: updatedSelectedDate['endDate'],\n },\n graph: {\n ...initialSelectedDate.graph,\n // startDate: e.target.value,\n endDate: updatedSelectedDate['endDate'],\n },\n };\n });\n setFinalNoaaEndDate(updatedSelectedDate['endDate']);\n setFinalNoaaMaxEndDate(updatedSelectedDate['endDate']);\n }\n }\n }, [updatedSelectedDate]);\n\n const renderToolTip = () => {\n return (\n \n \n {t('FILTER.EXPAND_BAR')}\n \n props.setBar(!isHideBar)}\n size={25}\n />\n \n \n
\n ) : (\n \n \n \n \n {TRANSLATIONS.FILTER.APPLY_LAYERS}\n \n {showToolTip && region?.length ? (\n \n {TRANSLATIONS.FILTER.PLEASE_REMOVE_MARKERS}\n \n ) : (\n ''\n )}\n {showMapPreferenceTooltip && !showToolTip ? (\n \n {TRANSLATIONS.FILTER.PLEASE_REMOVE_MAP_PREFERENCE_LAYER}\n \n ) : (\n ''\n )}\n
\n \n \n \n
\n ) : (\n ''\n )}\n {!isAdvanceSearch && !fromStaticResources ? (\n \n setAdvanceSearch(!isAdvanceSearch)}\n >\n {' '}\n
\n ) : (\n ''\n )}\n {isAdvanceSearch ? handleAdvanceSearchRender() : null}\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\n \n onHanldeEcmwfCountry(e)}\n onChange={handleSelectedItem}\n isMulti={false}\n required={true}\n value={defaultSelectedOption}\n isDisabled={\n !_.isEmpty(countryData) &&\n countryData?.country_name !== SOUTH_ASIA_COUNTRY\n }\n />\n
\n ) : (\n ''\n )}\n \n
\n {!fromStaticResources ? (\n selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES.IRI.id ? (\n <>\n \n \n
\n \n \n {t('DROUGHT_MONITORING.CLICK_HERE_TO_KNOW_MORE')}\n \n \n
\n \n
\n \n ) : (\n <>\n \n {\n if (selectedDataSource?.firstDataSource[0]?.label === 'GFS - NOAA') {\n setNoaaMaxEndDate(true);\n // handleSetNoaaEndDate();\n }\n setSelectedDate(prev => {\n return {\n ...prev,\n map: {\n ...initialSelectedDate.map,\n startDate: e.target.value,\n },\n graph: {\n ...initialSelectedDate.graph,\n startDate: e.target.value,\n },\n };\n });\n setUpdatedSelectedDate(prevdate => {\n return {\n ...prevdate,\n startDate: e.target.value,\n };\n });\n }}\n min={handleInitialDate('minStartDate')}\n max={handleInitialDate('maxStartDate')}\n disabled={isOpenWeatherDataSource(selectedDataSource?.firstDataSource)}\n />\n {\n setFinalNoaaEndDate(e.target.value);\n setSelectedDate(prev => {\n return {\n ...prev,\n map: {\n ...initialSelectedDate.map,\n endDate: e.target.value,\n },\n graph: {\n ...initialSelectedDate.graph,\n endDate: e.target.value,\n },\n };\n });\n if (selectedDataSource?.firstDataSource[0]?.label !== 'GFS - NOAA') {\n setUpdatedSelectedDate(prevdate => {\n return {\n ...prevdate,\n endDate: e.target.value,\n };\n });\n }\n }}\n min={handleInitialDate('startDate')}\n max={\n noaaMaxEndDate ? finalNoaaMaxEndDate : handleInitialDate('maxEndDate')\n }\n disabled={isOpenWeatherDataSource(selectedDataSource?.firstDataSource)}\n />\n
\n \n )\n ) : (\n <>\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\n \n \n handleEcmwfProducts(e)}\n isMulti={false}\n required={true}\n />\n
\n ) : (\n ''\n )}\n\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\n \n \n handleOnChangeBaseTime(e)}\n isMulti={false}\n required={true}\n />\n
\n ) : (\n ''\n )}\n\n {SHOW_VALIDTIME_AND_LAYERS.includes(selectedEcmwfProducts?.slug) &&\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\n \n \n handleOnChangeValidTime(e)}\n // onChange={e => handleEcmwfProducts(e)}\n isMulti={false}\n required={true}\n />\n
\n ) : (\n ''\n )}\n\n {selectedEcmwfProducts?.slug === PARAMETER_SLUGS.SOIL_MOISTURE &&\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\n \n \n handleOnChangeValidLayer(e)}\n isMulti={false}\n required={true}\n />{' '}\n
\n ) : (\n ''\n )}\n\n {selectedEcmwfProducts.slug === PARAMETER_SLUGS.PRECEIPITATION_SEAS5 &&\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\n \n \n handleOnChangeForecastType(e)}\n />{' '}\n
\n ) : (\n ''\n )}\n\n {SHOW_DAY_AND_QUANTILE.includes(selectedEcmwfProducts?.slug) &&\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\n \n \n handleOnChangeDays(e)}\n />{' '}\n
\n ) : (\n ''\n )}\n\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ERPAS (Static)' ? (\n \n \n handleOnChangeQuantile(e)}\n />{' '}\n
\n \n handleDateSelectionChange(e)}\n isMulti={false}\n required={true}\n />\n
\n ) : (\n ''\n )}\n\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ERPAS (Static)' ? (\n \n handleYearSelectionChange(e)}\n isMulti={false}\n required={true}\n />\n
\n ) : (\n ''\n )}\n \n )}\n {!fromStaticResources &&\n !isOpenWeather &&\n selectedDataSource?.firstDataSource[0]?.name != 'IRI' ? (\n \n
\n ) : (\n ''\n )}\n {!fromStaticResources && (\n \n
\n \n
\n \n {isClickedOnPlus && !region.length ? (\n addMoreDateFieldWhenClickedOnPlus()\n ) : (\n \n
\n )}\n {!fromStaticResources && (\n <>\n \n \n {t('LEAFLET_WRAPPER.PARAMETERS')}\n {isOpen ? \n {params?.parameterData?.map((item) => {\n const { parameter, type } = item;\n if (type === '' || type === 'non-static') {\n return parameter.map((p,index) => {\n return (\n \n );\n });\n } else {\n return (\n <>\n \n {isParameterOpen && selectedParent === item.type && (\n \n \n
\n \n )}\n \n );\n }\n })}\n \n
\n \n );\n};\n\nParameterList.propTypes = {\n initialParams: PropTypes.string,\n handleParameters: PropTypes.func,\n dataSourceId: PropTypes.string,\n};\n\nexport default ParameterList;\n","import React from 'react';\n\nimport 'leaflet-side-by-side';\nimport 'leaflet/dist/leaflet.css';\n\nimport '../../../assets/CSS/LeafletWrapper.css';\nimport { LayersControlProvider } from './LayerControlContext';\nimport ParameterList from '../../../Components/Parameters';\n\n// Classes used by Leaflet to position controls\n// const POSITION_CLASSES = {\n// bottomleft: 'leaflet-bottom leaflet-left',\n// bottomright: 'leaflet-bottom leaflet-right',\n// topleft: 'leaflet-top leaflet-left',\n// topright: 'leaflet-top leaflet-right',\n// };\n\nfunction LayerControl({\n // position,\n children,\n isOpenWeather,\n handleParameters,\n handleDataSourceId,\n params,\n dataSourceId,\n isHideBar,\n}) {\n // const positionClass = (position && POSITION_CLASSES[position]) || POSITION_CLASSES.topright;\n return (\n \n
\n \n <>\n
\n {children}\n ' + labels.join('
');\n }\n else{\n if(layer.units){\n containerDiv.innerHTML = layer?.dataSource === 'IRI'\n ? ''+(layer?.dataSource) + '
' + ` White indicates Climatological odds
` +\n labels.join('
') +\n '
' +\n (layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\n ' ' +\n '(' +\n layer.units +\n ')' +\n '
'\n : ''+(layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\" \" +\"(\" + layer.units+\")\" + '
' + labels.join('
');\n }else{\n if(layer.dataSource === DRY_SPELL.FINAL_DROUGHT_MAP){\n containerDiv.innerHTML = ''+layer.dataSource + '
' + labels.join('
');\n }else{\n /**\n * added by sai krishna thalla\n * reason: lulc legends names are not displaying their respective label names\n * date: 19-sep-2022\n */\n containerDiv.innerHTML = ''+ (layer?.fromMapPreferences ? layer?.dataSource == LAND_USE_LAND_COVER ? (layer.id):(layer?.dataSource) : layer.parameter) + '
' + labels.join('
');\n }\n }\n }\n //\n let containerOfContainerDiv = L.DomUtil.create('div');\n containerOfContainerDiv.className= \"container-of-container-div\"\n let datesContainer = L.DomUtil.create('div');\n const monthSpanContainer = L.DomUtil.create(\"div\");\n datesContainer.className = \"discrete-legend-container-of-container-div\"\n monthSpanContainer.className = \"dates-span-container-iri\";\n if (layer?.selectedDates?.startDate && layer?.selectedDates?.endDate){\n datesContainer.innerHTML = ' ' + layer.selectedDates.startDate + \" to \" + layer.selectedDates.endDate + ' '\n containerOfContainerDiv.appendChild(datesContainer)\n \n \n if (layer?.forecastMonth) {\n monthSpanContainer.innerHTML = `${layer?.forecastMonth} `;\n containerOfContainerDiv.appendChild(monthSpanContainer);\n legendDiv.appendChild(containerOfContainerDiv);\n }\n legendDiv.append(containerOfContainerDiv)\n containerOfContainerDiv.appendChild(containerDiv)\n\n \n }\n else{\n legendDiv.append(containerDiv);\n }\n return legendDiv;\n };\n if (layer && !_.isEmpty(legend) && !_.isEmpty(map)) {\n if(!_.isEmpty(map?._layers)){\n legend?.addTo(map);\n }\n }\n } else {\n if (layer) {\n const image = document.getElementById(id || 'legend_div');\n legend.onRemove = () => {\n if (image) {\n L.DomUtil.remove(image);\n }\n };\n legend.onRemove();\n }\n }\n }\n }, [add, map, layer]); //here add map\n return null;\n}\n\nexport default Legend;","export default __webpack_public_path__ + \"static/media/Zoom_In.786ec377.svg\";","export default __webpack_public_path__ + \"static/media/Zoom-Out.760c3fe8.svg\";","import React from 'react';\n\nconst Loader = (props) => {\n return (\n <>\n
\n
\n \n );\n};\n\nexport default Loader;\n","import React, { useEffect, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';\nimport PropTypes from 'prop-types';\nimport ZoomInIcon from '../../assets/Images/Zoom_In.svg';\nimport ZoomOutIcon from '../../assets/Images/Zoom-Out.svg';\nimport ParameterList from '../../Components/Parameters';\nimport Download from '../../assets/Images/download.png';\nimport { saveAs } from 'file-saver';\nimport { Collapse, Button, Row, Col } from 'reactstrap';\nimport Loader from '../../Components/common/loader';\nimport { DATA_SOURCES } from '../../Components/constants';\nimport { t } from 'react-multi-lang';\nexport const StaticResource = props => {\n const {\n params,\n handleParameters,\n dataSourceId,\n handleDataSourceId,\n staticResourceWeekData,\n dataSource,\n // setStaticResourceSelectedLocation\n } = props;\n const [isOpen, setIsOpen] = useState(false);\n const [selectedStaticResourceData, setSelectedStaticResourceData] = useState({\n staticResourceImage: null,\n staticResourceTitle: '',\n selectedStaticResourceId: '',\n category: '',\n }); // new state added for category by Ramya.S on 5/9/2022\n const [orderedWeekData, setOrderedWeekData] = useState();\n const nextProps = useSelector(state => ({\n isStaticResourceRequesting: state.staticResource.isStaticResourceRequesting,\n isStaticResourceYearRequesting: state.staticResource.isStaticResourceYearRequesting,\n ecmwfDataByControlData: state?.Weather?.isEcmwfDataByControlData,\n isEcmwfDataByControlLoading: state?.Weather?.isEcmwfDataByControlLoading,\n }));\n\n useEffect(() => {\n setIsOpen(true);\n }, []);\n\n useEffect(() => {\n if (nextProps.isStaticResourceRequesting) {\n selectedStaticResourceData.staticResourceImage = null;\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\n } else {\n if (staticResourceWeekData?.length) {\n let ordered_list = staticResourceWeekData.sort((x, y) => {\n return x?.week_wise?.slice(4) - y?.week_wise?.slice(4);\n });\n setOrderedWeekData(ordered_list);\n selectedStaticResourceData.selectedStaticResourceId = ordered_list[0].id;\n selectedStaticResourceData.staticResourceImage = ordered_list[0].upload_image;\n selectedStaticResourceData.category = ordered_list[0].forecast_data_source_category_name;\n selectedStaticResourceData.staticResourceTitle = ordered_list[0].forecast_data_source_name;\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\n } else if (Array.isArray(staticResourceWeekData) && staticResourceWeekData !== null) {\n selectedStaticResourceData.selectedStaticResourceId = '';\n selectedStaticResourceData.staticResourceImage = '';\n selectedStaticResourceData.staticResourceTitle = '';\n selectedStaticResourceData.category = '';\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\n }\n }\n }, [staticResourceWeekData, nextProps.isStaticResourceRequesting]);\n\n // useEffect(() => {\n // if (nextProps?.ecmwfDataByControlData?.statusCode === 200) {\n // selectedStaticResourceData.selectedStaticResourceId = '';\n // selectedStaticResourceData.staticResourceImage =\n // nextProps?.ecmwfDataByControlData?.data?.result;\n // selectedStaticResourceData.category = dataSource?.[0]?.category;\n // selectedStaticResourceData.staticResourceTitle = 'ECMWF (Static)';\n // setSelectedStaticResourceData({ ...selectedStaticResourceData });\n // }\n // }, [nextProps?.ecmwfDataByControlData]);\n\n useEffect(() => {\n if (nextProps.isEcmwfDataByControlLoading) {\n selectedStaticResourceData.staticResourceImage = null;\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\n } else {\n if (nextProps?.ecmwfDataByControlData?.statusCode === 200) {\n selectedStaticResourceData.selectedStaticResourceId = '';\n selectedStaticResourceData.staticResourceImage =\n nextProps?.ecmwfDataByControlData?.data?.result;\n selectedStaticResourceData.category = dataSource?.[0]?.category;\n selectedStaticResourceData.staticResourceTitle = 'ECMWF (Static)';\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\n }\n }\n }, [nextProps?.isEcmwfDataByControlLoading, nextProps?.ecmwfDataByControlData]);\n\n const handleDownload = () => {\n saveAs(selectedStaticResourceData.staticResourceImage, 'image.gif');\n };\n\n const handleSelectedWeek = data => {\n selectedStaticResourceData.selectedStaticResourceId = data.id;\n selectedStaticResourceData.staticResourceImage = data.upload_image;\n selectedStaticResourceData.staticResourceTitle = data.forecast_data_source_name;\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\n };\n return (\n <>\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n );\n};\nStaticResource.propTypes = {\n staticResourceImage: PropTypes.string,\n params: PropTypes.array,\n handleParameters: PropTypes.func,\n staticResourceTitle: PropTypes.string,\n dataSourceId: PropTypes.object,\n};\n","export default \"data:image/png;base64,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\"","import React, { useState, useEffect } from 'react';\nimport { FeatureGroup, Circle } from 'react-leaflet';\nimport { EditControl } from 'react-leaflet-draw';\nimport _ from 'lodash';\nimport 'leaflet-draw';\nimport 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package\nimport 'leaflet-defaulticon-compatibility';\nimport PropTypes from 'prop-types';\nimport { t } from 'react-multi-lang';\nimport { DRAW_SHAPE } from './../../Components/constants/index';\nimport { showError } from '../../Components/Notifications';\nimport { getRegionData, removeRegionTooltip, setRegionData } from '../../Components/common/utils';\n\nfunction DrawShape(props) {\n const { handleSelectedRegion, country, state, district } = props;\n const [editableFG, setEditableFG] = useState(null);\n const [mapLayers, setMapLayers] = useState([]);\n let drawControlRef = React.useRef();\n\n useEffect(() => {\n let mapData = JSON.parse(JSON.stringify(mapLayers));\n handleSelectedRegion(mapData);\n setRegionData(mapData);\n }, [mapLayers]);\n\n useEffect(() => {\n if (editableFG) {\n // here you have all the stored layers\n const drawnItems = editableFG?._layers;\n if (!_.isEmpty(drawnItems)) {\n Object.keys(drawnItems).forEach((layerid, index) => {\n if (index === 0) {\n if (_.isEmpty(mapLayers)) {\n editableFG.removeLayer(drawnItems[layerid]);\n return;\n }\n }\n if (index < DRAW_SHAPE.MAXIMUM_SHAPE) {\n return;\n } else {\n const layer = drawnItems[layerid];\n editableFG.removeLayer(layer);\n setMapLayers(mapLayers.filter((data) => data.id !== Number(layerid)));\n showError(t('EDIT_CONTROL.MAXIMUM_SHAPE_ERROR'));\n }\n });\n }\n }\n }, [editableFG]);\n\n useEffect(() => {\n if (!_.isEmpty(editableFG)) {\n // here you have all the stored layers\n const drawnItems = editableFG?._layers;\n // if the number of layers is bigger than 1 then delete the first\n if (!_.isEmpty(drawnItems)) {\n Object.keys(drawnItems).forEach((layerid, index) => {\n const layer = drawnItems[layerid];\n editableFG.removeLayer(layer);\n });\n setMapLayers([]);\n }\n }\n }, [country, state, district]);\n\n let tempArray = [];\n\n const onCreated = (e) => {\n const { layerType, layer } = e;\n let regionData = getRegionData();\n let polyCount = regionData?.length\n ? (regionData?.filter((item) => item.layerType === 'polygon')).length\n : 0;\n\n if (layerType === 'marker') {\n let latlang = [layer._latlng.lat, layer._latlng.lng];\n setMapLayers((data) => [\n ...data,\n { id: layer._leaflet_id, layerType, polygonCount: '', latlngs: [...latlang] },\n ]);\n tempArray.push(e);\n setEditableFG(tempArray);\n return;\n }\n if (layerType === 'polygon') {\n const { _leaflet_id } = layer;\n let layerLatLng = [];\n const cordinatesArray = layer.getLatLngs()[0];\n cordinatesArray?.map(({ lat, lng }) => {\n layerLatLng.push([lat, lng]);\n });\n if (_leaflet_id && layerLatLng?.length) {\n setMapLayers((layers) => [...layers, { id: _leaflet_id, layerType, latlngs: layerLatLng, polygonCount: polyCount + 1, }]);\n tempArray.push(e);\n setEditableFG(tempArray);\n }\n }\n };\n\n const onEdited = (e) => {\n const {\n layers: { _layers },\n } = e;\n Object.values(_layers).map(({ _leaflet_id, editing }) => {\n let layerLatLng = [];\n if (editing.latlngs?.length) {\n const cordinatesArray = editing.latlngs[0];\n cordinatesArray?.length &&\n cordinatesArray[0].map(({ lat, lng }) => {\n layerLatLng.push([lat, lng]);\n });\n setMapLayers((layers) =>\n layers.map((l) => (l.id === _leaflet_id ? { ...l, latlngs: [...layerLatLng] } : l)),\n );\n } else if (!_.isEmpty(editing._marker._latlng)) {\n let cordinates = editing._marker._latlng;\n setMapLayers((layers) =>\n layers.map((l) =>\n l.id === _leaflet_id ? { ...l, latlngs: [cordinates.lat, cordinates.lng] } : l,\n ),\n );\n }\n });\n };\n\n const onDelete = (e) => {\n const {\n layers: { _layers },\n } = e;\n\n Object.values(_layers).map(({ _leaflet_id }) => {\n setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id));\n });\n };\n\n const onFeatureGroupReady = (reactFGref) => {\n if (reactFGref) {\n const drawnItems = reactFGref?._layers;\n let count = 1;\n var elements = document.getElementsByClassName('draw-polygon');\n var markerElements = document.getElementsByClassName('draw-marker');\n\n removeRegionTooltip(drawnItems, elements);\n removeRegionTooltip(drawnItems, markerElements);\n\n Object.values(drawnItems)?.forEach((layer, index) => {\n if (!_.isEmpty(layer)) {\n if (layer.hasOwnProperty('_latlngs')) {\n if (index <= 1) {\n layer.bindTooltip(`polygon-${count}`, {\n className: 'draw-polygon',\n permanent: true,\n direction: 'top',\n });\n count++;\n }\n }\n else if(layer?.hasOwnProperty('_latlng')){\n let tooltipName = `(${(layer.editing?._marker?._latlng.lat)?.toFixed(\n 2||''\n )},${(layer.editing?._marker?._latlng.lng)?.toFixed(2) || ''})`;\n layer.bindTooltip(tooltipName, {\n className: 'draw-marker',\n permanent: true,\n direction: 'top',\n });\n }\n }\n });\n }\n // store the ref for future access to content\n setEditableFG(reactFGref);\n };\n\n const handleMarker = (e) => {};\n const onMounted = (e) => {\n drawControlRef.current = e;\n };\n\n return (\n \n {params?.length ? (\n \n {({ zoomIn, zoomOut, resetTransform, ...rest }) => (\n \n {selectedStaticResourceData.staticResourceImage?.length ? (\n \n \n \n {selectedStaticResourceData.staticResourceImage?.length ? (\n \n \n
\n \n )}\n \n \n )}\n
\n \n
\n ) : (\n ''\n )}\n {nextProps.isStaticResourceRequesting === true ||\n nextProps.isStaticResourceYearRequesting ||\n nextProps?.isEcmwfDataByControlLoading ? (\n \n {selectedStaticResourceData?.category} | Data Source:{' '}\n {selectedStaticResourceData?.staticResourceTitle}\n
\n )}\n\n handleDownload()}\n />\n \n 
zoomIn()} />\n \n \n 
zoomOut()} />\n \n
\n ) : (\n ''\n )}\n \n {t('FILTER.NO_DATA_MESSAGE_FOR_STATIC_SOURCE')}\n
\n ) : (\n ''\n )}\n \n )}\n\n {selectedStaticResourceData.staticResourceTitle === 'ERPAS (Static)' && (\n \n {orderedWeekData?.length &&\n orderedWeekData.map((item, index) => {\n return (\n handleSelectedWeek(item)}\n >\n {item.week_wise?.charAt(0).toUpperCase() +\n item.week_wise?.slice(1, 4) +\n ' ' +\n item.week_wise?.charAt(4)}\n \n );\n })}\n \n )}\n
\n \n \n {\n onFeatureGroupReady(featureGroupRef);\n }}\n >\n
\n );\n}\n\nDrawShape.propTypes = {\n handleSelectedRegion: PropTypes.func,\n};\n\nexport default DrawShape;\n","/* eslint-disable no-unused-vars */\nimport React, { useState, useEffect } from 'react';\nimport _ from 'lodash';\nimport Chart from 'react-apexcharts';\nimport { renderChartTime, renderGenericDateFormat } from '../common/utils';\nimport { CHART_LABEL_COLORS,POLYGON, DATA_SOURCES } from '../constants/index';\nimport closeIcon from '../../assets/Images/closeIcon.svg';\n\nfunction GeometryCharts(props) {\n const {\n renderCharts,\n dataSource,\n initialSelectedDate,\n noaaRegionTimeSeries,\n selectedParam,\n region,\n } = props;\n const [series, setSeries] = useState([]);\n const [compareCountries,setCompareCountries] = useState([])\n const [compareDataSource,setCompareDataSource] = useState([])\n\n const [YAxisOptions, setYAxisOptions] = useState([\n {\n axisTicks: {\n show: true,\n },\n axisBorder: {\n show: true,\n color: (CHART_LABEL_COLORS && CHART_LABEL_COLORS[0]) || '#008FFB',\n },\n labels: {\n style: {\n colors: (CHART_LABEL_COLORS && CHART_LABEL_COLORS[0]) || '#008FFB',\n fontSize: '12px',\n fontFamily: 'National',\n },\n formatter: function(value) {\n if (!value == null || !isNaN(value)) {\n if (value % 1 != 0) {\n return value.toFixed(2);\n } else {\n return value;\n }\n }\n },\n },\n title: {\n style: {\n color: (CHART_LABEL_COLORS && CHART_LABEL_COLORS[0]) || '#008FFB',\n },\n },\n tooltip: {\n enabled: true,\n },\n scaleLabel: {\n display: true,\n },\n ticks: {\n callback: function(value) {\n return value;\n },\n },\n },\n ]);\n\n const [options, setOptions] = useState({\n chart: {\n type: 'column',\n stacked: false,\n zoom: {\n enabled: true,\n type: 'x',\n },\n },\n dataLabels: {\n enabled: true,\n enabledOnSeries: [0, 1],\n },\n stroke: {\n // width: [1, 1, 4],\n width: 4,\n },\n title: {\n text: 'Data Sources',\n align: 'left',\n offsetX: 110,\n style: {\n fontSize: '14px',\n fontWeight: 'normal',\n fontFamily: 'National',\n color: '#2A547C',\n },\n },\n plotOptions: {\n bar: {\n columnWidth: '55%',\n barHeight: '70%',\n },\n },\n xaxis: {\n categories: [],\n labels: {\n showDuplicates: false,\n style: {\n fontSize: '12px',\n fontFamily: 'National',\n },\n crossShair: {\n stroke: {\n curve: 'straight',\n },\n },\n },\n },\n yaxis: YAxisOptions,\n tooltip: {\n fixed: {\n enabled: true,\n position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft\n offsetY: 30,\n offsetX: 60,\n },\n },\n legend: {\n horizontalAlign: 'left',\n offsetX: 40,\n },\n });\n \n useEffect(() => {\n if (dataSource.length && initialSelectedDate) {\n const startDate = renderChartTime(initialSelectedDate?.graph?.startDate);\n const endDate = renderChartTime(initialSelectedDate?.graph?.endDate);\n let titleText = '';\n if (!region?.length) {\n titleText = `Parameter: ${selectedParam?.parameter?.name}`;\n } else {\n titleText = `Data Source: ${dataSource[0]?.name}( ${selectedParam?.parameter?.name})`;\n }\n\n let a;\n if (region.length && region){\n if(region[0].polygonCount == 1){\n a = POLYGON\n }\n }\n /**\n * changed by: sai krishna thalla\n * reason: compare data source has not been adding to the downloaded file name\n * date : 7-sep-2022\n */\n let countriesAndCompareDataSrc = \"(\" + compareCountries[0]+ \")\" + compareDataSource + \"(\" + compareCountries[1]+ \")\"\n if(dataSource[0].id === DATA_SOURCES.IRI.id){\n setOptions(prev => ({\n ...prev,\n chart:{\n ...options.chart,\n toolbar: {\n show: true,\n export: {\n csv: {\n filename: a? (compareCountries.length ? (dataSource[0]?.name + countriesAndCompareDataSrc + a ): (dataSource[0]?.name + \"-\" + a)) : (compareCountries.length ? (dataSource[0]?.name +countriesAndCompareDataSrc) : (dataSource[0]?.name)),\n columnDelimiter: ',',\n headerCategory: 'Date',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n svg: {\n filename: a? (compareCountries.length ? (dataSource[0]?.name + countriesAndCompareDataSrc + a ): (dataSource[0]?.name + \"-\" + a)) : (compareCountries.length ? (dataSource[0]?.name +countriesAndCompareDataSrc) : (dataSource[0]?.name)),\n columnDelimiter: ',',\n headerCategory: 'Date',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n png: {\n filename: a? (compareCountries.length ? (dataSource[0]?.name + countriesAndCompareDataSrc + a ): (dataSource[0]?.name + \"-\" + a)) : (compareCountries.length ? (dataSource[0]?.name +countriesAndCompareDataSrc) : (dataSource[0]?.name)),\n columnDelimiter: ',',\n headerCategory: 'Date',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n },\n tools: {\n customIcons: [\n {\n icon: `\n
\n );\n}\n\nexport default GeometryCharts;\n\n","export default __webpack_public_path__ + \"static/media/mapPreferenceIcon.7a00b190.svg\";","function CustomMarkerIcon({ Icon, className }) {\n return \n
\n \n {series.length || !_.isEmpty(options) ? (\n <>\n
\n \n
\n )}\n No Chart Data Found
\n\n
\n \n );\n }\n };\n\n // Static coordinates for India\n\n const iconHtmlString = ReactDOMServer.renderToString(\n \n \n {errorData?.showError ||\n (parameterData?.length && parameterData?.every(i => !i.checked)) ||\n isHideToolBar ? (\n \n {!_.isEmpty(chartSeriesData) ? (\n <>\n \n {region?.length === 1 && !_.isEmpty(region[0]) ? (\n region[0]?.layerType === 'marker' ? (\n <>\n \n \n ) : (\n <>\n {noaaRegionTimeSeries?.length ? (\n <>\n
\n \n
\n \n ) : (\n ''\n )}\n \n point({region[0]?.latlngs[1].toFixed(2)},\n {region[0]?.latlngs[0].toFixed(2)})\n
\n \n ) : (\n ''\n )\n ) : (\n ''\n )}\n\n
\n ) : (\n ''\n )}\n \n )}\n \n )}\n \n {errorData?.data} \n
\n \n \n ({searchMarker[0].toFixed(2)},{searchMarker[1].toFixed(2)})\n \n {/* x */}\n
\n \n \n
\n \n
\n );\n}\n\nLeafletWrapper.propTypes = {\n cordinates: PropTypes.array,\n zoom: PropTypes.number,\n parameters: PropTypes.array,\n};\n","import React from 'react';\nimport LeafletWrapper from './leafletWrapper';\n\nfunction index(props) {\n return (\n \n
\n \n {isLoading ? \n \n <>\n \n
\n \n \n \n ) : (\n \n
\n {(!hasQueryParam && selectedDataSource?.firstDataSource?.[0]?.name !== 'ECMWF (Static)') ||\n (!showEcmwf && selectedDataSource?.firstDataSource?.[0]?.name === 'ECMWF (Static)') ? (\n <>\n {renderMapContainer()}
\n {renderChartsUI()}\n \n \n \n
\n );\n}\n\nexport default index;\n","export default __webpack_public_path__ + \"static/media/droughtPopupImageCroped.127f5f47.jpg\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACjSURBVHgBfZBNCsIwEIVnEq+gZyjNpidQjyBi3eo5xJ8I3kOXLjyErQfQVVy7K+QMZkxKhDakfZCQx/t4ZAbAKl1sD+5ARFzkMgMwV/ueDtMxaFUWLUCrezVKJh9AmMUg7i79Ll9dEP+TXRCGnxLz3ZoYnb2VLAS+A6SGxVZDstyvmDEXb4/qdpLYF9YVfWENiHyTEbFnLPSLelR2JNdUhKHTD0J/Tq3qzxWjAAAAAElFTkSuQmCC\"","import React, { useEffect } from 'react';\nimport { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';\nimport { t } from 'react-multi-lang';\nimport Drought from '../../assets/Images/droughtPopupImageCroped.jpg';\nimport Arrow from '../../assets/Images/right-arrow.png';\nimport DroughtImage1 from '../../assets/Images/droughtIndices.png';\nimport DroughtImage2 from '../../assets/Images/decisionFramework.png';\nimport DroughtImage3 from '../../assets/Images/otherDroughtIndices.png';\nimport DroughtImage4 from '../../assets/Images/digital-survay.png'\nimport { DROUGHT_MODULES_CONST } from '../../Components/constants';\n\nconst Droughtmodal = props => {\n const {modal,handleModal}= props\n\n const viewtoggle = () => handleModal(!modal);\n useEffect(() => {\n handleModal(!modal);\n }, []);\n\n const handleStartDroughtMonitorLink = () => {\n handleModal(!modal);\n };\n\n const handleModule = data => {\n props.moduleHandler(data);\n handleModal(!modal);\n };\n\n return (\n \n \n \n {t('DROUGHT_MONITORING.WELCOME_TO_DROUGHT')}\n \n \n \n {\n handleModule(DROUGHT_MODULES_CONST[0]);\n }}\n >\n
\n \n 
\n
\n \n
\n \n \n {t('DROUGHT_MONITORING.DROUGHT_MODAL_DESC_ONE')}\n {
}\n {t('DROUGHT_MONITORING.DROUGHT_MODAL_DESC_TWO')}\n \n \n
\n
\n {t('DROUGHT_MONITORING.DROUGHT_PREDICTION')}
\n\n
\n {t('DROUGHT_MONITORING.DROUGHT_MONITOR')}
\n \n\n
\n {t('DROUGHT_MONITORING.DSS')}
\n \n\n
\n {t('DROUGHT_MONITORING.DROUGHT_INDICES')}
\n \n\n \n \n \n \n \n );\n};\n\nexport default Droughtmodal;\n","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAiTSURBVHgB7Z1NbBRlGMef993ZRsrXmqARSGQwGD4sUAgk4kEWvCgHWsRiFAygHiQeKIkhpJS0BCjGmLA9CF6AHiAmtJXWg5xsiwc5gLRpsUDUdHugNdGEhZZC6O68Ps9sZ9md7ufMu7szLb+EbHc7u9v97/O8z9c7A4Miop6v9s0uneHXOFeBw2omQGUg1OhvmWo6PCSECAJjIcEgyDQxCKB1jY4+6QnuDYSgSDAoIIZgggk/47wiiUgWQWEBuiAi2kfGHncVUtCCCFjWfMgPXNnPhPDjXR/kHdFEYvZ9eLIN8kzeBCRrmzWnFEVj1VAQ0ZIhghENjmoRrevOR18HIQ9IF9AZwpkRQVw3m25tbzgKkpEq4IpLNXs8HOrkrW2yiVpk/46GJpCEFAGX/XBIVbye8/hifnAFom18XDsgw6052OSN1sPVXq+n2z3iEayS/mbyGLCJZQvUU5I5M+tAQDW4GaEF+qpOHgCLWBJQd1mFX2aMlcMUANOrnqdhbZsVl85ZQBLP6+Wdzg0UVhFBXBc35SpiTgJOXfEMchcxawGnvngGuYmYlYDTRzyD7EXMKo2hgDF9xCOYWoKfuRwzjUxHZhRwZevhU1Ml2uaCwM8cmTWjLtNxaV04Wpqx8zCN0YR24I+qk4FUv08pYHTd83SDYxoCRSM0Ph5Zk2o9TOnCSolyCp6LR/jQkFJ6YVIByXUxO6+E5xj4U9XNSV14ZUvNgIyou3XRWlg/T4UFM18Eq9wNDcM3vT9D8RFBz8jYmh7TuEAxH1bWWoMNAqaCDUiwwJsfwzLffLDL+pcWw+ySF+DIjR+huDA1PKuUGif1CY/G35GVMF957ytYWOqDoUf34cJf1+Dug2Gwwtm3P4v93D540wEiQsgz8mhxvBUmWCD3cL9d8chtDfGqfvkORsafgF3oNSrwdYkii+gzW2FCEIm24+2xecFy/fbM7Q4p4hGf/no2JuKxde9DMcGiYn/8/ZiAK1tqK2UEjjneF/Tbe2PyRrMUSBwkoq+sudZv3HlmgSLi6LTFSSIypsWsUBew/HK9DxjfDQ7HOSIyv9Fo0AWMRMJ+cAkOEdEXmT3DTz9EXdjh7mvGCSIKTd+mMpHGMLYRHAgJtRST8YOrtmAu+c+k37cFb8Inr79VlBQnujkKqhVa/yKRcRUcyGlMhRo37IRdKFImSMQb/w5gwt0NhYGptA4q4fCTcsY84EQ6h27ryXjFq2tg9kR6lIz1L78GC0oL3ziidRBdmPvBwejNhFD6UvDYuu1ogWug0GgCVI6ZtQrPsQTnfDUXAIvA5aRz77yiicWUxri660ytM6P+vo5BpKAwWOR6F963fLN+244pzZDE+jtbOAjhWgsk6zOCB3V/Cg9Tbe8PLCbFtj7CtQIW3/qiKOBSDOujevjcxs/1nx8+faxbYsdQv56Ey2ropkMRQgxiIHFVKvMFimdYH6UwRhpD1QgNsigq38ORAlnmT/kt7UKuskASigZNxrTvDlYoF3FotQkFI9FO93fAMFogibsOp3nHsUJZNnd+3saiOJELcuzEFDh5sk68eET1tYv6tM5w1eGx+/p9anVRZ4Yep0YEdXPyAXrvA44qDoILoDUvXrxMkdcQ0hBx00SyLRXOBrjGoAccDkXcfSs2JzyWTeSlRoRxXD6sEJuqg5wLFgSHs27e4oT7ueR9F/78TT92IX4JtC7KhXdxj0fpAodTaWpV5Zr3keDE5vly3VgZHe1RerbVh8qaaxydysRvTkpnfbQrwmyt8c+3s8nJDGMQpC0eEzMRoPNq94MLSGZ9I5hAE7QRCdK4qcy2l6ATvGGiEmHoy/iQ4wVMZX0X/r6WdOhkQGsf5YZSKxOhtdONLiCtgxEtHHJiZ4bczph3pBKJNjK1479UGMHjbsjaLrFkeEYed9Gt3kygdRDFuwoOxKh5Cau5nCHg9f8k1QwMmowtbrFujBAsAA4jvuNC7kdrXK4i0hdgbLe7IatjPeG+REzAW1XHu+iSImATY1cW1aB2ie/3GcGD6tulWe583YriGwn4kd/lDN0p+vZ98OxiFgn9QKFpjWAT41veuWSDrahn7vdRQkxDc3rNc1gTb00zxqRjqGNDYhM0oJc1LxEgEq67kLDFV9+loIUH7AaTS+98qdetRktp6FHuhk31K3VYyPrirefg6i2wa0l0pwK9PrWrqCtDLk7VxtK5r0CFujb25ZF43/fLabiS9XHu3YQxIxh7zHwQJtX1mFTb2qlK1kNWImO3wLtXvp2UutA2DnLNdK9PnnBGouURTLCjvVXH6xMeMx9EVqhp490Cp+5gE/qgtOjPsejKHcO3dddNhR5UsDwzujQP0QopWHTi82SPOMn6erefmJSlJz9PpLVmD4jpfY7cJJjY27d98uVSUp4rt7LlcCe46koceUSI9r6qhqR7KFNO5Twe714ZaY3bwXgQ8iglKa9MklJAijTMFLKnIwK0A/FR10zauTAumgEBzHZu6FaYJhqTrXvxZBysKx6lHhdKx7f9ZUOfuXdHQ8aLCmUUkBoN3OPdRmEcpgl6woyfOatjIUswP1QxP+yUkR86mWTVRtrjIQemuoi5iqc/B3JkqopoRTwi591Z9Ab0RlMpsNBnsSLexHOtU9ZSG2AumKWkg1IV7i2p17vyVp4PNtHrZuCn3LbTlSoM0AR2V07Y6sRLuQQorYuRyDj9IRXgBnD+g+XZHisua0bqRWjJGhmwOqcGGAoU1FHOVF3k9JqQB1Y119YDF7udImTUXaGRK0rA6lqX8rUhT+hurT31F9Mi8ylc7D2gAESvx6BfCSnvZ8WTaDgcuyqAB/RJY77fDwpI9NRaOjteVOJ6tFGWZTIhBjUGbbRFhXZZ5Mvakr43FBESNBwOlwNofv2MKSFUNCEf7RQTprSIRKJbAUD/JUYQv4AeIViw0IKZ+R9c+9BP5YTMhgAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","import React, { useMemo } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, Table, Alert } from 'reactstrap';\nimport { useTable, usePagination, useSortBy, useGlobalFilter } from 'react-table';\nimport _ from 'lodash';\nimport { t } from 'react-multi-lang';\nimport { ALERT_TABLE_INDICES_THRESHOLD_CONSTS } from '../../../Components/constants';\n\nconst AlertIndicesModal = props => {\n const { isOpen, toggle, tableData } = props;\n const columns = useMemo(() => tableData?.columns);\n const data = useMemo(() => tableData?.rowData, [tableData?.rowData]);\n const tableInstance = useTable(\n {\n columns,\n data,\n initialState: { pageSize: tableData?.rowData?.length },\n },\n useGlobalFilter,\n useSortBy,\n usePagination,\n );\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;\n return (\n\n \n \n {' '}\n
\n
\n \n \n \n \n
\n );\n};\n\nexport default AlertIndicesModal;","import _ from 'lodash';\nimport ReactTooltip from 'react-tooltip';\nimport { t } from 'react-multi-lang';\nimport {DROUGHT_MANAGEMENT_MODULE_ID,DROUGHT_MODULES_CONST, DROUGHT_MONITOR_MODULE ,FINAL_DROUGHT_MAP,SPI,SPI_GPM,CHECK_DROUGHT} from '../../Components/constants/index'\n\nconst IndicesInfoIcons = props => {\n\n\n const handleInfo = e => {\n e?.stopPropagation();\n // TODO Remove Hard coded text in compare \n if(props.dss && props?.indicesName === FINAL_DROUGHT_MAP){\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DSS}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\n }else{\n switch (props?.selectedModule?.label) {\n case DROUGHT_MODULES_CONST[0].label:\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_PREDICTION}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\n break;\n case DROUGHT_MODULES_CONST[1].label:\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${props?.indicesName}&topic_name=${ DROUGHT_MONITOR_MODULE.label}`);\n break;\n case DROUGHT_MODULES_CONST[2].label:\n if(props?.indicesName === SPI){\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${SPI_GPM}&topic_name=${props?.selectedModule?.label}`);\n }else if(props?.indicesName === CHECK_DROUGHT){\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DSS}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\n }\n else{\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\n }\n break;\n case DROUGHT_MODULES_CONST[3].label:\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.OTHER_INDICES}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\n break;\n case DROUGHT_MONITOR_MODULE.label:\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\n break;\n }\n }\n \n };\n\n\n if (props.dss) {\n return (\n \n
\n {tableData?.columns.length === 1 &&\n tableData?.rowData[0]?.slug === \"dryspell\" &&\n tableData?.rowData?.length === 1 ? (\n \n \n {headerGroups.map(headerGroup => (\n
\n \n )}\n
{' '}\n \n
\n ) : tableData?.columns.length === 1 &&\n tableData?.rowData[0]?.slug === 'spi' &&\n tableData?.rowData?.length === 1 ? (\n \n \n Dry Spell (Days){t('DROUGHT_MONITORING.DRYSPELL_MESSAGE')}\n \n
\n \n
\n \n ) : tableData?.columns?.length === 1 ? (\n \n \n SPI{t('DROUGHT_MONITORING.DRYSPELL_MESSAGE')}\n \n
\n \n
\n ) : (\n <>\n \n \n {t('DROUGHT_MONITORING.DRYSPELL_SPI_MESSAGE')}\n \n
\n | {column.render('Header')} | \n ))}\n
|---|
\n
\n \n
\n \n \n handleChange(i)}\n checked={i?.checked}\n className=\"stage-options\"\n boxShadow=\"1px 1px 1px 1px #848F9A\"\n disabled={i?.disabled}\n />\n \n \n \n
\n
\n {i?.slug === 'checkdroughtcondition' && i?.checked ? (\n <>\n \n \n
\n \n \n props.handleSPIThreshold(e.target.value)}\n />\n
\n \n ):''}\n {i.slug === DRY_SPELL.DRY_SPELL_SLUG ? (\n <>\n \n \n props?.setDrySpellPrecipitationThreshold(e.target.value)}\n />\n
\n \n \n ) : (\n ''\n )}\n {i?.slug === 'finaldroughtmap' && i.checked ? (\n <>\n {props?.finalDroughtParameterMonthsList?.length\n ? props?.finalDroughtParameterMonthsList?.map((i,index) => {\n return (\n <>\n \n \n props.handleFinalDroughtParamMonthChange(i.slug,value)}\n isMulti={false}\n required={true}\n value={i?.selectedOption}\n />\n
\n \n );\n })\n : ''}\n \n ) : (\n ''\n )}\n \n );\n })}\n \n );\n};\nexport default DroughtStageSwitch;\n","import React from 'react';\nimport { RiArrowDropDownLine, RiArrowDropUpLine } from 'react-icons/ri';\nimport { Collapse } from 'reactstrap';\nimport _ from 'lodash';\nimport Select from 'react-select';\nimport {\n DSS_MODULE_CONSTS,\n} from '../../../Components/constants';\nimport DroughtStageSwitch from './DroughtStageOptions';\n\nconst DSSDroughtIndicatorsCollapse = props => {\n const {\n isCompare,\n checkedIndicesList,\n handleCategory,\n droughtModuleIndicators,\n impactMonthsDropdownList,\n selectedModule,\n DroughtIndicators,\n CompareDroughtIndicators,\n handleCompareIndices,\n handleIndices,\n handleCompareCategory,\n handleCategoryToggle,\n handleImpactDropdownChange,\n handleDroughtIndices,\n thresholdDataList,\n setThresholdDataList,\n } = props;\n\n const checkboxStyle = {\n color: '#2A547C',\n };\n\n\n\nconst renderImpactDropdown = data => {\n return (\n <>\n \n handleImpactDropdownChange(val, data)}\n isMulti={false}\n required={true}\n value={data?.selectedOption}\n />\n
\n \n );\n};\n\nconst renderDSSCheckboxes = ({\n item,\n index,\n data,\n handleCategory,\n isSubCategory,\n isCategory,\n isCompare,\n}) => {\n const selectedItem = handleCategory?.find(\n x => x.name === item.name && x.category === item.category,\n );\n if (!_.isEmpty(item)) {\n \n return (\n <>\n \n
\n \n )\n ) : (\n returnCheckbox(\n item,\n data,\n isCompare ? handleCompareIndices : handleIndices,\n index,\n isCompare,\n )\n )}\n \n \n );\n } else {\n return <>;\n }\n};\n\nconst returnCheckbox = (categoryList, list) => {\n let filteredCategory = impactMonthsDropdownList?.find(x => x.id === categoryList?.name);\n return (\n <>\n {!_.isEmpty(filteredCategory) && categoryList?.category === DSS_MODULE_CONSTS.IMPACT\n ? renderImpactDropdown(filteredCategory)\n : ''}\n {list?.length !== 0 && (\n No Indicators are available
\n\n {droughtModuleIndicators?.map((item, index) => {\n let data = '';\n if (item.name === DSS_MODULE_CONSTS.MANDATORY) {\n data = isCompare ? CompareDroughtIndicators.mandatory : DroughtIndicators.mandatory;\n } else if (item.name === DSS_MODULE_CONSTS.IMPACT) {\n data = isCompare ? CompareDroughtIndicators.impact : DroughtIndicators.impact;\n }\n\n return (\n <>\n {renderDSSCheckboxes({\n item,\n index,\n data,\n handleCategory: isCompare ? handleCompareCategory : handleCategory,\n isSubCategory: false,\n isCategory: true,\n isCompare: isCompare,\n })}\n \n );\n })}\n
\n \n );\n};\n\nexport default DSSDroughtIndicatorsCollapse;\n","export default __webpack_public_path__ + \"static/media/mandatory-design-three-resize.308a1650.png\";","export default __webpack_public_path__ + \"static/media/impact-design.7ede86e2.png\";","import React from 'react';\nimport { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap';\nimport _ from 'lodash';\nimport MandatoryDesign from '../../../assets/Images/mandatory-design-three-resize.png';\nimport ImpactDesign from '../../../assets/Images/impact-design.png'\nimport { t } from 'react-multi-lang';\n\nconst DroughtPhaseInfoModal = props => {\n return (\n \n \n \n \n 
\n {/* 
\n {/*
\n \n
\n \n \n
\n );\n};\n\nexport default DroughtPhaseInfoModal;\n","import React from 'react';\nimport { Modal, ModalBody, Row, Col } from 'reactstrap';\nimport _ from 'lodash';\nimport { MdOutlineClose } from 'react-icons/md';\nimport { Link } from 'react-router-dom';\nimport { t } from 'react-multi-lang';\nimport { DEFAULT_COUNTRY } from '../../../Components/constants';\n\nconst DroughtCheckModal = props => {\n const { isDrought, isOpen, toggle, selectedLocation } = props;\n return (\n \n {t('DROUGHT_DSS.DROUGHT_PHASE_INFO')}\n
\n\n \n \n \n
\n \n \n
\n );\n};\n\nexport default DroughtCheckModal;\n","import React, { useEffect, useState } from 'react';\nimport { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';\nimport _ from 'lodash';\nimport { MdOutlineClose } from 'react-icons/md';\nimport moment from 'moment';\nimport { t } from 'react-multi-lang';\nimport { WEATHER_STATUS } from '../../../Components/constants';\n\nconst WeatherForecastModal = props => {\n const { weatherForecastData, isOpen, toggle, cordinateAndZoom,countryFor,stateFor,districtFor} = props;\n\n const [tableData, setTableData] = useState([]);\n\n useEffect(() => {\n if (weatherForecastData?.length) {\n let { Open_Weather: openWeatherData } = weatherForecastData[0];\n if (openWeatherData && !_.isEmpty(openWeatherData?.daily)) {\n setTableData(openWeatherData.daily);\n }\n }\n }, [weatherForecastData]);\n\n const returnDateString = () => {\n const startDate = new Date();\n const endDate = new Date();\n endDate.setDate(endDate.getDate() + 6);\n let formattedStartDate = '';\n let formattedEndDate = '';\n if (startDate?.getFullYear() === endDate?.getFullYear()) {\n formattedStartDate = moment(startDate)\n .local()\n .format('Do MMMM');\n formattedEndDate = moment(endDate)\n .local()\n .format('Do MMMM');\n return `${formattedStartDate} to ${formattedEndDate}, ${startDate?.getFullYear()}`;\n } else {\n formattedStartDate = moment(startDate)\n .local()\n .format('Do MMMM YYYY');\n formattedEndDate = moment(endDate)\n .local()\n .format('Do MMMM YYYY');\n return `${formattedStartDate} to ${formattedEndDate}`;\n }\n };\n\n const checkLoaction=()=>{\n if (districtFor === null && stateFor === null){\n return `${countryFor?.name}`\n }\n else if(districtFor === null){\n return `${stateFor?.name}`\n }\n else{\n return `${districtFor?.name}`\n }\n}\n\n return (\n \n
\n \n
\n \n Drought Alert
\n\n {isDrought ? (\n \n \n {selectedLocation?.country?.id === DEFAULT_COUNTRY?.id ? (\n <>\n {t('DROUGHT_DSS.CHANCE_TO_DROUGHT')}{' '}{t('DROUGHT_DSS.CHECK_CONTINGENCY_PLAN')}{' '}\n { selectedLocation?.state?.id && selectedLocation?.district?.id ? (\n \n {t('HOME_PAGE.CONTINGENCY_PLAN')}\n ): (\n <>\n {selectedLocation?.state?.id && props.defaultDistrict?.id ? (\n {t('HOME_PAGE.CONTINGENCY_PLAN')}\n ): (\n {t('HOME_PAGE.CONTINGENCY_PLAN')}\n )}\n \n )}\n {t('DROUGHT_DSS.FULL_STOP')}\n \n \n ) : (\n <>\n {t('DROUGHT_DSS.EXTRA_TEXT_FOR_NON_INDIA_COUNTRY')}\n \n )}\n \n ) : (\n {t('DROUGHT_DSS.NO_CHANCE_TO_DROUGHT')}\n )}\n
\n \n {/* \n \n \n \n \n \n \n
\n );\n};\n\nexport default WeatherForecastModal;\n","import React from 'react';\nimport _ from 'lodash';\nimport { Button } from 'reactstrap';\nimport Select from 'react-select';\nimport {\n DSS_DROUGHT_PHASES_CONST,\n} from '../../../Components/constants';\nimport { useSelector } from 'react-redux';\nimport { t } from 'react-multi-lang';\nimport AlertIndicesModal from './AlertIndicesTableModal';\nimport DSSDroughtIndicatorsCollapse from './DSSDroughtIndicators';\nimport DroughtPhaseInfoModal from './DroughtPhaseInfoModal';\nimport DroughtCheckModal from './DroughtCheckModal';\nimport WeatherForecastModal from './WeatherForecastModal';\nimport ReactTooltip from 'react-tooltip';\n\nfunction DSSDroughtSidebar(props) {\n const {\n selectedLocation,\n isOpenAlertIndicesTable,\n isOpenWeatherForecastDataModal,\n setIsOpenWeatherForecastDataModal,\n weatherForecastData,\n isShowDroughtCheckModal,\n setIsShowDroughtCheckModal,\n selectedModule,\n thresholdDataList,\n setThresholdDataList,\n } = props;\n \n const {\n isGetDroughtAllSeasonRequesting,\n } = useSelector(state => ({\n isGetDroughtAllSeasonRequesting: state.DroughtMonitor.isGetDroughtAllSeasonRequesting,\n getDroughtAllSeasonData: state.DroughtMonitor.getDroughtAllSeasonData,\n getDroughtAllSeasonDataError: state.DroughtMonitor.getDroughtAllSeasonDataError,\n getDSSIndicesData: state.DroughtMonitor.getDSSIndicesData,\n getDSSIndicesDataError: state.DroughtMonitor.getDSSIndicesDataError,\n checkDroughtCriteriaData: state.DroughtMonitor.checkDroughtCriteriaData,\n checkDroughtCriteriaDataError: state.DroughtMonitor.checkDroughtCriteriaDataError,\n getDroughtTimeseriesData: state.DroughtMonitor.getDroughtTimeseriesData,\n }));\n\n return (\n <>\n {isOpenAlertIndicesTable && !_.isEmpty(props.alertTableData) ? (\n \n \n
\n
\n \n {t('DROUGHT_DSS.WEATHER_DATA_INFO')}\n \n
\n
\n {tableData?.length\n ? tableData?.map(item => {\n return (\n <>\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n );\n })\n : ''}\n
\n {t('DROUGHT_DSS.SELECT_MONSOON')}
\n\n
\n \n
\n\n \n
\n {t('DROUGHT_DSS.SELECT_TIMEFRAME')}
\n\n\n
\n {props.yearsList?.length ? (\n \n
\n ) : (\n ''\n )}\n Select Indicators
\n\n props.handleApplyLayers(true)}\n type=\"submit\"\n disabled={!props.isApplyLayers}\n >\n {t('CONTINGENCY_PLAN.APPLY_LAYERS')}\n \n
\n\n {/* {isDrought && !isShowImpactIndicators ? (\n <>\n \n
\n \n ) : (\n ''\n )} */}\n {!props.isDrought && (props?.checkDroughtConditonToggle?.length && props?.checkDroughtConditonToggle[0]?.checked) ? (\n \n handleImpactIndicators(!isShowImpactIndicators)}\n >\n {t('DROUGHT_DSS.CHECK_IMPACT_INDICATORS')}\n \n
\n \n
\n ) : (\n ''\n )}\n \n \n {t('DROUGHT_DSS.CHECK_DROUGHT_CONDITION')}\n \n
\n \n
\n \n ) : (\n <>\n )}\n \n \n );\n}\n\nexport default DSSDroughtSidebar;\n","import React, { useEffect, useState } from 'react';\nimport { RiArrowDropDownLine, RiArrowDropUpLine } from 'react-icons/ri';\nimport { Collapse, Input } from 'reactstrap';\nimport moment from 'moment';\nimport _ from 'lodash';\nimport { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';\nimport { DROUGHT_MODULE_INDICATORS, INDICES_PARAMS, DATE_FORMAT } from '../../Components/constants';\nimport IndicesInfoIcons from './IndicesInfoIcons';\n\nconst DroughtIndicatorsCollapse = props => {\n const {\n DroughtIndicesData,\n setMinStartDate,\n setSelectedParam,\n setCompareParam,\n isCompare,\n selectedModule,\n selectedParam,\n setInitialSelectedDate,\n setFinalSelectedDate,\n } = props;\n const checkboxStyle = {\n color: '#2A547C',\n };\n const [DroughtIndicators, setDroughtIndicators] = useState({\n mandatory: '',\n impact: '',\n });\n const [CompareDroughtIndicators, setCompareDroughtIndicators] = useState({\n mandatory: '',\n impact: '',\n });\n\n const [handleCategory, setHandleCategory] = useState([\n { name: 'Mandatory', id: 'Mandatory', category: 'Mandatory', checked: true },\n { name: 'Impact', id: 'Impact', category: 'Impact', checked: true },\n ]);\n\n const [handleCompareCategory, setCompareCategory] = useState([]);\n const [handleIndices, setHandleIndices] = useState();\n const [handleCompareIndices, setHandleCompareIndices] = useState();\n\n useEffect(() => {\n if (DroughtIndicesData) {\n const { data } = DroughtIndicesData;\n let mandatoryData = [];\n let impactData = [];\n let paramsList = [];\n let count = 0;\n let categoriesList = JSON.parse(JSON.stringify(handleCategory));\n\n data?.result?.map(item => {\n let mandatoryCategoryData = Object.assign({}, item);\n mandatoryCategoryData.category = 'Mandatory';\n let impactCategoryData = Object.assign({}, item);\n impactCategoryData.category = 'Impact';\n\n let mandatoryParamData = item?.parameter?.filter(\n x => x.mandatory === true && x.status === true,\n );\n let mandatoryParamUpdatedData = mandatoryParamData?.map(i => {\n let obj = JSON.parse(JSON.stringify(i));\n obj.paramIndex = count;\n count = count + 1;\n if (selectedParam?.id === obj?.id) obj.checked = true;\n else obj.checked = false;\n return obj;\n });\n if (mandatoryParamUpdatedData?.length) {\n categoriesList.push({\n name: item.name,\n id: item.name,\n category: 'Mandatory',\n checked: true,\n });\n mandatoryCategoryData.parameter = mandatoryParamUpdatedData;\n mandatoryData.push(mandatoryCategoryData);\n }\n\n let impactParamData = item?.parameter?.filter(x => x.impact === true && x.status === true);\n let impactParamUpdatedData = impactParamData?.map(i => {\n let obj = JSON.parse(JSON.stringify(i));\n obj.paramIndex = count;\n if (selectedParam?.id === obj?.id) obj.checked = true;\n else obj.checked = false;\n count = count + 1;\n return obj;\n });\n if (impactParamUpdatedData?.length) {\n categoriesList?.push({\n name: item.name,\n id: item.name,\n category: 'Impact',\n checked: true,\n });\n impactCategoryData.parameter = impactParamUpdatedData;\n impactData.push(impactCategoryData);\n }\n\n item?.parameter?.map(param => {\n if ((param?.impact || param?.mandatory) && param.status) {\n paramsList?.push({\n name: param?.name,\n id: param?.id,\n checked: selectedParam?.id === param?.id ? true : false,\n endDate: param?.max_date,\n });\n }\n });\n });\n setDroughtIndicators({\n mandatory: mandatoryData,\n impact: impactData,\n });\n setCompareDroughtIndicators({\n mandatory: mandatoryData,\n impact: impactData,\n });\n setHandleCategory(categoriesList);\n setCompareCategory(categoriesList);\n setHandleCompareIndices(paramsList);\n setHandleIndices(paramsList);\n } else {\n setDroughtIndicators({\n mandatory: [],\n impact: [],\n });\n setCompareDroughtIndicators({\n mandatory: [],\n impact: [],\n });\n }\n }, [DroughtIndicesData]);\n\n const handleCategoryToggle = (indicatorItem, categoryArr, isCompare) => {\n let categoryList = JSON.parse(JSON.stringify(categoryArr));\n let indicatorList;\n const index = _.findIndex(categoryList, function(list) {\n if (list.name === indicatorItem.name && list.category === indicatorItem.category) {\n return true;\n } else {\n return false;\n }\n });\n\n if (indicatorItem.name === 'Mandatory' || indicatorItem.name === 'Impact') {\n indicatorList = handleDefaultCategoryToggle(\n indicatorItem.category,\n categoryList[index].checked,\n categoryList,\n );\n } else {\n if (index >= 0) {\n categoryList[index] = {\n ...categoryList[index],\n checked: !categoryList[index].checked,\n };\n }\n indicatorList = categoryList;\n }\n if (isCompare) {\n setCompareCategory(indicatorList);\n } else {\n setHandleCategory(indicatorList);\n }\n };\n\n const handleDefaultCategoryToggle = (category, isChecked, categoryList) => {\n categoryList?.map((item, index) => {\n if (item.category === category) {\n categoryList[index] = {\n ...categoryList[index],\n checked: !isChecked,\n };\n }\n });\n return categoryList;\n };\n\n const renderCheckboxes = ({\n item,\n index,\n data,\n handleCategory,\n isSubCategory,\n isCategory,\n isCompare,\n }) => {\n const selectedItem = handleCategory?.find(\n x => x?.name === item?.name && x?.category === item?.category,\n );\n if (!_.isEmpty(item)) {\n return (\n <>\n \n props.handleModalToggle()}\n disabled={!props.showPreviewData}\n >\n {t('DROUGHT_DSS.PREVIEW_INDICES')}\n \n
\n \n
\n \n )\n ) : (\n returnCheckbox(\n data,\n isCompare ? handleCompareIndices : handleIndices,\n index,\n isCompare,\n )\n )}\n \n \n );\n } else {\n return <>;\n }\n };\n\n const handleCheckbox = (param, indicesList, isCompare) => {\n let checkedParam = indicesList?.find(item => item.id === param.id);\n\n if (!checkedParam.checked) {\n let indicesData = JSON.parse(JSON.stringify(indicesList));\n indicesData?.length &&\n indicesData?.map((value, i) => {\n if (value?.id !== param?.id) {\n value.checked = false;\n } else {\n value.checked = true;\n }\n });\n if (isCompare) {\n setHandleCompareIndices(indicesData);\n setCompareParam(param);\n setFinalSelectedDate(prev => ({\n ...prev,\n endDate: moment(param?.max_date).format(DATE_FORMAT),\n startDate: moment(param?.max_date)\n .subtract(30, 'days')\n .format(DATE_FORMAT),\n }));\n } else {\n setMinStartDate(param.min_date);\n setSelectedParam({ ...param, checked: true });\n setHandleIndices(indicesData);\n setInitialSelectedDate(prev => ({\n ...prev,\n endDate: moment(param?.max_date).format(DATE_FORMAT),\n startDate: moment(param?.max_date)\n .subtract(30, 'days')\n .format(DATE_FORMAT),\n }));\n // setInitialSelectedDate({...param, endDate: moment(param?.endDate).format(DATE_FORMAT) })\n }\n }\n };\n\n const returnCheckbox = (category, handleIndices, index, isCompare) => {\n return (\n category?.length &&\n category?.map((param, index) => {\n let parameter = handleIndices?.find(item => item?.id === param?.id);\n return (\n <>\n No Indicators are available
\n- \n
\n \n props.setDrySpellPrecipitationThreshold(e.target.value)}\n />\n
\n ) : (\n ''\n )}\n \n {DROUGHT_MODULE_INDICATORS?.map((item, index) => {\n let data = '';\n if (item.name === 'Mandatory') {\n data = isCompare ? CompareDroughtIndicators?.mandatory : DroughtIndicators?.mandatory;\n } else if (item.name === 'Impact') {\n data = isCompare ? CompareDroughtIndicators?.impact : DroughtIndicators?.impact;\n }\n return (\n <>\n {renderCheckboxes({\n item,\n index,\n data,\n handleCategory: isCompare ? handleCompareCategory : handleCategory,\n isSubCategory: false,\n isCategory: true,\n isCompare: isCompare,\n })}\n \n );\n })}\n
\n ) : (\n <>\n )}\n \n );\n};\n\nexport default DroughtIndicatorsCollapse;\n","import React, { useEffect, useState } from 'react';\nimport { RiArrowDropDownLine, RiArrowDropUpLine } from 'react-icons/ri';\nimport { Collapse, Input } from 'reactstrap';\nimport Select from 'react-select';\nimport _ from 'lodash';\nimport { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';\nimport IndicesInfoIcons from './IndicesInfoIcons';\nimport moment from 'moment';\nimport { DATE_FORMAT } from '../../Components/constants';\n\nexport const DroughtOtherIndicatorsCollapse = props => {\n const {\n setMinStartDate,\n setSelectedParam,\n setCompareParam,\n isCompare,\n precipitationThreshold,\n setPrecipitationThreshold,\n selectedModule,\n selectedParam,\n setInitialSelectedDate,\n setFinalSelectedDate,\n } = props?.data;\n\n const checkboxStyle = {\n color: '#2A547C',\n };\n const [DroughtIndicators, setDroughtIndicators] = useState('');\n const [CompareDroughtIndicators, setCompareDroughtIndicators] = useState('');\n\n useEffect(() => {\n if (!_.isEmpty(props.DroughtIndicesData)) {\n const { data } = props.DroughtIndicesData;\n let count = 0;\n\n let updatedData = data?.result?.map(item => {\n let x = _.clone(item);\n x.isShowCategory = true;\n x.parameter = x?.parameter?.map(i => {\n i.checked = i?.id === selectedParam?.id ? true : false;\n count = count + 1;\n i.paramIndex = count;\n return i;\n });\n return x;\n });\n setDroughtIndicators(updatedData);\n setCompareDroughtIndicators(updatedData);\n } else {\n setDroughtIndicators([]);\n }\n }, [props.DroughtIndicesData]);\n\n const handleCategoryToggle = (categoryArr, categoryItem, isCompare) => {\n let categoryList = JSON.parse(JSON.stringify(categoryArr));\n let updatedItem = JSON.parse(JSON.stringify(categoryItem));\n let updatedList = categoryList?.map(item => {\n if (item.name === updatedItem.name) {\n item.isShowCategory = !updatedItem.isShowCategory;\n }\n return item;\n });\n if (isCompare) setCompareDroughtIndicators(updatedList);\n else setDroughtIndicators(updatedList);\n };\n\n const renderCheckboxes = ({ DroughtIndicators, isCompare }) => {\n return DroughtIndicators.map((item, index) => {\n return (\n <>\n \n {item.name}\n \n \n {item?.isShowCategory ? (\n
- \n
\n \n setPrecipitationThreshold(e.target.value)}\n />\n
\n ) : (\n ''\n )}\n \n {!_.isEmpty(DroughtIndicators) ? (\n renderCheckboxes({\n DroughtIndicators: isCompare ? CompareDroughtIndicators : DroughtIndicators,\n isCompare: isCompare,\n })\n ) : (\n <>\n
\n \n );\n};\n\nexport const DroughtPredictionCollapse = props => {\n const {\n DroughtIndicesData,\n setMinStartDate,\n setSelectedParam,\n setCompareParam,\n isCompare,\n droughtPredictionIndicesMonths,\n selectedDPIndicesMonth,\n setSelectedDPIndicesMonth,\n selectedModule,\n selectedParam,\n } = props.data;\n\n const [DroughtIndicators, setDroughtIndicators] = useState('');\n const [CompareDroughtIndicators, setCompareDroughtIndicators] = useState('');\n\n useEffect(() => {\n if (!_.isEmpty(DroughtIndicesData)) {\n const { data } = DroughtIndicesData;\n let parameterArr = [];\n let count = 0;\n data?.result?.map(item => {\n let x = _.clone(item);\n x?.parameter?.map(i => {\n if (i?.id === selectedParam?.id) {\n i.checked = true;\n } else {\n i.checked = false;\n }\n i.paramIndex = count;\n count = count + 1;\n parameterArr?.push(i);\n });\n });\n setDroughtIndicators(parameterArr || []);\n setCompareDroughtIndicators(parameterArr || []);\n } else {\n setDroughtIndicators([]);\n }\n }, [DroughtIndicesData]);\n\n const handleCheckbox = (DroughtIndicators, param, isCompare) => {\n let indicesData = JSON.parse(JSON.stringify(DroughtIndicators));\n let updatedData = indicesData;\n if (!_.isEmpty(indicesData)) {\n updatedData = indicesData?.map((value, i) => {\n if (value.id === param?.id) {\n value.checked = true;\n } else {\n value.checked = false;\n }\n return value;\n });\n }\n if (isCompare) {\n setCompareDroughtIndicators(updatedData);\n setCompareParam(param);\n } else {\n setDroughtIndicators(updatedData);\n setMinStartDate(param?.min_date);\n setSelectedParam({ ...param, checked: true });\n }\n };\n\n const ReturnCheckbox = ({ DroughtIndicators, isCompare }) => {\n return (\n DroughtIndicators?.length &&\n DroughtIndicators?.map((param, index) => {\n return (\n <>\n \n
\n \n )}\n No Indicators are available
\n- \n
\n \n
\n ) : (\n ''\n )}\n \n {!_.isEmpty(DroughtIndicators) ? (\n ReturnCheckbox({\n DroughtIndicators: isCompare ? CompareDroughtIndicators : DroughtIndicators,\n isCompare: isCompare,\n })\n ) : (\n <>\n
\n \n );\n};\n\nconst DroughtMonitorOtherIndicesCollapse = props => {\n const { selectedModule, isCompare } = props;\n let DroughtIndicesData = '';\n if (isCompare) {\n DroughtIndicesData = props?.compareDroughtIndicesData;\n } else DroughtIndicesData = props?.DroughtIndicesData;\n return (\n <>\n {selectedModule.api_slug === 'drought-monitor-v2' ||\n selectedModule.api_slug === 'drought-prediction' ? (\n <>\n {selectedModule.api_slug === 'drought-monitor-v2' ? (\n <>\n \n
\n \n )}\n No Indicators are available
\n\n {compareError?.msg}\n
\n )}\n \n );\n }\n };\n\n const handleCompareOptions = (options, newValue, action) => {\n if (options && options.length) {\n if (newValue.value) {\n let selectedOption = options.find(item => item.name === newValue.value);\n if (selectedOption) {\n if (action.name === 'country') {\n // setDefaultCompareSelectedOption(selectedOption);\n setCompareLocation(prev => {\n return {\n [action.name]: selectedOption,\n };\n });\n } else {\n setCompareLocation(prev => {\n return {\n ...prev,\n [action.name]: selectedOption,\n };\n });\n }\n setCompareSelectedOption(selectedOption);\n }\n } else {\n // setDefaultCompareSelectedOption('');\n setCompareLocation(prev => {\n return {\n [action.name]: '',\n };\n });\n setCompareSelectedOption('');\n }\n }\n };\n\n const handleCompareToggle = ({ target }) => {\n let compareData = isCompare;\n const nextCompare = compareData.map(item => {\n if (item.value === target.value) {\n return {\n ...item,\n selected: target.checked,\n };\n } else {\n return {\n ...item,\n selected: false,\n };\n }\n });\n setIsCompare(nextCompare);\n };\n const handleCompareLocationRender = () => {\n let isGraphCompare = isCompare.find(item => item.name === 'graph' && item.selected);\n if (isGraphCompare) {\n return (\n <>\n \n \n {!_.isEmpty(countryData) && countryData?.country_name !== SOUTH_ASIA_COUNTRY\n ? 'Select State'\n : 'Select Region'}\n \n \n
\n {compareCountry && compareCountry?.name !== SOUTH_ASIA_CONST.name && (\n \n
\n )}\n {compareState && compareDistrictList?.length ? (\n \n
\n ) : (\n ''\n )}\n \n \n );\n }\n };\n\n //used to add more date field on click of + icon\n const addMoreDateFieldWhenClickedOnPlus = () => {\n return (\n <>\n Select Indicators
\n\n {selectedModule.api_slug === 'drought-monitor' ? (\n\n
\n )}\n {compareParam?.id === INDICES_PARAMS?.RAINFALL_ANAMOLY?.id ? (\n No Indicators available
\n\n
\n ) : (\n renderCompareDates(isCompare)\n )}\n \n );\n };\n\n useEffect(() => {\n let isMapSubmit, isGraphSubmit;\n let mapPreferenceCount = mapPreferencesData?.length;\n let regionData = props.isSelectedRegion?.region;\n let minMaxYearError = false;\n let compareMinMaxYearError = false;\n let rainfallAnamolyParamsSelected = true;\n let compareRainfallAnamolyParamsSelected = true;\n if (selectedParam?.name === INDICES_PARAMS.RAINFALL_ANAMOLY.name) {\n if (rainfallAnamolyTime?.start_year?.label >= rainfallAnamolyTime?.end_year?.label) {\n minMaxYearError = true;\n } else minMaxYearError = false;\n if (\n rainfallAnamolyTime?.start_year &&\n rainfallAnamolyTime?.end_year &&\n rainfallAnamolyTime?.month\n ) {\n rainfallAnamolyParamsSelected = true;\n } else {\n rainfallAnamolyParamsSelected = false;\n }\n }\n if (compareParam?.id === INDICES_PARAMS.RAINFALL_ANAMOLY.id) {\n if (\n compareRainfallAnamolyTime?.start_year?.label >= compareRainfallAnamolyTime?.end_year?.label\n ) {\n compareMinMaxYearError = true;\n } else compareMinMaxYearError = false;\n if (\n compareRainfallAnamolyTime?.start_year &&\n compareRainfallAnamolyTime?.end_year &&\n compareRainfallAnamolyTime?.month\n ) {\n compareRainfallAnamolyParamsSelected = true;\n } else {\n compareRainfallAnamolyParamsSelected = false;\n }\n }\n if (regionData?.length) setShowRegionTooltip(true);\n else setShowRegionTooltip(false);\n if (!_.isEmpty(selectedParam) && !error) {\n if (mapPreferenceCount < 2 && rainfallAnamolyParamsSelected && !minMaxYearError) {\n if (!regionData?.length) {\n isMapSubmit = true;\n }\n isGraphSubmit = true;\n } else {\n if (\n !_.isEmpty(selectedLocation?.country) &&\n mapPreferenceCount < 2 &&\n rainfallAnamolyParamsSelected &&\n !minMaxYearError\n ) {\n if (!regionData?.length) {\n isMapSubmit = true;\n } else isMapSubmit = false;\n isGraphSubmit = true;\n } else {\n isMapSubmit = false;\n isGraphSubmit = false;\n }\n }\n if (isClickedOnPlus) {\n let isMap = isCompare?.some(item => item.name === 'map' && item.selected);\n let isGraph = isCompare?.some(item => item.name === 'graph' && item.selected);\n if (isMap) {\n isGraphSubmit = false;\n if (\n _.isEmpty(compareParam) ||\n compareError?.showError ||\n mapPreferenceCount === 2 ||\n !compareRainfallAnamolyParamsSelected ||\n compareMinMaxYearError ||\n !rainfallAnamolyParamsSelected ||\n minMaxYearError ||\n regionData?.length\n ) {\n isMapSubmit = false;\n } else {\n isMapSubmit = true;\n }\n }\n if (isGraph) {\n isMapSubmit = false;\n if (\n _.isEmpty(compareParam) ||\n !compareRainfallAnamolyParamsSelected ||\n compareMinMaxYearError ||\n !rainfallAnamolyParamsSelected ||\n minMaxYearError\n )\n isGraphSubmit = false;\n else isGraphSubmit = true;\n }\n }\n } else {\n isMapSubmit = false;\n isGraphSubmit = false;\n }\n setCompareMinMaxYearError(compareMinMaxYearError);\n setMinMaxYearError(minMaxYearError);\n setApplyLayers(isMapSubmit);\n setUpdateGraph(isGraphSubmit);\n }, [\n selectedParam,\n temporalAggregation,\n props?.isSelectedRegion,\n selectedLocation.country,\n isCompare,\n compareParam,\n isClickedOnPlus,\n error,\n compareError.showError,\n mapPreferencesData,\n compareRainfallAnamolyTime,\n rainfallAnamolyTime,\n ]);\n\n useEffect(() => {\n props.handleIsCompare(isClickedOnPlus);\n if (!isClickedOnPlus) {\n setIsCompare(DROUGHT_COMPARE_OPTIONS);\n }\n }, [isClickedOnPlus]);\n\n useEffect(() => {\n if (props?.isSelectedRegion?.region?.length) {\n setIsClickedOnPlus(false);\n }\n }, [props.isSelectedRegion]);\n\n useEffect(() => {\n if (!_.isEmpty(selectedParam) && INDICES_PARAMS?.RAINFALL_ANAMOLY?.id === selectedParam?.id) {\n let list = renderRainfallAnamolyYearsList(selectedParam);\n // let monthsList = renderMonthsList(MONTHS, rainfallAnamolyTime);\n setRainfallAnamolyTimeList(prev => {\n return {\n ...prev,\n yearList: list,\n };\n });\n }\n }, [selectedParam]);\n\n useEffect(() => {\n if (rainfallAnamolyTimeList?.yearList?.length) {\n if (rainfallAnamolyTimeList?.yearList?.length === 1) {\n handleRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.yearList[0]);\n handleRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.yearList[0]);\n } else if (rainfallAnamolyTimeList?.yearList?.length >= 1) {\n handleRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.yearList[1]);\n handleRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.yearList[0]);\n }\n }\n }, [rainfallAnamolyTimeList?.yearList]);\n\n useEffect(() => {\n if (rainfallAnamolyTime?.end_year) {\n let monthsList = renderMonthsList(MONTHS, rainfallAnamolyTime);\n setRainfallAnamolyTimeList(prev => {\n return {\n ...prev,\n monthList: monthsList,\n };\n });\n }\n }, [rainfallAnamolyTime?.end_year]);\n\n useEffect(() => {\n if (rainfallAnamolyTimeList?.monthList?.length) {\n handleRainfallAnamolyMonthChange(rainfallAnamolyTimeList?.monthList[0]);\n }\n }, [rainfallAnamolyTimeList?.monthList]);\n\n useEffect(() => {\n if (rainfallAnamolyTimeList?.compareMonthList?.length) {\n handleCompareRainfallAnamolyMonthChange(rainfallAnamolyTimeList?.compareMonthList[0]);\n }\n }, [rainfallAnamolyTimeList?.compareMonthList]);\n\n useEffect(() => {\n if (compareRainfallAnamolyTime?.end_year) {\n let monthsList = renderMonthsList(MONTHS, compareRainfallAnamolyTime);\n setRainfallAnamolyTimeList(prev => {\n return {\n ...prev,\n compareMonthList: monthsList,\n };\n });\n }\n }, [compareRainfallAnamolyTime?.end_year]);\n\n useEffect(() => {\n if (rainfallAnamolyTimeList?.compareYearList?.length) {\n if (rainfallAnamolyTimeList?.compareYearList?.length === 1) {\n handleCompareRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.compareYearList[0]);\n handleCompareRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.compareYearList[0]);\n } else if (rainfallAnamolyTimeList?.compareYearList?.length >= 1) {\n handleCompareRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.compareYearList[1]);\n handleCompareRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.compareYearList[0]);\n }\n }\n }, [rainfallAnamolyTimeList?.compareYearList]);\n\n useEffect(() => {\n if (!_.isEmpty(compareParam) && INDICES_PARAMS?.RAINFALL_ANAMOLY?.id === compareParam?.id) {\n let list = renderRainfallAnamolyYearsList(compareParam);\n // let monthsList = renderMonthsList(MONTHS, compareRainfallAnamolyTime);\n setRainfallAnamolyTimeList(prev => {\n return {\n ...prev,\n compareYearList: list,\n };\n });\n }\n }, [compareParam]);\n\n useEffect(() => {\n props.handleSelectedRegion(selectedRegion.value);\n }, [selectedRegion]);\n\n const onSubmitHandler = e => {\n e.preventDefault();\n };\n\n const handleDryspellThreshold = data => {\n if (data) {\n setThresholdDataList(prev => {\n return {\n ...prev,\n selectedDryspellThreshold: data,\n };\n });\n }\n };\n\n const handleFinalDroughtParamMonthChange = (slug, value) => {\n let data = _.cloneDeep(finalDroughtParameterMonthsList);\n let updatedData = data?.map(item => {\n let itemData = _.cloneDeep(item);\n if (item.slug === slug) {\n itemData.selectedOption = value;\n }\n return itemData;\n });\n if (updatedData) setFinalDroughtParameterMonthsList(updatedData);\n };\n\n const handleSPIThreshold = value => {\n if (value) {\n setThresholdDataList(prev => {\n return {\n ...prev,\n selectedSpiThreshold: value,\n };\n });\n }\n };\n\n const renderAPIParameterOptions = (list, action) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n let default_option =\n action === 'country' ? regionOptions : { name: 'select', label: 'Select', value: '' };\n options.push(default_option);\n params.map(param => {\n options.push(param);\n return true;\n });\n return options;\n }\n }\n };\n\n const handleChartDisplay = obj => {\n props.renderCharts(true, obj);\n };\n\n const minmaxError = () => {\n return (\n \n
\n {compareRainfallAnamolyTime?.start_year &&\n compareRainfallAnamolyTime?.end_year &&\n compareRainfallAnamolyTime?.start_year?.label >\n compareRainfallAnamolyTime?.end_year?.label ? (\n yearError()\n ) : compareMinMaxYearError ? (\n \n {t('DROUGHT_MONITORING.MIN_MAX_YEAR_EQUAL_ERROR')}\n
\n ) : (\n ''\n )}\n\n {t('DROUGHT_MONITORING.DROUGHT_MIN_MAX_ERROR_MESSAGE')}\n
\n );\n };\n\n const yearError = () => {\n return (\n{t('DROUGHT_MONITORING.MIN_MAX_YEAR_ERROR')}
\n );\n };\n\n const handleDates = (start, end) => {\n /**\n * changed by: sai krishna thalla\n * reason : after applying layers and changeing modules inital dates are not applying\n * date: 6-sep-2022\n */\n if (!start.includes(UNDEFINED) && !end.includes(UNDEFINED)) {\n setInitialSelectedDate(prev => {\n return {\n ...prev,\n startDate: start,\n endDate: end,\n };\n });\n }\n };\n\n const handleCompareDates = (start, end) => {\n if (!start.includes(UNDEFINED) && !end.includes(UNDEFINED)) {\n setFinalSelectedDate(prev => {\n return {\n ...prev,\n startDate: start,\n endDate: end,\n };\n });\n }\n };\n\n const renderRainfallAnamolyYearsList = selectedParam => {\n let current_date = new Date()?.getFullYear();\n let start_date = new Date(selectedParam?.min_date)?.getFullYear();\n let yearsList = getYearsListFormat(start_date, current_date);\n if (yearsList) return yearsList;\n else return [];\n };\n\n const handleSelectedModule = selectedOption => {\n setTempState(prev => {\n return {\n ...prev,\n min: null,\n max: null,\n };\n });\n let defaultSelectedAggregation = DROUGHT_TEMPORAL_AGGREGATION?.find(\n item => item.name === 'Mean',\n );\n if (!_.isEmpty(defaultSelectedAggregation)) {\n setTemporalAggregation(defaultSelectedAggregation);\n }\n setState(null);\n setSelectedDistrict(null);\n setCompareState(null);\n setSelectedCompareDistrict(null);\n const defaultCountry = countryList?.find(item => item.id === countryData.country_id);\n setCountry(defaultCountry);\n setCompareCountry(defaultCountry);\n setSelectedLocation(prev => {\n return {\n ...prev,\n country: defaultCountry,\n state: {},\n district: {},\n };\n });\n setCompareLocation(prev => {\n return {\n ...prev,\n country: defaultCountry,\n state: {},\n district: {},\n };\n });\n setSelectedOption(defaultCountry);\n setIsClickedOnPlus(false);\n\n setSelectedParam('');\n setCompareParam('');\n props.handleSelectedModule(selectedOption);\n };\n\n const handleSearch = places => {\n if (!_.isEmpty(places)) {\n const { formatted_address, geometry, address_components } = places;\n const lat = geometry?.location?.lat();\n const lng = geometry?.location?.lng();\n // if (isNumber(lat) && isNumber(lng)) {\n // setCordinateAndZoom(prev => {\n // return {\n // ...prev,\n // cordinates: [lat, lng],\n // zoom: 10,\n // searchMarkerCoordinates: [lat, lng],\n // };\n // });\n // }\n setSearchLocation(formatted_address);\n // setLocation(formatted_address);\n } else {\n setSearchLocation('');\n }\n };\n\n const handleOnPlaceChange = event => {\n if (event && event?.target && event?.target?.value === '') {\n setSearchLocation('');\n } else {\n setSearchLocation(event.target.value);\n }\n };\n\n const isLatLng = input => {\n // Regular expression for standard numerical lat,lng format with optional spaces\n const standardLatLngPattern = /^\\s*-?\\d+(\\.\\d+)?\\s*,\\s*-?\\d+(\\.\\d+)?\\s*$/;\n // Regular expression for degrees and direction format with optional spaces\n const degreesLatLngPattern = /^\\s*-?\\d+(\\.\\d+)?\\s*°?\\s*[NS]\\s*,\\s*-?\\d+(\\.\\d+)?\\s*°?\\s*[EW]\\s*$/;\n\n return standardLatLngPattern.test(input) || degreesLatLngPattern.test(input);\n };\n\n const onHandleRemoveLocation = () => {\n setSearchLocation('');\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n\n searchMarkerCoordinates: '',\n };\n });\n };\n\n const handleFilter = async loc => {\n const islatlng = isLatLng(loc);\n\n if (islatlng) {\n const locArray = loc.split(',');\n const lat = parseCoordinate(locArray?.[0]);\n const lng = parseCoordinate(locArray?.[1]);\n if (locArray?.length === 2 && isNumber(parseFloat(lat)) && isNumber(parseFloat(lng))) {\n const point = turf.point([parseFloat(lng), parseFloat(lat)]);\n const isInsideAnyPolygon = countryJson.features.some(feature => {\n return turf.booleanPointInPolygon(point, feature);\n });\n if (isInsideAnyPolygon) {\n // setSearchLocation([parseFloat(lat), parseFloat(lng)]);\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n cordinates: [lat, lng],\n zoom: 10,\n searchMarkerCoordinates: [lat, lng],\n };\n });\n // props.handleCordinates([parseFloat(lat), parseFloat(lng)], 10);\n } else {\n setSearchLocation('');\n showError(\n `Please select location inside ${selectedLocation?.country?.name} country only.`,\n );\n }\n } else {\n setSearchLocation();\n showError('Please enter valid data .');\n }\n } else {\n const responseData = await axios.get(\n `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(\n JSON.stringify(loc),\n )}&key=AIzaSyAzWsZ_PyD0lshvP-sCwWP6d_1wzE0dYA0`,\n );\n if (responseData?.data?.results?.length) {\n const point = turf.point([\n parseFloat(responseData?.data?.results?.[0]?.geometry?.location?.lng),\n parseFloat(responseData?.data?.results?.[0]?.geometry?.location?.lat),\n ]);\n const isInsideAnyPolygon1 = countryJson.features.some(feature => {\n return turf.booleanPointInPolygon(point, feature);\n });\n\n if (!isInsideAnyPolygon1) {\n setSearchLocation('');\n showError(\n `Please select location inside ${selectedLocation?.country?.name} country only.`,\n );\n // setLocation('');\n } else {\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n cordinates: [\n responseData?.data?.results?.[0]?.geometry?.location?.lat,\n responseData?.data?.results?.[0]?.geometry?.location?.lng,\n ],\n zoom: 10,\n searchMarkerCoordinates: [\n responseData?.data?.results?.[0]?.geometry?.location?.lat,\n responseData?.data?.results?.[0]?.geometry?.location?.lng,\n ],\n };\n });\n }\n } else {\n setSearchLocation('');\n showError(`Please select location inside ${selectedLocation?.country?.name} country only.`);\n }\n }\n };\n\n //map marker on the basis of selected country\n //get current location\n const getCurrentLocation = () => {\n if ('geolocation' in navigator) {\n let latitude = '';\n let longitude = '';\n /* geolocation is available */\n navigator.geolocation.getCurrentPosition(position => {\n latitude = position.coords.latitude;\n longitude = position.coords.longitude;\n getAddress(latitude, longitude, { fromCurrentLocation: true });\n // if (latitude && longitude)\n // props.handleCordinates([latitude, longitude], 10);\n });\n } else {\n /* geolocation IS NOT available */\n }\n };\n\n const renderMonthsList = (months, anomalyTime) => {\n let finalSelectedYear = anomalyTime?.end_year;\n if (finalSelectedYear?.label === new Date().getFullYear()) {\n let currentMonth = new Date()?.getMonth() + 1;\n let monthsList = months.filter(item => parseInt(item?.value) <= currentMonth);\n if (monthsList) return monthsList;\n } else {\n return months;\n }\n };\n\n //we need to show current date if time passed 13:30 PM else previous date\n const handleSpiSriDate = () => {\n let today = new Date();\n let minutes = today.getMinutes() + today.getHours() * 60;\n let dd = String(today.getDate()).padStart(2, '0');\n let mm = String(today.getMonth() + 1).padStart(2, '0');\n let yyyy = today.getFullYear();\n let showDate = '';\n if (minutes > 810) {\n /**\n * changed by: sai krishna thalla\n * reason : before and after 1:30pm the dates are not changing due to dates becoming 0 or undefined\n * date: 7-sep-2022\n */\n //showDate = `${yyyy}-${mm}-${dd}`;\n showDate = moment().format(DATE_FORMAT);\n } else {\n //showDate = `${yyyy}-${mm}-${dd - 1}`;\n showDate = moment()\n .subtract(1, 'days')\n .format(DATE_FORMAT);\n }\n return showDate;\n };\n return (\n <>\n {props?.isHideBar ? (\n\n \n {t('FILTER.EXPAND_BAR')}\n \n props.setBar(!props.isHideBar)}\n size={25}\n />\n \n \n
\n ) : (\n \n
\n \n
\n ) : (\n ''\n )}\n \n \n \n
\n \n
\n Select Module
\n\n
\n \n \n
\n {country && selectedLocation?.country?.name !== SOUTH_ASIA_CONST.name && (\n \n {' '}\n {!_.isEmpty(countryData) && countryData?.country_name !== SOUTH_ASIA_COUNTRY\n ? 'Select State'\n : 'Select Region'}\n
\n {/*\n
*/}\n \n
\n )}\n {state && districtList?.length ? (\n \n
\n ) : (\n ''\n )}\n Select Indicators
\n\n
\n {rainfallAnamolyTime?.start_year?.label >\n rainfallAnamolyTime?.end_year?.label ? (\n yearError()\n ) : minMaxYearError ? (\n \n {t('DROUGHT_MONITORING.MIN_MAX_YEAR_EQUAL_ERROR')}\n
\n ) : (\n ''\n )}\n \n ) : (\n <>\n\n handleStartDate(e)}\n disabled={_.isEmpty(selectedParam)}\n />\n\n handleEndDate(e)}\n min={initialSelectedDate.minEndDate}\n max={initialSelectedDate.maxEndDate}\n disabled={_.isEmpty(selectedParam)}\n />\n
\n \n )}\n \n
\n\n \n {errorMessage}\n
\n\n \n {isClickedOnPlus && !props.isSelectedRegion?.region?.length ? (\n addMoreDateFieldWhenClickedOnPlus()\n ) : (\n \n
\n \n \n {\n setTempState(prev => {\n return {\n ...prev,\n min: e.target.value,\n };\n });\n }}\n />\n \n {\n setTempState(prev => {\n return {\n ...prev,\n max: e.target.value,\n };\n });\n }}\n />\n \n
\n )}\n {minError ? minmaxError() : ''}\n
\n \n {OTHER_INDICES_API_INDICES_SLUGS.EXTREME_RAINFALL !==\n selectedParam.api_slug &&\n DM_DRY_SPELL_SLUG.DRY_SPELL !== selectedParam.api_slug &&\n OTHER_INDICES_API_INDICES_SLUGS.EXTREME_RAINFALL !==\n compareParam.api_slug &&\n DM_DRY_SPELL_SLUG.DRY_SPELL !== compareParam.api_slug && (\n
\n {!isClickedOnPlus && (\n \n \n \n {TRANSLATIONS.FILTER.APPLY_LAYERS}\n \n
\n \n {!(\n selectedParam.api_slug ===\n OTHER_INDICES_API_INDICES_SLUGS.CROP_HARVEST ||\n selectedParam.api_slug ===\n OTHER_INDICES_API_INDICES_SLUGS.MODIS_FLOOD ||\n selectedParam.api_slug === OTHER_INDICES_API_INDICES_SLUGS.FLOOD\n ) && (\n handleChartDisplay({})}\n disabled={!updateGraph}\n >\n {TRANSLATIONS.FILTER.VIEW_GRAPH}\n \n )}\n {showRegionTooltip && props.isSelectedRegion?.region?.length ? (\n \n {TRANSLATIONS.FILTER.PLEASE_REMOVE_MARKERS}\n \n ) : (\n ''\n )}\n {showMapPreferenceTooltip && !showRegionTooltip ? (\n \n {TRANSLATIONS.FILTER.PLEASE_REMOVE_MAP_PREFERENCE_LAYER}\n \n ) : (\n ''\n )}\n
\n \n \n ) : (\n <>\n )}\n \n \n \n \n \n \n \n )}\n \n );\n}\n\nexport default DroughtSidebar;\n","/* eslint-disable no-unused-vars */\nimport React, { useState, useEffect } from 'react';\nimport _ from 'lodash';\nimport Chart from 'react-apexcharts';\nimport '../../assets/CSS/Charts.css';\nimport closeIcon from '../../assets/Images/closeIcon.svg';\nimport { renderGenericDateFormat, renderChartTime } from '../../Components/common/utils';\nimport { CHART_LABEL_COLORS, POLYGON } from '../../Components/constants';\n\n// demo comment , need to remove later\nfunction DroughtChart(props) {\n const {\n chartData,\n renderCharts,\n temporalAggregation,\n selectedParam,\n compareParam,\n isCompareClicked,\n region,\n initialSelectedDate,\n location,\n isHideBar,\n selectedModule,\n // mapLayers,\n } = props;\n const [series, setSeries] = useState([]);\n\n const [YAxisOptions, setYAxisOptions] = useState([\n {\n axisTicks: {\n show: true,\n },\n axisBorder: {\n show: true,\n color: '#008FFB',\n },\n labels: {\n style: {\n colors: '#008FFB',\n fontSize: '12px',\n fontFamily: 'National',\n },\n formatter: function(value) {\n if (!value == null || !isNaN(value)) {\n if (value % 1 !== 0) {\n if (selectedModule.api_slug === 'drought-prediction') return value.toFixed(3);\n else return value.toFixed(2);\n } else {\n return value;\n }\n }\n },\n },\n title: {\n text: '',\n style: {\n color: '#008FFB',\n },\n offsetX: 60,\n },\n tooltip: {\n enabled: true,\n },\n scaleLabel: {\n display: true,\n labelString: '',\n },\n ticks: {\n callback: function(value) {\n return value;\n },\n },\n },\n ]);\n const [options, setOptions] = useState({\n chart: {\n type: 'column',\n stacked: false,\n zoom: {\n enabled: true,\n type: 'x',\n },\n },\n dataLabels: {\n enabled: true,\n enabledOnSeries: [0, 1],\n },\n stroke: {\n // width: [1, 1, 4],\n width: 4,\n },\n title: {\n text: 'Data Sources',\n align: 'left',\n offsetX: 100,\n style: {\n fontSize: '20px',\n fontWeight: 'normal',\n fontFamily: 'National',\n color: '#2A547C',\n },\n },\n plotOptions: {\n bar: {\n columnWidth: '55%',\n barHeight: '70%',\n },\n },\n xaxis: {\n // categories: [],\n labels: {\n showDuplicates: false,\n style: {\n fontSize: '12px',\n fontFamily: 'National',\n },\n crossShair: {\n stroke: {\n curve: 'straight',\n },\n },\n },\n type: 'datetime',\n },\n yaxis: YAxisOptions,\n tooltip: {\n fixed: {\n enabled: true,\n position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft\n offsetY: 30,\n offsetX: 60,\n },\n },\n legend: {\n horizontalAlign: 'left',\n offsetX: 40,\n },\n });\n\n useEffect(() => {\n if (isHideBar) {\n setOptions(prev => {\n return {\n ...prev,\n title: {\n ...prev.title,\n align: 'left',\n offsetX: 700,\n },\n };\n });\n } else {\n setOptions(prev => {\n return {\n ...prev,\n title: {\n ...prev.title,\n align: 'left',\n offsetX: 550,\n },\n };\n });\n }\n }, [isHideBar]);\n useEffect(() => {\n let seriesData = [];\n let YAxisoptionsData = YAxisOptions;\n let formattedDates;\n let dates;\n const startDate = renderChartTime(initialSelectedDate?.startDate);\n const endDate = renderChartTime(initialSelectedDate?.endDate);\n if (!_.isEmpty(chartData) && chartData?.graph_data && startDate && endDate) {\n dates = chartData?.graph_data[0]?.millis;\n if (chartData?.graph_data?.length === 2) {\n dates =\n chartData?.graph_data[0]?.millis.length > chartData?.graph_data[1]?.millis.length\n ? chartData?.graph_data[0]?.millis\n : chartData?.graph_data[1]?.millis;\n }\n if (!_.isEmpty(dates)) {\n formattedDates = dates?.length\n ? dates.map(item => {\n let dateFormat = new Date(item);\n return renderGenericDateFormat(dateFormat);\n })\n : '';\n }\n\n if (chartData?.graph_data?.length) {\n chartData?.graph_data?.map((data, index) => {\n const graphIndices = Object.values(data)[0];\n const graphIndicesMills = data?.millis;\n let type = selectedParam?.name;\n\n const graphSeriesData =\n selectedModule.api_slug === 'drought-prediction' // { x: new Date('2024-01-01').getTime(), y: 30 },\n ? graphIndices.map((item, index) => ({\n x: new Date(graphIndicesMills?.[index]).getTime(),\n y: item?.toFixed(2),\n }))\n : graphIndices.map((item, index) => ({\n x: new Date(graphIndicesMills?.[index]).getTime(),\n y: item?.toFixed(2),\n }));\n if (isCompareClicked && !_.isEmpty(compareParam)) {\n type = `${data?.layerType} (${data?.location})`;\n } else if (region?.length) {\n type = data.layerType\n ? data.layerType === 'marker'\n ? `point(${data.latlng[1].toFixed(2)},${data.latlng[0].toFixed(2)})`\n : data.layerType + '-' + data?.polygonCount\n : type;\n }\n if (graphSeriesData && graphSeriesData?.length) {\n seriesData.push({\n name: type,\n type: 'line',\n data: graphSeriesData,\n });\n\n if (index === 0) {\n YAxisoptionsData[0] = {\n ...YAxisoptionsData[0],\n labels: {\n style: {\n colors: CHART_LABEL_COLORS[index],\n fontSize: '12px',\n fontFamily: 'National',\n },\n },\n title: {\n // text: type,\n text: chartData?.graph_data?.length <= 2 ? type : 'Values',\n align: 'middle',\n style: {\n color: CHART_LABEL_COLORS[index],\n },\n },\n };\n }\n if (index > 0 && chartData?.graph_data?.length <= 2) {\n YAxisoptionsData.push({\n seriesName: type,\n opposite: true,\n axisTicks: {\n show: true,\n },\n axisBorder: {\n show: true,\n color: CHART_LABEL_COLORS[index],\n },\n labels: {\n style: {\n colors: CHART_LABEL_COLORS[index],\n fontSize: '12px',\n fontFamily: 'National',\n },\n },\n title: {\n text: type,\n align: 'middle',\n style: {\n color: CHART_LABEL_COLORS[index],\n },\n },\n });\n }\n }\n });\n }\n\n let title = `${selectedParam?.name} (${temporalAggregation?.name})`;\n if (!_.isEmpty(compareParam) && isCompareClicked) {\n title = `${selectedParam?.name}-${compareParam?.name} (${temporalAggregation?.name})`;\n }\n\n let fileName =\n selectedParam?.name +\n '(' +\n renderChartTime(initialSelectedDate?.startDate) +\n '-' +\n renderChartTime(initialSelectedDate?.endDate) +\n ')';\n\n if (location?.region && location?.region.length) {\n if (location?.region[0].latlngs.length > 3) {\n fileName = fileName + '-' + POLYGON;\n } else {\n if (location?.region.length == '1') {\n fileName =\n fileName +\n '-' +\n parseFloat(location?.region[0].latlngs[0])\n .toFixed(2)\n .toString() +\n '-' +\n parseFloat(location?.region[0].latlngs[1])\n .toFixed(2)\n .toString();\n }\n }\n } else if (location?.district?.value) {\n fileName = fileName + '-' + location?.district?.name;\n } else if (location?.state?.value) {\n fileName = fileName + '-' + location?.state?.name;\n } else {\n fileName = fileName + '-' + location?.country?.name;\n }\n\n setOptions(prev => ({\n ...prev,\n title: {\n ...options.title,\n text: title,\n align: 'left',\n offsetX: 600,\n },\n xaxis: {\n ...options.xaxis,\n\n labels: {\n showDuplicates: false,\n hideOverlappingLabels: true,\n format: 'dd/MM/yyyy',\n },\n type: 'datetime',\n tickPlacement: 'on',\n },\n dataLabels: {\n enabled: chartData?.graph_data?.length < 2,\n enabledOnSeries: [0, 1, 2, 3, 4, 5],\n },\n chart: {\n ...options.chart,\n toolbar: {\n show: true,\n export: {\n csv: {\n filename: fileName,\n columnDelimiter: ',',\n headerCategory: 'Date',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n svg: {\n filename: fileName,\n columnDelimiter: ',',\n headerCategory: 'Date',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n png: {\n filename: fileName,\n columnDelimiter: ',',\n headerCategory: 'Date',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n },\n tools: {\n customIcons: [\n {\n icon: `\n
\n );\n}\n\nexport default DroughtChart;\n","import React, { useState, useEffect } from 'react';\nimport { FeatureGroup, Circle, Marker } from 'react-leaflet';\nimport { EditControl } from 'react-leaflet-draw';\nimport _ from 'lodash';\nimport L from 'leaflet';\nimport 'leaflet-draw';\nimport '../../../node_modules/leaflet-draw/dist/leaflet.draw.css';\nimport '../../../node_modules/leaflet/dist/leaflet.css';\nimport 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package\nimport 'leaflet-defaulticon-compatibility';\nimport PropTypes from 'prop-types';\nimport { DRAW_SHAPE } from './../../Components/constants/index';\nimport { t } from 'react-multi-lang';\nimport { showError } from '../../Components/Notifications';\nimport { getRegionData, removeRegionTooltip, setRegionData } from '../../Components/common/utils';\n\nfunction DrawShape(props) {\n const {\n handleSelectedRegion,\n country,\n state,\n district,\n selectedModule,\n isHideViewGraph,\n setMapLayers,\n mapLayers,\n setManuleMarker,\n featureGroupRef,\n manuleMarker,\n } = props;\n const [editableFG, setEditableFG] = useState(null);\n // const [mapLayers, setMapLayers] = useState([]);\n let drawControlRef = React.useRef();\n\n useEffect(() => {\n let mapData = JSON.parse(JSON.stringify(mapLayers));\n handleSelectedRegion(mapData);\n setRegionData(mapData);\n }, [mapLayers]);\n\n useEffect(() => {\n if (editableFG) {\n // here you have all the stored layers\n const drawnItems = editableFG?._layers;\n if (!_.isEmpty(drawnItems)) {\n Object.keys(drawnItems).forEach((layerid, index) => {\n if (index === 0) {\n if (_.isEmpty(mapLayers)) {\n editableFG.removeLayer(drawnItems[layerid]);\n return;\n }\n }\n if (index < DRAW_SHAPE.MAXIMUM_SHAPE_SIX) {\n return;\n } else {\n const layer = drawnItems[layerid];\n editableFG.removeLayer(layer);\n setMapLayers(mapLayers.filter(data => data.id !== Number(layerid)));\n showError(t('EDIT_CONTROL.MAXIMUM_SHAPE_ERROR_6'));\n }\n });\n }\n }\n }, [editableFG, mapLayers]);\n\n useEffect(() => {\n removeLayers(editableFG);\n }, [country, state, district]);\n\n useEffect(() => {\n if (\n (!_.isEmpty(selectedModule) && selectedModule?.api_slug === 'drought-decision-support') ||\n isHideViewGraph\n ) {\n removeLayers(editableFG);\n }\n }, [selectedModule, isHideViewGraph]);\n\n let tempArray = [];\n\n const removeLayers = () => {\n if (!_.isEmpty(editableFG)) {\n // here you have all the stored layers\n const drawnItems = editableFG?._layers;\n // if the number of layers is bigger than 1 then delete the first\n if (!_.isEmpty(drawnItems)) {\n Object.keys(drawnItems).forEach((layerid, index) => {\n const layer = drawnItems[layerid];\n editableFG.removeLayer(layer);\n });\n setMapLayers('');\n }\n }\n };\n\n const onCreated = e => {\n const { layerType, layer } = e;\n let regionData = getRegionData();\n let polyCount = regionData?.length\n ? (regionData?.filter(item => item.layerType === 'polygon')).length\n : 0;\n\n if (layerType === 'marker') {\n let latlang = [layer._latlng.lat, layer._latlng.lng];\n setMapLayers(data => [\n ...data,\n {\n id: layer._leaflet_id,\n layerType,\n polygonCount: '',\n latlngs: [...latlang],\n origin: 'draw',\n },\n ]);\n tempArray.push(e);\n setEditableFG(tempArray);\n\n return;\n }\n if (layerType === 'polygon') {\n const { _leaflet_id } = layer;\n let layerLatLng = [];\n const cordinatesArray = layer.getLatLngs()[0];\n cordinatesArray.map(({ lat, lng }) => {\n layerLatLng.push([lat, lng]);\n });\n setMapLayers(layers => [\n ...layers,\n {\n id: _leaflet_id,\n layerType,\n latlngs: layerLatLng,\n polygonCount: polyCount + 1,\n },\n ]);\n tempArray.push(e);\n setEditableFG(tempArray);\n }\n };\n\n // useEffect(() => {\n\n // } , [editableFG\n // ])\n\n const onEdited = e => {\n const {\n layers: { _layers },\n } = e;\n Object.values(_layers).map(({ _leaflet_id, editing }) => {\n let layerLatLng = [];\n\n if (editing.latlngs?.length) {\n const cordinatesArray = editing.latlngs[0];\n\n cordinatesArray?.length &&\n cordinatesArray[0].map(({ lat, lng }) => {\n layerLatLng.push([lat, lng]);\n });\n\n setMapLayers(layers =>\n layers.map(l => (l.id === _leaflet_id ? { ...l, latlngs: [...layerLatLng] } : l)),\n );\n } else if (!_.isEmpty(editing._marker._latlng)) {\n let cordinates = editing._marker._latlng;\n\n setMapLayers(layers =>\n layers.map(l =>\n l.id === _leaflet_id ? { ...l, latlngs: [cordinates.lat, cordinates.lng] } : l,\n ),\n );\n }\n });\n };\n\n const onDelete = e => {\n const {\n layers: { _layers },\n } = e;\n\n Object.values(_layers).map(({ _leaflet_id }) => {\n setMapLayers(layers => layers.filter(l => l.id !== _leaflet_id));\n });\n };\n\n useEffect(() => {\n if (manuleMarker?.length) {\n manuleMarker.forEach(point => {\n const latlng = { lat: point.latitude, lng: point.longitude };\n const layer = L.marker(latlng).addTo(editableFG);\n onCreated({ layerType: 'marker', layer });\n });\n\n setManuleMarker([]);\n }\n }, [manuleMarker]);\n\n const onFeatureGroupReady = reactFGref => {\n if (reactFGref) {\n const drawnItems = reactFGref?._layers;\n let count = 1;\n var elements = document.getElementsByClassName('draw-polygon');\n var markerElements = document.getElementsByClassName('draw-marker');\n\n removeRegionTooltip(drawnItems, elements);\n removeRegionTooltip(drawnItems, markerElements);\n\n Object.values(drawnItems)?.forEach((layer, index) => {\n if (!_.isEmpty(layer)) {\n if (layer.hasOwnProperty('_latlngs')) {\n if (index <= 1) {\n layer.bindTooltip(`polygon-${count}`, {\n className: 'draw-polygon',\n permanent: true,\n direction: 'top',\n });\n count++;\n }\n } else if (layer?.hasOwnProperty('_latlng')) {\n let tooltipName = `(${layer.editing?._marker?._latlng.lat?.toFixed(\n 2 || '',\n )},${layer.editing?._marker?._latlng.lng?.toFixed(2) || ''})`;\n layer.bindTooltip(tooltipName, {\n className: 'draw-marker',\n permanent: true,\n direction: 'top',\n });\n }\n }\n });\n }\n // store the ref for future access to content\n setEditableFG(reactFGref);\n };\n\n const handleMarker = e => {};\n const onMounted = e => {\n drawControlRef.current = e;\n };\n\n return (\n \n
\n \n {!_.isEmpty(chartData) && (series.length || !_.isEmpty(options)) ? (\n <>\n 50\n ? `${chartData?.graph_data[0]?.millis?.length * 30}px`\n : '100%'\n }\n options={options}\n series={series}\n type=\"line\"\n height=\"300px\"\n />\n \n ) : (\n ''\n )}\n
\n \n {\n onFeatureGroupReady(featureGroupRef);\n }}\n >\n
\n );\n}\n\nDrawShape.propTypes = {\n handleSelectedRegion: PropTypes.func,\n};\n\nexport default DrawShape;\n","import React from 'react';\nimport { Field, FieldArray, reduxForm } from 'redux-form';\nimport { Row, Col } from 'reactstrap';\nimport * as turf from '@turf/turf';\nimport { FaTrashCan } from 'react-icons/fa6';\nimport { showError } from '../Notifications';\n\nconst renderField = ({ input, label, type, meta: { touched, error } }) => (\n \n {input?.value ?
\n);\n\nconst renderMembers = ({ fields, meta: { error } }) => (\n {label}
: ''}\n\n \n {touched && error &&
\n {error}
}\n\n
\n);\n\nconst validate = values => {\n const errors = {};\n\n if (!values.members || !values.members.length) {\n errors.members = { _error: 'At least one location must be entered' };\n } else {\n const membersArrayErrors = [];\n\n values.members.forEach((member, memberIndex) => {\n const memberErrors = {};\n\n if (!member || !member.latitude) {\n memberErrors.latitude = 'Latitude is required';\n membersArrayErrors[memberIndex] = memberErrors;\n } else if (isNaN(Number(member.latitude))) {\n memberErrors.latitude = 'Latitude must be a number';\n membersArrayErrors[memberIndex] = memberErrors;\n }\n\n if (!member || !member.longitude) {\n memberErrors.longitude = 'Longitude is required';\n membersArrayErrors[memberIndex] = memberErrors;\n } else if (isNaN(Number(member.longitude))) {\n memberErrors.longitude = 'Longitude must be a number';\n membersArrayErrors[memberIndex] = memberErrors;\n }\n });\n\n if (membersArrayErrors.length) {\n errors.members = membersArrayErrors;\n }\n }\n\n return errors;\n};\n\nconst FieldArraysForm = props => {\n const { handleSubmit, pristine, reset, submitting, setManuleMarker, toggle, countryJson } = props;\n\n // validation for latitide and longitude using json file\n const onSubmit = data => {\n const validDataPoints = [];\n const inValidPoints = [];\n data.members?.map(eachPoint => {\n const point = turf.point([parseFloat(eachPoint.longitude), parseFloat(eachPoint.latitude)]);\n if (turf.booleanPointInPolygon(point, countryJson.features?.[0])) {\n validDataPoints.push(eachPoint);\n } else {\n inValidPoints.push(eachPoint);\n }\n return null;\n });\n\n if (inValidPoints?.length) {\n const pointsList = inValidPoints\n .map(each => `(${each.latitude}, ${each.longitude})`)\n .join(', ');\n\n // Construct the error message\n const errorMessage = `The following points are invalid: ${pointsList}`;\n showError(errorMessage);\n }\n if (validDataPoints) {\n setManuleMarker(validDataPoints);\n }\n toggle();\n };\n\n // const onSubmit = data => {\n // const validDataPoints = [];\n // const inValidPoints = [];\n\n // data.members.forEach((eachPoint, index) => {\n // const uniqueId = uuidv4();\n // const latitude = parseFloat(eachPoint.latitude);\n // const longitude = parseFloat(eachPoint.longitude);\n\n // if (!isNaN(latitude) && !isNaN(longitude)) {\n // validDataPoints.push({\n // ...eachPoint,\n // id: uniqueId,\n // origin: 'manual',\n // layerType: 'marker',\n // polygonCount: '',\n // latlngs: [latitude, longitude],\n // });\n // } else {\n // inValidPoints.push(index);\n // }\n // });\n\n // if (inValidPoints.length > 0) {\n // showError('Invalid latitude or longitude entered in one or more locations.');\n // }\n\n // if (validDataPoints.length > 0) {\n // setManuleMarker(validDataPoints);\n // toggle();\n // }\n // };\n\n return (\n \n );\n};\n\nexport default reduxForm({\n form: 'fieldArraysForm', // a unique identifier for this form\n validate,\n initialValues: {\n members: [{ latitude: '', longitude: '' }], // Initial value with one empty member\n },\n})(FieldArraysForm);\n","import React from 'react';\nimport { Modal, ModalBody, Row, Col } from 'reactstrap';\nimport { MdOutlineClose } from 'react-icons/md';\nimport PointData from './PointData';\n\nconst DataPopUp = props => {\n const { isOpen, toggle , countryJsonData,countryJson, setManuleMarker, pointsRef, mapLayers, setMapLayers} = props;\n\nreturn (\n <>\n \n {fields.map((member, index) => (\n
\n {fields?.length < 6 ? (\n \n \n
\n {error && {error}}\n
\n ))}\n \n fields.remove(index)} className=\"delete-icon-color\" />\n
\n Location {index + 1}
\n\n
\n ) : (\n ''\n )}\n fields.push()}>\n + Add Location\n
\n\n \n \n \n \n\t\t \n \n \n
\n
\n \n );\n}\n\nexport default DataPopUp;","import React, { useState, useEffect, useRef } from 'react';\nimport {\n MapContainer,\n TileLayer,\n GeoJSON,\n useMap,\n useMapEvents,\n ZoomControl,\n LayersControl,\n LayerGroup,\n Marker,\n Tooltip,\n} from 'react-leaflet';\nimport L from 'leaflet';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport 'leaflet-side-by-side';\nimport { MdKeyboardArrowLeft } from 'react-icons/md';\nimport { Row, Col, Button, FormGroup, Alert } from 'reactstrap';\nimport CustomMarkerIcon from '../../Components/common/CustomIcon.js';\nimport * as ReactDOMServer from 'react-dom/server';\nimport { FaMapMarkerAlt } from 'react-icons/fa';\nimport 'leaflet/dist/leaflet.css';\nimport 'leaflet.control.opacity/dist/L.Control.Opacity.css';\nimport 'leaflet.control.opacity';\nimport SplitterLayout from 'react-splitter-layout';\nimport 'react-splitter-layout/lib/index.css';\nimport '../../assets/CSS/LeafletWrapper.css';\nimport '../../assets/CSS/Header.css';\nimport myConstClass from '../../Constants';\nimport {\n IDSI_AND_VWI,\n INDICES_PARAMS,\n OTHER_INDICES_API_INDICES_SLUGS,\n DEFAULT_COUNTRY,\n DRY_SPELL,\n DDSKEY,\n} from '../../Components/constants/index';\nimport { t } from 'react-multi-lang';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n getDroughtMapRequest,\n getDroughtTimeSeriesRequest,\n getDroughtMapSuccess,\n getMapPreferenceSuccess,\n getMapPreferenceBoundariesSuccess,\n getWeatherForecastData,\n getFinalDroughtMapRequest,\n getWeatherForecastDataSuccess,\n getFinalDroughtMapSuccess,\n getFinalDroughtMapFailed,\n} from '../../redux/actions';\nimport DroughtSidebar from './sidebar';\nimport Loader from '../../Components/common/TextLoader';\nimport GraphLoader from '../../Components/common/GraphLoader';\nimport { showError } from '../../Components/Notifications.js';\nimport CustomLegend from '../WeatherForecast/CustomLayerControl/CustomLegend';\nimport DiscreteLegend from '../WeatherForecast/CustomLayerControl/DiscreteLegend';\nimport MapPreferences from '../WeatherForecast/MapPreferences';\nimport DroughtChart from './DroughtChart';\nimport DrawShape from './DrawShape';\nimport {\n API_BASE_URL,\n MASTER_SERVER_BASE_URL,\n AXIOS_INSTANCE,\n AXIOS_INSTANCE_MASTER_SERVER,\n} from '../../redux/api/apiEndPoint';\nimport { CgCloseO } from 'react-icons/cg';\nimport mapPreferenceIcon from '../../assets/Images/mapPreferenceIcon.svg';\nimport point_location from '../../assets/Images/point_location.png';\nimport {\n SOUTH_ASIA_CONST,\n MAP_PREFERENCES_lABELS,\n DATA_SOURCES,\n GEOJSON_COUNTRY_TOOLTIP_DATA,\n GEOJSON_COUNTRY_DATA,\n DROUGHT_MODULES_CONST,\n} from '../../Components/constants';\nimport { returnDSSDateFormat, isLogedIn } from '../../Components/common/utils';\nimport { useHistory } from 'react-router-dom';\nimport PointDataModal from '../../Components/common/PointDataModal.js';\n\nconst DroughtMap = props => {\n const { popUpSelectedModule, modal } = props;\n const history = useHistory();\n const dispatch = useDispatch();\n const { Overlay } = LayersControl;\n const [isOpenMapModel, setIsOpenMapModel] = useState(false);\n const [isOpenAlertIndicesTable, setIsOpenAlertIndicesTable] = useState(false);\n const [map, setMap] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const layerRef = useRef([]);\n const splitterRef = useRef(null);\n const featureGroupRef = useRef();\n const [mapPreferRefs, setMapPreferRefs] = useState([]);\n const [isHideBar, setBar] = useState(false);\n const [params, setParams] = useState('');\n const [precipitationThreshold, setPrecipitationThreshold] = useState(124);\n const [comparePrecipitationThreshold, setComparePrecipitationThreshold] = useState(124);\n const [drySpellPrecipitationThreshold, setDrySpellPrecipitationThreshold] = useState(2.5);\n const [compareDrySpellPrecipitationThresold, setCompareDrySpellPrecipitationThresold] = useState(\n 2.5,\n );\n const [selectedParam, setSelectedParam] = useState('');\n const [selectedYear, setSelectedYear] = useState('');\n const [previousParam, setPreviousParam] = useState('');\n const [compareSelectedParam, setCompareSelectedParam] = useState('');\n const [initialSelectedDate, setInitialSelectedDate] = useState([]);\n const [finalSelectedDate, setFinalSelectedDate] = useState([]);\n const [thresholdData, setThresholdData] = useState([]);\n const [DroughtIndicators, setDroughtIndicators] = useState([]);\n const [DSSTabularDate, setDSSTabularDate] = useState({\n startDate: '',\n endDate: '',\n });\n const [mapPreferencesData, setMapPreferencesData] = useState([]);\n const [geoJsonData, setGeoJsonData] = useState([]);\n const [geoJsonAllData, setGeoJsonAllData] = useState([]);\n const [geoJsonLayersData, setGeoJsonLayerData] = useState([]);\n const [getBoundariesData, setGetBoundariesData] = useState([]);\n const [selectedParamLegendData, setSelectedParamLegendData] = useState([]);\n const [compareParamLegendData, setCompareParamLegendData] = useState([]);\n const [selectedMapPreferLegendData, setSelectedMapPreferLegendData] = useState([]);\n const [showCharts, setShowCharts] = useState(false);\n const [graphData, setGraphData] = useState('');\n const mapRef = useRef(null);\n const [mapControl, setMapControl] = useState({});\n const [mapPreferUrl, setMapPreferUrl] = useState('');\n const [mapLayerOpacity, setMapLayerOpacity] = useState({ layer: '' });\n const [opacityControl, setOpacityControl] = useState('');\n const [compareView, setCompareView] = useState([]);\n const [isCompareClicked, setIsCompareClicked] = useState(false);\n const [mapPreferenceGeoJsonloading, setMapPreferenceGeoJsonloading] = useState(false);\n const [errorData, setErrorData] = useState({ showError: false, data: '' });\n const [isGraphLoading, setIsGraphLoading] = useState();\n const [selectedRegionId, setSelectedRegionId] = useState('');\n const [isOpenWeatherForecastDataModal, setIsOpenWeatherForecastDataModal] = useState(false);\n const [selectedDroughtPhase, setSelectedDroughtPhase] = useState('');\n const [weatherModuleData, setWeatherModuleData] = useState('');\n const [DSSTimeSeriesData, setDSSTimeSeriesData] = useState('');\n const [isShowDroughtCheckModal, setIsShowDroughtCheckModal] = useState(false);\n const [mapPrefereTileLayerRef, setMapPrefereTileLayerRef] = useState([]);\n const [isThresholdDataLoading, setIsThresholdDataLoading] = useState(false);\n const [indexLayers, setIndexLayers] = useState([]);\n const [manuleMarker, setManuleMarker] = useState([]);\n const [mapLayers, setMapLayers] = useState([]);\n const [selectedModule, setSelectedModule] = useState({\n value: 'drought monitor',\n label: 'Drought Monitor',\n api_slug: 'drought-monitor',\n });\n const [finalDroughtParameterMonthsList, setFinalDroughtParameterMonthsList] = useState([\n {\n id: 'smci',\n slug: 'smci',\n name: 'SMCI',\n category: 'Mid Season',\n options: [],\n selectedOption: {},\n },\n {\n id: 'vhi',\n slug: 'vhi',\n name: 'VHI',\n category: 'Mid Season',\n options: [],\n selectedOption: {},\n },\n {\n id: 'idsi',\n slug: 'idsi',\n name: 'IDSI',\n category: 'Terminal',\n options: [],\n selectedOption: {},\n },\n ]);\n const [tableData, setTableData] = useState([]);\n const [chartParamsData, setChartParamsData] = useState({\n temporalAggregation: '',\n selectedParam: '',\n compareParam: '',\n region: '',\n initialSelectedDate: '',\n location: '',\n });\n const [mapPreferences, setMapPreferences] = useState({\n country: { layer: useRef(), color: '', data: '', country: '' },\n states_or_provinces: { layer: useRef(), color: '', data: '', country: '' },\n districts_or_cities: { layer: useRef(), color: '', data: '', country: '' },\n meteorological_locations: { layer: useRef(), color: '', data: '', country: '' },\n basins: { layer: useRef(), color: '', data: '', country: '' },\n rivers_or_reservoirs: { layer: useRef(), color: '', data: '', country: '' },\n talukas: { layer: useRef(), color: '', data: '', country: '' },\n });\n const [currentUserLocation, setCurrenUserLocation] = useState('India');\n const [selectedLocation, setSelectedLocation] = useState({\n country: '',\n state: '',\n district: '',\n basin: '',\n region: '',\n markerPointData: '',\n });\n const [compareLocation, setCompareLocation] = useState({\n country: '',\n state: '',\n district: '',\n basin: '',\n region: '',\n markerPointData: '',\n });\n const [cordinateAndZoom, setCordinateAndZoom] = useState({\n cordinates: [23.4073, 79.446],\n locationCordinates: [23.4073, 79.446],\n markerCordinates: [23.4073, 79.446],\n zoom: 5.5,\n searchMarkerCoordinates: '',\n });\n const [searchLocation, setSearchLocation] = useState('');\n // const [countryJson , setCountryJson] = useState(\"\")\n const [compareCordinates, setCompareCordinates] = useState([]);\n const [isPreviewIndicesData, setIsPreviewIndicesData] = useState(false);\n const [mapData, setMapData] = useState('');\n const [mapUrl, setMapUrl] = useState({\n name: '',\n url: '',\n });\n\n const [state, setState] = useState({\n min: 0,\n max: 0,\n });\n\n const [layerControl, setLayerControl] = useState({\n firstLayer: {},\n secondLayer: {},\n });\n const [countryJson, setCountryJson] = useState('');\n const [temporalAggregation, setTemporalAggregation] = useState('');\n const [isFinalDroughtMap, setIsFinalDroughtMap] = useState(false);\n const [applyLayers, setApplyLayers] = useState(false);\n const [isHideViewGraph, setIsHideViewGraph] = useState(false);\n const [selectedDPIndicesMonth, setSelectedDPIndicesMonth] = useState({\n month: '3',\n value: '3',\n id: '3',\n label: '3',\n frequency: '03',\n });\n const [compareSelectedDPIndicesMonth, setCompareSelectedDPIndicesMonth] = useState({\n month: '3',\n value: '3',\n id: '3',\n label: '3',\n frequency: '03',\n });\n\n const [rainfallAnamolyTime, setRainfallAnamolyTime] = useState({\n start_year: '',\n end_year: '',\n month: '',\n });\n\n const [compareRainfallAnamolyTime, setCompareRainfallAnamolyTime] = useState({\n start_year: '',\n end_year: '',\n month: '',\n });\n\n const urlParams = new URLSearchParams(window.location.search);\n const selectedCountry = urlParams.get('Country');\n\n const pointsRef = useRef();\n\n const [isOpenPointModal, setIsOpenPointModal] = useState(false);\n\n const { Weather, DroughtMonitor, boundries } = useSelector(state => ({\n Weather: state.Weather,\n DroughtMonitor: state.DroughtMonitor,\n boundries: state.Map_Preference,\n }));\n\n const [stateNameFromLocation, setStateNameFromLocation] = useState('');\n //useeffect for getting map layers data from redux\n useEffect(() => {\n if (!isLogedIn()) {\n let path = window.location.pathname;\n if (window.location.search == DDSKEY) {\n let queryParam = window.location.search;\n history.push(\n `/login?prevPath=${path.substring(1, path.length)}&${queryParam.substring(\n 1,\n queryParam.length,\n )}`,\n );\n } else {\n history.push(\n `/login?prevPath=${path.substring(1, path.length)}&Country=${selectedCountry}`,\n );\n }\n }\n // dispatch(getDroughtMapSuccess(''));\n dispatch(getMapPreferenceSuccess(''));\n setMapData('');\n setIsOpenWeatherForecastDataModal(false);\n dispatch(getWeatherForecastDataSuccess(''));\n return () => {\n setSelectedParamLegendData('');\n setCompareParamLegendData('');\n dispatch(getMapPreferenceBoundariesSuccess(''));\n dispatch(getWeatherForecastDataSuccess(''));\n dispatch(getFinalDroughtMapSuccess({}));\n dispatch(getFinalDroughtMapFailed({}));\n dispatch(getDroughtMapSuccess({}));\n setShowCharts(false);\n };\n }, []);\n\n // useEffect (()=>{\n // if(modal === false){\n // setIsOpenMapModel(true)\n // }else{\n // setIsOpenMapModel(false)\n // }\n // },[modal])\n\n const firstRun = useRef(true);\n useEffect(() => {\n if (firstRun.current) {\n firstRun.current = false;\n return;\n }\n if (boundries?.mapPreferenceData) {\n setGetBoundariesData(boundries?.mapPreferenceData?.data?.result);\n }\n }, [boundries?.mapPreferenceData]);\n useEffect(() => {\n if (getBoundariesData && getBoundariesData?.length) {\n let API_URL = [];\n mapPreferRefs.current = [];\n mapPrefereTileLayerRef.current = [];\n getBoundariesData?.map(item => {\n if (item?.data && item?.data.length) {\n item.data.map(boundary => {\n if (boundary?.boundary_data_url.length) {\n setGeoJsonData([]);\n setGeoJsonAllData([]);\n let mapPreferKeys = Object.keys(mapPreferences);\n if (mapPreferKeys) {\n mapPreferKeys.map(item => {\n let selectedLayer = mapPreferences[item];\n if (selectedLayer?.layer && selectedLayer?.layer?.current)\n selectedLayer?.layer?.current?.clearLayers();\n selectedLayer.color = '';\n setMapPreferences(prev => {\n return {\n ...prev,\n [item]: selectedLayer,\n };\n });\n });\n }\n setMapPreferenceGeoJsonloading(true);\n let config = {\n name: boundary?.boundarytype?.slug,\n id: boundary?.boundarytype_id,\n color: boundary?.boundarytype?.color?.code,\n category: boundary?.category,\n country_id: boundary?.country_id,\n };\n if (\n currentUserLocation === DEFAULT_COUNTRY.name &&\n selectedLocation?.country?.name === SOUTH_ASIA_CONST.name &&\n boundary?.boundarytype?.slug === MAP_PREFERENCES_lABELS.COUNTRY\n ) {\n API_URL.push(AXIOS_INSTANCE.get(boundary?.boundary_data_india_url, config));\n } else {\n API_URL.push(AXIOS_INSTANCE.get(boundary?.boundary_data_url, config));\n }\n } else {\n let ref = React.createRef();\n ref.current = {\n boundary_id: boundary?.boundarytype_id,\n name: boundary?.boundarytype?.boundarytype,\n layer: React.createRef(),\n };\n mapPreferRefs.current.push(ref);\n }\n });\n }\n });\n Promise.all(API_URL).then(response => {\n let res = JSON.parse(JSON.stringify(response));\n setMapPreferenceGeoJsonloading(false);\n setGeoJsonLayerData(res);\n });\n }\n }, [getBoundariesData]);\n\n useEffect(() => {\n if (geoJsonLayersData?.length) {\n const countryData123 = geoJsonLayersData?.find(each => each?.config?.name === 'country');\n\n setCountryJson(countryData123?.data);\n }\n }, [geoJsonLayersData]);\n\n // useEffect(() => {\n // if (DroughtMonitor.getDssThresholdData) {\n // if (DroughtMonitor.getDssThresholdData?.data) {\n // let data = DroughtMonitor.getDssThresholdData.data;\n // if (data?.result?.length) {\n // setThresholdData(data?.result[0]);\n // }\n // }\n // } else {\n // setThresholdData([]);\n // }\n // }, [DroughtMonitor.getDssThresholdData]);\n\n useEffect(() => {\n let selectedGeoJsonData = [];\n if (geoJsonLayersData?.length && geoJsonData?.length) {\n geoJsonData?.map(item => {\n let filteredObj = geoJsonLayersData?.find(\n layer => layer.config.id === item.id && layer.config.country_id === item.country_id,\n );\n if (!_.isEmpty(filteredObj)) {\n filteredObj.fromMapPreferences = item.fromMapPreferences;\n selectedGeoJsonData.push(filteredObj);\n }\n });\n } else {\n selectedGeoJsonData = [];\n }\n setGeoJsonAllData(selectedGeoJsonData);\n }, [geoJsonLayersData, geoJsonData]);\n\n useEffect(() => {\n if (Weather.weatherForecastData) {\n if (Weather.weatherForecastData) {\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n const { result } = Weather?.weatherForecastData?.data;\n setIsOpenWeatherForecastDataModal(!isOpenWeatherForecastDataModal);\n setWeatherModuleData(result);\n }\n } else {\n setIsOpenWeatherForecastDataModal(false);\n setWeatherModuleData([]);\n }\n }, [Weather.weatherForecastData]);\n\n useEffect(() => {\n if (!_.isEmpty(selectedModule) && selectedModule?.api_slug === 'drought-decision-support') {\n setShowCharts(false);\n }\n setShowCharts(false);\n dispatch(getWeatherForecastDataSuccess({}));\n setSelectedParam('');\n setCompareSelectedParam('');\n setIsCompareClicked(false);\n setInitialSelectedDate([]);\n setFinalSelectedDate([]);\n setIsFinalDroughtMap(false);\n setPrecipitationThreshold(124);\n setComparePrecipitationThreshold(124);\n setDrySpellPrecipitationThreshold(2.5);\n setCompareDrySpellPrecipitationThresold(2.5);\n setRainfallAnamolyTime({\n start_year: '',\n end_year: '',\n month: '',\n });\n setCompareRainfallAnamolyTime({\n start_year: '',\n end_year: '',\n month: '',\n });\n }, [selectedModule]);\n\n useEffect(() => {\n if (!_.isEmpty(selectedLocation?.country)) {\n if (selectedLocation?.country?.name !== DEFAULT_COUNTRY?.name) {\n removeGeoJsonLayer(mapPreferences, { layerName: '' });\n } else {\n removeGeoJsonLayer(mapPreferences, { layerName: MAP_PREFERENCES_lABELS.STATES });\n }\n }\n }, [selectedModule, selectedLocation?.country]);\n\n useEffect(() => {\n setShowCharts(false);\n }, [selectedParam, compareSelectedParam, selectedLocation.country]);\n\n useEffect(() => {\n if (selectedLocation?.county) {\n setCountryJson('');\n }\n }, [selectedLocation?.country]);\n useEffect(() => {\n if (\n selectedParam.api_slug === OTHER_INDICES_API_INDICES_SLUGS.CROP_HARVEST ||\n selectedParam.api_slug === OTHER_INDICES_API_INDICES_SLUGS.MODIS_FLOOD ||\n selectedParam.api_slug === OTHER_INDICES_API_INDICES_SLUGS.FLOOD\n ) {\n setIsHideViewGraph(true);\n } else {\n setIsHideViewGraph(false);\n }\n }, [selectedParam]);\n\n useEffect(() => {\n if (splitterRef && splitterRef.current) {\n if (errorData?.showError) {\n splitterRef.current.setState({ secondaryPaneSize: '30%' });\n } else {\n splitterRef.current.setState({ secondaryPaneSize: '70%' });\n }\n }\n }, [errorData]);\n\n useEffect(() => {\n if (DroughtMonitor.isGetFinalDroughtMapRequesting) {\n setIsLoading(true);\n } else if (DroughtMonitor.getFinalDroughtMapData) {\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n } else if (DroughtMonitor.getFinalDroughtMapDataError) {\n if (DroughtMonitor.getFinalDroughtMapDataError?.response) {\n const {\n data: {\n response: { data },\n },\n } = DroughtMonitor?.getFinalDroughtMapDataError?.response;\n if (!_.isEmpty(data) && data?.message) {\n showError(data?.message);\n } else {\n if (data?.exception) {\n showError(data?.exception);\n }\n }\n }\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n }\n }, [\n DroughtMonitor.isGetFinalDroughtMapRequesting,\n DroughtMonitor.getFinalDroughtMapData,\n DroughtMonitor.getFinalDroughtMapDataError,\n ]);\n\n const isFirstRun = useRef(true);\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n if (DroughtMonitor.isGetDroughtMapRequesting) {\n setIsLoading(true);\n }\n if (DroughtMonitor.getDroughtMapData) {\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n const { response } = DroughtMonitor.getDroughtMapData;\n if (Array.isArray(response?.data)) {\n if (response?.isDroughtModule) {\n setMapData(response?.data);\n }\n } else {\n const { result } = response?.isDroughtModule ? response?.data : { result: '' };\n setMapData(result);\n }\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n } else if (DroughtMonitor.getDroughtMapDataError) {\n const {\n data: { response },\n } = DroughtMonitor.getDroughtMapDataError?.response;\n if (\n response === undefined &&\n DroughtMonitor.getDroughtMapDataError?.response?.data?.message === 'Network Error'\n ) {\n showError(t('DROUGHT_MONITORING.API_FAILURE_ERROR'));\n }\n if (response?.data?.exception) {\n showError(response?.data?.exception);\n } else if (response?.data?.code === 400) {\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n if (!_.isEmpty(response?.data?.errors)) {\n let errorsObj = response?.data?.errors;\n if (!_.isEmpty(errorsObj)) {\n const values = Object.values(errorsObj);\n showError(values[0]);\n }\n } else {\n showError(response?.data?.message);\n }\n }\n\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n } else if (DroughtMonitor.getDroughtMapDataNetworkError) {\n //setIsLoading(false);\n }\n }, [\n DroughtMonitor.getDroughtMapData,\n DroughtMonitor.isGetDroughtMapRequesting,\n DroughtMonitor.getDroughtMapDataError,\n DroughtMonitor.getDroughtMapDataNetworkError,\n ]);\n\n useEffect(() => {\n if (DroughtMonitor.getFinalDroughtMapData) {\n if (DroughtMonitor?.getFinalDroughtMapData?.data) {\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n let { result } = DroughtMonitor?.getFinalDroughtMapData?.data;\n if (result) {\n setMapData(result);\n }\n }\n } else if (DroughtMonitor.getFinalDroughtMapDataError) {\n if (DroughtMonitor.getFinalDroughtMapDataError?.response?.data) {\n let { response } = DroughtMonitor.getFinalDroughtMapDataError?.response?.data;\n if (response?.data?.code === 400) {\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n if (!_.isEmpty(response?.data?.errors)) {\n let errorsObj = response?.data?.errors;\n if (!_.isEmpty(errorsObj)) {\n const values = Object.values(errorsObj);\n showError(values[0]);\n }\n } else {\n showError(response?.data?.message);\n }\n }\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n }\n }\n }, [DroughtMonitor.getFinalDroughtMapData, DroughtMonitor.getFinalDroughtMapDataError]);\n\n useEffect(() => {\n if (DroughtMonitor.isCheckDroughtCriteriaRequesting) {\n setIsLoading(true);\n } else {\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n }\n }, [DroughtMonitor.isCheckDroughtCriteriaRequesting]);\n\n //useeffect for getting graph data from redux\n useEffect(() => {\n if (DroughtMonitor.isGetDroughtTimeseriesRequesting) {\n setIsGraphLoading(true);\n setGraphData([]);\n }\n if (DroughtMonitor.getDroughtTimeseriesData) {\n const { result } = DroughtMonitor.getDroughtTimeseriesData.data;\n if (selectedModule?.api_slug === 'drought-decision-support') {\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n }\n let mapSeriesdata = {};\n let temporaryArrayData = [];\n temporaryArrayData.push(result.graph_data);\n mapSeriesdata.graph_data = temporaryArrayData;\n\n setGraphData(mapSeriesdata);\n setIsGraphLoading(false);\n setIsOpenAlertIndicesTable(!isOpenAlertIndicesTable);\n let aggregation = _.cloneDeep(temporalAggregation);\n let paramData = _.cloneDeep(selectedParam);\n let compareParamData = _.cloneDeep(compareSelectedParam);\n let regionData = _.cloneDeep(selectedLocation?.region);\n let startDate = _.cloneDeep(initialSelectedDate);\n let location = _.cloneDeep(selectedLocation);\n setChartParamsData({\n temporalAggregation: aggregation,\n selectedParam: paramData,\n compareParam: compareParamData,\n region: regionData,\n initialSelectedDate: startDate,\n location: location,\n });\n } else if (DroughtMonitor.getDroughtTimeseriesDataError) {\n setGraphData([]);\n const {\n data: { response },\n } = DroughtMonitor.getDroughtTimeseriesDataError?.response;\n if (\n response === undefined &&\n DroughtMonitor.getDroughtTimeseriesDataError?.response?.data?.message === 'Network Error'\n ) {\n setErrorData({ showError: true, data: t('DROUGHT_MONITORING.API_FAILURE_ERROR') });\n }\n if (selectedModule?.api_slug === 'drought-decision-support') {\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n }\n if (response?.data?.code === 400) {\n if (!_.isEmpty(response?.data?.errors)) {\n let errorsObj = response?.data?.errors;\n if (!_.isEmpty(errorsObj)) {\n const values = Object.values(errorsObj);\n setErrorData({ showError: true, data: values[0] });\n }\n } else {\n if (selectedModule?.api_slug === 'drought-decision-support') {\n showError(response?.data?.message);\n }\n //setErrorData({ showError: true, data: response?.data?.message });\n // showError(response?.data?.message)\n setErrorData({ showError: true, data: response?.data?.message });\n }\n }\n setIsGraphLoading(false);\n } else if (DroughtMonitor.getDroughtTimeseriesDataNetworkError) {\n if (selectedModule?.api_slug === 'drought-decision-support') {\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n }\n setIsGraphLoading(false);\n }\n }, [\n DroughtMonitor.isGetDroughtTimeseriesRequesting,\n DroughtMonitor.getDroughtTimeseriesData,\n DroughtMonitor.getDroughtTimeseriesDataError,\n DroughtMonitor.getDroughtTimeseriesDataNetworkError,\n ]);\n\n //useeffect to reset all the map preferences states data when country gets changed\n useEffect(() => {\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\n setMapPreferencesData([]);\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\n\n if (selectedLegend.length) {\n selectedLegend.forEach(function(value, i) {\n if (value.add) {\n value.add = false;\n }\n });\n setSelectedMapPreferLegendData(selectedLegend);\n }\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n }, [selectedRegionId, selectedDroughtPhase]);\n\n useEffect(() => {\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n }, [selectedLocation?.country, selectedLocation?.state, selectedLocation?.district]);\n\n useEffect(() => {\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\n setMapPreferencesData([]);\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\n\n if (selectedLegend.length) {\n selectedLegend.forEach(function(value, i) {\n if (value.add) {\n value.add = false;\n }\n });\n setSelectedMapPreferLegendData(selectedLegend);\n }\n }, [selectedLocation?.country]);\n\n // compare maps drag feature disabling stopped\n // useEffect(() => {\n // if (!_.isEmpty(mapControl)) {\n // mapControl?.on('dividermove', map.dragging.disable());\n // } else if (!_.isEmpty(map)) {\n // map?.dragging?.enable();\n // }\n // }, [mapControl]);\n\n // useEffect(()=>{\n // if(mapUrl?.url){\n // if(map.hasLayer(mapUrl?.layer)){\n // mapUrl?.layer?.bringToFront();\n // }\n // }\n // },[mapUrl])\n\n useEffect(() => {\n if (\n (selectedMapPreferLegendData?.length && selectedMapPreferLegendData?.every(i => !i.add)) ||\n !selectedMapPreferLegendData?.length\n ) {\n if (!_.isEmpty(layerControl?.firstLayer) && !_.isEmpty(layerControl?.secondLayer)) {\n let array = [];\n array.push(layerControl?.firstLayer);\n array.push(layerControl?.secondLayer);\n setIndexLayers(array);\n } else if (mapUrl?.url) {\n setMapLayerOpacity({ layer: mapUrl?.layer });\n let array = [];\n array.push(mapUrl?.layer);\n setIndexLayers(array);\n }\n } else if (selectedMapPreferLegendData?.length) {\n if (mapPreferUrl?.url) {\n let array = [];\n array.push(mapPreferUrl?.layer);\n setIndexLayers(array);\n setMapLayerOpacity({ layer: mapPreferUrl?.layer });\n }\n }\n }, [selectedMapPreferLegendData]);\n\n useEffect(() => {\n if (\n (selectedParamLegendData?.length && selectedParamLegendData?.every(i => !i.add)) ||\n !selectedParamLegendData?.length\n ) {\n if (mapPreferUrl?.url) {\n let array = [];\n array.push(mapPreferUrl?.layer);\n setIndexLayers(array);\n setMapLayerOpacity({ layer: mapPreferUrl?.layer });\n }\n } else if (\n selectedParamLegendData?.length &&\n ((compareParamLegendData?.length && compareParamLegendData?.every(i => !i.add)) ||\n !compareParamLegendData?.length)\n ) {\n if (mapUrl?.url) {\n let array = [];\n array.push(mapUrl?.layer);\n setIndexLayers(array);\n setMapLayerOpacity({ layer: mapUrl?.layer });\n }\n }\n }, [selectedParamLegendData]);\n\n useEffect(() => {\n if (\n (compareParamLegendData?.length && compareParamLegendData?.every(i => !i.add)) ||\n !compareParamLegendData?.length\n ) {\n if (mapPreferUrl?.url) {\n let array = [];\n array.push(mapPreferUrl?.layer);\n setIndexLayers(array);\n setMapLayerOpacity({ layer: mapPreferUrl?.layer });\n }\n } else if (compareParamLegendData?.length) {\n if (!_.isEmpty(layerControl?.firstLayer) && !_.isEmpty(layerControl?.secondLayer)) {\n let array = [];\n array.push(layerControl?.firstLayer);\n array.push(layerControl?.secondLayer);\n setIndexLayers(array);\n }\n }\n }, [compareParamLegendData]);\n\n useEffect(() => {\n if (!_.isEmpty(indexLayers)) {\n addOpacitySlider();\n if (indexLayers?.length) {\n indexLayers.map(l => l.bringToFront());\n }\n }\n }, [indexLayers]);\n\n // useEffect(()=>{\n // if(mapPreferUrl?.url){\n // if(map.hasLayer(mapPreferUrl?.layer)){\n // mapPreferUrl?.layer?.bringToFront();\n // }\n // }\n // },[mapPreferUrl])\n\n //useeffect for adding drought Indices layers and legend into the map\n useEffect(() => {\n if (!_.isEmpty(mapData)) {\n const currentParamRef = layerRef.current[selectedParam?.paramIndex];\n let map_data = '';\n let opacityControl = '';\n let legendArray = [...selectedParamLegendData];\n let compareLegendArray = [...compareParamLegendData];\n let legendObj = {};\n let compareLegendObj = {};\n\n if (Array.isArray(mapData)) {\n let data1 = mapData[0]?.map_data;\n let data2 = mapData[1]?.map_data;\n\n if (data1?.code === 400 || data2?.code === 400) {\n const filteredMapData = mapData.find(i => i?.map_data?.code === 400);\n showError(filteredMapData?.map_data?.message);\n return false;\n }\n compareLegendObj = { ...data1 };\n compareLegendObj.id = selectedParam.name;\n compareLegendObj.add = true;\n compareLegendObj.parameter = selectedParam.name;\n compareLegendObj.dataSource = selectedParam.drought_indices_category_name;\n compareLegendObj.measure = data1?.units || '';\n compareLegendObj.fromMapPreferences = false;\n if (selectedParam.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug) {\n compareLegendObj.selectedDates = {\n startDate: `01-${rainfallAnamolyTime?.month?.value}-${rainfallAnamolyTime.end_year?.value}`,\n endDate: `${rainfallAnamolyTime?.month?.days}-${rainfallAnamolyTime?.month?.value}-${rainfallAnamolyTime.end_year?.value}`,\n };\n } else if (selectedModule?.api_slug === DROUGHT_MODULES_CONST[2].api_slug) {\n compareLegendObj.selectedDates = {\n startDate: ``,\n endDate: ``,\n };\n } else {\n compareLegendObj.selectedDates = {\n startDate: moment(initialSelectedDate.startDate).format('DD-MM-YYYY'),\n endDate: moment(initialSelectedDate.endDate).format('DD-MM-YYYY'),\n };\n }\n\n legendObj = { ...data2 };\n legendObj.id = compareSelectedParam.name;\n legendObj.add = true;\n legendObj.parameter = compareSelectedParam.name;\n legendObj.dataSource = compareSelectedParam.drought_indices_category_name;\n legendObj.measure = data2?.units || '';\n legendObj.fromMapPreferences = false;\n if (compareSelectedParam.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug) {\n legendObj.selectedDates = {\n startDate: `01-${compareRainfallAnamolyTime?.month?.value}-${compareRainfallAnamolyTime.end_year?.value}`,\n endDate: `${compareRainfallAnamolyTime?.month?.days}-${compareRainfallAnamolyTime?.month?.value}-${compareRainfallAnamolyTime.end_year?.value}`,\n };\n } else if (selectedModule?.api_slug === DROUGHT_MODULES_CONST[2].api_slug) {\n legendObj.selectedDates = {\n startDate: ``,\n endDate: ``,\n };\n } else {\n legendObj.selectedDates = {\n startDate: moment(finalSelectedDate.startDate).format('DD-MM-YYYY'),\n endDate: moment(finalSelectedDate.endDate).format('DD-MM-YYYY'),\n };\n }\n if (!_.isEmpty(currentParamRef) && !_.isEmpty(currentParamRef?.current)) {\n currentParamRef.current._url = data1.map_url;\n currentParamRef.current._url1 = data2.map_url;\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n\n if (currentParamRef.current._url1) {\n const firstLayer = L.tileLayer(currentParamRef.current._url);\n firstLayer?.addTo(map);\n const secondLayer = L.tileLayer(currentParamRef.current._url1);\n secondLayer?.addTo(map);\n let updatedIndexLayer = [...indexLayers];\n updatedIndexLayer.push(firstLayer);\n updatedIndexLayer.push(secondLayer);\n setIndexLayers(updatedIndexLayer);\n const control = L.control.sideBySide(firstLayer, secondLayer);\n setLayerControl({ firstLayer, secondLayer });\n setMapControl(control);\n control?.addTo(map);\n }\n }\n compareLegendArray.push(compareLegendObj);\n setCompareParamLegendData(compareLegendArray);\n } else {\n if (mapData?.map_data && !_.isEmpty(mapData.map_data)) {\n map_data = mapData?.map_data;\n }\n if (map_data.code === 400) {\n showError('No record found . Please select different date range');\n return false;\n }\n legendObj = { ...map_data };\n legendObj.id = selectedParam.name;\n legendObj.add = true;\n legendObj.parameter = isFinalDroughtMap ? 'Drought Map' : selectedParam.name;\n legendObj.dataSource = selectedParam.drought_indices_category_name;\n legendObj.measure = map_data?.units || '';\n legendObj.fromMapPreferences = false;\n if (selectedParam.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug) {\n legendObj.selectedDates = {\n startDate: `01-${rainfallAnamolyTime?.month?.value}-${rainfallAnamolyTime.end_year?.value}`,\n endDate: `${rainfallAnamolyTime?.month?.days}-${rainfallAnamolyTime?.month?.value}-${rainfallAnamolyTime.end_year?.value}`,\n };\n } else if (selectedModule?.api_slug === DROUGHT_MODULES_CONST[2].api_slug) {\n legendObj.selectedDates = {\n startDate: '',\n endDate: '',\n };\n } else {\n legendObj.selectedDates = {\n startDate: moment(initialSelectedDate.startDate).format('DD-MM-YYYY'),\n endDate: moment(initialSelectedDate.endDate).format('DD-MM-YYYY'),\n };\n }\n\n // TODO: need to change looping through layers\n if (!_.isEmpty(currentParamRef) && !_.isEmpty(currentParamRef?.current)) {\n currentParamRef.current?.eachLayer(layer => {\n if (map_data) {\n layer.setUrl(map_data?.map_url);\n setMapUrl({ name: selectedParam.name, url: map_data?.map_url, layer });\n let updatedIndexLayer = [...indexLayers];\n updatedIndexLayer.push(layer);\n setIndexLayers(updatedIndexLayer);\n setMapLayerOpacity({\n layer,\n });\n }\n });\n if (layerRef?.current?.length) {\n layerRef.current.map((i, index) => {\n removeLayers(layerRef.current[index]);\n });\n }\n }\n if (!_.isEmpty(currentParamRef) && currentParamRef?.current !== null) {\n addLayers(currentParamRef);\n }\n }\n\n if (selectedParamLegendData.length) {\n legendArray.forEach((value, i) => {\n if (value.add) {\n value.add = false;\n }\n });\n }\n\n if (map?.opacityControl) {\n map.removeControl(opacityControl);\n }\n legendArray.push(legendObj);\n setSelectedParamLegendData(legendArray);\n }\n }, [mapData]);\n\n //use effect for adding the opacity control slider in map\n // useEffect(() => {\n // if (!_.isEmpty(mapLayerOpacity) && !_.isEmpty(mapLayerOpacity?.layer)) {\n // if (!_.isEmpty(opacityControl)) map.removeControl(opacityControl);\n // let customOpacityControl = '';\n // customOpacityControl = L.control.opacity(mapLayerOpacity, {\n // collapsed: false,\n // position: 'topright',\n // });\n // setOpacityControl(customOpacityControl);\n // customOpacityControl?.addTo(map);\n // }\n // }, [mapLayerOpacity]);\n\n useEffect(() => {\n if (mapPreferencesData?.length) {\n let MapPrefereArr = [];\n mapPreferencesData?.map(item => {\n let legendItem = JSON.parse(JSON.stringify(item.result));\n legendItem.parameter =\n item.slug === MAP_PREFERENCES_lABELS.JRC\n ? t('WEATHER_FORECAST.MAP_PREFERENCES.WATER_OCCURRENCE')\n : item.slug === MAP_PREFERENCES_lABELS.MOD44\n ? t('WEATHER_FORECAST.MAP_PREFERENCES.PERMANENT_WATER')\n : item?.legendName;\n legendItem.dataSource = item?.category;\n legendItem.add = true;\n legendItem.measure = legendItem.units;\n legendItem.id = item?.dataSource;\n legendItem.legendId = item.id;\n legendItem.fromMapPreferences = true;\n if (selectedMapPreferLegendData?.length) {\n let isDuplicate = selectedMapPreferLegendData?.find(\n x => x.legendId === item.id && item.add === true,\n );\n if (_.isEmpty(isDuplicate)) {\n MapPrefereArr.push(legendItem);\n }\n } else {\n MapPrefereArr.push(legendItem);\n }\n });\n setSelectedMapPreferLegendData(MapPrefereArr);\n }\n }, [mapPreferencesData]);\n\n useEffect(() => {\n if (geoJsonAllData?.length) {\n geoJsonAllData.map(item => {\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\n let selectedLayer = mapPreferences[mapGeojsonItem];\n if (selectedLayer?.layer && selectedLayer?.layer?.current) {\n let data = JSON.parse(JSON.stringify(item.data));\n if (\n item.config.name !== MAP_PREFERENCES_lABELS.DISTRICTS &&\n item.config.name !== MAP_PREFERENCES_lABELS.TALUKAS\n ) {\n selectedLayer.country = selectedLocation?.country;\n selectedLayer?.layer?.current?.clearLayers();\n\n selectedLayer.layer.current.addData(data);\n selectedLayer.color = item.config.color;\n selectedLayer.data = data;\n setMapPreferences(prev => {\n return {\n ...prev,\n [mapGeojsonItem]: selectedLayer,\n };\n });\n }\n }\n });\n }\n }, [geoJsonAllData, mapPreferences?.state?.layer?.current, selectedLocation?.country]);\n\n useEffect(() => {\n if (geoJsonAllData?.length) {\n geoJsonAllData.map(item => {\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\n let selectedLayer = mapPreferences[mapGeojsonItem];\n if (selectedLayer?.layer && selectedLayer?.layer?.current) {\n if (\n !_.isEmpty(selectedLocation?.district) ||\n selectedLocation?.district?.name !== 'select'\n ) {\n let filteredLayer = returnFilteredGeoJsonData(\n selectedLayer,\n item,\n selectedLocation?.district,\n MAP_PREFERENCES_lABELS.DISTRICTS,\n MAP_PREFERENCES_lABELS.TALUKAS,\n selectedLocation?.country,\n );\n if (filteredLayer) {\n setMapPreferences(prev => {\n return {\n ...prev,\n [mapGeojsonItem]: filteredLayer,\n };\n });\n }\n }\n\n if (!_.isEmpty(selectedLocation?.state) || selectedLocation?.state?.name !== 'select') {\n let filteredLayer = returnFilteredGeoJsonData(\n selectedLayer,\n item,\n selectedLocation?.state,\n MAP_PREFERENCES_lABELS.STATES,\n MAP_PREFERENCES_lABELS.DISTRICTS,\n selectedLocation?.country,\n );\n if (filteredLayer) {\n setMapPreferences(prev => {\n return {\n ...prev,\n [mapGeojsonItem]: filteredLayer,\n };\n });\n }\n }\n }\n });\n }\n }, [geoJsonAllData]);\n\n useEffect(() => {\n if (geoJsonAllData?.length) {\n geoJsonAllData.map(item => {\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\n let selectedLayer = mapPreferences[mapGeojsonItem];\n if (\n selectedLayer?.layer &&\n selectedLayer?.layer?.current &&\n item.fromMapPreferences &&\n (_.isEmpty(selectedLocation?.state) || selectedLocation?.state?.name === 'select') &&\n item.config.name === MAP_PREFERENCES_lABELS.DISTRICTS\n ) {\n selectedLayer.country = selectedLocation?.country;\n selectedLayer?.layer?.current?.clearLayers();\n selectedLayer.layer.current.addData(item.data);\n selectedLayer.color = item.config.color;\n setMapPreferences(prev => {\n return {\n ...prev,\n [mapGeojsonItem]: selectedLayer,\n };\n });\n }\n });\n }\n }, [geoJsonAllData]);\n\n useEffect(() => {\n if (geoJsonAllData?.length) {\n geoJsonAllData.map(item => {\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\n let selectedLayer = mapPreferences[mapGeojsonItem];\n if (\n selectedLayer?.layer &&\n selectedLayer?.layer?.current &&\n item.fromMapPreferences &&\n (_.isEmpty(selectedLocation?.district) ||\n selectedLocation?.district?.name === 'select') &&\n item.config.name === MAP_PREFERENCES_lABELS.TALUKAS\n ) {\n selectedLayer.country = selectedLocation?.country;\n selectedLayer?.layer?.current?.clearLayers();\n selectedLayer.layer.current.addData(item.data);\n selectedLayer.color = item.config.color;\n setMapPreferences(prev => {\n return {\n ...prev,\n [mapGeojsonItem]: selectedLayer,\n };\n });\n }\n });\n }\n }, [geoJsonAllData]);\n\n useEffect(() => {\n if (mapPreferencesData?.length) {\n if (mapPreferRefs?.current?.length) {\n mapPreferencesData?.map(item => {\n let selectedMapPreferences = mapPreferRefs.current.find(\n x => x.current.boundary_id === item.id,\n );\n let currentParamRef = selectedMapPreferences.current?.layer;\n currentParamRef?.current?.eachLayer(mapLayer => {\n let updatedIndexLayer = [...indexLayers];\n updatedIndexLayer.push(mapLayer);\n setIndexLayers(updatedIndexLayer);\n mapLayer.setUrl(item?.result?.map_url);\n setMapPreferUrl({\n name: item?.dataSource,\n url: item?.result?.map_url,\n layer: mapLayer,\n });\n setMapLayerOpacity({\n layer: mapLayer,\n });\n });\n if (currentParamRef && currentParamRef?.current) {\n addLayers(currentParamRef);\n }\n });\n }\n }\n }, [mapPreferencesData, mapPreferRefs.current]);\n\n const returnFilteredGeoJsonData = (\n selectedLayer,\n item,\n location,\n propertyName,\n locationName,\n countryData,\n ) => {\n if (selectedLayer?.layer && selectedLayer?.layer?.current) {\n let data = JSON.parse(JSON.stringify(item.data));\n let selectedCountryData = GEOJSON_COUNTRY_DATA?.find(\n item => item.selectedCountry === selectedLocation?.country?.name,\n );\n let labelprop = selectedCountryData ? selectedCountryData[propertyName] : '';\n if (item.config.name === locationName && !_.isEmpty(location)) {\n if (locationName === 'districts_or_cities') {\n setStateNameFromLocation(location?.name);\n }\n data.features = item.data?.features.filter(x => {\n if (x?.properties[labelprop]?.toUpperCase() === location?.name?.toUpperCase()) {\n if (\n locationName === 'talukas' &&\n countryData?.name === 'India' &&\n stateNameFromLocation?.toUpperCase() === x?.properties['stname']\n ) {\n selectedLayer.country = selectedLocation?.country;\n selectedLayer?.layer?.current?.clearLayers();\n return x;\n } else if (\n stateNameFromLocation?.toUpperCase() !== 'BIHAR' &&\n stateNameFromLocation?.toUpperCase() !== 'MAHARASHTRA'\n ) {\n selectedLayer.country = selectedLocation?.country;\n selectedLayer?.layer?.current?.clearLayers();\n return x;\n } else {\n if (locationName === 'districts_or_cities') {\n selectedLayer.country = selectedLocation?.country;\n selectedLayer?.layer?.current?.clearLayers();\n return x;\n }\n }\n }\n });\n selectedLayer.layer.current.addData(data);\n selectedLayer.color = item.config.color;\n }\n return selectedLayer;\n }\n };\n\n const removeGeoJsonLayer = (mapPreferences, { layerName }) => {\n let mapPreferKeys = Object.keys(mapPreferences);\n if (mapPreferKeys) {\n mapPreferKeys.map(item => {\n let selectedLayer = mapPreferences[item];\n if (\n selectedLayer?.layer &&\n selectedLayer?.layer?.current &&\n (_.isEmpty(layerName) || (!_.isEmpty(layerName) && layerName !== item))\n ) {\n selectedLayer?.layer?.current?.clearLayers();\n selectedLayer.color = '';\n setMapPreferences(prev => {\n return {\n ...prev,\n [item]: selectedLayer,\n };\n });\n }\n });\n }\n };\n\n const getMapPreferencesGeojsonData = geoJsonList => {\n let data = JSON.parse(JSON.stringify(geoJsonList));\n let mapPreferKeys = Object.keys(mapPreferences);\n if (mapPreferKeys) {\n mapPreferKeys.map(item => {\n let selectedLayer = mapPreferences[item];\n if (selectedLayer?.layer && selectedLayer?.layer?.current)\n selectedLayer?.layer?.current?.clearLayers();\n selectedLayer.color = '';\n setMapPreferences(prev => {\n return {\n ...prev,\n [item]: selectedLayer,\n };\n });\n });\n }\n setGeoJsonData(data);\n };\n\n const removeMapLayers = (selectedParamLegendData, compareParamLegendData, layerControl) => {\n let previousParamRef = '';\n if (layerRef?.current?.length) {\n layerRef.current.map((i, index) => {\n previousParamRef = layerRef.current[index];\n removeLayers(previousParamRef);\n });\n }\n let legendArray = [...selectedParamLegendData];\n let compareLegendArray = [...compareParamLegendData];\n if (selectedParamLegendData.length) {\n legendArray.forEach((value, i) => {\n if (value.add) {\n value.add = false;\n }\n });\n }\n if (compareParamLegendData.length) {\n compareLegendArray.forEach((value, i) => {\n if (value.add) {\n value.add = false;\n }\n });\n }\n if (!_.isEmpty(layerControl?.firstLayer)) {\n map?.removeControl(layerControl?.firstLayer);\n }\n if (!_.isEmpty(layerControl?.secondLayer)) {\n map?.removeControl(layerControl?.secondLayer);\n }\n if (!_.isEmpty(mapControl)) {\n map?.removeControl(mapControl);\n }\n setMapControl('');\n setLayerControl({\n firstLayer: {},\n secondLayer: {},\n });\n setSelectedParamLegendData(legendArray);\n setCompareParamLegendData(compareLegendArray);\n };\n\n // function to change the map attributes inside the map container\n function ChangeView({ center, zoom }) {\n const mapEvents = useMapEvents({\n zoomend: () => {\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n cordinates: mapEvents.getCenter(),\n zoom: mapEvents.getZoom(),\n };\n });\n },\n dragend: () => {\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n zoom: mapEvents.getZoom(),\n cordinates: mapEvents.getCenter(),\n };\n });\n },\n });\n\n const map = useMap();\n setInterval(function() {\n if (!_.isEmpty(map) && !_.isEmpty(map?._layers)) map.invalidateSize();\n }, 500);\n map.setView(center, zoom);\n return null;\n }\n\n //function to handle map preferences model toggling\n const handleMapModel = () => {\n setIsOpenMapModel(!isOpenMapModel);\n };\n\n //function to set map reference\n const setMapReference = mapInstance => {\n mapRef.current = mapInstance;\n // Initialize featureGroupRef with a new Leaflet FeatureGroup instance\n featureGroupRef.current = L.featureGroup().addTo(mapInstance);\n\n setMap(mapInstance);\n };\n\n //function to set cordinates from side filter file\n const handleCordinates = (cordinates, zoom) => {\n if (applyLayers) {\n setApplyLayers(false);\n }\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n locationCordinates: cordinates,\n cordinates,\n zoom,\n searchMarkerCoordinates: '',\n };\n });\n };\n\n const handleIsCompare = isClicked => {\n setIsCompareClicked(isClicked);\n };\n\n // add layer opacity slider to the map\n function addOpacitySlider() {\n // if (!window.map) console.log('not ready');\n if (indexLayers?.length) {\n L.Control.OpacitySlider = L.Control.extend({\n sliding: false,\n updateLayerOpacity: function(opacity) {\n indexLayers.forEach((layer, i) => {\n layer.setOpacity(opacity / 100);\n });\n },\n onAdd: function(map) {\n if (opacityControl) {\n map?.removeControl(opacityControl);\n }\n var container = L.DomUtil.create('div', 'opacityContainer');\n container.innerHTML =\n '';\n if (!L.Browser.touch) {\n L.DomEvent.disableClickPropagation(container);\n L.DomEvent.on(container, 'mousewheel', L?.DomEvent?.stopPropagation);\n } else {\n L.DomEvent.on(container, 'mousedrag click', L?.DomEvent?.stopPropagation);\n }\n let slider = container.querySelector('.opacityslider');\n slider.onclick = e => {\n this.updateLayerOpacity(e.target.value);\n };\n slider.onmousedown = e => {\n this.sliding = true;\n this.updateLayerOpacity(e.target.value);\n };\n slider.onmousemove = e => {\n e?.stopPropagation();\n if (this.sliding) this.updateLayerOpacity(e.target.value);\n };\n slider.onmouseup = e => {\n this.sliding = false;\n };\n return container;\n },\n });\n L.control.opacitySlider = function(opts) {\n return new L.Control.OpacitySlider(opts);\n };\n let customOpacityControl = L.control.opacitySlider({ position: 'topright' });\n customOpacityControl.addTo(map);\n setOpacityControl(customOpacityControl);\n }\n }\n\n //function to add layers in the map\n const addLayers = selectedParamRef => {\n if (mapRef.current && selectedParamRef.current) {\n const leafletMapRef = mapRef.current;\n const firstLayer = selectedParamRef.current;\n [firstLayer].forEach((layer, index) => {\n leafletMapRef.addLayer(layer);\n });\n }\n return false;\n };\n\n //function to remove layers from map\n const removeLayers = selectedParamRef => {\n if (mapRef && mapRef?.current && selectedParamRef && selectedParamRef?.current) {\n const map = mapRef.current;\n const firstLayer = selectedParamRef.current;\n [firstLayer].forEach(layer => map.removeLayer(layer));\n }\n };\n\n const removeMapPreferenceLayer = (mapPreferRefs, mapPreferencesData) => {\n if (mapPreferRefs?.current?.length && mapPreferencesData?.length) {\n mapPreferencesData?.map(item => {\n let selectedMapIndex = _.findIndex(\n mapPreferRefs.current,\n list => list.current.boundary_id === item.id,\n );\n let previousParamRef = mapPreferRefs?.current[selectedMapIndex].current.layer;\n if (previousParamRef && previousParamRef?.current) {\n removeLayers(previousParamRef);\n }\n });\n }\n };\n\n const getMapPreferencesData = mapPreferencesLayerData => {\n /** removing previously added map preferences layers before setting the state */\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\n setIndexLayers([]);\n /** setting map preferences state*/\n let arr = JSON.parse(JSON.stringify(mapPreferencesLayerData));\n let paramData = '';\n let paramArr = '';\n if (selectedMapPreferLegendData?.length) {\n paramData = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\n paramData?.map((item, index) => {\n if (item.add) {\n let legendItem = { ...item };\n legendItem.add = false;\n paramData[index] = legendItem;\n }\n });\n paramArr = [...paramData];\n }\n setSelectedMapPreferLegendData(paramArr);\n setMapPreferencesData(arr);\n };\n\n const handleSelectedFilterRegion = id => {\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n setSelectedRegionId(id);\n };\n\n const handleProps = props => {\n if (applyLayers) {\n setApplyLayers(false);\n }\n setTemporalAggregation(props.temporalAggregation);\n setState(props.state);\n setInitialSelectedDate(props.initialSelectedDate);\n // setSelectedParam(props.selectedParam);\n };\n\n //function for compare props\n const handleCompareProps = props => {\n setIsCompareClicked(props?.isCompareClicked);\n setFinalSelectedDate(props.finalSelectedDate);\n setCompareSelectedParam(props.compareSelectedParam);\n setCompareRainfallAnamolyTime({\n start_year: '',\n end_year: '',\n month: '',\n });\n };\n\n //function to set all indices\n const handleParams = param => {\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\n\n if (selectedLegend.length) {\n selectedLegend.forEach(function(value, i) {\n if (value.add) {\n value.add = false;\n }\n });\n setSelectedMapPreferLegendData(selectedLegend);\n }\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\n setMapPreferencesData([]);\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n\n layerRef.current = [];\n if (param?.length) {\n param?.map(item => {\n const ref = React.createRef();\n layerRef.current.push(ref);\n });\n setParams(param);\n }\n };\n\n const handleEachFeatureChange = (countryData, locationType, feat, layer) => {\n let selectedCountryData = GEOJSON_COUNTRY_TOOLTIP_DATA?.find(\n item => item.selectedCountry === countryData?.name,\n );\n let labelprop = selectedCountryData ? selectedCountryData[locationType] : '';\n if (labelprop && feat.properties[labelprop])\n layer.bindTooltip(feat.properties[labelprop] + '', { sticky: true, direction: 'auto' });\n\n /** TODO: alternative solution */\n\n // if(!_.isEmpty(layer) && !_.isEmpty(feat?.properties)){\n // layer?.on({\n // 'mousemove': (e) => {\n // const name = e.target.feature.properties['MJ_BASIN__'] ? e.target.feature.properties['MJ_BASIN__'] : '';\n // layer?.bindTooltip(name)\n // layer?.openTooltip(e?.latlng);\n // },\n // // 'mouseout': () => {\n // // layer?.unbindTooltip();\n // // layer?.closeTooltip();\n // // },\n // });\n // }\n };\n\n //function to set selected indices\n const handleSelectedParam = param => {\n if (applyLayers) {\n setApplyLayers(false);\n }\n if (!_.isEmpty(selectedParam)) setPreviousParam(selectedParam);\n setSelectedParam(param);\n if (_.isEmpty(param)) {\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\n\n if (selectedLegend.length) {\n selectedLegend.forEach(function(value, i) {\n if (value.add) {\n value.add = false;\n }\n });\n setSelectedMapPreferLegendData(selectedLegend);\n }\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\n setMapPreferencesData([]);\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n }\n setRainfallAnamolyTime({\n start_year: '',\n end_year: '',\n month: '',\n });\n };\n\n //function to set location\n const handleLocation = (country, state, district, basin, region) => {\n if (applyLayers) {\n setApplyLayers(false);\n }\n setSelectedLocation(prev => {\n return {\n ...prev,\n country,\n state: !_.isEmpty(state) ? state : '',\n district: !_.isEmpty(district) ? district : '',\n basin,\n region,\n };\n });\n };\n\n //function to set compare location\n const handleCompareLocation = (country, state, district) => {\n setCompareLocation(prev => {\n return {\n ...prev,\n country,\n state: !_.isEmpty(state) ? state : '',\n district: !_.isEmpty(district) ? district : '',\n };\n });\n };\n\n const handlePrecipitationThreshold = precipitationThreshold => {\n if (precipitationThreshold) setPrecipitationThreshold(precipitationThreshold);\n };\n const handleComparePrecipitationThreshold = precipitationThreshold => {\n if (precipitationThreshold) setComparePrecipitationThreshold(precipitationThreshold);\n };\n\n const handleDrySpellPrecipitationThresold = precipitationThreshold => {\n if (precipitationThreshold) setDrySpellPrecipitationThreshold(precipitationThreshold);\n };\n\n const handleCompareDrySpellPrecipitationThresold = precipitationThreshold => {\n if (precipitationThreshold) setCompareDrySpellPrecipitationThresold(precipitationThreshold);\n };\n\n //function to set region\n const handleSelectedRegion = region => {\n let mapLayerData = [];\n let polyCount = 1;\n let mapData = JSON.parse(JSON.stringify(region));\n if (mapData?.length) {\n mapData.map(item => {\n let x = Object.assign(item, {});\n if (item.layerType === 'polygon') {\n x.latlngs = item.latlngs.map(v => [v[1], v[0]]);\n x?.latlngs?.push(item.latlngs[0]);\n if (!x.hasOwnProperty('polygonCount')) {\n x.polygonCount = polyCount;\n polyCount += 1;\n }\n mapLayerData.push(x);\n } else {\n if (item?.origin === 'manule') {\n x.latlngs = [item.longitude, item.latitude];\n } else {\n x.latlngs = [item.latlngs[1], item.latlngs[0]];\n }\n\n mapLayerData.push(x);\n }\n });\n }\n setSelectedLocation(prev => {\n return {\n ...prev,\n region: mapLayerData,\n };\n });\n };\n\n const handleCompareView = compareView => {\n setCompareView(compareView);\n };\n\n const handleCompareCordinates = cordinates => {\n setCompareCordinates(cordinates);\n };\n\n const handleCompareRainfallAnamolyStartYearChange = start => {\n if (start) {\n setCompareRainfallAnamolyTime(prev => {\n return {\n ...prev,\n start_year: start,\n };\n });\n }\n };\n\n const handleCompareRainfallAnamolyEndYearChange = end => {\n if (end) {\n setCompareRainfallAnamolyTime(prev => {\n return {\n ...prev,\n end_year: end,\n };\n });\n }\n };\n\n const handleCompareRainfallAnamolyMonthChange = month => {\n if (month) {\n setCompareRainfallAnamolyTime(prev => {\n return {\n ...prev,\n month: month,\n };\n });\n }\n };\n\n const handleRainfallAnamolyStartYearChange = start => {\n if (start) {\n setRainfallAnamolyTime(prev => {\n return {\n ...prev,\n start_year: start,\n };\n });\n }\n };\n\n const handleRainfallAnamolyEndYearChange = end => {\n if (end) {\n setRainfallAnamolyTime(prev => {\n return {\n ...prev,\n end_year: end,\n };\n });\n }\n };\n\n const handleRainfallAnamolyMonthChange = month => {\n if (month) {\n setRainfallAnamolyTime(prev => {\n return {\n ...prev,\n month: month,\n };\n });\n }\n };\n\n useEffect(() => {\n if (\n (!_.isEmpty(selectedModule) && selectedModule?.api_slug === 'drought-decision-support') ||\n isHideViewGraph\n ) {\n const getLeafletDrawEle = document.getElementsByClassName('leaflet-draw');\n const getPointLocationicon = document?.getElementById('point_data_icon');\n if (getLeafletDrawEle && getLeafletDrawEle[0]) {\n getLeafletDrawEle[0]?.classList.add('dds-leaflet-draw-css');\n getPointLocationicon?.classList?.add('location-icon-hide');\n }\n } else if (selectedModule?.api_slug !== 'drought-decision-support' || !isHideViewGraph) {\n const getLeafletDrawEle = document.getElementsByClassName('leaflet-draw');\n const getPointLocationicon = document?.getElementById('point_data_icon');\n if (getLeafletDrawEle && getLeafletDrawEle[0]) {\n getLeafletDrawEle[0]?.classList.remove('dds-leaflet-draw-css');\n\n getPointLocationicon?.classList?.remove('location-icon-hide');\n }\n }\n }, [selectedModule, isHideViewGraph]);\n\n //function to call map and time series api\n const handleApplyLayers = applyLayers => {\n if (applyLayers) {\n if (!_.isEmpty(temporalAggregation) && !_.isEmpty(selectedParam)) {\n const requestObj = {};\n let paramSelected = Object.assign({}, selectedParam);\n if (\n selectedRegionId &&\n !_.isEmpty(selectedLocation.country?.value) &&\n _.isEmpty(selectedLocation?.state?.name) &&\n _.isEmpty(selectedLocation?.district?.name)\n )\n requestObj.region_id = selectedRegionId;\n if (selectedModule.api_slug === 'drought-prediction') {\n requestObj.parameter_id = selectedParam?.id;\n }\n if (\n selectedModule?.api_slug === 'drought-monitor-v2' &&\n selectedParam?.id === INDICES_PARAMS?.RAINFALL_ANAMOLY?.id\n ) {\n requestObj.start_year = rainfallAnamolyTime?.start_year?.label.toString() || '';\n requestObj.end_year = rainfallAnamolyTime?.end_year?.label.toString() || '';\n requestObj.month = rainfallAnamolyTime?.month?.value || '';\n }\n\n if (selectedModule?.api_slug === 'drought-monitor') {\n if (selectedParam?.slug === INDICES_PARAMS.DRY_SPELL.slug) {\n requestObj.precipitation_threshold = drySpellPrecipitationThreshold.toString();\n }\n }\n\n if (selectedModule?.api_slug === 'drought-decision-support') {\n if (selectedParam?.slug === DRY_SPELL.DRY_SPELL_SLUG) {\n requestObj.precipitation_threshold = drySpellPrecipitationThreshold.toString();\n }\n }\n\n if (selectedLocation.country?.name !== SOUTH_ASIA_CONST.name) {\n requestObj.country_name = selectedLocation?.country?.name || '';\n }\n if (selectedLocation?.state?.value) {\n requestObj.state_name = selectedLocation?.state?.name || '';\n }\n if (selectedLocation?.district?.value) {\n requestObj.district_name = selectedLocation?.district?.name || '';\n }\n if (selectedLocation?.basin) {\n requestObj.basin_name = selectedLocation?.basin || '';\n }\n\n requestObj.temporal_aggregation = temporalAggregation.value;\n if (state.min && !isCompareClicked) requestObj.min = Number(state.min);\n if (state.max && !isCompareClicked) requestObj.max = Number(state.max);\n\n if (!isFinalDroughtMap && isCompareClicked) {\n let initialSelectedObj = JSON.parse(JSON.stringify(requestObj));\n let finalSelectedObj = JSON.parse(JSON.stringify(requestObj));\n let initialRequestResponse, finalRequestResponse;\n let initialSelectedParam = '';\n let compareParamSelected = '';\n initialSelectedParam = Object.assign({}, selectedParam);\n compareParamSelected = Object.assign({}, compareSelectedParam);\n\n if (compareParamSelected?.id !== INDICES_PARAMS?.RAINFALL_ANAMOLY?.id) {\n finalSelectedObj.start_date = finalSelectedDate.startDate;\n finalSelectedObj.end_date = finalSelectedDate.endDate;\n }\n\n if (initialSelectedParam?.id !== INDICES_PARAMS?.RAINFALL_ANAMOLY?.id) {\n initialSelectedObj.start_date = initialSelectedDate.startDate;\n initialSelectedObj.end_date = initialSelectedDate.endDate;\n }\n\n if (selectedModule?.api_slug === 'drought-monitor-v2') {\n if (initialSelectedParam?.id === INDICES_PARAMS.EXTREME_RAINFALL.id) {\n initialSelectedObj.precipitation_threshold = precipitationThreshold.toString();\n }\n\n if (compareParamSelected?.id === INDICES_PARAMS?.RAINFALL_ANAMOLY?.id) {\n finalSelectedObj.start_year =\n compareRainfallAnamolyTime?.start_year?.label.toString() || '';\n finalSelectedObj.end_year =\n compareRainfallAnamolyTime?.end_year?.label.toString() || '';\n finalSelectedObj.month = compareRainfallAnamolyTime?.month?.value || '';\n }\n\n if (compareParamSelected?.id === INDICES_PARAMS.EXTREME_RAINFALL.id) {\n finalSelectedObj.precipitation_threshold = comparePrecipitationThreshold.toString();\n }\n }\n\n if (\n selectedModule?.api_slug === 'drought-monitor' ||\n selectedModule?.api_slug === 'drought-decision-support'\n ) {\n if (compareParamSelected?.id === INDICES_PARAMS.DRY_SPELL.id) {\n finalSelectedObj.precipitation_threshold = compareDrySpellPrecipitationThresold.toString();\n }\n }\n\n if (selectedModule?.api_slug === 'drought-prediction') {\n finalSelectedObj.parameter_id = compareSelectedParam?.id;\n if (initialSelectedParam?.name === 'SPI' || initialSelectedParam?.name === 'SRI')\n initialSelectedObj.month = selectedDPIndicesMonth?.frequency;\n if (compareParamSelected?.name === 'SPI' || compareParamSelected?.name === 'SRI') {\n finalSelectedObj.month = compareSelectedDPIndicesMonth?.frequency;\n }\n }\n\n setIsLoading(true);\n // for compare\n if (!_.isEmpty(initialSelectedParam) && !_.isEmpty(compareParamSelected)) {\n initialRequestResponse = initialSelectedParam?.master_server\n ? AXIOS_INSTANCE_MASTER_SERVER.post(\n `${MASTER_SERVER_BASE_URL}/${initialSelectedParam?.api_url}map`,\n initialSelectedObj,\n )\n : AXIOS_INSTANCE.post(\n `${API_BASE_URL}/${initialSelectedParam?.api_url}map`,\n initialSelectedObj,\n );\n finalRequestResponse = compareParamSelected?.master_server\n ? AXIOS_INSTANCE_MASTER_SERVER.post(\n `${MASTER_SERVER_BASE_URL}/${compareParamSelected?.api_url}map`,\n finalSelectedObj,\n )\n : AXIOS_INSTANCE.post(\n `${API_BASE_URL}/${compareParamSelected?.api_url}map`,\n finalSelectedObj,\n );\n Promise.all([initialRequestResponse, finalRequestResponse])\n .then(responses => {\n let responsesData = [];\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n responses?.map(item => {\n const { data } = item;\n if (data.code === 200) {\n responsesData.push(data.result);\n } else {\n showError(data?.message);\n }\n });\n dispatch(\n getDroughtMapSuccess({\n response: { data: responsesData, isDroughtModule: true },\n }),\n );\n })\n .catch(error => {\n setIsLoading(false);\n setIsPreviewIndicesData(false);\n if (error?.response) {\n let errorRes = error.response;\n if (!_.isEmpty(errorRes?.data?.errors)) {\n showError(Object.values(errorRes?.data?.errors)[0]);\n } else if (errorRes?.data?.exception) {\n showError(errorRes?.data?.exception);\n } else {\n showError(errorRes?.data?.message);\n }\n } else {\n showError('No records found. please try again');\n }\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\n return;\n });\n }\n } else {\n if (isFinalDroughtMap) {\n // let indices_list = [];\n // DroughtIndicators?.impact?.map(item => {\n // if (item.name !== DSS_MODULE_CONSTS.FINAL_DROUGHT_MAP) {\n // item?.parameter?.map(p => {\n // indices_list.push(p.name);\n // });\n // }\n // });\n finalDroughtParameterMonthsList?.map(item => {\n if (item.selectedOption) {\n const dates = returnDSSDateFormat(selectedYear, item.selectedOption);\n if (dates) {\n requestObj[`${item.slug}_start_date`] = dates?.startDate;\n requestObj[`${item.slug}_end_date`] = dates.endDate;\n }\n }\n });\n\n // requestObj.indices_list = indices_list;\n // requestObj.start_date = initialSelectedDate.startDate;\n // requestObj.end_date = initialSelectedDate.endDate;\n setIsLoading(true);\n\n dispatch(getFinalDroughtMapRequest(requestObj));\n } else {\n if (!isFinalDroughtMap) {\n paramSelected = selectedParam;\n }\n if (\n selectedModule?.api_slug === 'drought-prediction' &&\n (paramSelected?.name === 'SPI' || paramSelected?.name === 'SRI')\n ) {\n requestObj.month = selectedDPIndicesMonth?.frequency;\n }\n\n if (\n selectedModule?.api_slug === 'drought-monitor-v2' &&\n paramSelected?.id === INDICES_PARAMS.EXTREME_RAINFALL.id\n ) {\n requestObj.precipitation_threshold = precipitationThreshold.toString();\n }\n if (paramSelected?.id !== INDICES_PARAMS?.RAINFALL_ANAMOLY?.id) {\n requestObj.start_date = initialSelectedDate.startDate;\n requestObj.end_date = initialSelectedDate.endDate;\n }\n let isDroughtModule = true;\n setIsLoading(true);\n dispatch(\n getDroughtMapRequest(\n paramSelected?.api_url,\n requestObj,\n isDroughtModule,\n paramSelected?.master_server,\n ),\n );\n }\n }\n }\n setApplyLayers(true);\n setShowCharts(false);\n setIndexLayers([]);\n }\n };\n\n const handleDroughtIndicators = data => {\n setDroughtIndicators(data);\n };\n\n //function to create overlays for the selected indices/params\n const renderParamLayer = paramList => {\n if (paramList && paramList?.length) {\n return paramList?.map((item, index) => {\n return (\n <>\n {/* TODO: need to create separate component */}\n \n
\n \n \n
\n \n Point data
\n\n
\n \n );\n }\n };\n\n // Static coordinates for India\n\n const iconHtmlString = ReactDOMServer.renderToString(\n \n \n {errorData?.showError && (\n \n {!_.isEmpty(graphData) ? (\n
\n \n
\n \n )}\n \n
\n )}\n \n )}\n \n {errorData?.data} \n
\n \n \n
\n \n \n {/* ({parseCoordinate(cordinateAndZoom.searchMarkerCoordinates[0]).toFixed(2)},\n {parseCoordinate(cordinateAndZoom.searchMarkerCoordinates[1]).toFixed(2)}) */}\n ({cordinateAndZoom.searchMarkerCoordinates?.[0]},\n {cordinateAndZoom.searchMarkerCoordinates?.[1]})\n \n
\n \n \n
\n \n (countryJson ? setIsOpenPointModal(!isOpenPointModal) : {})}\n >\n 
\n \n
\n \n {isLoading && (\n
\n \n {isOpenPointModal ? (\n \n \n \n <>\n \n
\n \n \n \n
\n {renderMapContainer()}
\n {renderChartsUI()}\n \n \n \n 
\n
\n );\n}\nexport default SuccessModal;\nSuccessModal.propTypes = {\n okayButtonClickHandler: PropTypes.func,\n modalSuccessMessage: PropTypes.string,\n modalHeaderMessage: PropTypes.string,\n};\n","import '../../assets/CSS/register.css';\nimport React, { useEffect, useState, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport AutoSuggest from 'react-autosuggest';\nimport Button from 'reactstrap-button-loader';\nimport {\n Card,\n Col,\n Container,\n FormGroup,\n FormFeedback,\n Input,\n InputGroup,\n InputGroupAddon,\n Label,\n Row,\n Spinner,\n} from 'reactstrap';\nimport ReCAPTCHA from 'react-google-recaptcha';\nimport { t } from 'react-multi-lang';\nimport LeftImg from '../../assets/Images/left-vector-login.png';\nimport RightImg from '../../assets/Images/right-vector-login.png';\nimport { LOCATION } from '../../Components/constants';\nimport SADMS from '../../assets/Images/SADMS-logo.png';\nimport {\n isValidEmail,\n isValidMobileNumber,\n specialCharacterRegex,\n} from '../../Components/common/utils';\nimport { getToken } from '../../Components/common/utils';\nimport { getCountryRequest } from '../../redux/location/actions';\nimport { registerRequest } from '../../redux/register/registerAction';\nimport { COUNTRIES_JSON_LIST } from '../../Components/constants/index';\nimport SuccessModal from './Success';\nimport { verificationRequest } from '../../redux/register/registerAction';\n\nconst Register = () => {\n let history = useHistory();\n const dispatch = useDispatch();\n let defaultValues = {\n name: '',\n mobile: '',\n email: '',\n password: '',\n organization: '',\n country: '',\n };\n const nextProps = useSelector(state => ({\n countryData: state.Location || null,\n registerDataError: state.Register.registerDataError,\n registerData: state.Register.registerData || null,\n isRegisterRequesting: state.Register.isRegisterRequesting,\n verificationData: state.Register.verifiedData || null,\n isVerificationLoading: state.Register.isRegisterRequesting,\n verifiedDataError: state.Register.verifiedDataError,\n }));\n const [countryData, setCountryData] = useState();\n const [value, setValue] = useState('');\n const [suggestions, setSuggestions] = useState([]);\n const [emailRequired, setEmailRequired] = useState(false);\n const [passwortType, setPasswordType] = useState(true);\n const [passwordRequired, setPasswordRequired] = useState(false);\n const [passwordErrorMessage, setPasswordErrorMessage] = useState();\n const [organizationErrorMessage, setOrganizationErrorMessage] = useState();\n const [mobileNumberErrorMessage, setMobileNumberErrorMessage] = useState();\n const [nameRequired, setNameRequired] = useState(false);\n const [emailErrorMessage, setEmailErrorMessage] = useState();\n const [nameErrorMessage, setNameErrorMessage] = useState();\n const [organisationRequired, setOrganisationRequired] = useState(false);\n const [countryRequired, setCountryRequired] = useState(false);\n const [mobileNumberRequired, setMobileNumberRequired] = useState(false);\n const [captchaValidation, setCaptchaValidation] = useState(false);\n const [formData, setFormData] = useState(defaultValues);\n const [registerButtonDisable, setRegisterButtonDisable] = useState(false);\n const [successModal, setSuccessModal] = useState(false);\n const [modalMessage, setModalMessage] = useState();\n const [fromVerification, setFromVerification] = useState(false);\n const [modalHeaderMessage, setModalHeaderMessage] = useState();\n const recaptchaRef = React.createRef();\n\n let lowerCasedCompanies = [];\n useEffect(() => {\n if (getToken()) {\n history.push('/home');\n } else {\n let params = new URLSearchParams(window.location.search);\n let keyValue;\n keyValue = params.get('key');\n if (window.location.href.includes('key')) {\n dispatch(\n verificationRequest({\n verification_code: keyValue,\n }),\n );\n } else {\n history.push('/register');\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\n }\n }\n lowerCasedCompanies = COUNTRIES_JSON_LIST.map(company => {\n return {\n id: company.code,\n name: company.name.charAt(0).toUpperCase() + company.name.slice(1),\n };\n });\n setCountryData(lowerCasedCompanies);\n window.scrollTo({ top: 0, behavior: 'instant' });\n }, []);\n const isVerificationFirstRun = useRef(true);\n useEffect(() => {\n if (isVerificationFirstRun.current) {\n isVerificationFirstRun.current = false;\n return;\n }\n if (\n nextProps.verificationData &&\n nextProps.verificationData.data &&\n nextProps.verificationData.data.result\n ) {\n setModalHeaderMessage(nextProps.verificationData.data.title);\n setSuccessModal(true);\n setFromVerification(true);\n setModalMessage(nextProps.verificationData.data.result);\n }\n }, [nextProps.verificationData]);\n useEffect(() => {\n if (nextProps.verifiedDataError) {\n setSuccessModal(false);\n history.push('/register');\n }\n }, [nextProps.verifiedDataError]);\n\n const isRegisterFirstRun = useRef(true);\n useEffect(() => {\n if (isRegisterFirstRun.current) {\n isRegisterFirstRun.current = false;\n return;\n }\n if (\n nextProps.registerData &&\n nextProps.registerData.data &&\n nextProps.registerData.data.result\n ) {\n setModalHeaderMessage(nextProps.registerData.data.title);\n setSuccessModal(true);\n setModalMessage(nextProps.registerData.data.result);\n }\n }, [nextProps.registerData]);\n\n useEffect(() => {\n if (nextProps.registerDataError) {\n setRegisterButtonDisable(true);\n }\n }, [nextProps.registerDataError]);\n useEffect(() => {\n let dataArrayValues = [];\n dataArrayValues = Object.values(formData);\n\n if (dataArrayValues.some(item => item == '')) {\n setRegisterButtonDisable(false);\n } else {\n if (\n nameRequired === true ||\n emailRequired === true ||\n passwordRequired === true ||\n organisationRequired === true ||\n countryRequired === true ||\n mobileNumberRequired === true\n ) {\n setRegisterButtonDisable(false);\n } else {\n if (captchaValidation === false) {\n setRegisterButtonDisable(false);\n } else {\n setRegisterButtonDisable(true);\n }\n }\n }\n }, [formData, captchaValidation]);\n\n const getSuggestions = value => {\n return countryData.filter(data =>\n data.name.includes(\n value\n .trim()\n .charAt(0)\n .toUpperCase() + value.slice(1),\n ),\n );\n };\n const handleOkayButtonClick = value => {\n if (value === true && fromVerification) {\n setSuccessModal(false);\n history.push('/login');\n } else {\n setSuccessModal(false);\n history.push('/home');\n }\n };\n\n const handleNameChange = e => {\n if (e.target.value === '') {\n setNameErrorMessage(t('REGISTER.REQUIRED_NAME_ERROR_MSG'));\n setNameRequired(true);\n formData.name = e.target.value;\n setFormData({ ...formData });\n } else if (e.target.value.length > 20) {\n setNameErrorMessage('Name must be below 20 characters');\n setNameRequired(true);\n formData.name = e.target.value;\n setFormData({ ...formData });\n } else {\n formData.name = e.target.value;\n setFormData({ ...formData });\n setNameRequired(false);\n }\n };\n const handleMobileChange = e => {\n if (isValidMobileNumber(e.target.value)) {\n formData.mobile = e.target.value;\n setFormData({ ...formData });\n setMobileNumberRequired(false);\n } else {\n formData.mobile = e.target.value;\n setFormData({ ...formData });\n setMobileNumberErrorMessage(t('REGISTER.MOBILE_NUMBER_ERROR_MSG'));\n setMobileNumberRequired(true);\n }\n };\n const handleChangeEmail = e => {\n formData.email = e.target.value.trim();\n setFormData({ ...formData });\n if (!isValidEmail(e.target.value.trim())) {\n if (e.target.value === '') {\n setEmailErrorMessage(t('REGISTER.REQUIRED_EMAIL_ERROR_MSG'));\n } else {\n setEmailErrorMessage(t('REGISTER.EMAIL_ERROR_MSG'));\n }\n setEmailRequired(true);\n } else {\n setEmailRequired(false);\n }\n };\n\n const handleChangePassword = e => {\n formData.password = e.target.value?.split(' ').join('');\n setFormData({ ...formData });\n if (e.target.value === '') {\n setPasswordRequired(true);\n setPasswordErrorMessage(t('REGISTER.REQUIRED_PASSWORD_ERROR_MSG'));\n } else if (e.target.value.length < 8 || e.target.value.length > 20) {\n setPasswordRequired(true);\n setPasswordErrorMessage(t('REGISTER.PASSWORD_ERROR_MSG'));\n } else {\n setPasswordRequired(false);\n }\n };\n\n const showPassword = () => {\n setPasswordType(!passwortType);\n };\n\n const handleChangeOrganization = e => {\n formData.organization = e.target.value;\n setFormData({ ...formData });\n if (e.target.value === '') {\n setOrganisationRequired(true);\n setOrganizationErrorMessage(t('REGISTER.REQUIRED_ORGANIZATION_ERROR_MSG'));\n } else {\n if (specialCharacterRegex.test(formData.organization)) {\n setOrganisationRequired(true);\n setOrganizationErrorMessage(t('REGISTER.ORGANIZATION_SPCL_CHAR_ERROR_MSG'));\n } else {\n if (formData.name.trim() == e.target.value.trim()) {\n setOrganisationRequired(true);\n setOrganizationErrorMessage(t('REGISTER.ORGANIZATION_AND_NAME_SIMILAR_ERROR_MSG'));\n } else {\n setOrganisationRequired(false);\n }\n }\n }\n };\n\n const handleRegister = () => {\n dispatch(registerRequest(formData));\n };\n const onChange = () => {\n setCaptchaValidation(true);\n };\n\n const onExpired = () => {\n setCaptchaValidation(false);\n };\n return (\n <>\n {modalHeaderMessage}
\n{modalSuccessMessage}
\n \n\n \n \n \n
\n \n \n \n
\n \n );\n};\nexport default Register;\n","export const LOGIN_CONST = {\n LOGIN_REQUEST: 'LOGIN_REQUEST',\n LOGIN_SUCCESS: 'LOGIN_SUCCESS',\n LOGIN_FAILED: 'LOGIN_FAILED',\n LOGIN_CAROUSEL_REQUEST: 'LOGIN_CAROUSEL_REQUEST',\n LOGIN_CAROUSEL_SUCCESS: 'LOGIN_CAROUSEL_SUCCESS',\n LOGIN_CAROUSEL_FAILED: 'LOGIN_CAROUSEL_FAILED',\n};\n\nexport const FORGOT_PASSWORD = {\n FORGOT_PASSWORD_REQUEST: 'FORGOT_PASSWORD_REQUEST',\n FORGOT_PASSWORD_SUCCESS: 'FORGOT_PASSWORD_SUCCESS',\n FORGOT_PASSWORD_FAILED: 'FORGOT_PASSWORD_FAILED'\n}\n\nexport const CHANGE_PASSWORD = {\n CHANGE_PASSWORD_REQUEST: 'CHANGE_PASSWORD_REQUEST',\n CHANGE_PASSWORD_SUCCESS: 'CHANGE_PASSWORD_SUCCESS',\n CHANGE_PASSWORD_FAILED: 'CHANGE_PASSWORD_FAILED'\n}\n\nexport const RESET_PASSWORD = {\n RESET_PASSWORD_REQUEST: 'RESET_PASSWORD_REQUEST',\n RESET_PASSWORD_SUCCESS: 'RESET_PASSWORD_SUCCESS',\n RESET_PASSWORD_FAILED: 'RESET_PASSWORD_FAILED'\n}\n\nexport const RESET_LINK_VERIFICATION = {\n RESET_LINK_VERIFICATION_REQUEST: 'RESET_LINK_VERIFICATION_REQUEST',\n RESET_LINK_VERIFICATION_SUCCESS: 'RESET_LINK_VERIFICATION_SUCCESS',\n RESET_LINK_VERIFICATION_FAILED: 'RESET_LINK_VERIFICATION_FAILED'\n}\n","import {LOGIN_CONST, FORGOT_PASSWORD, CHANGE_PASSWORD, RESET_PASSWORD, RESET_LINK_VERIFICATION} from './loginConst';\n\n/**\n * User Login actions\n */\nexport const loginUser = (data) => ({\n type: LOGIN_CONST.LOGIN_REQUEST,\n payload: data,\n});\n\nexport const loginUserSuccess = (response) => ({\n type: LOGIN_CONST.LOGIN_SUCCESS,\n payload: response,\n});\n\nexport const loginUserFailed = (error) => ({\n type: LOGIN_CONST.LOGIN_FAILED,\n payload: error,\n});\n\n/**\n * User carousel actions\n */\nexport const loginCarousel = () => ({\n type: LOGIN_CONST.LOGIN_CAROUSEL_REQUEST,\n payload: null,\n});\n\nexport const loginCarouselSuccess = (response) => ({\n type: LOGIN_CONST.LOGIN_CAROUSEL_SUCCESS,\n payload: response,\n});\n\nexport const loginCarouselFailed = (error) => ({\n type: LOGIN_CONST.LOGIN_CAROUSEL_FAILED,\n payload: error,\n});\n\n\nexport const forgotPassword = (data) => ({\n type: FORGOT_PASSWORD.FORGOT_PASSWORD_REQUEST,\n payload: data,\n});\n\nexport const forgotPasswordSuccess = (response) => ({\n type: FORGOT_PASSWORD.FORGOT_PASSWORD_SUCCESS,\n payload: response,\n});\n\nexport const forgotPasswordFailed = (error) => ({\n type: FORGOT_PASSWORD.FORGOT_PASSWORD_FAILED,\n payload: error,\n});\n\n\n\n\n\nexport const changePassword = (data) => ({\n type: CHANGE_PASSWORD.CHANGE_PASSWORD_REQUEST,\n payload: data,\n});\n\nexport const changePasswordSuccess = (response) => ({\n type: CHANGE_PASSWORD.CHANGE_PASSWORD_SUCCESS,\n payload: response,\n});\n\nexport const changePasswordFailed = (error) => ({\n type: CHANGE_PASSWORD.CHANGE_PASSWORD_FAILED,\n payload: error,\n});\n\n\n\n\n\nexport const resetPassword = (data) => ({\n type: RESET_PASSWORD.RESET_PASSWORD_REQUEST,\n payload: data,\n});\n\nexport const resetPasswordSuccess = (response) => ({\n type: RESET_PASSWORD.RESET_PASSWORD_SUCCESS,\n payload: response,\n});\n\nexport const resetPasswordFailed = (error) => ({\n type: RESET_PASSWORD.RESET_PASSWORD_FAILED,\n payload: error,\n});\n\n\n\nexport const resetLinkVerificationRequest = (data) => ({\n type: RESET_LINK_VERIFICATION.RESET_LINK_VERIFICATION_REQUEST,\n payload: data,\n});\n\nexport const resetLinkVerificationSuccess = (response) => ({\n type: RESET_LINK_VERIFICATION.RESET_LINK_VERIFICATION_SUCCESS,\n payload: response,\n});\n\nexport const resetLinkVerificationFailed = (error) => ({\n type: RESET_LINK_VERIFICATION.RESET_LINK_VERIFICATION_FAILED,\n payload: error,\n});","import React, { useEffect, useState, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport Button from 'reactstrap-button-loader';\nimport { reduxForm } from 'redux-form';\nimport {\n Form,\n Card,\n Container,\n Col,\n FormFeedback,\n FormGroup,\n InputGroup,\n InputGroupAddon,\n Input,\n Label,\n Row,\n} from 'reactstrap';\nimport { ToastContainer } from 'react-toastify';\nimport { t } from 'react-multi-lang';\nimport '../../assets/CSS/login.css';\nimport LeftImg from '../../assets/Images/left-vector-login.png';\nimport RightImg from '../../assets/Images/right-vector-login.png';\nimport SADMS from '../../assets/Images/SADMS-logo.png';\nimport { showError } from '../../Components/Notifications.js';\nimport {\n getToken,\n isValidEmail,\n signIn,\n hasPermissions,\n hasStaffUserPermission,\n} from '../../Components/common/utils';\nimport { loginUser, loginUserSuccess } from '../../redux/login/loginActions';\n\nconst LoginPage = props => {\n const dispatch = useDispatch();\n let history = useHistory();\n const { handleSubmit } = props;\n const [password, setPassword] = useState('');\n const [signInButtonDisabled, setSignInButtonDisabled] = useState(true);\n const [email, setEmail] = useState('');\n const [emailRequired, setEmailRequired] = useState(false);\n const [passwortType, setPasswordType] = useState(true);\n const [passwordRequired, setPasswordRequired] = useState(false);\n const [errorMessage, setErrorMessage] = useState();\n const [previourUrlPath, setPreviousUrlPath] = useState('');\n const [ddsKey, setDdsKey] = useState('');\n const [country, setCountry] = useState('');\n const nextProps = useSelector(state => ({\n loginData: state.Login.loginData || null,\n isLoginRequesting: state.Login.isLoginRequesting,\n loginDataError: state.Login.loginDataError,\n }));\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const myParam = urlParams.get('prevPath');\n const keyParam = urlParams.get('key');\n const CountryParam = urlParams.get('Country');\n if (myParam) setPreviousUrlPath(myParam);\n if (keyParam) setDdsKey(keyParam);\n if (CountryParam) setCountry(CountryParam);\n if (getToken()) {\n history.push('/home');\n }\n }, []);\n\n const isFirstRun = useRef(true);\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n if (nextProps.loginData) {\n let tokenData = {};\n tokenData = {\n token: nextProps.loginData.data.result.token,\n userDetails: nextProps.loginData.data.user_details,\n };\n signIn(tokenData);\n hasPermissions(nextProps.loginData.data.user_details[0].is_superuser);\n hasStaffUserPermission(nextProps.loginData.data.user_details[0].is_staff);\n if (previourUrlPath) {\n if (ddsKey) {\n history.push(`/${previourUrlPath}?key=${ddsKey}`);\n } else {\n country ? history.push(`/${previourUrlPath}?Country=${country}`) : history.push('/home');\n }\n } else if (nextProps.loginData.data.user_details[0].is_superuser) {\n // history.push('/settingsDashboard');\n history.push('/home');\n } else {\n history.push('/home');\n }\n } else {\n history.push('/login');\n }\n }, [nextProps.loginData]);\n\n useEffect(() => {\n if (\n nextProps.loginDataError &&\n nextProps.loginDataError.data &&\n nextProps.loginDataError.data.response &&\n nextProps.loginDataError.data.response.data &&\n nextProps.loginDataError.data.response.data.code\n ) {\n showError(t('LOGIN.EMAIL_PASSWORD_ERROR_MESSAGE'));\n }\n }, [nextProps.loginDataError]);\n\n useEffect(() => {\n return () => {\n dispatch(loginUserSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (email === '' || password === '' || emailRequired || passwordRequired) {\n setSignInButtonDisabled(true);\n } else {\n setSignInButtonDisabled(false);\n }\n }, [email, password, emailRequired, passwordRequired]);\n const handleLoginClick = () => {\n let formDetails = {};\n formDetails = {\n email: email,\n password: password,\n };\n dispatch(loginUser(formDetails));\n };\n const onSubmit = formProps => {\n let formDetails = {};\n formDetails = {\n email: email,\n password: password,\n };\n dispatch(loginUser(formDetails));\n };\n const handleChangeEmail = e => {\n setEmail(e.target.value.trim());\n if (!isValidEmail(e.target.value.trim())) {\n if (e.target.value === '') {\n setErrorMessage(t('LOGIN.REQUIRED_EMAIL_ERROR'));\n } else {\n setErrorMessage(t('LOGIN.EMAIL_ERROR_MSG'));\n }\n setEmailRequired(true);\n setSignInButtonDisabled(true);\n } else {\n setEmailRequired(false);\n }\n };\n\n const showPassword = () => {\n setPasswordType(!passwortType);\n };\n\n const handleChangePassword = e => {\n if (e.target.value === '') {\n setPasswordRequired(true);\n setSignInButtonDisabled(true);\n } else {\n setPasswordRequired(false);\n }\n setPassword(e.target.value);\n };\n\n const handleForgotPassword = () => {\n history.push('/forgot-password');\n };\n\n return (\n <>\n \n \n {!successModal ? (\n <>\n {!window.location.href.includes('key') ? (\n \n
\n \n \n \n \n {nameErrorMessage} \n \n \n \n \n {mobileNumberErrorMessage}\n \n \n \n \n {emailErrorMessage} \n \n\n \n \n \n \n \n {passwortType ? t('REGISTER.SHOW') : t('REGISTER.HIDE')}\n \n \n \n {passwordErrorMessage}\n \n \n \n \n \n \n {/* {t('REGISTER.REQUIRED_ORGANIZATION_ERROR_MSG')} */}\n {organizationErrorMessage}\n \n \n \n \n {\n setSuggestions([]);\n }}\n onSuggestionsFetchRequested={({ value }) => {\n setValue(value);\n formData.country = value;\n setFormData({ ...formData });\n setSuggestions(getSuggestions(value));\n }}\n onSuggestionSelected={_ => {\n setCountryRequired(false);\n }}\n getSuggestionValue={suggestion => suggestion.name}\n renderSuggestion={suggestion => {suggestion.name}}\n inputProps={{\n value: value,\n autoComplete: 'none',\n onChange: (_, { newValue }) => {\n formData.country = newValue;\n if (newValue !== '') {\n setCountryRequired(true);\n } else {\n setCountryRequired(false);\n }\n setFormData({ ...formData });\n setValue(newValue);\n },\n }}\n highlightFirstSuggestion={true}\n invalid={countryRequired}\n />\n \n {t('REGISTER.REQUIRED_COUNTRY_ERROR_MSG')}\n \n \n \n \n
\n ) : (\n \n \n 
\n
\n \n {' '}\n {/* Change back to SADMS */}\n {t('REGISTER.REGISTER_FORM_TITLE')}\n
\n \n {t('REGISTER.REGISTER_FORM_CAPTION')}\n \n\n \n {t('REGISTER.REGISTER')}\n \n
\n \n {t('REGISTER.AGREE')}{' '}\n \n {t('REGISTER.TERMS_CONDITIONS')}\n \n
\n\n {t('REGISTER.HAVE_ACCOUNT')}{' '}\n
\n \n \n
\n \n
\n \n );\n};\nexport default reduxForm({ form: 'simple' })(LoginPage);\n","export const USER_LIST_CONST = {\n USER_LIST_REQUEST: 'USER_LIST_REQUEST',\n USER_LIST_SUCCESS: 'USER_LIST_SUCCESS',\n USER_LIST_FAILED: 'USER_LIST_FAILED',\n }\n\nexport const USER_BY_ID_CONST = {\n USER_BY_ID_REQUEST: 'USER_BY_ID_REQUEST',\n USER_BY_ID_SUCCESS: 'USER_BY_ID_SUCCESS',\n USER_BY_ID_FAILED: 'USER_BY_ID_FAILED',\n }\n\nexport const USER_DELETE_CONST = {\n USER_DELETE_REQUEST: 'USER_DELETE_REQUEST',\n USER_DELETE_SUCCESS: 'USER_DELETE_SUCCESS',\n USER_DELETE_FAILED: 'USER_DELETE_FAILED',\n }\n\nexport const USER_PERMISSIONS_CONST = {\n USER_PERMISSION_REQUEST: 'USER_PERMISSION_REQUEST',\n USER_PERMISSION_SUCCESS: 'USER_PERMISSION_SUCCESS',\n USER_PERMISSION_FAILED: 'USER_PERMISSION_FAILED',\n }\n\nexport const UPDATE_PERMISSIONS_CONST = {\n UPDATE_PERMISSION_REQUEST: 'UPDATE_PERMISSION_REQUEST',\n UPDATE_PERMISSION_SUCCESS: 'UPDATE_PERMISSION_SUCCESS',\n UPDATE_PERMISSION_FAILED: 'UPDATE_PERMISSION_FAILED',\n }\n \nexport const USER_PERMISSIONS_BY_ID_CONST = {\n USER_PERMISSIONS_BY_ID_REQUEST: 'USER_PERMISSIONS_BY_ID_REQUEST',\n USER_PERMISSIONS_BY_ID_SUCCESS: 'USER_PERMISSIONS_BY_ID_SUCCESS',\n USER_PERMISSIONS_BY_ID_FAILED: 'USER_PERMISSIONS_BY_ID_FAILED',\n }\n \nexport const USER_DETAIL_CONST = {\n USER_DETAIL_REQUEST: ' USER_DETAIL_REQUEST',\n USER_DETAIL_SUCCESS: ' USER_DETAIL_SUCCESS',\n USER_DETAIL_FAILED: ' USER_DETAIL_FAILED',\n }","import { USER_LIST_CONST, USER_BY_ID_CONST, USER_DELETE_CONST,USER_PERMISSIONS_CONST, UPDATE_PERMISSIONS_CONST, USER_PERMISSIONS_BY_ID_CONST,USER_DETAIL_CONST} from './userListConst';\nexport const userListRequest = (data) => ({\n type: USER_LIST_CONST.USER_LIST_REQUEST,\n payload: data,\n });\n \n export const userListSuccess = (response) => ({\n type: USER_LIST_CONST.USER_LIST_SUCCESS,\n payload: response,\n });\n \n export const userListFailed = (error) => ({\n type: USER_LIST_CONST.USER_LIST_FAILED,\n payload: error,\n });\n\n\n export const userByIdRequest = (data) => ({\n type: USER_BY_ID_CONST.USER_BY_ID_REQUEST,\n payload: data,\n });\n \n export const userByIdSuccess = (response) => ({\n type: USER_BY_ID_CONST.USER_BY_ID_SUCCESS,\n payload: response,\n });\n \n export const userByIdFailed = (error) => ({\n type: USER_BY_ID_CONST.USER_BY_ID_FAILED,\n payload: error,\n });\n\n\n export const deleteUserRequest = (data) => ({\n type: USER_DELETE_CONST.USER_DELETE_REQUEST,\n payload: data,\n });\n \n export const deleteUserSuccess = (response) => ({\n type: USER_DELETE_CONST.USER_DELETE_SUCCESS,\n payload: response,\n });\n \n export const deleteUserFailed = (error) => ({\n type: USER_DELETE_CONST.USER_DELETE_FAILED,\n payload: error,\n });\n\n\n export const userPermissionsRequest = (data) => ({\n type: USER_PERMISSIONS_CONST.USER_PERMISSION_REQUEST,\n payload: data,\n });\n \n export const userPermissionsSuccess = (response) => ({\n type: USER_PERMISSIONS_CONST.USER_PERMISSION_SUCCESS,\n payload: response,\n });\n \n export const userPermissionsFailed = (error) => ({\n type: USER_PERMISSIONS_CONST.USER_PERMISSION_FAILED,\n payload: error,\n });\n\n\n export const userDetailRequest = (data) => ({\n type: USER_DETAIL_CONST.USER_DETAIL_REQUEST,\n payload: data,\n });\n \n export const userDetailSuccess = (response) => ({\n type: USER_DETAIL_CONST.USER_DETAIL_SUCCESS,\n payload: response,\n });\n \n export const userDetailFailed = (error) => ({\n type: USER_DETAIL_CONST.USER_DETAIL_FAILED,\n payload: error,\n });\n\n\n\n\n export const updatePermissionsRequest = (data) => ({\n type: UPDATE_PERMISSIONS_CONST.UPDATE_PERMISSION_REQUEST,\n payload: data,\n });\n \n export const updatePermissionsSuccess = (response) => ({\n type: UPDATE_PERMISSIONS_CONST.UPDATE_PERMISSION_SUCCESS,\n payload: response,\n });\n \n export const updatePermissionsFailed = (error) => ({\n type: UPDATE_PERMISSIONS_CONST.UPDATE_PERMISSION_FAILED,\n payload: error,\n });\n \n\n export const userPermissionsByIdRequest = (data) => ({\n type: USER_PERMISSIONS_BY_ID_CONST.USER_PERMISSIONS_BY_ID_REQUEST,\n payload: data,\n });\n \n export const userPermissionsByIdSuccess = (response) => ({\n type: USER_PERMISSIONS_BY_ID_CONST.USER_PERMISSIONS_BY_ID_SUCCESS,\n payload: response,\n });\n \n export const userPermissionsByIdFailed = (error) => ({\n type: USER_PERMISSIONS_BY_ID_CONST.USER_PERMISSIONS_BY_ID_FAILED,\n payload: error,\n });","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAUCAYAAACqJ5zlAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABFSURBVHgB3Y5BDQAgDAPXBgFYmwI04AAcIBEJKFjYEnDAiyZN7tJPoarFzIaILJItuTSXHI2BR24WAVSHGeLc5UHw0Y8NFIwz1gfCNcwAAAAASUVORK5CYII=\"","import React, { useEffect, useState, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-multi-lang';\nimport { FormGroup, Input, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\nimport Button from 'reactstrap-button-loader';\nimport { changeStatusRequest } from '../../redux/accessKey/accessKeyActions';\nimport _ from 'lodash';\n\nconst ReasonModal = props => {\n const {\n className,\n isOpen,\n modalData,\n handleLatestData,\n handleRejectModal,\n handleModalToggle,\n } = props;\n const dispatch = useDispatch();\n const t = useTranslation();\n const [textAreaData, setTextAreaData] = useState('');\n const [requestData, setRequestData] = useState();\n const nextProps = useSelector(state => ({\n changeStatusData: state.AccessKey.changeStatusData || '',\n isChangeStatusRequesting: state.AccessKey.changeStatusRequesting,\n }));\n useEffect(() => {\n setRequestData(modalData);\n }, [isOpen]);\n\n function usePrevious(value) {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n }\n\n const currentprops = nextProps.changeStatusData && nextProps.changeStatusData.data;\n const previousprops = usePrevious(currentprops);\n\n const isSecondRun = useRef(true);\n\n useEffect(() => {\n if (isSecondRun.current) {\n isSecondRun.current = false;\n return;\n }\n if (currentprops && currentprops !== previousprops) {\n if (currentprops) {\n handleRejectModal(false);\n handleModalToggle(false);\n handleLatestData('reject');\n }\n }\n }, [currentprops, previousprops]);\n\n const toggle = value => {\n if (value === 'cancel') {\n handleRejectModal(false);\n } else if (value === 'reject') {\n requestData.reject_response = textAreaData;\n dispatch(changeStatusRequest(requestData));\n }\n };\n\n const handleClose = () => {\n handleRejectModal(false);\n };\n\n return (\n \n \n \n
\n \n \n
\n \n \n
\n \n {`${t('LOGIN.LOGIN_TITLE')} DMS`}
\n\n \n \n
\n \n \n handleClose()} className=\"reason-modal-header\">\n {t('PUBLIC_API_ADMIN.REASON_TITLE')}\n \n \n \n setTextAreaData(e.target.value)}\n />\n \n \n \n {' '}\n toggle('reject')}\n // className=\"modal-reject-button\"\n className=\"api-modal-reject-button\"\n disabled={_.isEmpty(textAreaData.replace(/\\s/g, ''))}\n >\n {t('PUBLIC_API_ADMIN.REJECT')}\n \n \n \n
\n );\n};\n\nexport default ReasonModal;\nReasonModal.propTypes = {\n isOpen: PropTypes.bool,\n modalData: PropTypes.object,\n handleLatestData: PropTypes.func,\n handleRejectModal: PropTypes.func,\n handleModalToggle: PropTypes.func,\n};\n","import React, { useEffect, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useTranslation } from 'react-multi-lang';\nimport PropTypes from 'prop-types';\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\nimport Button from 'reactstrap-button-loader';\nimport { changeStatusRequest } from '../../redux/accessKey/accessKeyActions';\n\nconst ConfirmationModal = props => {\n const {\n className,\n isOpen,\n modalData,\n handleLatestData,\n handleApprovedModalToggle,\n fromModal,\n reactivateClicked,\n handleReactivateModalToggle,\n activeTab,\n } = props;\n const dispatch = useDispatch();\n const t = useTranslation();\n const nextProps = useSelector(state => ({\n changeStatusData: state.AccessKey.changeStatusData || '',\n isChangeStatusRequesting: state.AccessKey.changeStatusRequesting,\n }));\n\n function usePrevious(value) {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n }\n const currentprops = nextProps.changeStatusData && nextProps.changeStatusData.data;\n const previousprops = usePrevious(currentprops);\n\n const isSecondRun = useRef(true);\n useEffect(() => {\n if (isSecondRun.current) {\n isSecondRun.current = false;\n return;\n }\n if (currentprops && currentprops !== previousprops) {\n if (currentprops) {\n handleApprovedModalToggle(false);\n if (reactivateClicked === true) {\n handleReactivateModalToggle();\n }\n handleLatestData();\n }\n }\n }, [currentprops, previousprops]);\n\n const toggle = value => {\n if (value === 'no') {\n if (reactivateClicked === true) {\n handleReactivateModalToggle();\n }\n handleApprovedModalToggle(false);\n } else if (value === 'yes') {\n dispatch(changeStatusRequest(modalData));\n }\n };\n\n const handleClose = () => {\n handleApprovedModalToggle(false);\n };\n\n return (\n \n \n handleClose()} className=\"reason-modal-header\">\n {t('PUBLIC_API_ADMIN.CONFIRMATION')}\n \n \n \n \n {' '}\n toggle('yes')}\n className=\"modal-reject-button\"\n >\n {t('PUBLIC_API_ADMIN.YES')}\n \n \n \n
\n );\n};\n\nexport default ConfirmationModal;\nConfirmationModal.propTypes = {\n isOpen: PropTypes.bool,\n modalData: PropTypes.object,\n handleLatestData: PropTypes.func,\n handleApprovedModalToggle: PropTypes.bool,\n fromModal: PropTypes.bool,\n activeTab: PropTypes.string,\n};\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Modal,\n ModalHeader,\n ModalBody,\n ModalFooter,\n Table,\n Row,\n Col,\n Input,\n Label,\n} from 'reactstrap';\nimport Select from 'react-select';\nimport { useTranslation } from 'react-multi-lang';\nimport PropTypes from 'prop-types';\nimport { getParametersRequest } from '../../redux/accessKey/accessKeyActions';\nimport ReasonModal from './ReasonModal';\nimport ConfirmationModal from './Confirmation';\nimport { getCountryRequest, getCountryBoRequest } from '../../redux/actions';\nimport { LOCATION } from '../../Components/constants';\nimport _ from 'lodash';\n\nconst ClientDetailmodal = (props) => {\n const { modalOpen, handleModalToggle, req_data, handleLatestData, fromEditDetails, activeTab } =\n props;\n const expiry_duration_options = [3, 4, 12, 15, 18, 24];\n const status_options = ['select', 'approve', 'reject'];\n const [modal, setModal] = useState(modalOpen);\n const [indicesList, setIndicesList] = useState();\n const [isRejectModalOpen, setRejectModalOpen] = useState(false);\n const [isApproveModalOpen, setApproveModalOpen] = useState(false);\n const [rejectModalData, setRejectModalData] = useState();\n const [approveModalData, setApproveModalData] = useState();\n const [selectedAll, setSelectedAll] = useState(false);\n const [selectedIndices, setSelectedIndices] = useState([]);\n const [initialSelectedIndices, setInitialSelectedIndices] = useState([]);\n const [expiryDuration, setExpiryDuration] = useState();\n const [initExpiryDuration, setInitExpiryDuration] = useState();\n const [status, setStatus] = useState();\n const [initStatus, setInitStatus] = useState();\n const [accessCountryList, setAccessCountryList] = useState();\n const [selectedAccessCountries, setSelectedAccessCountries] = useState();\n const [initselectedAccessCountries, setInitSelectedAccessCountries] = useState();\n const[countriesListDisableEnable,setCountriesListEnableDisable] = useState(activeTab == \"approve\"? false : true)\n const [expirationTimeEnableDisable,setExpirationTimeEnableDisable] = useState(activeTab == \"approve\"? false : true)\n const dispatch = useDispatch();\n const t = useTranslation();\n const nextProps = useSelector((state) => ({\n IndicesData: state.AccessKey.getParametersData || null,\n changeStatusData: state.AccessKey.changeStatusData || null,\n countryList: state.Location.countryList || null,\n }));\n //const toggleDropDown = () => setDropdownOpen(!dropdownOpen);\n useEffect(() => {\n if (req_data && req_data.api_ids) {\n setSelectedIndices(req_data.api_ids);\n setInitialSelectedIndices(req_data.api_ids);\n setExpiryDuration(req_data.expiry_duration ? req_data.expiry_duration : 3);\n setInitExpiryDuration(req_data.expiry_duration ? req_data.expiry_duration : 3);\n setStatus(req_data.request_status);\n setInitStatus(req_data.request_status);\n let options = [];\n if (accessCountryList?.length) {\n let a;\n req_data.approved_access_countries.map((d) => {\n a = accessCountryList.filter((i) => i.id === d);\n let data;\n if (a && a[0]) {\n data = {\n value: a[0].name,\n label: `${a[0].name}`,\n id: a[0].id,\n };\n }\n options.push(data);\n });\n setSelectedAccessCountries(options);\n setInitSelectedAccessCountries(options);\n }\n }\n }, [req_data, accessCountryList]);\n\n useEffect(() => {\n if (fromEditDetails) {\n dispatch(getCountryBoRequest({ location_type: LOCATION.Country, parent_id: '' }));\n } else {\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\n }\n }, []);\n useEffect(() => {\n if (nextProps.countryList) {\n if (nextProps.countryList.result) {\n setAccessCountryList(nextProps.countryList.result);\n }\n }\n }, [nextProps.countryList]);\n\n const viewtoggle = (value) => {\n if (value === 'update') {\n let data;\n if (status === 'approve') {\n if (selectedAccessCountries) {\n let b = [];\n selectedAccessCountries?.map((i) => {\n b.push(i?.id);\n });\n data = {\n id: req_data && req_data.id,\n request_status: 'approve',\n api_ids: selectedIndices,\n expiry_duration: expiryDuration,\n approved_access_countries: b,\n };\n setApproveModalOpen(true);\n setApproveModalData(data);\n }\n } else if (status === 'reject') {\n if (selectedAccessCountries) {\n let b = [];\n selectedAccessCountries?.map((i) => {\n b.push(i?.id);\n });\n data = {\n id: req_data && req_data.id,\n request_status: 'reject',\n reject_response: '',\n api_ids: selectedIndices,\n approved_access_countries: b,\n };\n setRejectModalOpen(true);\n setRejectModalData(data);\n }\n }\n } else {\n setModal(false);\n handleModalToggle(false);\n }\n };\n useEffect(() => {\n if (modalOpen) {\n dispatch(getParametersRequest('drought'));\n }\n }, []);\n\n useEffect(() => {\n if (nextProps.IndicesData) {\n const {\n data: { result },\n } = nextProps.IndicesData;\n if (result) {\n setIndicesList(result);\n }\n }\n }, [nextProps.IndicesData]);\n\n useEffect(() => {\n if (selectedIndices && indicesList) {\n let a = [];\n indicesList.map((i) => {\n a.push(i.id);\n });\n let b = selectedIndices.sort().join(',') === a.sort().join(',');\n if (b === true) {\n setSelectedAll(true);\n } else {\n setSelectedAll(false);\n }\n }\n }, [selectedIndices, indicesList]);\n\n useEffect(()=>{\n if (fromEditDetails && status == 'approve'){\n setCountriesListEnableDisable(false)\n setExpirationTimeEnableDisable(false)\n }\n else{\n setCountriesListEnableDisable(true)\n setExpirationTimeEnableDisable(true)\n }\n },[status,activeTab])\n\n const handleOnchangeIndices = (e, id) => {\n if (selectedIndices.includes(id)) {\n let b = [];\n b = selectedIndices;\n setSelectedIndices(b.filter((i) => i !== id));\n } else {\n setSelectedIndices([...selectedIndices, id]);\n }\n };\n\n const handleSelectAllIndices = (e) => {\n let a = [];\n if (e.target.checked) {\n indicesList.map((i) => {\n a.push(i.id);\n });\n setSelectedIndices(a);\n } else {\n setSelectedIndices([]);\n }\n };\n const handleStatusChange = (value) => {\n setStatus(value);\n };\n\n const handleApprovedModalToggle = (value) => {\n setApproveModalOpen(value);\n setModal(false);\n handleModalToggle(false);\n };\n\n const handleRejectModal = (value) => {\n setRejectModalOpen(value);\n };\n const renderAPIParameterOptions = (list, value) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n params.map((param) => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n setSelectedAccessCountries(options);\n }\n };\n const handleAccessCountryChange = (selectedOption) => {\n setSelectedAccessCountries(selectedOption);\n };\n\n const areEqual = (array1, array2) => {\n if (array1.length === array2.length) {\n return array1.every((element) => {\n if (array2.includes(element)) {\n return true;\n }\n return false;\n });\n }\n\n return false;\n };\n\n const areEqualCountries = (array1, array2) => {\n if (array1 && array2) {\n if (array1.length === array2.length && array1.length != 0) {\n let init = array1.map((item) => {\n return item?.id;\n });\n let updated = array2.map((item) => {\n return item?.id;\n });\n if (init.length === updated.length) {\n return init.every((element) => {\n if (updated.includes(element)) {\n return true;\n }\n\n return false;\n });\n }\n }\n }\n return false;\n };\n return (\n <>\n \n {fromModal && (activeTab === 'approve' || activeTab === 'reject')\n ? t('PUBLIC_API_ADMIN.UPDATE_CONFIRMATION')\n : reactivateClicked === true\n ? t('PUBLIC_API_ADMIN.REACTIVATE_CONFIRMATION')\n : t('PUBLIC_API_ADMIN.APPROVE_CONFIRMATION')}\n
\n\n \n \n {t('PUBLIC_API_ADMIN.CLIENT_DETAILS')}\n \n \n \n
\n |
\n \n \n {fromEditDetails ? (\n <>\n {' '}\n viewtoggle('update')}\n className=\"approve-button\"\n disabled={\n (areEqual(selectedIndices, initialSelectedIndices) &&\n initStatus == status &&\n areEqualCountries(initselectedAccessCountries, selectedAccessCountries) &&\n initExpiryDuration == expiryDuration) ||\n selectedIndices.length === 0 ||\n !status ||\n status === status_options[0]\n }\n >\n {t('PUBLIC_API_ADMIN.UPDATE')}\n \n \n ) : (\n \n )}\n \n \n
\n {isRejectModalOpen && (\n \n {t('PUBLIC_API_ADMIN.NAME')}\n{req_data && req_data.name ? req_data.name : 'N/A'} \n | \n \n {t('PUBLIC_API_ADMIN.EMAIL')}\n{req_data && req_data.email ? req_data.email : 'N/A'} \n | \n \n {t('PUBLIC_API_ADMIN.ORGANIZATION')}\n{req_data && req_data.organization ? req_data.organization : 'N/A'} \n | \n \n {t('PUBLIC_API_ADMIN.COUNTRY')}\n{req_data && req_data.country_name ? req_data.country_name : 'N/A'} \n | \n
\n {t('PUBLIC_API_ADMIN.DESIGNATION')}\n{req_data && req_data.designation ? req_data.designation : 'N/A'} \n | \n \n {t('PUBLIC_API_ADMIN.APPLICATION_URL')}\n{req_data && req_data.application_url ? req_data.application_url : 'N/A'} \n | \n \n {t('PUBLIC_API_ADMIN.EXPIRATION_TIME')}\n | \n \n {t('PUBLIC_API_ADMIN.STATUS')}\n | \n
\n
\n \n
\n Access Country
\n <>\n\n
\n {t('PUBLIC_API_ADMIN.PURPOSE')}
\n{req_data && req_data.purpose ? req_data.purpose : 'N/A'}
\n\n \n
\n \n {indicesList &&\n indicesList.map((i) => {\n return (\n
\n
\n {t('PUBLIC_API_ADMIN.INDICES_REQUEST')}
\n \n\n \n
\n \n \n \n {t('PUBLIC_API_ADMIN.CONFIRMATION')} \n \n \n \n {' '}\n \n \n \n
\n );\n}\n\nexport default DeleteConfirmationModal;\nDeleteConfirmationModal.propTypes = {\n isDeleteModalOpen: PropTypes.bool,\n handleDeleteConfirm: PropTypes.func,\n };","import React, { useCallback, useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useTranslation } from 'react-multi-lang';\nimport { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';\nimport Optionicon from '../../assets/Images/option.png';\nimport PropTypes from 'prop-types';\nimport { getByIdRequest, deleteRequest } from '../../redux/accessKey/accessKeyActions';\nimport ClientDetailmodal from './DetailsModal';\nimport ConfirmationModal from './Confirmation';\nimport ReasonModal from './ReasonModal';\nimport DeleteConfirmationModal from './DeleteConfirmationModal';\nimport { isSuperAdmin } from '../../Components/common/utils';\n\nconst Detailsdropdown = props => {\n const {\n request_Id,\n handleLatestData,\n handleLatestDataForDelete,\n activeTab,\n updatedPermissions,\n } = props;\n const t = useTranslation();\n const nextProps = useSelector(state => ({\n selectedReqIdData: state.AccessKey.getByIdData || null,\n selectedReqIdDataRequesting: state.AccessKey.getByIdRequesting,\n deleteData: state.AccessKey.deleteData || null,\n }));\n const dispatch = useDispatch();\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [reactivateClicked, setReactivateClicked] = useState(false);\n const [isApproveModalOpen, setApproveModalOpen] = useState(false);\n const [isRejectModalOpen, setRejectModalOpen] = useState(false);\n const [isFromEditDetails, setIsFromEditDetails] = useState(false);\n const [selectedReqModalData, setSelectedReqModalData] = useState();\n const [rejectModalData, setRejectModalData] = useState();\n const [approveModalData, setApproveModalData] = useState();\n const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\n const [selectedTabListData, setSelectedTabListData] = useState({\n view_details: true,\n Edit_details: true,\n approved: true,\n reject: true,\n delete: false,\n re_activate: false,\n });\n\n const toggle = () => setDropdownOpen(prevState => !prevState);\n useEffect(() => {\n if (activeTab === 'approve') {\n if (updatedPermissions) {\n let a = {\n view_details:\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\n Edit_details:\n isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\n approved: false,\n reject: false,\n delete: isSuperAdmin() || updatedPermissions.includes('delete_accesskey') ? true : false,\n re_activate: false,\n };\n setSelectedTabListData(a);\n }\n } else if (activeTab === 'reject') {\n if (updatedPermissions) {\n let a = {\n view_details:\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\n Edit_details:\n isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\n approved: false,\n reject: false,\n delete: isSuperAdmin() || updatedPermissions.includes('delete_accesskey') ? true : false,\n re_activate: false,\n };\n setSelectedTabListData(a);\n }\n } else if (activeTab === 'delete') {\n if (updatedPermissions) {\n let a = {\n view_details:\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\n Edit_details: false,\n approved: false,\n reject: false,\n delete: false,\n re_activate: true,\n };\n setSelectedTabListData(a);\n }\n } else if (activeTab === 'new') {\n let a;\n if (updatedPermissions) {\n a = {\n view_details:\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\n Edit_details:\n isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\n approved: isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\n reject: isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\n delete: false,\n re_activate: false,\n };\n setSelectedTabListData(a);\n }\n }\n }, [activeTab, updatedPermissions]);\n\n useEffect(() => {\n if (nextProps.selectedReqIdData) {\n const {\n data: { result },\n } = nextProps.selectedReqIdData;\n\n if (result?.[0]) {\n setSelectedReqModalData(result[0]);\n }\n }\n }, [nextProps.selectedReqIdData]);\n\n useEffect(() => {\n if (nextProps.deleteData) {\n const {\n data: { result },\n } = nextProps.deleteData;\n if (result) {\n handleLatestDataForDelete();\n }\n }\n }, [nextProps.deleteData]);\n\n const handleViewDetailsModal = () => {\n setIsModalOpen(true);\n setIsFromEditDetails(false);\n dispatch(getByIdRequest(request_Id));\n };\n const handleEditDetailsModal = () => {\n setIsModalOpen(true);\n setIsFromEditDetails(true);\n dispatch(getByIdRequest(request_Id));\n };\n const handleModalToggle = () => {\n setIsModalOpen(false);\n };\n const handleApproved = () => {\n let data;\n data = {\n id: request_Id,\n request_status: 'approve',\n };\n setApproveModalData(data);\n setApproveModalOpen(true);\n };\n\n const handleReactivate = () => {\n let data;\n data = {\n id: request_Id,\n request_status: 'approve',\n };\n setApproveModalData(data);\n setApproveModalOpen(true);\n setReactivateClicked(true);\n };\n\n const handleReactivateModalToggle = () => {\n setReactivateClicked(false);\n };\n\n const handleRejected = () => {\n let data;\n data = {\n id: request_Id,\n request_status: 'reject',\n reject_response: '',\n };\n setRejectModalOpen(true);\n setRejectModalData(data);\n };\n\n const handleRejectModal = useCallback(value => {\n setRejectModalOpen(value);\n }, []);\n\n const handleDelete = () => {\n setIsDeleteModalOpen(true);\n };\n\n const handleDeleteConfirm = (boolean_value, value) => {\n setIsDeleteModalOpen(boolean_value);\n if (value === 'yes') {\n dispatch(deleteRequest(request_Id));\n }\n };\n\n const handleApprovedModalToggle = useCallback(value => {\n setApproveModalOpen(value);\n }, []);\n\n return (\n <>\n {t('PUBLIC_API_ADMIN.DELETE_CONFIRMATION')}
\n\n \n \n {headerGroups.map(headerGroup => (\n <>\n
\n
\n \n );\n};\nRequestListPagination.propTypes = {\n req_data: PropTypes.array,\n handleLatestData: PropTypes.func,\n selectedTab: PropTypes.string,\n handleLatestDataForDelete: PropTypes.func,\n handlePageSize: PropTypes.func,\n pageCount: PropTypes.number,\n handlePageNumber: PropTypes.func,\n pageNumber: PropTypes.number,\n recordsCount: PropTypes.number,\n activeTab: PropTypes.string,\n};\n","export default __webpack_public_path__ + \"static/media/back-button.53ed2ee8.svg\";","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap';\nimport classnames from 'classnames';\nimport { useTranslation } from 'react-multi-lang';\nimport { getAllByTypeRequest } from '../../redux/accessKey/accessKeyActions';\nimport {userDetailRequest } from \"../../redux/user-list/userListAction\";\nimport { isSuperAdmin, isStaffUser } from \"../../Components/common/utils\";\nimport { RequestListPagination } from './pagination.js';\nimport RightArrow from \"../../assets/Images/back-button.svg\";\nimport { REQUEST_STATUS } from '../../Components/constants/index';\nimport { ToastContainer } from 'react-toastify';\nimport Loader from '../../Components/common/loader';\n\nconst Publicapikey = () => {\n const nextProps = useSelector((state) => ({\n newRequestData: state.AccessKey.getAllByTypeData || null,\n getAllByTypeRequesting: state.AccessKey.getAllByTypeRequesting,\n userDetailData: state.userList.userDetailData || null,\n }));\n const dispatch = useDispatch();\n let history = useHistory();\n const [activeTab, setActiveTab] = useState('new');\n const [newRequestList, setNewRequestList] = useState();\n const [updatedPermissions,setUpdatedPermissions] = useState();\n const [pageLimit, setPageLimit] = useState(10);\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [recordsCount, setRecordsCount] = useState();\n const t = useTranslation();\n\n const toggle = (tab) => {\n setActiveTab(tab);\n setPageNumber(1);\n dispatch(getAllByTypeRequest({ status: tab, page: 1, limit: pageLimit }));\n };\n\n useEffect(() => {\n if (isSuperAdmin() || isStaffUser()) {\n dispatch(\n getAllByTypeRequest({ status: REQUEST_STATUS.NEW, page: pageNumber, limit: pageLimit }),\n );\n }\n else {\n history.push(\"/home\");\n }\n dispatch(userDetailRequest());\n }, []);\n\n\n \n useEffect(() => {\n if(nextProps.userDetailData){\n let a = [];\n const {\n data: { result },\n } = nextProps.userDetailData;\n if(result){\n result.user_permissions.map((i) => {\n a.push(i.codename);\n })\n setUpdatedPermissions(a);\n }\n }\n\n },[nextProps.userDetailData])\n\n useEffect(() => {\n if (nextProps.newRequestData) {\n const {\n data: { result },\n } = nextProps.newRequestData;\n if (result?.results?.length) {\n setNewRequestList(result.results);\n setPageCount(result.count);\n setRecordsCount(result.results.length);\n }else{\n setNewRequestList([]);\n setPageCount(0);\n setRecordsCount(0);\n }\n }\n }, [nextProps.newRequestData]);\n\n const handleLatestData = (value) => {\n dispatch(getAllByTypeRequest({ status: activeTab, page: pageNumber, limit: pageLimit }));\n };\n\n const handlePageSize = (value) => {\n setPageLimit(value);\n setPageNumber(1);\n dispatch(getAllByTypeRequest({ status: activeTab, page: 1, limit: value }));\n };\n\n const handleLatestDataForDelete = (value) => {\n dispatch(getAllByTypeRequest({ status: activeTab, page: pageNumber, limit: pageLimit }));\n };\n\n const handlePageNumber = (value) => {\n setPageNumber(value);\n dispatch(getAllByTypeRequest({ status: activeTab, page: value, limit: pageLimit }));\n };\n\n const handleManageCropsBackButton = () => {\n history.push(\"/settingsDashboard\");\n}\n\n return (\n <>\n | \n |
|---|
| \n | \n
| \n No record found .\n | \n
| \n | \n \n ) : (\n
\n \n
\n
\n \n \n {\n handleGoToPage(e);\n }}\n disabled={\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === 0\n ? true\n : false\n }\n style={{ width: '50px', border: 'none' }}\n />\n \n \n of{' '}\n {props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)}{' '}\n Pages\n \n \n handlepreviousPage()}\n className=\"previous-btn\"\n disabled={props.pageNumber <= 1 ? true : false}\n >\n {props.pageNumber <= 1 ? (\n 
\n ) : (\n 
\n )}\n \n handlenextPage()}\n className=\"next-btn\"\n disabled={\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === 0\n ? true\n : false\n }\n >\n {(props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === 0 ? (\n 
\n ) : (\n 
\n )}\n \n \n
\n \n \n \n 
handleManageCropsBackButton()}/>\n
\n \n \n \n \n
\n \n \n
\n \n );\n};\n\nexport default Publicapikey;\n","import React from 'react';\nimport { useTranslation } from 'react-multi-lang';\nimport PropTypes from 'prop-types';\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\nimport Button from 'reactstrap-button-loader';\n\nconst ConfirmationModal = props => {\n const { className, isOpen, handleModalToggle, handleDeleteConfirm } = props;\n const t = useTranslation();\n\n const toggle = value => {\n if (value === 'no') {\n handleModalToggle(false);\n } else if (value === 'yes') {\n handleDeleteConfirm();\n handleModalToggle(false);\n }\n };\n\n const handleClose = () => {\n handleModalToggle(false);\n };\n\n return (\n {t('PUBLIC_API_ADMIN.API_KEYS')}
\n \n\n \n handleClose()} className=\"reason-modal-header\">\n {t('STATIC_RESOURCE_ADMIN.CONFIRMATION')}\n \n \n \n \n {' '}\n \n \n \n
\n );\n};\n\nexport default ConfirmationModal;\nConfirmationModal.propTypes = {\n isOpen: PropTypes.bool,\n handleModalToggle: PropTypes.func,\n handleDeleteConfirm: PropTypes.func,\n};\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH8SURBVHgBnVU7bsJAEN11XEGTtIjCnCBJwUdU5gShTBdygiQnwDkBcILACUJOgNMgPo1zgjgF1FRIkfjkPTSLwJhfRhqP2Z1582Z2x2gVI67rXk6nUxevD9AbqCNbITSAtgeDQSsuVkcXstlsBaamtb5UhyWEelFgKwJGoDeCQf3lcvlsWVYGQZqK37fQRwFzoM1cLleNZSgbHnQCsNd+v19XBySfzz8vFosqkyNJfTgcvqwBWSaZEQybJWwG6gRBHPvbkfZUWL4Wdt8sARsvx5jFMQWJGskkEomMNuygIcAy6h8CDLJ0ScjG446LyOJFHYW5wsGUaNGzDi1K20qM2A8Cwro8ZfZB2bb9tYeAQyABY1t2HBDbltdrAjp863a7OwchzELxIVgILUX9er1eaJJb6gxBSUd9LGGgCoWCE93cKDM0TE0fN0WuDyUgYCDZy3EZTZmm/LgeKjkHyI+NjJ9wLsPytLfuYPQ0IZk9Sc34vVuz2awJdhw3l5dUnSko90lJWzgpVhAEEyys5hDA1WKxeHMGGH09iV3ZCz7G43GQSqWuyBKl36fT6d/RaNQ7gVlT5vgV7Bpc3+owJsODMf0ImZ0X3txR3oT5fM5el5lcmDXwMVm3KvYDK0121GFhqx7BrL25qNX+kioy5zt/AWDlJ5PJlu/7k2jcH0el7V9PTmAKAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACSSURBVHgB7Y29CYNQEIDvfDMkMwTTZIIkI6SIA7iGCAouYi8IjqAT2PjTWrvDQwUfvELxDuy8D666u+8DEASBhfsPo2U4P4p6uIrjeb439w1jW5WUP1LAkhvIkcOALdeIvqOxAIQfNaI48j5L0rGr6vvjM1AjiiM3O07EgX1wS25o8iRFjb59y+bpBa8zbgTh6kxDc0DCTOH8QwAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAGFBMVEUAAAArVXoqVHwrUn0oVX0qVHwqVHwAAAC0PVPiAAAABnRSTlMAMIBgYH/PTsUGAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+UJCw86DQAIIBgAAAABb3JOVAHPoneaAAAAOUlEQVQY02NgoB9gBBECUI6aAQMDSxKUE5bMwOCWCuWwphmwpAUwwKXgEiAphARQKhXJcNYABnoCAEztBxzsklyqAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA5LTExVDE1OjU4OjEzKzAwOjAw89th7QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOS0xMVQxNTo1ODoxMyswMDowMIKG2VEAAAAASUVORK5CYII=\"","import React, { useEffect, useState } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { Collapse, FormGroup, Label } from 'reactstrap';\nimport CloseIcon from '../../assets/Images/icons/close.png';\nimport UpIcon from '../../assets/Images/icons/up.png';\nimport DownIcon from '../../assets/Images/icons/down.png';\nimport Button from 'reactstrap-button-loader';\nimport { Field, reduxForm, change } from 'redux-form';\nimport PropTypes from 'prop-types';\nimport { t } from 'react-multi-lang';\nimport { renderTextField } from '../../Components/common/renderInputField';\nimport { ERPAS } from '../../Components/constants';\nimport _ from 'lodash';\n\n\n\nconst validate = values => {\n return {};\n};\n\nconst RightSideBar = props => {\n const nextProps = useSelector(state => ({\n ForeCastSourcesData: state.Weather.weatherForecastSourcesData,\n StaticResourceData: state.staticResource.staticResourceData || null,\n isStaticResourceRequesting: state.staticResource.isStaticResourceRequesting,\n }));\n\n const dispatch = useDispatch();\n const {\n closed,\n handleClose,\n filterDataSources,\n handleClearFilterInitialValues,\n initialValues,\n formFilterData,\n handleFilterFormData,\n handleSubmit,\n reset,\n closeRightBar,\n handleFilter,\n noRecordsErrorHandler,\n updateInitialValues,\n } = props;\n\n const filter_req_data = {\n region_id: '',\n country_id: '',\n forecast_data_source_id: [],\n parameter_id: [],\n start_date: null,\n end_date: null,\n limit: 0,\n };\n\n const [isDataSourceOpen, setIsDataSourceOpen] = useState(false);\n const [isParametersOpen, setIsParametersOpen] = useState(false);\n const [isDataRangeOpen, setIsDataRangeOpen] = useState(false);\n const [submitDisabled, setSubmitDisabled] = useState(true);\n const [handlersClicked,setHandlersClicked] = useState(false)\n\n\n\n useEffect(() => {\n if (nextProps.StaticResourceData) {\n const {\n data: { result },\n } = nextProps.StaticResourceData;\n if (result.length <= 0) {\n noRecordsErrorHandler();\n }\n }\n }, [nextProps.StaticResourceData]);\n\n useEffect(() => {\n if (formFilterData) {\n if (formFilterData?.forecast_data_source_id?.length !== 0) {\n setIsDataSourceOpen(true);\n }\n if (formFilterData?.parameter_id?.length !== 0) {\n setIsParametersOpen(true);\n }\n if (formFilterData?.start_date || formFilterData?.end_date) {\n setIsDataRangeOpen(true);\n }\n } \n }, [formFilterData]);\n\n useEffect(()=>{\n if (handlersClicked){\n if (formFilterData?.forecast_data_source_id?.length !== 0 || formFilterData?.parameter_id?.length !== 0 || formFilterData?.start_date || formFilterData?.end_date){\n setSubmitDisabled(false)\n }\n }\n },[formFilterData.forecast_data_source_id, formFilterData.parameter_id, formFilterData.start_date, formFilterData?.end_date])\n\n\n useEffect(() => {\n if (!closed) {\n if (filterDataSources) {\n const { data } = filterDataSources;\n if (data?.result) {\n let categories = [];\n let paramArr = [];\n data?.result.map(i => {\n if (i.category !== 'Weather Forecast') {\n i.name = i.category;\n {\n i.data.map(item => {\n i.id = item?.forecast_data_source?.forecast_data_source_category_id;\n item.checked = false;\n });\n }\n categories.push(i);\n }\n if (i.category === 'Seasonal') {\n /**\n * changed by: sai krishna thalla\n * reason: filter paremeters data is not comming\n * date: 6-sep-2022\n */\n let params = i.data[0]?.forecast_data_source?.forecast_data_source_with_parameter;\n if (params?.length) {\n params?.map(item => {\n item?.parameter?.map(p => {\n let x = { ...p };\n x.name = p.parameter.name;\n x.id = p.parameter_id;\n x.slug = p.parameter.slug;\n x.checked = false;\n paramArr.push(x);\n });\n });\n }\n updateInitialValues({\n dataSourceData: categories,\n parameterData: paramArr,\n start_date: '',\n end_date: '',\n });\n }\n });\n categories = handleErpasCatagory(categories)\n }\n }\n }\n }, [filterDataSources]);\n\n const handleErpasCatagory =(catagories)=>{\n let a =[]\n a = catagories[1].data.filter((i)=>{return i.forecast_data_source.name != ERPAS})\n catagories[1].data = a;\n return catagories\n }\n\n const handleChangeParameters = (e, id) => {\n let a = formFilterData.parameter_id;\n initialValues.parameterData.map(item => {\n if (item.id === id) {\n if (a.includes(id)) {\n item.checked = false;\n formFilterData.parameter_id = a.filter(i => i !== id);\n handleFilterFormData(formFilterData, item);\n if (a.length < 0) {\n setSubmitDisabled(true);\n }\n } else {\n item.checked = true;\n a.push(item.id);\n formFilterData.parameter_id = a;\n handleFilterFormData(formFilterData, item);\n setSubmitDisabled(false);\n }\n }\n });\n setHandlersClicked(true)\n };\n\n const handleDataSourceChange = (e, id) => {\n let a = formFilterData.forecast_data_source_id;\n initialValues.dataSourceData.map(i => {\n i.data.map(item => {\n if (item.forecast_data_source.id === id) {\n if (a?.includes(id)) {\n item.checked = false;\n formFilterData.forecast_data_source_id = a.filter(i => i !== id);\n handleFilterFormData(formFilterData, i);\n if (a.length < 0) {\n setSubmitDisabled(true);\n }\n } else {\n item.checked = true;\n a.push(item.forecast_data_source.id);\n formFilterData.forecast_data_source_id = a;\n handleFilterFormData(formFilterData, i);\n setSubmitDisabled(false);\n }\n }\n });\n });\n setHandlersClicked(true)\n };\n \n\n const onFormSubmit = formProps => {\n handleFilter(formFilterData);\n };\n const handleStartDate = e => {\n formFilterData.start_date = e.target.value;\n handleFilterFormData(formFilterData);\n updateInitialValues({\n ...initialValues,\n start_date: e.target.value !== '' ? e.target.value : null,\n });\n setSubmitDisabled(false);\n setHandlersClicked(true)\n };\n\n const handleEndDate = e => {\n formFilterData.end_date = e.target.value;\n updateInitialValues({\n ...initialValues,\n end_date: e.target.value !== '' ? e.target.value : null,\n });\n handleFilterFormData(formFilterData);\n setSubmitDisabled(false);\n setHandlersClicked(true)\n };\n\n const handleClearFilters = () => {\n reset('filter-form');\n dispatch(change('filter-form', 'start_date', ''));\n dispatch(change('filter-form', 'end_date', ''));\n let updatedInitialValues = JSON.parse(JSON.stringify(initialValues));\n let updatedParamValues = JSON.parse(JSON.stringify(initialValues));\n if (initialValues.dataSourceData) {\n updatedInitialValues = initialValues.dataSourceData.map(i => {\n let x = JSON.parse(JSON.stringify(i));\n x.data = i.data.map(item => {\n item.checked = false;\n return item;\n });\n return x;\n });\n }\n if (initialValues.parameterData) {\n updatedParamValues = initialValues.parameterData.map(i => {\n let x = JSON.parse(JSON.stringify(i));\n x.checked = false;\n return x;\n });\n }\n setIsDataRangeOpen(false);\n setIsParametersOpen(false);\n setIsDataSourceOpen(false);\n handleClearFilterInitialValues(updatedInitialValues, updatedParamValues);\n handleFilter(filter_req_data);\n window.scrollTo({ top: 0, behavior: 'auto' });\n };\n\n\n return (\n {t('STATIC_RESOURCE_ADMIN.DELETE_CONFIRM_MSG')}
\n\n
\n );\n};\nRightSideBar.propTypes = {\n noRecordsErrorHandler: PropTypes.func,\n handleFilterFormData: PropTypes.func,\n formFilterData: PropTypes.object,\n};\nexport default reduxForm({\n form: 'filter-form',\n validate,\n enableReinitialize: true,\n})(RightSideBar);\n","import React, { useState, useEffect, useRef } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Card, CardBody, Label } from 'reactstrap';\nimport Button from 'reactstrap-button-loader';\nimport { Field, reduxForm, change } from 'redux-form';\nimport PropTypes from 'prop-types';\nimport { showSuccess } from '../../Components/Notifications';\nimport {\n staticResourceAddRequest,\n staticResourceAddSuccess,\n staticResourceSuccess,\n updateStaticResourceRequest,\n updateStaticResourceSuccess,\n} from '../../redux/staticResource/staticResourceAction';\nimport moment from 'moment';\nimport { t } from 'react-multi-lang';\nimport _ from 'lodash';\nimport { isSuperAdmin } from '../../Components/common/utils';\nimport {\n renderReactSelectInputField,\n renderTextField,\n renderImageField,\n} from '../../Components/common/renderInputField';\nimport {\n DISPLAY_DATE_FORMAT,\n FORECAST_LEAD_TIME_LIST,\n DATA_SOURCES,\n} from '../../Components/constants';\n\nconst validate = (values) => {\n const errors = {};\n if (!values.country) {\n errors.country = 'Required';\n } else {\n if (values.country.value === 'select') {\n errors.country = 'Required';\n }\n }\n if (!values.region) {\n errors.region = 'Required';\n } else {\n if (values.region.value === 'select') {\n errors.region = 'Required';\n }\n }\n if (!values.forecast_category) {\n errors.forecast_category = 'Required';\n }\n if (!values.datasource_type) {\n errors.datasource_type = 'Required';\n }\n if (values.datasource_type?.id === DATA_SOURCES.IRI.id) {\n if (!values.forecast_lead_time) {\n errors.datasource_type = 'Required';\n }\n if (!values.forecast_year_month) {\n errors.datasource_type = 'Required';\n }\n }\n if (!values.parameter_type) {\n errors.parameter_type = 'Required';\n }\n if (!values.Upload) {\n errors.Upload = 'Required';\n }\n if (!values.start_date) {\n errors.start_date = 'Required';\n }\n if (!values.end_date) {\n errors.end_date = 'Required';\n }\n if (values.start_date && values.end_date && values.start_date >= values.end_date) {\n errors.start_date = 'start date must be less than end date';\n }\n return errors;\n};\n\nconst Filter = (props) => {\n const {\n invalid,\n descriptionHandler,\n handleSubmit,\n pristine,\n reset,\n submitting,\n editClicked,\n regionList,\n handleRegion,\n countryList,\n handleCountry,\n dataSources,\n handleCategoryData,\n dataSourceList,\n handleSelectedDataSource,\n handlePreSelectedDataSource,\n parameterList,\n handleParameter,\n startDateHandler,\n endDateHandler,\n linkHandler,\n fileHandler,\n handleSelectedTab,\n handleUpdatedListData,\n handleResetInitialValues,\n handleDataSourcesEmptyListChange,\n updatedPermissions,\n setStaticResourcesList,\n isPristine,\n handleFilter,\n isIRISelected,\n forecastYearMonthHandler,\n forecastLeadTimeHandler,\n handleResetIRIFields,\n } = props;\n const req_data = {\n region: '',\n country: '',\n forecast_data_source: '',\n parameter: '',\n start_date: '',\n end_date: '',\n forecast_year_month: '',\n source_link: '',\n description: '',\n upload_image: '',\n };\n const filter_req_data = {\n region_id: '',\n country_id: '',\n forecast_data_source_id: [],\n parameter_id: [],\n start_date: null,\n end_date: null,\n limit: 0,\n };\n\n const dispatch = useDispatch();\n const [forecastLeadTimeList, setForecastLeadTimeList] = useState([]);\n const [isImgaeUploaded, setIsImgaeUploaded] = useState(false);\n const [formData, setFormData] = useState(req_data);\n const [countryFieldDisabled, setCountryFieldDisabled] = useState(false);\n const [regionFieldDisabled, setRegionFieldDisabled] = useState(false);\n const [isPreventAddDispatch, setIsPreventAddDispatch] = useState(true);\n const [file, setFile] = useState();\n let form = new FormData();\n const nextProps = useSelector((state) => ({\n staticResource: state.staticResource || null,\n }));\n const {\n staticResourceAddData,\n isStaticResourceAddRequesting,\n deleteStaticResourceData,\n updateStaticResourceData,\n deleteStaticResourceDataError,\n isUpdateStaticResourceRequesting,\n } = nextProps.staticResource;\n useEffect(() => {\n return () => {\n dispatch(staticResourceAddSuccess({}));\n dispatch(updateStaticResourceSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (props.initialValues) {\n setFormData(props.initialValues);\n if (props.initialValues?.region?.id) {\n setCountryFieldDisabled(true);\n handleRegion(props.initialValues?.region?.id);\n } else if (props.initialValues?.country?.id) {\n setRegionFieldDisabled(true);\n handleCountry(props.initialValues?.country?.id);\n }\n dataSources?.map((i) => {\n if (i.id === props.initialValues?.forecast_category?.id) {\n handleCategoryData(i.data);\n i.data.map((item) => {\n if (item.forecast_data_source_id === props.initialValues?.datasource_type?.id) {\n handlePreSelectedDataSource(\n item.forecast_data_source.forecast_data_source_with_parameter,\n item.forecast_data_source_id,\n );\n }\n });\n }\n });\n if (props.initialValues.Upload) {\n fileHandler(props.initialValues.Upload);\n }\n }\n }, [props.initialValues]);\n\n useEffect(() => {\n if (staticResourceAddData) {\n const {\n data: { result },\n } = staticResourceAddData;\n if (result) {\n handleResetIRIFields(false);\n showSuccess(result);\n reset();\n dispatch(change('FilterForm', 'Upload', ''));\n handleSelectedTab();\n }\n }\n }, [staticResourceAddData]);\n\n useEffect(() => {\n if (formData.forecast_year_month) {\n let month = formData.forecast_year_month.split('-')[1];\n let list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\n let option_list = list?.splice(parseInt(month), 4);\n let latest_list;\n if (month >= 9) {\n let new_list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\n let new_arr = new_list?.splice(parseInt(0), 4 - option_list.length);\n latest_list = option_list.concat(new_arr);\n } else {\n latest_list = option_list;\n }\n latest_list?.map((i, index) => {\n i.name = i.name + '(' + `${index + 1} Month` + ')';\n });\n setForecastLeadTimeList(latest_list);\n }\n }, [formData.forecast_year_month]);\n\n useEffect(() => {\n if (updateStaticResourceData) {\n const {\n data: { result },\n } = updateStaticResourceData;\n if (result) {\n handleResetIRIFields(false);\n showSuccess(result);\n handleSelectedTab();\n handleResetInitialValues();\n setIsImgaeUploaded(false);\n // handleFilter(filter_req_data);\n props.setEditClicked(false)\n }\n }\n }, [updateStaticResourceData]);\n\n useEffect(() => {\n if (deleteStaticResourceDataError) {\n handleResetInitialValues();\n }\n }, [deleteStaticResourceDataError]);\n\n useEffect(() => {\n if (deleteStaticResourceData) {\n const {\n data: { result },\n } = deleteStaticResourceData;\n if (result) {\n showSuccess(result);\n handleUpdatedListData();\n }\n }\n }, [deleteStaticResourceData]);\n\n const renderAPIParameterOptions = (list, action_name) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n if (\n action_name !== 'forecast_lead_time' &&\n action_name !== 'parameter_type' &&\n action_name !== 'datasource_type' &&\n action_name !== 'forecast_category'\n ) {\n let default_option = { value: 'select', label: 'select', id: 'select' };\n options.push(default_option);\n }\n params.map((param) => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n };\n\n const handleCountryChange = (e) => {\n if (e.value === 'select') {\n formData.region = '';\n setFormData({ ...formData });\n setRegionFieldDisabled(false);\n handleRegion(e.id);\n } else {\n setRegionFieldDisabled(true);\n formData.country = e.id;\n setFormData({ ...formData });\n handleCountry(e.id);\n }\n handleCategoryData();\n handleDataSourcesEmptyListChange();\n handleSelectedDataSource([]);\n dispatch(change('FilterForm', 'forecast_category', ''));\n dispatch(change('FilterForm', 'datasource_type', ''));\n dispatch(change('FilterForm', 'parameter_type', ''));\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\n };\n const handleRegionChange = (e) => {\n if (e.value === 'select') {\n formData.region = '';\n setFormData({ ...formData });\n setCountryFieldDisabled(false);\n handleDataSourcesEmptyListChange();\n dispatch(change('FilterForm', 'forecast_category', ''));\n dispatch(change('FilterForm', 'datasource_type', ''));\n dispatch(change('FilterForm', 'parameter_type', ''));\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\n handleCategoryData();\n handleSelectedDataSource([]);\n handleRegion(e.id);\n } else {\n setCountryFieldDisabled(true);\n formData.region = e.id;\n setFormData({ ...formData });\n handleRegion(e.id);\n }\n };\n const handleCategoryChange = (e) => {\n if (e.value === 'select') {\n handleCategoryData();\n formData.forecast_data_source_id = '';\n setFormData({ ...formData });\n } else {\n formData.forecast_data_source_id = e.id;\n setFormData({ ...formData });\n dataSources.map((i) => {\n if (i.id === e.id) {\n handleCategoryData(i.data);\n }\n });\n }\n formData.datasource_type = '';\n formData.parameter = '';\n formData.forecast_lead_time = '';\n setFormData({ ...formData });\n handleSelectedDataSource([], e.id);\n dispatch(change('FilterForm', 'datasource_type', ''));\n dispatch(change('FilterForm', 'parameter_type', ''));\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\n };\n const ref = useRef();\n\n const resetImage = () => {\n if (ref?.current?.value) {\n ref.current.value = '';\n }\n };\n const handleDataSourceChange = (e) => {\n if (e.value === 'select') {\n handleSelectedDataSource([], e.id);\n formData.forecast_data_source_id = '';\n setFormData({ ...formData });\n } else {\n formData.forecast_data_source_id = e.id;\n setFormData({ ...formData });\n let parameter_list = [];\n dataSources?.map((i) => {\n i.data.map((d) => {\n if (d.forecast_data_source_id === e.id) {\n d.forecast_data_source.forecast_data_source_with_parameter.map((i) => {\n i.parameter.map((data) => {\n parameter_list.push(data);\n });\n });\n handleSelectedDataSource(parameter_list, e.id);\n }\n });\n });\n }\n dispatch(change('FilterForm', 'parameter_type', ''));\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\n dispatch(change('FilterForm', 'forecast_year_month', ''));\n dispatch(change('FilterForm', 'start_date', ''));\n dispatch(change('FilterForm', 'end_date', ''));\n dispatch(change('FilterForm', 'Link', ''));\n dispatch(change('FilterForm', 'Description', ''));\n dispatch(change('FilterForm', 'Upload', ''));\n setFile(null);\n setIsImgaeUploaded(false);\n props.setFile(null);\n };\n const handleforecastYearMonth = (e) => {\n const val = e.target.value;\n if (!val) return false;\n\n if (parseInt(val.split('-')[0]) > new Date().getFullYear()) {\n dispatch(change('FilterForm', 'forecast_year_month', null));\n const ele = document.getElementsByName('forecast_year_month');\n if (ele[0]) ele[0].value = null;\n return false;\n }\n formData.forecast_lead_time = null;\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\n formData.forecast_year_month = val;\n setFormData({ ...formData });\n forecastYearMonthHandler(val);\n };\n\n const handleForecastLeadTimeChange = (e) => {\n formData.forecast_lead_time = e;\n setFormData({ ...formData });\n forecastLeadTimeHandler(e);\n };\n const handleParameterChange = (e) => {\n //once parameter changes then we need to reset all the values that are filled on the basis of previously selected parameter\n\n formData.parameter = e.id;\n setFormData({ ...formData });\n handleParameter(e.id);\n };\n\n const handleStartDate = (e) => {\n formData.start_date = e.target.value;\n setFormData({ ...formData });\n startDateHandler(moment(e.target.value).format(DISPLAY_DATE_FORMAT));\n };\n\n const handleEndDate = (e) => {\n formData.end_date = e.target.value;\n setFormData({ ...formData });\n endDateHandler(moment(e.target.value).format(DISPLAY_DATE_FORMAT));\n };\n\n const handleLink = (e) => {\n if (e.target.value === '') {\n formData.source_link = '';\n } else {\n formData.source_link = e.target.value;\n }\n setFormData({ ...formData });\n linkHandler(e.target.value);\n };\n\n const handleDescription = (e) => {\n if (e.target.value === '') {\n formData.description = '';\n } else {\n formData.description = e.target.value;\n }\n setFormData({ ...formData });\n descriptionHandler(e.target.value);\n };\n\n const handleFileChange = (e) => {\n if (e.target.value) {\n fileHandler(URL.createObjectURL(e?.target?.files[0]), e);\n setFile(e?.target?.files[0]);\n setIsImgaeUploaded(true);\n }\n };\n\n const onFormSubmit = (e) => {\n if (isIRISelected) {\n if (!formData.region) {\n form.append('region', '');\n } else {\n form.append('region', formData.region);\n }\n if (!formData.country) {\n form.append('country', '');\n } else {\n form.append('country', formData.country);\n }\n form.append('forecast_time_year', formData?.forecast_year_month?.split('-')[0]);\n form.append('forecast_time_month', formData?.forecast_year_month?.split('-')[1]);\n form.append(\n 'forecast_lead_time',\n parseInt(\n formData?.forecast_lead_time?.label?.substr(\n formData?.forecast_lead_time?.label?.indexOf('(') + 1,\n formData?.forecast_lead_time?.label?.indexOf(')') -\n formData?.forecast_lead_time?.label?.indexOf('(') -\n 1,\n ),\n ),\n );\n form.append('parameter', formData?.parameter);\n form.append('upload_image', file);\n form.append('forecast_data_source', formData.forecast_data_source_id);\n if (!formData.source_link) {\n form.append('source_link', '');\n } else {\n form.append('source_link', formData.source_link);\n }\n if (!formData.description) {\n form.append('description', '');\n } else {\n form.append('description', formData.description);\n }\n } else {\n form.append('upload_image', file);\n if (!formData.region) {\n form.append('region', '');\n } else {\n form.append('region', formData.region);\n }\n if (!formData.country) {\n form.append('country', '');\n } else {\n form.append('country', formData.country);\n }\n form.append('forecast_data_source', formData.forecast_data_source_id);\n form.append('parameter', formData.parameter);\n form.append('start_date', formData.start_date);\n form.append('end_date', formData.end_date);\n if (!formData.source_link) {\n form.append('source_link', '');\n } else {\n form.append('source_link', formData.source_link);\n }\n if (!formData.description) {\n form.append('description', '');\n } else {\n form.append('description', formData.description);\n }\n }\n if (isPreventAddDispatch) {\n setStaticResourcesList([]);\n dispatch(staticResourceSuccess({}));\n dispatch(staticResourceAddSuccess({}));\n dispatch(staticResourceAddRequest(form));\n }\n setIsPreventAddDispatch(true);\n };\n\n const updateStaticResource = () => {\n if (isIRISelected) {\n form.append('forecast_time_year', formData?.forecast_year_month?.split('-')[0]);\n form.append('forecast_time_month', formData?.forecast_year_month?.split('-')[1]);\n if (formData?.forecast_lead_time) {\n form.append(\n 'forecast_lead_time',\n formData?.forecast_lead_time?.id - parseInt(formData?.forecast_year_month?.split('-')[1]),\n );\n }\n\n if (formData?.parameter) {\n form.append('parameter', formData.parameter);\n }\n form.append('static_resource_id', formData.static_resource_id);\n if (formData?.forecast_data_source_id) {\n form.append('forecast_data_source', formData.forecast_data_source_id);\n } else {\n form.append('forecast_data_source', formData?.datasource_type?.id);\n }\n if (!formData.source_link) {\n form.append('source_link', '');\n } else {\n form.append('source_link', formData.source_link);\n }\n if (!formData.description) {\n form.append('description', '');\n } else {\n form.append('description', formData.description);\n }\n } else {\n if (file) {\n form.append('upload_image', file);\n }\n\n if (!formData.region?.id) {\n form.append('region', '');\n } else {\n form.append('region', formData.region.id);\n }\n if (!formData.country) {\n form.append('country', '');\n } else {\n form.append('country', getCountryValue(formData.country));\n }\n if (formData.forecast_data_source_id) {\n form.append('forecast_data_source', formData.forecast_data_source_id);\n } else {\n form.append('forecast_data_source', formData?.datasource_type?.id);\n }\n if (formData?.parameter) {\n form.append('parameter', formData.parameter);\n } else {\n form.append('parameter', props?.initialValues?.parameter_type?.id);\n }\n form.append('start_date', formData.start_date);\n form.append('end_date', formData.end_date);\n form.append('static_resource_id', formData.static_resource_id);\n if (!formData.source_link) {\n form.append('source_link', '');\n } else {\n form.append('source_link', formData.source_link);\n }\n if (!formData.description) {\n form.append('description', '');\n } else {\n form.append('description', formData.description);\n }\n }\n if (isImgaeUploaded) {\n form.append('image', file);\n }\n setIsPreventAddDispatch(false);\n setStaticResourcesList([]);\n dispatch(staticResourceSuccess({}));\n dispatch(updateStaticResourceSuccess({}));\n dispatch(updateStaticResourceRequest(form));\n };\n\n const getCountryValue = (value) => {\n if (typeof value === 'string') {\n return value;\n }\n return !value?.id ? '' : value?.id;\n //typeof formData.country === \"string\" ? formData.country : (!formData.country?.id ? \"\" :formData.country?.id )\n };\n const getCurrentYearMonth = () => {\n let dateObj = new Date();\n let month =\n (dateObj.getMonth() + 1) % 10 !== dateObj.getMonth() + 1\n ? dateObj.getMonth() + 1\n : `0${dateObj.getMonth() + 1}`;\n return dateObj.getUTCFullYear() + '-' + month;\n };\n return (\n <>\n \n
\n {t('FILTER.FILTER')}
\n\n {\n handleClose();\n closeRightBar();\n }}\n />\n
\n setIsDataSourceOpen(!isDataSourceOpen)}>\n
\n \n \n
\n {t('FILTER.DATA_SOURCE')}
\n\n
\n \n {!regionFieldDisabled ? (\n handleRegionChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(regionList)}\n >\n ) : (\n ''\n )}\n {!countryFieldDisabled ? (\n handleCountryChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(countryList)}\n >\n ) : (\n ''\n )}\n handleCategoryChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(dataSources, 'forecast_category')}\n id=\"forecast_category\"\n >\n
\n \n \n \n \n handleDataSourceChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(dataSourceList, 'datasource_type')}\n id=\"datasource_type\"\n >\n {!_.isEmpty(parameterList) && (\n handleParameterChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(parameterList, 'parameter_type')}\n id=\"parameter_type\"\n >\n )}\n
\n {isIRISelected ? (\n <>\n \n handleforecastYearMonth(e)}\n isMulti={false}\n >\n handleForecastLeadTimeChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(\n forecastLeadTimeList,\n 'forecast_lead_time',\n )}\n id=\"forecast_category\"\n >\n
\n \n ) : (\n \n \n handleStartDate(e)}\n isMulti={false}\n >\n handleEndDate(e)}\n required={true}\n isMulti={false}\n >\n
\n )}\n \n \n handleLink(e)}\n required={false}\n isMulti={false}\n placeholder=\"Add a Link\"\n >\n handleDescription(e)}\n required={false}\n isMulti={false}\n placeholder=\"Add Description\"\n >\n handleFileChange(e)}\n required={true}\n isMulti={false}\n className=\"filter-select-placeholder\"\n placeholder=\"Upload image\"\n >\n
\n \n {!editClicked ? (\n \n {t('STATIC_RESOURCE_ADMIN.PUBLISH')}\n \n ) : (\n \n {t('STATIC_RESOURCE_ADMIN.UPDATE')}\n \n )}\n
\n \n {toggleRightBar && (\n
\n \n {confirmationModalOpen && (\n \n \n {!isHideBar && (\n
\n \n {!isHideBar ? (\n
\n\n \n \n \n \n
\n \n \n \n
\n \n \n
\n
\n \n \n \n \n {t('FILTER.HIDE_BAR')}\n \n setHideBar(!isHideBar)}\n size={25}\n />\n \n \n
\n \n )}\n \n
\n \n ) : (\n ''\n )}\n \n \n {t('FILTER.EXPAND_BAR')}\n \n setHideBar(!isHideBar)}\n size={25}\n />\n \n \n
\n )}\n \n \n handleManageCropsBackButton()}\n />\n \n \n {\n setToggleRightBar(!toggleRightBar);\n }}\n className=\"filter-icon-text col-lg-6\"\n >\n 
\n
\n\n {t('FILTER.MANAGE_DATA')}
\n \n {activeTab === '2' ? (\n{t('FILTER.FILTER')}
\n \n ) : (\n ''\n )}\n\n \n \n
\n
\n \n
\n {file ? (\n (file.substr(file.lastIndexOf('.') + 1) !== \"tiff\") ?\n (imageExtension !== \"tiff\") ?\n 
\n :\n 
\n :\n \n ) : (\n
\n \n No data available
\n )}\n\n Loading ... }\n >\n {staticResourceList?.map((i,index) => {\n return (\n \n {i?.upload_image?.substr(i?.upload_image.lastIndexOf('.') + 1) !== \"tiff\" ?\n (\n \n );\n })}\n \n
\n \n \n {isStaticResourceRequesting &&
\n {noRecordsFound && (\n \n
\n )}\n No Records Found.
\n\n
\n \n {i.description}\n
\n\n {t('FILTER.SOURCE')}: {i.forecast_data_source_name} |{' '}\n {t('FILTER.PARAMETER')}: {i.parameter_name}\n
\n {\n (i?.forecast_data_source_id === DATA_SOURCES.IRI.id) ?\n <>\n\n {t('FILTER.FORECAST_DATE')} : {' '}\n {moment(i?.forecast_time_year+'-'+i?.forecast_time_month).format('YYYY-MM')}\n
\n\n {t('FILTER.FORECAST_LEAD_TIME')} : {' '}\n {handlePreForecastLeadTime(i?.forecast_lead_time,i?.forecast_time_month)}\n
\n \n :\n\n {t('FILTER.DATE_RANGE')} :{' '}\n {moment(i.start_date).format(DISPLAY_DATE_FORMAT)} |{' '}\n {moment(i.end_date).format(DISPLAY_DATE_FORMAT)}\n
\n }\n {i.source_link ? (\n\n {' '}\n {t('FILTER.LINK')}:{' '}\n \n {i.source_link.length > 45\n ? i.source_link.substring(0, 45) + '...'\n : i.source_link}\n \n
\n ) : (\n ''\n )}\n\n {i.forecast_data_source_name !== 'ERPAS (Static)' && (\n\n handleEditDataSource(i)}\n disabled={\n isSuperAdmin() ||\n updatedPermissions?.includes('change_static_resource')\n ? false\n : true\n }\n >\n {t('FILTER.EDIT')}\n \n handleDeleteDataSource(i.id)}\n disabled={\n isSuperAdmin() ||\n updatedPermissions?.includes('delete_static_resource')\n ? false\n : true\n }\n >\n {t('FILTER.DELETE')}\n \n
\n )}\n \n
\n \n );\n};\n\nconst RenderContactus = () => {\n return (\n \n );\n};\n\nconst RenderCopyRightText = () => {\n return (\n <>\n {t('FOOTER.FOLLOW')}
\n \n\n © {t('FOOTER.COPY_RIGHT_TEXT')}\n
\n \n );\n};\n\nconst CommonRenderCopyRightText = () => {\n return (\n <>\n\n © {t('FOOTER.COPY_RIGHT_TEXT')}\n
\n \n );\n};\n\nconst PublicFooter = () => {\n return (\n \n );\n};\n\nconst AfterLoginFooter = () => {\n return (\n \n );\n};\n\nconst Footer = ({ publicFooter }) => {\n return <>{publicFooter ?\n
\n \n
\n
\n
\n {t('ABOUT_US.TERMS_AND_CONDITIONS')}
\n{t('ABOUT_US.TERMS_AND_CONDITIONS_ONE')}
\n{t('ABOUT_US.TERMS_AND_CONDITIONS_TWO')}
\n\n
{t('ABOUT_US.SADMS_INFO_COLLECTION')}
\n\n
{t('ABOUT_US.PERSONAL_INFO')}
\n{t('ABOUT_US.PERSONAL_INFO_DESC')}
\n{t('ABOUT_US.USE_OF_COOKIES')}
\n{t('ABOUT_US.USE_OF_COOKIES_DESC_ONE')}
\n{t('ABOUT_US.USE_OF_COOKIES_DESC_TWO')}
\n{t('ABOUT_US.IP_ADDRESSES')}
\n{t('ABOUT_US.IP_ADDRESSES_DESC')}
\n{t('ABOUT_US.THIRD_PARTY_SITES')}
\n{t('ABOUT_US.THIRD_PARTY_SITES_DESC')}
\n{t('ABOUT_US.HOW_TO_CONTACT_US')}
\n{t('ABOUT_US.HOW_TO_CONTACT_US_DESC')}
\n{t('ABOUT_US.CHANGES')}
\n{t('ABOUT_US.CHANGES_DESC')}
\n\n \n
\n \n );\n};\nexport default TermsConditions;\n","import React, { useEffect, useState } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from 'react-multi-lang';\nimport Button from 'reactstrap-button-loader';\nimport { Field, reduxForm, reset } from 'redux-form';\nimport { Card, Container, Col, FormGroup, Label, Row } from 'reactstrap';\nimport { renderTextField } from '../../Components/common/renderInputField';\nimport { isSuperAdmin, isStaffUser,isLogedIn } from '../../Components/common/utils';\nimport {\n forgotPassword,\n resetPassword,\n forgotPasswordSuccess,\n resetPasswordSuccess,\n changePassword,\n changePasswordSuccess,\n resetLinkVerificationRequest,\n resetLinkVerificationSuccess,\n} from '../../redux/login/loginActions';\nimport { showSuccess } from '../../Components/Notifications';\nimport SuccessModal from './Success';\nimport { isValidEmail } from '../../Components/common/utils';\n\nconst validate = values => {\n const errors = {};\n if (values.email && !values.email) {\n errors.email = 'This field is required.';\n } else if (values.email && !isValidEmail(values.email.trim())) {\n errors.email = 'Email is not valid.';\n } else if (!values.new_password) {\n errors.new_password = 'This field is required.';\n } else if (!values.confirm_password) {\n errors.confirm_password = 'This field is required.';\n } else if (values.old_password && !values.old_password) {\n errors.old_password = 'This field is required.';\n } else if (values.new_password && values.new_password.length < 8) {\n errors.new_password = 'Password must be atleast 8 characters.';\n } else if (values.confirm_password) {\n if (values.confirm_password.length < 8) {\n errors.confirm_password = 'Password must be atleast 8 characters.';\n } else if (values.confirm_password !== values.new_password) {\n errors.confirm_password = 'New Password and Confirm Password must be same.';\n }\n }\n return errors;\n};\n\nconst ResetPassword = props => {\n const { handleSubmit, pristine, submitting, invalid } = props;\n const nextProps = useSelector(state => ({\n isForgotPasswordRequesting: state.Login.isForgotPasswordRequesting,\n isResetPasswordRequesting: state.Login.isResetPasswordRequesting,\n isChangePasswordRequesting: state.Login.isChangePasswordRequesting,\n forgotPasswordData: state.Login.forgotPasswordData,\n resetPasswordData: state.Login.resetPasswordData,\n changePasswordData: state.Login.changePasswordData,\n resetLinkVerificationData: state.Login.resetLinkVerificationData || null,\n resetLinkVerificationError: state.Login.resetLinkVerificationError,\n resetLinkVerificationNetworkError: state.Login.resetLinkVerificationNetworkError,\n changePasswordError: state.Login.changePasswordError,\n }));\n\n let req_data = {\n email: '',\n };\n const [formData, setFormData] = useState(req_data);\n const [successModal, setSuccessModal] = useState(false);\n const [expiredLink, setExpiredLink] = useState(true);\n const [modalMessage, setModalMessage] = useState();\n const [uniqueCode, setUniqueCode] = useState();\n const [passwordTypes, setPasswordTypes] = useState({\n old_password: true,\n new_password: true,\n confirm_password: true,\n });\n\n let history = useHistory();\n let hasChangePassword = window.location.href.includes('change-password');\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (hasChangePassword && !(isSuperAdmin() || isStaffUser() || isLogedIn())) {\n history.push('/home');\n }\n let params = new URLSearchParams(window.location.search);\n let keyValue;\n keyValue = params.get('key');\n if (window.location.href.includes('key')) {\n setUniqueCode(keyValue);\n dispatch(resetLinkVerificationRequest({ id: keyValue }));\n }\n }, []);\n\n\n useEffect(() => {\n if (nextProps.resetLinkVerificationData) {\n const {\n data: { result },\n } = nextProps.resetLinkVerificationData;\n if (result) {\n setExpiredLink(false);\n }\n }\n }, [nextProps.resetLinkVerificationData]);\n\n useEffect(() => {\n if (nextProps.resetLinkVerificationError) {\n const {\n data: { response },\n } = nextProps.resetLinkVerificationError;\n if (response?.data?.message) {\n setExpiredLink(true);\n }\n }\n }, [nextProps.resetLinkVerificationError]);\n\n useEffect(() => {\n if (nextProps.resetPasswordData) {\n const {\n data: { result },\n } = nextProps.resetPasswordData;\n if (result) {\n showSuccess(result);\n history.push('/login');\n }\n }\n }, [nextProps.resetPasswordData]);\n\n useEffect(() => {\n if (nextProps.forgotPasswordData) {\n const {\n data: { result },\n } = nextProps.forgotPasswordData;\n if (result) {\n setSuccessModal(true);\n setModalMessage(result);\n }\n }\n }, [nextProps.forgotPasswordData]);\n\n useEffect(() => {\n if (nextProps.changePasswordData) {\n const {\n data: { result },\n } = nextProps.changePasswordData;\n if (result) {\n showSuccess(result);\n history.push('/login');\n }\n }\n }, [nextProps.changePasswordData]);\n\n useEffect(() => {\n return () => {\n dispatch(forgotPasswordSuccess({}));\n dispatch(resetPasswordSuccess({}));\n dispatch(changePasswordSuccess({}));\n dispatch(resetLinkVerificationSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (nextProps.changePasswordError) {\n dispatch(reset('reset-password-form'));\n }\n }, [nextProps.changePasswordError]);\n\n const onFormSubmit = () => {\n if (uniqueCode) {\n delete formData.email;\n formData.unique_code = uniqueCode;\n dispatch(resetPassword(formData));\n } else if (hasChangePassword) {\n delete formData.email;\n dispatch(changePassword(formData));\n } else {\n dispatch(forgotPassword(formData));\n }\n };\n\n const handleEmailChange = e => {\n formData.email = e.target.value;\n setFormData({ ...formData });\n };\n\n const handleOkayButtonClick = () => {\n setSuccessModal(false);\n history.push('/home');\n };\n\n const handleNewPasswordChange = e => {\n formData.new_password = e.target.value;\n setFormData({ ...formData });\n };\n\n const showOldPassword = () => {\n passwordTypes.old_password = !passwordTypes.old_password;\n setPasswordTypes({ ...passwordTypes });\n };\n const showNewPassword = () => {\n passwordTypes.new_password = !passwordTypes.new_password;\n setPasswordTypes({ ...passwordTypes });\n };\n\n const showConfirmPassword = () => {\n passwordTypes.confirm_password = !passwordTypes.confirm_password;\n setPasswordTypes({ ...passwordTypes });\n };\n\n const handleConfirmPasswordChange = e => {\n formData.confirm_password = e.target.value;\n setFormData({ ...formData });\n };\n\n const handleOldPasswordChange = e => {\n formData.old_password = e.target.value;\n setFormData({ ...formData });\n };\n\n const handleResetDescription = () => {\n if (!uniqueCode && !hasChangePassword) {\n return {t('LOGIN.RESET_DESC_ONE')}
;\n } else {\n if (!expiredLink) {\n return{t('REGISTER.PASSWORD_ERROR_MSG')}
;\n }\n }\n };\n\n const handleInputFields = () => {\n if (!uniqueCode && !hasChangePassword) {\n return (\n <>\n\n \n \n handleNewPasswordChange(e)}\n >\n\n \n {passwordTypes.new_password ? t('LOGIN.SHOW') : t('LOGIN.HIDE')}\n \n \n\n \n \n handleConfirmPasswordChange(e)}\n >\n \n {passwordTypes.confirm_password ? t('LOGIN.SHOW') : t('LOGIN.HIDE')}\n \n \n
\n \n );\n }\n };\n\n\n const handleSendResetButtons = () => {\n if (!uniqueCode && !hasChangePassword) {\n return (<>\n \n
\n \n );\n } else {\n return (\n \n {t('LOGIN.BACK_TO')}{' '}\n
\n \n \n
\n \n
\n \n );\n};\nexport default reduxForm({\n form: 'reset-password-form',\n validate,\n})(ResetPassword);\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARJSURBVHgB7ZhNcuJWEIC7JTFjM3YVOUGYRapsb4xvYJ/AuLDXg08Qe5dMSAIV8rMzOYHJevCEnMDkBFYWMexCbkDVGOwMkjrdDHJJQjKSkGoWo6+KP/F+ut/r1z8PICMjIyPjUwZhRbaOa/sIeIhklQGx+OEp6YCKbk2njUH3lyGkSGwFiuWzwgtt83sCOoMnJ8DW2HjXGHZbI0iBWAqI8Hlt45q/lsL1IH1ijA/SUEKBGMjKQ2jhBSzN+yROZAW2yl8VvWZDSEML4GBi3H1222kiERwR0dDVhvvIeYGEiayAouZcKynC30/He4NOs2ebSP+q2X1u5va8SiBBGRImsgKI5DYdyzr3s229Wx8R4qmrr4KHkDCRFSCP7fevfu4GtV0zNN3dmYqQMLEOsRPxSEH/yS5AykRXwGPXa9pGoDfartQ8Nk86JEyMHcA/XAMgXvrtgjzjIHbh7gofXwELwW3zbNf53ObNduXr2WqL4OIu8+rmDbudoqvv1GxAwsSKxDuVWot7fhmlD8eGX9m9nkHCxDrEz0ytzh+hzYGDmH5v3tUhBWInc6VyvfBeNerLdkJWXoT3ixUS1RVN+8fV3lor9t/W/oWQaBCTuYs8YyFaqKp1RNwFO0awpyI+7MTnZXDV7AWNgaq26MFwvMfv6StgM8/3qxADRL+EUN3nty6EZOWCJiw7J99egmn+ObEmM+HYS11wWlLmyL4YCBHbUgw9wMMon8uXkdTdvzs/nPuNG0uBL05el54R7hMqu2y0JT6lBTahgi2MZRgvnZXYzsnrKpBy6Zh05Cu4W7DZmXlsZ1mnt29/avu0C4ddOipA1acm5/96/U7z4LGfHFQ1d+2NCTEYcbr+0usMlrpREXz7uHbNDa+Rc/plK8cquCI1amo5SPgwdYSDwrr2oup9GHiIedtLRMoFb9E+RIC9jys+PDdy7almHJJnHLuOcK6o1BHsnnv/qdMbfLwgsMeF3r0xbnvn8zWhrcp3rxS02hCM2LA+W23CIZma/gCj0VM173blmzYL9epRIDKPglJx2XXZcYeU3ds3zSO/tgs7IDarotUin8ayCvxqPBh3etQCnYUfOn8vqyPea4Zz4r+C2i4oICUjh36XnduCS9kICSFJX9AiSJDcOa5BGBYUkJLRufqszHm/82MLVgVhFxwDz+uInl/ThTqC8HMIHNYDa+6yHvEOsAKy0uvaxu8LzoBNajJ9t+fdhdmdk08q/uEQ3x1FdqOrsq5tVn09WYQ6QpAx/Nzo0h2IijeQzbJWzZCMswArIG6XpuaB96418R2QlRJPZv+WA2mh5cxjRvPXMlxtyCTfi+JUTEjJuS+/Bm84h+G6ANA6lXSAcyW59PotoPuITagt7SRCs/KnktwNfPIgIXETspEUYZnbDShNG+w46hCSBTe6qteJgpwXnsylAEfoSDcXqXuhpyDT0BefJX93lJGRkZEe/wOUFwQwBgx76wAAAABJRU5ErkJggg==\"","export default __webpack_public_path__ + \"static/media/landing-page-icon.0ca2fddc.svg\";","export const CONTINGENCY_PLAN_RISK_CONST = {\n CONTINGENCY_PLAN_RISK_REQUEST: 'CONTINGENCY_PLAN_RISK_REQUEST',\n CONTINGENCY_PLAN_RISK_SUCCESS: 'CONTINGENCY_PLAN_RISK_SUCCESS',\n CONTINGENCY_PLAN_RISK_FAILED: 'CONTINGENCY_PLAN_RISK_FAILED',\n};\n\nexport const CONTINGENCY_PLAN_MONSOON_CONST = {\n CONTINGENCY_PLAN_MONSOON_REQUEST: 'CONTINGENCY_PLAN_MONSOON_REQUEST',\n CONTINGENCY_PLAN_MONSOON_SUCCESS: 'CONTINGENCY_PLAN_MONSOON_SUCCESS',\n CONTINGENCY_PLAN_MONSOON_FAILED: 'CONTINGENCY_PLAN_MONSOON_FAILED',\n};\n\nexport const STAGE_CONST = {\n STAGE_REQUEST: 'STAGE_REQUEST',\n STAGE_SUCCESS: 'STAGE_SUCCESS',\n STAGE_FAILED: 'STAGE_FAILED',\n};\n\nexport const SYSTEM_CONST = {\n SYSTEM_REQUEST: 'SYSTEM_REQUEST',\n SYSTEM_SUCCESS: 'SYSTEM_SUCCESS',\n SYSTEM_FAILED: 'SYSTEM_FAILED',\n};\n\nexport const DROUGHT_INDICES_CONST = {\n DROUGHT_INDICES_REQUEST: 'DROUGHT_INDICES_REQUEST',\n DROUGHT_INDICES_SUCCESS: 'DROUGHT_INDICES_SUCCESS',\n DROUGHT_INDICES_FAILED: 'DROUGHT_INDICES_FAILED',\n};\n\nexport const STRATEGY_CONST = {\n STRATEGY_REQUEST: 'STRATEGY_REQUEST',\n STRATEGY_SUCCESS: 'STRATEGY_SUCCESS',\n STRATEGY_FAILED: 'STRATEGY_FAILED',\n};\n\nexport const DROUGHT_STAGES_TIME_PERIOD_CONST = {\n DROUGHT_STAGES_TIME_PERIOD_REQUEST: 'DROUGHT_STAGES_TIME_PERIOD_REQUEST',\n DROUGHT_STAGES_TIME_PERIOD_SUCCESS: 'DROUGHT_STAGES_TIME_PERIOD_SUCCESS',\n DROUGHT_STAGES_TIME_PERIOD_FAILED: 'DROUGHT_STAGES_TIME_PERIOD_FAILED',\n};\n\nexport const CATEGORY_CONST = {\n CATEGORY_REQUEST: 'CATEGORY_REQUEST',\n CATEGORY_SUCCESS: 'CATEGORY_SUCCESS',\n CATEGORY_FAILED: 'CATEGORY_FAILED',\n};\n\nexport const SUB_CATEGORY_CONST = {\n SUB_CATEGORY_REQUEST: 'SUB_CATEGORY_REQUEST',\n SUB_CATEGORY_SUCCESS: 'SUB_CATEGORY_SUCCESS',\n SUB_CATEGORY_FAILED: 'SUB_CATEGORY_FAILED',\n};\n\nexport const DISTRICT_PROFILE_CONST = {\n DISTRICT_PROFILE_REQUEST: 'DISTRICT_PROFILE_REQUEST',\n DISTRICT_PROFILE_SUCCESS: 'DISTRICT_PROFILE_SUCCESS',\n DISTRICT_PROFILE_FAILED: 'DISTRICT_PROFILE_FAILED',\n};\n\nexport const CONTINGENCY_MEASURES_CROP_TYPE_CONST = {\n CONTINGENCY_MEASURES_CROP_TYPE_REQUEST: 'CONTINGENCY_MEASURES_CROP_TYPE_REQUEST',\n CONTINGENCY_MEASURES_CROP_TYPE_SUCCESS: 'CONTINGENCY_MEASURES_CROP_TYPE_SUCCESS',\n CONTINGENCY_MEASURES_CROP_TYPE_FAILED: 'CONTINGENCY_MEASURES_CROP_TYPE_FAILED',\n};\n\nexport const CONTINGENCY_MEASURES_DATA_CONST = {\n CONTINGENCY_MEASURES_DATA_REQUEST: 'CONTINGENCY_MEASURES_DATA_REQUEST',\n CONTINGENCY_MEASURES_DATA_SUCCESS: 'CONTINGENCY_MEASURES_DATA_SUCCESS',\n CONTINGENCY_MEASURES_DATA_FAILED: 'CONTINGENCY_MEASURES_DATA_FAILED',\n};\n\n// EDIT DATA \nexport const CONTINGENCY_MEASURES_EDIT_DATA_CONST = {\n CONTINGENCY_MEASURES_EDIT_DATA_REQUEST: 'CONTINGENCY_MEASURES_EDIT_DATA_REQUEST',\n CONTINGENCY_MEASURES_EDIT_DATA_SUCCESS: 'CONTINGENCY_MEASURES_EDIT_DATA_SUCCESS',\n CONTINGENCY_MEASURES_EDIT_DATA_FAILED: 'CONTINGENCY_MEASURES_EDIT_DATA_FAILED',\n};\n\nexport const CONTINGENCY_DISTRICT_GRAPH_CONST = {\n CONTINGENCY_DISTRICT_GRAPH_REQUEST : 'CONTINGENCY_DISTRICT_GRAPH_REQUEST',\n CONTINGENCY_DISTRICT_GRAPH_SUCCESS: 'CONTINGENCY_DISTRICT_GRAPH_SUCCESS',\n CONTINGENCY_DISTRICT_GRAPH_FAILED : 'CONTINGENCY_DISTRICT_GRAPH_FAILED',\n}\n\n\nexport const CONTINGENCY_PLAN_EDIT_DISTRICT_PROFILE = {\n CONTINGENCY_PLAN_DP_EDIT_REQUEST : 'CONTINGENCY_PLAN_DP_EDIT_REQUEST',\n CONTINGENCY_PLAN_DP_EDIT_SUCCESS: 'CONTINGENCY_PLAN_DP_EDIT_SUCCESS',\n CONTINGENCY_PLAN_DP_EDIT_FAILED : 'CONTINGENCY_PLAN_DP_EDIT_FAILED',\n }\n\n\n export const CONTINGENCY_PLAN_EDIT_LOGS = {\n CONTINGENCY_PLAN_LOGS_REQUEST : 'CONTINGENCY_PLAN_LOGS_REQUEST',\n CONTINGENCY_PLAN_LOGS_SUCCESS: 'CONTINGENCY_PLAN_LOGS_SUCCESS',\n CONTINGENCY_PLAN_LOGS_FAILED : 'CONTINGENCY_PLAN_LOGS_FAILED',\n }","import {\n CONTINGENCY_PLAN_RISK_CONST,\n CONTINGENCY_MEASURES_DATA_CONST,\n CONTINGENCY_PLAN_MONSOON_CONST,\n CONTINGENCY_MEASURES_CROP_TYPE_CONST,\n SUB_CATEGORY_CONST,\n DISTRICT_PROFILE_CONST,\n STAGE_CONST,\n CATEGORY_CONST,\n SYSTEM_CONST,\n DROUGHT_INDICES_CONST,\n STRATEGY_CONST,\n DROUGHT_STAGES_TIME_PERIOD_CONST,\n CONTINGENCY_DISTRICT_GRAPH_CONST,\n CONTINGENCY_PLAN_EDIT_DISTRICT_PROFILE,\n CONTINGENCY_MEASURES_EDIT_DATA_CONST,\n CONTINGENCY_PLAN_EDIT_LOGS\n} from './contingencyPlanConsts';\n\nexport const contingencyPlanRiskRequest = (data) => ({\n type: CONTINGENCY_PLAN_RISK_CONST.CONTINGENCY_PLAN_RISK_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanRiskSuccess = (response) => ({\n type: CONTINGENCY_PLAN_RISK_CONST.CONTINGENCY_PLAN_RISK_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanRiskFailed = (error) => ({\n type: CONTINGENCY_PLAN_RISK_CONST.CONTINGENCY_PLAN_RISK_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanMonsoonRequest = (data) => ({\n type: CONTINGENCY_PLAN_MONSOON_CONST.CONTINGENCY_PLAN_MONSOON_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanMonsoonSuccess = (response) => ({\n type: CONTINGENCY_PLAN_MONSOON_CONST.CONTINGENCY_PLAN_MONSOON_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanMonsoonFailed = (error) => ({\n type: CONTINGENCY_PLAN_MONSOON_CONST.CONTINGENCY_PLAN_MONSOON_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanStageRequest = (data) => ({\n type: STAGE_CONST.STAGE_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanStageSuccess = (response) => ({\n type: STAGE_CONST.STAGE_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanStageFailed = (error) => ({\n type: STAGE_CONST.STAGE_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanSystemRequest = (data) => ({\n type: SYSTEM_CONST.SYSTEM_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanSystemSuccess = (response) => ({\n type: SYSTEM_CONST.SYSTEM_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanSystemFailed = (error) => ({\n type: SYSTEM_CONST.SYSTEM_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanDroughtIndicesRequest = (data) => ({\n type: DROUGHT_INDICES_CONST.DROUGHT_INDICES_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanDroughtIndicesSuccess = (response) => ({\n type: DROUGHT_INDICES_CONST.DROUGHT_INDICES_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanDroughtIndicesFailed = (error) => ({\n type: DROUGHT_INDICES_CONST.DROUGHT_INDICES_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanStrategyRequest = (data) => ({\n type: STRATEGY_CONST.STRATEGY_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanStrategySuccess = (response) => ({\n type: STRATEGY_CONST.STRATEGY_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanStrategyFailed = (error) => ({\n type: STRATEGY_CONST.STRATEGY_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanDroughtStageTimePeriodRequest = (data) => ({\n type: DROUGHT_STAGES_TIME_PERIOD_CONST.DROUGHT_STAGES_TIME_PERIOD_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanDroughtStageTimePeriodSuccess = (response) => ({\n type: DROUGHT_STAGES_TIME_PERIOD_CONST.DROUGHT_STAGES_TIME_PERIOD_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanDroughtStageTimePeriodFailed = (error) => ({\n type: DROUGHT_STAGES_TIME_PERIOD_CONST.DROUGHT_STAGES_TIME_PERIOD_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanCateoryRequest = (data) => ({\n type: CATEGORY_CONST.CATEGORY_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanCategorySuccess = (response) => ({\n type: CATEGORY_CONST.CATEGORY_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanCategoryFailed = (error) => ({\n type: CATEGORY_CONST.CATEGORY_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanSubCateoryRequest = (data) => ({\n type: SUB_CATEGORY_CONST.SUB_CATEGORY_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanSubCategorySuccess = (response) => ({\n type: SUB_CATEGORY_CONST.SUB_CATEGORY_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanSubCategoryFailed = (error) => ({\n type: SUB_CATEGORY_CONST.SUB_CATEGORY_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanDistrictProfileRequest = (data) => ({\n type: DISTRICT_PROFILE_CONST.DISTRICT_PROFILE_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanDistrictProfileSuccess = (response) => ({\n type: DISTRICT_PROFILE_CONST.DISTRICT_PROFILE_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanDistrictProfileFailed = (error) => ({\n type: DISTRICT_PROFILE_CONST.DISTRICT_PROFILE_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanCropTypeRequest = (data) => ({\n type: CONTINGENCY_MEASURES_CROP_TYPE_CONST.CONTINGENCY_MEASURES_CROP_TYPE_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanCropTypeSuccess = (response) => ({\n type: CONTINGENCY_MEASURES_CROP_TYPE_CONST.CONTINGENCY_MEASURES_CROP_TYPE_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanCropTypeFailed = (error) => ({\n type: CONTINGENCY_MEASURES_CROP_TYPE_CONST.CONTINGENCY_MEASURES_CROP_TYPE_FAILED,\n payload: error,\n});\n\nexport const contingencyPlanMeasuresDataRequest = (data) => ({\n type: CONTINGENCY_MEASURES_DATA_CONST.CONTINGENCY_MEASURES_DATA_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanMeasuresDataSuccess = (response) => ({\n type: CONTINGENCY_MEASURES_DATA_CONST.CONTINGENCY_MEASURES_DATA_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanMeasuresDataFailed = (error) => ({\n type: CONTINGENCY_MEASURES_DATA_CONST.CONTINGENCY_MEASURES_DATA_FAILED,\n payload: error,\n});\n\n// EDIT MESURES DATA \nexport const contingencyPlanMeasuresEditDataRequest = (data) => ({\n type: CONTINGENCY_MEASURES_EDIT_DATA_CONST.CONTINGENCY_MEASURES_EDIT_DATA_REQUEST,\n payload: data,\n});\n\nexport const contingencyPlanMeasuresEditDataSuccess = (response) => ({\n type: CONTINGENCY_MEASURES_EDIT_DATA_CONST.CONTINGENCY_MEASURES_EDIT_DATA_SUCCESS,\n payload: response,\n});\n\nexport const contingencyPlanMeasuresEditDataFailed = (error) => ({\n type: CONTINGENCY_MEASURES_EDIT_DATA_CONST.CONTINGENCY_MEASURES_EDIT_DATA_FAILED,\n payload: error,\n});\n\n\nexport const contingencyDistrictGraphRequest = (id) => ({\n type: CONTINGENCY_DISTRICT_GRAPH_CONST.CONTINGENCY_DISTRICT_GRAPH_REQUEST,\n payload: id\n})\n\nexport const contingencyDistrictGraphSuccess = (response) => ({\n type: CONTINGENCY_DISTRICT_GRAPH_CONST.CONTINGENCY_DISTRICT_GRAPH_SUCCESS,\n payload: response\n})\n\nexport const contingencyDistrictGraphFailed = (error) => ({\n type: CONTINGENCY_DISTRICT_GRAPH_CONST.CONTINGENCY_DISTRICT_GRAPH_FAILED,\n payload: error\n})\n\n\n// EDIT CONTIGENCY PLAN \nexport const contingencyPlanDPEditRequest = (id) => ({\n type: CONTINGENCY_PLAN_EDIT_DISTRICT_PROFILE.CONTINGENCY_PLAN_DP_EDIT_REQUEST,\n payload: id\n})\n\nexport const contingencyPlanDPEditSuccess = (response) => ({\n type: CONTINGENCY_PLAN_EDIT_DISTRICT_PROFILE.CONTINGENCY_PLAN_DP_EDIT_SUCCESS,\n payload: response\n})\n\nexport const contingencyPlanDPEditFailed = (error) => ({\n type: CONTINGENCY_PLAN_EDIT_DISTRICT_PROFILE.CONTINGENCY_PLAN_DP_EDIT_FAILED,\n payload: error\n})\n\n\n// LOGS CONTIGENCY PLAN \nexport const contingencyPlanLogsRequest = (id) => ({\n type: CONTINGENCY_PLAN_EDIT_LOGS.CONTINGENCY_PLAN_LOGS_REQUEST,\n payload: id\n})\n\nexport const contingencyPlanLogsSuccess = (response) => ({\n type: CONTINGENCY_PLAN_EDIT_LOGS.CONTINGENCY_PLAN_LOGS_SUCCESS,\n payload: response\n})\n\nexport const contingencyPlanLogsFailed = (error) => ({\n type: CONTINGENCY_PLAN_EDIT_LOGS.CONTINGENCY_PLAN_LOGS_FAILED,\n payload: error\n})\n","import React, { useEffect, useState } from 'react';\nimport { Row, Col, Card, Container } from 'reactstrap';\nimport moment from 'moment';\nimport { t } from 'react-multi-lang';\nimport { useHistory } from 'react-router-dom';\nimport { useSelector, useDispatch } from 'react-redux';\nimport SettingIcon from '../assets/Images/dashboard-img.png';\nimport ManageStaticIcon from '../assets/Images/dashboard-img1.png';\nimport ManageUserIcon from '../assets/Images/dashboard-img2.png';\nimport ContigencyIcon from '../assets/Images/ContigencyIconBo.png';\nimport ManagePublicIcon from '../assets/Images/dashboard-img3.png';\nimport LandingPageIcon from '../assets/Images/landing-page-icon.svg';\nimport { isSuperAdmin, isStaffUser } from './common/utils';\nimport { userDetailRequest } from '../redux/user-list/userListAction';\nimport Loader from '../Components/common/loader';\nimport { userPermissionsRequest } from '../redux/user-list/userListAction';\nimport {\n contingencyPlanLogsRequest,\n contingencyPlanLogsSuccess,\n} from '../redux/contingencyPlan/contingencyPlanAction';\nconst SettingsDashboard = () => {\n const cardsInfo = [\n {\n title: 'Manage Static Data',\n icon: ManageStaticIcon,\n path: '/manageStaticData',\n group_name: 'Manage Static Resource',\n },\n {\n title: 'Manage Public API',\n icon: ManagePublicIcon,\n path: '/public-api-admin',\n group_name: 'Manage Public API Access Key',\n },\n {\n title: 'Manage User',\n icon: ManageUserIcon,\n path: '/manage-user-list',\n group_name: 'Manage Users',\n },\n\n // {\n // title: 'Manage Crops',\n // icon: ManageUserIcon,\n // path: '/ManageCrops',\n // group_name: 'Manage Crops',\n // },\n {\n title: 'Manage Newsfeed',\n icon: ManageUserIcon,\n path: '/manage-newsfeed',\n group_name: 'News Feed',\n },\n {\n title: 'Manage User Guide',\n icon: ManageUserIcon,\n path: '/manage-userguide',\n group_name: 'User Guide',\n },\n // {\n // title: 'Manage Template',\n // icon: ManageUserIcon,\n // path: '/bulletin',\n // group_name: 'Manage Template',\n // },\n {\n title: 'Manage Bulletin',\n icon: ManageUserIcon,\n path: '/back-office-bulletin/:currentTab',\n group_name: 'Manage Bulletin',\n },\n {\n title: t('LANDING_PAGE.MANGE_DMS_LANDING_PAGE'),\n icon: LandingPageIcon,\n path: '/manage-dms',\n group_name: 'Manage Landing page',\n },\n {\n title: 'Download Contingency Log History',\n icon: ContigencyIcon,\n path: '',\n group_name: '',\n isSuperAdmin: true,\n },\n ];\n const history = useHistory();\n const dispatch = useDispatch();\n const [cardList, setCardList] = useState([]);\n const [userPermissions, setUserPermissions] = useState(); // individual user permissions\n const [cardsInformation, setCardsInformation] = useState();\n const nextProps = useSelector(state => ({\n userDetailData: state.userList.userDetailData || null,\n userPermissionsData: state.userList.userPermissionsData || null,\n contgencyLogsData: state?.ContingencyPlan?.contgencyLogsData,\n }));\n useEffect(() => {\n if (!isSuperAdmin()) {\n if (!isStaffUser()) {\n history.push('/home');\n }\n }\n dispatch(userDetailRequest());\n dispatch(userPermissionsRequest());\n\n return () => {\n dispatch(contingencyPlanLogsSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (nextProps.userPermissionsData) {\n const {\n data: { result },\n } = nextProps.userPermissionsData;\n if (result) {\n cardsInfo.map(i => {\n let b = [];\n result.map(data => {\n if (i.title === 'Download Contingency Log History' && isSuperAdmin()) {\n b.push(data.code_name);\n } else if (i.group_name === data.group_name || isSuperAdmin()) {\n b.push(data.code_name);\n }\n i.code_name_list = b;\n });\n });\n setCardsInformation(cardsInfo);\n }\n }\n }, [nextProps.userPermissionsData]);\n\n useEffect(() => {\n if (nextProps?.contgencyLogsData?.data?.length) {\n const data = nextProps?.contgencyLogsData?.data;\n\n // Step 2: Create a Blob\n const blob = new Blob([data], { type: 'text/plain' });\n\n // Step 3: Create a URL for the Blob\n const url = URL.createObjectURL(blob);\n\n // Step 4: Create an anchor element and trigger the download\n const a = document.createElement('a');\n a.href = url;\n const currentDate = moment().format('D/M/YYYY'); // Format the date as 20/5/2024\n a.download = `contigencylogs_${currentDate}.txt`;\n\n document.body.appendChild(a);\n a.click();\n\n // Clean up and remove the anchor element\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n }, [nextProps.contgencyLogsData]);\n useEffect(() => {\n if (nextProps.userDetailData) {\n const {\n data: { result },\n } = nextProps.userDetailData;\n if (result?.user_permissions) {\n setUserPermissions(result?.user_permissions);\n }\n }\n }, [nextProps.userDetailData]);\n\n useEffect(() => {\n if (cardsInformation?.length && userPermissions) {\n handleCards(userPermissions);\n }\n }, [cardsInformation, userPermissions]);\n\n const handleCards = list => {\n let a = [];\n if (list.length) {\n cardsInformation?.map(i => {\n list?.map(item => {\n if (i.code_name_list.includes(item.codename)) {\n if (!a.includes(i)) {\n a.push(i);\n }\n }\n });\n });\n setCardList(a);\n } else if (isSuperAdmin()) {\n setCardList(cardsInfo);\n }\n };\n\n const handleCardClick = i => {\n if (i.path) {\n history.push(i.path);\n } else {\n if (i.title === 'Download Contingency Log History') {\n dispatch(contingencyPlanLogsRequest());\n }\n }\n };\n\n return (\n <>\n \n \n {!successModal ? (\n \n
\n \n \n
\n ) : (\n \n {hasChangePassword ? (\n
\n \n {t('LOGIN.RESET_PASSWORD')}
\n ) : (\n{t('LOGIN.FORGOT_PASSWORD')}
\n )}\n {handleResetDescription()}\n \n\n \n
\n \n \n \n {!cardList?.length ? (\n handleCardClick(i)}\n >\n \n \n \n );\n })\n )}\n
\n \n
\n \n );\n};\n\nexport default SettingsDashboard;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALoSURBVHgB7VnBThsxELXNIvVYDj03HCqF5dJjTxX5AwThTPIFtDdUJWVXpFFvNF/AciZF/YNE/YJeGnJrOPfQPVZqYndm2Q3elb0iQLym3SeBPfaMNRPPTDwTQkqUKFGiSNDsgltvHcHiG0HIU2IRQKcQ/gff+8dv5fUVmdist09gOIS/J8Q+oE6vnrmv6c/R12GyyGQOQUSD2I8DmXAym3O3GfU7lFgEcG0RT1Ou7ZAC4O69a5AZfEgX3QDp6vZhhTlOg0+nwfjLx4mKRwdGDCNSTLBTwtipuwNzVGJldQDDEVuNRiWPDsYN4Iq5iGfJyDX8Khg3YHzeDTjlTc55cxy7h5jNajD44k80Knl0SAWqFCg2B3FKN+c2AjbDuAs9NB69AVoXsjkGZJQuVDT+3RiwEL5q8dEYAEnFU61bYcB9XgBlEC+C6u77fay5F5FBfpTT7RszAJVglAcw9RIj8N2/UW8NZD6kkxog5vNQTmeEsRgAJdYl0nP32lC0iErW4YHegkJma7PeOpE7Ixn5m3OJIcRZ5CYVgvJ5/Jm2jq/LQkZjIFYilJZw7vOps47ZB2pi/JR9mUdQMdEpjzBa0Mxr3WuEhPLa6Lz7TcH3EvgwNq5vASozXXFv9AaoYHIg9lTKI+L1XkILxrRZaOlBLN+q/B7GFkqeHO5DqyXKVhjYOu8o7Iss6f/cdT9BYQZs7HSe5+1js4vcAkt3Ifm6IbcPBOZ5AGW/mzB4Ojlwn7nfg8zwst+pKfmIQcwoP5PIgxeYbRTALIQt/oQWPCWXgvG+kLvb/gHpqBKTmO8/QcCeoc9Xtz3okU73M79PhKDLmu68rAG/yAP8sKEzPnnbkMXhwZnKgibrQj2yJCiUD/P4hRATifR0r9iUAdFXtoiMyD38LoA+55VE4ttmDfufcFVDmQ8DFnuil58/JM+KWJ5eqc412vupwjOZMVbJvm3yYg/2PFB+Mr44DlRnWtG8+q9LyhIl7om/7c9FYNLFJ9wAAAAASUVORK5CYII=\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQRSURBVHgB7ZlPTxNBFMDfm22NMR4wauKxHkygXvCuoXwCSYCz9ROANyMYSxTjwUT4BJajEU39BBT1Ll5aEk2sNxNIrIl/QkpnfG/b3e4u29LuGyQIv6Rhd3Zm3rz59/4AcMIJIjCuMDMxO3QmdXbGAOSoQq5VajZAm+XK68dFOCCSyN2jwPDE3Yxy0muAJgOxLbCmG43xzdKTGlgkqVwVrdezE8aYjEqn13i2wCJJ5YYUyE7fy0c6Wfi9+/Mc/wyYO8HOaKlnwRISuangCxrF+69VlxpWVxeXAp+XslPzrP2D1ncYA0tI5IZWgD6Oes9/dn8Vo4JO7ab8jjuHTI5EroIjTkgB0q7sPcft8Z20vuU9m0BdKYPIda/VAKEzQINah84SPRiZmqt7S8r3Mxhd8OtqvQKWaKJeUUbl+pGrySYE24ZWgPeaMabmvSPgM+rgO//otRBqiI61Q6w0hvrqJtegqW1GDFpIgY1SoW6azfGgEl1Bk89O3n8OQrKTc8/JSOX3q8eDN43meLTciRZsb76vb1ffLZ+/ev0rzUSGii65HdA+pW2zQI8/ELF1ayCMXhwZy2xV374BC4OniVsxyiwrQL42M55cOiMrtKVufy49/RbtAyEBI5NzRVKic7AMFiuvHt7mx+Gp+Zzib1rnaHCZlhSs0f2+gU39xvNp4gZffbWYhwFJpECcEgahRNM1tK99IGVIubKNwbvdgYA9K5EAyeAZkSFjwTyASHGdfgsaYLyy+gj5B6ivxdTj6StJBs+kQAiCGnOPGnRuiqjLW3n5mI1PnlzmAjrOGrbPhqEtB0JEKxD1IuMGH4S/8TUNrVVy/Ro+9CBA6As5N/1HNMV+gpx2Hd+aKuEZkimgO15kA8ImvnezkB+VAwEyBQLb51Nrn/fF5uqjsv9iekRhffB/udMDE/CZBjmMV6bv+VuPby4QIFKg7X57HeX6bZfWzkygk48gQKYAYjHwOsOpkf3auHXIk/X70KYEAkSuBHN1an7NeLO/T84omvvh7VN9uXgZBIgtMTlxdfBTCpS7SaW+ZKfvFxvQXPZuJtdDpWwCzdYseaW+9UWtyiBEtAL9BiM9CbjiSXAgIXH+PP0ZIj+np3/jBigIvDLDboEwKEqkQLdgxI/kaIRUdtpXhq9bpUpkge+QEVvYqrx9cWHkxmUbkV3f2Wl35jgTgRSAWwpG4iI7UM11Y9Stg8tOB5AGI0zfQZG17HQbG4NnugRFcQItZqeB/ThTBkug2tPXP8hOK8XLXgQbCtCeP+rZ6VxSucc3Ox3NEks4lOx0NEssQSI3ZAdGJwpDO07jg5f26CrQghdpS+7A2eluWWIJErldvdFhsgn0TweOnNybqZ0lXqe7ealWWqrDAXFYck84tvwFrKfHr8ThE44AAAAASUVORK5CYII=\"","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Modal,\n ModalHeader,\n ModalBody,\n ModalFooter,\n Table,\n Row,\n Col,\n Input,\n Label,\n Collapse,\n} from 'reactstrap';\nimport Button from 'reactstrap-button-loader';\nimport { useTranslation } from 'react-multi-lang';\nimport PropTypes from 'prop-types';\nimport { showError, showSuccess } from '../../Components/Notifications';\nimport moment from 'moment';\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\nimport {\n updatePermissionsRequest,\n updatePermissionsSuccess,\n} from '../../redux/user-list/userListAction';\n\nconst Detailmodal = props => {\n const {\n handleReset,\n modalOpen,\n handleModalToggle,\n req_data,\n permissionsList,\n preSelectedPermissions,\n handleLatestData,\n } = props;\n const [modal, setModal] = useState(modalOpen);\n const [selectedPermissions, setSelectedPermissions] = useState([]);\n const [newList, setNewList] = useState([]);\n const [selectedParentCategoryName, setSelectedParentCategoryName] = useState();\n const [subArray, setSubArray] = useState([]);\n const [groupNamesList, setGroupNamesList] = useState([]);\n const [selectedAll, setSelectedAll] = useState(false);\n const dispatch = useDispatch();\n const t = useTranslation();\n const nextProps = useSelector(state => ({\n IndicesData: state.AccessKey.getParametersData || null,\n changeStatusData: state.AccessKey.changeStatusData || null,\n updatePermissionsData: state.userList.updatePermissionsData || null,\n isUpdatePermissionsRequesting: state.userList.isUpdatePermissionsRequesting,\n updatePermissionsError: state.userList.updatePermissionsError,\n }));\n\n useEffect(() => {\n if (nextProps.updatePermissionsData) {\n const {\n data: { result },\n } = nextProps.updatePermissionsData;\n if (result) {\n showSuccess(result);\n setModal(false);\n handleLatestData();\n handleModalToggle(false);\n handleReset();\n }\n }\n }, [nextProps.updatePermissionsData]);\n\n useEffect(() => {\n let a = [];\n if (permissionsList) {\n permissionsList?.map(i => {\n if (!a.includes(i.group_name)) {\n a.push(i.group_name);\n }\n });\n }\n setGroupNamesList(a);\n }, [permissionsList]);\n\n useEffect(() => {\n let y = [];\n if (groupNamesList && preSelectedPermissions) {\n let a = [];\n preSelectedPermissions.map(i => {\n a.push(i.id);\n });\n setSelectedPermissions(a);\n groupNamesList?.map(i => {\n let filterList = permissionsList.filter(item => item.group_name === i);\n y.push({\n category_name: i,\n list: filterList,\n checked: false,\n dropdownClicked: false,\n });\n });\n y.map(i => {\n let b = [];\n i.list.map(item => {\n if (a.includes(item.permission_id)) {\n b.push(item.permission_id);\n }\n });\n i.parentList = b;\n if (i.parentList.length === i.list.length) {\n i.checked = true;\n }\n });\n setNewList(y);\n }\n }, [groupNamesList, preSelectedPermissions]);\n\n useEffect(() => {\n if (selectedPermissions && permissionsList) {\n let a = [];\n let sub_arr = [];\n permissionsList?.forEach(i => {\n a.push(i.permission_id);\n });\n sub_arr = permissionsList.filter(i => i.permission_name != 'View User');\n setSubArray(sub_arr);\n let b = selectedPermissions?.sort().join(',') == a.sort().join(',');\n if (b) {\n setSelectedAll(true);\n } else {\n setSelectedAll(false);\n }\n }\n }, [selectedPermissions, permissionsList]);\n\n useEffect(() => {\n if (nextProps.updatePermissionsError) {\n const {\n data: { response },\n } = nextProps.updatePermissionsError;\n if (response?.data) {\n showError(response?.data.message);\n setModal(false);\n handleModalToggle(false);\n }\n }\n }, [nextProps.updatePermissionsError]);\n\n useEffect(() => {\n return () => {\n dispatch(updatePermissionsSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n let a = [];\n let y = [];\n if (selectedPermissions.length) {\n if (selectedParentCategoryName) {\n let c = newList;\n c = newList.map(i => {\n if (selectedParentCategoryName === i.category_name) {\n i.list.map(x => {\n y.push(x.permission_id);\n selectedPermissions.filter(y => {\n if (x.permission_id === y) {\n a.push(y);\n }\n });\n });\n let b = a.sort().join(',') === y.sort().join(',');\n i.checked = b;\n }\n return i;\n });\n setNewList(c);\n }\n }\n }, [selectedPermissions, selectedParentCategoryName]);\n\n const viewtoggle = value => {\n setModal(false);\n handleModalToggle(false);\n };\n\n const handleSelectAllPermissions = e => {\n let a = [];\n let b = [];\n if (!e.target.checked) {\n b = newList.map(data => {\n data.checked = false;\n return data;\n });\n } else {\n permissionsList.map(i => {\n a.push(i.permission_id);\n });\n b = newList.map(data => {\n data.checked = true;\n return data;\n });\n }\n setNewList(b);\n setSelectedPermissions(a);\n setSelectedAll(true);\n };\n\n const handleParentOnchangePermissions = (e, i) => {\n let a = selectedPermissions;\n let b;\n if (e.target.checked) {\n i.list.forEach(item => {\n if (!selectedPermissions.includes(item.permission_id)) {\n a.push(item.permission_id);\n }\n });\n b = newList.map(item => {\n if (item.category_name === i.category_name) {\n // i.dropdownClicked = i.dropdownClicked;\n i.checked = true;\n }\n return item;\n });\n } else {\n b = newList.map(item => {\n if (item.category_name === i.category_name) {\n a = selectedPermissions;\n i.list.map(data => {\n a = a.filter(y => {\n if (y !== data.permission_id) {\n return y;\n }\n });\n });\n //i.dropdownClicked = i.dropdownClicked;\n i.checked = false;\n }\n return item;\n });\n }\n setNewList(b);\n setSelectedPermissions(JSON.parse(JSON.stringify(a)));\n };\n const handleChildOnchangePermissions = (e, item) => {\n let a = [];\n a = selectedPermissions;\n setSelectedParentCategoryName(item.group_name);\n if (e.target.checked) {\n if (selectedPermissions.includes(item.permission_id)) {\n let b = [];\n b = selectedPermissions;\n setSelectedPermissions(b.filter(i => item.permission_id !== i));\n } else {\n if (subArray.some(r => r.permission_id === item.permission_id)) {\n a.push(item.permission_id);\n let p = permissionsList.filter(j => j.code_name === 'view_user');\n p.forEach(x => {\n if (!selectedPermissions.includes(x.permission_id)) {\n a.push(x.permission_id);\n }\n });\n } else {\n a.push(item.permission_id);\n }\n setSelectedPermissions(JSON.parse(JSON.stringify(a)));\n }\n } else {\n if (selectedPermissions.includes(item.permission_id)) {\n let b = [];\n b = selectedPermissions;\n setSelectedPermissions(b.filter(i => item.permission_id !== i));\n let x = newList;\n x.forEach(data => {\n if (item.group_name === data.category_name) {\n data.checked = false;\n }\n });\n setNewList(JSON.parse(JSON.stringify(x)));\n }\n }\n };\n\n const handleUpdate = () => {\n let data = {\n user_id: req_data.user.id,\n permission_ids: selectedPermissions,\n };\n dispatch(updatePermissionsRequest(data));\n };\n\n const handleDropdownClick = item => {\n let a = newList.map(i => {\n if (i.category_name === item.category_name) {\n i.dropdownClicked = !i.dropdownClicked;\n }\n return i;\n });\n setNewList(a);\n };\n\n return (\n <>\n \n 
\n
\n {t('DASHBOARD.DASHBOARD')}
\n\n 
\n
\n {/* {i.title}
\n{t('HOME_PAGE.DESCRIPTION')}
*/}\n\n \n \n {t('USER_LIST.DETAILS')}\n \n \n \n
\n\n |
\n \n \n <>\n {' '}\n handleUpdate()}\n loading={nextProps.isUpdatePermissionsRequesting}\n >\n {t('PUBLIC_API_ADMIN.UPDATE')}\n {' '}\n \n \n \n
\n \n );\n};\n\nexport default Detailmodal;\nDetailmodal.propTypes = {\n modalOpen: PropTypes.bool,\n handleModalToggle: PropTypes.func,\n req_data: PropTypes.object,\n handleLatestData: PropTypes.func,\n fromEditDetails: PropTypes.bool,\n activeTab: PropTypes.string,\n email: PropTypes.string,\n preSelectedPermissions: PropTypes.object,\n};\n","import React, { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useTranslation } from 'react-multi-lang';\nimport PropTypes from 'prop-types';\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\nimport Button from \"reactstrap-button-loader\";\nimport {deleteUserRequest, deleteUserSuccess} from \"../../redux/user-list/userListAction\";\nimport { showSuccess } from '../../Components/Notifications';\n\nconst DeleteConfirmationModal = (props) => {\n const {\n className,\n isOpen,\n handleDeleteConfirm,\n request_Id\n } = props;\n const dispatch = useDispatch();\n const t = useTranslation();\n const nextProps = useSelector((state) => ({\n isDeleteUserRequesting: state.userList.isDeleteUserRequesting,\n deleteData: state.userList.deleteUser || null,\n }));\n\n useEffect(() => {\n if(nextProps.deleteData){\n const {\n data: { result },\n } = nextProps.deleteData;\n if(result){\n showSuccess(result);\n handleDeleteConfirm(false);\n }\n }\n },[nextProps.deleteData])\n\n useEffect(() => {\n return () => {\n dispatch(deleteUserSuccess({}));\n };\n }, []);\n \n const toggle = (value) => {\n if(value === 'no'){\n handleDeleteConfirm(false,'no');\n }\n else if(value === 'yes') {\n dispatch(deleteUserRequest({id:request_Id}));\n }\n }\n const handleClose = () => {\n handleDeleteConfirm(false,'no');\n }\n \n return (\n \n {t('USER_LIST.NAME')}\n\n {req_data && req_data?.user_profile?.name\n ? req_data?.user_profile?.name\n : 'N/A'}\n \n | \n \n {t('USER_LIST.EMAIL')}\n{req_data && req_data?.user?.email ? req_data?.user?.email : 'N/A'} \n | \n \n {t('USER_LIST.COUNTRY')}\n\n {req_data && req_data?.user_profile?.country\n ? req_data?.user_profile?.country\n : 'N/A'}\n \n | \n \n Phone\n\n {req_data && req_data?.user_profile?.mobile_number\n ? req_data?.user_profile?.mobile_number\n : 'N/A'}\n \n | \n
\n {t('USER_LIST.ORGANIZATION')}\n\n {req_data && req_data?.user_profile?.organization\n ? req_data?.user_profile?.organization\n : 'N/A'}\n \n | \n \n {t('USER_LIST.LAST_LOGIN')}\n\n {req_data && req_data?.user?.last_login\n ? moment(req_data?.user?.last_login).format(DISPLAY_DATE_FORMAT)\n : 'N/A'}\n \n | \n \n {t('USER_LIST.DATE_OF_REGISTRATION')}\n\n {req_data && req_data?.user_profile?.created_date\n ? moment(req_data?.user_profile?.created_date).format(DISPLAY_DATE_FORMAT)\n : 'N/A'}\n \n | \n
\n \n
\n \n {newList.length &&\n newList?.map(i => {\n return (\n handleDropdownClick(i)}\n >\n \n {i.list.map(item => {\n return (\n \n );\n })}\n \n \n );\n })}\n
\n
\n Permissions
\n \n\n \n
\n \n \n \n handleClose()} className=\"reason-modal-header\">{t('USER_LIST.CONFIRMATION')} \n \n \n \n {' '}\n \n \n \n
\n );\n}\n\nexport default DeleteConfirmationModal;\nDeleteConfirmationModal.propTypes = {\n isOpen: PropTypes.bool,\n modalData: PropTypes.object,\n handleLatestData: PropTypes.func,\n handleApprovedModalToggle: PropTypes.bool,\n fromModal: PropTypes.bool,\n activeTab: PropTypes.string,\n request_Id: PropTypes.string\n };","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useTranslation } from 'react-multi-lang';\nimport { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';\nimport Optionicon from '../../assets/Images/option.png';\nimport PropTypes from 'prop-types';\nimport Detailmodal from './DetailsModal';\nimport DeleteConfirmationModal from './DeleteConfirmationModal';\nimport {\n userByIdRequest,\n userPermissionsRequest,\n userPermissionsByIdRequest,\n} from '../../redux/user-list/userListAction';\n\nconst Detailsdropdown = props => {\n const { request_Id, handleLatestData, selectedPageTab, activeTab, email, handleReset } = props;\n const t = useTranslation();\n const nextProps = useSelector(state => ({\n isDeleteUserRequesting: state.userList.isDeleteUserRequesting,\n deleteData: state.userList.deleteUser || null,\n detailUserInfo: state.userList.userById || null,\n permissionsData: state.userList.userPermissionsData || null,\n userPermissionsByIdData: state.userList.userPermissionsByIdData || null,\n }));\n\n const dispatch = useDispatch();\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [selectedReqModalData, setSelectedReqModalData] = useState();\n const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\n const [permissionsList, setPermissionsList] = useState([]);\n const [preSelectedPermissions, setPreSelectedPermissions] = useState([]);\n const [selectedTabListData, setSelectedTabListData] = useState({\n view_details: true,\n delete: false,\n });\n\n const toggle = () => setDropdownOpen(prevState => !prevState);\n useEffect(() => {\n if (nextProps.detailUserInfo) {\n const {\n data: { result },\n } = nextProps.detailUserInfo;\n if (result) {\n setSelectedReqModalData(result);\n }\n }\n }, [nextProps.detailUserInfo]);\n\n useEffect(() => {\n if (nextProps.userPermissionsByIdData) {\n const {\n data: { result },\n } = nextProps.userPermissionsByIdData;\n if (result) {\n setPreSelectedPermissions(result);\n }\n }\n }, [nextProps.userPermissionsByIdData]);\n\n useEffect(() => {\n if (nextProps.permissionsData) {\n const {\n data: { result },\n } = nextProps.permissionsData;\n if (result) {\n result?.map(i => {\n i.checked = false;\n });\n setPermissionsList(result);\n }\n }\n }, [nextProps.permissionsData]);\n\n useEffect(() => {\n if (selectedPageTab === 'public-user') {\n let a = {\n view_details: true,\n delete: true,\n };\n setSelectedTabListData(a);\n } else if (selectedPageTab === 'admin-user') {\n let a = {\n view_details: true,\n delete: true,\n };\n setSelectedTabListData(a);\n }\n }, [selectedPageTab]);\n\n const handleViewDetailsModal = () => {\n setIsModalOpen(true);\n dispatch(userByIdRequest({ id: request_Id }));\n dispatch(userPermissionsRequest());\n dispatch(userPermissionsByIdRequest({ id: request_Id }));\n };\n\n const handleModalToggle = () => {\n setIsModalOpen(false);\n };\n\n const handleDelete = () => {\n setIsDeleteModalOpen(true);\n };\n\n const handleDeleteConfirm = (boolean_value, value) => {\n if (value === 'no') {\n setIsDeleteModalOpen(boolean_value);\n } else {\n setIsDeleteModalOpen(boolean_value);\n props.latestData();\n }\n };\n\n return (\n <>\n {t('USER_LIST.CONFIRMATION_TITLE')}
\n\n \n \n {headerGroups.map(headerGroup => (\n <>\n
\n
\n \n );\n};\nUserListTable.propTypes = {\n req_data: PropTypes.array,\n handleLatestData: PropTypes.func,\n selectedTab: PropTypes.string,\n latestData: PropTypes.func,\n handlePageSize: PropTypes.func,\n pageCount: PropTypes.number,\n handlePageNumber: PropTypes.func,\n pageNumber: PropTypes.number,\n recordsCount: PropTypes.number,\n activeTab: PropTypes.string,\n};\n","import React from 'react';\nimport CloseIcon from '../../assets/Images/icons/close.png';\nimport Button from 'reactstrap-button-loader';\nimport { Field, reduxForm } from 'redux-form';\nimport PropTypes from 'prop-types';\nimport { t } from 'react-multi-lang';\nimport {\n renderTextField,\n renderReactSelectInputField,\n} from '../../Components/common/renderInputField';\n\nconst UserFilter = props => {\n const {\n handleReset,\n nameHandler,\n emailHandler,\n mobileHandler,\n roleHandler,\n reset,\n handleCloseFilter,\n } = props;\n const roles = [\n { id: '1', name: 'User', value: 'users' },\n { id: '2', name: 'IWMI Admin', value: 'admin' },\n ];\n\n const renderAPIParameterOptions = (list) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n params.map(param => {\n let data = {\n value: param.value,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n };\n\n const handleClearFilters = () => {\n reset('filter-form');\n handleReset();\n };\n\n const handleName = e => {\n nameHandler(e);\n };\n\n const handleEmail = e => {\n emailHandler(e);\n };\n\n const handleMobileNumber = e => {\n mobileHandler(e);\n };\n\n const handleRoleChange = e => {\n roleHandler(e);\n };\n return (\n | \n |
|---|
| \n | \n
| \n | \n \n ) : (\n
\n \n
\n
\n \n \n {\n handleGoToPage(e);\n }}\n disabled={\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === 0\n ? true\n : false\n }\n style={{ width: '50px', border: 'none' }}\n />\n \n \n of{' '}\n {props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)}{' '}\n Pages\n \n \n handlepreviousPage()}\n className=\"previous-btn\"\n disabled={props.pageNumber <= 1 ? true : false}\n >\n {props.pageNumber <= 1 ? (\n \n ) : (\n \n )}\n \n handlenextPage()}\n className=\"next-btn\"\n disabled={\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === 0\n ? true\n : false\n }\n >\n {(props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\n (props.pageCount % pageSize\n ? Math.trunc(props.pageCount / pageSize + 1)\n : Math.trunc(props.pageCount / pageSize)) === 0 ? (\n \n ) : (\n \n )}\n \n \n
\n \n \n
\n );\n};\nUserFilter.propTypes = {\n noRecordsErrorHandler: PropTypes.func,\n handleFilterFormData: PropTypes.func,\n formFilterData: PropTypes.object,\n nameHandler: PropTypes.func,\n};\nexport default reduxForm({\n form: 'filter-form',\n})(UserFilter);\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { TabContent, TabPane, Row, Col } from 'reactstrap';\nimport { userListRequest, userPermissionsRequest } from '../../redux/user-list/userListAction';\nimport { UserListTable } from './Table';\nimport { isSuperAdmin, isStaffUser } from '../../Components/common/utils';\nimport { userDetailRequest } from '../../redux/user-list/userListAction';\nimport Filter from './Filter';\nimport RightArrow from '../../assets/Images/back-button.svg';\nimport FilterIcon from '../../assets/Images/icons/mi_filter.svg';\nimport { t } from 'react-multi-lang';\n\nconst Index = () => {\n const dispatch = useDispatch();\n const history = useHistory();\n const [newRequestList, setNewRequestList] = useState();\n const [pageLimit, setPageLimit] = useState(10);\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [recordsCount, setRecordsCount] = useState();\n const [toggleRightBar, setToggleRightBar] = useState(false);\n const [permissionsData, setPermissionsData] = useState();\n const [formData, setFormData] = useState({\n name: '',\n mobile: '',\n email: '',\n type: '',\n });\n const [filterFormData, setFilterFormData] = useState({\n Name: '',\n Email: '',\n Phone_number: '',\n Role: '',\n });\n const [filterData, setFilterData] = useState();\n const [userId, setUserId] = useState();\n const nextProps = useSelector(state => ({\n userListData: state.userList.userListData || null,\n permissionsData: state.userList.userPermissionsData || null,\n userByIdData: state.userList.userById || null,\n userDetailData: state.userList.userDetailData || null,\n }));\n useEffect(() => {\n handleFilterResultData(formData);\n }, [formData.name, formData.email, formData.mobile, formData.type]);\n useEffect(() => {\n if (isSuperAdmin() || isStaffUser()) {\n dispatch(userListRequest({ page: pageNumber, limit: pageLimit }));\n } else {\n history.push('/home');\n }\n dispatch(userDetailRequest());\n }, []);\n\n useEffect(() => {\n if (nextProps.userDetailData) {\n const {\n data: { result },\n } = nextProps.userDetailData;\n if (result) {\n setUserId(result?.user?.id);\n }\n }\n }, [nextProps.userDetailData]);\n\n useEffect(() => {\n if (nextProps.permissionsData) {\n const {\n data: { result },\n } = nextProps.permissionsData;\n if (result) {\n setPermissionsData(result);\n }\n }\n }, [nextProps.permissionsData]);\n\n useEffect(() => {\n if (nextProps.userListData) {\n const {\n data: { result },\n } = nextProps.userListData;\n let a;\n if (result?.results?.length) {\n let filteredList = [];\n filteredList = result.results.filter(i => i.is_superuser !== 'True');\n filteredList.map(i => {\n return (i.role = i.is_staff === 'False' ? 'User' : 'IWMI Admin');\n });\n a = filteredList.filter(x => x.user_id !== userId);\n setNewRequestList(a);\n setPageCount(result.count);\n setRecordsCount(result.results.length);\n }\n }\n }, [nextProps.userListData]);\n\n useEffect(() => {\n if (nextProps.userByIdData) {\n const {\n data: { result },\n } = nextProps.userByIdData;\n if (result?.results?.length) {\n setNewRequestList(result.results);\n setPageCount(result.count);\n setRecordsCount(result.results.length);\n }\n }\n }, [nextProps.userByIdData]);\n\n const handlePageNumber = value => {\n setPageNumber(value);\n if (filterData) {\n dispatch(userListRequest({ page: value, limit: pageLimit, data: filterData }));\n } else {\n dispatch(userListRequest({ page: value, limit: pageLimit }));\n }\n };\n\n const handlePageSize = value => {\n setPageLimit(value);\n setPageNumber(1);\n if (filterData) {\n dispatch(userListRequest({ page: 1, limit: value, data: filterData }));\n } else {\n dispatch(userListRequest({ page: 1, limit: value }));\n }\n };\n\n const handleLatestData = value => {\n dispatch(userListRequest({ page: pageNumber, limit: value }));\n };\n\n const handleFilterResultData = data => {\n setFilterData(data);\n setPageNumber(1);\n dispatch(userListRequest({ data: data }));\n };\n\n const handleLatestDataForDelete = id => {\n dispatch(userListRequest({ page: pageNumber, limit: 10 }));\n };\n\n const handleCloseFilter = () => {\n setToggleRightBar(false);\n };\n\n const handleFilter = () => {\n dispatch(userPermissionsRequest());\n setToggleRightBar(!toggleRightBar);\n };\n\n const handleManageCropsBackButton = () => {\n history.push('/settingsDashboard');\n };\n\n const nameHandler = e => {\n formData.name = e.target.value;\n setFormData(formData);\n filterFormData.Name = e.target.value;\n setFilterFormData(filterFormData);\n };\n\n const mobileHandler = e => {\n formData.mobile = e.target.value;\n setFormData(formData);\n filterFormData.Phone_number = e.target.value;\n setFilterFormData(filterFormData);\n };\n\n const roleHandler = e => {\n formData.type = e.value;\n setFormData(formData);\n filterFormData.Role = e.value;\n setFilterFormData(filterFormData);\n };\n\n const emailHandler = e => {\n formData.email = e.target.value;\n setFormData(formData);\n filterFormData.Email = e.target.value;\n setFilterFormData(filterFormData);\n };\n const handleReset = () => {\n setFormData({});\n filterFormData.Name = '';\n filterFormData.Email = '';\n filterFormData.Phone_number = '';\n filterFormData.Role = '';\n setFilterFormData(filterFormData);\n };\n\n return (\n <>\n {toggleRightBar ? (\n \n
\n \n {t('FILTER.FILTER')}
\n\n handleCloseFilter()}\n />\n
\n \n
\n ) : (\n ''\n )}\n \n \n handleManageCropsBackButton()}\n />\n \n
\n\n \n \n \n
\n \n \n
\n \n );\n};\n\nexport default Index;\n","import React, { useEffect, useState } from 'react';\nimport Select from 'react-select';\n\nconst ManagesidebarCrops = props => {\n const [countryList, setCountryList] = useState();\n const [stateList, setStateList] = useState();\n const [districtList, setDistrictList] = useState();\n const [formData, setFormData] = useState({\n country: '',\n state: '',\n district: '',\n });\n useEffect(() => {\n let list = [];\n if (props.countryList) {\n let default_option = { value: 'select', label: 'select' };\n list.push(default_option);\n props.countryList.map(i => {\n list.push({\n value: i.id,\n label: i.name,\n });\n });\n setCountryList(list);\n }\n }, [props.countryList]);\n\n useEffect(() => {\n if (formData) {\n props.handleBreadCrumbsData(formData);\n }\n }, [formData]);\n\n useEffect(() => {\n if (props.initialValues) {\n setFormData(props.initialValues);\n props.handleBreadCrumbsData(props.initialValues);\n }\n }, [props.initialValues]);\n\n useEffect(() => {\n let list = [];\n if (props.stateList) {\n let default_option = { value: 'select', label: 'select' };\n list.push(default_option);\n props.stateList.map(i => {\n list.push({\n value: i.id,\n label: i.name,\n });\n });\n setStateList(list);\n }\n }, [props.stateList]);\n\n useEffect(() => {\n let list = [];\n if (props.districtList) {\n let default_option = { value: 'select', label: 'select' };\n list.push(default_option);\n props.districtList.map(i => {\n list.push({\n value: i.id,\n label: i.name,\n });\n });\n setDistrictList(list);\n }\n }, [props.districtList]);\n\n const handleSelectedCountry = (newValue, action) => {\n if (newValue.value === 'select') {\n formData.country = newValue;\n formData.state = '';\n formData.district = '';\n } else {\n formData.country = newValue;\n }\n setFormData({ ...formData });\n props.handleSelectedCountry(newValue, action);\n };\n const handleSelectedState = (newValue, action) => {\n if (newValue.value === 'select') {\n formData.state = '';\n formData.district = '';\n } else {\n formData.state = newValue;\n }\n setFormData({ ...formData });\n props.handleSelectedState(newValue, action);\n };\n\n const handleSelectedDistrict = (newValue, action) => {\n if (newValue.value === 'select') {\n formData.district = '';\n } else {\n formData.district = newValue;\n }\n setFormData({ ...formData });\n props.handleSelectedDistrict(newValue, action);\n };\n\n return (\n Manage Users
\n \n{t('FILTER.FILTER')}
\n \n \n\n
\n );\n};\nexport default ManagesidebarCrops;\n","import React, { useEffect, useState } from 'react';\nimport {useSelector } from 'react-redux';\nimport { Modal, ModalHeader, ModalBody, Row, Col, ModalFooter } from 'reactstrap';\nimport { t } from 'react-multi-lang';\nimport _ from 'lodash';\nimport { Field, reduxForm } from 'redux-form';\nimport {\n renderReactSelectInputField,\n} from '../../Components/common/renderInputField';\nimport Button from 'reactstrap-button-loader';\nimport {MONTHS} from \"../../Components/constants\"\n\nconst Addmodalcrop = (props) => {\n const {handleSubmit} = props;\n const [fromDaysList, setFromDaysList] = useState();\n const [toDaysList, setToDaysList] = useState();\n\n const addtoggle = () => {\n props.handleSetModal(!props.modal);\n props.handleResetInitialValues();\n };\n const nextProps = useSelector((state) => ({\n isManageCropsUpdateRequesting: state.ManageCrops.isManageCropsUpdateRequesting,\n }));\n useEffect(() => {\n if(props.initialValues){\n if(props.initialValues?.from_month?.label){\n let days = [];\n MONTHS.map((data) => {\n if(data.label === props.initialValues.from_month.label){\n for(var i=1;i<=data.days;i++){\n days.push({\n value: i,\n label: i,\n id: i,\n })\n }\n setFromDaysList(days);\n }\n })\n }\n else{\n setFromDaysList([]);\n }\n if(props.initialValues?.to_month?.label){\n let days = [];\n MONTHS.map((data) => {\n if(data.label === props.initialValues.to_month.label){\n for(var i=1;i<=data.days;i++){\n days.push({\n value: i,\n label: i,\n id: i,\n })\n }\n }\n })\n setToDaysList(days);\n }\n else{\n setToDaysList([])\n }\n }\n },[props.initialValues])\n\nconst handleSelectedItem = (item) => {\n props.handleSelectedSeason(item);\n}\n\n const handleAddClick = (value) => {\n props.handleAddClick(value);\n } \n\n const handleUpdate = () => {\n props.handleUpdate();\n }\n\n const renderAPIParameterOptions = (list) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n params.map((param) => {\n let data = {\n value: param.label,\n label: `${param.label}`,\n id: param.value\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n};\n\nconst handleCancel = () => {\n props.handleSetModal(!props.modal);\n props.handleResetInitialValues();\n}\n\nconst onFormSubmit = () => {\n props.handleAddClick('add');\n}\n\nconst renderBreadCrumbs = (values) => {\n if(props.editButtonClicked){\n return \n
\n Select Region
\n\n
\n \n
\n \n
\n {props.initialValues?.breadCrumbs}
\n }\n else{\n return{values?.country?.label} { values?.state?.label ? \" | \" + values?.state?.label : \"\"} {values?.district?.label ? \" | \" + values?.district?.label : \"\"}
\n }\n}\n\n\nconst handleFromMonthChange = (item) => {\n let days = [];\n MONTHS.map((data) => {\n if(data.label === item.label){\n for(var i=1;i<=data.days;i++){\n days.push({\n value: i,\n label: i,\n id: i,\n })\n }\n }\n})\nsetFromDaysList(days);\nprops.handleFromMonth(item);\n}\n\nconst handleToMonthChange = (item) => {\n let days = [];\n MONTHS.map((data) => {\n if(data.label === item.label){\n for(var i=1;i<=data.days;i++){\n days.push({\n value: i,\n label: i,\n id: i,\n })\n }\n }\n})\nsetToDaysList(days);\nprops.handleToMonth(item);\n}\n\nconst handleToDayChange = (item) => {\n props.handleToDay(item);\n}\n\n\n\nconst handleFromDayChange = (item) => {\n props.handleFromDay(item);\n}\n\n\nreturn (\n\n {props.hideAddButton && \n \n }\n \n \n \n
\n );\n};\n\nexport default reduxForm({\n form: 'filter-form',\n enableReinitialize: true,\n})(Addmodalcrop);","export const MANAGE_CROPS_CONST = {\n MANAGE_CROPS_REQUEST: 'MANAGE_CROPS_REQUEST',\n MANAGE_CROPS_SUCCESS: 'MANAGE_CROPS_SUCCESS',\n MANAGE_CROPS_FAILED: 'MANAGE_CROPS_FAILED',\n };\n\n export const MANAGE_CROPS_LIST_BY_ID_CONST = {\n MANAGE_CROPS_LIST_BY_ID_REQUEST: 'MANAGE_CROPS_LIST_BY_ID_REQUEST',\n MANAGE_CROPS_LIST_BY_ID_SUCCESS: 'MANAGE_CROPS_LIST_BY_ID_SUCCESS',\n MANAGE_CROPS_LIST_BY_ID_FAILED: 'MANAGE_CROPS_LIST_BY_ID_FAILED',\n };\n\nexport const MANAGE_CROPS_ADD_CONST = {\n MANAGE_CROPS_ADD_REQUEST: 'MANAGE_CROPS_ADD_REQUEST',\n MANAGE_CROPS_ADD_SUCCESS: 'MANAGE_CROPS_ADD_SUCCESS',\n MANAGE_CROPS_ADD_FAILED: 'MANAGE_CROPS_ADD_FAILED',\n };\n\nexport const MANAGE_CROPS_DELETE_CONST = {\n MANAGE_CROPS_DELETE_REQUEST: 'MANAGE_CROPS_DELETE_REQUEST',\n MANAGE_CROPS_DELETE_SUCCESS: 'MANAGE_CROPS_DELETE_SUCCESS',\n MANAGE_CROPS_DELETE_FAILED: 'MANAGE_CROPS_DELETE_FAILED',\n };\n\n \nexport const MANAGE_CROPS_UPDATE_CONST = {\n MANAGE_CROPS_UPDATE_REQUEST: 'MANAGE_CROPS_UPDATE_REQUEST',\n MANAGE_CROPS_UPDATE_SUCCESS: 'MANAGE_CROPS_UPDATE_SUCCESS',\n MANAGE_CROPS_UPDATE_FAILED: 'MANAGE_CROPS_UPDATE_FAILED',\n};\n\n\nexport const MANAGE_CROPS_SEASONS_CONST = {\n MANAGE_CROPS_SEASONS_REQUEST: 'MANAGE_CROPS_SEASONS_REQUEST',\n MANAGE_CROPS_SEASONS_SUCCESS: 'MANAGE_CROPS_SEASONS_SUCCESS',\n MANAGE_CROPS_SEASONS_FAILED: 'MANAGE_CROPS_SEASONS_FAILED',\n};\n\n","import {MANAGE_CROPS_CONST, MANAGE_CROPS_ADD_CONST, MANAGE_CROPS_UPDATE_CONST,MANAGE_CROPS_DELETE_CONST,MANAGE_CROPS_SEASONS_CONST,MANAGE_CROPS_LIST_BY_ID_CONST } from './manageCropsConst';\n\nexport const manageCropsListRequest = (data) => ({\n type: MANAGE_CROPS_CONST.MANAGE_CROPS_REQUEST,\n payload: data,\n});\n\nexport const manageCropsListSuccess = (response) => ({\n type: MANAGE_CROPS_CONST.MANAGE_CROPS_SUCCESS,\n payload: response,\n});\n\nexport const manageCropsListFailed = (error) => ({\n type: MANAGE_CROPS_CONST.MANAGE_CROPS_FAILED,\n payload: error,\n});\n\n\n\n\nexport const manageCropsListByIdRequest = (data) => ({\n type: MANAGE_CROPS_LIST_BY_ID_CONST.MANAGE_CROPS_LIST_BY_ID_REQUEST,\n payload: data,\n});\n\nexport const manageCropsListByIdSuccess = (response) => ({\n type: MANAGE_CROPS_LIST_BY_ID_CONST.MANAGE_CROPS_LIST_BY_ID_SUCCESS,\n payload: response,\n});\n\nexport const manageCropsListByIdFailed = (error) => ({\n type: MANAGE_CROPS_LIST_BY_ID_CONST.MANAGE_CROPS_LIST_BY_ID_FAILED,\n payload: error,\n});\n\n\nexport const manageCropsAddRequest = (data) => ({\n type: MANAGE_CROPS_ADD_CONST.MANAGE_CROPS_ADD_REQUEST,\n payload: data,\n});\n\nexport const manageCropsAddSuccess = (response) => ({\n type: MANAGE_CROPS_ADD_CONST.MANAGE_CROPS_ADD_SUCCESS,\n payload: response,\n});\n\nexport const manageCropsAddFailed = (error) => ({\n type: MANAGE_CROPS_ADD_CONST.MANAGE_CROPS_ADD_FAILED,\n payload: error,\n});\n\n\n\n\nexport const manageCropsUpdateRequest = (data) => ({\n type: MANAGE_CROPS_UPDATE_CONST.MANAGE_CROPS_UPDATE_REQUEST,\n payload: data,\n});\n\nexport const manageCropsUpdateSuccess = (response) => ({\n type: MANAGE_CROPS_UPDATE_CONST.MANAGE_CROPS_UPDATE_SUCCESS,\n payload: response,\n});\n\nexport const manageCropsUpdateFailed = (error) => ({\n type: MANAGE_CROPS_UPDATE_CONST.MANAGE_CROPS_UPDATE_FAILED,\n payload: error,\n});\n\n\n\n\nexport const manageCropsDeleteRequest = (data) => ({\n type: MANAGE_CROPS_DELETE_CONST.MANAGE_CROPS_DELETE_REQUEST,\n payload: data,\n});\n\nexport const manageCropsDeleteSuccess = (response) => ({\n type: MANAGE_CROPS_DELETE_CONST.MANAGE_CROPS_DELETE_SUCCESS,\n payload: response,\n});\n\nexport const manageCropsDeleteFailed = (error) => ({\n type: MANAGE_CROPS_DELETE_CONST.MANAGE_CROPS_DELETE_FAILED,\n payload: error,\n});\n\n\nexport const manageCropsSeasonsRequest = (data) => ({\n type: MANAGE_CROPS_SEASONS_CONST.MANAGE_CROPS_SEASONS_REQUEST,\n payload: data,\n});\n\nexport const manageCropsSeasonsSuccess = (response) => ({\n type: MANAGE_CROPS_SEASONS_CONST.MANAGE_CROPS_SEASONS_SUCCESS,\n payload: response,\n});\n\nexport const manageCropsSeasonsFailed = (error) => ({\n type: MANAGE_CROPS_SEASONS_CONST.MANAGE_CROPS_SEASONS_FAILED,\n payload: error,\n});","import React, { useEffect, useMemo, useState } from 'react';\nimport { useTable, usePagination, useSortBy, useFilters, useGlobalFilter } from 'react-table';\nimport PropTypes from 'prop-types';\nimport DisabledLeftArrowIcon from '../../assets/Images/disable_previous_image.svg';\nimport DisabledRightArrowIcon from '../../assets/Images/disable_next_image.svg';\nimport EnabledLeftArrowIcon from '../../assets/Images/enable_previous_image.svg';\nimport EnabledRightArrowIcon from '../../assets/Images/enable_next_image.svg';\nimport { useTranslation } from 'react-multi-lang';\nimport { Row, Col, Table } from 'reactstrap';\nimport { isSuperAdmin } from '../../Components/common/utils';\n\nexport const TableList = (props) => {\n const { loading = true, userDetailData } = props;\n const t = useTranslation();\n const notAvailable = 'N/A';\n\n const COLUMNS = [\n {\n Header: 'Crop Season',\n accessor: (row) => (row.season_name ? row.season_name : notAvailable),\n sticky: 'top',\n },\n {\n Header: 'From(dd/mm)',\n accessor: (row) =>\n row.start_month\n ? (row.start_day.length <= 1 ? '0' + row.start_day : row.start_day) +\n '/' +\n (row.start_month.length <= 1 ? '0' + row.start_month : row.start_month)\n : notAvailable,\n sticky: 'top',\n },\n {\n Header: 'To(dd/mm)',\n accessor: (row) =>\n row.end_month\n ? (row.end_day.length <= 1 ? '0' + row.end_day : row.end_day) +\n '/' +\n (row.end_month.length <= 1 ? '0' + row.end_month : row.end_month)\n : notAvailable,\n sticky: 'top',\n },\n {\n Header: 'Location',\n accessor: (row) => (row.location_name ? row.location_name : notAvailable),\n sticky: 'top',\n },\n ];\n\n const columns = useMemo(() => COLUMNS, []);\n const data = useMemo(() => props.req_data, [props.req_data]);\n const tableInstance = useTable(\n {\n columns,\n data,\n },\n useGlobalFilter,\n useSortBy,\n usePagination,\n );\n\n const pageSizeHandler = (e) => {\n setPageSize(Number(e.target.value));\n props.handlePageSize(Number(e.target.value));\n };\n\n const {\n getTableProps,\n getTableBodyProps,\n headerGroups,\n page,\n state,\n setPageSize,\n setAllFilters,\n prepareRow,\n } = tableInstance;\n const { pageSize } = state;\n const page_range = [10, 15, 20, 25];\n\n const handlepreviousPage = (value) => {\n props.handlePageNumber(props.pageNumber - 1);\n };\n const handlenextPage = (value) => {\n props.handlePageNumber(props.pageNumber + 1);\n };\n const handleGoToPage = (e) => {\n props.handlePageNumber(Number(e.target.value));\n };\n const handleEditClick = (value) => {\n props.handleRowClick(value.original);\n };\n\n const handleDeleteClick = (value) => {\n props.handleDeleteById(value.original);\n };\n\n return (\n <>\n {/* */}\n \n \n {headerGroups.map((headerGroup) => (\n <>\n
\n {/*
*/}\n \n );\n};\nTableList.propTypes = {\n req_data: PropTypes.array,\n handleLatestData: PropTypes.func,\n latestData: PropTypes.func,\n handlePageSize: PropTypes.func,\n pageCount: PropTypes.number,\n handlePageNumber: PropTypes.func,\n pageNumber: PropTypes.number,\n recordsCount: PropTypes.number,\n activeTab: PropTypes.string,\n};\n","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'react-multi-lang';\nimport PropTypes from 'prop-types';\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\nimport Button from \"reactstrap-button-loader\";\n\nconst DeleteConfirmationModal = (props) => {\n const {\n className,\n isDeleteModalOpen,\n handleDeleteConfirm,\n } = props;\n const t = useTranslation();\n\n const nextProps = useSelector((state) => ({\n isManageCropsDeleteRequesting: state.ManageCrops.isManageCropsDeleteRequesting,\n }));\n\n\n const toggle = (value) => {\n if(value === 'no'){\n handleDeleteConfirm(false,'no');\n }\n else if(value === 'yes') {\n handleDeleteConfirm(false,'yes');\n }\n }\n const handleClose = () => {\n handleDeleteConfirm(false);\n }\n \n return (\n | \n |
|---|
| \n | \n
\n \n {t('PUBLIC_API_ADMIN.CONFIRMATION')} \n \n \n \n {' '}\n \n \n \n
\n );\n}\n\nexport default DeleteConfirmationModal;\nDeleteConfirmationModal.propTypes = {\n isDeleteModalOpen: PropTypes.bool,\n handleDeleteConfirm: PropTypes.func,\n };","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport RightArrow from \"../../assets/Images/back-button.svg\";\nimport ManagesidebarCrops from '../Managecrops/sidebar';\nimport Addmodalcrop from '../Managecrops/Addmodalcrop';\nimport { useHistory } from 'react-router-dom';\nimport {\n manageCropsListRequest,\n manageCropsSeasonsRequest,\n manageCropsListByIdRequest,\n manageCropsDeleteRequest,\n manageCropsListByIdSuccess\n} from '../../redux/manageCrops/manageCropsAction';\nimport { TableList } from './tableList';\nimport Loader from '../../Components/common/loader';\nimport { t } from 'react-multi-lang';\nimport { getCountryRequest } from '../../redux/actions';\nimport {userDetailRequest } from \"../../redux/user-list/userListAction\"\nimport {\n manageCropsAddRequest,\n manageCropsAddSuccess,\n manageCropsDeleteSuccess,\n manageCropsUpdateRequest,\n manageCropsUpdateSuccess\n} from '../../redux/manageCrops/manageCropsAction';\nimport { isSuperAdmin, isStaffUser } from '../../Components/common/utils';\nimport DeleteConfirmationModal from './DeleteConfirmation';\nimport { LOCATION, MONTHS } from '../../Components/constants';\nimport { showSuccess } from '../../Components/Notifications';\n\nconst ManageCrops = () => {\n const dispatch = useDispatch();\n const history = useHistory();\n const [manageCropsListData, setManageCropsList] = useState();\n const [manageCropsSeasonsList, setManageCropsSeasonsList] = useState();\n const [countryList, setCountryList] = useState();\n const [stateList, setStateList] = useState();\n const [districtList, setDistrictList] = useState();\n const [userDetailData, setUserDetailData] = useState();\n //const [updatedPermissions,setUpdatedPermissions] = useState();\n const [selectedDropdown, setSelectedDropdown] = useState('country');\n const [addModalDisabled, setAddModalDisabled] = useState(true);\n const [modal, setModal] = useState(false);\n const [recordsCount, setRecordsCount] = useState();\n const [hideAddButton,setHideAddButton] = useState(false);\n const [selectedCountry, setSelectedCountry] = useState();\n const [selectedState, setSelectedState] = useState();\n const [selectedDistrict, setSelectedDistrict] = useState();\n const [addButtonDisabled, setAddButtonDisabled] = useState(true);\n const [breadCrumbsData, setBreadCrumbsData] = useState([]);\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [pageLimit, setPageLimit] = useState(10);\n const [modalData, setModalData] = useState();\n const [deleteConfirmModal, setDeleteConfirmModal] = useState(false);\n const [editButtonClicked, setEditButtonClicked] = useState(false);\n const [selectedDeleteRowId, setSelectedDeleteRowId] = useState();\n const [editButtonDisabled, setEditButtonDisabled] = useState(true);\n const [sideBarInitialValues,setSideBarInitialValues] = useState();\n const [updateClicked, setUpdateClicked] = useState(false);\n const [formData, setFormData] = useState({\n season: '',\n type: '',\n type_id: '',\n start_month: '',\n start_day: '',\n end_month: '',\n end_day: ''\n });\n const nextProps = useSelector((state) => ({\n manageCropsList: state.ManageCrops.manageCropsListData || null,\n isManageCropsListRequesting: state.ManageCrops.isManageCropsListRequesting,\n manageCropsSeasonsData: state.ManageCrops.manageCropsSeasonsData || null,\n CountryListData: state.Location.countryList || null,\n isManageCropsAddRequesting: state.ManageCrops.isManageCropsAddRequesting,\n manageCropsAddData: state.ManageCrops.manageCropsAddData || null,\n manageCropsDataById: state.ManageCrops.manageCropsListByIdData || null,\n manageCropsDeleteData: state.ManageCrops.manageCropsDeleteData || null,\n manageCropsUpdatedata: state.ManageCrops.manageCropsUpdateData || null,\n manageCropsListError: state.ManageCrops.manageCropsListDataError || null,\n manageCropsAddDataError: state.ManageCrops.manageCropsAddDataError,\n userDetailData: state.userList.userDetailData || null,\n }));\n\n useEffect(() => {\n if (isSuperAdmin() || isStaffUser()) {\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\n dispatch(manageCropsListRequest({ page: pageNumber, limit: pageLimit }));\n dispatch(manageCropsSeasonsRequest());\n } else{\n history.push('/home');\n }\n dispatch(userDetailRequest());\n }, []);\n\n useEffect(() => {\n if(nextProps.userDetailData){\n let a = [];\n const {\n data: { result },\n } = nextProps.userDetailData;\n if(result){\n result.user_permissions.map((i) => {\n a.push(i.codename);\n })\n if(isSuperAdmin() || a?.includes(\"add_crop\")){\n setHideAddButton(true);\n }\n setUserDetailData(a);\n }\n }\n },[nextProps.userDetailData])\n\n useEffect(() => {\n if(nextProps.manageCropsListError){\n const {\n data: { response },\n } = nextProps.manageCropsListError;\n if(response){\n setRecordsCount(0);\n setManageCropsList([]);\n setPageCount(0);\n }\n }\n },[nextProps.manageCropsListError])\n\n useEffect(() => {\n if (nextProps.manageCropsAddData) {\n const {\n data: { result },\n } = nextProps.manageCropsAddData;\n if(result){\n showSuccess(result);\n setModal(false);\n setBreadCrumbsData({country:\"\",state:\"\",district:\"\"})\n setSelectedCountry('');\n setSelectedState('');\n setSelectedDistrict('');\n setStateList([]);\n setDistrictList([]);\n let sideBarInitialValuesList= {\n country:\"\",state:\"\",district:\"\"\n }\n setSideBarInitialValues(sideBarInitialValuesList);\n let filterInitialValues = {\n season: {\n value: '',\n label: '',\n id: '',\n },\n breadCrumbs: {},\n };\n setModalData(filterInitialValues)\n setFormData({\n season: '',\n type: '',\n type_id: '',\n start_month: '',\n start_day: '',\n end_month: '',\n end_day: ''\n })\n dispatch(manageCropsListRequest({ page: pageNumber, limit: 10 }));\n }\n }\n }, [nextProps.manageCropsAddData]);\n\n\n useEffect(() => {\n if (nextProps.manageCropsDeleteData) {\n const {\n data: { result },\n } = nextProps.manageCropsDeleteData;\n if(result){\n showSuccess(result);\n setPageNumber(1);\n dispatch(manageCropsListRequest({page: 1, limit: 10 }));\n }\n }\n }, [nextProps.manageCropsDeleteData]);\n\n useEffect(() => {\n if (nextProps.manageCropsUpdatedata) {\n const {\n data: { result },\n } = nextProps.manageCropsUpdatedata;\n if(result){\n showSuccess(result);\n setModal(false);\n setSelectedCountry('');\n setSelectedState('');\n setSelectedDistrict('');\n setStateList([]);\n setDistrictList([]);\n setAddModalDisabled(true);\n let sideBarInitialValuesList= {\n country:\"\",state:\"\",district:\"\"\n }\n setSideBarInitialValues(sideBarInitialValuesList);\n setFormData({\n season: '',\n type: '',\n type_id: '',\n start_month: '',\n start_day: '',\n end_month: '',\n end_day: ''\n })\n dispatch(manageCropsListRequest({ page: pageNumber, limit: 10 }));\n }\n }\n }, [nextProps.manageCropsUpdatedata]);\n\n useEffect(() => {\n return () => {\n dispatch(manageCropsAddSuccess({}));\n dispatch(manageCropsDeleteSuccess({}));\n dispatch(manageCropsListByIdSuccess({}));\n dispatch(manageCropsUpdateSuccess({}));\n }\n },[])\n\n useEffect(() => {\n if (nextProps.manageCropsDataById) {\n if (nextProps.manageCropsDataById.data.result) {\n const {\n data: { result },\n } = nextProps.manageCropsDataById;\n if (result) {\n let filterInitialValues = {\n season: {\n value: result[0].season_name,\n label: result[0].season_name,\n id: result[0].season_id,\n },\n from_month: {\n value:result[0].start_month,\n label: MONTHS.find((i)=> i.value === result[0].start_month)?.label,\n id: result[0].start_month,\n },\n from_day: {\n value:result[0].start_day, \n label:result[0].start_day,\n id:result[0].start_day,\n },\n to_month: {\n value:result[0].end_month,\n label:MONTHS.find((i)=> i.value === result[0].end_month)?.label,\n id:result[0].end_month,\n },\n to_day: {\n value:result[0].end_day ,\n label:result[0].end_day,\n id:result[0].end_day\n },\n breadCrumbs: result[0].location_name,\n };\n formData.season = result[0].season_id;\n formData.start_day = result[0].start_day;\n formData.start_month = result[0].start_month;\n formData.end_day = result[0].end_day;\n formData.end_month = result[0].end_month;\n formData.type = result[0].type;\n formData.type_id = result[0].type_id;\n formData.id = result[0].id;\n setFormData({ ...formData });\n setModal(true);\n setModalData(filterInitialValues);\n }\n }\n }\n }, [nextProps.manageCropsDataById]);\n\n useEffect(() => {\n if (nextProps.CountryListData) {\n const { result } = nextProps.CountryListData;\n if (result) {\n if (selectedDropdown === 'country') {\n setCountryList(result);\n } else if (selectedDropdown === 'state') {\n setStateList(result);\n } else if (selectedDropdown === 'district') {\n setDistrictList(result);\n }\n }\n }\n }, [nextProps.CountryListData]);\n useEffect(() => {\n if (nextProps.manageCropsList) {\n const {\n data: { result },\n } = nextProps.manageCropsList;\n if (result) {\n setManageCropsList(result.results);\n setRecordsCount(result.results.length);\n setPageCount(result.count);\n }\n }\n }, [nextProps.manageCropsList]);\n\n useEffect(() => {\n if (nextProps.manageCropsSeasonsData) {\n const {\n data: { result },\n } = nextProps.manageCropsSeasonsData;\n if (result) {\n let list = [];\n result.map((i) => {\n list.push({\n value: i.id,\n label: i.name,\n });\n });\n setManageCropsSeasonsList(list);\n }\n }\n }, [nextProps.manageCropsSeasonsData]);\n\n useEffect(() => {\n if (formData.season !== '' && formData.start_day !== '' && formData.end_day !== '') {\n setAddButtonDisabled(false);\n }\n }, [formData]);\n\n useEffect(() => {\n if(formData.type_id === ''){\n dispatch(manageCropsListRequest({ page: pageNumber, limit: pageLimit }));\n }\n }, [pageLimit, pageNumber]);\n\n const handleSelectedSeason = (item) => {\n if (editButtonClicked) {\n setEditButtonDisabled(false);\n }\n formData.season = item.id;\n setFormData({ ...formData });\n };\n\n const handleFromMonth = (item) => {\n if (editButtonClicked) {\n setEditButtonDisabled(false);\n }\n formData.start_month = item.id;\n setFormData({ ...formData });\n };\n\n const handleFromDay = (item) => {\n if (editButtonClicked) {\n setEditButtonDisabled(false);\n }\n formData.start_day = item.id;\n setFormData({ ...formData });\n };\n\n const handleToMonth = (item) => {\n if (editButtonClicked) {\n setEditButtonDisabled(false);\n }\n formData.end_month = item.id;\n setFormData({ ...formData });\n };\n\n const handleToDay = (item) => {\n if (editButtonClicked) {\n setEditButtonDisabled(false);\n }\n formData.end_day = item.id;\n setFormData({ ...formData });\n };\n\n const handlePageSize = (value) => {\n setPageLimit(value);\n setPageNumber(1);\n };\n\n const handleUpdate = () => {\n setUpdateClicked(true);\n setEditButtonDisabled(true);\n dispatch(manageCropsUpdateRequest(formData));\n };\n\n const handleDeleteConfirm = (bool_value, value) => {\n setDeleteConfirmModal(bool_value);\n if (value === 'yes') {\n dispatch(manageCropsDeleteRequest({ id: selectedDeleteRowId }));\n }\n };\n const handleSelectedCountry = (newValue, action) => {\n setSelectedState(\"\");\n setSelectedDistrict(\"\");\n if(newValue.value === 'select'){\n setSelectedCountry('');\n setStateList([]);\n setDistrictList([]);\n formData.type = '';\n formData.type_id = '';\n dispatch(\n manageCropsListRequest({\n type: '',\n type_id: '',\n page: 1,\n limit: pageLimit,\n }),\n );\n setAddModalDisabled(true);\n }else{\n setSelectedCountry(newValue);\n setSelectedDropdown('state');\n formData.type = 'country';\n formData.type_id = newValue.value;\n setFormData({ ...formData });\n dispatch(\n manageCropsListRequest({\n type: 'country',\n type_id: newValue.value,\n page: 1,\n limit: pageLimit,\n }),\n );\n dispatch(getCountryRequest({ location_type: LOCATION.State, parent_id: newValue.value }));\n setAddModalDisabled(false);\n setPageNumber(1);\n }\n };\n\n const handlePageNumber = (value) => {\n formData.type = '';\n formData.type_id = '';\n setFormData(formData);\n setPageNumber(value);\n };\n\n const handleBreadCrumbsData = (values) => {\n setBreadCrumbsData(values);\n };\n\n const handleSelectedState = (newValue, action) => {\n setSelectedDistrict(\"\");\n if(newValue.value === 'select'){\n setSelectedState('');\n formData.type = 'country';\n formData.type_id = selectedCountry.value;\n setFormData({ ...formData });\n setDistrictList([]);\n dispatch(\n manageCropsListRequest({\n type: 'country',\n type_id: selectedCountry.value,\n page: pageNumber,\n limit: pageLimit,\n }),\n );\n }else{\n setSelectedState(newValue);\n setSelectedDropdown('district');\n formData.type = 'state';\n formData.type_id = newValue.value;\n setFormData({ ...formData });\n dispatch(\n manageCropsListRequest({\n type: 'state',\n type_id: newValue.value,\n page: pageNumber,\n limit: pageLimit,\n }),\n );\n dispatch(getCountryRequest({ location_type: LOCATION.District, parent_id: newValue.value }));\n setAddModalDisabled(false);\n }\n };\n\n const handleSelectedDistrict = (newValue, action) => {\n if(newValue.value === 'select'){\n setSelectedDistrict('');\n formData.type = 'state';\n formData.type_id = selectedState.value;\n setFormData({ ...formData });\n dispatch(\n manageCropsListRequest({\n type: 'state',\n type_id: selectedState.value,\n page: pageNumber,\n limit: pageLimit,\n }),\n );\n }\n else{\n setSelectedDistrict(newValue);\n formData.type = 'district';\n formData.type_id = newValue.value;\n setFormData({ ...formData });\n dispatch(\n manageCropsListRequest({\n type: 'district',\n type_id: newValue.value,\n page: pageNumber,\n limit: pageLimit,\n }),\n );\n setAddModalDisabled(false);\n }\n };\n\n const handleAddClick = (value) => {\n if (value === 'add') {\n dispatch(manageCropsAddRequest(formData));\n setAddModalDisabled(true);\n } else if (value === 'cancel') {\n setAddModalDisabled(true);\n }\n };\n\n const handleSetModal = (value) => {\n setModal(value);\n setEditButtonClicked(false);\n setEditButtonDisabled(true);\n setAddButtonDisabled(true);\n };\n\n const handleResetInitialValues = () => {\n let filterInitialValues = {\n season: { value: '', label: '', id: '' },\n breadCrumbs: '',\n from_month: '',\n from_day: '',\n to_month: '',\n to_day: '',\n };\n setModalData(filterInitialValues);\n };\n\n const handleRowClick = (value) => {\n setEditButtonClicked(true);\n dispatch(manageCropsListByIdRequest({ id: value.id }));\n };\n\n const handleDeleteById = (value) => {\n setDeleteConfirmModal(true);\n setSelectedDeleteRowId(value.id);\n };\n\n const handleManageCropsBackButton = () => {\n history.push(\"/settingsDashboard\");\n }\n\n\n return (\n {t('MANAGE_CROP.DELETE_MANAGE_CROPS')}
\n\n
\n );\n};\nexport default ManageCrops;","export default __webpack_public_path__ + \"static/media/dummy_resource_image.27efe332.jpg\";","import React from 'react';\nimport { Card, CardBody, Col, Row } from 'reactstrap';\nimport { Field, reduxForm, change } from 'redux-form';\nimport { useDispatch } from 'react-redux';\nimport _ from 'lodash';\nimport {\n renderReactSelectInputField,\n renderTextField,\n} from '../../Components/common/renderInputField';\nimport Button from 'reactstrap-button-loader';\nimport { t } from 'react-multi-lang';\nimport { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md';\nimport {DATE_FORMAT} from '../../Components/constants'\nimport moment from 'moment';\nconst Filter = props => {\n const {\n isHideBar,\n setHideBar,\n categoryList,\n reset,\n handleReset,\n } = props;\n\n // const nextProps = useSelector(state => ({\n // isGetAllNewsFeedRequesting: state.NewsFeed.isGetAllNewsFeedRequesting,\n // }));\n const dispatch = useDispatch();\n const renderAPIParameterOptions = (list, action_name) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n if (action_name === 'category') {\n let default_option = { value: 'select', label: 'select', id: 'select' };\n options.push(default_option);\n }\n params.map(param => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n };\n\n const handleFilterCategoryChange = data => {\n dispatch(change('FilterForm', 'filter_type', ''));\n props.handleFilterCategoryChange(data);\n };\n\n const handleFilterTitleChange = e => {\n props.filterTitleChange(e?.target?.value);\n };\n const handleFilterDate = e => {\n props?.filterDateHandler(e?.target?.value);\n };\n const handleClearFilters = () => {\n reset('FilterForm');\n handleReset();\n };\n return (\n <>\n {isHideBar ? (\n \n handleManageCropsBackButton()}/>\n
\n {t('MANAGE_CROP.MANAGE_CROP')}
\n\n
\n \n \n {t('FILTER.EXPAND_BAR')}\n \n setHideBar(!isHideBar)}\n size={25}\n />\n \n \n
\n ) : (\n \n onEditorChange(Text)}\n />\n
\n Note:- For better user experience, kindly choose font family:\"National/verdana\" and font size:\"14px\".
\n \n );\n};\n\nexport default DraftEditor;\n","import React from 'react';\nimport TimePicker from 'react-time-picker';\n\nconst EventTimePicker = props => {\n const { timeChange, time } = props;\n const handleTime = value => {\n timeChange(value);\n };\n\n return (\n\n
\n \n );\n};\nexport default reduxForm({\n form: 'news-add-form',\n enableReinitialize: true,\n})(CreateNewsForm);\n","export const NEWS_FEED_CATEGORIES_CONST = {\n NEWS_FEED_CATEGORIES_REQUEST: 'NEWS_FEED_CATEGORIES_REQUEST',\n NEWS_FEED_CATEGORIES_SUCCESS: 'NEWS_FEED_CATEGORIES_SUCCESS',\n NEWS_FEED_CATEGORIES_FAILED: 'NEWS_FEED_CATEGORIES_FAILED',\n};\n\nexport const NEWS_FEED_SUB_CATEGORIES_CONST = {\n NEWS_FEED_SUB_CATEGORIES_REQUEST: 'NEWS_FEED_SUB_CATEGORIES_REQUEST',\n NEWS_FEED_SUB_CATEGORIES_SUCCESS: 'NEWS_FEED_SUB_CATEGORIES_SUCCESS',\n NEWS_FEED_SUB_CATEGORIES_FAILED: 'NEWS_FEED_SUB_CATEGORIES_FAILED',\n};\n\nexport const GET_ALL_NEWS_FEED_CONST = {\n GET_ALL_NEWS_FEED_REQUEST: 'GET_ALL_NEWS_FEED_REQUEST',\n GET_ALL_NEWS_FEED_SUCCESS: 'GET_ALL_NEWS_FEED_SUCCESS',\n GET_ALL_NEWS_FEED_FAILED: 'GET_ALL_NEWS_FEED_FAILED',\n};\n\nexport const GET_BY_ID_NEWS_FEED_CONST = {\n GET_BY_ID_NEWS_FEED_REQUEST: 'GET_BY_ID_NEWS_FEED_REQUEST',\n GET_BY_ID_NEWS_FEED_SUCCESS: 'GET_BY_ID_NEWS_FEED_SUCCESS',\n GET_BY_ID_NEWS_FEED_FAILED: 'GET_BY_ID_NEWS_FEED_FAILED',\n};\n\nexport const NEWS_FEED_ADD_CONST = {\n NEWS_FEED_ADD_REQUEST: 'NEWS_FEED_ADD_REQUEST',\n NEWS_FEED_ADD_SUCCESS: 'NEWS_FEED_ADD_SUCCESS',\n NEWS_FEED_ADD_FAILED: 'NEWS_FEED_ADD_FAILED',\n};\n\nexport const NEWS_FEED_DELETE_CONST = {\n NEWS_FEED_DELETE_REQUEST: 'NEWS_FEED_DELETE_REQUEST',\n NEWS_FEED_DELETE_SUCCESS: 'NEWS_FEED_DELETE_SUCCESS',\n NEWS_FEED_DELETE_FAILED: 'NEWS_FEED_DELETE_FAILED',\n};\n\nexport const NEWS_FEED_UPDATE_CONST = {\n NEWS_FEED_UPDATE_REQUEST: 'NEWS_FEED_UPDATE_REQUEST',\n NEWS_FEED_UPDATE_SUCCESS: 'NEWS_FEED_UPDATE_SUCCESS',\n NEWS_FEED_UPDATE_FAILED: 'NEWS_FEED_UPDATE_FAILED',\n};\n\nexport const NEWS_FEED_SUBSCRIBE_CONST = {\n NEWS_FEED_SUBSCRIBE_REQUEST: 'NEWS_FEED_SUBSCRIBE_REQUEST',\n NEWS_FEED_SUBSCRIBE_SUCCESS: 'NEWS_FEED_SUBSCRIBE_SUCCESS',\n NEWS_FEED_SUBSCRIBE_FAILED: 'NEWS_FEED_SUBSCRIBE_FAILED',\n};\n\nexport const NEWS_FEED_CHANGE_STATUS_CONST = {\n NEWS_FEED_CHANGE_STATUS_REQUEST: 'NEWS_FEED_CHANGE_STATUS_REQUEST',\n NEWS_FEED_CHANGE_STATUS_SUCCESS: 'NEWS_FEED_CHANGE_STATUS_SUCCESS',\n NEWS_FEED_CHANGE_STATUS_FAILED: 'NEWS_FEED_CHANGE_STATUS_FAILED',\n}","import {\n NEWS_FEED_CATEGORIES_CONST,\n NEWS_FEED_SUB_CATEGORIES_CONST,\n NEWS_FEED_ADD_CONST,\n GET_ALL_NEWS_FEED_CONST,\n NEWS_FEED_DELETE_CONST,\n NEWS_FEED_UPDATE_CONST,\n GET_BY_ID_NEWS_FEED_CONST,\n NEWS_FEED_SUBSCRIBE_CONST,\n NEWS_FEED_CHANGE_STATUS_CONST\n} from './newsFeedConsts';\n\nexport const newsFeedCategoriesRequest = (data) => ({\n type: NEWS_FEED_CATEGORIES_CONST.NEWS_FEED_CATEGORIES_REQUEST,\n payload: data,\n});\n\nexport const newsFeedCategoriesSuccess = (response) => ({\n type: NEWS_FEED_CATEGORIES_CONST.NEWS_FEED_CATEGORIES_SUCCESS,\n payload: response,\n});\n\nexport const newsFeedCategoriesFailed = (error) => ({\n type: NEWS_FEED_CATEGORIES_CONST.NEWS_FEED_CATEGORIES_FAILED,\n payload: error,\n});\n\nexport const newsFeedSubCategoriesRequest = (data) => ({\n type: NEWS_FEED_SUB_CATEGORIES_CONST.NEWS_FEED_SUB_CATEGORIES_REQUEST,\n payload: data,\n});\n\nexport const newsFeedSubCategoriesSuccess = (response) => ({\n type: NEWS_FEED_SUB_CATEGORIES_CONST.NEWS_FEED_SUB_CATEGORIES_SUCCESS,\n payload: response,\n});\n\nexport const newsFeedSubCategoriesFailed = (error) => ({\n type: NEWS_FEED_SUB_CATEGORIES_CONST.NEWS_FEED_SUB_CATEGORIES_FAILED,\n payload: error,\n});\n\nexport const newsFeedAddRequest = (data) => ({\n type: NEWS_FEED_ADD_CONST.NEWS_FEED_ADD_REQUEST,\n payload: data,\n});\n\nexport const newsFeedAddSuccess = (response) => ({\n type: NEWS_FEED_ADD_CONST.NEWS_FEED_ADD_SUCCESS,\n payload: response,\n});\n\nexport const newsFeedAddFailed = (error) => ({\n type: NEWS_FEED_ADD_CONST.NEWS_FEED_ADD_FAILED,\n payload: error,\n});\n\nexport const getAllNewsFeedRequest = (data) => ({\n type: GET_ALL_NEWS_FEED_CONST.GET_ALL_NEWS_FEED_REQUEST,\n payload: data,\n});\n\nexport const getAllNewsFeedSuccess = (response) => ({\n type: GET_ALL_NEWS_FEED_CONST.GET_ALL_NEWS_FEED_SUCCESS,\n payload: response,\n});\n\nexport const getAllNewsFeedFailed = (error) => ({\n type: GET_ALL_NEWS_FEED_CONST.GET_ALL_NEWS_FEED_FAILED,\n payload: error,\n});\n\nexport const newsFeedDeleteRequest = (data) => ({\n type: NEWS_FEED_DELETE_CONST.NEWS_FEED_DELETE_REQUEST,\n payload: data,\n});\n\nexport const newsFeedDeleteSuccess = (response) => ({\n type: NEWS_FEED_DELETE_CONST.NEWS_FEED_DELETE_SUCCESS,\n payload: response,\n});\n\nexport const newsFeedDeleteFailed = (error) => ({\n type: NEWS_FEED_DELETE_CONST.NEWS_FEED_DELETE_FAILED,\n payload: error,\n});\n\nexport const newsFeedUpdateRequest = (data) => ({\n type: NEWS_FEED_UPDATE_CONST.NEWS_FEED_UPDATE_REQUEST,\n payload: data,\n});\n\nexport const newsFeedUpdateSuccess = (response) => ({\n type: NEWS_FEED_UPDATE_CONST.NEWS_FEED_UPDATE_SUCCESS,\n payload: response,\n});\n\nexport const newsFeedUpdateFailed = (error) => ({\n type: NEWS_FEED_UPDATE_CONST.NEWS_FEED_UPDATE_FAILED,\n payload: error,\n});\n\nexport const getByIdNewsFeedRequest = (data) => ({\n type: GET_BY_ID_NEWS_FEED_CONST.GET_BY_ID_NEWS_FEED_REQUEST,\n payload: data,\n});\n\nexport const getByIdNewsFeedSuccess = (response) => ({\n type: GET_BY_ID_NEWS_FEED_CONST.GET_BY_ID_NEWS_FEED_SUCCESS,\n payload: response,\n});\n\nexport const getByIdNewsFeedFailed = (error) => ({\n type: GET_BY_ID_NEWS_FEED_CONST.GET_BY_ID_NEWS_FEED_FAILED,\n payload: error,\n});\n\n\nexport const subscribeNewsFeedRequest = (data) => ({\n type: NEWS_FEED_SUBSCRIBE_CONST.NEWS_FEED_SUBSCRIBE_REQUEST,\n payload: data,\n});\n\nexport const subscribeNewsFeedSuccess = (response) => ({\n type: NEWS_FEED_SUBSCRIBE_CONST.NEWS_FEED_SUBSCRIBE_SUCCESS,\n payload: response,\n});\n\nexport const subscribeNewsFeedFailed = (error) => ({\n type: NEWS_FEED_SUBSCRIBE_CONST.NEWS_FEED_SUBSCRIBE_FAILED,\n payload: error,\n});\n\nexport const newsFeedChangeStatusRequest = (data) => ({\n type: NEWS_FEED_CHANGE_STATUS_CONST.NEWS_FEED_CHANGE_STATUS_REQUEST,\n payload: data\n})\n\nexport const newsFeedChangeStatusSuccess = (response) => ({\n type: NEWS_FEED_CHANGE_STATUS_CONST.NEWS_FEED_CHANGE_STATUS_SUCCESS,\n payload: response\n})\n\nexport const newsFeedChangeStatusFailed = (error) => ({\n type: NEWS_FEED_CHANGE_STATUS_CONST.NEWS_FEED_CHANGE_STATUS_FAILED,\n payload: error\n})\n\n","import React from 'react';\nimport { Row, Col, Modal, ModalBody } from 'reactstrap';\nimport { AiFillDelete } from 'react-icons/ai';\nimport { GoCircleSlash } from 'react-icons/go';\nimport { GrFormClose } from 'react-icons/gr';\nimport { AiFillCheckCircle } from 'react-icons/ai';\nimport { t } from 'react-multi-lang';\n\nconst AlertModal = props => {\n const handleChanges = data => {\n if (props.onDeleteClick) {\n props.onClick(data.id);\n } else if (props.onPublishClick) {\n props.onClick(data, { publish: !data.status });\n }\n };\n\n return (\n <>\n \n {fromListing ? (\n
\n {t('NEWS_FEED.MODIFIED_NEWS')}
\n ) : (\n{t('NEWS_FEED.ADD_NEWS')}
\n )}\n\n {\n closeRightBar();\n }}\n />\n
\n \n \n
\n \n \n \n \n \n
\n {props.onDeleteClick && \n {t('NEWS_FEED.ARE_YOU_SURE')}\n
\n \n {props.onPublishClick ? (\n <>{t('NEWS_FEED.THIS_WILL')} {props.data.status ? 'Unpublish' : 'Publish'} {t('NEWS_FEED.THE_NEWS_FEED')}\n ) : (\n <>{t('NEWS_FEED.DELETE_NEWS_TEXT')}\n )}\n
\n \n \n handleChanges(props.data)}\n >\n {props?.onDeleteClick\n ? t('NEWS_FEED.DELETE')\n : props?.onPublishClick && props.data.status\n ? t('NEWS_FEED.UNPUBLISH')\n : t('NEWS_FEED.PUBLISH')}\n \n
\n \n \n \n \n \n \n );\n};\n\nexport default AlertModal;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Row,\n Card,\n Col,\n} from 'reactstrap';\nimport { convertTimeFormat, isStaffUser, isSuperAdmin } from '../../Components/common/utils';\nimport { t } from 'react-multi-lang';\nimport _ from 'lodash';\nimport ReactTooltip from 'react-tooltip';\nimport RightArrow from '../../assets/Images/back-button.svg';\nimport DummyResourceImage from '../../assets/Images/dummy_resource_image.jpg';\nimport { useHistory } from 'react-router-dom';\nimport { BiPlus } from 'react-icons/bi';\nimport Loader from '../../Components/common/loader';\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\nimport moment from 'moment';\nimport Filter from './Filter';\nimport CreateNewsForm from './CreateNewsForm';\nimport { showError, showSuccess } from '../../Components/Notifications';\nimport { FILE_EXTENSION } from '../../Components/constants/index';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport {\n getByIdNewsFeedRequest,\n newsFeedDeleteRequest,\n newsFeedCategoriesRequest,\n newsFeedSubCategoriesRequest,\n newsFeedAddRequest,\n getAllNewsFeedRequest,\n newsFeedUpdateRequest,\n newsFeedAddSuccess,\n getAllNewsFeedSuccess,\n getByIdNewsFeedSuccess,\n newsFeedUpdateSuccess,\n newsFeedDeleteSuccess,\n newsFeedCategoriesSuccess,\n newsFeedChangeStatusRequest,\n newsFeedChangeStatusSuccess,\n newsFeedSubCategoriesSuccess,\n} from '../../redux/newsFeed/newsFeedAction';\nimport AlertModal from './AlertModal';\n\nconst ManageNews = props => {\n let history = useHistory();\n let form = new FormData();\n const dispatch = useDispatch();\n const [toggleRightBar, setToggleRightBar] = useState(false);\n const [isHideBar, setHideBar] = useState(false);\n const [newsFeedDataById, setNewsFeedDataById] = useState();\n const [categoryList, setCategoryList] = useState([]);\n const [pageCount, setPageCount] = useState();\n const [subCategoryList, setSubCategoryList] = useState([]);\n const [selectedFilterCategory, setSelectedFilterCategory] = useState();\n const [filterSubCategoriesList, setFilterSubCategoriesList] = useState();\n const [isResourceSelected, setIsResourceSelected] = useState(false);\n const [selectedCategory, setSelectedCategory] = useState();\n const [typeList, setTypeList] = useState([]);\n const [content, setContent] = useState();\n const [time, setTime] = useState('');\n const [pageNumber, setPageNumber] = useState(1);\n const [fromListing, setFromListing] = useState(false);\n const [fileType, setFileType] = useState();\n const [filterChanges, setFilterChanges] = useState({\n filterCategory: '',\n filterTitle: '',\n filterDate: '',\n });\n const [imageFile, setImageFile] = useState();\n const [uploadedFile, setUploadedFile] = useState();\n const [saveButtonDisabled, setSaveButtonDisabled] = useState(true);\n const [newsFeedList, setNewsFeedList] = useState([]);\n const [formReset, setFormReset] = useState();\n const [filterCategoryList, setFilterCategoryList] = useState();\n const [isPublishModal, setIsPublishModal] = useState(false);\n const [isDeleteModal, setIsDeleteModal] = useState(false);\n const [updateNewsFeed, setUpdateNewsFeed] = useState('');\n const [showChangeStatus, setShowChangeStatus] = useState();\n const [formData, setFormData] = useState({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n start_date: '',\n location: '',\n publish_status: false,\n });\n const HIDE_CATEGORIES = {\n IWMI_NEWS: 'iwmi_news',\n RESOURCES: 'resources',\n EXTERNAL_NEWS: 'external_news',\n EVENTS: 'events',\n };\n const handleManageCropsBackButton = () => {\n history.push('/settingsDashboard');\n };\n\n const { NewsFeed } = useSelector(state => ({\n NewsFeed: state.NewsFeed,\n }));\n\n useEffect(() => {\n window.scrollTo({ top: 0, behavior: 'auto' });\n if (isSuperAdmin() || isStaffUser()) {\n dispatch(newsFeedCategoriesRequest());\n dispatch(getAllNewsFeedRequest({ page: pageNumber }));\n dispatch(getByIdNewsFeedSuccess({}));\n setFromListing(false);\n } else {\n history.push('/home');\n }\n }, []);\n\n useEffect(() => {\n if (NewsFeed.newsFeedCategoriesListData) {\n const {\n data: { result },\n } = NewsFeed.newsFeedCategoriesListData;\n if (result.length) {\n let a = [];\n result.map(i => {\n return a.push({\n id: i.id,\n name: i.category_name,\n slug: i.slug,\n });\n });\n let filteredList = a.filter(\n data =>\n data.slug !== HIDE_CATEGORIES.IWMI_NEWS &&\n data.slug !== HIDE_CATEGORIES.EVENTS &&\n data.slug !== HIDE_CATEGORIES.RESOURCES,\n );\n setCategoryList(filteredList);\n setFilterCategoryList(filteredList);\n }\n }\n }, [NewsFeed.newsFeedCategoriesListData]);\n useEffect(() => {\n if (NewsFeed.newsFeedSubCategoriesListData) {\n const {\n data: { result },\n } = NewsFeed.newsFeedSubCategoriesListData;\n if (result.length) {\n let a = [];\n result.map(i => {\n return a.push({\n id: i.id,\n name: i.sub_category_name,\n });\n });\n setSubCategoryList(a);\n if (!_.isEmpty(selectedFilterCategory)) setFilterSubCategoriesList(a);\n }\n }\n }, [NewsFeed.newsFeedSubCategoriesListData]);\n\n useEffect(() => {\n if (\n !_.isEmpty(formData?.title) &&\n !_.isEmpty(formData?.description) &&\n !_.isEmpty(formData?.category_id) &&\n (selectedCategory === HIDE_CATEGORIES.EXTERNAL_NEWS ||\n !_.isEmpty(imageFile) ||\n !_.isEmpty(uploadedFile)) &&\n ((selectedCategory === HIDE_CATEGORIES.EVENTS && !_.isEmpty(formData?.event_time)) ||\n selectedCategory !== HIDE_CATEGORIES.EVENTS)\n ) {\n setSaveButtonDisabled(false);\n } else {\n setSaveButtonDisabled(true);\n }\n }, [formData, imageFile]);\n\n useEffect(() => {\n if (NewsFeed.newsFeedAddData) {\n const {\n data: { result },\n } = NewsFeed.newsFeedAddData;\n if (result) {\n showSuccess(result);\n setImageFile();\n setContent();\n setIsResourceSelected(false);\n setToggleRightBar(!toggleRightBar);\n setSelectedCategory();\n setUploadedFile();\n setFormData({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n publish_status: false,\n });\n setNewsFeedDataById('');\n setFormReset(true);\n setPageNumber(1);\n setNewsFeedList([]);\n dispatch(getAllNewsFeedRequest({ page: 1 }));\n }\n }\n }, [NewsFeed.newsFeedAddData]);\n\n useEffect(() => {\n if (NewsFeed.newsFeedAddDataError || NewsFeed.newsFeedAddDataNetworkError) {\n let dataError = NewsFeed.newsFeedAddDataError ? NewsFeed.newsFeedAddDataError : '';\n if (dataError) {\n let {\n data: {\n response: { data: responseData },\n },\n } = dataError;\n if (responseData) {\n if (responseData?.exception) {\n showError(responseData?.exception);\n }\n }\n }\n setImageFile();\n setContent();\n setIsResourceSelected(false);\n setToggleRightBar(!toggleRightBar);\n setSelectedCategory();\n setUploadedFile();\n setFormData({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n publish_status: false,\n });\n setNewsFeedDataById('');\n setFormReset(true);\n }\n }, [NewsFeed.newsFeedAddDataError, NewsFeed.newsFeedAddDataNetworkError]);\n\n useEffect(() => {\n if (NewsFeed.newsFeedUpdateDataError || NewsFeed.newsFeedUpdateDataNetworkError) {\n let dataError = NewsFeed.newsFeedUpdateDataError ? NewsFeed.newsFeedUpdateDataError : '';\n if (dataError) {\n let {\n data: {\n response: { data: responseData },\n },\n } = dataError;\n if (responseData) {\n if (responseData?.exception) {\n showError(responseData?.exception);\n }\n }\n }\n setImageFile();\n setContent();\n setIsResourceSelected(false);\n setToggleRightBar(!toggleRightBar);\n setSelectedCategory();\n setUploadedFile();\n setFormData({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n publish_status: false,\n });\n setNewsFeedDataById('');\n setFormReset(true);\n }\n }, [NewsFeed.newsFeedUpdateDataError, NewsFeed.newsFeedUpdateDataNetworkError]);\n\n useEffect(() => {\n if (NewsFeed.newsFeedUpdateData) {\n const {\n data: { result },\n } = NewsFeed.newsFeedUpdateData;\n if (result) {\n setIsPublishModal(false);\n showSuccess(result);\n setImageFile();\n setIsResourceSelected();\n setSelectedCategory();\n setToggleRightBar(!toggleRightBar);\n setContent();\n setUploadedFile();\n setFormData({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n publish_status: false,\n });\n setNewsFeedDataById('');\n setFormReset(true);\n setPageNumber(1);\n setNewsFeedList([]);\n window.scrollTo({ top: 0, behavior: 'auto' });\n dispatch(getAllNewsFeedRequest({ page: 1 }));\n }\n }\n }, [NewsFeed.newsFeedUpdateData]);\n\n useEffect(() => {\n if (NewsFeed.newsFeedChangeStatusData) {\n const {\n data: { result },\n } = NewsFeed.newsFeedChangeStatusData;\n if (result) {\n if (showChangeStatus) {\n showSuccess(t('NEWS_FEED.SHOW_PUBLISH'));\n } else {\n showSuccess(t('NEWS_FEED.SHOW_UNPUBLISH'));\n }\n setIsPublishModal(false);\n setImageFile();\n setIsResourceSelected();\n setSelectedCategory();\n setToggleRightBar(false);\n setContent();\n setUploadedFile();\n setFormData({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n publish_status: false,\n });\n setFormReset(true);\n setPageNumber(1);\n setNewsFeedList([]);\n dispatch(getAllNewsFeedRequest({ page: 1 }));\n }\n }\n }, [NewsFeed.newsFeedChangeStatusData]);\n\n useEffect(() => {\n if (NewsFeed.newsFeedDeleteData) {\n const {\n data: { result },\n } = NewsFeed.newsFeedDeleteData;\n if (result) {\n setIsDeleteModal(false);\n showSuccess(result);\n setImageFile();\n setContent();\n setUploadedFile();\n setIsResourceSelected();\n setSelectedCategory();\n setToggleRightBar(false);\n setFormData({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n publish_status: false,\n });\n setFormReset(true);\n setPageNumber(1);\n setNewsFeedList([]);\n dispatch(getAllNewsFeedRequest({ page: 1 }));\n }\n }\n }, [NewsFeed.newsFeedDeleteData]);\n\n useEffect(() => {\n if (NewsFeed.getAllNewsFeedData) {\n let new_list = [];\n const {\n data: { result },\n } = NewsFeed.getAllNewsFeedData;\n if (result) {\n if (newsFeedList) {\n if (pageNumber > 1) {\n new_list = newsFeedList.concat(result.results);\n } else {\n new_list = result.results;\n }\n } else {\n new_list = result.results;\n }\n setNewsFeedList(new_list);\n setPageCount(result?.count);\n } else {\n setNewsFeedList([]);\n }\n }\n }, [NewsFeed.getAllNewsFeedData]);\n\n useEffect(() => {\n return () => {\n dispatch(newsFeedAddSuccess({}));\n dispatch(getAllNewsFeedSuccess({}));\n dispatch(newsFeedUpdateSuccess({}));\n dispatch(getByIdNewsFeedSuccess({}));\n dispatch(newsFeedChangeStatusSuccess({}));\n dispatch(newsFeedDeleteSuccess({}));\n dispatch(newsFeedCategoriesSuccess({}));\n dispatch(newsFeedSubCategoriesSuccess({}));\n };\n }, []);\n useEffect(() => {\n if (\n filterChanges &&\n (!_.isEmpty(filterChanges.filterCategory) ||\n !_.isEmpty(filterChanges.filterTitle) ||\n !_.isEmpty(filterChanges.filterDate))\n ) {\n dispatch(\n getAllNewsFeedRequest({\n data: {\n newsfeed_category_id: filterChanges?.filterCategory?.id,\n title: filterChanges?.filterTitle,\n updated_date: filterChanges?.filterDate,\n status: '',\n },\n }),\n );\n setNewsFeedList([]);\n setPageNumber(1);\n } else {\n dispatch(getAllNewsFeedRequest({ page: 1 }));\n }\n }, [filterChanges]);\n\n useEffect(() => {\n if (fromListing) {\n afterUpdate(NewsFeed.getByIdNewsFeedData);\n }\n }, [NewsFeed.getByIdNewsFeedData]);\n\n useEffect(() => {\n if (selectedCategory && selectedCategory === HIDE_CATEGORIES.RESOURCES) {\n setIsResourceSelected(true);\n }\n }, [selectedCategory]);\n\n const afterUpdate = res => {\n if (res) {\n const {\n data: { result },\n } = res;\n if (result?.length) {\n setToggleRightBar(true);\n let arr = {\n title: result[0]?.title,\n description: result[0]?.content,\n category: {\n id: result[0]?.newsfeed_category_id,\n value: result[0]?.newsfeed_category_name,\n label: result[0]?.newsfeed_category_name,\n },\n type: {\n id: result[0]?.newsfeed_sub_category_id,\n name: result[0]?.newsfeed_sub_category_name,\n label: result[0]?.newsfeed_sub_category_name,\n },\n upload_image: result[0].media_name,\n upload_file: result[0].upload_file,\n external_link: result[0].external_link,\n start_date: result[0].event_date,\n location: result[0].event_location,\n event_time: result[0].event_time,\n publish_status: result[0].status,\n };\n setContent(result[0].content);\n if (result[0]?.event_time) setTime(result[0]?.event_time);\n setSelectedCategory(result[0].newsfeed_category_slug);\n setNewsFeedDataById(arr);\n let fileExtension = result[0].media_name.split('.').pop();\n let latest_file;\n if (fileExtension === FILE_EXTENSION.MP4) {\n latest_file = new File([result[0].media_name], result[0].media_name, {\n type: 'video/mp4',\n });\n setFileType('video');\n } else {\n latest_file = new File([result[0].media_name], result[0].media_name, {\n type: 'img/jpeg',\n });\n setFileType('image');\n }\n formData.title = result[0].title;\n formData.description = result[0].content;\n formData.category_id = result[0].newsfeed_category_id;\n formData.sub_category_id = result[0].newsfeed_sub_category_id;\n formData.upload_image = '';\n formData.newsfeed_id = result[0].id;\n formData.external_link = result[0].external_link;\n formData.location = result[0].event_location;\n formData.start_date = result[0].event_date;\n formData.event_time = result[0].event_time;\n formData.upload_file = '';\n formData.publish_status = result[0].status;\n\n setFormData({ ...formData });\n setImageFile(result[0].media_name);\n if (result[0].newsfeed_category_slug === 'resources') {\n setUploadedFile(result[0].upload_file);\n setIsResourceSelected(true);\n }\n }\n }\n };\n\n const handleSubmit = () => {\n if (!saveButtonDisabled) {\n if (isResourceSelected) {\n form.append('upload_file', formData?.upload_file);\n }\n if (selectedCategory === HIDE_CATEGORIES.EVENTS) {\n form.append('event_date', formData?.start_date);\n form.append('event_location', formData?.location);\n form.append('event_time', formData?.event_time);\n }\n form.append('upload_media', formData?.upload_image);\n form.append('newsfeed_category_id', formData?.category_id);\n form.append('newsfeed_sub_category_id', formData?.sub_category_id);\n form.append('title', formData?.title);\n form.append('content', formData?.description);\n form.append('external_link', formData?.external_link);\n form.append('status', `${formData?.publish_status}`);\n setFormReset(false);\n dispatch(newsFeedAddRequest(form));\n }\n };\n\n const handlePublishChanges = (data, { publish }) => {\n form.append('newsfeed_id', data.id);\n form.append('status', `${_.capitalize(publish)}`);\n dispatch(newsFeedChangeStatusRequest(form));\n };\n\n const handleReadMore = data => {\n history.push(`/news-feed-details-page?newsFeedId=${data.id}&&from=${'bo'}`);\n };\n\n const handleUpdate = () => {\n if (!saveButtonDisabled) {\n if (isResourceSelected) {\n form.append('upload_file', formData?.upload_file);\n }\n if (selectedCategory === HIDE_CATEGORIES.EVENTS) {\n form.append('event_date', formData?.start_date);\n form.append('event_location', formData?.location);\n form.append('event_time', formData?.event_time);\n }\n form.append('upload_media', formData?.upload_image);\n form.append('newsfeed_category_id', formData?.category_id);\n form.append(\n 'newsfeed_sub_category_id',\n formData?.sub_category_id ? formData?.sub_category_id : '',\n );\n form.append('title', formData?.title);\n form.append('content', formData?.description);\n form.append('newsfeed_id', formData?.newsfeed_id);\n form.append('external_link', formData?.external_link);\n form.append('status', `${formData?.publish_status}`);\n setFormReset(false);\n dispatch(newsFeedUpdateRequest(form));\n }\n };\n\n const fileHandler = (value, fileExtension) => {\n if (fileExtension === FILE_EXTENSION.MP4) {\n setFileType('video');\n } else {\n setFileType('image');\n }\n\n formData.upload_image = value;\n setFormData({ ...formData });\n setImageFile(URL.createObjectURL(value));\n };\n\n const uploadFileHandler = value => {\n formData.upload_file = value;\n setFormData({ ...formData });\n setUploadedFile(value.name);\n };\n\n const closeRightBar = () => {\n setImageFile();\n setContent();\n setIsResourceSelected(false);\n setSelectedCategory();\n setUploadedFile();\n setFormData({\n title: '',\n description: '',\n category_id: '',\n sub_category_id: '',\n upload_image: '',\n external_link: '',\n upload_file: '',\n event_time: '',\n publish_status: false,\n });\n setFormReset(true);\n setFromListing(false);\n setNewsFeedDataById();\n dispatch(getByIdNewsFeedSuccess({}));\n setToggleRightBar(false);\n };\n\n const handleCategoryChange = data => {\n setSubCategoryList([]);\n formData.sub_category_id = '';\n formData.category_id = data.id;\n setFormData({ ...formData });\n setSelectedCategory(data.slug);\n if (data.slug === HIDE_CATEGORIES.RESOURCES) {\n setIsResourceSelected(true);\n } else {\n setIsResourceSelected(false);\n }\n dispatch(newsFeedSubCategoriesRequest({ category_id: data?.id }));\n };\n\n const handleSubCategoryChange = data => {\n formData.sub_category_id = data.id;\n setFormData({ ...formData });\n };\n\n const handleTitle = data => {\n formData.title = data;\n setFormData({ ...formData });\n };\n\n const handleDescription = data => {\n setContent(data);\n formData.description = data;\n setFormData({ ...formData });\n };\n\n const handleLink = data => {\n formData.external_link = data;\n setFormData({ ...formData });\n };\n\n const dateHandler = value => {\n formData.start_date = value;\n setFormData({ ...formData });\n };\n\n const timeHandler = value => {\n setTime(value);\n formData.event_time = value;\n setFormData({ ...formData });\n };\n const locationHandler = value => {\n formData.location = value;\n setFormData({ ...formData });\n };\n\n const publishHandler = value => {\n formData.publish_status = value;\n setFormData({ ...formData });\n };\n\n const handleDelete = value => {\n dispatch(newsFeedDeleteRequest({ newsfeed_id: value }));\n };\n\n const handlePublishModal = data => {\n setShowChangeStatus(data.status);\n setIsPublishModal(!isPublishModal);\n if (!isPublishModal) setUpdateNewsFeed(data);\n };\n\n const handleDeleteModal = data => {\n setIsDeleteModal(!isDeleteModal);\n if (!isDeleteModal) setUpdateNewsFeed(data);\n };\n\n const handleEdit = value => {\n setFromListing(true);\n dispatch(getByIdNewsFeedRequest({ newsfeed_id: value.id }));\n if (HIDE_CATEGORIES.RESOURCES === value.newsfeed_category_slug) {\n dispatch(newsFeedSubCategoriesRequest({ category_id: value?.newsfeed_category_id }));\n }\n };\n\n const handleFilterCategoryChange = data => {\n if (data.id === 'select') {\n filterChanges.filterCategory = '';\n } else {\n filterChanges.filterCategory = data;\n }\n setFilterChanges({ ...filterChanges });\n };\n\n const handleFilterTitleChange = data => {\n filterChanges.filterTitle = data;\n setFilterChanges({ ...filterChanges });\n };\n\n const filterDateHandler = data => {\n filterChanges.filterDate = data;\n setFilterChanges({ ...filterChanges });\n };\n\n const fetchNextNewsFeedData = () => {\n setPageNumber(pageNumber + 1);\n dispatch(\n getAllNewsFeedRequest({\n page: pageNumber + 1,\n data: {\n newsfeed_category_id: filterChanges?.filterCategory?.id,\n title: filterChanges?.filterTitle,\n updated_date: filterChanges?.filterDate,\n status: '',\n },\n }),\n );\n };\n const handleReset = () => {\n setFormData({});\n formData.title = '';\n formData.description = '';\n formData.category_id = '';\n formData.sub_category_id = '';\n formData.upload_image = '';\n formData.external_link = '';\n formData.upload_file = '';\n formData.start_date = '';\n formData.location = '';\n formData.publish_status = false;\n setFilterChanges(formData);\n };\n return (\n <>\n {isPublishModal && (\n <>\n \n {toggleRightBar && (\n \n \n \n
\n
\n
\n \n \n \n \n \n );\n};\nexport default ManageNews;\n","import React from 'react';\nimport Switch from 'react-switch';\nimport IndicesInfoIcons from '../../drought-monitor/IndicesInfoIcons'\nimport {DROUGHT_MONITOR_MODULE,DRY_SPELL, INDICES_PARAMS} from '../../../Components/constants/index'\nimport {\n Col,\n Input,\n Row,\n} from 'reactstrap';\n\nconst DroughtStageSwitch = (props) => {\n const handleChange = (item) => {\n props.handleDroughtIndices(item);\n };\n return (\n <>\n {props?.droughtIndicesList?.map((i,index) => {\n return (\n <>\n \n {/* \n {!isHideBar && (\n
*/}\n \n {/* {!isHideBar ? ( */}\n
\n\n \n \n {t('FILTER.HIDE_BAR')}\n \n setHideBar(!isHideBar)}\n size={25}\n />\n \n \n
\n \n )}\n \n
\n \n {/* ) : (\n ''\n )} */}\n \n \n {t('FILTER.EXPAND_BAR')}\n \n setHideBar(!isHideBar)}\n size={25}\n />\n \n \n
\n )} */}\n \n \n handleManageCropsBackButton()}\n />\n \n \n \n {\n setToggleRightBar(!toggleRightBar);\n }}\n >\n
\n {t('NEWS_FEED.MANAGE_NEWS')}
\n \n{t('NEWS_FEED.ADD_NEWS')}
\n \n\n \n {' '}\n Loading ... {' '}\n \n }\n >\n {newsFeedList?.map((i,index) => {\n return (\n \n \n );\n })}\n \n
\n \n \n {NewsFeed.isGetAllNewsFeedRequesting && }\n
\n {_.isEmpty(newsFeedList) && !NewsFeed.isGetAllNewsFeedRequesting && (\n No records found
\n )}\n\n \n
\n
\n \n
\n \n \n \n {t('NEWS_FEED.EDIT')}\n \n \n {t('NEWS_FEED.DELETE')}\n \n \n {t('NEWS_FEED.CLICK_PUBLISH')}\n \n \n {t('NEWS_FEED.CLICK_UNPUBLISH')}\n \n
\n \n \n \n {i?.title}\n
\n {i?.content?.length > 100 ? (\n\n handleReadMore(i)}\n >\n {t('NEWS_FEED.READ_MORE')}\n \n
\n ) : (\n \n )}\n \n {t('NEWS_FEED.CATEGORY')}: {i?.newsfeed_category_name}\n
\n {!_.isEmpty(i?.newsfeed_sub_category_name) && (\n\n {t('NEWS_FEED.SUB_CATEGORY')}:{' '}\n {i?.newsfeed_sub_category_name}\n
\n )}\n {!_.isEmpty(i?.updated_date) && (\n\n {t('NEWS_FEED.UPDATED_DATE')}:{' '}\n {moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\n
\n )}\n {!_.isEmpty(i?.event_date) && (\n\n Event Date:{' '}\n {moment(i?.event_date).format(DISPLAY_DATE_FORMAT)}\n
\n )}\n {!_.isEmpty(i?.event_time) && (\n\n Event Time: {convertTimeFormat(i?.event_time)}\n
\n )}\n\n {i?.status === true ? (\n <>\n handlePublishModal(i)}\n />\n \n ) : (\n <>\n handlePublishModal(i)}\n >\n \n )}\n\n handleEdit(i)}\n id=\"edit-news\"\n data-tip\n data-for=\"edit_news\"\n >\n\n handleDeleteModal(i)}\n id=\"delete-news\"\n data-tip\n data-for=\"delete_news\"\n >\n
\n \n \n handleChange(i)}\n checked={i.checked}\n className=\"stage-options\"\n boxShadow= \"1px 1px 1px 1px #848F9A\"\n disabled={i.disabled}\n />\n \n \n \n
\n
\n {i.id === INDICES_PARAMS.CONTINGENCY_DRY_SPELL.id && i.checked ? (\n \n \n props.setPrecipitationThreshold(e.target.value)}\n />\n
\n ) : (\n ''\n )}\n \n );\n })}\n \n );\n};\nexport default DroughtStageSwitch;\n","import React, { useEffect, useState } from 'react';\nimport moment from 'moment';\nimport { t } from 'react-multi-lang';\nimport _ from 'lodash';\nimport {\n NavItem,\n NavLink,\n TabContent,\n TabPane,\n Nav,\n Label,\n} from 'reactstrap';\nimport { Field, reduxForm } from 'redux-form';\nimport {\n renderTextField,\n renderReactSelectInputField,\n} from '../../../Components/common/renderInputField';\nimport {\n CONTINGENCY_FILTER_TABS,\n CONTINGENCY_PLAN,\n DATE_FORMAT,\n CP_MIN_DATE\n} from '../../../Components/constants/index';\nimport DroughtStageSwitch from './DroughtStageOptions';\n\nconst MapMeasures = props => {\n const [activeTab, setActiveTab] = useState(null);\n useEffect(() => {\n if (!_.isEmpty(props.initialValues?.droughtMapStage?.id)) {\n handleMapDroughtChange(props.initialValues.droughtMapStage);\n let startDate = { target: { value: props.initialValues.startDate } };\n let endDate = { target: { value: props.initialValues.endDate } };\n handleStartDate(startDate);\n handleEndDate(endDate);\n }\n }, [props.initialValues.droughtMapStage]);\n\n useEffect(() => {\n if (!_.isEmpty(props.initialValues?.droughtMeasuresStage?.id)) {\n handleMeasuresDroughtChange(props.initialValues.droughtMeasuresStage);\n }\n }, [props.initialValues.droughtMeasuresStage]);\n\n useEffect(() => {\n if (!_.isEmpty(props.initialValues?.chooseTimePeriod?.id)) {\n handleTimePeriodChange(props.initialValues.chooseTimePeriod);\n }\n }, [props.initialValues.chooseTimePeriod]);\n\n const toggle = tab => {\n if (activeTab !== tab) setActiveTab(tab);\n };\n\n useEffect(() => {\n if (props.filterActiveTab) {\n setActiveTab(props.filterActiveTab);\n }\n }, [props.filterActiveTab]);\n\n const [initialSelectedDate, setInitialSelectedDate] = useState({\n startDate: '',\n endDate: '',\n maxEndDate: moment(new Date()).format('YYYY-MM-DD'),\n });\n\n useEffect(() => {\n props.handleFormButton(activeTab);\n }, [activeTab]);\n\n const renderAPIParameterOptions = (list, action_name) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n if (action_name !== CONTINGENCY_PLAN.Stage) {\n let default_option = { value: 'select', label: 'select', id: 'select' };\n options.push(default_option);\n }\n params.map(param => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n };\n\n const handleMapDroughtChange = value => {\n props.handleMapDrought(value);\n };\n\n const handleMeasuresDroughtChange = value => {\n props.handleMeasureDrought(value);\n };\n\n const handleStrategyChange = value => {\n props.handleStrategy(value);\n };\n\n const handleStartDate = e => {\n setInitialSelectedDate(prev => {\n return {\n ...prev,\n startDate: e.target.value,\n minEndDate: moment(e.target.value)\n .add(1, 'days')\n .format(DATE_FORMAT),\n };\n });\n props.handleStartDate(e.target.value);\n };\n\n const handleTimePeriodChange = value => {\n props.handleTimePeriodChange(value);\n };\n\n const handleEndDate = e => {\n setInitialSelectedDate(prev => {\n return {\n ...prev,\n endDate: e.target.value,\n maxStartDate: moment(e.target.value)\n .subtract(1, 'days')\n .format(DATE_FORMAT),\n };\n });\n props.handleEndDate(e.target.value);\n };\n\n const onMenuOpen = () => {\n props.handleButtonMarginTop(true);\n };\n const onMenuClose = () => {\n props.handleButtonMarginTop(false);\n };\n\n\n /**\n * added by sai krishna thalla\n * reason: min dates added to cp \n * date: 20-sep-2022\n */\n const minDate = () =>{\n if (props?.checkedIndicesList[0]?.min_date && props?.checkedIndicesList[1]?.min_date){\n return CP_MIN_DATE;\n }\n else if (props?.checkedIndicesList[0]?.min_date && !props?.checkedIndicesList[1]?.min_date){\n return props?.checkedIndicesList[0]?.min_date\n }\n else{\n return CP_MIN_DATE\n }\n }\n \n\n return (\n \n {/* */}\n
\n );\n};\n\n//export default MapMeasures;\n\nexport default reduxForm({\n form: 'map-measures-form',\n enableReinitialize: true,\n})(MapMeasures);\n","import React, { useEffect, useRef, useState } from 'react';\nimport { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md';\nimport _, { isNumber } from 'lodash';\nimport axios from 'axios';\nimport TRANSLATIONS from '../../../translations/en.json';\nimport { t } from 'react-multi-lang';\nimport { Button, Card, CardBody, Label, InputGroup, InputGroupAddon } from 'reactstrap';\nimport { BsSearch } from 'react-icons/bs';\nimport { RxCross2 } from 'react-icons/rx';\nimport { useDispatch } from 'react-redux';\nimport { showError } from '../../../Components/Notifications';\nimport { BiCurrentLocation } from 'react-icons/bi';\nimport { Field, reduxForm, change } from 'redux-form';\nimport {parseCoordinate} from \"../../../Components/helpers\"\nimport { renderReactSelectInputField } from '../../../Components/common/renderInputField';\nimport * as turf from '@turf/turf';\nimport Geocode from 'react-geocode';\nimport Autocomplete from 'react-google-autocomplete';\nimport MapMeasures from './MapMeasures';\nimport {\n CONTINGENCY_FILTER_TABS,\n CONTINGENCY_PLAN,\n ADDRESS_CONSTS,\n} from '../../../Components/constants/index';\nimport ReactTooltip from 'react-tooltip';\n\nconst ContingencyPlanFilter = props => {\n const filterRef = useRef(null);\n const { \n isHideBar,\n setBar,\n isSystemShow,\n handleSubmit,\n countryList,\n stateList,\n districtList,\n riskList,\n monsoonList,\n systemList,\n stageList,\n strategyList,\n droughtIndicesList,\n mapPreferencesData,\n checkedIndicesList,\n isContingencyMeasuresDisabled,\n isMapTabShow,\n dropdownDataLoading,\n precipitationThreshold,\n setPrecipitationThreshold,\n setLocation,\n location,\n setCordinateAndZoom,\n countryJson,\n } = props;\n const dispatch = useDispatch();\n const [isAdvanceSearch] = useState(true);\n const [defaultCountrySelected, setDefaultCountrySelected] = useState(false);\n const [isApplyLayers, setIsApplyLayers] = useState(false);\n const [formButton, setFormButton] = useState();\n const [isStrategyOpen, setIsStrategyOpen] = useState(false);\n const [initialSelectedDate, setInitialSelectedDate] = useState({\n startDate: '',\n endDate: '',\n });\n const req_data = {\n country: '',\n state: '',\n district: '',\n risk: '',\n monsoon: '',\n startDate: '',\n endDate: '',\n };\n const [formData, setFormData] = useState(req_data);\n const [showMapPreferenceTooltip, setShowMapPreferenceTooltip] = useState(false);\n\n Geocode.setApiKey(process.env.REACT_APP_LOCATION_API_KEY);\n Geocode.setLanguage('en');\n Geocode.setLocationType('ROOFTOP');\n Geocode.enableDebug();\n\n useEffect(() => {\n if (props.initialValues) {\n if (props.initialValues.country.id) {\n setDefaultCountrySelected(true);\n formData.country = props.initialValues.country.id;\n setFormData(formData);\n props.handleCountry(props.initialValues.country);\n }\n }\n }, [props.initialValues?.country]);\n useEffect(() => {\n if (\n !_.isEmpty(props?.initialValues?.state) &&\n (_.isEmpty(formData.state) || formData?.state !== props.initialValues.state.id)\n ) {\n if (props.initialValues.state.id) {\n formData.state = props.initialValues.state.id;\n setFormData(formData);\n }\n } else if (_.isEmpty(props?.initialValues?.state) && formData?.state) {\n formData.state = '';\n setFormData(formData);\n }\n }, [props?.initialValues?.state]);\n\n useEffect(() => {\n if (\n !_.isEmpty(props?.initialValues?.district) &&\n (_.isEmpty(formData.district) || formData?.district !== props.initialValues.district.id)\n ) {\n if (props.initialValues.district.id) {\n formData.district = props.initialValues.district.id;\n setFormData(formData);\n }\n } else if (_.isEmpty(props?.initialValues?.district) && formData?.district) {\n formData.district = '';\n setFormData(formData);\n }\n }, [props?.initialValues?.district]);\n\n useEffect(() => {\n if (mapPreferencesData?.length === 2) setShowMapPreferenceTooltip(true);\n else setShowMapPreferenceTooltip(false);\n }, [mapPreferencesData]);\n\n useEffect(() => {\n if (!_.isEmpty(props.initialValues?.risk?.id)) {\n handleRiskChange(props.initialValues.risk);\n } else if (_.isEmpty(props.initialValues?.risk?.id) && formData.risk) {\n formData.risk = '';\n setFormData(formData);\n }\n }, [props.initialValues.risk]);\n\n useEffect(() => {\n if (!_.isEmpty(props.initialValues?.monsoon?.id)) {\n handleMonsoonChange(props.initialValues.monsoon);\n } else if (_.isEmpty(props.initialValues?.monsoon?.id) && formData.monsoon) {\n formData.monsoon = '';\n setFormData(formData);\n }\n }, [props.initialValues.monsoon]);\n\n useEffect(() => {\n if (!_.isEmpty(props.initialValues?.system?.id)) {\n handleSystemChange(props.initialValues.system);\n } else if (_.isEmpty(props.initialValues?.system?.id) && formData.system) {\n formData.system = '';\n setFormData(formData);\n }\n }, [props.initialValues.system]);\n\n useEffect(() => {\n if (\n !_.isEmpty(props.initialValues.strategy?.id) &&\n !_.isEmpty(props.initialValues.chooseTimePeriod?.id) &&\n !_.isEmpty(props.initialValues.droughtMeasuresStage?.id) &&\n !_.isEmpty(props.initialValues.risk?.id) &&\n !_.isEmpty(props.initialValues.system?.id)\n ) {\n handleStrategy(props.initialValues.strategy);\n }\n }, [props.initialValues]);\n\n useEffect(() => {\n if (\n formData?.district &&\n formData?.risk &&\n formData?.monsoon &&\n initialSelectedDate?.startDate &&\n initialSelectedDate?.endDate &&\n formData?.system &&\n checkedIndicesList?.length &&\n mapPreferencesData?.length < 2\n ) {\n setIsApplyLayers(true);\n } else {\n setIsApplyLayers(false);\n }\n }, [formData, checkedIndicesList, initialSelectedDate, mapPreferencesData]);\n\n useEffect(() => {\n if (!_.isEmpty(props?.defaultDates)) {\n setInitialSelectedDate(prev => {\n return {\n ...prev,\n startDate: props.defaultDates.startDate,\n endDate: props.defaultDates.endDate,\n };\n });\n }\n }, [props?.defaultDates]);\n\n const onFormSubmit = () => {};\n\n const renderAPIParameterOptions = (list, action_name) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n if (\n action_name !== CONTINGENCY_PLAN.Risk &&\n action_name !== CONTINGENCY_PLAN.Monsoon &&\n action_name !== CONTINGENCY_PLAN.System\n ) {\n let default_option = { value: 'select', label: 'Select', id: 'select' };\n options.push(default_option);\n }\n params.map(param => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n };\n\n const handleFormButton = value => {\n setFormButton(value);\n props.handleActiveFilterTab(value);\n };\n\n const handleCountryChange = () => {};\n\n const handleStateChange = value => {\n if (value.id === 'select') {\n formData.state = '';\n formData.district = '';\n formData.risk = '';\n formData.monsoon = '';\n } else {\n formData.state = value.id;\n setLocation('');\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n\n searchMarkerCoordinates: '',\n };\n });\n }\n clearFilterFieldsData([\n 'district',\n 'risk',\n 'monsoon',\n 'system',\n 'choose-crop',\n 'drought-map-stage',\n 'drought-measures-stage',\n 'choose-time-period',\n ]);\n setFormData({ ...formData });\n props.handleState(value);\n };\n\n const clearFilterFieldsData = values => {\n values.map(i => {\n dispatch(change('contingency-filter-form', i, ''));\n });\n };\n\n const handleDistrictChange = value => {\n if (value.id === 'select') {\n formData.district = '';\n formData.risk = '';\n formData.monsoon = '';\n } else {\n formData.district = value.id;\n setLocation('');\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n\n searchMarkerCoordinates: '',\n };\n });\n }\n clearFilterFieldsData([\n 'risk',\n 'monsoon',\n 'system',\n 'choose-crop',\n 'drought-map-stage',\n 'drought-measures-stage',\n 'choose-time-period',\n ]);\n setFormData({ ...formData });\n props.handleDistrict(value);\n };\n\n const handleRiskChange = value => {\n formData.risk = value.id;\n formData.system = '';\n clearFilterFieldsData([\n 'system',\n 'drought-map-stage',\n 'drought-measures-stage',\n 'choose-time-period',\n ]);\n setFormData({ ...formData });\n props.handleRisk(value);\n };\n\n const handleMonsoonChange = value => {\n formData.monsoon = value.id;\n setFormData({ ...formData });\n props.handleMonsoon(value);\n };\n\n const handleSystemChange = value => {\n formData.system = value.id;\n setFormData({ ...formData });\n clearFilterFieldsData(['drought-map-stage', 'drought-measures-stage', 'choose-time-period']);\n props.handleSystem(value);\n };\n\n const handleApplyLayers = () => {\n props.handleApplyLayers(true);\n };\n\n const handleStartDate = date => {\n formData.startDate = date;\n setInitialSelectedDate(prev => {\n return {\n ...prev,\n startDate: date,\n };\n });\n props.handleStartDate(date);\n };\n const handleEndDate = date => {\n formData.endDate = date;\n setInitialSelectedDate(prev => {\n return {\n ...prev,\n endDate: date,\n };\n });\n props.handleEndDate(date);\n };\n const handleContingencyMeasures = () => {\n props.handleContingencyMeasuresModal();\n };\n\n const handleMeasureDrought = value => {\n clearFilterFieldsData(['choose-time-period']);\n props.handleMeasureDrought(value);\n };\n\n const handleTimePeriodChange = value => {\n props.handleTimePeriodChange(value);\n };\n\n const handleStrategy = value => {\n clearFilterFieldsData(['choose-crop']);\n props.handleStrategy(value);\n };\n\n const handleButtonMarginTop = data => {\n setIsStrategyOpen(data);\n };\n\n const handleSearch = places => {\n if (!_.isEmpty(places)) {\n const { formatted_address, geometry, address_components } = places;\n const lat = geometry?.location?.lat();\n const lng = geometry?.location?.lng();\n // if (isNumber(lat) && isNumber(lng)) {\n // setCordinateAndZoom(prev => {\n // return {\n // ...prev,\n // cordinates: [lat, lng],\n // zoom: 10,\n // searchMarkerCoordinates: [lat, lng],\n // };\n // });\n // }\n setLocation(formatted_address);\n // setLocation(formatted_address);\n } else {\n setLocation('');\n }\n };\n\n const handleOnPlaceChange = event => {\n if (event && event?.target && event?.target?.value === '') {\n setLocation('');\n } else {\n setLocation(event.target.value);\n }\n };\n\n const isLatLng = input => {\n // Regular expression for standard numerical lat,lng format with optional spaces\n const standardLatLngPattern = /^\\s*-?\\d+(\\.\\d+)?\\s*,\\s*-?\\d+(\\.\\d+)?\\s*$/;\n // Regular expression for degrees and direction format with optional spaces\n const degreesLatLngPattern = /^\\s*-?\\d+(\\.\\d+)?\\s*°?\\s*[NS]\\s*,\\s*-?\\d+(\\.\\d+)?\\s*°?\\s*[EW]\\s*$/;\n\n return standardLatLngPattern.test(input) || degreesLatLngPattern.test(input);\n };\n\n const onHandleRemoveLocation = () => {\n setLocation('');\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n\n searchMarkerCoordinates: '',\n };\n });\n };\n const handleFilter = async loc => {\n const islatlng = isLatLng(loc);\n if (islatlng) {\n const locArray = loc.split(',');\n const lat = parseCoordinate(locArray?.[0]);\n const lng = parseCoordinate(locArray?.[1]);\n if (locArray?.length === 2 && isNumber(parseFloat(lat)) && isNumber(parseFloat(lng))) {\n const point = turf.point([parseFloat(lng), parseFloat(lat)]);\n const isInsideAnyPolygon = countryJson.features.some(feature => {\n return turf.booleanPointInPolygon(point, feature);\n });\n if (isInsideAnyPolygon) {\n // setLocation([parseFloat(lat), parseFloat(lng)]);\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n cordinates: [lat, lng],\n zoom: 10,\n searchMarkerCoordinates: [lat, lng],\n };\n });\n // props.handleCordinates([parseFloat(lat), parseFloat(lng)], 10);\n } else {\n setLocation('');\n showError(`Please select location inside India country only.`);\n }\n } else {\n setLocation();\n showError('Please enter valid data .');\n }\n } else {\n const responseData = await axios.get(\n `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(\n JSON.stringify(loc),\n )}&key=AIzaSyAzWsZ_PyD0lshvP-sCwWP6d_1wzE0dYA0`,\n );\n if (responseData?.data?.results?.length) {\n const point = turf.point([\n parseFloat(responseData?.data?.results?.[0]?.geometry?.location?.lng),\n parseFloat(responseData?.data?.results?.[0]?.geometry?.location?.lat),\n ]);\n const isInsideAnyPolygon1 = countryJson.features.some(feature => {\n return turf.booleanPointInPolygon(point, feature);\n });\n\n if (!isInsideAnyPolygon1) {\n setLocation('');\n showError(`Please select location inside India country only.`);\n // setLocation('');\n } else {\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n cordinates: [\n responseData?.data?.results?.[0]?.geometry?.location?.lat,\n responseData?.data?.results?.[0]?.geometry?.location?.lng,\n ],\n zoom: 10,\n searchMarkerCoordinates: [\n responseData?.data?.results?.[0]?.geometry?.location?.lat,\n responseData?.data?.results?.[0]?.geometry?.location?.lng,\n ],\n };\n });\n }\n } else {\n setLocation('');\n showError(`Please select location inside India country only.`);\n }\n }\n };\n\n const getAddress = (lat, lng, { fromCurrentLocation }) => {\n if (isNumber(lat) && isNumber(lng) && fromCurrentLocation) {\n setCordinateAndZoom(prev => {\n return {\n ...prev,\n cordinates: [lat, lng],\n zoom: 10,\n searchMarkerCoordinates: [lat, lng],\n };\n });\n }\n Geocode.fromLatLng(lat, lng).then(\n response => {\n let country, state, district;\n const { address_components: components } = response.results[0];\n for (let i = 0; i < components.length; i++) {\n for (let j = 0; j < components[i].types.length; j++) {\n if (components[i].types[j] === ADDRESS_CONSTS.COUNTRY) {\n country = components[i].long_name;\n // if (fromCurrentLocation) props.handleCountry(country);\n // else {\n // setCurrenUserLocation(country);\n // getUserLocationBasedOnIP(country);\n // }\n }\n if (components[i].types[j] === ADDRESS_CONSTS.STATE) {\n state = components[i].long_name;\n }\n if (components[i].types[j] === ADDRESS_CONSTS.DISTRICT) {\n district = components[i].long_name;\n }\n }\n }\n\n if (fromCurrentLocation) {\n setLocation(`${district}, ${state}, ${country}`);\n }\n },\n error => {\n console.error(error);\n },\n );\n };\n\n //map marker on the basis of selected country\n //get current location\n const getCurrentLocation = () => {\n if ('geolocation' in navigator) {\n let latitude = '';\n let longitude = '';\n /* geolocation is available */\n navigator.geolocation.getCurrentPosition(position => {\n latitude = position.coords.latitude;\n longitude = position.coords.longitude;\n getAddress(latitude, longitude, { fromCurrentLocation: true });\n // if (latitude && longitude)\n // props.handleCordinates([latitude, longitude], 10);\n });\n } else {\n /* geolocation IS NOT available */\n }\n };\n\n const handleAdvanceSearchRender = () => {\n return (\n \n
\n );\n };\n\n return (\n <>\n {isHideBar ? (\n \n \n handleCountryChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(countryList)}\n className=\"mt-2 mb-3 cp-country-field\"\n isDisabled={defaultCountrySelected}\n >\n \n handleStateChange(e)}\n className=\"mt-2 mb-3 cp-state-field\"\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(stateList)}\n isLoading={dropdownDataLoading.key === 'state' && dropdownDataLoading.isLoading}\n >\n {districtList?.length ? (\n <>\n \n handleDistrictChange(e)}\n required={true}\n isMulti={false}\n className=\"mt-2 mb-3 cp-district-field\"\n options={renderAPIParameterOptions(districtList)}\n isLoading={dropdownDataLoading.key === 'district' && dropdownDataLoading.isLoading}\n >\n \n ) : (\n ''\n )}\n
\n \n \n {t('FILTER.EXPAND_BAR')}\n \n setBar(!isHideBar)}\n size={25}\n />\n \n \n
\n ) : (\n \n
\n \n )}\n \n );\n};\nexport default reduxForm({\n form: 'contingency-filter-form',\n enableReinitialize: true,\n})(ContingencyPlanFilter);\n","import { createContext, useContext } from \"react\";\nexport const LayersControlContext = createContext([[], () => {}]);\nexport const LayersControlProvider = LayersControlContext.Provider;\nexport function useLayerControlContext() {\n const context = useContext(LayersControlContext);\n\n if (context == null) {\n throw new Error(\n \"No context provided: useLayerControlContext() can only be used in a descendant of \n \n \n \n {' '}\n
{' '}\n \n
}\n {isAdvanceSearch ? handleAdvanceSearchRender() : null}\n \n {' '}\n {TRANSLATIONS.FILTER.HIDE_BAR}{' '}\n \n setBar(!isHideBar)}\n size={25}\n />\n \n
{' '}\n \n \n \n
\n\n {countryJson ===\"\" ? \n \n \n location && countryJson ? handleFilter(location) : {}\n }\n className={countryJson ? \"cursor-ponter mr-1 weather-forecat-icons-margin\" : \" mr-1 serch-opacity weather-forecat-icons-margin\"}\n size={19}\n color=\"#2A547C\"\n />\n\n {location ? (\n onHandleRemoveLocation()}\n />\n ) : (\n ''\n )}\n \n
\n \n Please wait, data is loading\n
: \"\"}\n\n\n {countryJson ===\"\" ? \"\" : \n .\n .\n .\n
\n \n \n {TRANSLATIONS.FILTER.CHOOSE_CURRENT_LOCATION}\n
\n \n {' '}\n
\n \n {_.isEmpty(props?.initialValues?.district) ||\n (!_.isEmpty(props?.initialValues?.district) && riskList?.length) ? (\n <>\n \n handleRiskChange(e)}\n required={true}\n isMulti={false}\n className=\"mt-2 mb-3\"\n options={renderAPIParameterOptions(riskList, 'risk')}\n isLoading={\n dropdownDataLoading.key === 'risk' && dropdownDataLoading.isLoading\n }\n >\n \n ) : (\n ''\n )}\n {_.isEmpty(props?.initialValues?.district) ||\n (!_.isEmpty(props?.initialValues?.district) && monsoonList?.length) ? (\n <>\n \n handleMonsoonChange(e)}\n required={true}\n isMulti={false}\n className=\"mt-2 mb-3\"\n options={renderAPIParameterOptions(monsoonList, 'monsoon')}\n isLoading={\n dropdownDataLoading.key === 'monsoon' && dropdownDataLoading.isLoading\n }\n >\n \n ) : (\n ''\n )}\n\n {isSystemShow && (\n <>\n \n handleSystemChange(e)}\n required={true}\n isMulti={false}\n className=\"mt-2 mb-3\"\n options={renderAPIParameterOptions(systemList, 'system')}\n isLoading={\n dropdownDataLoading.key === 'system' && dropdownDataLoading.isLoading\n }\n >\n \n )}\n
\n \n
\n \n {formButton === CONTINGENCY_FILTER_TABS.MAP ? (\n handleContingencyMeasures()}\n disabled={isContingencyMeasuresDisabled}\n >\n {t('CONTINGENCY_PLAN.CONTINGENCY_MEASURES')}\n \n )}\n {showMapPreferenceTooltip ? (\n \n {TRANSLATIONS.FILTER.PLEASE_REMOVE_MAP_PREFERENCE_LAYER}\n \n ) : (\n ''\n )}\n
\n \n \n \n \n \n {t('CONTINGENCY_PLAN.APPLY_LAYERS')}\n \n
\n ) : (\n \n {/* \n \n {t('CONTINGENCY_PLAN.MAP')}\n \n \n \n {!_.isEmpty(props?.selectedSubCategory) &&\n props?.selectedSubCategory?.slug === t('CHARTS.RAINFALL_SLUG') && (\n \n {t('CONTINGENCY_PLAN.MONTHLY_RAINFALL_GRAPH')}\n \n \n )}\n handleCategoryChange(e)}\n isLoading={props.isCategoryLoader}\n isMulti={false}\n required={true}\n placeholder=\"Select Category\"\n />\n \n handleSubCategoryChange(e)}\n isLoading={props.isSubCategoryLoader}\n isMulti={false}\n required={true}\n />\n \n
\n \n
\n \n );\n};\nexport default Header;\n","import React, { useEffect, useMemo } from 'react';\nimport { useTable, usePagination, useSortBy, useGlobalFilter } from 'react-table';\nimport { MdModeEditOutline } from 'react-icons/md';\n\nimport { useTranslation } from 'react-multi-lang';\nimport { Table } from 'reactstrap';\nimport { checkPermission, isSuperAdmin } from '../../../Components/common/utils';\n\nexport const DistrictProfileTable = props => {\n const t = useTranslation();\n\n const COLUMNS = props?.districtProfileTable?.columns;\n\n const columns = useMemo(() => COLUMNS);\n const data = useMemo(() => props?.districtProfileTable?.rowData, [\n props?.districtProfileTable?.rowData,\n ]);\n const tableInstance = useTable(\n {\n columns,\n data,\n initialState: { pageSize: props?.districtProfileTable?.rowData?.length },\n },\n useGlobalFilter,\n useSortBy,\n usePagination,\n );\n\n const { getTableProps, getTableBodyProps, page, prepareRow } = tableInstance;\n\n const handleEditClick = (row, data, index) => {\n const list1 = page.slice(0, index).reverse();\n\n const filteredColumnHeader = list1.find(each => each?.original?.col_type === 'column');\n if (filteredColumnHeader) {\n props?.setColumnHeader(filteredColumnHeader);\n }\n props.setSelectedRow(row);\n const initialValues = row.cells.reduce((acc, cell) => {\n acc[cell.column.id] = cell.value;\n return acc;\n }, {});\n\n props.setEditValues(initialValues);\n };\n\n useEffect(() => {\n if (page?.length) {\n props?.setColumnHeader(page?.[0]);\n }\n }, []);\n\n return (\n <>\n \n
\n );\n });\n };\n return (\n <>\n {props.districtProfileList.map((i) => {\n return (\n <>\n \n
\n
\n \n );\n })}\n \n );\n};\nexport default List;\n","import React from 'react';\nimport { Button } from 'reactstrap';\n\nfunction EditModal({\n editValues,\n setSelectedRow,\n setEditValues,\n columnHeader,\n onHandleSaveEdit,\n selectedRow,\n}) {\n const handleInputChange = (columnId, value) => {\n setEditValues({\n ...editValues,\n [columnId]: value,\n });\n };\n\n const onEnabletick = () => {\n const isRowEdited = Object.keys(editValues).reduce((acc, key) => {\n if (editValues[key] === selectedRow?.values?.[key]) {\n acc[key] = editValues[key];\n }\n return acc;\n }, {});\n return Object.keys(isRowEdited).length !== Object.keys(selectedRow?.values).length;\n };\n\n return (\n\n \n )\n )}\n\n {props.selectedRow ? (\n \n \n {t('CONTINGENCY_PLAN.MAP')}\n \n \n {props?.cropTypeData?.length !== 0 &&\n handleCropTypeChange(e)}\n isLoading={props.isCropTypeLoading}\n isMulti={false}\n required={true}\n placeholder=\"Select Crop\"\n className=\"crop-items\"\n />\n \n }\n
\n \n );\n};\nexport default Header;\n","import React, { useMemo, useEffect } from 'react';\nimport { useTable, usePagination, useSortBy, useGlobalFilter } from 'react-table';\nimport { useTranslation } from 'react-multi-lang';\nimport { Table } from 'reactstrap';\nimport { MdModeEditOutline } from 'react-icons/md';\nimport { checkPermission, isSuperAdmin } from '../../../Components/common/utils';\n\nconst ContingencyMeasuresTable = props => {\n const t = useTranslation();\n\n const handleEditClick = row => {\n props.setSelectedRow(row);\n const initialValues = row.cells.reduce((acc, cell) => {\n acc[cell.column.id] = cell.value;\n return acc;\n }, {});\n\n props.setEditValues(initialValues);\n };\n\n const COLUMNS = props?.contingencyMeasuresTable?.columns;\n\n const columns = useMemo(() => COLUMNS);\n const data = useMemo(() => props?.contingencyMeasuresTable?.rowData, [\n props?.contingencyMeasuresTable?.rowData,\n ]);\n const tableInstance = useTable(\n {\n columns,\n data,\n initialState: { pageSize: props?.contingencyMeasuresTable?.rowData?.length },\n },\n useGlobalFilter,\n useSortBy,\n usePagination,\n );\n\n const { getTableProps, getTableBodyProps, page, prepareRow } = tableInstance;\n useEffect(() => {\n if (page?.length) {\n props?.setColumnHeader(page?.[0]);\n }\n }, []);\n\n // const downloadFile = () => {\n // // Step 1: Create the data\n // const data = \"This is the content of the text file.\";\n\n // // Step 2: Create a Blob\n // const blob = new Blob([data], { type: 'text/plain' });\n\n // // Step 3: Create a URL for the Blob\n // const url = URL.createObjectURL(blob);\n\n // // Step 4: Create an anchor element and trigger the download\n // const a = document.createElement('a');\n // a.href = url;\n // a.download = 'example.txt'; // Set the file name\n // document.body.appendChild(a);\n // a.click();\n \n // // Clean up and remove the anchor element\n // document.body.removeChild(a);\n // URL.revokeObjectURL(url);\n // };\n\n\n return (\n <>\n \n \n \n
\n {props.isContingencyPlanMeasuresDataRequesting && \n ) : (\n \n \n \n \n \n );\n });\n }\n };\n\n const handleApplyLayers = applyLayers => {\n setContingencyMeasuresModalShow(false);\n setDistrictProfileModalShow(false);\n setIndexLayers([]);\n let req_data = {\n country_name: formData?.country?.value,\n state_name: formData?.state?.value,\n district_name: formData?.district?.value,\n start_date: formData?.startDate,\n end_date: formData?.endDate,\n temporal_aggregation: 'mean',\n };\n if (checkedIndicesList?.length === 1) {\n setIsLoading(true);\n const isDroughtModule = false;\n if (formData?.indicesList[0]?.id === INDICES_PARAMS.CONTINGENCY_DRY_SPELL.id) {\n req_data.precipitation_threshold = precipitationThreshold.toString();\n }\n dispatch(\n getDroughtMapRequest(`${formData?.indicesList[0]?.api_url}/`, req_data, isDroughtModule),\n );\n } else if (checkedIndicesList?.length === 2) {\n let config1, config2, index1, index2;\n\n droughtIndicesList.map((item, index) => {\n if (formData?.indicesList[0]?.id === item.id) {\n index1 = index;\n }\n if (formData?.indicesList[1]?.id === item.id) {\n index2 = index;\n }\n });\n\n config1 = {\n indexId: formData?.indicesList[0]?.id,\n index: index1,\n name: formData?.indicesList[0]?.name,\n };\n config2 = {\n indexId: formData?.indicesList[1]?.id,\n index: index2,\n name: formData?.indicesList[1]?.name,\n };\n\n let req_data1 = _.cloneDeep(req_data);\n let req_data2 = _.cloneDeep(req_data);\n\n if (formData?.indicesList[0]?.id === INDICES_PARAMS.CONTINGENCY_DRY_SPELL.id) {\n req_data1.precipitation_threshold = precipitationThreshold.toString();\n }\n if (formData?.indicesList[1]?.id === INDICES_PARAMS.CONTINGENCY_DRY_SPELL.id) {\n req_data2.precipitation_threshold = precipitationThreshold.toString();\n }\n\n let initialRequestResponse = AXIOS_INSTANCE.post(\n `${API_BASE_URL}/${formData?.indicesList[0]?.api_url}/map`,\n req_data1,\n config1,\n );\n let finalRequestResponse = AXIOS_INSTANCE.post(\n `${API_BASE_URL}/${formData?.indicesList[1]?.api_url}/map`,\n req_data2,\n config2,\n );\n setIsLoading(true);\n Promise.all([initialRequestResponse, finalRequestResponse])\n .then(responses => {\n let responsesData = [];\n setIsLoading(false);\n responses?.map(item => {\n const { data, config } = item;\n if (data.code === 200) {\n let res = data.result;\n res.id = config.indexId;\n res.index = config.index;\n res.name = config.name;\n responsesData.push(res);\n } else {\n showError(data?.message);\n }\n });\n dispatch(\n getDroughtMapSuccess({ response: { data: responsesData, isDroughtModule: false } }),\n );\n })\n .catch(error => {\n setIsLoading(false);\n if (error?.response) {\n let errorRes = error.response;\n showError(errorRes?.data?.message);\n } else {\n showError('No records found. please try again');\n }\n });\n }\n };\n\n const renderMapContainer = () => {\n return (\n <>\n {districtProfileModalShow ? (\n \n \n \n \n \n \n \n {districtProfileButtonShow && (\n \n \n \n \n ) : (\n ''\n )}\n\n handleEachFeatureChange('stname', feat, layer)}\n />\n\n handleEachFeatureChange('dtname', feat, layer)}\n />\n\n handleEachFeatureChange('', feat, layer)}\n />\n\n handleEachFeatureChange('MAJ_NAME', feat, layer)}\n />\n\n handleEachFeatureChange('', feat, layer)}\n />\n\n handleEachFeatureChange('sdtname', feat, layer)}\n />\n\n \n {mapPreferRefs?.current?.map((mapLayerRef, index) => {\n if (!_.isEmpty(mapLayerRef)) {\n return (\n <>\n \n \n \n \n \n );\n }\n })}\n \n {layerRef && layerRef?.current && layerRef?.current?.length ? (\n \n {renderParamLayer(droughtIndicesList)}\n \n ) : (\n ''\n )}\n\n {!_.isEmpty(map) && selectedParamLegendData?.length\n ? selectedParamLegendData?.map((item, index) => {\n return (\n <>\n \n {item?.descret_legend ? (\n \n \n );\n })\n : ''}\n {!_.isEmpty(map) && compareParamLegendData?.length\n ? compareParamLegendData?.map((item, index) => {\n return (\n <>\n \n {item?.descret_legend ? (\n \n \n );\n })\n : ''}\n {!_.isEmpty(map) &&\n (selectedMapPreferLegendData.length\n ? selectedMapPreferLegendData.map((item, index) => {\n return (\n <>\n \n {item?.descret_legend ? (\n \n \n );\n })\n : '')}\n\n \n \n \n )}\n \n );\n };\n return (\n
\n \n );\n};\n\nexport default AlertModal;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport _ from 'lodash';\nimport { useHistory } from 'react-router-dom';\nimport {\n Dropdown,\n Card,\n CardImg,\n CardSubtitle,\n CardTitle,\n Row,\n Col,\n} from 'reactstrap';\nimport moment from 'moment';\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\nimport '../../assets/CSS/bulletin.css';\nimport { t } from 'react-multi-lang';\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport Loader from '../../Components/common/loader';\nimport {\n getTemplateRequest,\n getAllTemplateListRequest,\n} from '../../redux/bulletin/bulletinActions';\n\nconst BulletTemplateModal = props => {\n const { isOpen, toggleModal } = props;\n\n const history = useHistory();\n\n const dispatch = useDispatch();\n\n\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const toggleDp = () => setDropdownOpen(prevState => !prevState);\n const [templates, setTemplates] = useState([]);\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [templateListOptions, setTemplateListOptions] = useState([]);\n\n const { Bulletin } = useSelector(state => ({\n Bulletin: state.Bulletin,\n }));\n\n useEffect(() => {\n dispatch(\n getTemplateRequest({\n page: pageNumber,\n data: {},\n }),\n );\n dispatch(getAllTemplateListRequest());\n }, []);\n\n useEffect(() => {\n if (Bulletin?.getAllTemplateListData) {\n let options = [];\n let data = Bulletin.getAllTemplateListData;\n if (data) {\n const resultData = data?.data;\n if (resultData && resultData?.result) {\n let list = resultData?.result;\n let params = [...list];\n if (params?.length) {\n params?.map(param => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n }\n }\n }\n setTemplateListOptions(options);\n }\n }, [Bulletin.getAllTemplateListData]);\n\n useEffect(() => {\n if (Bulletin?.getTemplateData?.data) {\n let new_list = [];\n const {\n data: { result },\n } = Bulletin.getTemplateData.data;\n if (result) {\n if (templates) {\n if (pageNumber > 1) {\n new_list = templates?.concat(result?.results);\n } else {\n new_list = result?.results;\n }\n } else {\n new_list = result?.results;\n }\n setTemplates(new_list);\n setPageCount(result?.count);\n } else {\n setTemplates([]);\n }\n }\n }, [Bulletin.getTemplateData]);\n\n const toggle = () => {\n toggleModal();\n };\n\n const fetchNextTemplateData = () => {\n setPageNumber(pageNumber + 1);\n dispatch(\n getTemplateRequest({\n page: pageNumber + 1,\n data: {},\n }),\n );\n };\n\n const cardHandler = data => {\n let list = templateListOptions;\n let defaultList = {\n label: data?.category_name,\n value: data?.category_name,\n id: data?.category_id,\n };\n history.push({\n pathname: '/create-bulletin',\n state: [list, defaultList, data],\n });\n };\n\n return (\n */}\n
\n \n );\n}\n\nexport default LayerControl;\n","import React, { useEffect, useState } from 'react';\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\nimport Chart from 'react-apexcharts';\nimport _ from 'lodash';\nimport { MONTHS_LIST } from '../../../Components/constants';\nimport { t } from 'react-multi-lang';\n\nconst DistrictRainfallModal = props => {\n const [series, setSeries] = useState([]);\n const [YAxisOptions, setYAxisOptions] = useState([\n {\n axisTicks: {\n show: true,\n },\n axisBorder: {\n show: true,\n color: '#008FFB',\n },\n labels: {\n style: {\n colors: '#008FFB',\n fontSize: '12px',\n fontFamily: 'National',\n },\n formatter: function(value) {\n if (!value == null || !isNaN(value)) {\n if (value % 1 != 0) {\n return value.toFixed(2);\n } else {\n return value;\n }\n }\n },\n },\n title: {\n style: {\n color: '#008FFB',\n fontFamily: 'National',\n fontWeight: 400\n },\n },\n tooltip: {\n enabled: true,\n },\n scaleLabel: {\n display: true,\n },\n ticks: {\n callback: function(value) {\n return value;\n },\n },\n },\n ]);\n\n const [options, setOptions] = useState({\n chart: {\n type: 'column',\n stacked: false,\n zoom: {\n enabled: true,\n type: 'x',\n },\n },\n dataLabels: {\n enabled: false,\n enabledOnSeries: [0, 1],\n },\n stroke: {\n width: 4,\n },\n title: {\n align: 'left',\n offsetX: 110,\n style: {\n fontSize: '14px',\n fontWeight: 'normal',\n fontFamily: 'National',\n color: '#2A547C',\n },\n },\n plotOptions: {\n bar: {\n columnWidth: '55%',\n barHeight: '70%',\n },\n },\n xaxis: {\n categories: [],\n labels: {\n showDuplicates: false,\n style: {\n colors: '#008FFB',\n fontSize: '12px',\n fontFamily: 'National',\n },\n crossShair: {\n stroke: {\n curve: 'straight',\n },\n },\n },\n axisBorder: {\n show: true,\n color: '#008FFB',\n height: 1,\n width: '100%',\n offsetX: 0,\n offsetY: 0\n },\n axisTicks: {\n show: true,\n borderType: 'solid',\n color: '#008FFB',\n height: 6,\n offsetX: 0,\n offsetY: 0\n },\n \n },\n yaxis: YAxisOptions,\n tooltip: {\n fixed: {\n enabled: true,\n position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft\n offsetY: 30,\n offsetX: 60,\n },\n },\n legend: {\n show: true,\n showForSingleSeries: true,\n horizontalAlign: 'left',\n offsetX: 40,\n markers:{\n radius: 28\n }\n },\n });\n\n useEffect(() => {\n if (props?.data?.length) {\n let rainfallData = props.data[0];\n let YAxisoptionsData = YAxisOptions;\n let seriesData = [];\n const monthsList = MONTHS_LIST;\n\n monthsList?.map(item => {\n seriesData.push(Number(rainfallData[item.toLocaleLowerCase()]));\n });\n\n setSeries([\n {\n name: 'Rainfall(mm)',\n data: seriesData,\n type: 'column',\n },\n ]);\n\n YAxisoptionsData[0] = {\n ...YAxisoptionsData[0],\n labels: {\n style: {\n colors: '#008FFB',\n fontSize: '12px',\n fontFamily: 'National',\n },\n formatter: function(value) {\n if (!value == null || !isNaN(value)) {\n if (value % 1 !== 0) {\n return value.toFixed(2);\n } else {\n return value;\n }\n }\n },\n },\n title: {\n ...YAxisoptionsData[0].title,\n text: 'Rainfall (mm)',\n style: {\n ...YAxisoptionsData[0].title.style,\n color: '#008FFB',\n },\n },\n };\n\n setYAxisOptions(YAxisoptionsData);\n\n setOptions(prev => ({\n ...prev,\n chart: {\n ...prev.chart,\n toolbar: {\n show: true,\n export: {\n csv: {\n filename: `${props?.districtData?.value} district rainfall graph`,\n columnDelimiter: ',',\n headerCategory: 'Month',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n svg: {\n filename: `${props?.districtData?.value} district rainfall graph`,\n columnDelimiter: ',',\n headerCategory: 'Month',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n png: {\n filename: `${props?.districtData?.value} district rainfall graph`,\n columnDelimiter: ',',\n headerCategory: 'Month',\n headerValue: 'value',\n dateFormatter(timestamp) {\n return new Date(timestamp).toDateString();\n },\n },\n },\n },\n },\n title: {\n ...prev.title,\n text: `Mean monthly rainfall ${props?.districtData?.value} district (${props?.stateData?.value})`,\n align: 'left',\n offsetX: 20,\n style: {\n fontSize: '16px',\n fontWeight: 'normal',\n fontFamily: 'National',\n color: '#363636',\n },\n },\n xaxis: {\n ...options.xaxis,\n type: 'date',\n categories: monthsList,\n tickPlacement: 'on',\n min: monthsList && monthsList[0],\n max: monthsList && monthsList[monthsList.length - 1],\n labels: {\n ...options.xaxis.labels,\n showDuplicates: false,\n hideOverlappingLabels: true,\n },\n //range: 30,\n },\n }));\n }\n }, [props.data]);\n\n return (\n \n <>\n
\n \n \n
\n \n \n \n \n {series?.length ? (\n <>\n \n \n {`(Source:IMD, 1901-2020)`} \n \n ) : (\n \n
\n );\n};\n\nexport default DistrictRainfallModal;\n","import React from 'react';\nimport {\n Button,\n Col,\n Row,\n} from 'reactstrap';\nimport Select from 'react-select';\nimport { t } from 'react-multi-lang';\nimport DistrictRainfallModal from './RainfallModal';\nimport _ from 'lodash';\n\nconst Header = props => {\n const handleCategoryChange = value => {\n props.handleCategoryChange(value);\n };\n\n const handleSubCategoryChange = value => {\n props.handleSubCategoryChange(value);\n };\n\n return (\n <>\n {props.showRainfallGraphModal && (\n \n
\n )}\n {t('CHARTS.NO_CHART_FOUND')}
\n\n {props?.districtProfileTable?.rowData.length === 0 ? (\n \n <>\n
\n )}\n
\n \n );\n};\n","import React from 'react';\nimport {\n Col,\n Row,\n} from 'reactstrap';\n\nconst List = (props) => {\n const renderNestedValues = (values) => {\n return values.map((i) => {\n return (\n {t('NEWS_FEED.NO_RECORDS_FOUND')}
\n ) : (\n\n \n );\n })}\n \n );\n};\nexport default List;\n","import React from 'react';\nimport { Button } from 'reactstrap';\n\nfunction EditModal({\n editValues,\n setSelectedRow,\n setEditValues,\n columnHeader,\n onHandleSaveEdit,\n selectedRow,\n}) {\n const handleInputChange = (columnId, value) => {\n setEditValues({\n ...editValues,\n [columnId]: value,\n });\n };\n\n const onEnabletick = () => {\n const isRowEdited = Object.keys(editValues).reduce((acc, key) => {\n if (editValues[key] === selectedRow?.values?.[key]) {\n acc[key] = editValues[key];\n }\n return acc;\n }, {});\n return Object.keys(isRowEdited).length !== Object.keys(selectedRow?.values).length;\n };\n\n return (\n
\n
\n );\n}\n\nexport default EditModal;\n","import React from 'react';\nimport Header from './Header';\nimport { DistrictProfileTable } from './Table';\nimport { useDispatch } from 'react-redux';\nimport { IoMdDownload } from 'react-icons/io';\nimport List from './List';\nimport Loader from '../../../Components/common/loader';\nimport _ from 'lodash';\nimport { useTranslation } from 'react-multi-lang';\nimport EditModal from '../EditModal';\nimport { contingencyPlanDPEditRequest } from '../../../redux/contingencyPlan/contingencyPlanAction';\nimport {isSuperAdmin} from \"../../../Components/common/utils\"\n\nconst Index = props => {\n const t = useTranslation();\n const dispatch = useDispatch();\n\n const onHandleSaveEdit = () => {\n const changedValues = Object.keys(props.editValues).reduce((acc, key) => {\n if (props.editValues[key] !== props.selectedRow?.values?.[key]) {\n acc[key] = props.editValues[key];\n }\n return acc;\n }, {});\n // Implement save functionality here\n props?.setDistrictProfileTable([]);\n dispatch(\n contingencyPlanDPEditRequest({\n id: props.selectedRow?.original?.id,\n district_profile_category_id: props?.districtProfileCategoryId?.id,\n data: changedValues,\n }),\n );\n\n props.setSelectedRow();\n };\n return (\n <>\n \n
\n Edit Row
\n\n {Object.entries(editValues).map(([key, value], index) => {\n return (\n <>\n {columnHeader?.values[`${key}`] ? (\n handleInputChange(key, e.target.value)}\n className=\"w-100 contigency-plan-text-area\"\n />\n \n );\n })}\n
\n \n {' '}\n {index + 1}. {columnHeader?.values[`${key}`]}\n
\n ) : (\n\n {' '}\n {index + 1}.\n
\n )}\n\n \n\n {onEnabletick() ? (\n \n ) : (\n \n )}\n
\n \n
\n {props.isDistrictProfileRequesting && \n {t('CONTINGENCY_PLAN.DISTRICT_PROFILE_TABLE_TITLE')}\n
\n \n \n\n
\n ) : (\n ''\n )}\n \n );\n};\nexport default Index;\n","import React from 'react';\nimport {\n Button,\n Col,\n Row,\n} from 'reactstrap';\nimport Select from 'react-select';\nimport { t } from 'react-multi-lang';\n\nconst Header = (props) => {\n const handleCropTypeChange = (value) => {\n props.handleCropTypeChange(value);\n };\n\n const renderAPIParameterOptions = list => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n let default_option = { value: '', label: 'select all', id: 'select all' };\n options.push(default_option);\n params.map(param => {\n options.push(param);\n return true;\n });\n return options;\n }\n }\n };\n\n return (\n <>\n \n {props?.contingencyMeasuresTable?.rowData.length === 0 ? (\n \n <>\n
\n )}\n
\n \n );\n};\nexport default ContingencyMeasuresTable;\n","export default __webpack_public_path__ + \"static/media/tooltip.6c66bc13.svg\";","import React from 'react';\nimport ReactTooltip from 'react-tooltip';\nimport TooltipImageIcon from '../../../assets/Images/tooltip.svg';\n\nconst BreadCrumbsData = (props) => {\n return (\n <>\n {t('NEWS_FEED.NO_RECORDS_FOUND')}
\n ) : (\n\n {props.breadCrumbsData.system}{' '}\n {props?.breadCrumbsData?.droughtStage && '|' + props?.breadCrumbsData?.droughtStage}{' '}\n {props?.breadCrumbsData?.timePeriod && '|' + props.breadCrumbsData.timePeriod}\n \n \n \n
Early season drought
\n (Normal onset, followed by 15-20 days dry spell after sowing\n leading to poor germination/crop stand etc.)\n \n \n );\n};\nexport default BreadCrumbsData;\n","import React from 'react';\nimport { Col, Row } from 'reactstrap';\nimport Header from './Header';\nimport { useDispatch } from 'react-redux';\nimport ContingencyMeasuresTable from './Table';\nimport { IoMdDownload } from 'react-icons/io';\nimport { useTranslation } from 'react-multi-lang';\nimport Loader from '../../../Components/common/loader';\nimport BreadCrumbsData from './BreadCrumbsData';\nimport EditModal from '../EditModal';\nimport { contingencyPlanMeasuresEditDataRequest } from '../../../redux/contingencyPlan/contingencyPlanAction';\nimport {isSuperAdmin} from \"../../../Components/common/utils\"\n\nconst Index = props => {\n const t = useTranslation();\n const dispatch = useDispatch();\n const onHandleSaveEdit = () => {\n const changedValues = Object.keys(props.editValues).reduce((acc, key) => {\n if (props.editValues[key] !== props?.selectedRow?.values?.[key]) {\n acc[key] = props.editValues[key];\n }\n return acc;\n }, {});\n // Implement save functionality here\n props?.setContingencyMeasuresTable([]);\n dispatch(\n contingencyPlanMeasuresEditDataRequest({\n id: props?.selectedRow?.original?.id,\n data: changedValues,\n }),\n );\n\n props.setSelectedRow(null);\n };\n\n return (\n <>\n\n {t('CONTINGENCY_PLAN.CONTINGENCY_MEASURES_TABLE_TITLE')}\n
\n \nlist
\n ) : props?.contingencyMeasuresTable?.rowData?.length ? (\n\n
\n )}\n\n {props.selectedRow ? (\n <>\n {t('NEWS_FEED.NO_RECORDS_FOUND')}
\n\n
\n \n ) : (\n ''\n )}\n \n );\n};\nexport default Index;\n\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport Modal from 'react-modal';\nimport '../../assets/CSS/Transition.css';\nimport DistrictProfile from './DistrictProfile/index';\nimport ContingencyMeasures from './ContingencyMeasures/index';\n\nclass TransitionModal extends React.Component {\n state = {\n isOpen: false,\n };\n\n toggleModal = () => {\n this.setState(prevState => ({\n isOpen: !prevState.isOpen,\n }));\n };\n render() {\n const modalStyles = {\n overlay: {\n backgroundColor: '#ffffff',\n },\n };\n\n return (\n \n \n \n {this.props.from === 'district_profile' ? (\n
\n );\n }\n}\nconst someElement = document.getElementById('transition-modal');\nif (someElement) {\n ReactDOM.render(\n \n ({cordinateAndZoom.searchMarkerCoordinates[0].toFixed(2)},\n {cordinateAndZoom.searchMarkerCoordinates[1].toFixed(2)})\n \n
\n \n \n
\n \n
\n );\n};\n\nexport default ContingencyPlan;\n","import React from 'react';\nimport { ListGroup, ListGroupItem } from 'reactstrap';\n\nconst Menu = props => {\n const { selectedMenuItem, handleSelectedItem, categoriesList } = props;\n\n const handleSelectedMenuItem = value => {\n handleSelectedItem(value);\n };\n\n return (\n \n {isLoading && \n
\n
\n \n \n
\n \n
\n \n \n {renderMapContainer()}\n
\n \n \n {categoriesList?.map((i,index) => {\n return (\n handleSelectedMenuItem(i)}\n action\n key={index}\n >\n {i.category_name}\n \n );\n })}\n \n
\n );\n};\nexport default Menu;\n","import React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { useDispatch } from 'react-redux';\nimport {\n Card,\n CardImg,\n CardTitle,\n CardSubtitle,\n CardBody,\n Row,\n Col,\n} from 'reactstrap';\nimport moment from 'moment';\nimport {\n NEWS_FEED_CATEGORIES,\n NEWS_FEED_LENGTH_CONSTANT,\n} from '../../../Components/constants/index';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants';\nimport { useTranslation } from 'react-multi-lang';\nimport { htmlToText } from '../../../Components/common/utils';\nimport Loader from '../../../Components/common/loader';\nimport { getAllNewsFeedRequest } from '../../../redux/newsFeed/newsFeedAction';\n\nconst ProjectNews = props => {\n const {\n newsFeedList,\n isNewsFeedRequesting,\n pageNumber,\n pageCount,\n setPageNumber,\n selectedMenuItem,\n } = props;\n\n const t = useTranslation();\n const history = useHistory();\n const dispatch = useDispatch();\n\n\n const handleTitleClick = data => {\n history.push(`/news-feed-details-page?newsFeedId=${data.id}`);\n };\n\n const fetchNextTemplateData = selectedMenuItem => {\n setPageNumber(pageNumber + 1);\n dispatch(\n getAllNewsFeedRequest({\n page: pageNumber + 1,\n data: { newsfeed_category_id: selectedMenuItem?.id, status: 'true' },\n }),\n );\n };\n\n return (\n \n
\n );\n};\nexport default ProjectNews;\n","import React, { useEffect, useState } from 'react';\nimport { Row, Col } from 'reactstrap';\nimport axios from 'axios';\nimport {\n Card,\n CardTitle,\n CardSubtitle,\n CardBody,\n ListGroup,\n ListGroupItem,\n} from 'reactstrap';\nimport moment from 'moment';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants';\nimport { useTranslation } from 'react-multi-lang';\nimport {\n NEWS_FEED_CATEGORIES,\n NEWS_FEED_LENGTH_CONSTANT,\n} from '../../../Components/constants/index';\nimport Loader from '../../../Components/common/loader';\nimport _ from 'lodash';\nimport { newsFeedSubCategoriesRequest } from '../../../redux/newsFeed/newsFeedAction';\nimport {\n EXTERNAL_RSS_FEED_REQUEST_URL,\n EXTERNAL_RSS_FIELD_CONST,\n} from '../../../Components/constants/index';\n\nconst IWMINews = props => {\n const t = useTranslation();\n const dispatch = useDispatch();\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState(0);\n const [rssFeedList, setRssFeedList] = useState([]);\n const [selectedRssFeedItem, setSelectedRssFeedItem] = useState('');\n const [initialRssFeedItemList, setInitialRssFeedItemList] = useState('');\n const [selectedRssFeedItemList, setSelectedRssFeedItemList] = useState([]);\n const [visibleRssFeedList] = useState({\n start: EXTERNAL_RSS_FIELD_CONST.startIndex,\n end: EXTERNAL_RSS_FIELD_CONST.endIndex,\n });\n const nextProps = useSelector(state => ({\n NewsFeedSubCategoriesData: state.NewsFeed.newsFeedSubCategoriesListData,\n isNewsFeedSubCategoriesRequesting: state.NewsFeed.isNewsFeedSubCategoriesRequesting,\n }));\n\n useEffect(() => {\n if (nextProps.NewsFeedSubCategoriesData) {\n const {\n data: { result },\n } = nextProps.NewsFeedSubCategoriesData;\n setRssFeedList(result);\n if (result?.length) {\n result.map((i, index) => {\n if (index === 0) {\n setSelectedRssFeedItem(i);\n }\n });\n }\n }\n }, [nextProps.NewsFeedSubCategoriesData]);\n\n useEffect(() => {\n if (!_.isEmpty(props.selectedMenuItem)) {\n dispatch(newsFeedSubCategoriesRequest({ category_id: props.selectedMenuItem.id }));\n }\n }, [props.selectedMenuItem]);\n\n useEffect(() => {\n if (!_.isEmpty(selectedRssFeedItem)) {\n axios\n .get(EXTERNAL_RSS_FEED_REQUEST_URL.replace('{link}', selectedRssFeedItem.url))\n .then(response => {\n let data = response?.data;\n setInitialRssFeedItemList(data);\n let items = data?.items?.slice(0, 6);\n setSelectedRssFeedItemList({ ...data, items });\n setPageCount(data?.items?.length);\n setPageNumber(1);\n });\n }\n }, [selectedRssFeedItem]);\n\n\n const handleSelectedRSSFeedItem = (i, index) => {\n setSelectedRssFeedItem(i);\n };\n\n\n const fetchNextTemplateData = () => {\n let pageNuM = pageNumber + 1;\n setPageNumber(pageNuM);\n if (initialRssFeedItemList?.items) {\n let news_list = [];\n let list = _.cloneDeep(selectedRssFeedItemList?.items);\n let hasMoreData =\n selectedRssFeedItemList?.items?.length + 6 < initialRssFeedItemList?.items?.length\n ? true\n : false;\n let data = initialRssFeedItemList?.items?.slice(\n selectedRssFeedItemList?.items?.length,\n hasMoreData\n ? selectedRssFeedItemList?.items?.length + 6\n : initialRssFeedItemList?.items?.length,\n );\n if (selectedRssFeedItemList?.items?.length) {\n if (pageNuM > 1) {\n news_list = data?.length ? list?.concat(data) : list;\n }\n } else {\n news_list = list;\n }\n setSelectedRssFeedItemList({ ...selectedRssFeedItemList, items: news_list });\n } else {\n setSelectedRssFeedItemList([]);\n }\n };\n\n return (\n \n {NEWS_FEED_CATEGORIES.Project_News}\n
\n
\n \n
\n {isNewsFeedRequesting && fetchNextTemplateData(selectedMenuItem)}\n hasMore={pageNumber * 6 < pageCount ? true : false}\n loader={\n isNewsFeedRequesting && (\n \n \n )\n }\n className=\"flex flex-wrap\"\n >\n \n {newsFeedList?.map((i,index) => {\n return (\n handleTitleClick(i)}>\n \n \n \n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\n ? `${i?.title.substring(0, 60)}... `\n : i?.title}\n \n \n \n {t('BULLET_IN.PUBLISHED_ON') +\n ' ' +\n moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\n \n \n \n \n );\n })}\n
\n \n
\n {t('NEWS_FEED.NO_RECORDS')}
\n )}\n{t('BULLET_IN.LOADING')}
\n\n {htmlToText(i.content)?.length > 300 ? (\n
\n \n
\n ) : (\n \n )}\n \n {htmlToText(i.content).substring(0, 200)}\n ...\n handleTitleClick(i)}>\n {t('NEWS_FEED.READ_MORE')}\n \n
\n \n
\n );\n};\nexport default IWMINews;\n","import React, { useState, useEffect } from 'react';\nimport {\n Card,\n CardTitle,\n CardSubtitle,\n CardBody,\n Row,\n Col,\n} from 'reactstrap';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { NEWS_FEED_LENGTH_CONSTANT } from '../../../Components/constants';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants';\nimport { useTranslation } from 'react-multi-lang';\nimport { NEWS_FEED_CATEGORIES, NEWS_FEED_URL_CONSTANT } from '../../../Components/constants/index';\nimport { htmlToText } from '../../../Components/common/utils';\nimport Loader from '../../../Components/common/loader';\n\nconst Events = props => {\n const t = useTranslation();\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState(0);\n const [initialEventsRssFeedData, setInitialEventsRssFeedData] = useState('');\n const [eventsRssFeedData, setEventsRssFeedData] = useState();\n\n useEffect(() => {\n const axios = require('axios');\n axios.get(NEWS_FEED_URL_CONSTANT.EVENTS_URL).then(response => {\n let arrayData = response?.data;\n setInitialEventsRssFeedData(arrayData);\n let data = arrayData?.items?.slice(0, 6);\n setEventsRssFeedData({ ...arrayData, items: data });\n setPageCount(arrayData?.items?.length);\n setPageNumber(1);\n });\n }, []);\n\n const fetchNextTemplateData = () => {\n let pageNuM = pageNumber + 1;\n setPageNumber(pageNuM);\n if (initialEventsRssFeedData?.items) {\n let news_list = [];\n let list = _.cloneDeep(eventsRssFeedData?.items);\n let data = initialEventsRssFeedData?.items?.slice(\n eventsRssFeedData?.items?.length,\n initialEventsRssFeedData?.items?.length,\n );\n if (eventsRssFeedData?.items?.length) {\n if (pageNuM > 1) {\n news_list = data?.length ? list?.concat(data) : list;\n }\n } else {\n news_list = list;\n }\n setEventsRssFeedData({ ...eventsRssFeedData, items: news_list });\n } else {\n setEventsRssFeedData([]);\n }\n };\n\n return (\n \n {NEWS_FEED_CATEGORIES.IWMI_News}\n
\n
\n \n
\n {(props.isNewsFeedRequesting || nextProps.isNewsFeedSubCategoriesRequesting) && \n
\n fetchNextTemplateData()}\n hasMore={pageNumber * 6 < pageCount ? true : false}\n className=\"flex flex-wrap\"\n >\n \n {!_.isEmpty(selectedRssFeedItemList) &&\n selectedRssFeedItemList?.items?.length &&\n selectedRssFeedItemList?.items.map((i,index) => {\n return (\n \n \n \n \n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\n ? `${i?.title.substring(0, 60)}... `\n : i?.title}\n \n \n \n {t('BULLET_IN.PUBLISHED_ON') +\n ' ' +\n moment(i?.pubDate).format(DISPLAY_DATE_FORMAT)}\n \n \n \n \n );\n })}\n
\n \n
\n \n \n {rssFeedList?.length\n ? rssFeedList\n ?.slice(visibleRssFeedList.start, visibleRssFeedList.end + 1)\n ?.map((item, index) => {\n return (\n handleSelectedRSSFeedItem(item, index)}\n action\n key={index}\n >\n {item.sub_category_name}\n \n );\n })\n : ''}\n \n
\n \n \n \n
\n \n
\n );\n};\nexport default Events;\n","export default __webpack_public_path__ + \"static/media/share_icon.bffa40ef.svg\";","import _ from 'lodash';\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from 'react-multi-lang';\nimport {\n Row,\n Col,\n ListGroup,\n ListGroupItem,\n ListGroupItemHeading,\n} from 'reactstrap';\nimport { MdChevronLeft, MdChevronRight } from 'react-icons/md';\nimport ShareIcon from '../../../assets/Images/share_icon.svg';\nimport {\n EXTERNAL_RSS_FEED_REQUEST_URL,\n EXTERNAL_RSS_FIELD_CONST,\n NEWS_FEED_CATEGORIES,\n NEWS_FEED_KEYWORDS_CONST,\n} from '../../../Components/constants/index';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { newsFeedSubCategoriesRequest } from '../../../redux/newsFeed/newsFeedAction';\nimport { newsFeedDateFormat } from '../../../Components/common/utils';\nimport Loader from '../../../Components/common/loader';\n\nconst ExternalNews = props => {\n const dispatch = useDispatch();\n const [rssFeedList, setRssFeedList] = useState([]);\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState(0);\n const [selectedRssFeedItem, setSelectedRssFeedItem] = useState('');\n const [initialRssFeedItemList, setInitialRssFeedItemList] = useState('');\n const [selectedRssFeedItemList, setSelectedRssFeedItemList] = useState([]);\n const [subCategoryIndex, setSubCategoryIndex] = useState(0);\n const [visibleRssFeedList] = useState({\n start: EXTERNAL_RSS_FIELD_CONST.startIndex,\n end: EXTERNAL_RSS_FIELD_CONST.endIndex,\n });\n\n\n const { NewsFeed } = useSelector(state => ({\n NewsFeed: state.NewsFeed,\n }));\n\n useEffect(() => {\n if (!_.isEmpty(props.selectedMenuItem)) {\n dispatch(newsFeedSubCategoriesRequest({ category_id: props.selectedMenuItem.id }));\n }\n }, [props.selectedMenuItem]);\n\n useEffect(() => {\n if (!_.isEmpty(selectedRssFeedItem)) {\n axios\n .get(EXTERNAL_RSS_FEED_REQUEST_URL.replace('{link}', selectedRssFeedItem.url))\n .then(response => {\n let data = response?.data;\n data['items'] = data?.items?.filter(item => {\n for (let x of NEWS_FEED_KEYWORDS_CONST) {\n if (item.title.toLowerCase()?.includes(x.toLowerCase())) {\n return item;\n }\n }\n });\n setInitialRssFeedItemList(data);\n let items = data?.items?.slice(0, 6);\n setSelectedRssFeedItemList({ ...data, items });\n setPageCount(data?.items?.length);\n setPageNumber(1);\n });\n }\n }, [selectedRssFeedItem]);\n\n useEffect(() => {\n if (NewsFeed.newsFeedSubCategoriesListData) {\n if (NewsFeed.newsFeedSubCategoriesListData?.data) {\n const { result } = NewsFeed.newsFeedSubCategoriesListData?.data;\n setRssFeedList(result);\n if (result?.length) {\n result.map((i, index) => {\n if (index === 0) {\n setSelectedRssFeedItem(i);\n }\n });\n }\n }\n }\n }, [\n NewsFeed.newsFeedSubCategoriesListData,\n NewsFeed.isNewsFeedSubCategoriesRequesting,\n NewsFeed.newsFeedSubCategoriesListDataError,\n ]);\n\n const handleSelectedRSSFeedItem = (i, index) => {\n setSelectedRssFeedItem(i);\n setSubCategoryIndex(index);\n };\n\n const handleNext = () => {\n setSubCategoryIndex(subCategoryIndex + 1);\n setSelectedRssFeedItem(rssFeedList[subCategoryIndex + 1]);\n };\n\n const handlePrevious = () => {\n setSubCategoryIndex(subCategoryIndex - 1);\n setSelectedRssFeedItem(rssFeedList[subCategoryIndex - 1]);\n };\n\n\n const fetchNextTemplateData = () => {\n let pageNuM = pageNumber + 1;\n setPageNumber(pageNuM);\n if (initialRssFeedItemList?.items) {\n let news_list = [];\n let list = _.cloneDeep(selectedRssFeedItemList?.items);\n let hasMoreData =\n selectedRssFeedItemList?.items?.length + 6 < initialRssFeedItemList?.items?.length\n ? true\n : false;\n let data = initialRssFeedItemList?.items?.slice(\n selectedRssFeedItemList?.items?.length,\n hasMoreData\n ? selectedRssFeedItemList?.items?.length + 6\n : initialRssFeedItemList?.items?.length,\n );\n if (selectedRssFeedItemList?.items?.length) {\n if (pageNuM > 1) {\n news_list = data?.length ? list?.concat(data) : list;\n }\n } else {\n news_list = list;\n }\n setSelectedRssFeedItemList({ ...selectedRssFeedItemList, items: news_list });\n } else {\n setSelectedRssFeedItemList([]);\n }\n };\n\n\n return (\n \n {NEWS_FEED_CATEGORIES.Events}\n
\n
\n \n
\n {props.isNewsFeedRequesting && fetchNextTemplateData()}\n hasMore={pageNumber * 6 < pageCount ? true : false}\n className=\"flex flex-wrap\"\n >\n \n {eventsRssFeedData?.items?.reverse().map((i,index) => {\n return (\n \n \n \n \n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\n ? `${i?.title.substring(0, 60)}... `\n : i?.title}\n \n \n \n {t('BULLET_IN.PUBLISHED_ON') +\n ' ' +\n moment(i?.pubDate).format(DISPLAY_DATE_FORMAT)}\n \n \n \n \n );\n })}\n
\n \n
\n \n {htmlToText(i.content)?.length > 300 ? (\n
\n \n
\n ) : (\n \n )}\n \n {htmlToText(i.content).substring(0, 200)}\n ...\n
\n \n
\n );\n};\nexport default ExternalNews;\n","import moment from 'moment';\nimport _ from 'lodash';\nimport React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-multi-lang';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { Row, Card, Col, CardTitle, CardBody, CardSubtitle, CardText } from 'reactstrap';\nimport Loader from '../../../Components/common/loader';\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants/index';\nimport {\n NEWS_FEED_LENGTH_CONSTANT,\n NEWS_FEED_URL_CONSTANT,\n} from '../../../Components/constants';\nimport { htmlToText } from '../../../Components/common/utils';\n\nconst Resources = props => {\n const { newsFeedList, isNewsFeedRequesting } = props;\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState(0);\n const t = useTranslation();\n const [subCategoriesFilteredList, setSubCategoriesFilteredList] = useState([]);\n const [rssFeedData, setRssFeedData] = useState();\n const [secondaryRssFeedData, setSecondaryRssFeedData] = useState();\n\n useEffect(() => {\n const axios = require('axios');\n axios.get(NEWS_FEED_URL_CONSTANT.RESOURCE_URL).then(response => {\n setSecondaryRssFeedData(response.data);\n });\n }, []);\n\n useEffect(() => {\n if (secondaryRssFeedData?.items) {\n let le = secondaryRssFeedData.items?.slice(0, 6);\n le.sort(function(a, b) {\n return new Date(b.pubDate) - new Date(a.pubDate);\n });\n setRssFeedData({ ...secondaryRssFeedData, items: le });\n setPageCount(secondaryRssFeedData?.items?.length);\n }\n }, [secondaryRssFeedData]);\n\n useEffect(() => {\n if (newsFeedList?.length) {\n let newList = subCategoriesFilteredList;\n newsFeedList.map(i => {\n let arr = [];\n subCategoriesFilteredList.map(x => arr?.push(x.newsfeed_sub_category_id));\n if (arr?.includes(i?.newsfeed_sub_category_id)) {\n return newList;\n } else {\n return newList.push({\n newsfeed_sub_category_id: i?.newsfeed_sub_category_id,\n newsfeed_sub_category_name: i?.newsfeed_sub_category_name,\n });\n }\n });\n setSubCategoriesFilteredList([...newList]);\n }\n }, [newsFeedList]);\n\n useEffect(() => {\n let subCatIdList = [];\n let newList = [];\n if (subCategoriesFilteredList?.length) {\n subCategoriesFilteredList.map(data => {\n subCatIdList = newsFeedList.filter(\n i => data.newsfeed_sub_category_id === i.newsfeed_sub_category_id,\n );\n newList.push({\n subCategoryId: data.newsfeed_sub_category_id,\n subCategoryName: data.newsfeed_sub_category_name,\n resources_list: subCatIdList,\n });\n });\n }\n }, [subCategoriesFilteredList]);\n\n const fetchNextTemplateData = () => {\n let pageNuM = pageNumber + 1;\n setPageNumber(pageNuM);\n if (secondaryRssFeedData?.items) {\n let news_list = [];\n let list = _.cloneDeep(rssFeedData?.items);\n let hasMoreData =\n rssFeedData?.items?.length + 6 < secondaryRssFeedData?.items?.length ? true : false;\n let data = secondaryRssFeedData?.items?.slice(\n rssFeedData?.items?.length,\n hasMoreData ? rssFeedData?.items?.length + 6 : secondaryRssFeedData?.items?.length,\n );\n let updatedData = data;\n if (rssFeedData?.items?.length) {\n if (pageNuM > 1) {\n news_list = updatedData?.length ? list?.concat(updatedData) : list;\n }\n } else {\n news_list = list;\n }\n news_list.sort(function(a, b) {\n return new Date(b.pubDate) - new Date(a.pubDate);\n });\n setRssFeedData({ ...rssFeedData, items: news_list });\n } else {\n setRssFeedData([]);\n }\n };\n\n return (\n \n {t('NEWS_FEED.NEWS_SOURCES')} \n
\n
\n \n
\n {props.isNewsFeedRequesting && \n \n {props?.newsFeedList?.length &&\n props?.newsFeedList?.map(i => {\n return (\n \n \n {i?.external_link ? (\n {i.newsfeed_sub_category_name\n ? `${i.title} | ${i.newsfeed_sub_category_name}`\n : i.title}\n ) : ({\n i.newsfeed_sub_category_name\n ? `${i.title} | ${i.newsfeed_sub_category_name}`\n : i.title}\n )}\n \n \n );\n })}\n \n \n
\n
\n \n {NEWS_FEED_CATEGORIES.External_News}\n
\n
\n \n
\n The following sources provide up-to-date news on South Asia Drought Monitoring System.\n The RSS feeds displayed at right provide the latest stories, or click on the links\n below for more in-depth coverage.\n
\n\n {' '}\n
\n \n \n \n \n\n \n \n \n \n \n
\n
\n
\n \n \n 
\n
\n \n \n \n \n
\n \n \n
\n \n \n handleSelectedRSSFeedItem(item, index)}\n action\n key={index}\n >\n {item.sub_category_name}\n \n );\n })\n : ''}\n = rssFeedList?.length - 1 ? true : false}\n >\n \n
\n \n fetchNextTemplateData()}\n hasMore={pageNumber * 6 < pageCount ? true : false}\n className=\"flex flex-wrap\"\n >\n \n {!_.isEmpty(selectedRssFeedItemList) && selectedRssFeedItemList?.items?.length ? (\n selectedRssFeedItemList?.items.map((i,index) => {\n return (\n \n \n {' '}\n \n {i?.title}\n \n \n \n );\n })\n ) : (\n \n \n
\n \n \n \n
\n {newsFeedDateFormat(i?.pubDate)}\n {t('NEWS_FEED.NO_DATA')}
\n )}\n \n
\n );\n};\nexport default Resources;\n","import React from 'react';\nimport { Row, Col, Input } from 'reactstrap';\nimport Cookies from 'js-cookie';\nimport ProjectNews from '../ProjectNews/index';\nimport IWMINews from '../IWMI-News/index';\nimport Events from '../Events/index';\nimport ExternalNews from '../ExternalNews/index';\nimport Resources from '../Resources/index';\nimport Button from 'reactstrap-button-loader';\nimport { useTranslation } from 'react-multi-lang';\nimport { NEWS_FEED_CATEGORIES } from '../../../Components/constants/index';\n\nconst NewsFeedContent = props => {\n const {\n pageNumber,\n pageCount,\n setPageCount,\n setPageNumber,\n emailSubmitHandler,\n isEmailSubmit,\n isSubscribeLoading,\n selectedMenuItem,\n newsFeedList,\n subscribeButtonHandler,\n subscribeLoggedInButtonHandler,\n emailInputHandler,\n isSubscribeClicked,\n emailSubscribed,\n isNewsFeedRequesting,\n } = props;\n const t = useTranslation();\n\n const renderContent = () => {\n switch (selectedMenuItem?.category_name) {\n case NEWS_FEED_CATEGORIES.Project_News:\n return (\n \n {t('NEWS_FEED.PUBLICATIONS')}\n
\n
\n \n
\n {isNewsFeedRequesting && fetchNextTemplateData()}\n hasMore={pageNumber * 6 < pageCount ? true : false}\n loader={\n isNewsFeedRequesting && (\n \n \n )\n }\n className=\"flex flex-wrap\"\n >\n \n {rssFeedData?.items.map((i,index) => {\n return (\n \n \n \n \n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\n ? `${i?.title.substring(0, 60)}... `\n : i?.title}\n \n \n \n {t('BULLET_IN.PUBLISHED_ON') +\n ' ' +\n moment(i?.pubDate).format(DISPLAY_DATE_FORMAT)}\n \n \n \n \n );\n })}\n
\n \n
\n {t('BULLET_IN.LOADING')}
\n\n {htmlToText(i.content)?.length > 170 ? (\n
\n \n
\n ) : (\n \n )}\n \n {htmlToText(i.content).substring(0, 100)}\n ...\n
\n {t('NEWS_FEED.NO_RECORDS')}
;\n }\n };\n\n const handleEmailSubmitClick = () => {\n emailSubmitHandler();\n };\n\n const handleEmailInput = e => {\n emailInputHandler(e.target.value);\n };\n\n const handleSubscribeClick = () => {\n subscribeButtonHandler();\n };\n\n const handleSubscribeClickForLoggedIn = () => {\n subscribeLoggedInButtonHandler();\n };\n\n return (\n <>\n\n {!Cookies.get('user') ? (\n !emailSubscribed &&\n (isSubscribeClicked ? (\n \n {t('NEWS_FEED.SUBSCRIBE_NOW')}\n \n )}\n
\n \n \n handleEmailInput(e)}\n />\n \n \n {t('NEWS_FEED.SUBMIT')}\n \n \n
\n
\n ) : (\n \n ))\n ) : (\n {renderContent()}
\n \n );\n};\nexport default NewsFeedContent;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from 'react-multi-lang';\nimport { Row, Col } from 'reactstrap';\nimport Menu from './Menu/index';\nimport { useHistory } from 'react-router-dom';\nimport NewsFeedContent from './NewsFeedContent/index';\nimport Footer from '../new-landing-page/Footer';\nimport {\n newsFeedCategoriesRequest,\n getAllNewsFeedRequest,\n subscribeNewsFeedRequest,\n subscribeNewsFeedSuccess,\n} from '../../redux/newsFeed/newsFeedAction';\nimport _ from 'lodash';\nimport { isValidEmail, isLogedIn } from '../../Components/common/utils';\nimport { showSuccess, showError } from '../../Components/Notifications';\nimport Cookies from 'js-cookie';\nimport RightArrow from '../../assets/Images/back-button.svg';\n\nconst NewsFeed = () => {\n const dispatch = useDispatch();\n const history = useHistory();\n const [categoriesList, setCategoriesList] = useState();\n const [selectedMenuItem, setSelectedMenuItem] = useState();\n const [newsFeedList, setNewsFeedList] = useState([]);\n const [email, setEmail] = useState();\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [emailSubscribed, setEmailSubscribed] = useState(false);\n const [isSubscribeClicked, setIsSubscribeClicked] = useState(false);\n const [isEmailSubmit, setIsEmailSubmit] = useState(false);\n const nextProps = useSelector(state => ({\n newsFeedCategoriesListData: state.NewsFeed.newsFeedCategoriesListData,\n isGetAllNewsFeedRequesting: state.NewsFeed.isGetAllNewsFeedRequesting,\n getAllNewsFeedData: state.NewsFeed.getAllNewsFeedData,\n newsFeedSubscribeData: state.NewsFeed.newsFeedSubscribeData,\n isNewsFeedSubscribeRequesting: state.NewsFeed.isNewsFeedSubscribeRequesting,\n newsFeedSubscribeDataError: state.NewsFeed.newsFeedSubscribeDataError,\n }));\n\n useEffect(() => {\n if (!isLogedIn()) {\n let path = window.location.pathname;\n history.push(`/login?prevPath=${path.substring(1, path.length)}`);\n }\n window.scrollTo({ top: 0, behavior: 'instant' });\n dispatch(newsFeedCategoriesRequest());\n }, []);\n\n useEffect(() => {\n return () => {\n dispatch(subscribeNewsFeedSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (nextProps.newsFeedCategoriesListData) {\n const {\n data: { result },\n } = nextProps.newsFeedCategoriesListData;\n if (result) {\n setCategoriesList(result);\n setSelectedMenuItem(result[0]);\n dispatch(\n getAllNewsFeedRequest({\n page: pageNumber,\n data: { newsfeed_category_id: result[0].id, status: 'true' },\n }),\n );\n }\n }\n }, [nextProps.newsFeedCategoriesListData]);\n\n useEffect(() => {\n if (nextProps.getAllNewsFeedData) {\n let news_list = [];\n let list = _.cloneDeep(newsFeedList);\n const {\n data: { result },\n } = nextProps.getAllNewsFeedData;\n if (result) {\n if (newsFeedList?.length) {\n if (pageNumber > 1) {\n news_list = list?.concat(result.results);\n } else {\n news_list = result?.results;\n }\n } else {\n news_list = result?.results;\n }\n setNewsFeedList(news_list);\n setPageCount(result?.count);\n } else {\n setNewsFeedList([]);\n }\n }\n }, [nextProps.getAllNewsFeedData]);\n\n useEffect(() => {\n if (nextProps.newsFeedSubscribeData) {\n const {\n data: { result },\n } = nextProps.newsFeedSubscribeData;\n if (result) {\n showSuccess(result);\n setIsEmailSubmit(false);\n setIsSubscribeClicked(false);\n setEmail();\n setEmailSubscribed(true);\n }\n }\n }, [nextProps.newsFeedSubscribeData]);\n\n useEffect(() => {\n if (nextProps.newsFeedSubscribeDataError) {\n const {\n data: { response },\n } = nextProps.newsFeedSubscribeDataError;\n if (response) {\n showError(response?.data?.message[0]);\n setIsEmailSubmit(false);\n setIsSubscribeClicked(false);\n setEmail();\n }\n }\n }, [nextProps.newsFeedSubscribeDataError]);\n\n const handleSelectedItem = value => {\n setNewsFeedList([]);\n setPageNumber(1);\n setPageCount(0);\n dispatch(\n getAllNewsFeedRequest({\n page: 1,\n data: { newsfeed_category_id: value.id, status: 'true' },\n }),\n );\n setSelectedMenuItem(value);\n };\n\n const subscribeButtonHandler = () => {\n setIsSubscribeClicked(true);\n };\n\n const subscribeLoggedInButtonHandler = () => {\n setIsSubscribeClicked(true);\n dispatch(subscribeNewsFeedRequest({ email: Cookies.get('loggedin_user_details') }));\n };\n\n const emailInputHandler = value => {\n setEmail(value);\n if (isValidEmail(value)) {\n setIsEmailSubmit(true);\n } else {\n setIsEmailSubmit(false);\n }\n };\n\n const emailSubmitHandler = () => {\n setIsEmailSubmit(false);\n dispatch(subscribeNewsFeedRequest({ email: email }));\n };\n\n const handleManageCropsBackButton = () => {\n //history.goBack();\n history.push('/home');\n };\n\n return (\n <>\n \n \n handleManageCropsBackButton()}\n />\n \n
\n
\n {t('NEWS_FEED.NEWS_FEED')}
\n \n\n
\n \n \n );\n};\nexport default NewsFeed;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { t } from 'react-multi-lang';\nimport { convertTimeFormat } from '../../Components/common/utils';\nimport _ from 'lodash';\nimport {\n getByIdNewsFeedRequest,\n getByIdNewsFeedSuccess,\n} from '../../redux/newsFeed/newsFeedAction';\nimport moment from 'moment';\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\nimport Footer from '../landing-page/footer';\n\nconst NewsFeedDetailsPage = props => {\n const dispatch = useDispatch();\n const history = useHistory();\n const [newsFeedDetailsData, setNewsFeedDetailsData] = useState('');\n const nextProps = useSelector(state => ({\n getByIdNewsFeedData: state.NewsFeed.getByIdNewsFeedData,\n }));\n\n useEffect(() => {\n window.scrollTo({ top: 0, behavior: 'instant' });\n let search = window.location.search;\n let URLParams = new URLSearchParams(search);\n let newsFeedId = URLParams.get('newsFeedId');\n dispatch(getByIdNewsFeedRequest({ newsfeed_id: newsFeedId }));\n return () => {\n dispatch(getByIdNewsFeedSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (nextProps.getByIdNewsFeedData) {\n const {\n data: { result },\n } = nextProps.getByIdNewsFeedData;\n if (result?.length) {\n setNewsFeedDetailsData(result[0]);\n }\n }\n }, [nextProps.getByIdNewsFeedData]);\n \n const goBack = ()=>{\n let search = window.location.search;\n let URLParams = new URLSearchParams(search);\n let fromBackOffice=URLParams.get('from');\n if (fromBackOffice){\n history.push('/manage-newsfeed')\n }\n else{\n history.push('/news-feed')\n }\n }\n\n return (\n <>\n \n \n
\n
\n \n
\n \n
\n \n {!_.isEmpty(newsFeedDetailsData) ? (\n <>\n
\n \n \n {newsFeedDetailsData?.newsfeed_category_name}\n {' '}\n / {newsFeedDetailsData?.title}\n
\n{newsFeedDetailsData?.title}
\n\n {/* {newsFeedDetailsData?.newsfeed_category_name}{' '} */}\n {newsFeedDetailsData?.newsfeed_sub_category_name\n ? newsFeedDetailsData?.newsfeed_sub_category_name\n : ''}{' '}\n {newsFeedDetailsData?.created_date\n ? t('BULLET_IN.PUBLISHED_ON') + ' ' +moment(newsFeedDetailsData?.created_date).format(DISPLAY_DATE_FORMAT)\n : ''}\n {newsFeedDetailsData?.event_time\n ? convertTimeFormat(newsFeedDetailsData?.event_time)\n : ''}\n
\n \n ) : (\nLoading..
\n )}\n\n \n 
\n
\n \n \n
\n \n \n
\n \n );\n};\nexport default NewsFeedDetailsPage;\n","import React from 'react';\nimport { Row, Col, Modal, ModalBody } from 'reactstrap';\nimport { AiFillDelete } from 'react-icons/ai';\nimport { GoCircleSlash } from 'react-icons/go';\nimport { GrFormClose } from 'react-icons/gr';\nimport { AiFillCheckCircle } from 'react-icons/ai';\nimport { t } from 'react-multi-lang';\n\nconst AlertModal = props => {\n const handleChanges = data => {\n if (props?.onDeleteClick) {\n props?.onClick(data?.id);\n } else if (props?.onPublishClick) {\n props?.onClick(data, { is_publish: !data?.is_publish });\n }\n };\n\n return (\n <>\n \n \n \n \n \n
\n {props?.onDeleteClick && \n {t('BULLET_IN.ARE_YOU_SURE')}\n
\n \n {props?.onPublishClick ? (\n <>\n {t('BULLET_IN.THIS_WILL')} {props?.data?.is_publish ? 'Unpublish' : 'Publish'}{' '}\n {t('BULLET_IN.THE_BULLETIN')}\n \n ) : (\n <>{props?.fromTemplate ? t('BULLET_IN.DELETE_TEMPLATE_USER_TEXT') :t('BULLET_IN.DELETE_USER_TEXT')}\n )}\n
\n \n \n handleChanges(props?.data)}\n >\n {props?.onDeleteClick\n ? t('USER_GUIDE.DELETE')\n : props?.onPublishClick && props?.data?.is_publish\n ? t('USER_GUIDE.UNPUBLISH')\n : t('USER_GUIDE.PUBLISH')}\n \n
\n \n \n \n \n \n \n \n {t('BULLET_IN.BULLET_IN_TEMPLATES')}\n \n \n \n \n \n {\n cardHandler(i);\n }}\n >\n
\n \n \n
\n );\n};\n\nexport default BulletTemplateModal;\n","import React, { useState } from 'react';\nimport { Modal, ModalBody, ModalHeader, FormGroup, Label, Input, Button } from 'reactstrap';\nimport { t } from 'react-multi-lang';\n\nconst UploadBulletinTypeModal = (props) => {\n const { isOpen, toggleModal, setBulletModal, handleCreateBulletinPdf } = props;\n\n const fromTemplate = 'fromTemplate';\n const fromPdf = 'fromPdf';\n const [selectedType, setSelectedType] = useState(fromTemplate);\n const toggle = () => {\n toggleModal();\n };\n \n const handleChange = (e) => {\n setSelectedType(e.target.value);\n };\n const handleClick = () => {\n if (selectedType === fromTemplate) {\n setBulletModal(true);\n toggleModal();\n } else if (selectedType === fromPdf) {\n handleCreateBulletinPdf();\n toggleModal();\n }\n };\n return (\n <>\n {Bulletin.isGetTemplateRequesting &&
\n {_.isEmpty(templates) && !Bulletin.isGetTemplateRequesting && (\n \n {t('BULLET_IN.NO_RECORDS_FOUND')}\n
\n )}\n{t('BULLET_IN.LOADING')}
\n \n )\n }\n scrollableTarget=\"infinteScrollReference\"\n >\n {templates?.length ? templates?.map(i => {\n return (\n\n \n {i?.title === String(i?.title).toUpperCase()\n ? i?.title?.length > 16\n ? i?.title?.substring(0, 16) + '...'\n : i?.title\n : i?.title?.length > 21\n ? i?.title?.substring(0, 21) + '...'\n : i?.title}\n \n \n {i?.category_name}\n \n \n {moment(i?.created_date).format(DISPLAY_DATE_FORMAT)}\n \n
\n \n \n );\n }):(<>)}\n \n handleChange(e)}>\n
\n \n
\n \n
\n \n \n Next\n \n
\n \n \n history.push('/settingsDashboard')}\n />\n history.push('/bulletin')}\n >\n {t('BULLET_IN.TEMPLATES')}\n \n }\n\n {\n setBulletTypeModal(true)}\n >\n {t('BULLET_IN.CREATE_BULLETINS')}\n \n }\n \n
\n
\n {t('BULLET_IN.ALL_BULLETINS')}
\n \n{Bulletin.isGetAllBulletinRequesting &&
\n {_.isEmpty(dataList) &&\n !Bulletin.isGetAllBulletinRequesting &&\n Bulletin.getAllBulletinData && (\n \n {t('BULLET_IN.NO_RECORDS_FOUND')}\n
\n )}\n{t('BULLET_IN.LOADING')}
\n \n )\n }\n className=\"flex flex-wrap\"\n >\n\n \n {bulletModal && (\n
\n
\n \n \n );\n};\nexport default BackOffcieBulletin;\n","export default __webpack_public_path__ + \"static/media/user_guide_home_header.c4b3fb8e.png\";","import { useSelector, useDispatch } from 'react-redux';\nimport HeaderImage from '../../assets/Images/user_guide_home_header.png';\nimport { getAllTopicsListRequest } from '../../redux/actions';\nimport React, { useState, useEffect } from 'react';\nimport { Row, Col, Card } from 'reactstrap';\nimport { htmlToText, isLogedIn } from '../../Components/common/utils';\nimport '../../assets/CSS/StaticSidebar.css';\nimport _ from 'lodash';\nimport { useHistory } from 'react-router-dom';\nimport { t } from 'react-multi-lang';\nimport Footer from '../new-landing-page/Footer';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport Loader from '../../Components/common/loader';\n\nconst UserGuide = props => {\n let history = useHistory();\n const dispatch = useDispatch();\n\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [getAllTopicsList, setGetAllTopicsList] = useState([]);\n const [searchContentWordEntered, setSearchContentWordEntered] = useState('');\n const { UserGuideState } = useSelector(state => ({\n UserGuideState: state.UserGuide,\n }));\n\n useEffect(() => {\n if (!isLogedIn()) {\n let path = window.location.pathname;\n history.push(`/login?prevPath=${path.substring(1, path.length)}`);\n }\n setGetAllTopicsList([]);\n window.scrollTo({ top: 0, behavior: 'instant' });\n dispatch(getAllTopicsListRequest({ page: 1 }));\n return () => {\n setGetAllTopicsList([]);\n };\n }, []);\n\n useEffect(() => {\n if (UserGuideState?.getAllTopicsListData?.data?.data?.result) {\n let new_list = [];\n const {\n data: { result },\n } = UserGuideState?.getAllTopicsListData?.data;\n if (result) {\n if (getAllTopicsList) {\n if (pageNumber > 1) {\n new_list = getAllTopicsList.concat(result.results);\n } else {\n new_list = result.results;\n }\n } else {\n new_list = result.results;\n }\n setGetAllTopicsList(new_list);\n setPageCount(result?.count);\n } else {\n setGetAllTopicsList([]);\n }\n }\n }, [UserGuideState.getAllTopicsListData]);\n\n const handleSearchContent = e => {\n const searchContent = e.target.value;\n setSearchContentWordEntered(searchContent);\n };\n\n const handleKeyPress = event => {\n if (event.key === 'Enter' && event.target.value?.length !== 0) {\n history.push({\n pathname: '/user-guide-search',\n search: `?q=${searchContentWordEntered}`,\n });\n }\n };\n\n const handleClick = () => {\n if (searchContentWordEntered?.length !== 0) {\n history.push({\n pathname: '/user-guide-search',\n search: `?q=${searchContentWordEntered}`,\n });\n }\n };\n\n const fetchNextTemplateData = () => {\n setPageNumber(pageNumber + 1);\n dispatch(\n getAllTopicsListRequest({\n page: pageNumber + 1,\n }),\n );\n };\n\n const renderTools = () => {\n return (\n <>\n {getAllTopicsList?.length\n ? getAllTopicsList.map(item => {\n return (\n \n {\n cardHandler(i);\n }}\n >\n {\n handlePublishModal(e, i);\n }}\n />\n )}\n {(superAdmin || userPermisions?.includes(BULLETIN_CODES[2])) &&\n activeTab === BULLETIN_TAB_CONSTS.PENDING && (\n {\n handleDeleteModal(e, i);\n }}\n id=\"delete-bulletin\"\n data-tip\n data-for=\"delete-bulletin\"\n >\n )}\n \n {t('BULLET_IN.CLICK_TO_PUBLISH')}\n \n \n {t('BULLET_IN.CLICK_TO_DELETE')}\n \n \n
\n \n );\n }):(<>)}\n \n \n {i?.topic?.length ? i?.topic?.length > 29 ? i?.topic?.substring(0, 29) + '...' : i?.topic : ''}\n \n \n {moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\n \n {!i?.is_publish ? (\n activeTab !== BULLETIN_TAB_CONSTS.REJECTED ? (\n activeTab === BULLETIN_TAB_CONSTS.APPROVED ?
{' '}\n {(superAdmin || userPermisions?.includes(BULLETIN_CODES[4])) &&\n activeTab === BULLETIN_TAB_CONSTS.APPROVED &&\n !i?.is_publish && (\n \n
: \n
\n ) : (\n \n {t('BULLET_IN.REJECTED')}\n
\n )\n ) : activeTab !== BULLETIN_TAB_CONSTS.REJECTED ? (\n \n
\n ) : (\n \n {t('BULLET_IN.REJECTED')}\n
\n )}\n \n
\n \n \n );\n })\n : ''}\n \n );\n };\n\n return (\n <>\n {item?.name}
\n\n {htmlToText(item.description)?.length > 100 ? (\n\n
\n ) : (\n \n )}\n \n {htmlToText(item.description).substring(0, 100)}\n ...\n
\n \n 
\n
\n\n {t('USER_GUIDE.SOUTH_ASIA_TEXT')}
\n \n
\n \n \n
\n {UserGuideState.isGetAllTopicsListRequesting &&
\n {_.isEmpty(getAllTopicsList) && !UserGuideState.isGetAllTopicsListRequesting && (\n \n {t('USER_GUIDE.NO_RECORDS_FOUND')}\n
\n )}\n{t('BULLET_IN.LOADING')}
\n \n )\n }\n >\n\n {renderTools()}
\n
\n \n {/* hide this section in future */}\n \n \n );\n};\n\nexport default UserGuide;\n","var _circle, _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgUserGuide(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 80,\n height: 80,\n viewBox: \"0 0 80 80\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 40,\n cy: 40,\n r: 40,\n fill: \"#29A091\"\n })), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M44.24 20.7854C44.9667 20.5907 45.7248 20.5411 46.4707 20.6393C47.2167 20.7376 47.936 20.9819 48.5876 21.3581C49.2391 21.7344 49.8102 22.2354 50.2682 22.8323C50.7261 23.4293 51.062 24.1107 51.2566 24.8375L56.9191 45.9667C57.1138 46.6934 57.1634 47.4515 57.0652 48.1974C56.9669 48.9434 56.7227 49.6627 56.3464 50.3143C55.9701 50.9658 55.4692 51.5369 54.8722 51.9948C54.2752 52.4528 53.5938 52.7887 52.867 52.9833L39.79 56.4896C39.0629 56.6849 38.3045 56.735 37.558 56.637C36.8116 56.539 36.0918 56.2949 35.4397 55.9186C34.7877 55.5423 34.2162 55.0411 33.758 54.4438C33.2997 53.8465 32.9637 53.1647 32.7691 52.4375L27.1087 31.3083C26.914 30.5815 26.8644 29.8235 26.9627 29.0775C27.0609 28.3316 27.3052 27.6123 27.6815 26.9607C28.0577 26.3091 28.5587 25.7381 29.1557 25.2801C29.7526 24.8222 30.434 24.4863 31.1608 24.2916L44.24 20.7854ZM27.0879 39.2875L30.7587 52.975C31.1194 54.3319 31.8407 55.5659 32.8462 56.5458L31.9233 56.4958C30.4061 56.4161 28.9826 55.7371 27.9661 54.608C26.9495 53.4789 26.423 51.9922 26.5025 50.475L27.0879 39.2875ZM45.0483 23.8041L31.9691 27.3125C31.3024 27.4912 30.7339 27.9273 30.3885 28.525C30.0432 29.1227 29.9493 29.8331 30.1275 30.5L35.7879 51.6312C35.8764 51.9616 36.0291 52.2713 36.2372 52.5427C36.4454 52.814 36.705 53.0417 37.0012 53.2127C37.2974 53.3837 37.6244 53.4947 37.9635 53.5394C38.3025 53.584 38.6471 53.5614 38.9775 53.4729L52.0587 49.9667C52.7255 49.7879 53.294 49.3518 53.6393 48.7541C53.9846 48.1564 54.0785 47.446 53.9004 46.7791L48.2379 25.6458C48.0591 24.9791 47.623 24.4106 47.0253 24.0652C46.4276 23.7199 45.7173 23.626 45.0504 23.8041H45.0483ZM25.1608 36.2083L24.4212 50.3666C24.3441 51.8208 24.6712 53.2042 25.3045 54.4083L24.442 54.0729C23.7396 53.8033 23.0971 53.398 22.5513 52.8801C22.0055 52.3622 21.567 51.7418 21.261 51.0545C20.9549 50.3671 20.7873 49.6262 20.7676 48.8741C20.7479 48.1219 20.8765 47.3732 21.1462 46.6708L25.1608 36.2083ZM35.292 29.6541C35.5563 29.5833 35.832 29.5652 36.1033 29.6009C36.3745 29.6365 36.6362 29.7253 36.8731 29.8621C37.1101 29.9988 37.3178 30.1809 37.4844 30.398C37.651 30.615 37.7733 30.8628 37.8441 31.1271C37.915 31.3914 37.9331 31.667 37.8974 31.9383C37.8617 32.2096 37.773 32.4712 37.6362 32.7082C37.4994 32.9451 37.3173 33.1529 37.1003 33.3195C36.8832 33.4861 36.6355 33.6083 36.3712 33.6791C36.1069 33.75 35.8313 33.7681 35.56 33.7324C35.2887 33.6968 35.0271 33.608 34.7901 33.4712C34.3115 33.195 33.9622 32.74 33.8191 32.2062C33.676 31.6725 33.7508 31.1037 34.027 30.6251C34.3033 30.1465 34.7583 29.7973 35.292 29.6541Z\",\n fill: \"white\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgUserGuide);\nexport default __webpack_public_path__ + \"static/media/user-guide.53e6a128.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { Editor } from '@tinymce/tinymce-react';\n\nconst DraftEditor = props => {\n const { content, onEditorChange } = props;\n return (\n <>\n \n onEditorChange(Text)}\n init={{\n height: '26rem',\n selector: '#tiny-editor',\n plugins: [\n 'advlist autolink lists link image charmap print preview anchor',\n 'searchreplace visualblocks code fullscreen',\n 'insertdatetime media paste imagetools wordcount',\n ],\n toolbar:\n 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | link image | code',\n image_title: true,\n file_picker_types: 'image',\n file_picker_callback: function(cb) {\n var input = document.createElement('input');\n input.setAttribute('type', 'file');\n input.setAttribute('accept', 'image/*');\n input.onchange = function() {\n var file = this.files[0];\n var reader = new FileReader();\n reader.onload = () => {\n var id = 'blobid' + new Date().getTime();\n var blobCache = window.tinymce.activeEditor.editorUpload.blobCache;\n var base64 = reader.result.split(',')[1];\n var blobInfo = blobCache.create(id, file, base64);\n blobCache.add(blobInfo);\n cb(blobInfo.blobUri(), { title: file.name });\n };\n reader.readAsDataURL(file);\n };\n input.click();\n },\n }}\n />\n
\n Note:- For better user experience, kindly choose font family:\"National/verdana\" and font size:\"14px\".
\n \n );\n};\n\nexport default DraftEditor;\n","import React, { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Row, Col, Card, Container } from 'reactstrap';\nimport { Field, reduxForm, change } from 'redux-form';\nimport { useHistory } from 'react-router-dom';\nimport RightArrow from '../../assets/Images/back-button.svg';\nimport _ from 'lodash';\nimport Select from 'react-select';\nimport {\n renderReactSelectInputField,\n renderReactUserInputField\n} from '../../Components/common/renderInputField';\nimport Button from 'reactstrap-button-loader';\nimport { t } from 'react-multi-lang';\nimport DraftEditor from './DraftEditor';\nimport {\n addUserGuideRequest,\n addUserGuideSuccess,\n getAllTopicsRequest,\n getAllUserGuideRequest,\n updateUserGuideRequest,\n updateUserGuideSuccess,\n addUserGuideFailed,\n updateUserGuideFailed\n} from '../../redux/userGuide/userGuideActions';\nimport { showError } from '../../Components/Notifications';\nconst place=[\n {id:1,label: \"Before\" ,value:\"before\"},\n {id:2,label: \"After\" ,value:\"after\"},\n \n]\n\nconst CreateUserGuidePage = props => {\n const { reset, formUserGuideData, fromListing, categoryList } = props;\n let history = useHistory();\n const dispatch = useDispatch();\n let formSubmissionDataHandler = new FormData();\n\n const [selectedOption, setSelectedOption] = useState();\n const [subTopicOptions, setSubTopicOptions] = useState();\n const [saveButtonDisabled, setSaveButtonDisabled] = useState(true);\n const [formReset, setFormReset] = useState(false);\n const [topic,setTopic]=useState(false)\n const [subtopic,setSubtopic]=useState(false)\n const [defaultValue,setDefaultValue] = useState('')\n const [updateButtonDisable,setUpdateButtonDisable] = useState(false)\n const [isSubTopicOptionsEmpty,setIsSubTopicOptionsEmpty]= useState(true)\n const [formData, setFormData] = useState({\n topic: '',\n topic_id: '',\n sub_topic: '',\n level:'',\n before_sub_topic:'',\n before_sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n });\n\n const { UserGuide } = useSelector(state => ({\n UserGuide: state.UserGuide,\n }));\n\n useEffect(() => {\n setFormReset(false);\n dispatch(getAllTopicsRequest());\n return () => {\n dispatch(updateUserGuideSuccess({}));\n dispatch(addUserGuideSuccess({}));\n dispatch(updateUserGuideFailed({}))\n dispatch(addUserGuideFailed({}))\n };\n\n }, []);\n\n useEffect(() => {\n if (UserGuide?.addUserGuideDataError) {\n let {\n data: { response },\n } = UserGuide?.addUserGuideDataError;\n showError(UserGuide?.addUserGuideDataError?.data?.response?.data?.message[0]);\n }\n }, [UserGuide.addUserGuideDataError]);\n\nuseEffect(() => {\n if (UserGuide?.updateUserGuideDataError) {\n let {\n data: { response },\n } = UserGuide?.updateUserGuideDataError;\n showError(UserGuide?.updateUserGuideDataError?.data?.response?.data?.message[0]);\n }\n}, [UserGuide.updateUserGuideDataError]);\n\n useEffect(() => {\n if (formUserGuideData) {\n setFormData(formUserGuideData);\n }\n }, [formUserGuideData]);\n\n useEffect(() => {\n renderAPISubTopicOptions(categoryList, selectedOption);\n }, [selectedOption]);\n\n useEffect(()=>{\n if (_.isEmpty(subTopicOptions)){\n setIsSubTopicOptionsEmpty(true)\n }\n else{\n setIsSubTopicOptionsEmpty(false)\n }\n },[subTopicOptions])\n\n /**\n * changed by : sai krishna thalla\n * reason: enable button not working properly in add\n * date: 13-sep-2022\n */\n useEffect(() => {\n if (!_.isEmpty(subTopicOptions)){\n if (formData?.topic_id && formData?.description && formData?.sub_topic && formData?.before_sub_topic_id && formData?.level ) {\n setSaveButtonDisabled(false);\n } else {\n setSaveButtonDisabled(true);\n }\n }\n else{\n if (formData?.topic_id && formData?.description && formData?.sub_topic) {\n setSaveButtonDisabled(false);\n } else {\n setSaveButtonDisabled(true);\n }\n }\n }, [formData]);\n\n useEffect(() => {\n if (!formData?.description && _.isEmpty(selectedOption))\n {\n setUpdateButtonDisable(true)\n }\n else{\n setUpdateButtonDisable(false)\n }\n },[formData])\n\n useEffect(() => {\n if (formReset) {\n reset();\n }\n }, [formReset]);\n\n useEffect(() => {\n if (UserGuide?.addUserGuideData?.data?.data?.result) {\n setFormData({\n id:'',\n topic: '',\n topic_id: '',\n sub_topic: '',\n level:'',\n before_sub_topic: '',\n before_sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n });\n setFormReset(true);\n dispatch(getAllUserGuideRequest({ page: 1, data: { is_delete: 'False',is_backoffice: \"True\",is_backoffice: \"True\" } }));\n history.goBack();\n } else if (UserGuide?.addUserGuideDataError) {\n let {\n data: { response },\n } = UserGuide?.addUserGuideDataError;\n //showError(UserGuide?.addUserGuideDataError?.data?.response?.data?.errors?.data[0]);\n }\n }, [UserGuide.addUserGuideData, UserGuide.addUserGuideDataError]);\n\n useEffect(() => {\n if (UserGuide?.updateUserGuideData?.data?.data?.result) {\n setFormData({\n id:'',\n topic: '',\n topic_id: '',\n sub_topic: '',\n level:'',\n before_sub_topic: '',\n before_sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n });\n setFormReset(true);\n dispatch(getAllUserGuideRequest({ page: 1, data: { is_delete: 'False',is_backoffice: \"True\" } }));\n props.handleFromManageUserGuide(false);\n history.goBack();\n } else if (UserGuide?.updateUserGuideDataError) {\n if (UserGuide?.updateUserGuideDataError.data.response.data.message);\n }\n }, [UserGuide.updateUserGuideData, UserGuide.updateUserGuideDataError]);\n\n useEffect(()=>{\nif (UserGuide?.updateUserGuideData?.status === \"400\"){\n\n}\n },[UserGuide.updateUserGuideData])\n\n useEffect(() => {\n if (!_.isEmpty(props?.initialValues)) {\n if (!_.isEmpty(categoryList)) {\n renderAPISubTopicOptions(categoryList, props.initialValues.topic.value);\n }\n setSubtopic(true);\n setTopic(true);\n }\n }, [props.initialValues]);\n\n useEffect(()=>{\n if (props?.initialValues?.level){\n setDefaultValue(props.initialValues.level == 1 ? place[0] : place[1])\n }\n },[props.initialValues.level])\n\n const renderAPITopicOptions = list => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params?.length) {\n params.map(param => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n };\n options.push(data);\n return true;\n });\n return options;\n }\n }\n };\n\n const renderAPISubTopicOptions = (list, option) => {\n if (list) {\n let params = [...list];\n let options = [];\n let requiredTopic = params.filter(param => param.name === option);\n if (requiredTopic?.length) {\n let requiredSubTopic = requiredTopic[0].sub_topic;\n\n if (requiredSubTopic?.length) {\n requiredSubTopic.forEach(element => {\n let data = {\n value: element.name,\n label: `${element.name}`,\n id: element.id,\n order:element.order,\n };\n options.push(data);\n });\n setSubTopicOptions(options);\n } else {\n setSubTopicOptions([]);\n }\n }\n }\n };\n\n const topicHandler = data => {\n if (data?.value) {\n setSelectedOption(data.value);\n formData.topic = data.value;\n formData.topic_id = data.id;\n // formData.sub_topic_id = ''; //\n //setFormData({ ...formData });\n setTopic(true);\n dispatch(change('user-guide-add-form','Beforesubtopic',''))\n formData.before_sub_topic = '';\n formData.before_sub_topic_id = '';\n formData.before_sub_topic_order='';\n setFormData({ ...formData });\n\n }\n };\n\n const subTopicHandler = data => {\n const value=data.currentTarget.value;\n if (value) {\n formData.sub_topic = value;\n setFormData({ ...formData });\n setSubtopic(true);\n\n // formData.title = '';\n // setFormData({ ...formData });\n setSubtopic(true);\n setTopic(true);\n }\n \n };\n const level=data=>{\n if(data){\n formData.level=data.id;\n setDefaultValue(data.id == 1 ? place[0] : place[1])\n setFormData({...formData});\n }\n }\n const beforeSubTopicHandler = data => {\n if (data?.value) {\n formData.before_sub_topic = data.value;\n formData.before_sub_topic_id = data.id;\n formData.before_sub_topic_order=data.order;\n setFormData({ ...formData });\n\n // formData.title = data.value;\n // setFormData({ ...formData });\n }\n };\n\n const handleDescription = data => {\n formData.description = data;\n setFormData({ ...formData });\n };\n const handlePublishStatus = e => {\n formData.publish_status = e.target.checked;\n setFormData({ ...formData });\n };\n\n const onFormSubmit = e => {\n e.preventDefault();\n formSubmissionDataHandler.append(\"topic_id\", formData?.topic_id);\n formSubmissionDataHandler.append(\"subtopic_name\", formData?.sub_topic);\n\n if (formData?.level){\n formSubmissionDataHandler.append('level', formData?.level);\n }\n if (formData?.before_sub_topic_order){\n formSubmissionDataHandler.append(\"order\", formData?.before_sub_topic_order );\n }\n\n formSubmissionDataHandler.append(\"content\", formData?.description);\n formSubmissionDataHandler.append(\"status\", `${_.capitalize(formData?.publish_status)}`);\n formSubmissionDataHandler.append(\"order_subtopic_id\",formData?.before_sub_topic_id)\n if (formData?.title){\n formSubmissionDataHandler.append(\"title\", formData?.title);\n }\n setFormReset(false);\n dispatch(addUserGuideRequest(formSubmissionDataHandler));\n };\n\n const handleUpdate = () => {\n if (!updateButtonDisable) {\n formSubmissionDataHandler.append('id', formData?.id);\n formSubmissionDataHandler.append('topic_id', formData?.topic_id);\n formSubmissionDataHandler.append('subtopic_id', formData?.sub_topic_id);\n formSubmissionDataHandler.append('subtopic_name', formData?.sub_topic);\n formSubmissionDataHandler.append('level', formData?.level);\n formSubmissionDataHandler.append('order', formData?.before_sub_topic_order);\n formSubmissionDataHandler.append('content', formData?.description);\n formSubmissionDataHandler.append('status', `${_.capitalize(formData?.publish_status)}`);\n formSubmissionDataHandler.append('title', formData?.title);\n formSubmissionDataHandler.append('order_subtopic_id',formData?.before_sub_topic_id)\n setFormReset(false);\n dispatch(updateUserGuideRequest(formSubmissionDataHandler));\n }\n };\n return (\n <>\n\n \n \n
\n \n
\n \n );\n};\nexport default reduxForm({\n form: 'user-guide-add-form',\n enableReinitialize: true,\n})(CreateUserGuidePage);\n","import React, { useState } from 'react';\nimport { Card, CardBody } from 'reactstrap';\nimport { Field, reduxForm, change } from 'redux-form';\nimport { useDispatch, useSelector } from 'react-redux';\nimport _ from 'lodash';\nimport {\n renderReactSelectInputField,\n} from '../../Components/common/renderInputField';\nimport Button from 'reactstrap-button-loader';\nimport { t } from 'react-multi-lang';\nconst Filter = props => {\n const {\n categoryList,\n } = props;\n\n const [subTopicOptions, setSubTopicOptions] = useState();\n const [filterButtonDisabled, setFilterButtonDisabled] = useState(true);\n const [isSubTopicOptionsDisabled, setIsSubTopicOptionsDisabled] = useState(true);\n\n const dispatch = useDispatch();\n\n const { UserGuide } = useSelector(state => ({\n UserGuide: state.UserGuide,\n }));\n\n const renderAPIParameterOptions = (list, action_name) => {\n if (list) {\n let params = [...list];\n let options = [];\n if (params.length) {\n if (action_name === 'category') {\n let default_option = { value: 'select', label: 'select', id: 'select' };\n options.push(default_option);\n }\n params.map(param => {\n let data = {\n value: param.name,\n label: `${param.name}`,\n id: param.id,\n key:param.id,\n };\n options.push(data);\n return true;\n });\n\n return options;\n }\n }\n };\n\n const renderAPISubTopicOptions = (list, option) => {\n if (list) {\n let params = [...list];\n let options = [];\n let default_option = { value: 'select', label: 'select', id: 'select' };\n options.push(default_option);\n let requiredTopic = params.filter(param => param.name === option);\n if (requiredTopic?.length) {\n let requiredSubTopic = requiredTopic[0].sub_topic;\n if (requiredSubTopic?.length) {\n requiredSubTopic.forEach(element => {\n let data = {\n value: element.name,\n label: `${element.name}`,\n id: element.id,\n };\n options.push(data);\n });\n setIsSubTopicOptionsDisabled(false);\n setSubTopicOptions(options);\n } else {\n setIsSubTopicOptionsDisabled(true);\n setSubTopicOptions([]);\n }\n } else {\n setIsSubTopicOptionsDisabled(true);\n setSubTopicOptions([]);\n }\n }\n };\n\n const handleFilterCategoryChange = data => {\n dispatch(change('userGuideFilterForm', 'filter_sub_category', ''));\n props.handleFilterCategoryChange(data);\n renderAPISubTopicOptions(categoryList, data.value);\n if (data.value !== 'select') {\n setFilterButtonDisabled(false);\n } else {\n setFilterButtonDisabled(true);\n }\n };\n\n const handleFilterSubCategoryChange = data => {\n props.handleFilterSubCategoryChange(data);\n };\n\n const onFormSubmit = e => {\n e.preventDefault();\n props.handleFilterSubmit();\n };\n\n return (\n <>\n \n \n \n
\n \n \n \n history.goBack()}\n />\n \n {fromListing ? (\n
\n \n {t('USER_GUIDE.MODIFY_USER_GUIDE')}\n
\n ) : (\n\n {t('USER_GUIDE.ADD_USER_GUIDE')}\n
\n )}\n\n {\n onFormSubmit(e);\n }}\n >\n
\n \n \n {\n topicHandler(e);\n \n }}\n required={true}\n isMulti={false}\n options={renderAPITopicOptions(categoryList)}\n >\n \n { \n subTopicHandler(e)}}\n required={true}\n isMulti={false}\n isDisabled={!topic}\n >\n \n
\n \n
\n \n\n
\n\n \n handlePublishStatus(e)}\n required={false}\n />\n \n
\n \n {!fromListing ? (\n \n {t('USER_GUIDE.SAVE')}\n \n ) : (\n \n {t('USER_GUIDE.UPDATE')}\n \n )}\n
\n \n \n handleFilterCategoryChange(e)}\n required={true}\n isMulti={false}\n options={renderAPIParameterOptions(categoryList, 'category')}\n >\n {subTopicOptions?.length ? (\n handleFilterSubCategoryChange(e)}\n required={true}\n isMulti={false}\n options={subTopicOptions}\n isDisabled={isSubTopicOptionsDisabled}\n >\n ) : (\n ''\n )}\n
\n \n \n \n {t('USER_GUIDE.FILTER')}\n \n
\n \n \n \n \n \n
\n {props.onDeleteClick && \n {t('USER_GUIDE.ARE_YOU_SURE')}\n
\n \n {props.onPublishClick ? (\n <>\n {t('USER_GUIDE.THIS_WILL')} {props.data.status ? 'Unpublish' : 'Publish'}{' '}\n {t('USER_GUIDE.THE_USER_GUIDE')}\n \n ) : (\n <>{t('USER_GUIDE.DELETE_USER_TEXT')}\n )}\n
\n \n \n handleChanges(props.data)}\n >\n {props?.onDeleteClick\n ? t('USER_GUIDE.DELETE')\n : props?.onPublishClick && props.data.status\n ? t('USER_GUIDE.UNPUBLISH')\n : t('USER_GUIDE.PUBLISH')}\n \n
\n \n \n \n \n \n \n );\n};\n\nexport default AlertModal;\n","import RightArrow from '../../assets/Images/back-button.svg';\nimport { useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory } from 'react-router-dom';\nimport { t } from 'react-multi-lang';\nimport _ from 'lodash';\nimport ReactTooltip from 'react-tooltip';\nimport DummyResourceImage from '../../assets/Images/dummy_resource_image.jpg';\nimport { AiFillCheckCircle } from 'react-icons/ai';\nimport { GoCircleSlash } from 'react-icons/go';\nimport Loader from '../../Components/common/loader';\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\nimport moment from 'moment';\nimport { showSuccess, showError } from '../../Components/Notifications';\nimport { FILE_EXTENSION } from '../../Components/constants/index';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\nimport { BiPlus } from 'react-icons/bi';\nimport CreateUserGuidePage from './CreateUserGuidePage';\nimport { MdKeyboardArrowLeft ,MdKeyboardArrowRight} from 'react-icons/md';\nimport Filter from './Filter';\nimport AlertModal from './AlertModal';\n\nimport {\n Row,\n Card,\n Col,\n} from 'reactstrap';\nimport {\n getAllUserGuideRequest,\n changeStatusUserGuideRequest,\n deleteUserGuideRequest,\n getAllTopicsRequest,\n deleteUserGuideSuccess,\n changeStatusUserGuideSuccess,\n getAllUserGuideSuccess,\n addUserGuideSuccess,\n updateUserGuideSuccess,\n} from '../../redux/userGuide/userGuideActions';\nimport { isStaffUser, isSuperAdmin } from '../../Components/common/utils';\nconst ManageUserGuide = () => {\n const dispatch = useDispatch();\n let history = useHistory();\n let form = new FormData();\n const [isHideBar, setHideBar] = useState(false);\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [userGuideList, setUserGuideList] = useState([]);\n const [isPublishModal, setIsPublishModal] = useState(false);\n const [isDeleteModal, setIsDeleteModal] = useState(false);\n const [isToggleRightBar, setIsToggleRightBar] = useState(false);\n const [updateUserGuide, setUpdateUserGuide] = useState('');\n const [fromListing, setFromListing] = useState(false);\n const [defaultUserGuideOptions, setDefaultUserGuideOptions] = useState({});\n const [categoryList, setCategoryList] = useState([]);\n const [filterCategoryList, setFilterCategoryList] = useState();\n const [filterSubCategoriesList, setFilterSubCategoriesList] = useState();\n const [filterChanges, setFilterChanges] = useState({\n filterCategory: '',\n filterSubCategory: '',\n });\n const [formUserGuideData, setFormUserGuideData] = useState({\n id: '',\n topic: '',\n topic_id: '',\n sub_topic: '',\n sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n });\n const [showChangeStatus, setShowChangeStatus] = useState();\n const [scrollValue, setScrollValue] = useState(0);\n const { UserGuide } = useSelector(state => ({\n UserGuide: state.UserGuide,\n }));\n\n useEffect(() => {\n window.scrollTo({ top: scrollValue, behavior: 'auto' });\n if (isSuperAdmin() || isStaffUser()) {\n dispatch(getAllUserGuideRequest({ page: pageNumber, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\n dispatch(getAllTopicsRequest());\n setFromListing(false);\n setIsToggleRightBar(false);\n\n return () => {\n dispatch(addUserGuideSuccess({}));\n dispatch(updateUserGuideSuccess({}));\n dispatch(deleteUserGuideSuccess({}));\n dispatch(getAllUserGuideSuccess({}));\n dispatch(changeStatusUserGuideSuccess({}));\n dispatch(getAllUserGuideSuccess({}));\n };\n } else {\n history.push('/home');\n }\n }, []);\n\n useEffect(() => {\n if (UserGuide?.getAllTopicData) {\n if (UserGuide?.getAllTopicData?.data) {\n const {\n data: { result },\n } = UserGuide?.getAllTopicData?.data;\n setFilterCategoryList(result);\n }\n }\n }, [UserGuide.getAllTopicData]);\n\n useEffect(() => {\n if (UserGuide.updateUserGuideData) {\n setIsPublishModal(false);\n setPageNumber(1);\n setFormUserGuideData({\n id: '',\n topic: '',\n topic_id: '',\n sub_topic: '',\n sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n });\n setUserGuideList([]);\n setFromListing(false);\n dispatch(getAllUserGuideSuccess({}));\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\n }\n }, [UserGuide.updateUserGuideData]);\n\n useEffect(() => {\n if (UserGuide.changeStatusUserGuideData) {\n const result = UserGuide?.changeStatusUserGuideData?.data?.data?.result;\n\n if (result) {\n setScrollValue(parseInt(window.pageYOffset));\n if (showChangeStatus) {\n showSuccess(t('USER_GUIDE.SHOW_PUBLISH'));\n } else {\n showSuccess(t('USER_GUIDE.SHOW_UNPUBLISH'));\n }\n setFromListing(false);\n setPageNumber(1);\n setUserGuideList([]);\n setIsPublishModal(false);\n dispatch(getAllUserGuideSuccess({}));\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\n }\n }\n }, [UserGuide.changeStatusUserGuideData]);\n\n useEffect(() => {\n if (UserGuide?.deleteUserGuideData) {\n const result = UserGuide?.deleteUserGuideData?.data?.data?.result;\n if (result) {\n showSuccess(result);\n setPageNumber(1);\n setIsDeleteModal(false);\n setUserGuideList([]);\n setFromListing(false);\n dispatch(getAllUserGuideSuccess({}));\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\n }\n }\n }, [UserGuide.deleteUserGuideData]);\n\n useEffect(() => {\n if (UserGuide.getAllUserGuideData?.data?.result?.results) {\n let new_list = [];\n const {\n data: { result },\n } = UserGuide.getAllUserGuideData;\n\n if (result) {\n if (userGuideList) {\n if (pageNumber > 1) {\n new_list = userGuideList.concat(result.results);\n } else {\n new_list = result.results;\n }\n } else {\n new_list = result.results;\n }\n setUserGuideList(new_list);\n setPageCount(result?.count);\n } else {\n setUserGuideList([]);\n }\n }\n if (scrollValue !== 0) {\n window.scrollTo({ top: scrollValue, behavior: 'auto' });\n }\n }, [UserGuide.getAllUserGuideData]);\n\n const handlePublishModal = data => {\n setShowChangeStatus(data.status);\n setIsPublishModal(!isPublishModal);\n if (!isPublishModal) setUpdateUserGuide(data);\n };\n\n const handleDeleteModal = data => {\n setScrollValue(parseInt(window.pageYOffset));\n setIsDeleteModal(!isDeleteModal);\n if (!isDeleteModal) setUpdateUserGuide(data);\n };\n\n const handlePublishChanges = (data, { publish }) => {\n form.append('id', data.id);\n form.append('status', `${_.capitalize(publish)}`);\n dispatch(changeStatusUserGuideRequest(form));\n };\n\n const handleDelete = value => {\n dispatch(deleteUserGuideRequest({ id: value }));\n };\n\n\n const fetchNextUserGuideData = () => {\n setPageNumber(pageNumber + 1);\n dispatch(\n getAllUserGuideRequest({\n page: pageNumber + 1,\n fromBackOffice: true,\n data: {\n topic_id: filterChanges?.filterCategory?.id,\n subtopic_id: filterChanges?.filterSubCategory?.id,\n\n status: '',\n is_delete: 'False',\n is_backoffice: \"True\"\n },\n }),\n );\n };\n\n const handleReadMore = data => {\n if (!_.isEmpty(data.subtopic_id) && !_.isEmpty(data.topic_id)) {\n history.push(`/user-guide-details?topicId=${data.topic_id}&&sub-topic-name=${data?.subtopic_name}`)\n\n } else {\n history.push(\n `/user-guide-detail-search-content?unique=${data.id}&&category=${data.topic_id}`,\n );\n }\n };\n\n const handleFilterCategoryChange = data => {\n if (data.id === 'select') {\n filterChanges.filterCategory = '';\n filterChanges.filterSubCategory = '';\n setPageNumber(1);\n dispatch(getAllUserGuideRequest({ page: pageNumber, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\n } else {\n filterChanges.filterCategory = data;\n }\n setFilterChanges({ ...filterChanges });\n };\n\n const handleFilterSubCategoryChange = data => {\n if (data.id === 'select') {\n filterChanges.filterSubCategory = '';\n } else {\n filterChanges.filterSubCategory = data;\n }\n setFilterChanges({ ...filterChanges });\n };\n\n const handleFilterSubmit = () => {\n if (\n filterChanges &&\n (!_.isEmpty(filterChanges.filterCategory) || !_.isEmpty(filterChanges.filterSubCategory))\n ) {\n dispatch(\n getAllUserGuideRequest({\n fromBackOffice: true,\n data: {\n topic_id: filterChanges?.filterCategory?.id,\n subtopic_id: filterChanges?.filterSubCategory?.id,\n status: '',\n is_delete: 'False',\n is_backoffice: \"True\"\n },\n }),\n );\n setUserGuideList([]);\n setPageNumber(1);\n } else {\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\n }\n };\n\n useEffect(() => {\n if (UserGuide?.addUserGuideData?.data?.data?.result) {\n showSuccess(UserGuide?.addUserGuideData?.data?.data?.result);\n }\n }, [UserGuide.addUserGuideData]);\n\n useEffect(() => {\n if (UserGuide?.updateUserGuideData?.data?.data?.result) {\n showSuccess(UserGuide?.updateUserGuideData?.data?.data?.result);\n }\n }, [UserGuide.updateUserGuideData]);\n\n return (\n <>\n {isPublishModal && (\n <>\n \n
\n \n \n );\n};\n\nexport default ManageUserGuide;\n","import React, { useState, useEffect } from 'react';\nimport { t } from 'react-multi-lang';\nimport { useHistory } from 'react-router-dom';\nimport { Row, Col, Collapse } from 'reactstrap';\nimport '../../assets/CSS/bulletin.css';\nimport '../../assets/CSS/StaticSidebar.css';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { AiOutlineCaretUp, AiOutlineCaretDown } from 'react-icons/ai';\nimport '../../assets/CSS/static-page.css';\nimport RightArrow from '../../assets/Images/back-button.svg';\nimport '../../assets/CSS/UserGuideSearchContent.css';\nimport {\n getAllTopicsRequest,\n getAllTopicSuccess,\n getAllUserGuideRequest,\n getAllUserGuideSuccess,\n searchByCriteriaUserGuideRequest,\n} from '../../redux/actions';\nimport Loader from '../../Components/common/loader';\nimport _ from 'lodash';\nimport Footer from '../landing-page/footer';\n\nconst UserGuideDetailPage = () => {\n const dispatch = useDispatch();\n let history = useHistory();\n const [getAllTopicDataList, setGetAllTopicDataList] = useState([]);\n const [TopicHeading, setTopicHeading] = useState('');\n const [subTopicHeading, setSubTopicHeading] = useState([]);\n const [initialSubtopicHeading, setInitialSubtopicHeading] = useState([]);\n const [isOpen, setIsOpen] = useState(false);\n const [allData, setAllData] = useState([]);\n const [activeSubTopic, setActiveSubTopic] = useState(0);\n const [filteredData, setFilteredData] = useState([]);\n const [wordEntered, setWordEntered] = useState('');\n const [sideBarSearch, setSideBarSearch] = useState(false);\n const [searchEnteredSubTopics, setSearchEnteredSubTopics] = useState([]);\n const [noResults, setNoResults] = useState(false);\n const [searchContentWordEntered, setSearchContentWordEntered] = useState('');\n const [pageNumber, setPageNumber] = useState(1);\n const [secondpageNumber, setSecondPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [topicId, setTopicId] = useState();\n // const [sectionId, setSectionId] = useState();\n\n const {\n getAllTopicData,\n isGetAllUserGuideRequesting,\n getAllUserGuideData,\n searchByCriteriaUserGuideData,\n } = useSelector(state => ({\n getAllTopicData: state.UserGuide.getAllTopicData,\n getAllUserGuideData: state.UserGuide.getAllUserGuideData,\n isGetAllUserGuideRequesting: state.UserGuide.isGetAllUserGuideRequesting,\n searchByCriteriaUserGuideData: state.UserGuide.searchByCriteriaUserGuideData,\n }));\n\n useEffect(() => {\n setSubTopicHeading([]);\n let search = window.location.search;\n let URLParams = new URLSearchParams(search);\n let topicId = URLParams.get('topicId');\n setTopicId(topicId);\n if (topicId){\n dispatch(getAllTopicsRequest({ topic_id: topicId }));\n dispatch(\n getAllUserGuideRequest({\n page: pageNumber,\n fromBackOffice: false,\n data: { topic_id: topicId, status: 'True', is_delete: 'False', is_backoffice: \"False\" },\n }),\n );\n }\n window.scrollTo({ top: 0, behavior: 'instant' });\n return () => {\n setAllData([]);\n setNoResults(false);\n setSubTopicHeading([]);\n setGetAllTopicDataList([]);\n dispatch(searchByCriteriaUserGuideRequest({}));\n dispatch(getAllTopicSuccess({}));\n dispatch(getAllUserGuideSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (getAllTopicData?.data) {\n const { data } = getAllTopicData.data;\n if (!_.isEmpty(data) && !_.isEmpty(data.result)) {\n setGetAllTopicDataList(data.result);\n setNoResults(false);\n }\n }\n }, [getAllTopicData]);\n\n useEffect(() => {\n if (getAllTopicDataList?.length) {\n setTopicHeading(getAllTopicDataList[0]?.name);\n let { sub_topic } = getAllTopicDataList[0];\n setInitialSubtopicHeading(sub_topic);\n if (!sub_topic?.length) {\n setIsOpen(false);\n } else {\n setIsOpen(true);\n }\n }\n }, [getAllTopicDataList]);\n \n useEffect(() => {\n if (getAllUserGuideData?.data && !getAllUserGuideData?.fromBackOffice) {\n let new_list = [];\n const { result } = getAllUserGuideData?.data;\n if (result) {\n if (allData) {\n if (secondpageNumber > 1) {\n new_list = allData.concat(result.results);\n } else {\n new_list = result.results;\n }\n } else {\n new_list = result.results;\n }\n setAllData(new_list);\n setPageCount(result?.count);\n } else {\n setAllData([]);\n }\n }\n }, [getAllUserGuideData]);\n\n useEffect(() => {\n let hasMore = pageNumber * 10 < pageCount ? true : false;\n if (hasMore) {\n setSecondPageNumber(pageNumber + 1);\n recursion(pageNumber, pageCount);\n }\n }, [pageCount]);\n\n useEffect(() => {\n let a = [];\n if (allData && allData.length && initialSubtopicHeading.length) {\n for (const element of allData) {\n let allDataElement = element?.title;\n for (let j = 0; j < initialSubtopicHeading.length; j++) {\n if (initialSubtopicHeading[j]?.name?.trim() == allDataElement?.trim()) {\n a.push(initialSubtopicHeading[j]);\n break;\n }\n }\n }\n setSubTopicHeading(a);\n }\n }, [allData, initialSubtopicHeading]);\n\nuseEffect(()=>{\n let search = window.location.search; \n let URLParams = new URLSearchParams(search);\n let searchSubTopicName = URLParams.get('sub-topic-name');\n let index;\n if (subTopicHeading.length >= pageCount-2 && subTopicHeading.length <= pageCount && searchSubTopicName){\n subTopicHeading.map((item,idx)=>{\n if (item.name === searchSubTopicName){\n index = idx\n }\n })\n if(index && searchSubTopicName){\n toggle(index,searchSubTopicName)\n }\n} \n},[subTopicHeading?.length,allData?.length])\n\n const recursion = (pageNumber, pageCount) => {\n let pagenum = pageNumber;\n let hasMore = pagenum * 10 < pageCount ? true : false;\n if (hasMore && topicId) {\n dispatch(\n getAllUserGuideRequest({\n page: pagenum + 1,\n fromBackOffice: false,\n data: { topic_id: topicId, status: 'True', is_delete: 'False',is_backoffice: \"False\" },\n }),\n );\n recursion(pagenum + 1, pageCount);\n }\n };\n\n const handleFilter = e => {\n const searchWord = e.target.value;\n if (searchWord?.length === 0) {\n setNoResults(false);\n setFilteredData([]);\n setSearchEnteredSubTopics([]);\n }\n setWordEntered(searchWord);\n };\n const clearSearch = a => {\n setNoResults(false);\n setSideBarSearch(false);\n setSearchEnteredSubTopics([]);\n setFilteredData([]);\n setWordEntered('');\n };\n const handleSearchContent = e => {\n const searchContent = e.target.value;\n setSearchContentWordEntered(searchContent);\n };\n\n useEffect(() => {\n if (wordEntered?.length !== 0) {\n let search = window.location.search;\n let URLParams = new URLSearchParams(search);\n let topic_name = URLParams.get('topic_name');\n dispatch(searchByCriteriaUserGuideRequest({ topic_name: topic_name, name: wordEntered }));\n }\n }, [wordEntered]);\n\n useEffect(() => {\n let serachedSubTopicList = [];\n if (searchByCriteriaUserGuideData?.data) {\n const { data } = searchByCriteriaUserGuideData.data;\n if (!_.isEmpty(data) && !_.isEmpty(data.result)) {\n data.result.map(item => {\n serachedSubTopicList.push(item);\n });\n setNoResults(false);\n setSearchEnteredSubTopics(serachedSubTopicList);\n } else {\n setNoResults(true);\n setSearchEnteredSubTopics([]);\n }\n }\n }, [searchByCriteriaUserGuideData]);\n\n const toggle = (tab, id) => {\n setActiveSubTopic(tab);\n scrollToElement(id);\n };\n\n const scrollToElement = id => {\n \n const element = document.getElementById(\n id\n .toLowerCase()\n .trim()\n .split(' ')\n .join('_'),\n );\n\n if (!_.isEmpty(element)) \n {\n element?.scrollIntoView({block: \"start\"});\n }else{ \n window.scroll(0, 0);\n }\n\n };\n\n const handleManageCropsBackButton = () => {\n // history.push('/user-guide');\n if (window.history.length == 1) {\n window.close();\n } else {\n history.goBack();\n }\n };\n\n const handleKeyPress = event => {\n if (event.key === 'Enter' && event.target.value?.length !== 0) {\n history.push({\n pathname: '/user-guide-search',\n search: `?q=${searchContentWordEntered}`,\n });\n }\n };\n const handleClick = () => {\n if (searchContentWordEntered?.length !== 0) {\n history.push({\n pathname: '/user-guide-search',\n search: `?q=${searchContentWordEntered}`,\n });\n }\n };\n\n return (\n <>\n \n \n {!isHideBar && (\n \n \n \n
\n
\n
\n \n \n \n \n {t('FILTER.HIDE_BAR')}\n \n setHideBar(!isHideBar)}\n size={25}\n />\n \n \n \n {!isHideBar ? (\n
\n \n )}\n \n
\n \n ) : (\n ''\n )}\n \n \n {t('FILTER.EXPAND_BAR')}\n \n setHideBar(!isHideBar)}\n size={25}\n />\n \n \n
\n )}\n \n \n history.goBack()}\n />\n \n \n
\n\n {t('USER_GUIDE.MANAGE_USER_GUIDE')}
\n \n\n history.push('/manage-user-guide-form/add')}\n className=\"manage-news-feed-cursor-pointer\"\n >\n
\n \n {t('USER_GUIDE.ADD_USER_GUIDE')}\n
\n \n\n \n \n \n );\n })}\n \n
\n \n \n {UserGuide.isGetAllUserGuideRequesting &&
\n {_.isEmpty(userGuideList) && !UserGuide.isGetAllUserGuideRequesting && (\n \n {t('USER_GUIDE.NO_RECORDS_FOUND')}\n
\n )}\n{t('USER_GUIDE.LOADING')}
\n \n )\n }\n >\n {userGuideList.map((i,index) => {\n return (\n\n \n {t('NEWS_FEED.EDIT')}\n \n \n {t('NEWS_FEED.DELETE')}\n \n \n {t('NEWS_FEED.CLICK_PUBLISH')}\n \n \n {t('NEWS_FEED.CLICK_UNPUBLISH')}\n \n
\n \n {i?.title}\n
\n {i?.content?.length > 100 ? (\n \n ) : (\n\n \n {/* ...\n handleReadMore(i)}>\n {t('USER_GUIDE.READ_MORE')}\n */}\n
\n )}\n \n {t('USER_GUIDE.CATEGORY')}: {i?.topic_name}\n
\n {\n\n {t('USER_GUIDE.SUB_CATEGORY')}:{' '}\n {i?.subtopic_name\n ? i?.subtopic_name\n : t('USER_GUIDE.NOT_AVAILABLE')}\n
\n }\n {!_.isEmpty(i?.updated_date) && (\n\n {t('USER_GUIDE.UPDATED_DATE')}:{' '}\n {moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\n
\n )}\n\n\n {i?.status === true ? (\n <>\n handlePublishModal(i)}\n >\n \n ) : (\n <>\n handlePublishModal(i)}\n >\n \n )}\n {\n if (!_.isEmpty(i.topic_id) && !_.isEmpty(i.subtopic_id)) {\n history.push(\n `/manage-user-guide-form/edit?unique=${i.id}&&category=${i.topic_id}&&sub-category=${i.subtopic_id}`,\n );\n } else {\n history.push(\n `/manage-user-guide-form/edit?unique=${i.id}&&category=${i.topic_id}`,\n );\n }\n }}\n id=\"edit-news\"\n data-tip\n data-for=\"edit_news\"\n >\n handleDeleteModal(i)}\n id=\"delete-news\"\n data-tip\n data-for=\"delete_news\"\n >\n
\n \n {isGetAllUserGuideRequesting &&
\n \n \n
\n\n \n {\n setIsOpen(!isOpen);\n }}\n >\n \n {' '}\n \n ) : (\n \n {subTopicHeading?.length && searchEnteredSubTopics?.length === 0\n ? subTopicHeading.map((i, index) => {\n return (\n \n );\n })\n : ''}\n {subTopicHeading?.length && searchEnteredSubTopics?.length !== 0\n ? searchEnteredSubTopics.map((i, id) => {\n return (\n \n )}\n
\n \n setSideBarSearch(true)}\n />\n\n {wordEntered?.length ? (\n clearSearch()}\n >\n ) : (\n \n )}\n
\n\n \n {TopicHeading ? (\n \n {!isOpen ? (\n
\n \n\n {noResults ? (\n \n {t('USER_GUIDE.NO_RESULTS_FOUND')}\n
\n- \n
\n \n handleManageCropsBackButton()}\n />\n \n \n \n \n \n
\n
\n {allData\n ? allData.map((i, id) => {\n return (\n
\n );\n })\n : ''}\n \n
\n \n \n \n
\n {getAllTopicDataList[0]?.name}
\n \n {getAllTopicDataList[0]?.description}\n
\n\n {allData\n ? allData.map((i, id) => {\n return (\n
\n \n
\n \n {i.title}
\n\n \n
\n \n );\n};\n\nexport default UserGuideDetailPage;\n","import React, { useState, useEffect } from 'react';\nimport { t } from 'react-multi-lang';\nimport { useHistory } from 'react-router-dom';\nimport '../../assets/CSS/Common.css';\nimport '../../assets/CSS/UserGuideSearchContent.css';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { searchContentUserGuideRequest } from '../../redux/actions';\nimport _ from 'lodash';\nimport Loader from '../../Components/common/loader';\nimport RightArrow from '../../assets/Images/back-button.svg';\nimport { Row, Col, Card } from 'reactstrap';\nimport { htmlToText } from '../../Components/common/utils';\nimport '../../assets/CSS/StaticSidebar.css';\nimport Footer from '../landing-page/footer';\n\nfunction UserSearchContentPage() {\n const [searchContent, setSearchContent] = useState([]);\n const dispatch = useDispatch();\n let history = useHistory();\n const {\n searchContentUserGuideData,\n isGetAllUserGuideRequesting,\n isSearchContentUserGuideRequesting,\n } = useSelector(state => ({\n searchContentUserGuideData: state.UserGuide.searchContentUserGuideData,\n isSearchContentUserGuideRequesting: state.UserGuide.isSearchContentUserGuideRequesting,\n isGetAllUserGuideRequesting: state.UserGuide.isGetAllUserGuideRequesting,\n }));\n let search = window.location.search;\n let URLParams = new URLSearchParams(search);\n let searchWord = URLParams.get('q');\n useEffect(() => {\n if (searchWord?.length !== 0) {\n dispatch(searchContentUserGuideRequest({ content: searchWord }));\n }\n }, []);\n useEffect(() => {\n let serchedResults = [];\n setSearchContent([]);\n if (searchContentUserGuideData?.data) {\n const { data } = searchContentUserGuideData?.data;\n if (!_.isEmpty(data) && !_.isEmpty(data?.result)) {\n data.result.map(item => {\n serchedResults.push(item);\n });\n setSearchContent(serchedResults);\n }\n }\n }, [searchContentUserGuideData]);\n const handleSubTopicListItem = ( topic_id, subtopic_name, topic_name) => {\n history.push(`/user-guide-details?topicId=${topic_id}&&sub-topic-name=${subtopic_name}&topic_name=${topic_name}`)\n};\n const handleManageCropsBackButton = () => {\n history.goBack();\n };\n\n return (\n <>\n \n {isGetAllUserGuideRequesting &&
\n \n );\n}\n\nexport default UserSearchContentPage;\n","import React, { useEffect } from 'react';\nimport { useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { getAllUserGuideRequest } from '../../redux/actions';\nimport CreateUserGuidePage from './CreateUserGuidePage';\nimport _ from 'lodash';\nconst ManageForm = props => {\n const dispatch = useDispatch();\n const { UserGuide } = useSelector(state => ({\n UserGuide: state.UserGuide,\n }));\n const place=[\n {id:1,label: \"Before\" ,value:\"before\"},\n {id:2,label: \"After\" ,value:\"after\"},\n ]\n const [defaultUserGuideOptions, setDefaultUserGuideOptions] = useState({});\n const [categoryList, setCategoryList] = useState([]);\n const [fromListing, setFromListing] = useState(false);\n const [fromManageUser, setFromManageUser] = useState(false);\n const [subTopicOptions, setSubTopicOptions] = useState();\n\n\n const [formUserGuideData, setFormUserGuideData] = useState({\n id: '',\n topic: '',\n topic_id: '',\n sub_topic: '',\n sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n before_sub_topic_order:'',\n level:'',\n });\n\n useEffect(() => {\n let search = window.location.search;\n let URLParams = new URLSearchParams(search);\n let topicId = URLParams.get('category');\n let Id = URLParams.get('unique');\n let subTopicId = URLParams.get('sub-category');\n\n if (!_.isEmpty(topicId) && !_.isEmpty(subTopicId)) {\n dispatch(\n getAllUserGuideRequest({\n data: { id: Id, topic_id: topicId, subtopic_id: subTopicId, is_delete: 'False',is_backoffice: \"True\" },\n }),\n );\n } else {\n dispatch(getAllUserGuideRequest({ data: { id: Id, topic_id: topicId, is_delete: 'False',is_backoffice: \"True\" } }));\n }\n setFromManageUser(true);\n setDefaultUserGuideOptions({});\n return () => {\n setFromManageUser(false);\n };\n }, []);\n\n useEffect(() => {\n if (UserGuide?.getAllTopicData) {\n if (UserGuide?.getAllTopicData?.data) {\n const {\n data: { result },\n } = UserGuide?.getAllTopicData?.data;\n setCategoryList(result);\n }\n }\n }, [UserGuide.getAllTopicData]);\n\n\n useEffect(() => {\n if (UserGuide.getAllUserGuideData?.data?.result?.results) {\n let new_list = [];\n const {\n data: { result },\n } = UserGuide.getAllUserGuideData;\n if (result) {\n const { results } = result;\n if (results?.length) {\n const action = props.match.params?.action;\n if (action === 'edit' && fromManageUser) {\n afterUpdate(results[0]);\n setFromListing(true);\n } else {\n setDefaultUserGuideOptions({});\n setFromListing(false);\n setFormUserGuideData({\n id: '',\n topic: '',\n topic_id: '',\n sub_topic: '',\n sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n before_sub_topic_order:'',\n level:'',\n });\n }\n }\n }\n }\n }, [UserGuide.getAllUserGuideData]);\n\n useEffect(() => {\n if (UserGuide.updateUserGuideData) {\n setFormUserGuideData({\n id: '',\n topic: '',\n topic_id: '',\n sub_topic: '',\n sub_topic_id: '',\n title: '',\n description: '',\n publish_status: false,\n });\n\n dispatch(getAllUserGuideRequest({ page: 1, data: { is_delete: 'False' ,is_backoffice: \"True\"} }));\n }\n }, [UserGuide.updateUserGuideData]);\n\n /**\n * added by : sai krishna thalla\n * reason : add default order and levels while updating the user guide\n * date: 8-sep-2022\n */\n useEffect(()=>{\n if (!_.isEmpty(categoryList) && formUserGuideData?.topic){\n renderAPISubTopicOptions(categoryList,formUserGuideData?.topic)\n }\n },[categoryList,formUserGuideData?.topic])\n\n\n useEffect(()=>{\n if (subTopicOptions?.length && subTopicOptions && defaultUserGuideOptions.order_subtopic_id){\n let orderOption = subTopicOptions.find(i => i.id == defaultUserGuideOptions?.order_subtopic_id)\n let obj = _.clone(defaultUserGuideOptions)\n obj.Beforesubtopic = orderOption\n setDefaultUserGuideOptions(obj)\n }\n },[subTopicOptions,defaultUserGuideOptions.order_subtopic_id])\n\n const renderAPISubTopicOptions = (list, option) => {\n if (list) {\n let params = [...list];\n let options = [];\n let requiredTopic = params.filter(param => param.name === option);\n if (requiredTopic?.length) {\n let requiredSubTopic = requiredTopic[0].sub_topic;\n\n if (requiredSubTopic?.length) {\n requiredSubTopic.forEach(element => {\n let data = {\n value: element.name,\n label: `${element.name}`,\n id: element.id,\n order:element.order,\n };\n options.push(data);\n });\n setSubTopicOptions(options);\n } else {\n setSubTopicOptions([]);\n }\n }\n }\n };\n\n const afterUpdate = data => {\n let arr = {\n topic: {\n id: data?.topic_id,\n value: data?.topic_name,\n label: data?.topic_name,\n },\n subtopic: data?.subtopic_name,\n title: data?.title,\n status: data?.status,\n order:data?.order,\n level:data?.level,\n order_subtopic_id:data?.order_subtopic_id\n };\n formUserGuideData.topic = data?.topic_name;\n formUserGuideData.topic_id = data?.topic_id;\n formUserGuideData.sub_topic = data?.subtopic_name;\n formUserGuideData.sub_topic_id = data?.subtopic_id;\n formUserGuideData.description = data?.content;\n formUserGuideData.publish_status = data?.status;\n formUserGuideData.title = data?.title;\n formUserGuideData.id = data?.id;\n formUserGuideData.level= data?.level;\n formUserGuideData.before_sub_topic_order = data?.order;\n formUserGuideData.before_sub_topic_id = data?.order_subtopic_id\n setDefaultUserGuideOptions(arr);\n setFormUserGuideData({ ...formUserGuideData });\n };\n\n const handleFromManageUserGuide = data => {\n setFromManageUser(false);\n };\n return (\n <>\n \n handleManageCropsBackButton()}\n />\n \n {t('USER_GUIDE.SEARCHED_RESULTS')} \"{{searchWord.toUpperCase()}}\"\n \n
\n\n \n {isSearchContentUserGuideRequesting && (\n \n \n )}\n \n {searchContent?.map(item => {\n return (\n
\n
\n \n
\n )}\n {!isSearchContentUserGuideRequesting &&\n _.isEmpty(searchContent) &&\n searchContentUserGuideData && (\n {t('USER_GUIDE.NO_RESULTS')}
\n\n \n handleSubTopicListItem( item.topic_id,item.subtopic_name ,item.topic_name)\n }\n >\n
\n \n );\n })}\n \n
\n \n \n {item?.subtopic_name?.length > 21\n ? item?.subtopic_name?.substring(0, 22) + '...'\n : item?.subtopic_name}\n
\n {htmlToText(item.content)?.length > 170 ? (\n\n
\n ) : (\n \n {htmlToText(item.content).substring(0, 170) + '...'}\n
\n \n \n
\n \n {isGetAllUserGuideRequesting &&
\n \n \n \n \n
\n \n {\n setIsOpen(!isOpen);\n }}\n >\n
\n \n \n {!isOpen ? (\n
\n \n \n handleManageCropsBackButton()}\n />\n \n
\n { searchContent.length == 0 && !isGetAllUserGuideRequesting ?
\n );\n })\n : ''}\n \n \n \n {t('USER_GUIDE.NO_RESULTS_FOUND')}\n
: ''}\n {searchContent\n ? searchContent.map((i) => {\n return (\n\n
\n {i.title}
\n\n \n
\n \n );\n};\n\nexport default UserSearchDetailPage;\n\n\n","import React, { useEffect, useRef, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport _ from 'lodash';\nimport {\n Modal,\n ModalHeader,\n ModalBody,\n ModalFooter,\n} from 'reactstrap';\nimport Button from 'reactstrap-button-loader';\nimport { BULLETIN_CODES } from '../../Components/constants';\nimport RightArrow from '../../assets/Images/back-button.svg';\nimport EmailEditor from 'react-email-editor';\nimport { showSuccess, showError } from '../../Components/Notifications';\nimport { isSuperAdmin } from '../../Components/common/utils';\nimport {\n approveRejectBulletinRequest,\n previewBulletinRequest,\n previewBulletinSuccess,\n} from '../../redux/bulletin/bulletinActions';\nimport { useLocation, useHistory } from 'react-router-dom';\nimport { useDispatch, useSelector } from 'react-redux';\n\nconst ApproveEditor = props => {\n let form = new FormData();\n const emailEditorRef = useRef(null);\n const location = useLocation();\n const dispatch = useDispatch();\n const history = useHistory();\n\n\n const [isButtonDisabled, setIsButtonDisabled] = useState(true);\n const [rejectionText, setRejectionText] = useState('');\n const [openModal, setOpenModal] = useState(false);\n const [Buttonclicked, setButtonclicked] = useState(false);\n const [hideApproveButton, setHideApproveButton] = useState(true);\n const [hideRejectButton, setHideRejectButton] = useState(true);\n const [textAreaCount, ChangeTextAreaCount] = useState(0);\n const [approveButtonLoader, setApproveButtonLoader] = useState(false);\n const [isSuperUser, setSuperUser] = useState(isSuperAdmin());\n const [userPermisions, setUserPermisions] = useState([]);\n\n const { Bulletin, isApproveRejectRequesting } = useSelector(state => ({\n isApproveRejectRequesting: state.Bulletin.isApproveRejectRequesting,\n Bulletin: state.Bulletin,\n }));\n\n const nextProps = useSelector(state => ({\n userDetailData: state.userList.userDetailData || null,\n userPermissionsData: state.userList.userPermissionsData || null,\n }));\n\n useEffect(() => {\n return () => {\n dispatch(previewBulletinSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n if (Bulletin?.approveRejectData && Buttonclicked) {\n showSuccess(Bulletin?.approveRejectData?.data?.data?.result);\n history.goBack();\n }\n }, [Bulletin.approveRejectData]);\n\n useEffect(() => {\n if (Bulletin?.approveRejectDataError?.data?.response?.data?.message && Buttonclicked) {\n showError(Bulletin?.approveRejectDataError?.data?.response?.data?.message);\n history.goBack();\n }\n }, [Bulletin.approveRejectDataError]);\n\n useEffect(() => {\n if (nextProps.userPermissionsData) {\n const {\n data: { result },\n } = nextProps.userPermissionsData;\n const {\n data: {\n result: { user_permissions },\n },\n } = nextProps.userDetailData;\n let a = [];\n if (user_permissions) {\n BULLETIN_CODES.map(i => {\n user_permissions?.map(j => {\n if (i === j.codename) {\n a.push(i);\n }\n });\n });\n }\n setUserPermisions(a);\n }\n }, [nextProps.userPermissionsData]);\n\n useEffect(() => {\n switch (location.state[1]) {\n case 'Pending':\n setHideApproveButton(true);\n setHideRejectButton(true);\n break;\n\n case 'Approved':\n setHideApproveButton(true);\n setHideRejectButton(false);\n break;\n\n case 'Rejected':\n setHideApproveButton(false);\n setHideRejectButton(true);\n break;\n }\n });\n\n useEffect(() => {\n if (Bulletin?.getPreviewBulletinData?.data?.data?.result) {\n window.open(Bulletin?.getPreviewBulletinData?.data?.data?.result);\n }\n }, [Bulletin.getPreviewBulletinData]);\n\n //EXECUTES AFTER LOADING THE EDITOR\n const onReady = () => {\n if (!_.isEmpty(location?.state[0]?.json_content)) {\n let jsonObject = JSON.parse(location.state[0].json_content);\n if (!_.isEmpty(emailEditorRef?.current) && !_.isEmpty(emailEditorRef?.current?.editor)) {\n emailEditorRef.current.editor?.loadDesign(jsonObject);\n }\n }\n setIsButtonDisabled(false);\n };\n\n const handleApprove = data => {\n setApproveButtonLoader(true);\n form.append('id', location?.state[0]?.id);\n form.append('bulletin_status', '1');\n dispatch(approveRejectBulletinRequest(form));\n setButtonclicked(true);\n };\n\n const handleModalSubmitReject = data => {\n form.append('id', location?.state[0]?.id);\n form.append('reject_response', rejectionText);\n form.append('bulletin_status', '2');\n dispatch(approveRejectBulletinRequest(form));\n setButtonclicked(true);\n };\n\n const handleReject = data => {\n setOpenModal(true);\n };\n\n const handleRejectionText = e => {\n setRejectionText(e?.target?.value);\n ChangeTextAreaCount(e?.target?.value?.length);\n };\n\n const handleModal = () => {\n setOpenModal(!openModal);\n };\n\n const handlePreview = () => {\n dispatch(previewBulletinRequest(location?.state[0]?.id));\n };\n\n return (\n \n \n history.goBack()}\n />\n \n \n \n {t('BULLET_IN.REJECTION_REASON')}\n \n \n {\n handleRejectionText(e);\n }}\n />\n \n \n {\n handleModalSubmitReject();\n }}\n loading={isApproveRejectRequesting}\n >\n {t('BULLET_IN.SUBMIT')}\n \n \n \n
\n );\n};\n\nexport default ApproveEditor;\n","var _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgAddIcon(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 12.998H13V18.998H11V12.998H5V10.998H11V4.99805H13V10.998H19V12.998Z\",\n fill: \"white\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgAddIcon);\nexport default __webpack_public_path__ + \"static/media/add-icon.3636a775.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\nimport { Modal, ModalBody } from 'reactstrap';\nimport { FaRegTrashAlt } from 'react-icons/fa';\nimport { GrFormClose } from 'react-icons/gr';\nimport { t } from 'react-multi-lang';\n\nconst DeleteModal = ({ isOpen, toggle, message , onHandleDelete}) => {\n return (\n \n {\n // \n \n {t('BULLET_IN.PREVIEW')}\n \n // \n }\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[3])) && hideApproveButton && (\n \n {t('BULLET_IN.REJECT')}\n \n )}\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[3])) && hideRejectButton && (\n \n {t('BULLET_IN.APPROVE')}\n \n )}\n
\n \n
\n {textAreaCount}/500
\n\n toggle()}\n centered\n size=\"md\"\n >\n \n \n \n
\n );\n};\n\nexport default DeleteModal;\n","var _path;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgEditIcon(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7.81791 17.3707H4V13.5528L14.2894 3.26345C14.4581 3.09476 14.6869 3 14.9255 3C15.1641 3 15.393 3.09476 15.5617 3.26345L18.1073 5.80813C18.191 5.8917 18.2573 5.99094 18.3026 6.10017C18.3479 6.20941 18.3712 6.3265 18.3712 6.44475C18.3712 6.563 18.3479 6.68009 18.3026 6.78932C18.2573 6.89856 18.191 6.9978 18.1073 7.08137L7.81791 17.3707ZM4 19.1704H20.1967V20.97H4V19.1704Z\",\n fill: \"white\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgEditIcon);\nexport default __webpack_public_path__ + \"static/media/edit-icon.5de117ee.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\nconst _excluded = [\"title\", \"titleId\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nimport * as React from \"react\";\nfunction SvgUploadImage(_ref, svgRef) {\n let {\n title,\n titleId\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 19,\n viewBox: \"0 0 22 19\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.7089 9.29001C11.5219 9.10678 11.2706 9.00415 11.0089 9.00415C10.7471 9.00415 10.4958 9.10678 10.3089 9.29001L7.30886 12.19C7.20275 12.2776 7.11584 12.3861 7.05358 12.5088C6.99132 12.6314 6.95504 12.7656 6.94702 12.903C6.93899 13.0403 6.95938 13.1778 7.00693 13.3069C7.05447 13.436 7.12814 13.5539 7.22332 13.6532C7.31851 13.7526 7.43317 13.8312 7.56012 13.8842C7.68708 13.9371 7.8236 13.9634 7.96115 13.9612C8.09871 13.959 8.23433 13.9285 8.35954 13.8715C8.48476 13.8145 8.59686 13.7323 8.68886 13.63L9.99886 12.36V18C9.99886 18.2652 10.1042 18.5196 10.2917 18.7071C10.4793 18.8947 10.7336 19 10.9989 19C11.2641 19 11.5184 18.8947 11.706 18.7071C11.8935 18.5196 11.9989 18.2652 11.9989 18V12.41L13.2889 13.71C13.3818 13.8037 13.4924 13.8781 13.6143 13.9289C13.7361 13.9797 13.8668 14.0058 13.9989 14.0058C14.1309 14.0058 14.2616 13.9797 14.3834 13.9289C14.5053 13.8781 14.6159 13.8037 14.7089 13.71C14.8026 13.617 14.877 13.5064 14.9277 13.3846C14.9785 13.2627 15.0047 13.132 15.0047 13C15.0047 12.868 14.9785 12.7373 14.9277 12.6154C14.877 12.4936 14.8026 12.383 14.7089 12.29L11.7089 9.29001Z\",\n fill: \"#2A547C\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.6684 4.99998C16.2604 3.82103 15.495 2.7986 14.4788 2.07494C13.4625 1.35129 12.246 0.962402 10.9984 0.962402C9.75087 0.962402 8.53433 1.35129 7.5181 2.07494C6.50186 2.7986 5.73647 3.82103 5.32843 4.99998C4.42998 5.12032 3.58115 5.48263 2.87273 6.04817C2.16431 6.61371 1.62297 7.3612 1.3066 8.21067C0.990227 9.06014 0.91074 9.97964 1.07664 10.8708C1.24253 11.762 1.64758 12.5913 2.24843 13.27C2.32101 13.3978 2.42088 13.5081 2.54094 13.5929C2.66099 13.6778 2.79828 13.7351 2.94302 13.7608C3.08776 13.7866 3.23639 13.7801 3.37833 13.7418C3.52027 13.7035 3.65203 13.6345 3.76423 13.5395C3.87643 13.4445 3.9663 13.3259 4.02745 13.1922C4.08859 13.0585 4.11952 12.913 4.11801 12.766C4.1165 12.619 4.0826 12.4742 4.01872 12.3417C3.95484 12.2093 3.86255 12.0927 3.74843 12C3.36155 11.5674 3.10842 11.032 3.01972 10.4585C2.93102 9.88497 3.01056 9.29806 3.2487 8.76885C3.48685 8.23965 3.87337 7.79087 4.36142 7.47691C4.84948 7.16295 5.41812 6.99728 5.99843 6.99998H6.09843C6.33238 7.0047 6.56057 6.92723 6.74329 6.78105C6.92601 6.63488 7.05168 6.42926 7.09843 6.19998C7.28204 5.29575 7.77261 4.4828 8.48702 3.89888C9.20143 3.31496 10.0957 2.99597 11.0184 2.99597C11.9411 2.99597 12.8354 3.31496 13.5498 3.89888C14.2642 4.4828 14.7548 5.29575 14.9384 6.19998C14.9852 6.42926 15.1109 6.63488 15.2936 6.78105C15.4763 6.92723 15.7045 7.0047 15.9384 6.99998H15.9984C16.5787 6.99728 17.1474 7.16295 17.6354 7.47691C18.1235 7.79087 18.51 8.23965 18.7482 8.76885C18.9863 9.29806 19.0658 9.88497 18.9771 10.4585C18.8884 11.032 18.6353 11.5674 18.2484 12C18.1603 12.0988 18.0927 12.214 18.0495 12.3392C18.0063 12.4643 17.9884 12.5967 17.9968 12.7288C18.0052 12.8609 18.0397 12.99 18.0983 13.1086C18.157 13.2273 18.2386 13.3331 18.3384 13.42C18.5207 13.5808 18.7554 13.6696 18.9984 13.67C19.1404 13.6698 19.2807 13.6394 19.4101 13.5808C19.5394 13.5221 19.6547 13.4366 19.7484 13.33C20.366 12.6524 20.7853 11.8181 20.9607 10.9183C21.136 10.0185 21.0606 9.0878 20.7427 8.22795C20.4247 7.3681 19.8765 6.61221 19.158 6.04291C18.4394 5.47362 17.5782 5.11282 16.6684 4.99998Z\",\n fill: \"#2A547C\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgUploadImage);\nexport default __webpack_public_path__ + \"static/media/upload-image.5d936091.svg\";\nexport { ForwardRef as ReactComponent };","import moment from 'moment';\nimport React, { useEffect, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport {\n Col,\n Form,\n FormFeedback,\n FormGroup,\n Input,\n Label,\n Modal,\n ModalBody,\n ModalFooter,\n ModalHeader,\n Row,\n} from 'reactstrap';\n\nimport { ReactComponent as DeleteIcon } from '../../assets/Images/edit-icon.svg';\nimport { ReactComponent as UploadIcon } from '../../assets/Images/upload-image.svg';\nimport { DATE_FORMAT } from '../../Components/constants';\nimport { showError } from '../../Components/Notifications';\n// import { showError } from '../../Components/Notifications';\n\nconst NewEventsModal = ({ modal, setModal, formData, setFormData, isEditable, onHandleEvents }) => {\n const [isFormValid, setIsFormValid] = useState(false);\n const [errors, setErrors] = useState({});\n const [imagePreview, setImagePreview] = useState(null);\n const [initialData, setInitialData] = useState({});\n\n const toggleModal = () => {\n setModal(!modal);\n setFormData({\n name: '',\n location: '',\n from_date: moment(new Date()).format(DATE_FORMAT),\n to_date: moment(new Date())\n .add(6, 'days')\n .format(DATE_FORMAT),\n start_time: '09:00',\n end_time: '18:00',\n event_url: '',\n event_icon: null,\n });\n };\n\n const handleChange = e => {\n const { name, value, files } = e.target;\n\n let updatedFormData = {\n ...formData,\n };\n\n if (name === 'from_date') {\n updatedFormData.from_date = moment(value).format(DATE_FORMAT);\n updatedFormData.to_date = moment(value)\n .add(6, 'days')\n .format(DATE_FORMAT);\n setFormData(updatedFormData);\n validateField(name, updatedFormData);\n } else if (name === 'event_icon' && files[0]) {\n // const file = files[0];\n // updatedFormData[name] = files ? files[0] : null;\n // setImagePreview(URL.createObjectURL(file)); // Create a preview URL for the uploaded image\n\n // e.target.value = null;\n\n const file = files[0];\n\n const img = new Image();\n const objectUrl = URL.createObjectURL(file);\n\n img.onload = () => {\n // Define acceptable dimensions range and target size for the banner\n const minWidth = 180;\n const minHeight = 109;\n const maxWidth = 1024;\n const maxHeight = 436;\n\n if (\n img.width >= minWidth &&\n img.width <= maxWidth &&\n img.height >= minHeight &&\n img.height <= maxHeight\n ) {\n // If dimensions are within the acceptable range, update form data and image preview\n updatedFormData[name] = file;\n setImagePreview(objectUrl);\n setFormData(updatedFormData);\n validateField(name, updatedFormData);\n } else {\n showError(\n `Please upload an image with dimensions between ${minWidth}x${minHeight} and ${maxWidth}x${maxHeight} pixels.`,\n );\n }\n\n // Clean up the original object URL after the image is loaded\n URL.revokeObjectURL(objectUrl);\n };\n\n img.onerror = () => {\n // Handle image loading error\n showError('Invalid image file. Please try again.');\n };\n\n // Start loading the image by assigning src\n img.src = objectUrl;\n\n // Reset input so the same file can be re-uploaded if needed\n e.target.value = null;\n } else {\n updatedFormData[name] = files ? files[0] : value;\n setFormData(updatedFormData);\n validateField(name, updatedFormData);\n }\n };\n\n const validateField = (name, recentFormData) => {\n let errorMessages = {};\n\n const currentDate = moment().add(1, 'days');\n const startDateTime = moment(\n `${recentFormData.from_date} ${recentFormData.start_time}`,\n 'YYYY-MM-DD HH:mm',\n );\n const endDateTime = moment(\n `${recentFormData.to_date} ${recentFormData.end_time}`,\n 'YYYY-MM-DD HH:mm',\n );\n\n switch (name) {\n case 'from_date':\n case 'start_time':\n if (startDateTime.isBefore(currentDate) && !startDateTime.isSame(currentDate, 'day')) {\n errorMessages.from_date = t('LANDING_PAGE.CURRENT_DATE_ERROR');\n errorMessages.start_time = t('LANDING_PAGE.CURRENT_DATE_ERROR');\n } else if (startDateTime.isAfter(endDateTime)) {\n errorMessages.from_date = t('LANDING_PAGE.NEXT_DATE_ERROR');\n errorMessages.start_time = t('LANDING_PAGE.NEXT_TIME_ERROR');\n } else if (startDateTime.isSame(endDateTime)) {\n errorMessages.start_time = t('LANDING_PAGE.SAME_TIME_ERROR');\n errorMessages.end_time = t('LANDING_PAGE.END_TIME_ERROR');\n } else {\n errorMessages.from_date = '';\n errorMessages.start_time = '';\n errorMessages.to_date = '';\n errorMessages.end_time = '';\n }\n break;\n\n case 'to_date':\n case 'end_time':\n if (endDateTime.isBefore(startDateTime)) {\n errorMessages.to_date = t('LANDING_PAGE.END_DATE_ERROR');\n errorMessages.end_time = t('LANDING_PAGE.END_TIME_BEFORE_ERROR');\n } else if (endDateTime.isSame(startDateTime)) {\n errorMessages.end_time = t('LANDING_PAGE.END_TIME_ERROR');\n errorMessages.start_time = t('LANDING_PAGE.SAME_TIME_ERROR');\n } else {\n errorMessages.to_date = '';\n errorMessages.end_time = '';\n errorMessages.from_date = '';\n errorMessages.start_time = '';\n }\n break;\n\n case 'location':\n if (recentFormData.location.length > 120) {\n errorMessages.location = 'Limit exceeded: Maximum 120 characters.';\n } else {\n errorMessages.location = '';\n }\n break;\n\n default:\n break;\n }\n\n setErrors(prevErrors => ({\n ...prevErrors,\n ...errorMessages,\n }));\n };\n\n useEffect(() => {\n if (isEditable) {\n setInitialData(formData); // Store the original data when editing\n }\n }, []);\n\n useEffect(() => {\n // Check if all required fields are filled\n const isValid =\n formData.name &&\n formData.location &&\n formData.start_time &&\n formData.end_time &&\n formData.from_date &&\n formData.to_date &&\n formData.event_url &&\n formData.event_icon &&\n !Object.values(errors).some(error => error);\n setIsFormValid(isValid);\n }, [formData, errors]);\n\n const handleImageRemove = () => {\n setFormData({\n ...formData,\n event_icon: null,\n });\n setImagePreview(null); // Remove the image preview\n };\n\n const getChangedFields = () => {\n const changedFields = {};\n Object.keys(formData).forEach(key => {\n if (formData[key] !== initialData[key]) {\n changedFields[key] = formData[key];\n }\n });\n\n return changedFields;\n };\n\n const handleSubmit = e => {\n e.preventDefault();\n const dataToSubmit = isEditable ? getChangedFields() : formData;\n onHandleEvents(dataToSubmit);\n toggleModal();\n setInitialData({});\n };\n\n return (\n <>\n \n toggle()} />\n
\n \n
\n {t('BULLET_IN.ARE_YOU_SURE')}
\n{message}
\n \n \n \n
\n \n \n \n \n
\n \n );\n};\n\nexport default NewEventsModal;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Button,\n Card,\n CardBody,\n CardImg,\n CardText,\n CardTitle,\n Col,\n Container,\n Dropdown,\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n Row,\n} from 'reactstrap';\n\nimport moment from 'moment';\nimport { ReactComponent as AddIcon } from '../../assets/Images/add-icon.svg';\nimport dateIcon from '../../assets/Images/date-icon.svg';\nimport locationIcon from '../../assets/Images/location-icon.svg';\nimport NoResultIcon from '../../assets/Images/no-results-icon.svg';\nimport timeIcon from '../../assets/Images/timeline-icon.svg';\nimport Loader from '../../Components/common/TextLoader';\nimport { isSuperAdmin } from '../../Components/common/utils';\nimport { DATE_FORMAT } from '../../Components/constants';\nimport { EventDateFormatter, EventTimeFormatter } from '../../Components/helpers';\nimport { showError, showSuccess } from '../../Components/Notifications';\nimport {\n addLandingPageRequest,\n addLandingPageSuccess,\n deleteLandingPageRequest,\n deleteLandingPageSuccess,\n editLandingPageRequest,\n editLandingPageSuccess,\n getDmsEventsRequest,\n getDmsEventsSuccess,\n} from '../../redux/home/homeActions';\nimport DeleteModal from './DeleteModal';\nimport NewEventsModal from './NewEventsModal';\n\nfunction ManageEvents({ title, userPermisions }) {\n const dispatch = useDispatch();\n const [isLoading, setIsLoading] = useState(false);\n const [upcomingEventsData, setUpcomingEventsData] = useState([]);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [activeDropdownId, setActiveDropdownId] = useState(null);\n const [isEdit, setIsEdit] = useState(false);\n const [formData, setFormData] = useState({\n name: '',\n location: '',\n from_date: moment(new Date())\n .add(1, 'days')\n .format(DATE_FORMAT),\n to_date: moment(new Date())\n .add(6, 'days')\n .format(DATE_FORMAT),\n start_time: '09:00',\n end_time: '18:00',\n event_url: '',\n event_icon: null,\n });\n const [selectedEvent, setSelectedEvents] = useState('');\n const [deleteModal, setDeleteModal] = useState(false);\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n useEffect(() => {\n dispatch(getDmsEventsRequest({ event_type: 'upcoming' }));\n\n return () => {\n dispatch(getDmsEventsSuccess({}));\n dispatch(editLandingPageSuccess({}));\n dispatch(addLandingPageSuccess({}));\n dispatch(deleteLandingPageSuccess({}));\n };\n }, [dispatch]);\n\n const isFirstRun = useRef(true);\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n if (LandingPageData.isGetDmsEventsRequesting) {\n setIsLoading(true);\n } else if (LandingPageData.getDmsEventsData) {\n const { result } = LandingPageData.getDmsEventsData.data;\n setUpcomingEventsData(result);\n setIsLoading(false);\n } else if (\n LandingPageData.getDmsEventsDataError ||\n LandingPageData.getDmsEventsDataNetworkError\n ) {\n showError(t('LANDING_PAGE.SOMETHING_WENT_WORNG'));\n setIsLoading(false);\n }\n }, [\n LandingPageData.getDmsEventsData,\n LandingPageData.getDmsEventsDataError,\n LandingPageData.getDmsEventsDataNetworkError,\n LandingPageData.isGetDmsEventsRequesting,\n ]);\n\n const isAddRef = useRef(true);\n useEffect(() => {\n if (isAddRef.current) {\n isAddRef.current = false;\n return;\n }\n if (LandingPageData.isAddLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.addLandingPageData?.data) {\n showSuccess(LandingPageData?.addLandingPageData?.data?.result);\n dispatch(getDmsEventsRequest({ event_type: 'upcoming' }));\n setIsLoading(false);\n handleResetFormData();\n } else if (\n LandingPageData.addLandingPageDataError ||\n LandingPageData.addLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.addLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.addLandingPageData,\n LandingPageData.isAddLandingPageRequesting,\n LandingPageData.addLandingPageDataError,\n LandingPageData.addLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isEditRef = useRef(true);\n useEffect(() => {\n if (isEditRef.current) {\n isEditRef.current = false;\n return;\n }\n if (LandingPageData.iseditLandingPageRequesting) {\n setIsLoading(true);\n setIsEdit(false);\n } else if (LandingPageData?.editLandingPageData?.data) {\n showSuccess(LandingPageData?.editLandingPageData?.data?.result);\n dispatch(getDmsEventsRequest({ event_type: 'upcoming' }));\n setIsLoading(false);\n handleResetFormData();\n setIsEdit(false);\n } else if (\n LandingPageData.editLandingPageDataError ||\n LandingPageData.editLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.editLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n setIsEdit(false);\n }\n }, [\n LandingPageData.editLandingPageData,\n LandingPageData.iseditLandingPageRequesting,\n LandingPageData.editLandingPageDataError,\n LandingPageData.editLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isDeleteRef = useRef(true);\n useEffect(() => {\n if (isDeleteRef.current) {\n isDeleteRef.current = false;\n return;\n }\n if (LandingPageData.isDeleteLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.deleteLandingPageData?.data) {\n showSuccess(LandingPageData?.deleteLandingPageData?.data?.result);\n dispatch(getDmsEventsRequest({ event_type: 'upcoming' }));\n setIsLoading(false);\n handleResetFormData();\n setIsEdit(false);\n } else if (\n LandingPageData.deleteLandingPageDataError ||\n LandingPageData.deleteLandingPageDataNetworkError\n ) {\n showError(LandingPageData.deleteLandingPageDataError?.response?.data?.message);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.deleteLandingPageData,\n LandingPageData.isDeleteLandingPageRequesting,\n LandingPageData.deleteLandingPageDataError,\n LandingPageData.deleteLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const handleResetFormData = () => {\n setFormData({\n name: '',\n location: '',\n from_date: moment(new Date())\n .add(1, 'days')\n .format(DATE_FORMAT),\n to_date: moment(new Date())\n .add(6, 'days')\n .format(DATE_FORMAT),\n start_time: '09:00',\n end_time: '18:00',\n event_url: '',\n event_icon: null,\n });\n\n setIsEdit(false);\n };\n\n const toggleDropdown = id => {\n setActiveDropdownId(prevId => (prevId === id ? null : id));\n };\n\n const handleEdit = editData => {\n const userData = {\n name: editData.name,\n location: editData.location,\n from_date: moment(editData.from_date).format(DATE_FORMAT),\n to_date: moment(editData.to_date).format(DATE_FORMAT),\n start_time: editData.start_time,\n end_time: editData.end_time,\n event_url: editData.event_url,\n event_icon: editData.file_url,\n id: editData.id,\n };\n setFormData(userData);\n setIsModalOpen(true);\n setIsEdit(true);\n };\n\n const handleDelete = data => {\n setSelectedEvents(data);\n setDeleteModal(true);\n };\n\n const onHandleEvents = data => {\n const submissionData = new FormData();\n\n // Append form fields to FormData\n if (data.name) submissionData.append('name', data.name);\n if (data.location) submissionData.append('location', data.location);\n if (data.from_date) submissionData.append('from_date', data.from_date);\n if (data.to_date) submissionData.append('to_date', data.to_date);\n if (data.start_time) submissionData.append('start_time', data.start_time);\n if (data.end_time) submissionData.append('end_time', data.end_time);\n if (data.event_url) submissionData.append('event_url', data.event_url);\n\n if (data.event_icon) {\n submissionData.append('event_icon', data.event_icon);\n }\n\n if (isEdit) {\n // * MAKE SURE TO SEND IT AS submissionData\n submissionData.append('event_id', formData.id);\n submissionData.append('event_url', formData.event_url);\n dispatch(editLandingPageRequest({ submissionData, end_point: 'update_events' }));\n setIsEdit(false);\n } else {\n dispatch(addLandingPageRequest({ submissionData, end_point: 'add_events' }));\n }\n };\n\n const onHandleDelete = () => {\n setDeleteModal(false);\n dispatch(\n deleteLandingPageRequest({\n id: selectedEvent?.id,\n end_point: 'delete_events',\n query: 'id',\n }),\n );\n };\n\n return (\n <>\n {isLoading && \n {\n setIsModalOpen(!isModalOpen);\n setIsEdit(false);\n }}\n >\n {t('LANDING_PAGE.ADD_NEW')}
\n {title.label}
\n {isSuperAdmin() || userPermisions.includes('add_dmsevents') ? (\n\n \n
\n )\n ) : null}\n {t('LANDING_PAGE.NO_RESULTS_FOUND')}
\n\n
\n {title.label}
\n {isSuperAdmin() || userPermisions.includes('change_dmsstatistics') ? (\n\n {isEdit ? (\n {\n setIsEdit(false);\n }}\n >\n {t('LANDING_PAGE.CANCEL')}\n \n ) : null}\n {\n if (isEdit) {\n saveChanges();\n } else {\n setIsEdit(true);\n }\n }}\n disabled={isEdit && isSaveDisabled()}\n >\n {isEdit ? (\n <>{t('LANDING_PAGE.SAVE')}\n ) : (\n <>\n {t('LANDING_PAGE.EDIT')}
\n ) : null}\n \n 
\n
\n \n {data.description} \n \n {isEdit ? (\n handleInputChange(index, e.target.value)}\n />\n ) : (\n {data.value}\n )}\n {data.label}\n \n
\n \n \n \n \n
\n \n );\n};\n\nexport default NewPartnersModal;\n","import React, { useEffect, useRef, useState } from 'react';\nimport DraggableList from 'react-draggable-list';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { t } from 'react-multi-lang';\nimport {\n Button,\n Card,\n CardBody,\n CardText,\n CardTitle,\n Col,\n Container,\n Dropdown,\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n Row,\n} from 'reactstrap';\n\nimport OrderIcon from '../../assets/Images/drag-icon.svg';\nimport { showError, showSuccess } from '../../Components/Notifications';\nimport Loader from '../../Components/common/TextLoader';\nimport { isSuperAdmin } from '../../Components/common/utils';\nimport { ReactComponent as AddIcon } from '../../assets/Images/add-icon.svg';\nimport { ReactComponent as LinkIcon } from '../../assets/Images/link-icon.svg';\nimport NoResultIcon from '../../assets/Images/no-results-icon.svg';\nimport {\n addLandingPageRequest,\n addLandingPageSuccess,\n deleteLandingPageRequest,\n deleteLandingPageSuccess,\n editLandingPageRequest,\n editLandingPageSuccess,\n getDmsPartnersDonorsRequest,\n getDmsPartnersDonorsSuccess,\n} from '../../redux/home/homeActions';\nimport DeleteModal from './DeleteModal';\nimport NewPartnersModal from './NewPartnersModal';\n\nfunction ManagePartners({ title, userPermisions }) {\n const containerRef = useRef();\n const dispatch = useDispatch();\n const [isLoading, setIsLoading] = useState(false);\n const [partnersData, setPartnersData] = useState([]);\n const [selectedPartner, setSelectedPartners] = useState('');\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [activeDropdownId, setActiveDropdownId] = useState(null);\n const [deleteModal, setDeleteModal] = useState(false);\n const [isEdit, setIsEdit] = useState(false);\n const [formData, setFormData] = useState({\n name: '',\n partner_donor_url: '',\n icon: null,\n is_fo: false,\n });\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n useEffect(() => {\n dispatch(getDmsPartnersDonorsRequest({}));\n\n return () => {\n dispatch(getDmsPartnersDonorsSuccess({}));\n dispatch(editLandingPageSuccess({}));\n dispatch(addLandingPageSuccess({}));\n dispatch(deleteLandingPageSuccess({}));\n };\n }, [dispatch]);\n\n const isFirstRun = useRef(true);\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n if (LandingPageData.isGetDmsPartnersDonorsRequesting) {\n setIsLoading(true);\n } else if (LandingPageData.getDmsPartnersDonorsData) {\n const data = LandingPageData.getDmsPartnersDonorsData.data;\n if (data && Array.isArray(data.result)) {\n setPartnersData(data.result);\n }\n setIsLoading(false);\n } else if (\n LandingPageData.getDmsPartnersDonorsDataError ||\n LandingPageData.getDmsPartnersDonorsDataNetworkError\n ) {\n showError(t('LANDING_PAGE.SOMETHING_WENT_WORNG'));\n setIsLoading(false);\n }\n }, [\n LandingPageData.getDmsPartnersDonorsData,\n LandingPageData.getDmsPartnersDonorsDataError,\n LandingPageData.getDmsPartnersDonorsDataNetworkError,\n LandingPageData.isGetDmsPartnersDonorsRequesting,\n ]);\n\n const isAddRef = useRef(true);\n useEffect(() => {\n if (isAddRef.current) {\n isAddRef.current = false;\n return;\n }\n if (LandingPageData.isAddLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.addLandingPageData?.data) {\n showSuccess(LandingPageData?.addLandingPageData?.data?.result);\n dispatch(getDmsPartnersDonorsRequest({}));\n setIsLoading(false);\n setFormData({\n name: '',\n partner_donor_url: '',\n icon: null,\n is_fo: false,\n });\n } else if (\n LandingPageData.addLandingPageDataError ||\n LandingPageData.addLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.addLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.addLandingPageData,\n LandingPageData.isAddLandingPageRequesting,\n LandingPageData.addLandingPageDataError,\n LandingPageData.addLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isEditRef = useRef(true);\n useEffect(() => {\n if (isEditRef.current) {\n isEditRef.current = false;\n return;\n }\n if (LandingPageData.iseditLandingPageRequesting) {\n setIsLoading(true);\n setIsEdit(false);\n } else if (LandingPageData?.editLandingPageData?.data) {\n showSuccess(LandingPageData?.editLandingPageData?.data?.result);\n dispatch(getDmsPartnersDonorsRequest({}));\n setIsLoading(false);\n setFormData({\n name: '',\n partner_donor_url: '',\n icon: null,\n is_fo: false,\n });\n setIsEdit(false);\n } else if (\n LandingPageData.editLandingPageDataError ||\n LandingPageData.editLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.editLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n setIsEdit(false);\n }\n }, [\n LandingPageData.editLandingPageData,\n LandingPageData.iseditLandingPageRequesting,\n LandingPageData.editLandingPageDataError,\n LandingPageData.editLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isDeleteRef = useRef(true);\n useEffect(() => {\n if (isDeleteRef.current) {\n isDeleteRef.current = false;\n return;\n }\n if (LandingPageData.isDeleteLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.deleteLandingPageData?.data) {\n showSuccess(LandingPageData?.deleteLandingPageData?.data?.result);\n dispatch(getDmsPartnersDonorsRequest({}));\n setIsLoading(false);\n setFormData({\n name: '',\n partner_donor_url: '',\n icon: null,\n is_fo: false,\n });\n } else if (\n LandingPageData.deleteLandingPageDataError ||\n LandingPageData.deleteLandingPageDataNetworkError\n ) {\n showError(LandingPageData.deleteLandingPageDataError?.response?.data?.message);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.deleteLandingPageData,\n LandingPageData.isDeleteLandingPageRequesting,\n LandingPageData.deleteLandingPageDataError,\n LandingPageData.deleteLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const toggleDropdown = id => {\n setActiveDropdownId(prevId => (prevId === id ? null : id));\n };\n\n const handleEdit = editData => {\n const userData = {\n name: editData.name,\n partner_donor_url: editData.partner_donor_url,\n icon: editData.file_url,\n id: editData.id,\n is_fo: editData.is_fo,\n };\n setFormData(userData);\n setIsModalOpen(true);\n setIsEdit(true);\n };\n\n const handleDelete = data => {\n setSelectedPartners(data);\n setDeleteModal(true);\n };\n\n const onHandleDelete = () => {\n setDeleteModal(false);\n dispatch(\n deleteLandingPageRequest({\n id: selectedPartner?.id,\n end_point: 'delete_partners_donors',\n query: 'partner_donor_id',\n }),\n );\n };\n\n const onHandlePartners = data => {\n const submissionData = new FormData();\n\n // Append form fields to FormData\n if (data.name) submissionData.append('name', data.name);\n if (data.partner_donor_url) submissionData.append('partner_donor_url', data.partner_donor_url);\n\n if (data.icon) {\n submissionData.append('icon', data.icon);\n }\n\n if (data.is_fo) {\n submissionData.append('is_fo', 'True');\n } else {\n submissionData.append('is_fo', 'False');\n }\n if (isEdit) {\n // * MAKE SURE TO SEND IT AS submissionData\n submissionData.append('partner_donor_id', formData.id);\n dispatch(editLandingPageRequest({ submissionData, end_point: 'update_partners_donors' }));\n setIsEdit(false);\n } else {\n dispatch(addLandingPageRequest({ submissionData, end_point: 'add_partners_donors' }));\n }\n };\n\n const _onListChange = (newList, e, old, newIndex) => {\n const submissionData = {\n order: newIndex + 1,\n partner_donor_id: e.id,\n };\n\n setTimeout(() => {\n dispatch(editLandingPageRequest({ submissionData, end_point: 'update_partners_donors' }));\n }, 1000);\n\n setPartnersData(newList);\n };\n\n const Item = ({ item, dragHandleProps }) => {\n const { onMouseDown, onTouchStart } = dragHandleProps;\n\n return (\n <>\n \n {\n setIsModalOpen(!isModalOpen);\n setIsEdit(false);\n }}\n >\n {t('LANDING_PAGE.ADD_NEW')}
\n {title.label}
\n {isSuperAdmin() || userPermisions.includes('add_dmspartnersdonors') ? (\n\n \n _onListChange(newList, e, oldIndex, newIndex)\n }\n container={() => containerRef.current}\n />\n
\n ) : (\n \n \n
\n )\n ) : null}\n {t('LANDING_PAGE.NO_RESULTS_FOUND')}
\n\n \n \n \n
\n );\n};\n\nexport default NewTestimonialModal;\n","import React, { useEffect, useRef, useState } from 'react';\nimport DraggableList from 'react-draggable-list';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Button,\n Card,\n CardBody,\n CardText,\n CardTitle,\n Col,\n Container,\n Dropdown,\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n Row,\n} from 'reactstrap';\nimport { t } from 'react-multi-lang';\n\nimport { showError, showSuccess } from '../../Components/Notifications';\nimport Loader from '../../Components/common/TextLoader';\nimport { isSuperAdmin } from '../../Components/common/utils';\nimport { ReactComponent as AddIcon } from '../../assets/Images/add-icon.svg';\nimport OrderIcon from '../../assets/Images/drag-icon.svg';\nimport NoResultIcon from '../../assets/Images/no-results-icon.svg';\nimport {\n addLandingPageRequest,\n addLandingPageSuccess,\n deleteLandingPageRequest,\n deleteLandingPageSuccess,\n editLandingPageRequest,\n editLandingPageSuccess,\n getDmsTestimonialsRequest,\n getDmsTestimonialsSuccess,\n} from '../../redux/home/homeActions';\nimport DeleteModal from './DeleteModal';\nimport NewTestimonialModal from './NewTestimonialModal';\n\nfunction ManageTestimonials({ title, userPermisions }) {\n const containerRef = useRef();\n const dispatch = useDispatch();\n const [isLoading, setIsLoading] = useState(false);\n const [testimonialsData, setTestimonialsData] = useState([]);\n const [selectedTestominals, setSelectedTestimonials] = useState('');\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [activeDropdownId, setActiveDropdownId] = useState(null);\n const [deleteModal, setDeleteModal] = useState(false);\n const [isEdit, setIsEdit] = useState(false);\n const [formData, setFormData] = useState({\n name: '',\n role: '',\n description: '',\n profile_image: null,\n });\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n useEffect(() => {\n dispatch(getDmsTestimonialsRequest({}));\n\n return () => {\n dispatch(getDmsTestimonialsSuccess({}));\n dispatch(editLandingPageSuccess({}));\n dispatch(addLandingPageSuccess({}));\n dispatch(deleteLandingPageSuccess({}));\n };\n }, [dispatch]);\n\n const isFirstRun = useRef(true);\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n if (LandingPageData.isGetDmsTestimonialsRequesting) {\n setIsLoading(true);\n } else if (LandingPageData.getDmsTestimonialsData) {\n const data = LandingPageData.getDmsTestimonialsData.data;\n if (data && Array.isArray(data.result)) {\n setTestimonialsData(data.result);\n }\n setIsLoading(false);\n } else if (\n LandingPageData.getDmsTestimonialsDataError ||\n LandingPageData.getDmsTestimonialsDataNetworkError\n ) {\n showError('Something went wrong');\n setIsLoading(false);\n }\n }, [\n LandingPageData.getDmsTestimonialsData,\n LandingPageData.getDmsTestimonialsDataError,\n LandingPageData.getDmsTestimonialsDataNetworkError,\n LandingPageData.isGetDmsTestimonialsRequesting,\n ]);\n\n const toggleDropdown = id => {\n setActiveDropdownId(prevId => (prevId === id ? null : id));\n };\n\n const handleEdit = editData => {\n const userData = {\n name: editData.name,\n role: editData.role,\n description: editData.description,\n profile_image: editData.file_url,\n id: editData.id,\n };\n setFormData(userData);\n setIsModalOpen(true);\n setIsEdit(true);\n };\n\n const handleDelete = data => {\n setSelectedTestimonials(data);\n setDeleteModal(true);\n };\n\n const onHandleDelete = () => {\n setDeleteModal(false);\n dispatch(\n deleteLandingPageRequest({\n id: selectedTestominals?.id,\n end_point: 'delete_testimonials',\n query: 'testimonial_id',\n }),\n );\n };\n\n const onHandleTestimonials = data => {\n const submissionData = new FormData();\n\n // Append form fields to FormData\n if (data.name) submissionData.append('name', data.name);\n if (data.role) submissionData.append('role', data.role);\n if (data.description) submissionData.append('description', data.description);\n\n if (data.profile_image) {\n submissionData.append('profile_image', data.profile_image);\n }\n if (isEdit) {\n // * MAKE SURE TO SEND IT AS submissionData\n submissionData.append('testimonial_id', formData.id);\n dispatch(editLandingPageRequest({ submissionData, end_point: 'update_testimonials' }));\n setIsEdit(false);\n } else {\n dispatch(addLandingPageRequest({ submissionData, end_point: 'add_testimonials' }));\n }\n };\n\n const isAddRef = useRef(true);\n useEffect(() => {\n if (isAddRef.current) {\n isAddRef.current = false;\n return;\n }\n if (LandingPageData.isAddLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.addLandingPageData?.data) {\n showSuccess(LandingPageData?.addLandingPageData?.data?.result);\n dispatch(getDmsTestimonialsRequest({}));\n setIsLoading(false);\n setFormData({\n name: '',\n role: '',\n description: '',\n profile_image: null,\n });\n } else if (\n LandingPageData.addLandingPageDataError ||\n LandingPageData.addLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.addLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.addLandingPageData,\n LandingPageData.isAddLandingPageRequesting,\n LandingPageData.addLandingPageDataError,\n LandingPageData.addLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isEditRef = useRef(true);\n useEffect(() => {\n if (isEditRef.current) {\n isEditRef.current = false;\n return;\n }\n if (LandingPageData.iseditLandingPageRequesting) {\n setIsLoading(true);\n setIsEdit(false);\n } else if (LandingPageData?.editLandingPageData?.data) {\n showSuccess(LandingPageData?.editLandingPageData?.data?.result);\n dispatch(getDmsTestimonialsRequest({}));\n setIsLoading(false);\n setFormData({\n name: '',\n role: '',\n description: '',\n profile_image: null,\n });\n setIsEdit(false);\n } else if (\n LandingPageData.editLandingPageDataError ||\n LandingPageData.editLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.editLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n setIsEdit(false);\n }\n }, [\n LandingPageData.editLandingPageData,\n LandingPageData.iseditLandingPageRequesting,\n LandingPageData.editLandingPageDataError,\n LandingPageData.editLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isDeleteRef = useRef(true);\n useEffect(() => {\n if (isDeleteRef.current) {\n isDeleteRef.current = false;\n return;\n }\n if (LandingPageData.isDeleteLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.deleteLandingPageData?.data) {\n showSuccess(LandingPageData?.deleteLandingPageData?.data?.result);\n dispatch(getDmsTestimonialsRequest({}));\n setIsLoading(false);\n setFormData({\n name: '',\n role: '',\n description: '',\n profile_image: null,\n });\n } else if (\n LandingPageData.deleteLandingPageDataError ||\n LandingPageData.deleteLandingPageDataNetworkError\n ) {\n showError(LandingPageData.deleteLandingPageDataError?.response?.data?.message);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.deleteLandingPageData,\n LandingPageData.isDeleteLandingPageRequesting,\n LandingPageData.deleteLandingPageDataError,\n LandingPageData.deleteLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const _onListChange = (newList, e, old, newIndex) => {\n const submissionData = {\n order: newIndex + 1,\n testimonial_id: e.id,\n };\n\n setTimeout(() => {\n dispatch(editLandingPageRequest({ submissionData, end_point: 'update_testimonials' }));\n }, 1000);\n setTestimonialsData(newList);\n };\n\n const Item = ({ item, dragHandleProps }) => {\n const { onMouseDown, onTouchStart } = dragHandleProps;\n\n return (\n \n {\n setIsModalOpen(!isModalOpen);\n setIsEdit(false);\n }}\n >\n {t('LANDING_PAGE.ADD_NEW')}
\n {title.label}
\n {isSuperAdmin() || userPermisions.includes('add_dmstestimonials') ? (\n\n \n _onListChange(newList, e, oldIndex, newIndex)\n }\n container={() => containerRef.current}\n />\n
\n ) : (\n \n \n
\n )\n ) : null}\n {t('LANDING_PAGE.NO_RESULTS_FOUND')}
\n\n handleSelectOption(item)}\n >\n {item.label}\n
\n ))}\n \n );\n}\n\nexport default Sidebar;\n","import React, { useEffect, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport {\n Col,\n Form,\n FormFeedback,\n FormGroup,\n Input,\n Label,\n Modal,\n ModalBody,\n ModalFooter,\n ModalHeader,\n Row,\n} from 'reactstrap';\n// import { RISK_MITIGATION_CATEGORY } from '../../../Components/constants';\nimport CloseIcon from '../../../assets/Images/closeIcon.svg';\nimport { ReactComponent as DeleteIcon } from '../../../assets/Images/edit-icon.svg';\nimport { ReactComponent as UploadIcon } from '../../../assets/Images/upload-image.svg';\n\nimport { showError } from '../../../Components/Notifications';\nimport { MAX_FILE_SIZE } from '../../../Components/constants';\n\nconst NewPillarModal = ({\n modal,\n setModal,\n formData,\n setFormData,\n isEditable,\n onHandlePillars,\n // selectedRiskMitigationTab,\n}) => {\n const [isFormValid, setIsFormValid] = useState(false);\n // const [selectedCategory, setSelectedCategory] = useState('risk_mitigation_category');\n const [imagePreview, setImagePreview] = useState(null);\n const [initialData, setInitialData] = useState({});\n const [errors, setErrors] = useState({});\n const [filename, setFilename] = useState('');\n\n const toggleModal = () => {\n setModal(!modal);\n setFormData({\n pillar_type: 'monitoring_early_warning',\n name: '',\n description: '',\n website_url: '',\n latitude: '',\n longitude: '',\n icon: null,\n file: null,\n });\n setImagePreview(null);\n // setSelectedCategory('risk_mitigation_category');\n setFilename('');\n };\n\n // useEffect(() => {\n // if (selectedRiskMitigationTab) {\n // setSelectedCategory(selectedRiskMitigationTab);\n // }\n // }, [selectedRiskMitigationTab]);\n\n useEffect(() => {\n let isValid;\n if (['risk_impact', 'risk_mitigation'].includes(formData.pillar_type)) {\n isValid =\n formData.pillar_type &&\n formData.name &&\n formData.description &&\n formData.file &&\n !Object.values(errors).some(error => error);\n } else {\n isValid =\n formData.pillar_type &&\n formData.name &&\n formData.description &&\n formData.website_url &&\n formData.icon &&\n formData.latitude &&\n formData.longitude &&\n !Object.values(errors).some(error => error);\n }\n setIsFormValid(isValid);\n }, [formData, errors]);\n\n useEffect(() => {\n if (isEditable) {\n setInitialData(formData);\n }\n\n if (formData.file) {\n setFilename(formData.file.split('/').pop());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = e => {\n const { name, value, files } = e.target;\n let updatedFormData = {\n ...formData,\n };\n\n if (name === 'icon' && files && files.length) {\n const file = files[0];\n updatedFormData[name] = file;\n setImagePreview(URL.createObjectURL(file)); // Create a preview URL for the uploaded image\n\n e.target.value = null;\n } else if (name === 'file' && files && files.length) {\n const file = files[0];\n // 6 mb\n if (file.size > MAX_FILE_SIZE) {\n showError('File size should not exceed 5MB.');\n return;\n }\n updatedFormData[name] = file;\n setFilename(file.name);\n\n e.target.value = null;\n } else {\n updatedFormData[name] = value;\n }\n\n setFormData(updatedFormData);\n validateField(name, updatedFormData);\n };\n\n const validateField = (name, recentFormData) => {\n let errorMessages = {};\n\n switch (name) {\n case 'description':\n if (recentFormData.description.length > 600) {\n errorMessages.description = 'Limit exceeded: Maximum 600 characters.';\n } else {\n errorMessages.description = '';\n }\n break;\n\n default:\n break;\n }\n\n setErrors(prevErrors => ({\n ...prevErrors,\n ...errorMessages,\n }));\n };\n\n const handleRemove = type => {\n setFormData(prevData => ({\n ...prevData,\n [type]: null,\n }));\n\n if (type === 'icon') {\n setImagePreview(null);\n } else if (type === 'file') {\n setFilename('');\n }\n };\n\n const getChangedFields = () => {\n const changedFields = {};\n Object.keys(formData).forEach(key => {\n if (formData[key] !== initialData[key]) {\n changedFields[key] = formData[key];\n }\n });\n return changedFields;\n };\n\n const handleSubmit = e => {\n e.preventDefault();\n const dataToSubmit = isEditable ? getChangedFields() : formData;\n onHandlePillars(dataToSubmit);\n toggleModal();\n setInitialData({});\n };\n\n // const handleSelecteCategory = riskValue => {\n // setSelectedCategory(riskValue.value);\n // setFormData(prevFormData => ({\n // ...prevFormData,\n // category: riskValue.value,\n // }));\n // };\n\n return (\n handleBackToSettings(e)}>\n Back\n
\n \n \n \n
\n );\n};\n\nexport default NewPillarModal;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { useEffect, useRef, useState } from 'react';\nimport DraggableList from 'react-draggable-list';\nimport { t } from 'react-multi-lang';\nimport { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';\n\nimport OrderIcon from '../../../assets/Images/drag-icon.svg';\nimport { ReactComponent as LinkIcon } from '../../../assets/Images/link-icon.svg';\nimport NoResultIcon from '../../../assets/Images/no-results-icon.svg';\nimport { isSuperAdmin } from '../../../Components/common/utils';\nimport { COUNTRY_SPECTIFIC_URLS } from '../../../Components/constants';\n\nconst PillarsListing = ({\n data,\n selectedPillar,\n setIsModalOpen,\n isLoading,\n setFormData,\n setIsEdit,\n setDeleteModal,\n setSelectedPillar,\n onHandleUpdateOrder,\n userPermisions,\n}) => {\n const containerRef = useRef();\n const [activeDropdownId, setActiveDropdownId] = useState(null);\n const [pillarsData, setPillarsData] = useState([]);\n\n useEffect(() => {\n if (data?.length) {\n setPillarsData(data);\n }\n }, [data]);\n\n const toggleDropdown = id => {\n setActiveDropdownId(prevId => (prevId === id ? null : id));\n };\n\n const handleEdit = editData => {\n const userData = {\n pillar_type: selectedPillar,\n name: editData.name,\n description: editData.description,\n website_url:\n editData.website_url !== null ? editData.website_url : handleRenderUrls(editData),\n latitude: editData.latitude,\n longitude: editData.longitude,\n icon: editData.icon,\n id: editData.id,\n isEditable: editData.is_editable,\n file: editData.file,\n };\n setFormData(userData);\n setIsModalOpen(true);\n setIsEdit(true);\n };\n\n const handleDelete = data => {\n setSelectedPillar(data);\n setDeleteModal(true);\n };\n\n const handleRenderUrls = urlData => {\n if (urlData.file) {\n return urlData.file.split('/').pop();\n } else {\n if (urlData?.website_url) {\n return urlData?.website_url;\n } else {\n const filteredData = COUNTRY_SPECTIFIC_URLS.filter(\n country => country.country_name === urlData.country_name,\n );\n return filteredData[0]?.url;\n }\n }\n };\n\n const _onListChange = (newList, e, old, newIndex) => {\n const payload = {\n order: newIndex + 1,\n id: e.id,\n };\n\n onHandleUpdateOrder(payload);\n setPillarsData(newList);\n };\n\n const Item = ({ item, dragHandleProps }) => {\n const { onMouseDown, onTouchStart } = dragHandleProps;\n\n return (\n \n {\n onTouchStart(e);\n }}\n onMouseDown={e => {\n onMouseDown(e);\n }}\n />\n
\n \n );\n };\n\n return (\n <>\n {!isLoading ? (\n data?.length ? (\n \n toggleDropdown(item.id)}\n direction=\"left\"\n className=\" d-inline w-auto\"\n >\n \n \n \n \n {isSuperAdmin() || userPermisions.includes('change_dmspillars') ? (\n handleEdit(item)}\n className=\"dms-dropdown-options dms-dropdown-options-border\"\n >\n {t('LANDING_PAGE.EDIT_DETAILS')}\n \n ) : null}\n {isSuperAdmin() || userPermisions.includes('delete_dmspillars') ? (\n handleDelete(item)}\n className=\"dms-dropdown-options dms-dropdown-options-delete\"\n >\n {t('LANDING_PAGE.DELETE')}\n \n ) : null}\n \n \n
\n \n 
\n
\n \n
\n \n \n window.open(item.file ? item.file : handleRenderUrls(item), '_blank')\n }\n >\n
{' '}\n {item.name}
\n{item.description}
\n\n \n _onListChange(newList, e, oldIndex, newIndex)\n }\n container={() => containerRef.current}\n />\n
\n ) : (\n \n \n
\n )\n ) : null}\n \n );\n};\n\nexport default PillarsListing;\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport classnames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n Button,\n Col,\n Container,\n Nav,\n NavItem,\n NavLink,\n Row,\n TabContent,\n TabPane,\n} from 'reactstrap';\n\nimport { ReactComponent as AddIcon } from '../../../assets/Images/add-icon.svg';\nimport Loader from '../../../Components/common/TextLoader';\nimport { isSuperAdmin } from '../../../Components/common/utils';\nimport { showError, showSuccess } from '../../../Components/Notifications';\nimport {\n addLandingPageRequest,\n addLandingPageSuccess,\n deleteLandingPageRequest,\n deleteLandingPageSuccess,\n editLandingPageRequest,\n editLandingPageSuccess,\n getDmsPillarsRequest,\n getDmsPillarsSuccess,\n} from '../../../redux/home/homeActions';\nimport DeleteModal from '../DeleteModal';\nimport NewPillarModal from './NewPillarModal';\nimport PillarsListing from './PillarsLists';\n// import RiskMitigation from './RiskMitigation';\n\nfunction ManagePillars({ title, userPermisions }) {\n const dispatch = useDispatch();\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [activeTab, setActiveTab] = useState('monitoring_early_warning');\n const [pillarsData, setPillarsData] = useState([]);\n const [categoryData, setCategoryData] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [isEdit, setIsEdit] = useState(false);\n const [deleteModal, setDeleteModal] = useState(false);\n const [selectedPillar, setSelectedPillar] = useState('');\n // const [selectedRiskMitigationTab, setSelectedRiskMitigationtab] = useState(\n // 'risk_mitigation_category',\n // );\n const [formData, setFormData] = useState({\n pillar_type: 'monitoring_early_warning',\n name: '',\n description: '',\n website_url: '',\n latitude: '',\n longitude: '',\n icon: null,\n file: null,\n });\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n useEffect(() => {\n dispatch(getDmsPillarsRequest());\n\n return () => {\n dispatch(getDmsPillarsSuccess({}));\n dispatch(editLandingPageSuccess({}));\n dispatch(addLandingPageSuccess({}));\n dispatch(deleteLandingPageSuccess({}));\n };\n }, [dispatch]);\n\n const isFirstRun = useRef(true);\n useEffect(() => {\n if (isFirstRun.current) {\n isFirstRun.current = false;\n return;\n }\n if (LandingPageData.isGetDmsPillarsRequesting) {\n setIsLoading(true);\n } else if (LandingPageData.getDmsPillarsData) {\n const { result } = LandingPageData.getDmsPillarsData.data;\n const filteredData = result.filter(pillar => pillar.pillar_type === activeTab);\n setCategoryData(filteredData);\n setPillarsData(result);\n setIsLoading(false);\n } else if (LandingPageData.getDmsPillarsError || LandingPageData.getDmsPillarsNetworkError) {\n showError('Something went wrong');\n setIsLoading(false);\n }\n }, [\n LandingPageData.getDmsPillarsData,\n LandingPageData.getDmsPillarsError,\n LandingPageData.getDmsPillarsNetworkError,\n LandingPageData.isGetDmsPillarsRequesting,\n ]);\n\n const isAddRef = useRef(true);\n useEffect(() => {\n if (isAddRef.current) {\n isAddRef.current = false;\n return;\n }\n if (LandingPageData.isAddLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.addLandingPageData?.data) {\n showSuccess(LandingPageData?.addLandingPageData?.data?.result);\n dispatch(getDmsPillarsRequest({}));\n setIsLoading(false);\n handleResetFormData();\n } else if (\n LandingPageData.addLandingPageDataError ||\n LandingPageData.addLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.addLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.addLandingPageData,\n LandingPageData.isAddLandingPageRequesting,\n LandingPageData.addLandingPageDataError,\n LandingPageData.addLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isEditRef = useRef(true);\n useEffect(() => {\n if (isEditRef.current) {\n isEditRef.current = false;\n return;\n }\n if (LandingPageData.iseditLandingPageRequesting) {\n setIsLoading(true);\n setIsEdit(false);\n } else if (LandingPageData?.editLandingPageData?.data) {\n showSuccess(LandingPageData?.editLandingPageData?.data?.result);\n dispatch(getDmsPillarsRequest({}));\n setIsLoading(false);\n handleResetFormData();\n setIsEdit(false);\n } else if (\n LandingPageData.editLandingPageDataError ||\n LandingPageData.editLandingPageDataNetworkError\n ) {\n const errorMessageArray =\n LandingPageData.editLandingPageDataError?.response?.data?.response?.data?.message || [];\n const [errorMessage] = errorMessageArray;\n\n showError(errorMessage);\n setIsLoading(false);\n setIsEdit(false);\n }\n }, [\n LandingPageData.editLandingPageData,\n LandingPageData.iseditLandingPageRequesting,\n LandingPageData.editLandingPageDataError,\n LandingPageData.editLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const isDeleteRef = useRef(true);\n useEffect(() => {\n if (isDeleteRef.current) {\n isDeleteRef.current = false;\n return;\n }\n if (LandingPageData.isDeleteLandingPageRequesting) {\n setIsLoading(true);\n } else if (LandingPageData?.deleteLandingPageData?.data) {\n showSuccess(LandingPageData?.deleteLandingPageData?.data?.result);\n dispatch(getDmsPillarsRequest({}));\n setIsLoading(false);\n handleResetFormData();\n } else if (\n LandingPageData.deleteLandingPageDataError ||\n LandingPageData.deleteLandingPageDataNetworkError\n ) {\n showError(LandingPageData.deleteLandingPageDataError?.response?.data?.message);\n setIsLoading(false);\n }\n }, [\n LandingPageData?.deleteLandingPageData,\n LandingPageData.isDeleteLandingPageRequesting,\n LandingPageData.deleteLandingPageDataError,\n LandingPageData.deleteLandingPageDataNetworkError,\n dispatch,\n ]);\n\n const handleResetFormData = () => {\n setFormData({\n pillar_type: 'monitoring_early_warning',\n name: '',\n description: '',\n website_url: '',\n latitude: '',\n longitude: '',\n icon: null,\n file: null,\n });\n };\n\n const toggle = tab => {\n if (activeTab !== tab) {\n const filteredData = pillarsData.filter(pillar => pillar.pillar_type === tab);\n setCategoryData(filteredData);\n setActiveTab(tab);\n }\n };\n\n const onHandlePillars = data => {\n const submissionData = new FormData();\n\n // Append form fields to FormData\n if (data.pillar_type) submissionData.append('pillar_type', data.pillar_type);\n if (data.name) submissionData.append('name', data.name);\n if (data.description) submissionData.append('description', data.description);\n if (data.website_url) submissionData.append('website_url', data.website_url);\n if (data.latitude) submissionData.append('latitude', data.latitude);\n if (data.longitude) submissionData.append('longitude', data.longitude);\n\n if (data.file) {\n submissionData.append('file', data.file);\n }\n\n if (data.icon) {\n submissionData.append('icon', data.icon);\n }\n\n if (data.category) {\n submissionData.append('category', data.category);\n }\n\n if (isEdit) {\n // * MAKE SURE TO SEND IT AS submissionData\n submissionData.append('id', formData.id);\n dispatch(editLandingPageRequest({ submissionData, end_point: 'update_pillars' }));\n setIsEdit(false);\n } else {\n dispatch(addLandingPageRequest({ submissionData, end_point: 'add_pillars' }));\n }\n };\n\n const onHandleDelete = () => {\n setDeleteModal(false);\n dispatch(\n deleteLandingPageRequest({\n id: selectedPillar?.id,\n end_point: 'delete_pillars',\n query: 'id',\n }),\n );\n };\n\n const onHandleUpdateOrder = payload => {\n const submissionData = { ...payload };\n\n setTimeout(() => {\n dispatch(editLandingPageRequest({ submissionData, end_point: 'update_pillars' }));\n }, 1000);\n };\n\n return (\n <>\n {isLoading && {t('LANDING_PAGE.NO_RESULTS_FOUND')}
\n\n {\n setIsModalOpen(!isModalOpen);\n setIsEdit(false);\n }}\n >\n {t('LANDING_PAGE.ADD_NEW')}
\n {title.label}
\n {isSuperAdmin() || userPermisions.includes('add_dmspillars') ? (\n\n
\n );\n}\n\nexport default DmsLandingPage;\n","import _ from 'lodash';\nimport moment from 'moment';\nimport React, { useEffect, useState } from 'react';\nimport { IoMdCloseCircleOutline } from 'react-icons/io';\nimport { useHistory } from 'react-router-dom';\nimport Select from 'react-select';\nimport {\n Button,\n Form,\n FormFeedback,\n FormGroup,\n Input,\n Label,\n Modal,\n ModalBody,\n ModalHeader,\n} from 'reactstrap';\n\nimport { DATE_FORMAT, SOUTH_ASIA_CONST, SOUTH_ASIA_COUNTRY } from '../../Components/constants';\nimport { getCurrentYearMonth, renderParametersOptions } from '../../Components/helpers';\nimport {\n getDistrictByStateRequest,\n getIndicesRequest,\n getStateByCountryRequest,\n} from '../../redux/actions';\n\nfunction CreateBulletinModal({\n isOpenBulletin,\n toggleModal,\n countryList,\n LOCATION,\n dispatch,\n stateList,\n districtList,\n bulletinTypes,\n indicatorList,\n countryData,\n mapIndex,\n userFormData,\n isEditTitle,\n}) {\n const history = useHistory();\n const [formData, setFormData] = useState({\n country: '',\n state: '',\n district: '',\n bulletin_type: '',\n indicators: [],\n startDate: '',\n endDate: '',\n });\n const [updatedBulletinTypes, setUpdatedBulletinTypes] = useState([]);\n const [errors, setErrors] = useState({ startDate: '', endDate: '' });\n const [isFormValid, setIsFormValid] = useState(false);\n\n useEffect(() => {\n // Add a CSS class to the body element when the sideEditor is open\n if (isOpenBulletin) {\n document.body.classList.add('no-scroll');\n } else {\n document.body.classList.remove('no-scroll');\n }\n\n // Clean up the effect\n return () => {\n document.body.classList.remove('no-scroll');\n };\n }, [isOpenBulletin]);\n\n useEffect(() => {\n if (!_.isEmpty(userFormData)) {\n setFormData(prev => {\n return {\n ...prev,\n country: userFormData?.country,\n state: userFormData?.state,\n district: userFormData?.district,\n bulletin_type: userFormData?.bulletin_type,\n };\n });\n }\n }, [userFormData]);\n\n useEffect(() => {\n if (!_.isEmpty(countryData)) {\n setFormData(prev => {\n return {\n ...prev,\n country: countryData,\n };\n });\n }\n }, [countryData]);\n\n useEffect(() => {\n if (bulletinTypes?.length) {\n const filteredData = bulletinTypes.filter(type => type.name !== 'All');\n setUpdatedBulletinTypes(filteredData);\n }\n }, [bulletinTypes]);\n\n useEffect(() => {\n const isValid = () => {\n const requiredFields = [\n formData.country,\n formData.indicators,\n formData.bulletin_type,\n formData.startDate,\n ];\n\n if (formData.bulletin_type?.name === 'Monthly Bulletin') {\n return requiredFields.every(Boolean) && !Object.values(errors).some(Boolean);\n } else {\n return (\n requiredFields.every(Boolean) && formData.endDate && !Object.values(errors).some(Boolean)\n );\n }\n };\n\n const validity = isValid();\n setIsFormValid(validity);\n }, [formData, errors]);\n\n const handleChange = (newValue, action) => {\n let updatedFormData = {\n ...formData,\n };\n if (action.name === 'country') {\n updatedFormData[action.name] = newValue;\n updatedFormData.state = '';\n updatedFormData.district = '';\n dispatch(\n getStateByCountryRequest({\n requestObj: {\n location_type: LOCATION.State,\n parent_id: newValue?.id,\n },\n isCompareLocation: false,\n }),\n );\n dispatch(\n getIndicesRequest({\n requestObj: {\n type: 'country',\n type_id: newValue?.id,\n },\n module: 'drought-monitor',\n }),\n );\n } else if (action.name === 'state') {\n updatedFormData[action.name] = newValue;\n updatedFormData.district = '';\n dispatch(\n getDistrictByStateRequest({\n requestObj: {\n location_type: LOCATION.District,\n parent_id: newValue?.id,\n },\n isCompareLocation: false,\n }),\n );\n } else if (action.name === 'district') {\n updatedFormData[action.name] = newValue;\n } else if (action.name === 'bulletin_type') {\n updatedFormData[action.name] = newValue;\n updatedFormData.startDate = '';\n updatedFormData.endDate = '';\n } else if (action.name === 'indicators') {\n updatedFormData[action.name] = newValue; // newValue is an array for multi-select\n } else {\n updatedFormData[action.name] = newValue;\n }\n setFormData(updatedFormData);\n };\n\n const handleDates = e => {\n const { name, value } = e.target;\n\n const isValidYear = date => {\n const year = moment(date).year();\n return year >= 1999;\n };\n\n let startDate = name === 'start_date' ? moment(value) : moment(formData?.startDate);\n let endDate = name === 'end_date' ? moment(value) : moment(formData?.endDate);\n\n if (formData.bulletin_type?.name === 'Monthly Bulletin') {\n startDate = moment(value, 'YYYY-MM');\n endDate = moment(startDate).endOf('month');\n }\n\n let newErrors = { ...errors };\n\n // Validate StartDate\n if (startDate.isAfter(moment())) {\n newErrors.startDate = 'Start date cannot be in the future';\n } else if (!isValidYear(startDate)) {\n newErrors.startDate = 'Selected year should be within the range of 2000-current year';\n } else {\n newErrors.startDate = '';\n }\n\n // Validate endDate\n if (!formData.bulletin_type || formData.bulletin_type?.name !== 'Monthly Bulletin') {\n if (endDate.isBefore(startDate)) {\n newErrors.endDate = 'End date cannot be earlier than start date';\n } else if (endDate.isSame(startDate, 'day')) {\n newErrors.endDate = 'End date cannot be the same as start date';\n } else {\n newErrors.endDate = '';\n }\n }\n\n setErrors(newErrors);\n setFormData(prev => ({\n ...prev,\n [name === 'start_date' ? 'startDate' : 'endDate']: value,\n }));\n };\n\n const handleSubmit = e => {\n e.preventDefault();\n\n history.push({\n pathname: '/create-online-bulletin',\n state: {\n formData,\n newMapIndex: mapIndex,\n layersList: indicatorList,\n isTitleEditable: isEditTitle,\n },\n });\n toggleModal();\n };\n\n return (\n {renderComponent()}
\n Create Bulletin
\n \n\n \n {bulletinData?.category_name}\n \n \n {bulletinData?.topic?.length > 29\n ? bulletinData?.topic?.substring(0, 29) + '...'\n : bulletinData?.topic}\n \n {bulletinData?.is_publish ? (\n \n Published on: {moment(bulletinData.updated_date).format('DD-MM-YYYY')}\n \n ) : null}\n
{' '}\n \n );\n}\n\nexport default OnlineBulletInList;\n","import _ from 'lodash';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport InfiniteScroll from 'react-infinite-scroll-component';\nimport { t } from 'react-multi-lang';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { Alert, Button, Col, Container, Row } from 'reactstrap';\n\nimport Loader from '../../Components/common/loader';\nimport { LOCATION } from '../../Components/constants';\nimport { showSuccess } from '../../Components/Notifications';\nimport {\n getAllBulletinRequest,\n getAllTemplateListRequest,\n getBulletinIndicatorsRequest,\n getCountryRequest,\n getStateByCountryRequest,\n} from '../../redux/actions';\nimport Footer from '../new-landing-page/Footer';\nimport CreateBulletinModal from './CreateBulletinModal';\nimport OnlineBulletInList from './OnlineBulletInList';\n\nfunction OnlineBulletin() {\n const dispatch = useDispatch();\n const [pageNumber, setPageNumber] = useState(1);\n const [pageCount, setPageCount] = useState();\n const [categoryFilter, setCategoryFilter] = useState([\n {\n id: '',\n name: 'All',\n },\n ]);\n const [selectedCategory, setSelectedCategory] = useState({\n id: '',\n name: 'All',\n });\n const [bulletinList, setBulletinList] = useState([]);\n const [yearsList, setYearsList] = useState([]);\n const currentYear = new Date().getFullYear();\n const [selectedYear, setSelectedYear] = useState(currentYear);\n const [isOpenBulletin, setIsOpenBulletin] = useState(false);\n const [countryList, setCountryList] = useState([]);\n const [stateList, setStateList] = useState([]);\n const [districtList, setDistrictList] = useState([]);\n const [indicatorList, setIndicatorList] = useState([]);\n const [countryData, setCountryData] = useState({});\n\n const { Bulletin, Location, PublishData } = useSelector(state => ({\n Bulletin: state.Bulletin,\n Location: state.Location,\n PublishData: state.Bulletin?.bulletinPublishData,\n }));\n\n useEffect(() => {\n const countryInfo = localStorage.getItem('countryData');\n // Convert the JSON string back to an object\n const countrySpecificData = JSON.parse(countryInfo);\n\n setCountryData({\n ...countrySpecificData,\n value: countrySpecificData.country_name,\n label: countrySpecificData.country_name,\n });\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\n dispatch(getAllTemplateListRequest({}));\n dispatch(getBulletinIndicatorsRequest({}));\n dispatch(\n getAllBulletinRequest({\n page: pageNumber,\n data: { year: selectedYear, is_publish: true },\n }),\n );\n const currentYear = new Date().getFullYear();\n const listOfYears = Array.from({ length: 5 }, (_, index) => currentYear - index);\n\n setYearsList(listOfYears);\n return () => {\n setCategoryFilter([\n {\n id: '',\n name: 'All',\n },\n ]);\n };\n }, []);\n\n const isPublishref = useRef(true);\n useEffect(() => {\n if (isPublishref.current) {\n isPublishref.current = false;\n return;\n }\n if (PublishData?.data?.status === 200) {\n showSuccess(PublishData?.data?.data?.result);\n }\n }, [PublishData]);\n\n useEffect(() => {\n if (!_.isEmpty(countryData)) {\n if (countryData?.country_slug !== 'southasia') {\n dispatch(\n getStateByCountryRequest({\n requestObj: {\n location_type: LOCATION.State,\n parent_id: countryData?.country_id,\n },\n isCompareLocation: false,\n }),\n );\n }\n }\n }, [countryData]);\n\n useEffect(() => {\n if (Bulletin.isGetAllTemplateListRequesting) {\n setCategoryFilter([\n {\n id: '',\n name: 'All',\n },\n ]);\n } else if (Bulletin?.getAllTemplateListData?.data) {\n if (\n Bulletin?.getAllTemplateListData?.data?.status === 200 &&\n Bulletin?.getAllTemplateListData?.data?.data?.result\n ) {\n // Modifying for setting them as options when creating bulletin\n const modifiedBulletinTypes = Bulletin?.getAllTemplateListData?.data?.data?.result.map(\n bulletin => ({\n ...bulletin,\n label: bulletin.name, // Adding 'label' with value from 'name'\n value: bulletin.name, // Adding 'value' with value from 'name'\n }),\n );\n setCategoryFilter(prev => [...prev, ...modifiedBulletinTypes]);\n } else {\n setCategoryFilter([]);\n }\n }\n }, [Bulletin.getAllTemplateListData, Bulletin.isGetAllTemplateListRequesting]);\n\n useEffect(() => {\n if (Bulletin?.getAllBulletinData?.data) {\n let new_list = [];\n const {\n data: { result },\n } = Bulletin?.getAllBulletinData;\n if (result) {\n if (bulletinList) {\n if (pageNumber > 1) {\n new_list = bulletinList?.concat(result?.results);\n } else {\n new_list = result?.results;\n }\n } else {\n new_list = result?.results;\n }\n setBulletinList(new_list);\n setPageCount(result?.count);\n } else {\n setBulletinList([]);\n }\n }\n }, [Bulletin?.getAllBulletinData]);\n\n useEffect(() => {\n if (Location.countryList) {\n const { result } = Location.countryList;\n if (result?.[0]) {\n let arr = [];\n result.map(i => {\n return arr.push({\n id: i.id,\n name: i.name,\n value: i.name,\n label: i.name,\n region_id: i.region_id,\n latitude: i.latitude,\n longitude: i.longitude,\n zoom_level: i.zoom_level,\n });\n });\n setCountryList(arr);\n }\n }\n }, [Location.countryList]);\n\n useEffect(() => {\n let arr = [];\n if (Location.stateList) {\n let result = '';\n if (Location?.stateList?.data) result = Location?.stateList?.data?.result;\n if (result) {\n result.map(i => {\n return arr.push({\n id: i.id,\n name: i.name,\n value: i.name,\n label: i.name,\n country_id: i.country_id,\n latitude: i.latitude,\n longitude: i.longitude,\n zoom_level: i.zoom_level,\n });\n });\n }\n setStateList(arr);\n }\n }, [Location.stateList]);\n\n useEffect(() => {\n let arr = [];\n if (Location.districtList) {\n let result = '';\n if (Location?.districtList?.data) result = Location?.districtList?.data?.result;\n if (result) {\n result?.map(i => {\n return arr.push({\n id: i.id,\n name: i.name,\n value: i.name,\n label: i.name,\n state_id: i.state_id,\n latitude: i.latitude,\n longitude: i.longitude,\n zoom_level: i.zoom_level,\n });\n });\n }\n setDistrictList(arr);\n }\n }, [Location.districtList]);\n\n useEffect(() => {\n if (!_.isEmpty(Bulletin.getBulletinIndicatorsData)) {\n const { data } = Bulletin.getBulletinIndicatorsData;\n const { result } = data;\n if (result?.length) {\n // Formating Data into required format for settings as options for Select Field\n const formattedOptions = result.map(category => ({\n label: category.category,\n options: category.indices.map(indicesData => ({\n ...indicesData,\n value: indicesData.name,\n label: indicesData.name,\n })),\n }));\n setIndicatorList(formattedOptions);\n }\n }\n }, [Bulletin?.getBulletinIndicatorsData]);\n\n // Fetch bulletins based on page, category, and year\n const fetchBulletins = useCallback(\n (page, payload) => {\n dispatch(getAllBulletinRequest({ page, data: payload }));\n },\n [dispatch],\n );\n\n const handleCreateBulletin = () => {\n setIsOpenBulletin(!isOpenBulletin);\n };\n\n const handleSelectCategory = data => {\n setPageNumber(1);\n setSelectedCategory(data);\n const payload = {\n category_id: data.id,\n is_publish: true,\n };\n\n if (selectedYear) {\n payload.year = selectedYear;\n }\n fetchBulletins(1, payload);\n };\n\n const handleSelectYear = e => {\n setPageNumber(1);\n setSelectedYear(e.target.value);\n const payload = {\n year: e.target.value,\n is_publish: true,\n };\n\n if (selectedCategory.id) {\n payload.category_id = selectedCategory.id;\n }\n fetchBulletins(1, payload);\n };\n\n const fetchNextTemplateData = () => {\n setPageNumber(pageNumber + 1);\n const payload = { is_publish: true };\n\n if (selectedCategory.id) {\n payload.category_id = selectedCategory.id;\n }\n if (selectedYear) {\n payload.year = selectedYear;\n }\n\n fetchBulletins(pageNumber + 1, payload);\n };\n\n return (\n <>\n {isOpenBulletin && (\n {Bulletin.isGetAllBulletinRequesting &&
\n Online Bulletin
{' '}\n{t('BULLET_IN.LOADING')}
\n \n )\n }\n className=\"flex flex-wrap\"\n >\n\n
\n \n ) : (\n _.isEmpty(bulletinList) &&\n !Bulletin.isGetAllBulletinRequesting && (\n \n {bulletinList?.length\n ? bulletinList?.map(data => {\n return
\n {t('BULLET_IN.NO_RECORDS_FOUND')}
\n\n \n
\n
\n \n
\n \n );\n}\n\nexport default BulletinFooter;\n","import React, { useRef } from 'react';\nimport IWMI from '../../../assets/Images/iwmi-logo-tools.svg';\nimport { RxCross2 } from 'react-icons/rx';\n\nfunction BulletinHeader({ headerIcons, setHeaderIcons }) {\n const fileInputRef = useRef(null);\n\n /**\n * to upload header icons\n */\n function uploadSingleFile(e) {\n setHeaderIcons([...headerIcons, URL.createObjectURL(e.target.files[0])]);\n }\n\n const handleUploadHeaderIcon = () => {\n fileInputRef.current.click();\n };\n\n const removeHeaderIcon = e => {\n const updatedHeaders = headerIcons.filter((item, index) => index !== e);\n setHeaderIcons(updatedHeaders);\n };\n\n return (\n \n
\n \n For further information please contact :\n \n {' '}\n wrd@iwmi.org\n \n
\n\n 
\n 
\n
\n \n
\n \n ©\n
\n 
\n {headerIcons?.length\n ? headerIcons.map((icon, index) => (\n handleUploadHeaderIcon()}\n style={headerIcons.length === 2 ? { display: 'none' } : {}}\n className=\"hide-btn\"\n >\n + Add logo{' '}\n
\n );\n}\n\nexport default BulletinHeader;\n","import React, { useEffect } from 'react';\nimport {\n LayerGroup,\n LayersControl,\n MapContainer,\n ScaleControl,\n TileLayer,\n useMapEvents,\n ZoomControl,\n} from 'react-leaflet';\n\nimport myConstClass from '../../../Constants';\nimport CustomLandingPageLegend from '../../new-landing-page/CountrySpecificTool/CustomLandingPageLegend';\nimport DiscreteLandingPageLegend from '../../new-landing-page/CountrySpecificTool/DiscreteLandingPageLegend';\nimport {\n getBulletinDateFormatwithOutSubScript,\n getBulletinMonthFormat,\n} from '../../../Components/helpers';\n\nfunction RenderMapContainer({\n indicatorData,\n indicatorIndex,\n cordinateAndZoom,\n setCordinateAndZoom,\n setMapInstances,\n layerRef,\n indicatorKey,\n mapInstances,\n bulletinData,\n}) {\n const handleUpdateMapSettings = (center, zoom) => {\n setCordinateAndZoom({ center, zoom });\n };\n\n function ChangeView({ center, zoom, updateMapSettings }) {\n const map = useMapEvents({\n zoomend: () => {\n updateMapSettings(map.getCenter(), map.getZoom());\n },\n dragend: () => {\n updateMapSettings(map.getCenter(), map.getZoom());\n },\n });\n\n useEffect(() => {\n map.setView(center, zoom);\n }, [center, zoom, map]);\n\n return null;\n }\n\n const setMapReference = (mapInstance, keyIndex, index) => {\n setMapInstances(prev => ({\n ...prev,\n [`mapInstance${keyIndex}${index}`]: mapInstance,\n }));\n };\n\n return (\n \n 
\n removeHeaderIcon(index)}\n />\n
\n ))\n : null}\n \n
\n );\n}\n\nexport default RenderMapContainer;\n","import { pdf, PDFDownloadLink } from '@react-pdf/renderer';\nimport domtoimage from 'dom-to-image-more';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { FaEdit } from 'react-icons/fa';\nimport { FiCheck } from 'react-icons/fi';\nimport { GrFormClose } from 'react-icons/gr';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport { Button, Col, Container, FormFeedback, Input, Row } from 'reactstrap';\n\nimport RightArrow from '../../../assets/Images/back-button.svg';\nimport IWMI from '../../../assets/Images/iwmi-pdf-header.png';\nimport Loader from '../../../Components/common/loader';\nimport {\n BULLET_IN_HOW_TO_USE,\n BULLETIN_INDICATORS_INFO,\n DROUGHT_PREDICTION_PARAMETER_IDS,\n LOCATION,\n} from '../../../Components/constants';\nimport {\n getBulletinDateFormatwithOutSubScript,\n getBulletinMonthFormat,\n getCoordinatesAndZoom,\n} from '../../../Components/helpers';\nimport { showError, showSuccess } from '../../../Components/Notifications';\nimport {\n addBulletinRequest,\n addBulletinSuccess,\n approveRejectBulletinRequest,\n approveRejectBulletinSuccess,\n bulletinPublishRequest,\n bulletinPublishSuccess,\n} from '../../../redux/actions';\nimport {\n API_BASE_URL,\n AXIOS_INSTANCE,\n AXIOS_INSTANCE_MASTER_SERVER,\n MASTER_SERVER_BASE_URL,\n} from '../../../redux/api/apiEndPoint';\nimport { userDetailRequest } from '../../../redux/user-list/userListAction';\nimport Footer from '../../new-landing-page/Footer';\nimport CreateBulletinModal from '../CreateBulletinModal';\nimport DownloadPdfComponent from '../DownloadPdfComponent';\nimport BulletinFooter from './BulletinFooter';\nimport BulletinHeader from './BulletinHeader';\nimport RenderMapContainer from './RenderMapContainer';\n\nfunction CreateOnlineBulletin() {\n const dispatch = useDispatch();\n const history = useHistory();\n const location = useLocation();\n const layerRef = useRef({});\n const downloadLinkRef = useRef(null);\n const [isOpenBulletin, setIsOpenBulletin] = useState(false);\n const [bulletinData, setBulletinData] = useState({});\n const [isTitleEdit, setIsTitleEdit] = useState(false);\n const [title, setTitle] = useState('');\n const [defaultTitle, setDefaultTitle] = useState('');\n const [bulletInContent, setBulletinContent] = useState(BULLET_IN_HOW_TO_USE);\n const [indicatorsList, setIndicatorList] = useState({});\n const [mapIndex, setMapIndex] = useState(0);\n const [cordinateAndZoom, setCordinateAndZoom] = useState({\n center: '',\n zoom: 6,\n });\n const [mapInstances, setMapInstances] = useState({});\n const [isLayersLoading, setIsLayersLoading] = useState(false);\n const [mapLayersList, setMapLayersList] = useState([]);\n const [mapResponses, setMapResponses] = useState({});\n const [headerIcons, setHeaderIcons] = useState([]);\n const [userDetails, setUserDetails] = useState({});\n const [mapImageUrls, setMapImageUrls] = useState({});\n const [summaryData, setSummaryData] = useState({});\n const [bulletinId, setBulletinId] = useState('');\n const [addMapImageUrls, setAddMapImageUrls] = useState({});\n const [summaryError, setSummaryError] = useState('');\n\n const nextProps = useSelector(state => ({\n userDetailData: state.userList.userDetailData || null,\n userPermissionsData: state.userList.userPermissionsData || null,\n contgencyLogsData: state?.ContingencyPlan?.contgencyLogsData,\n Bulletin: state.Bulletin,\n approveRejectData: state.Bulletin?.approveRejectData,\n bulletinPublishData: state.Bulletin?.bulletinPublishData,\n }));\n\n useEffect(() => {\n // Add a CSS class to the body element when the sideEditor is open\n if (isOpenBulletin || isLayersLoading) {\n document.body.classList.add('no-scroll');\n } else {\n document.body.classList.remove('no-scroll');\n }\n\n // Clean up the effect\n return () => {\n document.body.classList.remove('no-scroll');\n };\n }, [isOpenBulletin, isLayersLoading]);\n\n useEffect(() => {\n return () => {\n setMapInstances({});\n dispatch(addBulletinSuccess({}));\n dispatch(approveRejectBulletinSuccess({}));\n dispatch(bulletinPublishSuccess({}));\n };\n }, []);\n\n useEffect(() => {\n const { formData, newMapIndex, layersList, isTitleEditable } = location.state || {};\n setMapIndex(newMapIndex);\n if (!_.isEmpty(formData)) {\n setBulletinData(formData);\n const bulletinTitle =\n formData?.bulletin_type.value === 'Monthly Bulletin'\n ? `${getBulletinMonthFormat(formData.startDate)}`\n : `${getBulletinDateFormatwithOutSubScript(\n formData.startDate,\n )} -${getBulletinDateFormatwithOutSubScript(formData.endDate)}`;\n if (isTitleEditable) {\n setTitle(bulletinTitle);\n setDefaultTitle(bulletinTitle);\n } else {\n setTitle(''); // or set it to some default value if not editable\n }\n\n const { latitude, longitude, zoom } = getCoordinatesAndZoom(formData);\n\n setCordinateAndZoom({\n center: [latitude, longitude],\n zoom: zoom,\n });\n if (formData?.indicators?.length) {\n setIndicatorList(prev => ({\n ...prev,\n [newMapIndex]: formData?.indicators,\n }));\n }\n if (layersList?.length) {\n setMapLayersList(layersList);\n }\n }\n dispatch(userDetailRequest({}));\n }, [location]);\n\n useEffect(() => {\n if (nextProps.userDetailData) {\n const {\n data: { result },\n } = nextProps.userDetailData;\n if (result?.user) {\n setUserDetails(result?.user);\n }\n }\n }, [nextProps.userDetailData]);\n\n useEffect(() => {\n const fetchMapData = async () => {\n if (!Object.keys(indicatorsList)?.length) return;\n setIsLayersLoading(true);\n const { country, startDate, endDate, state, district } = bulletinData || {};\n const createPayload = item => {\n let payload = {\n api_url: item.api_url,\n country_name: country?.country_name,\n start_date: '',\n end_date: '',\n temporal_aggregation: 'mean',\n };\n\n if (bulletinData?.bulletin_type?.name === 'Monthly Bulletin') {\n payload.start_date = `${startDate}-01`;\n payload.end_date = `${startDate}-${moment(startDate, 'YYYY-MM').daysInMonth()}`;\n } else {\n payload.start_date = startDate;\n payload.end_date = endDate;\n }\n\n if (state) payload.state_name = state.name;\n if (district) payload.district_name = district.name;\n\n return payload;\n };\n\n const MAP_API_URLS = indicatorsList[mapIndex]?.map(async (item, index) => {\n layerRef.current[`${mapIndex}-${index}`] = React.createRef();\n let payload = createPayload(item);\n let instance;\n if (item.master_server) {\n instance = AXIOS_INSTANCE_MASTER_SERVER.post(\n `${MASTER_SERVER_BASE_URL}/${item.api_url}map`,\n payload,\n );\n } else {\n payload.parameter_id = DROUGHT_PREDICTION_PARAMETER_IDS[item.slug];\n if (['drought-prediction/sri', 'drought-prediction/spi'].includes(item.slug)) {\n payload.month = '03';\n }\n\n instance = AXIOS_INSTANCE.post(`${API_BASE_URL}/${item.api_url}map`, payload);\n }\n\n try {\n return await instance;\n } catch (err) {\n return err.response;\n } // Handle errors for individual requests\n });\n try {\n const responses = await Promise.all(MAP_API_URLS);\n const responseCopy = JSON.parse(JSON.stringify(responses));\n const responsesList = responseCopy?.reduce((acc, res) => {\n acc.push(res?.data);\n return acc;\n }, []);\n\n setMapResponses(prev => ({\n ...prev,\n [mapIndex]: responsesList,\n }));\n } catch (err) {\n const errorMessage = _.get(err, 'response.data.message');\n showError(errorMessage);\n } finally {\n setIsLayersLoading(false);\n }\n };\n\n fetchMapData();\n }, [indicatorsList]);\n\n useEffect(() => {\n if (!_.isEmpty(mapResponses)) {\n Object.keys(mapResponses).forEach(responsesIndex => {\n mapResponses[responsesIndex].forEach((mapData, index) => {\n const { result, code, message } = mapData;\n if (code === 200) {\n if (layerRef?.current[`${responsesIndex}-${index}`]?.current !== null) {\n const currentParamRef = layerRef?.current[`${responsesIndex}-${index}`];\n if (currentParamRef && currentParamRef.current !== null) {\n currentParamRef.current?.eachLayer(layer => {\n if (result?.map_data?.map_url) {\n layer.setUrl(result?.map_data?.map_url);\n layer.setOpacity(1);\n }\n });\n }\n\n let legendObj = {};\n legendObj = { ...result?.map_data };\n legendObj.parameter = indicatorsList[responsesIndex][index].name;\n legendObj.measure = '';\n legendObj.dataSource = indicatorsList[responsesIndex][index].category;\n legendObj.isCompare = false;\n legendObj.id = indicatorsList[responsesIndex][index].name;\n legendObj.fromMapPreferences = false;\n legendObj.descret_legend = result?.map_data?.descret_legend;\n legendObj.selectedDates = {\n startDate: moment(bulletinData?.startDate).format('DD-MM-YYYY'),\n endDate: moment(bulletinData?.endDate).format('DD-MM-YYYY'),\n };\n legendObj.add = true;\n\n if (!mapInstances[`legendObj${responsesIndex}${index}`]) {\n setMapInstances(prev => ({\n ...prev,\n [`legendObj${responsesIndex}${index}`]: legendObj,\n }));\n }\n\n if (!_.isEmpty(currentParamRef) && currentParamRef?.current !== null) {\n addLayers(currentParamRef, `${responsesIndex}${index}`);\n }\n }\n } else {\n showError(message);\n }\n });\n });\n }\n }, [mapResponses]);\n\n useEffect(() => {\n if (mapImageUrls && Object.keys(mapImageUrls).length > 0) {\n // Wait for state update to reflect before triggering download pdf\n if (downloadLinkRef.current) {\n setTimeout(() => {\n if (downloadLinkRef.current) {\n downloadLinkRef.current.click();\n }\n }, 2000);\n }\n }\n setIsLayersLoading(false);\n }, [mapImageUrls]);\n\n useEffect(() => {\n if (addMapImageUrls && Object.keys(addMapImageUrls).length > 0) {\n // Wait for state update to reflect before triggering download pdf\n // Delay to ensure images are loaded\n setTimeout(async () => {\n // Step 2: Generate the PDF blob\n const pdfBlob = await generatePdfBlob();\n\n // Create a FileReader instance\n const reader = new window.FileReader();\n const geo_location = bulletinData?.district\n ? bulletinData?.district?.name\n : bulletinData?.state\n ? bulletinData?.state?.name\n : bulletinData?.country?.country_name;\n\n reader.readAsDataURL(pdfBlob);\n reader.onloadend = () => {\n const pdfResult = reader.result;\n const slicedResult = pdfResult.slice(28);\n\n if (pdfResult) {\n const form = new FormData();\n form.append('topic', `${geo_location} ${title}`);\n form.append('bulletin_content', slicedResult);\n form.append('category_id', bulletinData?.bulletin_type?.id);\n dispatch(addBulletinRequest(form));\n }\n };\n }, 2000); // 2-second delay to ensure images are loaded\n handleHideAndShowIcons('initial');\n }\n }, [addMapImageUrls]);\n\n useEffect(() => {\n const { addBulletinDataError, updateBulletinDataError, addBulletinData } =\n nextProps.Bulletin || {};\n\n // Check for error messages\n const message =\n addBulletinDataError?.data?.response?.data?.message ||\n updateBulletinDataError?.data?.response?.data?.message;\n\n if (message) {\n showError(message);\n setIsLayersLoading(false);\n }\n\n // Check if addBulletinData is successful\n const addBulletinDataResponse = addBulletinData?.data;\n if (addBulletinDataResponse) {\n if (addBulletinDataResponse?.data?.id) {\n setBulletinId(addBulletinDataResponse?.data?.id);\n dispatch(\n approveRejectBulletinRequest({\n id: addBulletinDataResponse?.data?.id,\n bulletin_status: '1',\n }),\n );\n }\n setIsLayersLoading(false);\n }\n }, [\n nextProps.Bulletin.addBulletinDataError,\n nextProps.Bulletin.updateBulletinDataError,\n nextProps.Bulletin.addBulletinData,\n dispatch,\n ]);\n\n const isApproveorrejectRef = useRef(true);\n useEffect(() => {\n if (isApproveorrejectRef.current) {\n isApproveorrejectRef.current = false;\n return;\n }\n if (nextProps.approveRejectData?.data?.status === 200) {\n dispatch(bulletinPublishRequest({ id: bulletinId, is_publish: true }));\n }\n }, [nextProps.approveRejectData]);\n\n const isPublishref = useRef(true);\n useEffect(() => {\n if (isPublishref.current) {\n isPublishref.current = false;\n return;\n }\n if (nextProps.bulletinPublishData?.data?.status === 200) {\n showSuccess(nextProps.bulletinPublishData?.data?.data?.result);\n history.push('/online-bulletin');\n }\n }, [nextProps.bulletinPublishData]);\n\n const addLayers = (selectedParamRef, instanceValue) => {\n if (mapInstances[`mapInstance${instanceValue}`] && selectedParamRef.current) {\n const leafletMapRef = mapInstances[`mapInstance${instanceValue}`];\n const firstLayer = selectedParamRef.current;\n [firstLayer].forEach(layer => {\n leafletMapRef.addLayer(layer);\n });\n }\n return false;\n };\n\n const handleBackToSettings = e => {\n e.preventDefault();\n history.push('/online-bulletin');\n };\n\n const changeTitle = () => {\n if (title === '') {\n showError('Title should not be empty!');\n } else {\n setIsTitleEdit(false);\n }\n };\n\n const onChangeBulletin = e => {\n const {\n target: { value: currentValue },\n } = e;\n const currentRows = currentValue.split('\\n');\n const wordCount = currentValue.length;\n if (wordCount < 1200) {\n currentRows?.length < 11 && setBulletinContent(currentValue);\n }\n };\n\n const handleCreateBulletin = () => {\n setIsOpenBulletin(!isOpenBulletin);\n };\n\n const onHandleSummary = (value, keyValue) => {\n const wordCount = value.trim().split(/\\s+/).length; // Count words\n\n if (wordCount > 500) {\n setSummaryError('Maximum 500 words allowed');\n } else {\n setSummaryError('');\n setSummaryData(prev => ({\n ...prev,\n [keyValue]: value,\n }));\n }\n };\n\n const handleHideAndShowIcons = value => {\n const icons = document.getElementsByClassName('hide-btn');\n\n if (value) {\n for (let i = 0; i < icons?.length; i += 1) {\n icons[i].style.display = value;\n }\n }\n };\n\n /**\n * to download as image based on selected element\n */\n const downloadAsImage = () => {\n setIsLayersLoading(true);\n const options = { backgroundColor: '#fcfcfc' };\n const element = document.getElementById('contentToPrint');\n element.style = 'background-color:#fcfcfc';\n handleHideAndShowIcons('none');\n domtoimage\n .toBlob(element, options)\n .then(blob => {\n setIsLayersLoading(false);\n window.saveAs(\n blob,\n `${bulletinData?.bulletin_type?.value}-${\n bulletinData?.district\n ? bulletinData?.district?.name\n : bulletinData?.state\n ? bulletinData?.state?.name\n : bulletinData?.country?.country_name\n }-${title}`,\n );\n element.style = 'background-color:unset';\n handleHideAndShowIcons('initial');\n })\n .catch(() => {\n setIsLayersLoading(false);\n handleHideAndShowIcons('initial');\n showError('Something went wrong');\n });\n };\n\n const getImageUrl = async elementId => {\n const element = document.getElementById(elementId);\n if (element) {\n try {\n const { width, height } = element.getBoundingClientRect(); // Get actual dimensions\n /**\n *Rounding it up in terms of 100\n \n * Height = 100 → Rounded Height = 100\n * Height = 150 → Rounded Height = 200\n */\n const roundedHeight = Math.ceil(height / 100) * 100;\n const imageUrl = await domtoimage.toPng(element, {\n width: Math.ceil(width), // Ensure width is a whole number\n height: roundedHeight, // Ensure height is a whole number\n style: {\n transform: null, // Reset transformation styles\n },\n });\n return imageUrl;\n } catch (error) {\n console.error('Error converting element to image:', error);\n return ''; // Handle error\n }\n }\n return ''; // Handle no element found\n };\n\n const fetchImageUrls = async () => {\n let urls = {};\n let imageData = [];\n\n // Ensure indicatorsList is defined and has keys\n if (indicatorsList && Object.keys(indicatorsList).length > 0) {\n imageData = await Promise.all(\n Object.keys(indicatorsList).map(async indicatorKey => {\n const elementId = `map-component[${indicatorKey}]`;\n return await getImageUrl(elementId);\n }),\n );\n } else {\n console.error('indicatorsList is either undefined or empty');\n }\n if (imageData?.length) {\n urls = Object.assign({}, imageData);\n }\n\n return urls;\n };\n\n const handleDownloadPdf = async () => {\n setIsLayersLoading(true);\n const imageUrls = await fetchImageUrls();\n\n if (imageUrls && Object.keys(imageUrls).length > 0) {\n setMapImageUrls(imageUrls); // Ensure image URLs are set\n } else {\n console.error('No maps available to export');\n }\n };\n\n const generatePdfBlob = async () => {\n // eslint-disable-next-line no-return-await\n return await pdf(\n \n \n setMapReference(mapInstance.target, indicatorKey, indicatorIndex)\n }\n >\n \n \n \n \n \n
\n \n
\n Indicator Name : {indicatorData?.name}
\n\n Region: \n
\n \n {bulletinData?.country?.country_name}\n {bulletinData?.state ? `${bulletinData?.state?.name}, ` : ''}\n {bulletinData?.district ? `${bulletinData?.district?.name}, ` : ''}\n {`(${\n bulletinData?.bulletin_type?.value === 'Monthly Bulletin'\n ? getBulletinMonthFormat(bulletinData.startDate)\n : `${getBulletinDateFormatwithOutSubScript(bulletinData?.startDate)} - \n ${getBulletinDateFormatwithOutSubScript(bulletinData?.endDate)}`\n })`}\n \n
\n \n \n \n )}\n \n
\n handleBackToSettings(e)}>\n {' '}\n Create Bulletin\n
\n
\n \n
\n \n \n {isTitleEdit ? (\n
\n
\n {bulletinData?.bulletin_type?.value}
\n\n {isTitleEdit ? (\n \n setTitle(e.target.value)}\n defaultValue={defaultTitle}\n maxLength={50}\n />\n changeTitle()}\n className=\"cursor-pointer green-icon mx-2 mt-1\"\n />\n {\n setTitle(title);\n setIsTitleEdit(false);\n }}\n />\n \n ) : (\n \n Bulletin Report : {title || defaultTitle}\n setIsTitleEdit(true)}\n />\n \n )}\n
\n \n
\n \n Prepared on : {moment(new Date()).format('Do MMM YYYY')}\n
\n\n Prepared by : {userDetails?.username}\n
\n\n
\n {Object.keys(indicatorsList)?.length\n ? Object.keys(indicatorsList)?.map(indicatorKey => {\n return (\n <>\n How to use the bulletin
\n\n\n \n
\n Indicator summary
\n\n {indicatorsList[indicatorKey]?.map((indicators, index) => {\n return (\n \n {renderMapContainer(\n indicators,\n index,\n indicatorKey,\n cordinateAndZoom,\n setCordinateAndZoom,\n setMapInstances,\n layerRef,\n mapInstances,\n bulletinData,\n )}\n \n );\n })}\n
\n \n \n {indicators.name} :{' '}\n \n {BULLETIN_INDICATORS_INFO[indicators.name]}\n \n {/* editInfo(`${indicatorKey}.${indicators.name}`)}\n /> */}\n \n );\n })}\n
\n \n Indicator Basic Info:\n
\n {indicatorsList[indicatorKey]?.map(indicators => {\n return (\n\n \n {isLayersLoading ? (\n onHandleSummary(e.target.value, indicatorKey)}\n placeholder=\"Write down something... (Max: 500 words)\"\n invalid={!!summaryError}\n />\n {summaryError && (\n \n {summaryError}\n \n )}\n \n )}\n
\n \n );\n })\n : null}\n \n Summary of current condition :\n
\n{summaryData[indicatorKey]}
\n ) : (\n <>\n\n {'Management'}\n
\n {'System'}\n ,\n );\n const [subHeadingList, setSubHeadingList] = useState();\n const dispatch = useDispatch();\n const [selectedDataSourceId, setSelectedDataSourceId] = useState();\n const [isDefaultSelectedSourceId, setIsDefaultSelectedSourceId] = useState(false);\n const [dataModal, setDataModal] = useState(false);\n const [countryData, setCountryData] = useState({});\n\n const togglePopUp = () => setDataModal(!dataModal);\n const URLParams = new URLSearchParams(window.location.search);\n const queryCountry = URLParams.get('Country');\n const toggle = () => setIsOpen(!isOpen);\n const dropdownToggle = () => setDropdownOpen(prevState => !prevState);\n const isUserLoggedIn = !!Cookies.get('user');\n const isLoginHidden = loginInHidden.includes(window.location.pathname);\n\n const TOOLS_MENU = [\n {\n name: t('LANDING_PAGE.MONITORING_EARLY_WARNING'),\n path: '/tools?selectedTool=monitoring_early_warning',\n },\n { name: t('LANDING_PAGE.RISK_IMPACT'), path: '/tools?selectedTool=risk_impact', subMenu: [] },\n {\n name: t('LANDING_PAGE.RISK_MITIGATION'),\n path: '/tools?selectedTool=risk_mitigation',\n },\n ];\n\n const COUNTRY_SPECIFIC_TOOLS_MENU = [\n {\n name: t('LANDING_PAGE.DROUGHT_INSIGHTS'),\n path: {\n pathname: `/drought-management-system`, // The page where the sections exist\n hash: '#drought-insigths', // Add the hash to navigate to the section\n search: `?Country=${queryCountry}`,\n state: {\n countryData: countryData,\n },\n },\n },\n // {\n // name: t('LANDING_PAGE.RISK_IMPACT'),\n // path: {\n // pathname: `/drought-management-system`, // The page where the sections exist\n // hash: '#drought-alerts', // Add the hash to navigate to the section\n // search: `?Country=${queryCountry}`,\n // state: {\n // countryData: countryData,\n // },\n // },\n // },\n ];\n\n useEffect(() => {\n // ! COMMENTING HEADER TRANSPERANCY FUNCTIONALITY\n // const handleScroll = () => {\n // const header = document.querySelector('.header-navbar');\n // if (window.scrollY > 370) {\n // header.classList.add('scroll-active');\n // } else {\n // header.classList.remove('scroll-active');\n // }\n // };\n\n // window.addEventListener('scroll', handleScroll);\n\n dispatch(getDmsPillarsRequest({}));\n\n // return () => {\n // window.removeEventListener('scroll', handleScroll);\n // };\n }, []);\n\n const { LandingPageData } = useSelector(state => ({\n LandingPageData: state.Home,\n }));\n\n const setDocumentTitle = countryName => {\n document.title = countryName\n ? `${countryName} Drought Monitor | IWMI`\n : 'Drought Monitor | IWMI';\n };\n\n useEffect(() => {\n if (LandingPageData?.getDmsPillarsData) {\n const { result } = LandingPageData.getDmsPillarsData.data || {};\n\n const earlyWarningPillar = result?.find(\n pillar => pillar?.pillar_type === 'monitoring_early_warning',\n );\n\n let selectedCountry;\n const countryInfo = localStorage.getItem('selectedCountry');\n // Convert the JSON string back to an object\n const countrySpecificData = JSON.parse(countryInfo);\n if (countrySpecificData) {\n selectedCountry = earlyWarningPillar?.values?.find(\n value => value?.country_slug === countrySpecificData,\n );\n } else {\n selectedCountry = earlyWarningPillar?.values?.find(\n value => value?.country_slug === queryCountry,\n );\n }\n if (selectedCountry) {\n localStorage.setItem('countryData', JSON.stringify(selectedCountry));\n localStorage.setItem('selectedCountry', JSON.stringify(selectedCountry?.country_slug));\n setCountryData(selectedCountry);\n setDocumentTitle(selectedCountry?.country_name);\n } else {\n setCountryData({});\n setDocumentTitle();\n localStorage.setItem('countryData', JSON.stringify({}));\n }\n }\n }, [LandingPageData.getDmsPillarsData, queryCountry]);\n\n useEffect(() => {\n let selectedSytem;\n if (!_.isEmpty(countryData)) {\n if (countryData.country_name === null || countryData.country_name === undefined) {\n selectedSytem = (\n <>\n {'Drought'}\n
\n {'Management'}\n
\n {'System'}\n \n );\n } else if (countryData.country_name) {\n selectedSytem = (\n <>\n {`${countryData.country_name} Drought`}\n
\n {'Management'}\n
\n {'System'}\n \n );\n }\n } else {\n selectedSytem = (\n <>\n {'Drought'}\n
\n {'Management'}\n
\n {'System'}\n \n );\n }\n setSystemType(selectedSytem);\n }, [countryData]);\n\n const handleChangePassword = () => {\n history.push('/change-password');\n };\n\n const redirectToDashBoard = () => {\n history.push('/settingsDashboard');\n };\n\n const handleLogout = () => {\n handleLogoutRedirect();\n if (_.isEmpty(countryData)) {\n history.push('/home');\n const country = JSON.stringify({});\n localStorage.setItem('countryData', country);\n localStorage.setItem('selectedCountry', JSON.stringify(''));\n setCountryData({});\n } else {\n const countrySlug = countryData?.country_slug;\n\n if (countrySlug === 'southasia') {\n // Special case handling for South Asia\n history.push('/home');\n const country = JSON.stringify({});\n localStorage.setItem('countryData', country);\n localStorage.setItem('selectedCountry', JSON.stringify(''));\n setCountryData({});\n } else {\n const sanitizedCountryData = { ...countryData };\n\n history.push({\n pathname: `/drought-management-system`,\n search: `?Country=${encodeURIComponent(countrySlug)}`,\n state: { countryData: sanitizedCountryData },\n });\n }\n }\n // history.push('login');\n // localStorage.setItem('countryData', JSON.stringify({}));\n // setCountryData({});\n };\n\n useEffect(() => {\n if (Routes) {\n let a = [];\n Routes.forEach(i => {\n if (i.visible) {\n a.push(i);\n }\n });\n setSubHeadingList(a);\n }\n }, [Routes]);\n\n const checkPages = () => {\n return (\n window.location.href.indexOf('home') === -1 &&\n window.location.href.indexOf('register') === -1 &&\n window.location.href.indexOf('login') === -1 &&\n window.location.href.indexOf('forgot-password') === -1 &&\n window.location.href.indexOf('reset-password') === -1 &&\n window.location.href.indexOf('change-password') === -1 &&\n window.location.href.indexOf('ManageCrops') === -1 &&\n window.location.href.indexOf('drought-management-system') === -1 &&\n window.location.href.indexOf('tools') === -1 &&\n window.location.href.indexOf('partners-donors') === -1 &&\n window.location.href.indexOf('news-events-reports') === -1 &&\n window.location.href.indexOf('contact-us') === -1 &&\n window.location.href.indexOf('about-us') === -1\n );\n };\n\n const handleMenuClick = (data, e) => {\n if (data.name === 'Public API') {\n history.push(isSuperAdmin() ? '/public-api' : data.path);\n } else if (data.name === 'Drought Management' && countryData) {\n // Handling Drought Management navigation\n const result = countryData.country_slug;\n const sanitizedCountryData = { ...countryData }; // Spread to create a shallow copy\n\n history.push({\n pathname: '/drought-monitor',\n search: `?Country=${encodeURIComponent(result)}&key=drought-monitor`,\n state: { countryData: sanitizedCountryData },\n });\n\n localStorage.setItem('countryData', JSON.stringify(sanitizedCountryData));\n } else if (data.name === 'Home' && countryData) {\n if (_.isEmpty(countryData)) {\n history.push('/home');\n const country = JSON.stringify({});\n localStorage.setItem('countryData', country);\n localStorage.setItem('selectedCountry', JSON.stringify(''));\n setCountryData({});\n } else {\n const countrySlug = countryData?.country_slug;\n\n if (countrySlug === 'southasia') {\n // Special case handling for South Asia\n history.push(data.path);\n const country = JSON.stringify({});\n localStorage.setItem('countryData', country);\n localStorage.setItem('selectedCountry', JSON.stringify(''));\n setCountryData({});\n } else {\n const sanitizedCountryData = { ...countryData };\n history.push({\n pathname: `/drought-management-system`,\n search: `?Country=${encodeURIComponent(countrySlug)}`,\n state: { countryData: sanitizedCountryData },\n });\n }\n }\n } else {\n history.push(data.path);\n }\n };\n\n useEffect(() => {\n if (selectedDataSourceId) {\n if (countryData !== undefined) {\n let result = countryData.country_slug;\n\n history.push({\n pathname: '/weather-forecast',\n search: `?Country=${result}&dataSourceId=${selectedDataSourceId}&isDefaultSelectedSourceId=${isDefaultSelectedSourceId}`,\n state: {\n countryData: countryData,\n },\n });\n\n const country = JSON.stringify(countryData);\n localStorage.setItem('countryData', country);\n }\n }\n }, [selectedDataSourceId]);\n\n const handleSubCategory = (value, type, e) => {\n // let result;\n if (countryData !== undefined) {\n let result = countryData.country_slug;\n\n if (value === selectedDataSourceId) {\n history.push({\n pathname: '/weather-forecast',\n search: `?Country=${result}&dataSourceId=${selectedDataSourceId}&isDefaultSelectedSourceId=${isDefaultSelectedSourceId}`,\n state: {\n countryData: countryData,\n },\n });\n\n const country = JSON.stringify(countryData);\n localStorage.setItem('countryData', country);\n setIsDefaultSelectedSourceId(true);\n } else {\n setIsDefaultSelectedSourceId(true);\n setSelectedDataSourceId(value);\n }\n }\n };\n\n const handleRedirectToHome = () => {\n window.scrollTo(0, 0);\n history.push('/home');\n const country = JSON.stringify({});\n localStorage.setItem('countryData', country);\n localStorage.setItem('selectedCountry', JSON.stringify(''));\n setCountryData({});\n toggle();\n };\n\n const onHandleLogin = () => {\n if (queryCountry && window.location.pathname === countrySpecificScreenRoute) {\n history.push({\n pathname: `/login`,\n search: `?Country=${queryCountry}&prevPath=drought-monitor`,\n state: {\n countryData: countryData,\n },\n });\n } else {\n history.push('/login');\n }\n };\n /**\n * Hiding Login Button. because we cannot control redirection of login system for small devices\n *\n */\n\n const renderLoginButton = () => {\n return (\n <>\n
- \n {TOOLS_MENU.map(tool => (\n
- \n
\n {checkPages() && (\n \n \n \n )}\n
\n \n );\n};\n\nexport default NavbarComponent;\n","// eslint-disable-next-line no-unused-vars\nimport React, { useEffect, useState, Fragment } from 'react';\nimport { Route, Switch, Redirect, withRouter, useLocation } from 'react-router-dom';\nimport { toast } from 'react-toastify';\nimport { Container } from 'reactstrap';\nimport NewHeader from '../Components/common/Navbar';\nimport Routes from '../routes/routes';\nimport { ToastContainer } from 'react-toastify';\nimport ReactGA from 'react-ga4';\n\nif (window.location.hostname === 'dmsdemo.iwmi.org') ReactGA.initialize('G-52F4LBVC73');\n\nconst Layout = () => {\n // eslint-disable-next-line no-unused-vars\n const [isLoaderVisible, setIsLoaderVisible] = useState(false);\n const setLoader = isLoading => {\n setIsLoaderVisible(isLoading);\n };\n const location = useLocation();\n\n // Dismiss all notifications when the route changes\n useEffect(() => {\n toast.dismiss();\n }, [location]);\n\n useEffect(() => {\n setIsLoaderVisible(false);\n setLoader();\n }, []);\n\n useEffect(() => {\n if (window.location.hostname === 'dmsdemo.iwmi.org')\n ReactGA.send({\n hitType: 'pageview',\n page: window.location.pathname + window.location.search,\n });\n });\n\n const getRoutes = routeItems => {\n const routes = routeItems.map((prop, key) => {\n return (\n \\s*<\\/p>/g, '');\n return (\n \n {EventDateFormatter(dataItem.from_date)} - {EventDateFormatter(dataItem.to_date)}\n \n {EventTimeFormatter(dataItem.start_time)} - {EventTimeFormatter(dataItem.end_time)}\n {dataItem.location} {t('LANDING_PAGE.MONITORING_EARLY_WARNING_DESC')} {t('LANDING_PAGE.RISK_IMPACT_DESC')} {t('LANDING_PAGE.RISK_MITIGATION_DESC')} {t('HOME_PAGE.KEEP_IN_TOUCH')}\n )}\n
{' '}\n
{' '}\n
{' '}\n
\n
\n DMS\n Drought Monitoring System\n \n
\n {getHeading(dataType, title)}
{' '}\n {title === 'Events' ? (\n \n \n ) : null}\n \n \n \n \n \n );\n};\n\nexport default Footer;\n","export default __webpack_public_path__ + \"static/media/banner-image-1.7b35a4bf.jpg\";","export default __webpack_public_path__ + \"static/media/banner-image-2.3a4b35c6.jpeg\";","export default __webpack_public_path__ + \"static/media/banner-image-3.8e68862d.jpg\";","export default __webpack_public_path__ + \"static/media/banner-image-4.361afc5b.JPG\";","export default __webpack_public_path__ + \"static/media/banner-image-5.315e511f.jpg\";","import classnames from 'classnames';\nimport React, { useEffect, useState } from 'react';\nimport { t } from 'react-multi-lang';\nimport { Carousel, CarouselCaption, CarouselControl, CarouselItem } from 'reactstrap';\nimport BannerImage1 from '../../assets/Images/banner-image-1.jpg';\nimport BannerImage2 from '../../assets/Images/banner-image-2.jpeg';\nimport BannerImage3 from '../../assets/Images/banner-image-3.jpg';\nimport { default as BannerImage4 } from '../../assets/Images/banner-image-4.JPG';\nimport BannerImage5 from '../../assets/Images/banner-image-5.jpg';\n\nconst HeroCarousel = () => {\n const [activeIndex, setActiveIndex] = useState(0);\n const [animating, setAnimating] = useState(false);\n const [isPaused, setIsPaused] = useState(false);\n\n const items = [\n {\n src: BannerImage1,\n altText: 'Slide 1',\n captionText: t('LANDING_PAGE.BANNER_TEXT_1'),\n },\n {\n src: BannerImage2,\n altText: 'Slide 2',\n captionText: t('LANDING_PAGE.BANNER_TEXT_2'),\n },\n {\n src: BannerImage3,\n altText: 'Slide 3',\n captionText: t('LANDING_PAGE.BANNER_TEXT_3'),\n },\n {\n src: BannerImage4,\n altText: 'Slide 4',\n captionText: t('LANDING_PAGE.BANNER_TEXT_4'),\n },\n {\n src: BannerImage5,\n altText: 'Slide 5',\n captionText: t('LANDING_PAGE.BANNER_TEXT_5'),\n },\n ];\n\n // Handle visibility change events\n useEffect(() => {\n const handleVisibilityChange = () => {\n if (document.hidden) {\n setIsPaused(true);\n } else {\n setIsPaused(false);\n }\n };\n\n document.addEventListener('visibilitychange', handleVisibilityChange);\n\n return () => {\n document.removeEventListener('visibilitychange', handleVisibilityChange);\n };\n }, []);\n\n const next = () => {\n if (animating) return;\n const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;\n setActiveIndex(nextIndex);\n };\n\n const previous = () => {\n if (animating) return;\n const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;\n setActiveIndex(nextIndex);\n };\n\n const goToIndex = newIndex => {\n if (animating) return;\n setActiveIndex(newIndex);\n };\n\n const slides = items.map((item, index) => (\n \n
\n {queryCountry === 'india' ? (\n
\n ) : null}\n \n
Follow Us
\n \n \n \n ©\n 2024 International Water Management Institute (IWMI)\n \n \n \n
{item.captionText}
*/}\n \n ));\n\n return (\n \n {items.map((item, index) => (\n
\n {slides}\n