\r\n Map\r\n
*/}\r\n \r\n )\r\n \r\n const SatImgBox = () => (\r\n Satellite
*/}\r\n \r\n )\r\n\r\n \r\n return (\r\n props.showMapSwitcher \r\n ?\r\n {showTile ?
\r\n : null\r\n );\r\n}\r\n\r\nexport default MapSwitcher;","import React, { useRef, useEffect, useState } from \"react\";\r\nimport Basemap from \"@arcgis/core/Basemap\";\r\nimport ImageryLayer from \"@arcgis/core/layers/ImageryLayer\";\r\nimport Map from \"@arcgis/core/Map\";\r\nimport MapImageLayer from \"@arcgis/core/layers/MapImageLayer\";\r\nimport VectorTileLayer from \"@arcgis/core/layers/VectorTileLayer\";\r\nimport TileLayer from \"@arcgis/core/layers/TileLayer\";\r\nimport { connect } from \"react-redux\";\r\nimport FeatureLayer from \"@arcgis/core/layers/FeatureLayer\";\r\nimport { appConifg } from \"../../config/default\";\r\n//import esriConifg from '@arcgis/core/config'\r\nimport GraphicsLayer from \"@arcgis/core/layers/GraphicsLayer\";\r\nimport Graphic from \"@arcgis/core/Graphic\";\r\nimport Locator from \"@arcgis/core/tasks/Locator\";\r\nimport QueryTask from \"@arcgis/core/tasks/QueryTask\";\r\nimport Query from \"@arcgis/core/tasks/support/Query\";\r\nimport GeometryService from \"@arcgis/core/tasks/GeometryService\";\r\nimport * as esriCoreUrlUtils from \"@arcgis/core/core/urlUtils\";\r\nimport Point from \"@arcgis/core/geometry/Point\";\r\nimport TextSymbol from \"@arcgis/core/symbols/TextSymbol\";\r\nimport Polygon from \"@arcgis/core/geometry/Polygon\";\r\nimport Extent from \"@arcgis/core/geometry/Extent\";\r\nimport * as geometryEngine from \"@arcgis/core/geometry/geometryEngine\";\r\nimport SpatialReference from \"@arcgis/core/geometry/SpatialReference\";\r\nimport * as esriProject from \"@arcgis/core/geometry/projection\";\r\n//import { load, project as esriProject } from '@arcgis/core/geometry/projection'\r\nimport MapView from \"@arcgis/core/views/MapView\";\r\nimport BaseMapGallery from \"@arcgis/core/widgets/BasemapGallery\";\r\nimport LayerList from \"@arcgis/core/widgets/LayerList\";\r\nimport ScaleBar from \"@arcgis/core/widgets/ScaleBar\";\r\nimport Home from \"@arcgis/core/widgets/Home\";\r\nimport Expand from \"@arcgis/core/widgets/Expand\";\r\nimport Locate from \"@arcgis/core//widgets/Locate\";\r\nimport esriConfig from \"@arcgis/core/config.js\";\r\nimport MapSearchbar from \"../MapSearch/MapSearchbar\";\r\nimport DrawerIcons from \"./drawerIcons\";\r\nimport { isMobile, isTablet, isMobileOnly } from \"react-device-detect\";\r\nimport { searchAddressByParcelId } from \"../MapSearch/MapSearchbar\";\r\nimport MapActions from \"./mapActions\";\r\n// to identify conflict\r\nimport { RAK_BOUNDARY_JSON_4326 } from \"./rakBoundaryGeom\";\r\nimport {\r\n getStreetDetails,\r\n getAddressDetials,\r\n getPostalAreaDetails,\r\n getAreaDetails,\r\n getAddressDetailsFromParcelId,\r\n} from \"../../serviceClients/addressingClient\";\r\nimport {\r\n addressDetailsMapper,\r\n addressingApiResponseMapper,\r\n} from \"../mappers/addressingMappers\";\r\nimport {\r\n const_address_point_symbol,\r\n const_isssue_address_point,\r\n const_address_parcel_graphic_symbol,\r\n const_address_area_symbol,\r\n const_address_line_street_symbol,\r\n const_not_found_point_symbol,\r\n const_txt_symobl_for_graphics,\r\n} from \"./addressConfigUtils\";\r\n//Other Utilty Methods and Variables\r\n\r\n//Actions import\r\nimport {\r\n fetchAddressDetailsRequest,\r\n fetchAdressDetailsSuccess,\r\n fetchAddressDetailsFailure,\r\n clearAddressDetails,\r\n} from \"../../redux/reducers/addressDetailsReducer\";\r\n\r\nimport {\r\n fetchAddressResultSuccess,\r\n fetchAddressResultFailure,\r\n fetchAddressResultRequest,\r\n clearAddressResult,\r\n} from \"../../redux/actions/addressingResultActions\";\r\nimport {\r\n setSidePanelStatusAndResultType,\r\n setSidePanelopen,\r\n} from \"../../redux/actions/mapPanelControlActions\";\r\n\r\nimport { useDispatch } from \"react-redux\";\r\nimport TranspController from \"./TranspController\";\r\nimport MapSwitcher from \"./MapSwitcher\";\r\n//import AddressSearchBar from \"../AddressSearch/AddressSearchBar\";\r\n\r\n/* \r\n Reading from App Configuration */\r\nconst _PROXY_URL = appConifg.ProxyUrl;\r\nconst _AERIAL_IMAGERY = appConifg.Map.AerialImagery;\r\nconst _TOKEN_URL = appConifg.Map.TokenUrl;\r\nconst _PORTAL_USER_NAME = appConifg.Map.PortalUserName;\r\nconst _PORTAL_PASSWORD = appConifg.Map.PortalPassword;\r\nconst _APP_REFERER = appConifg.Map.AppReferer;\r\nconst _LOCATOR_SERVICE_URL = appConifg.Address.LocatorServiceUrl;\r\nconst _PARCEL_SERVICE_URL = appConifg.Address.ParcelServiceUrl;\r\nconst _POINT_ADDRESS_SERVICE_URL = appConifg.Address.PointAddressServiceUrl;\r\nconst _GEOMETRY_SERVICE_URL = appConifg.Address.GeometryServiceUrl;\r\nconst _RAK_STREETS_TILE_En = appConifg.Address.RakStreetsTileEnglish;\r\nconst _RAK_STREETS_TILE_Ar = appConifg.Address.RakStreetsTileArabic;\r\nconst _RAK_STREETS_MAP_En = appConifg.Address.RakStreetsMapEnglish;\r\nconst _RAK_STREETS_MAP_Ar = appConifg.Address.RakStreetsMapArabic;\r\nconst _RAK_BOUNDARY_MAP_En = appConifg.Address.RakBoundaryMapEnglish;\r\nconst _RAK_BOUNDARY_MAP_Ar = appConifg.Address.RakBoundarysMapArabic;\r\n\r\nconst option2Url =\r\n \"https://rakgisstg.rak.ae/server/rest/services/Addressing/AddressMapImageHollowV1/MapServer\";\r\nconst option3Url =\r\n \"https://rakgisstg.rak.ae/server/rest/services/Addressing/AddressMapImageHollowV2/MapServer\";\r\n\r\n//esri Configuration ---\r\nesriConfig.assetsPath = \"./assets\";\r\n\r\n// //esriConfig.request.proxyUrl = _PROXY_URL //not working\r\n// //esriConfig.request.proxyRules = proxy_rules //not working but working with urlUtils\r\nconst proxy_rules = [\r\n {\r\n urlPrefix: _AERIAL_IMAGERY,\r\n proxyUrl: _PROXY_URL,\r\n },\r\n {\r\n urlPrefix: _LOCATOR_SERVICE_URL,\r\n proxyUrl: _PROXY_URL,\r\n },\r\n {\r\n urlPrefix: _POINT_ADDRESS_SERVICE_URL,\r\n proxyUrl: _PROXY_URL,\r\n },\r\n {\r\n urlPrefix: _GEOMETRY_SERVICE_URL,\r\n proxyUrl: _PROXY_URL,\r\n },\r\n];\r\n//Add Proxy_rules to esriConfig\r\n//proxy_rules.forEach(item=> {esriCoreUrlUtils.addProxyRule(item)})\r\nesriCoreUrlUtils.addProxyRule(proxy_rules[0]);\r\nesriCoreUrlUtils.addProxyRule(proxy_rules[1]);\r\nesriCoreUrlUtils.addProxyRule(proxy_rules[2]);\r\nesriCoreUrlUtils.addProxyRule(proxy_rules[3]);\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: _RAK_STREETS_TILE_En,\r\n proxyUrl: _PROXY_URL,\r\n});\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: _RAK_STREETS_MAP_En,\r\n proxyUrl: _PROXY_URL,\r\n});\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: _RAK_STREETS_MAP_Ar,\r\n proxyUrl: _PROXY_URL,\r\n});\r\n\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: _RAK_STREETS_TILE_Ar,\r\n proxyUrl: _PROXY_URL,\r\n});\r\n\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: _RAK_BOUNDARY_MAP_En,\r\n proxyUrl: _PROXY_URL,\r\n});\r\n\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: _RAK_BOUNDARY_MAP_Ar,\r\n proxyUrl: _PROXY_URL,\r\n});\r\n\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: option2Url,\r\n proxyUrl: _PROXY_URL,\r\n});\r\n\r\nesriCoreUrlUtils.addProxyRule({\r\n urlPrefix: option3Url,\r\n proxyUrl: _PROXY_URL,\r\n});\r\n\r\nlet view = null;\r\n\r\n/* For Adding Layers Individually */\r\n/*1 Constrction BaseMap with Aeiral Imagery */\r\nconst ae2019ImgLyr = new ImageryLayer({\r\n url: _AERIAL_IMAGERY,\r\n});\r\n\r\nconst Rak_Boundary_Geom_4326 = Polygon.fromJSON(RAK_BOUNDARY_JSON_4326);\r\n\r\nconst ae2019BaseMap = new Basemap({\r\n baseLayers: [ae2019ImgLyr],\r\n title: \"Aerial Imagery 2019\",\r\n id: \"ae2019\",\r\n});\r\n\r\nlet initialExtent = new Extent({\r\n ymax: 2990773.05734144,\r\n xmin: 6128491.02770031,\r\n xmax: 6370106.22272346,\r\n ymin: 2867470.43283262,\r\n spatialReference: new SpatialReference({ wkid: 102100 }),\r\n});\r\n\r\nvar map = new Map({\r\n basemap: ae2019BaseMap,\r\n //basemap: \"satellite\", //satellite streets\r\n});\r\n\r\nconst RAKMapAerialBaseMap = new Map({\r\n basemap: ae2019BaseMap,\r\n});\r\n\r\nconst EsriSatelliteBaseMap = new Map({\r\n basemap: \"satellite\",\r\n});\r\n\r\nconst homeWidget = new Home({});\r\nconst basemapGallery = new BaseMapGallery({});\r\nconst scaleBar = new ScaleBar({ style: \"line\", unit: \"dual\" });\r\nconst layerList = new LayerList({});\r\nconst layerListExpand = new Expand({\r\n expandIconClass: \"esri-icon-layer-list\",\r\n content: layerList,\r\n});\r\n\r\n//Construction A Graphic Layer\r\nconst mapGraphicLayer = new GraphicsLayer({\r\n id: \"gl_addressing_01\",\r\n title: \"Address_gl\",\r\n listMode: \"hide\",\r\n});\r\n\r\n// const rak_streetsLyrEn = new VectorTileLayer({\r\n// url: _RAK_STREETS_TILE_En,\r\n// id: \"rak_streets_tile_en\",\r\n// visible: true,\r\n// });\r\n\r\n// const rak_streetsLyrAr = new VectorTileLayer({\r\n// url: _RAK_STREETS_TILE_Ar,\r\n// id: \"rak_streets_tile_ar\",\r\n// visible: true,\r\n// });\r\n\r\n//Change the Street Lyr is always visible and (appers as it is stick to the Aerial Imagery - so seperate Map Service is published)\r\nconst rak_streetsLyrEn = new MapImageLayer({\r\n url: _RAK_STREETS_MAP_En,\r\n id: \"rak_streets_tile_en\",\r\n visible: true,\r\n //,\r\n // sublayers: [\r\n // {\r\n // id: 1,\r\n // visible: true\r\n // }, {\r\n // id: 2,\r\n // visible: true\r\n // }, {\r\n // id: 3,\r\n // visible: true\r\n // }, {\r\n // id: 4,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 5,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 6,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 7,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 8,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 9,\r\n // visible: true\r\n // }\r\n // ] //Hiding Area and UAE Boundary\r\n});\r\nconst rak_streetsLyrAr = new MapImageLayer({\r\n url: _RAK_STREETS_MAP_Ar,\r\n id: \"rak_streets_tile_ar\",\r\n visible: true,\r\n //,\r\n // sublayers: [\r\n // {\r\n // id: 1,\r\n // visible: true\r\n // }, {\r\n // id: 2,\r\n // visible: true\r\n // }, {\r\n // id: 3,\r\n // visible: true\r\n // }, {\r\n // id: 4,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 5,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 6,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 7,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 8,\r\n // visible: true\r\n // },\r\n // {\r\n // id: 9,\r\n // visible: true\r\n // }\r\n // ] //Hiding Area and UAE Boundary\r\n});\r\n\r\nconst emirate_boundaryLyrEn = new MapImageLayer({\r\n url: _RAK_BOUNDARY_MAP_En,\r\n id: \"emirate_boundary_en\",\r\n visible: true,\r\n});\r\n\r\nconst emirate_boundaryLyrAr = new MapImageLayer({\r\n url: _RAK_BOUNDARY_MAP_Ar,\r\n id: \"emirate_boundary_ar\",\r\n visible: true,\r\n});\r\n\r\n// Try Base Map-----Map Service\r\n// const rak_streetsLyrEn = new MapImageLayer({\r\n// url: _RAK_STREETS_TILE_En,\r\n// id: \"rak_streets_tile_en\",\r\n// visible: true,\r\n// });\r\n\r\n// const rak_streetsLyrAr = new MapImageLayer({\r\n// url: _RAK_STREETS_TILE_Ar,\r\n// id: \"rak_streets_tile_ar\",\r\n// visible: true,\r\n// });\r\n\r\nconst option2Service = new MapImageLayer({\r\n url: option2Url,\r\n id: \"rak_streets_tile_en\",\r\n});\r\n\r\nconst option3Service = new MapImageLayer({\r\n url: option3Url,\r\n id: \"rak_streets_tile_en\",\r\n});\r\n\r\n//create locator\r\n// Find address\r\nconst locatorTask = new Locator({\r\n url: _LOCATOR_SERVICE_URL,\r\n});\r\n\r\nconst geometryServiceTask = new GeometryService({ url: _GEOMETRY_SERVICE_URL });\r\n\r\n\r\n// }\r\n\r\nconst hasValue = (obj) => {\r\n if (!obj) return false;\r\n if (typeof obj === \"object\") {\r\n return Object.keys(obj).length > 0;\r\n } else if (Array.isArray(obj)) {\r\n return obj.length > 0;\r\n }\r\n};\r\n\r\nfunction AddressingMapView(props) {\r\n const dispatch = useDispatch(); //To Dipatch\r\n const mapDiv = useRef(null); //Reference for MapDiv DOM Element\r\n const [showMapSwitcher, setShowMapSwitcher] = useState(true);\r\n //Getting Varialbes from Store\r\n const store_address_result = props.addressingResult;\r\n var store_appToken =\r\n props.appSettings &&\r\n props.appSettings.userCredentials &&\r\n props.appSettings.userCredentials.token\r\n ? props.appSettings.userCredentials.token.access_token\r\n : null;\r\n const isLangArActive = props.appSettings.language === \"ar\";\r\n\r\n //Local State\r\n const [\r\n isReverseGeoCodingInProgress,\r\n SetIsReverseGeoCodingInProgress,\r\n ] = useState(false);\r\n //Hook to initiate the Map and add layers\r\n useEffect(() => {\r\n let mounted = true;\r\n\r\n if (props.showMap === 1) {\r\n map = EsriSatelliteBaseMap;\r\n } else if (props.showMap === 2) {\r\n map = RAKMapAerialBaseMap;\r\n } else if (props.showMap === 3) {\r\n map = RAKMapAerialBaseMap;\r\n }\r\n if (mapDiv.current) {\r\n //getAddressPointDetails(\"11141\")\r\n //Adding Map to DOM\r\n view = new MapView({\r\n map: map,\r\n container: mapDiv.current,\r\n extent: initialExtent,\r\n constraints: {\r\n snapToZoom: false,\r\n rotationEnabled: false,\r\n },\r\n });\r\n\r\n homeWidget.view = view;\r\n basemapGallery.view = view;\r\n scaleBar.view = view;\r\n layerList.view = view;\r\n layerListExpand.view = view;\r\n // view.ui.add(basemapGallery,\"bottom-right\")\r\n view.ui.add(homeWidget, \"top-left\");\r\n view.ui.add(scaleBar, \"bottom-left\");\r\n // view.ui.add(layerList,\"top-left\")\r\n // view.ui.add(layerListExpand, \"top-right\");\r\n // view.ui.remove(\"attribution\");\r\n view.popup.autoOpenEnabled = false;\r\n const locateBtn = new Locate({\r\n view: view,\r\n });\r\n view.ui.add(locateBtn, {\r\n position: \"top-left\",\r\n });\r\n // view.popup.autoCloseEnabled = false\r\n\r\n // view.map.addMany([mapGraphicLayer])\r\n view.map.add(mapGraphicLayer, 2); //adding at index 2 on top of Boundary and streets\r\n // if(isLangArActive)\r\n // //view.map.addMany([ rak_streetsLyrEn , mapGraphicLayer]);\r\n // // view.map.addMany([mapGraphicLayer])\r\n // else\r\n // //view.map.addMany([ rak_streetsLyrAr , mapGraphicLayer]);\r\n\r\n //Handle Reverse GeoCode on MapClick\r\n view.on(\"click\", function (event) {\r\n console.log(\"Map Click \", event.mapPoint);\r\n if (mounted) {\r\n clearAddressGraphicsLayer();\r\n //reverseGeoCode(event.mapPoint);\r\n dispatch(\r\n fetchAddressResultRequest(\"Map_Click\", event.mapPoint.toJSON())\r\n );\r\n\r\n //Get 4326 coordinates before reverse geocod and send it to reverse geocode to store it in store\r\n let outSpatialReference = new SpatialReference({ wkid: 4326 });\r\n esriProject.load().then(() => {\r\n let projectPnt4326 = esriProject.project(\r\n event.mapPoint,\r\n outSpatialReference\r\n );\r\n\r\n reverseGeoCode2(event.mapPoint, projectPnt4326);\r\n });\r\n }\r\n });\r\n view.when(() => {\r\n if(!hasValue(props.addressDetails.data)){\r\n view.zoom = 9\r\n }else{\r\n zoomToDisplayedAddressGraphic()\r\n }\r\n \r\n });\r\n\r\n //Watch for Scale change and Hide the map switcher\r\n view.watch(\"scale\", function (scaleVal) {\r\n var v = {\r\n isMobile: isMobile,\r\n isTablet: isTablet,\r\n zoom: view.zoom,\r\n scale: scaleVal,\r\n isMobileOnly: isMobileOnly,\r\n };\r\n // console.log(v);\r\n // console.log(\"scale changed to new Value = \",scaleVal)\r\n if (scaleVal < 3000) {\r\n setShowMapSwitcher(false);\r\n } else if (scaleVal >= 3000) {\r\n setShowMapSwitcher(true);\r\n }\r\n });\r\n\r\n var rk_streets = view.map.allLayers.find(\r\n (lyr) =>\r\n lyr.id === \"rak_streets_tile_en\" || lyr.id === \"rak_streets_tile_ar\"\r\n );\r\n if (rk_streets) {\r\n view.map.remove(rk_streets);\r\n }\r\n\r\n var rk_boundary = view.map.allLayers.find(\r\n (lyr) =>\r\n lyr.id === \"emirate_boundary_en\" || lyr.id === \"emirate_boundary_ar\"\r\n );\r\n if (rk_streets) {\r\n view.map.remove(rk_boundary);\r\n }\r\n\r\n if (props.showMap === 1) {\r\n if (props.appSettings.language === \"ar\") {\r\n view.map.add(rak_streetsLyrAr, 0);\r\n view.map.add(emirate_boundaryLyrAr, 1);\r\n } else if (props.appSettings.language === \"en\") {\r\n view.map.add(rak_streetsLyrEn, 0);\r\n view.map.add(emirate_boundaryLyrEn, 1);\r\n }\r\n } else if (props.showMap === 2) {\r\n view.map.add(option2Service, 0);\r\n } else if (props.showMap === 3) {\r\n view.map.add(option3Service, 0);\r\n }\r\n }\r\n return () => {\r\n //eg: remove handlers etc.here cleanUp code\r\n mounted = false;\r\n };\r\n }, [props.showMap]);\r\n\r\n //hook to handle Language Change --and change base Vector tile\r\n useEffect(() => {\r\n if (!props.appSettings.language) return;\r\n if (!view || !view.map.layers || view.map.layers.length < 0) return;\r\n var rk_streets = view.map.allLayers.find(\r\n (lyr) =>\r\n lyr.id === \"rak_streets_tile_en\" || lyr.id === \"rak_streets_tile_ar\"\r\n );\r\n if (rk_streets) {\r\n view.map.remove(rk_streets);\r\n }\r\n\r\n var rk_boundary = view.map.allLayers.find(\r\n (lyr) =>\r\n lyr.id === \"emirate_boundary_en\" || lyr.id === \"emirate_boundary_ar\"\r\n );\r\n if (rk_streets) {\r\n view.map.remove(rk_boundary);\r\n }\r\n\r\n if (props.showMap === 1) {\r\n if (props.appSettings.language === \"ar\") {\r\n view.map.add(rak_streetsLyrAr, 0);\r\n view.map.add(emirate_boundaryLyrAr, 1);\r\n } else if (props.appSettings.language === \"en\") {\r\n view.map.add(rak_streetsLyrEn, 0);\r\n view.map.add(emirate_boundaryLyrEn, 1);\r\n }\r\n } else if (props.showMap === 2) {\r\n view.map.add(option2Service, 0);\r\n } else if (props.showMap === 3) {\r\n view.map.add(option3Service, 0);\r\n }\r\n\r\n // if (props.appSettings.language === \"ar\") {\r\n // view.map.add(rak_streetsLyrAr, 0);\r\n // } else if (props.appSettings.language === \"en\") {\r\n // view.map.add(rak_streetsLyrEn, 0);\r\n // }\r\n }, [props.appSettings.language]);\r\n\r\n // useEffect(()=>{\r\n // store_appToken = (props.appSettings && props.appSettings.userCredentials && props.appSettings.userCredentials.token) ? props.appSettings.userCredentials.token.access_token : null\r\n // },[props.appSettings.userCredentials])\r\n\r\n //Hook to Handle Change in AddressResult\r\n useEffect(() => {\r\n let mounted = true;\r\n if (\r\n store_address_result.candidates &&\r\n store_address_result.candidates.length < 1\r\n ) {\r\n console.log(\"No Address Result Found\");\r\n //clear old results\r\n clearAddressGraphicsLayer();\r\n return;\r\n } else if (\r\n store_address_result.candidates[0].isParcelSearch ||\r\n store_address_result.candidates[0].isReverseGeocode\r\n ) {\r\n clearAddressGraphicsLayer();\r\n //is parcel search so no need to get details again all the details are avaliable so just dspatch\r\n if (mounted)\r\n props.fetchedAddressDetailsSuccessfully(\r\n store_address_result.candidates[0]\r\n );\r\n } else {\r\n clearAddressGraphicsLayer();\r\n let address_candiate = store_address_result.candidates[0];\r\n if (mounted) displayAddressGraphic(address_candiate);\r\n }\r\n\r\n return () => {\r\n mounted = false;\r\n };\r\n }, [store_address_result]);\r\n\r\n //hook to handle Change in AddressDetails -- PointGraphic and draw it on Map\r\n useEffect(() => {\r\n let mounted = true;\r\n\r\n var address_data = props.addressDetails.data; //from store\r\n if (!address_data || address_data.length < 1) return;\r\n if (props.addressDetails.loading) return;\r\n\r\n let lat = address_data.latitude;\r\n let lng = address_data.longitude;\r\n let positionX = address_data.positionX;\r\n let positionY = address_data.positionY;\r\n if (mounted) {\r\n // clearAddressGraphicsLayer() //clear old one before adding now\r\n displayPointAddressGraphic2(\r\n { x: positionX, y: positionY },\r\n address_data.parcelGeometry\r\n );\r\n }\r\n\r\n return () => {\r\n mounted = false;\r\n };\r\n }, [props.addressDetails.data]);\r\n\r\n const reverseGeoCode2 = (mapPoint, clickPoint4326) => {\r\n // if(!props.isAddressPanelOpen) props.openAddressPanel()\r\n triggerAddressPanelOpen();\r\n clearMapSearchText(); //Bad way of clearing MapSearchBar text --TODO change to store based model (react way)\r\n SetIsReverseGeoCodingInProgress(true);\r\n const params = { location: mapPoint };\r\n dispatch(props.clearAddressDetails());\r\n //dispatch(fetchAddressResultRequest(\"Map_Click\", mapPoint.toJSON()));\r\n dispatch(fetchAddressResultRequest(\"Map_Click\", clickPoint4326.toJSON())); //Again Dispatching to change map point to 4326\r\n locatorTask\r\n .locationToAddress(params)\r\n .then((resp) => {\r\n const parcel_address = resp.address; //here we will ge the parcel id\r\n // dispatch(fetchAddressResultSuccess([resp]));\r\n getAndDisplayAddressDetailsFromParcelId(parcel_address, mapPoint);\r\n })\r\n .catch((err) => {\r\n const errMsg = err.message;\r\n if (errMsg == \"Cannot perform query. Invalid query parameters.\") {\r\n //means no matching address found\r\n dispatch(fetchAddressResultSuccess([]));\r\n noResultFromReverseGeoCodeAction(mapPoint);\r\n } else {\r\n dispatch(fetchAddressResultFailure(errMsg));\r\n }\r\n })\r\n .then(() => {\r\n SetIsReverseGeoCodingInProgress(false);\r\n });\r\n };\r\n\r\n const getAndDisplayAddressDetailsFromParcelId = (\r\n parcel_address,\r\n mapPoint\r\n ) => {\r\n const [promise, source] = getAddressDetailsFromParcelId(\r\n parcel_address,\r\n props.appSettings.userCredentials.token.access_token\r\n ); // store_appToken\r\n promise\r\n .then((resp) => {\r\n console.log(resp.data);\r\n const {\r\n isSuccess,\r\n isPartial,\r\n message,\r\n respData,\r\n successObj,\r\n failedObj,\r\n } = addressingApiResponseMapper(resp.data);\r\n if (isSuccess) {\r\n var addressData = addressDetailsMapper(respData);\r\n var dipatchData = { ...addressData, isReverseGeocode: true };\r\n // props.fetchedAddressDetailsSuccessfully([dipatchData]);\r\n dispatch(fetchAddressResultSuccess([dipatchData]));\r\n } else {\r\n // props.faiedTofetchAddressDetails(message);\r\n dispatch(fetchAddressResultSuccess([]));\r\n noResultFromReverseGeoCodeAction(mapPoint);\r\n }\r\n })\r\n .catch((err) => {\r\n //setSuggestionsState({isLoading:false, options :[] , query : search_text ,disbled : false })\r\n console.log(\"Coudnt Fetch Address Detail From Parcel ID \", err.message);\r\n const errMsg = err.message;\r\n //props.faiedTofetchAddressDetails(err.message);\r\n dispatch(fetchAddressResultFailure(errMsg));\r\n });\r\n };\r\n\r\n const reverseGeoCode = (mapPoint) => {\r\n //this method is not used anymore as the logic is changed to reveresGeoCode agains Parcels Locator\r\n //if(!props.isAddressPanelOpen) props.openAddressPanel()\r\n triggerAddressPanelOpen();\r\n if (isReverseGeoCodingInProgress) {\r\n // alert(\"In Progress wait\");\r\n return;\r\n } else {\r\n SetIsReverseGeoCodingInProgress(true);\r\n }\r\n const params = {\r\n location: mapPoint,\r\n //,locationType :\"Point Address\"\r\n };\r\n dispatch(props.clearAddressDetails());\r\n //dispatch(props.clearAddressResult())\r\n dispatch(fetchAddressResultRequest(\"Map_Click\", mapPoint.toJSON()));\r\n\r\n locatorTask\r\n .locationToAddress(params)\r\n .then((resp) => {\r\n console.log(JSON.stringify(resp));\r\n const r_address = resp.address;\r\n const r_address_attributes = resp.attributes;\r\n const address_type = r_address_attributes.Addr_type;\r\n console.log(\"Found Address of Type \", address_type);\r\n if (address_type === \"PointAddress\") {\r\n //only show point address in reverse GeoCode\r\n dispatch(fetchAddressResultSuccess([resp]));\r\n } else {\r\n dispatch(fetchAddressResultSuccess([])); //dispatching empty --as NonPoint Address is found is reterieved\r\n noResultFromReverseGeoCodeAction(mapPoint);\r\n }\r\n\r\n SetIsReverseGeoCodingInProgress(false);\r\n })\r\n .catch((err) => {\r\n console.log(err.message);\r\n const errMsg = err.message;\r\n if (errMsg == \"Cannot perform query. Invalid query parameters.\") {\r\n //means no matching address found\r\n dispatch(fetchAddressResultSuccess([]));\r\n noResultFromReverseGeoCodeAction(mapPoint);\r\n } else {\r\n dispatch(fetchAddressResultFailure(errMsg));\r\n }\r\n SetIsReverseGeoCodingInProgress(false);\r\n });\r\n };\r\n\r\n const noResultFromReverseGeoCodeAction = (mapPoint) => {\r\n //Draw the map point graphic and may be show a popup no result found at the current location report issue\r\n const addressNotFound = new Graphic({\r\n geometry: mapPoint,\r\n symbol: const_not_found_point_symbol,\r\n // symbol : const_mapPnt\r\n });\r\n addGraphicToAddressGraphicLayer(addressNotFound);\r\n };\r\n\r\n const getAndDrawAddressPointDetails = (address) => {\r\n //Make Sure to Clear old Graphic\r\n //clearAddressGraphicsLayer()\r\n var street_number = address.attributes.StreetId.toString();\r\n var point_id = address.attributes.AddressPointId.toString();\r\n var area_id = address.attributes.AreaId.toString();\r\n\r\n props.initiatingAddressDetailsFetch(props.addressingResult.fetchType); //passing fetchType from AddrssResult store\r\n\r\n let [promise, source] = getAddressDetials(\r\n point_id,\r\n street_number,\r\n area_id,\r\n store_appToken\r\n );\r\n promise\r\n .then((resp) => {\r\n const {\r\n isSuccess,\r\n isPartial,\r\n message,\r\n respData,\r\n successObj,\r\n failedObj,\r\n } = addressingApiResponseMapper(resp.data);\r\n\r\n if (isSuccess) {\r\n props.fetchedAddressDetailsSuccessfully(\r\n addressDetailsMapper(respData)\r\n );\r\n //TODO - drwas Point address and Parcel outline on map -- may be using useEffect hook\r\n } else props.faiedTofetchAddressDetails(message);\r\n })\r\n .catch((err) => {\r\n console.log(\"Failed to get the AddressPoint Details \", err.message);\r\n props.faiedTofetchAddressDetails(err.message);\r\n });\r\n };\r\n\r\n const displayAddressGraphic = (address) => {\r\n var address_type = address.attributes.Addr_type;\r\n switch (address_type) {\r\n case \"PointAddress\":\r\n // drawAddressPointGraphic(address)\r\n //displayPointAddressGraphic(address) //This is wroking , but commented for now to get details from AddressServiceAPI\r\n //Since AddressPoint is found - Get the Address Point details for the AddressAPI service and\r\n getAndDrawAddressPointDetails(address);\r\n break;\r\n case \"StreetName\":\r\n props.clearAddressDetails();\r\n if (isMobileOnly) {\r\n props.closeAddressPanel();\r\n }\r\n displayStreetAddressGraphic(address);\r\n break;\r\n case \"Locality\":\r\n props.clearAddressDetails();\r\n if (isMobileOnly) {\r\n //if mobile close the side panel wait for some milliseconds and then zoom\r\n //since we have calculat geom login indide display AreaGraphic - no need to implement timer\r\n props.closeAddressPanel();\r\n }\r\n displayAreaGraphic(address, props.appSettings.language);\r\n break;\r\n case \"Postal\":\r\n props.clearAddressDetails();\r\n if (isMobileOnly) {\r\n props.closeAddressPanel();\r\n }\r\n displayPostalAreaGraphic(address);\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n const [mapSearchValueDummy, setMapSearchValueDummy] = useState(1);\r\n const clearMapSearchText = () => {\r\n setMapSearchValueDummy((value) => ++value);\r\n };\r\n\r\n const triggerAddressPanelOpen = () => {\r\n //TODO check the logic here--trigger only if the panel is closed\r\n //if(!(props.mapPanelSetting.isSidePanelOpen && props.mapPanelSetting.resultType === \"address\")){\r\n props.openAddressPanel();\r\n // }\r\n };\r\n return (\r\n <>\r\n {/* \r\n \r\n {\r\n refreshGridData();\r\n }}\r\n >\r\n \r\n
\r\n ),\r\n onTableChange: (action, tableState) => {\r\n console.log(\"action is \", action);\r\n switch (action) {\r\n case \"changePage\":\r\n setState({ ...state, page: tableState.page });\r\n break;\r\n case \"changeRowsPerPage\":\r\n setState({ ...state, rowsPerPage: tableState.rowsPerPage });\r\n break;\r\n case \"sort\":\r\n //var sortString = tableState.sortOrder.name + ' ' + tableState.sortOrder.direction\r\n setState({ ...state, sortOrder: tableState.sortOrder });\r\n case \"filterChange\":\r\n setState({ ...state, IssueTypes: tableState.filterList[1] }); //hardcoding array position for now to filter Issue Types\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n\r\n textLabels: {\r\n body: {\r\n noMatch: t(\"noMatch\"),\r\n },\r\n filter: {\r\n all: t(\"all\"),\r\n title: t(\"title\"),\r\n reset: t(\"reset\"),\r\n },\r\n pagination: {\r\n next: t(\"next\"),\r\n previous: t(\"previous\"),\r\n rowsPerPage: t(\"rowsPerPage\"),\r\n displayRows: t(\"displayRows\"),\r\n },\r\n },\r\n };\r\n return (\r\n \r\n \r\n \r\n Issue Details\r\n {/* {JSON.stringify(issueInfo)} */}\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n */}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n getAndDisplayIssueAttachment(issueId)}\r\n >\r\n \r\n */}\r\n \r\n\r\n \r\n \r\n {/* alert(\"will display attachments\")}\r\n >\r\n \r\n \r\n alert(\"will fetch and display attachment\")\r\n }\r\n >\r\n */}\r\n \r\n \r\n\r\n \r\n \r\n {t(\"RespondToReporter\")}\r\n setRespondTxt(e.target.value)}\r\n value={\r\n isRespondedStatus\r\n ? issueInfo.responderComments\r\n : respondTxt\r\n }\r\n disabled={isRespondedStatus}\r\n >\r\n \r\n \r\n \r\n \r\n {/* \r\n {\r\n setAttachmentImg('')\r\n }} images={[{src:attachmentImg , alt:'unable to load Image'}]}/>\r\n */}\r\n \r\n\r\n \r\n props.onClose()}\r\n startIcon={isRespondedStatus ? {\r\n sendResponseToUser();\r\n }}\r\n startIcon={ \r\n {isSubmintInProgress ?
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n addressIssueTypes: state.addressIssueTypes,\r\n addressIssueStatusTypes: state.addressIssueStatusTypes,\r\n loginUserDetails: state.settings.userCredentials\r\n ? state.settings.userCredentials.user\r\n : null,\r\n appSettings: state.settings,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {};\r\n};\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(IssueDetailsDisplay);\r\n","import React, { useEffect, useState } from \"react\";\r\nimport IssueInboxGrid from \"./IssueInboxGrid\";\r\n\r\nimport { connect } from \"react-redux\";\r\nimport {\r\n fetchAddressIssueTypesRequest,\r\n fetchAddressIssueTypesSuccess,\r\n fetchAddressIssueTypesFailure,\r\n} from \"../../redux/reducers/addressIssueTypesReducer\"; //TODO move this to actions\r\nimport {\r\n fetchAddressIssueStatusTypesRequest,\r\n fetchAddressIssueStatusTypesSuccess,\r\n fetchAddressIssueStatusTypesFailure,\r\n} from \"../../redux/reducers/addressIssueStatusTypesReducer\"; //TODO move these to actions\r\n\r\nimport {\r\n getAddressIssueTypes,\r\n getAddressIssueStatuTypes,\r\n} from \"../../serviceClients/addressingClient\";\r\nimport {\r\n addressIssueTypesMapper,\r\n addressIssueStatusTypesMapper,\r\n addressingApiResponseMapper,\r\n} from \"../mappers/addressingMappers\";\r\nimport IssueDetailsDisplay from \"./IssueDetailsDisplay\";\r\n\r\nfunction IssuesInbox(props) {\r\n const [singleIssueDetails, setSingleIssueDetails] = useState({ data: [] });\r\n const [refreshGridValue, setRefreshGridValue] = useState(1);\r\n\r\n const refreshGrid = () => {\r\n setRefreshGridValue(refreshGridValue + 1);\r\n };\r\n\r\n useEffect(() => {\r\n // Get Address Issue Types\r\n const [promise, source] = getAddressIssueTypes(\r\n props.settings.userCredentials.token.access_token\r\n );\r\n promise\r\n .then((resp) => {\r\n const {\r\n isSuccess,\r\n isPartial,\r\n message,\r\n respData,\r\n successObj,\r\n failedObj,\r\n } = addressingApiResponseMapper(resp.data);\r\n if (isSuccess)\r\n props.fetchedAddressIssueTypesSuccessfully(\r\n addressIssueTypesMapper(respData, props.settings.language)\r\n );\r\n else props.fetchAddressIssueTypesFailed(message);\r\n })\r\n .catch((err) => {\r\n console.log(err.message);\r\n props.fetchAddressIssueTypesFailed(err.message);\r\n });\r\n\r\n // Get Address_Issue_Statu_Types\r\n const [promise2, source2] = getAddressIssueStatuTypes(\r\n props.settings.userCredentials.token.access_token\r\n );\r\n promise2\r\n .then((resp) => {\r\n const {\r\n isSuccess,\r\n isPartial,\r\n message,\r\n respData,\r\n successObj,\r\n failedObj,\r\n } = addressingApiResponseMapper(resp.data);\r\n if (isSuccess)\r\n props.fetchedAddressIssueStatusTypesSuccessfully(respData);\r\n else props.fetchAddressIssueStatusTypesFailed(message);\r\n })\r\n .catch((err) => {\r\n console.log(err.message);\r\n props.fetchAddressIssueStatusTypesFailed(err.message);\r\n });\r\n\r\n return () => {\r\n if (source) source.cancel();\r\n // if(source2) source2.cancel()\r\n };\r\n }, []);\r\n\r\n return (\r\n //TODO show loader while the IssueTypes are in loading\r\n <>\r\n {props.addressIssueTypesStateStore.data.length > 0 &&\r\n props.addressIssueTypesStateStore.data.length > 0 ? (\r\n - \r\n
- \r\n
- \r\n
{t(\"IssueDescription\")}
\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n ))}\r\n \r\n\r\n {/* {\r\n (!issueType) \r\n ? \r\n \r\n {\"Please Choose Issue Type\"}\r\n
\r\n :null\r\n } */}\r\n\r\n\r\n {t(\"UploadAttchErrorMsg\")}\r\n
\r\n ) : null}\r\n\r\n- \r\n {attachment.map((file) => {\r\n return (\r\n
\r\n {t(\"Share\")}\r\n
\r\n {t(\"Share\")}
\r\n \r\n
\r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n\r\n const ExpandMore = styled((props) => {\r\n const { expand, ...other } = props;\r\n return \r\n {t(\"HouseNumberlbl\")} {AddNum}\r\n
\r\n {/* {AddNum}, {StNameEn} {StNameEn === StNameAr ? null : `(${StNameAr})`} */}\r\n \r\n {t(\"StreetNamelbl\")} {StNameAr}\r\n
\r\n ) : (\r\n StNameAr\r\n )\r\n ) : StNameEn ? (\r\n \r\n {t(\"StreetNamelbl\")} {StNameEn}{\" \"}\r\n
\r\n ) : (\r\n StNameEn\r\n )}\r\n {/* {AddNum}, {StNameEn} {StNameEn === StNameAr ? null : `(${StNameAr})`} */}\r\n \r\n {t(\"BuildingNamelbl\")} {BuildingNameA}\r\n
\r\n ) : (\r\n BuildingNameA\r\n )\r\n ) : BuildingNameE ? (\r\n \r\n {t(\"BuildingNamelbl\")} {BuildingNameE}\r\n
\r\n ) : (\r\n BuildingNameE\r\n )}\r\n \r\n {t(\"CommunityNamelbl\")} {CommunityNameA}\r\n
\r\n ) : (\r\n CommunityNameA\r\n )\r\n ) : CommunityNameA ? (\r\n \r\n {t(\"CommunityNamelbl\")} {CommunityNameE}\r\n
\r\n ) : (\r\n CommunityNameE\r\n )}\r\n \r\n {t(\"AreaName\")} {AreaAr}\r\n
\r\n ) : (\r\n AreaAr\r\n )\r\n ) : AreaEn ? (\r\n \r\n {t(\"AreaName\")} {AreaEn}\r\n
\r\n ) : (\r\n AreaEn\r\n )}\r\n {/* {AreaEn} {AreaEn == AreaAr ? null : `(${AreaAr})`} */}\r\n \r\n {t(\"PostalCode\")} {PostalCode}\r\n
\r\n ) : (\r\n PostalCode\r\n )}\r\n \r\n {t(\"Emirate\")} {\"رأس الخيمة\"}\r\n
\r\n ) : (\r\n \r\n {t(\"Emirate\")} {\"Ras Al Khaimah\"}\r\n
\r\n )}\r\n {/* {Emirate} */}\r\n \r\n \r\n {t(\"AdditionalInformation\")} :\r\n \r\n
\r\n );\r\n\r\n const UserActionButtons = () => (\r\n \r\n \r\n \r\n \r\n {t(\"ParcelID\")}\r\n \r\n \r\n \r\n \r\n {/* {ParcelId} */}\r\n \r\n {ParcelId}\r\n \r\n {/* \r\n zoomToMapAddressGraphic()}\r\n /> */}\r\n \r\n \r\n \r\n
\r\n */}\r\n \r\n {/* \r\n {/*
*/}\r\n \r\n {/* Just Using the existing Share Email functionality (passing the \"shareOpen\" state )- insted of doing in the ShareAddressing Component-- to save development time*/}\r\n \r\n
\r\n );\r\n };\r\n\r\n const DisplayClickInsideRakBoundary = () => {\r\n return (\r\n // \r\n \r\n {/* \r\n {t(\"AdrsAvatar\")}\r\n \r\n }\r\n title={t(\"AddressInformation\")}\r\n /> */}\r\n \r\n \r\n \r\n {/*
\r\n\r\n {/* \r\n //
\r\n \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // {t(\"ClickInsideRAKMessage\")}\r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n // \r\n //
\r\n // \r\n \r\n {/* \r\n A\r\n \r\n }\r\n title=\"Address Information\"\r\n /> */}\r\n \r\n {/* \r\n {/* No Address Details found for this locatoin */}\r\n {t(\"NoAddressDetails\")}\r\n \r\n {/* \r\n \r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n const ErrorDisplayHTML = () => (\r\n \r\n \r\n \r\n \r\n {t(\"errormsg\")}\r\n \r\n \r\n {/* \r\n */}\r\n \r\n
\r\n );\r\n\r\n const LatLngBit = (props) => (\r\n \r\n \r\n \r\n {t(\"AdrsAvatar\")}\r\n \r\n }\r\n title={t(\"AddressingService\")}\r\n />\r\n \r\n \r\n {t(\"welcomeMsg\")}\r\n \r\n \r\n {t(\"RAKAddressInfo\")}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n const DisplayContent = () => {\r\n if (store_address_result_loading || store_addressDetails.loading)\r\n return (\r\n \r\n {t(\"findmsg\")} {t(\"msg1\")} {t(\"or\")} {\" \"}\r\n {t(\"searchBar\")} {t(\"searchMsg\")}\r\n
\r\n\r\n {\" \"}\r\n
\r\n );\r\n } else if (\r\n store_address_result.fetchType == \"Suggestion_Select\" &&\r\n !hasValue(store_addressDetailsData)\r\n //store_addressDetailsData.length < 1\r\n ) {\r\n //means street or area or post found and No Address Point found\r\n //return No Address Found
;\r\n return (\r\n \r\n {\" \"}\r\n
\r\n );\r\n } else if (\r\n store_address_result.fetchType == \"Map_Click\" &&\r\n !hasValue(store_addressDetailsData)\r\n ) {\r\n var isInside = IsPointInsideRakBoundary_4326(\r\n store_address_result.fetchInput\r\n );\r\n if (isInside) {\r\n return \r\n \r\n \r\n \r\n {\r\n zoomToMapAddressGraphic();\r\n }}\r\n >\r\n {\" \"}\r\n {icon}{\" \"}\r\n \r\n {address_typ} : {address_content}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n switch (address_type) {\r\n case \"StreetName\": //street\r\n return display_cnt(t(\"Street\"), address, \r\n \r\n {/* \r\n A\r\n \r\n }\r\n title=\"Address Information\"\r\n /> */}\r\n \r\n {/* \r\n {/* No Address Details found for this locatoin */}\r\n {t(\"NoAddressDetails\")}\r\n \r\n {/* \r\n \r\n \r\n \r\n
\r\n );\r\n } else if (store_address_result.fetchType == \"Text_Search\") {\r\n //diplay no address found for the User Search Text\r\n let searchTxt = store_address_result.fetchInput;\r\n return (\r\n \r\n \r\n {/* \r\n A\r\n \r\n }\r\n title=\"Address Information\"\r\n /> */}\r\n \r\n \r\n {/* No Address Details found for Search : {searchTxt} */}\r\n {t(\"NoAddressDetailsFor\")} : {searchTxt}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n } else if (store_address_result.fetchType == \"Suggestion_Select\") {\r\n //mean NonPoint address is selected from the Suggestion\r\n //This point should not happen\r\n // return {store_address_result.candidates[0].address}
\r\n return \r\n
${PostalCode}
${Emirate}`,\r\n Address: !isLangArActive\r\n ? `${AddNum} , ${StNameEn} , ${AreaEn} , ${PostalCode} , Ras Al Khaimah`\r\n : `${AddNum} , ${StNameAr} , ${AreaAr} , ${PostalCode} , رأس الخيمة`,\r\n PlusCode: PlusCode,\r\n ThreeWordsAddress: ThreeWordsEn,\r\n ThreeWordsAddressAR: ThreeWordsAr,\r\n Latitude: Lat,\r\n Longitude: Lng,\r\n ParcelId: ParcelId,\r\n Makani: MakaniNumber ? MakaniNumber : \"\",\r\n }}\r\n token={props.appSettings.userCredentials.token}\r\n open={shareOpen}\r\n onClose={handleShareClose}\r\n onSuccess={(msg) => successMessageToast(msg)}\r\n />\r\n ) : (\r\n \"\"\r\n )}\r\n {reportOpen ? (\r\n setReportOpen(false)}\r\n onSuccess={(msg) => successMessageToast(msg)}\r\n lat={Lat ? Lat : props.addressingResult.fetchInput.y}\r\n lng={Lng ? Lng : props.addressingResult.fetchInput.x}\r\n />\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n \r\n {toastMsg}\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n addressingResult: state.addressingResult,\r\n addressDetails: state.addressDetails,\r\n appSettings: state.settings,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n clearAddressDisplay: () => {\r\n dispatch(clearAddressResult());\r\n dispatch(clearAddressDetails());\r\n },\r\n // Update Shamnas -- to activate Login to Report\r\n setActivePage: (page) => dispatch(setActivePage(page)),\r\n closeAddressPanel: () => {\r\n return dispatch(setSidePanelopen(false)); //to display the sidePanel\r\n },\r\n };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AddressDetailsPane);\r\n","export default \"data:image/png;base64,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\"","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\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles, useTheme } from \"@material-ui/core/styles\";\r\nimport { Tabs, Tab, AppBar, Grid } from \"@material-ui/core\";\r\n\r\nimport AddressingMapView from \"./AddressingMapView\";\r\nimport AddressingMapViewOption2 from \"./AddressingMapViewOption2\";\r\nimport AddressingMapViewOption3 from \"./AddressingMapViewOption3\";\r\n\r\nimport Drawer from \"@material-ui/core/Drawer\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport {\r\n setSidePanelopen,\r\n setSidePanelResultType,\r\n} from \"../../redux/actions/mapPanelControlActions\";\r\n\r\nimport \"../../App.css\";\r\nimport IssuesInbox from \"../AddressIssues/IssuesInbox\";\r\nimport AddressDetailsPane from \"../AddressResult/AddressDetailsPane\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { IconButton } from \"@material-ui/core\";\r\nimport OpenPanel from \"@material-ui/icons/ArrowRight\";\r\nimport ClosePanel from \"@material-ui/icons/ArrowLeft\";\r\nimport ReactGA from \"react-ga\";\r\n\r\n// import \"../App.css\";\r\nlet drawerWidth =\r\n document.body.offsetWidth > 400 ? 400 : document.body.offsetWidth;\r\nlet sideFlag = document.body.offsetWidth > 400 ? true : false;\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n display: \"flex\",\r\n height: \"100%\",\r\n },\r\n root2: {\r\n flexGrow: 1,\r\n maxWidth: 500,\r\n },\r\n menuButton: {\r\n marginRight: theme.spacing(2),\r\n },\r\n hide: {\r\n display: \"none\",\r\n },\r\n drawer: {\r\n width: drawerWidth,\r\n flexShrink: 0,\r\n height: \"100%\",\r\n },\r\n drawerPaper: {\r\n width: drawerWidth,\r\n top: \"auto\",\r\n height: \"calc(100vh - 69px)\",\r\n boxShadow: \"0 0 35px rgb(0 0 0 / 35%)\",\r\n },\r\n drawerHeader: {\r\n // display: \"flex\",\r\n alignItems: \"center\",\r\n padding: theme.spacing(0, 1),\r\n backgroundColor: theme.palette.primary.light,\r\n // backgroundColor: \"#453c90\",\r\n // necessary for content to be below app bar\r\n //...theme.mixins.toolbar,\r\n // justifyContent: \"flex-end\",\r\n },\r\n indicator: {\r\n backgroundColor: \"lightgrey\",\r\n display: \"none\",\r\n },\r\n content: {\r\n flexGrow: 1,\r\n // padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginLeft: -drawerWidth,\r\n height: \"100%\",\r\n },\r\n contentShift: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginLeft: 0,\r\n },\r\n contentRtl: {\r\n flexGrow: 1,\r\n // padding: theme.spacing(3),\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.sharp,\r\n duration: theme.transitions.duration.leavingScreen,\r\n }),\r\n marginRight: -drawerWidth,\r\n height: \"100%\",\r\n },\r\n contentShiftRtl: {\r\n transition: theme.transitions.create(\"margin\", {\r\n easing: theme.transitions.easing.easeOut,\r\n duration: theme.transitions.duration.enteringScreen,\r\n }),\r\n marginRight: 0,\r\n },\r\n chip: {\r\n margin: theme.spacing(0.5),\r\n },\r\n section1: {\r\n margin: theme.spacing(3, 2),\r\n },\r\n section2: {\r\n margin: theme.spacing(2),\r\n },\r\n section3: {\r\n margin: theme.spacing(3, 1, 1),\r\n },\r\n items: {\r\n padding: theme.spacing(2),\r\n },\r\n formControl: {\r\n margin: theme.spacing(1),\r\n minWidth: 120,\r\n },\r\n}));\r\n\r\nfunction MapWrapper(props) {\r\n const classes = useStyles();\r\n const { t, i18n } = useTranslation(\"mapPage\");\r\n // const [open, setOpen] = useState(false);\r\n const dispatch = useDispatch();\r\n const settings = useSelector((state) => state.settings);\r\n const panelProps = useSelector((state) => state.mapPanelSetting);\r\n const theme = useTheme();\r\n useEffect(() => {\r\n dispatch(setSidePanelopen(sideFlag));\r\n ReactGA.pageview(window.location.pathname + window.location.search);\r\n }, []);\r\n\r\n const handleDrawerClose = () => {\r\n // setOpen(false);\r\n dispatch(setSidePanelopen(false));\r\n };\r\n\r\n const handleTabChange = (event, type) => {\r\n dispatch(setSidePanelResultType(type));\r\n };\r\n\r\n return (\r\n ${PostalCode}
${Emirate}`,\r\n Address: !isLangArActive\r\n ? `${AddNum} , ${StNameEn} , ${AreaEn} , ${PostalCode} , Ras Al Khaimah`\r\n : `${AddNum} , ${StNameAr} , ${AreaAr} , ${PostalCode} , رأس الخيمة`,\r\n PlusCode: PlusCode,\r\n ThreeWordsAddress: ThreeWordsEn,\r\n ThreeWordsAddressAR: ThreeWordsAr,\r\n Latitude: Lat,\r\n Longitude: Lng,\r\n ParcelId: ParcelId,\r\n Makani: MakaniNumber ? MakaniNumber : \"\",\r\n }}\r\n token={props.appSettings.userCredentials.token}\r\n open={shareOpen}\r\n onClose={handleShareClose}\r\n onSuccess={(msg) => successMessageToast(msg)}\r\n />\r\n ) : (\r\n \"\"\r\n )}\r\n {reportOpen ? (\r\n
\r\n \r\n \r\n {/* #For-MapOptions */}\r\n {/* {props.showMap === 1 ? \r\n Share Address \r\n \r\n \r\n To share address to your email, please enter your email address here\r\n and click share.\r\n \r\n setEmail(e.target.value)}\r\n fullWidth\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Report Issue \r\n \r\n \r\n To report an issue, please fill up the below details and click\r\n Report.\r\n \r\n \r\n {issueTypes.map((option) => (\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n */}\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default MapWrapper;\r\n","export default __webpack_public_path__ + \"static/media/mun_logo.a3415166.jpg\";","export default __webpack_public_path__ + \"static/media/Goverment.8b24efb8.png\";","export default __webpack_public_path__ + \"static/media/logo.b7276fcc.jpg\";","export default __webpack_public_path__ + \"static/media/logo-web.27f3a4f9.png\";","export default __webpack_public_path__ + \"static/media/logo-mobile.ac0340b2.png\";","export default __webpack_public_path__ + \"static/media/manual_Ar.da0dac72.pdf\";","export default __webpack_public_path__ + \"static/media/manual_En.92ebdabe.pdf\";","import React, { useEffect, useState, useRef } from \"react\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport logo from \"../assets/img/mun_logo.jpg\";\r\nimport munlogo from \"../assets/img/logo.jpg\";\r\nimport Addlogo_web from \"../assets/img/logo-web.png\";\r\nimport Addlogo_mobile from \"../assets/img/logo-mobile.png\";\r\nimport govLogo from \"../assets/img/Goverment.png\";\r\nimport Tabs from \"@material-ui/core/Tabs\";\r\nimport Tab from \"@material-ui/core/Tab\";\r\nimport MoreIcon from \"@material-ui/icons/MoreVert\";\r\nimport Pdf_ar from \"../assets/docs/manual_Ar.pdf\";\r\nimport Pdf_en from \"../assets/docs/manual_En.pdf\";\r\nimport {\r\n Link,\r\n Avatar,\r\n Popover,\r\n MenuItem,\r\n Button,\r\n IconButton,\r\n Popper,\r\n Grow,\r\n Paper,\r\n MenuList,\r\n SwipeableDrawer,\r\n} from \"@material-ui/core\";\r\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { deepPurple } from \"@material-ui/core/colors\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport PersonIcon from \"@material-ui/icons/Person\";\r\nimport HelpIcon from \"@material-ui/icons/HelpOutline\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport {\r\n setActivePage,\r\n setActiveLanguage,\r\n setUserCredentials,\r\n} from \"../redux/actions/appSettingsActions\";\r\nimport { appConifg } from \"../config/default\";\r\nimport axios from \"axios\";\r\nimport { setSidePanelResultType } from \"../redux/actions/mapPanelControlActions\";\r\nimport { useCookies } from \"react-cookie\";\r\n\r\nconst useStyles = makeStyles(\r\n (theme) => ({\r\n root: {\r\n display: \"flex\",\r\n },\r\n purple: {\r\n color: theme.palette.getContrastText(deepPurple[500]),\r\n backgroundColor: deepPurple[500],\r\n },\r\n loggedInUserAvatar: {\r\n backgroundColor: theme.palette.primary.light,\r\n },\r\n headerDesktop: {\r\n display: \"none\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"flex\",\r\n },\r\n justifyContent: \"space-between\",\r\n },\r\n headerMobile: {\r\n display: \"flex\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"none\",\r\n },\r\n },\r\n sectionDesktop: {\r\n display: \"none\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"flex\",\r\n },\r\n background: \"linear-gradient(180deg, #f2f2f2, #f2f2f2 90%)\",\r\n color: \"#555\",\r\n },\r\n sectionMobile: {\r\n display: \"flex\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"none\",\r\n },\r\n background: \"linear-gradient(180deg, #f2f2f2, #f2f2f2 90%)\",\r\n color: \"#555\",\r\n },\r\n languageIcon: {\r\n margin: theme.spacing(1),\r\n },\r\n }),\r\n { index: 1 }\r\n);\r\n\r\nfunction Header(props) {\r\n const classes = useStyles();\r\n const pageSettings = useSelector((state) => state.settings);\r\n const addressingResult = useSelector((state) => state.addressingResult);\r\n const dispatch = useDispatch();\r\n const { t, i18n } = useTranslation(\"header\");\r\n\r\n const [anchorEl, setAnchorEl] = useState(null);\r\n const signOpen = Boolean(anchorEl);\r\n const history = useHistory();\r\n const [cookiesStore, setCookieStore] = useCookies([\"store\", \"langauge\"]);\r\n\r\n const handleClick = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleSignClose = () => {\r\n setAnchorEl(null);\r\n };\r\n\r\n const handleChange = (event, newValue) => {\r\n dispatch(setActivePage(newValue));\r\n switch (newValue) {\r\n case \"Home\":\r\n history.push(\"/\");\r\n break;\r\n case \"Map\":\r\n history.push(\"/Map\");\r\n break;\r\n case \"Contact\":\r\n history.push(\"/Contact\");\r\n break;\r\n default:\r\n history.push(\"/\");\r\n }\r\n };\r\n const handleLangChange = () => {\r\n dispatch(setActiveLanguage(pageSettings.language === \"en\" ? \"ar\" : \"en\"));\r\n };\r\n useEffect(() => {\r\n i18n.changeLanguage(pageSettings.language);\r\n //\r\n if (pageSettings.language == \"en\") {\r\n document.body.classList.remove(\"rtllayout\");\r\n document.body.classList.add(\"ltrlayout\");\r\n } else {\r\n document.body.classList.remove(\"ltrlayout\");\r\n document.body.classList.add(\"rtllayout\");\r\n }\r\n }, [pageSettings.language]);\r\n const handleSignout = () => {\r\n if (pageSettings.userCredentials.uaePassUser) {\r\n if (addressingResult)\r\n setCookieStore(\"store\", JSON.stringify(addressingResult), {\r\n path: \"/\",\r\n });\r\n setCookieStore(\"language\", JSON.stringify(pageSettings.language), {\r\n path: \"/\",\r\n });\r\n window.location.replace(\r\n appConifg.UaePassDetails.logoutUrl +\r\n \"?redirect_uri=\" +\r\n appConifg.UaePassDetails.redirectUrl\r\n );\r\n } else {\r\n let data = {};\r\n let axiosConfig = {\r\n headers: {\r\n username: appConifg.AnonymousUser.username,\r\n password: appConifg.AnonymousUser.password,\r\n },\r\n };\r\n axios\r\n .post(\r\n appConifg.Address.AddressApiUrl + \"/Users/Login\",\r\n data,\r\n axiosConfig\r\n )\r\n .then((response) => {\r\n if (response.data?.isSucceeded) {\r\n dispatch(\r\n setUserCredentials({ data: response.data.data, flag: false })\r\n );\r\n dispatch(setSidePanelResultType(\"address\"));\r\n handleSignClose();\r\n } else {\r\n dispatch(setUserCredentials({ data: null, flag: false }));\r\n dispatch(setSidePanelResultType(\"address\"));\r\n handleSignClose();\r\n }\r\n })\r\n .catch((ex) => {\r\n console.log(ex);\r\n dispatch(setUserCredentials({ data: null, flag: false }));\r\n dispatch(setSidePanelResultType(\"address\"));\r\n handleSignClose();\r\n });\r\n }\r\n };\r\n const [mobilePopperOpen, setMobilePopperOpen] = useState(false);\r\n const anchorRef = useRef(null);\r\n const handleToggle = () => {\r\n setMobilePopperOpen((prevOpen) => !prevOpen);\r\n };\r\n function handleListKeyDown(event) {\r\n if (event.key === \"Tab\") {\r\n event.preventDefault();\r\n setMobilePopperOpen(false);\r\n }\r\n }\r\n const handleClose = (event) => {\r\n if (anchorRef.current && anchorRef.current.contains(event.target)) {\r\n return;\r\n }\r\n\r\n setMobilePopperOpen(false);\r\n };\r\n\r\n return (\r\n // \r\n \r\n \r\n \r\n \r\n \r\n handleDrawerClose(false)}\r\n >\r\n {settings.language == \"en\" ? \r\n \r\n
\r\n {panelProps.resultType == \"address\" ? (\r\n // \r\n // \r\n //
\r\n //
\r\n // \r\n //
\r\n // \r\n // \r\n //
\r\n // \r\n // \r\n // {pageSettings.language === \"en\" ? \"عربى\" : \"English\"}\r\n // \r\n // \r\n // console.log(\"Open Drawer\")}\r\n // >\r\n // \r\n // \r\n // \r\n // {\r\n // history.push(\"/Map\");\r\n // handleClose();\r\n // }}\r\n // >\r\n // {t(\"Addressing\")}\r\n // \r\n // {\r\n // history.push(\"/Contact\");\r\n // handleClose();\r\n // }}\r\n // >\r\n // {t(\"Contact\")}\r\n // \r\n // {!pageSettings.isLoggedIn ? (\r\n // {\r\n // history.push(\"/Login\");\r\n // handleClose();\r\n // }}\r\n // >\r\n // {\" \"}\r\n // {t(\"SignIn\")}\r\n // \r\n // ) : pageSettings.userCredentials.user ? (\r\n // pageSettings.userCredentials.user.userTypeName ===\r\n // \"External\" ? (\r\n // {\r\n // history.push(\"/Login\");\r\n // handleClose();\r\n // handleSignClose();\r\n // }}\r\n // >\r\n // {t(\"Reset\")}\r\n // \r\n // ) : (\r\n // \"\"\r\n // )\r\n // ) : (\r\n // \"\"\r\n // )}\r\n // {pageSettings.isLoggedIn ? (\r\n // {\r\n // handleSignout();\r\n // handleClose();\r\n // }}\r\n // >\r\n // {t(\"logout\")}\r\n // \r\n // ) : (\r\n // \"\"\r\n // )}\r\n // \r\n // \r\n // \r\n // \r\n //
\r\n // \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n console.log(\"Open Drawer\")}\r\n >\r\n \r\n \r\n \r\n {\r\n history.push(\"/Map\");\r\n handleClose();\r\n }}\r\n >\r\n {t(\"Addressing\")}\r\n \r\n {\r\n history.push(\"/Contact\");\r\n handleClose();\r\n }}\r\n >\r\n {t(\"Contact\")}\r\n \r\n {!pageSettings.isLoggedIn ? (\r\n {\r\n history.push(\"/Login\");\r\n handleClose();\r\n }}\r\n >\r\n {\" \"}\r\n {t(\"SignIn\")}\r\n \r\n ) : pageSettings.userCredentials.user ? (\r\n pageSettings.userCredentials.user.userTypeName ===\r\n \"External\" ? (\r\n {\r\n history.push(\"/Login\");\r\n handleClose();\r\n handleSignClose();\r\n }}\r\n >\r\n {t(\"Reset\")}\r\n \r\n ) : (\r\n \"\"\r\n )\r\n ) : (\r\n \"\"\r\n )}\r\n {pageSettings.isLoggedIn ? (\r\n {\r\n handleSignout();\r\n handleClose();\r\n }}\r\n >\r\n {t(\"logout\")}\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n {pageSettings.language === \"en\" ? \"عربى\" : \"English\"}\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n Welcome to RAK MAPS\r\n \r\n \r\n \r\n \r\n
\r\n Bring your solutions to life with GIS data and APIs..
\r\n\r\n Get started and benefit from the power of location by Ras al\r\n khaimah municipality's GIS Centre most comprehensive GIS\r\n Solutions into your finger tips.\r\n
\r\n \r\n\r\n NavigateMap(\"Map\")}\r\n >\r\n Launch RAK MAP\r\n \r\n NavigateMap(\"Contact\")}\r\n >\r\n Contact Us\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Welcome to RAK MAPS \r\n \r\n \r\n \r\n NavigateMap(\"Map\")}\r\n >\r\n Launch RAK MAP\r\n \r\n
\r\n Bring your solutions to life with GIS data and APIs..
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default Contact;\r\n","export default __webpack_public_path__ + \"static/media/BackImage.e20bd65d.png\";","import React, { useEffect, useState } from \"react\";\r\nimport Avatar from \"@material-ui/core/Avatar\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport { Grid, LinearProgress } from \"@material-ui/core\";\r\nimport { Alert, AlertTitle } from \"@material-ui/lab\";\r\nimport LockOutlinedIcon from \"@material-ui/icons/LockOutlined\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport slide1 from \"../assets/img/slide/BackImage.png\";\r\nimport axios from \"axios\";\r\nimport { useDispatch, connect } from \"react-redux\";\r\nimport { setUserCredentials } from \"../redux/actions/appSettingsActions\";\r\nimport CryptoJS from \"crypto-js\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { appConifg } from \"../config/default\";\r\nimport LoginBtn from \"../assets/img/UAEPass_LoginButton_Green.png\";\r\nimport LoginBtn_AR from \"../assets/img/AR_UAEPass_LoginButton_Green.png\";\r\nimport LoginBtn_pressed from \"../assets/img/UAEPass_LoginButton_Green_Pressed.png\";\r\nimport LoginBtn_AR_pressed from \"../assets/img/AR_UAEPass_LoginButton_Green_Pressed.png\";\r\nimport { useCookies } from \"react-cookie\";\r\nimport ReactGA from \"react-ga\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n root: {\r\n height: \"100vh\",\r\n },\r\n image: {\r\n backgroundImage: \"url(\" + slide1 + \")\",\r\n backgroundRepeat: \"no-repeat\",\r\n backgroundColor:\r\n theme.palette.type === \"light\"\r\n ? theme.palette.grey[50]\r\n : theme.palette.grey[900],\r\n backgroundSize: \"cover\",\r\n backgroundPosition: \"center\",\r\n },\r\n paper: {\r\n margin: theme.spacing(8, 4),\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n },\r\n avatar: {\r\n margin: theme.spacing(1),\r\n backgroundColor: theme.palette.secondary.main,\r\n },\r\n form: {\r\n width: \"100%\", // Fix IE 11 issue.\r\n marginTop: theme.spacing(1),\r\n },\r\n submit: {\r\n margin: theme.spacing(3, 0, 2),\r\n },\r\n}));\r\n\r\nconst LoginPage = (props) => {\r\n const dispatch = useDispatch();\r\n const classes = useStyles();\r\n // const [isLogin, setIsLogin] = useState(\r\n // props.settings.isLoggedIn == null\r\n // );\r\n const [password, setPassword] = useState(\"\");\r\n const [username, setUsername] = useState(\"\");\r\n const [isRemember, setIsRemember] = useState(true);\r\n const [isPressed, setIsPressed] = useState(false);\r\n const [currentPassword, setCurrentPassword] = useState(\"\");\r\n const [newPassword, setNewPassword] = useState(\"\");\r\n const [confirmPassword, setConfirmPassword] = useState(\"\");\r\n const [showAlert, setShowAlert] = useState(false);\r\n const [alertType, setAlertType] = useState(\"\");\r\n const [alertMsg, setAlertMsg] = useState(\"\");\r\n const history = useHistory();\r\n const [isLoading, setIsLoading] = useState(false);\r\n const { t, i18n } = useTranslation(\"loginPage\");\r\n const [cookiesStore, setCookieStore] = useCookies([\"store\", \"langauge\"]);\r\n\r\n useEffect(() => {\r\n if (localStorage.getItem(\"RAK_ADDRESSING_userCreds\")) {\r\n let bytes = CryptoJS.AES.decrypt(\r\n localStorage.getItem(\"RAK_ADDRESSING_userCreds\"),\r\n \"rakaddressing-secret-key@123\"\r\n );\r\n let userCreds = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));\r\n setUsername(userCreds.username);\r\n setPassword(userCreds.password);\r\n }\r\n }, []);\r\n\r\n const handleLogin = () => {\r\n setShowAlert(false);\r\n setIsLoading(true);\r\n if (isRemember) {\r\n let data = { username: username, password: password };\r\n let cipherUsercreds = CryptoJS.AES.encrypt(\r\n JSON.stringify(data),\r\n \"rakaddressing-secret-key@123\"\r\n ).toString();\r\n localStorage.setItem(\"RAK_ADDRESSING_userCreds\", cipherUsercreds);\r\n } else {\r\n if (localStorage.getItem(\"RAK_ADDRESSING_userCreds\"))\r\n localStorage.removeItem(\"RAK_ADDRESSING_userCreds\");\r\n }\r\n let data = {};\r\n let axiosConfig = {\r\n headers: {\r\n username: username,\r\n password: password,\r\n },\r\n };\r\n axios\r\n .post(appConifg.Address.AddressApiUrl + \"/Users/Login\", data, axiosConfig)\r\n .then((response) => {\r\n setIsLoading(false);\r\n console.log(response);\r\n if (response.data?.isSucceeded) {\r\n dispatch(\r\n setUserCredentials({ data: response.data.data, flag: true })\r\n );\r\n ReactGA.event({\r\n category: \"User\",\r\n action: \"Login\",\r\n });\r\n history.push(\"/\" + props.settings.activePage);\r\n } else {\r\n setAlertType(\"error\");\r\n setAlertMsg(t(\"invalidMsg1\"));\r\n setShowAlert(true);\r\n }\r\n })\r\n .catch((ex) => {\r\n setIsLoading(false);\r\n setAlertType(\"error\");\r\n setAlertMsg(ex);\r\n\r\n setShowAlert(true);\r\n });\r\n };\r\n useEffect(() => {\r\n // setIsLogin(props.settings.userCredentials == null);\r\n\r\n setShowAlert(false);\r\n }, [props.settings.isLoggedIn]);\r\n\r\n const requestUaePass = () => {\r\n setIsPressed(true);\r\n if (props.addressingResult)\r\n setCookieStore(\"store\", JSON.stringify(props.addressingResult), {\r\n path: \"/\",\r\n });\r\n setCookieStore(\"language\", JSON.stringify(props.settings.language), {\r\n path: \"/\",\r\n });\r\n window.location.replace(\r\n appConifg.UaePassDetails.loginUrl +\r\n \"?redirect_uri=\" +\r\n appConifg.UaePassDetails.redirectUrl +\r\n \"&client_id=\" +\r\n appConifg.UaePassDetails.clientId +\r\n \"&response_type=code&state=\" +\r\n props.settings.activePage +\r\n \"&scope=urn:uae:digitalid:profile:general&acr_values=urn:safelayer:tws:policies:authentication:level:low\"\r\n );\r\n };\r\n\r\n const handleResetPassword = () => {\r\n setIsLoading(true);\r\n setShowAlert(false);\r\n let data = {\r\n UserName: props.settings.userCredentials.user.userName,\r\n OldPassword: currentPassword,\r\n NewPassword: newPassword,\r\n };\r\n let axiosConfig = {\r\n headers: {\r\n Authorization:\r\n \"Bearer \" + props.settings.userCredentials.token.access_token,\r\n },\r\n };\r\n if (newPassword !== confirmPassword) {\r\n setIsLoading(false);\r\n setAlertType(\"error\");\r\n setAlertMsg(t(\"invalidMsg2\"));\r\n setShowAlert(true);\r\n return;\r\n }\r\n axios\r\n .post(\r\n appConifg.Address.AddressApiUrl + \"/Users/ResetExternalUserpassword\",\r\n data,\r\n axiosConfig\r\n )\r\n .then((response) => {\r\n setIsLoading(false);\r\n if (response.data?.isSucceeded) {\r\n setAlertType(\"success\");\r\n setAlertMsg(t(\"successMsg1\"));\r\n setShowAlert(true);\r\n } else {\r\n setAlertType(\"error\");\r\n setAlertMsg(response.data.status.message);\r\n setShowAlert(true);\r\n }\r\n })\r\n .catch((ex) => {\r\n setIsLoading(false);\r\n setAlertType(\"error\");\r\n setAlertMsg(ex);\r\n setShowAlert(true);\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n {t(\"Location\")}
\r\n{t(\"Address\")}
\r\n\r\n \r\n
\r\n\r\n {t(\"Email\")}
\r\ngis.helpdesk@mun.rak.ae
\r\n\r\n \r\n
\r\n {t(\"Call\")}
\r\n+971 7 246 6666
\r\n\r\n \r\n
\r\n\r\n {/* */}\r\n {/* \r\n
*/}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Loading
\r\n \r\n \r\n Your message has been sent. Thank you!\r\n
\r\n \r\n \r\n
\r\n */}\r\n {/* \r\n \r\n \r\n \r\n {t(\"Signin\")}\r\n \r\n
\r\n \r\n
\r\n{t(\"OrTag\")} \r\n
\r\n \r\n
\r\n {showAlert ? (\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n // \r\n // \r\n // \r\n // Sign up\r\n // \r\n // \r\n //
\r\n // \r\n \r\n \r\n \r\n {t(\"ResetPwd\")}\r\n \r\n \r\n
\r\n {showAlert ? (\r\n \r\n {!timeUp ? (\r\n <>{props.children}\r\n ) : (\r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nexport default TimeOutHOC;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Button, Grid } from \"@material-ui/core\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogActions from \"@material-ui/core/DialogActions\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogContentText from \"@material-ui/core/DialogContentText\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport ReportProblemOutlinedIcon from \"@material-ui/icons/ReportProblemOutlined\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useDispatch, connect } from \"react-redux\";\r\nimport { setAlert } from \"../redux/actions/appSettingsActions\";\r\nimport { Markup } from \"interweave\";\r\n\r\nfunction AlertDialog(props) {\r\n const { t, i18n } = useTranslation(\"timeOutPage\");\r\n const dispatch = useDispatch();\r\n\r\n const handleClose = () => {\r\n dispatch(setAlert({ isAlert: false, alertMsg: \"\" }));\r\n };\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n settings: state.settings,\r\n };\r\n};\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {};\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AlertDialog);\r\n","import React, { useEffect, useState } from \"react\";\r\nimport MapWrapper from \"./components/map/mapWrapper\";\r\nimport Header from \"./components/header\";\r\nimport HomePage from \"./components/home/homePage\";\r\nimport LoginUaePassCallback from \"./components/LoginUaePassCallback\";\r\nimport Contact from \"./components/contact\";\r\nimport LoginPage from \"./components/login\";\r\nimport ShowAddress from \"./components/showAddress\";\r\nimport PageNotFound from \"./components/PageNotFound\";\r\nimport {\r\n Route,\r\n Switch,\r\n Redirect,\r\n BrowserRouter as Router,\r\n} from \"react-router-dom\";\r\nimport \"@esri/calcite-components/dist/calcite/calcite.css\";\r\nimport \"bootstrap/dist/css/bootstrap.min.css\";\r\nimport \"./assets/vendor/animate.css/animate.min.css\";\r\nimport \"./assets/vendor/bootstrap/css/bootstrap.min.css\";\r\nimport \"./assets/vendor/bootstrap-icons/bootstrap-icons.css\";\r\nimport \"./assets/vendor/boxicons/css/boxicons.min.css\";\r\nimport \"./assets/vendor/glightbox/css/glightbox.min.css\";\r\nimport \"./assets/vendor/remixicon/remixicon.css\";\r\nimport \"./assets/vendor/swiper/swiper-bundle.min.css\";\r\nimport \"./assets/css/style.css\";\r\nimport \"./assets/css/splash-screen.css\";\r\nimport axios from \"axios\";\r\nimport { useDispatch, connect } from \"react-redux\";\r\nimport {\r\n setAnonymousUser,\r\n setUserCredentials,\r\n} from \"./redux/actions/appSettingsActions\";\r\n\r\nimport toast, { Toaster } from \"react-hot-toast\";\r\nimport { ToastProvider, useToasts } from \"react-toast-notifications\";\r\n\r\nimport { ThemeProvider } from \"@material-ui/styles\";\r\nimport theme from \"./components/ui/Theme\";\r\n\r\nimport { appConifg } from \"./config/default\";\r\nimport TimeOutHOC from \"./components/TimeOutHOC\";\r\nimport AlertDialog from \"./components/AlertDialog\";\r\nimport { CookiesProvider } from \"react-cookie\";\r\nimport ReactGA from \"react-ga\";\r\n\r\nconst LoadingMessage = () => {\r\n return (\r\n \r\n Wait a moment while we load your app....\r\n
\r\n );\r\n};\r\nfunction App() {\r\n // @udaya #For-MapOptions\r\n const [showMap, setShowMap] = useState(1);\r\n\r\n const dispatch = useDispatch();\r\n const [isLoading, setIsLoading] = useState(true);\r\n useEffect(() => {\r\n let data = {};\r\n let axiosConfig = {\r\n headers: {\r\n username: appConifg.AnonymousUser.username,\r\n password: appConifg.AnonymousUser.password,\r\n },\r\n };\r\n axios\r\n .post(appConifg.Address.AddressApiUrl + \"/Users/Login\", data, axiosConfig)\r\n .then((response) => {\r\n console.log(response);\r\n if (response.data?.isSucceeded) {\r\n dispatch(\r\n setUserCredentials({ data: response.data.data, flag: false })\r\n );\r\n setIsLoading(false);\r\n } else {\r\n console.log(\"Error Login as Anonymous user\");\r\n setIsLoading(false);\r\n }\r\n })\r\n .catch((ex) => {\r\n console.log(ex);\r\n setIsLoading(false);\r\n });\r\n ReactGA.initialize(\"UA-210379103-1\");\r\n ReactGA.pageview(window.location.pathname + window.location.search);\r\n }, []);\r\n return !isLoading ? (\r\n .
\r\n \r\n
\r\n