\n
\n);\nexport default ResultItem;\n","import React, { useState, useEffect } from 'react';\nimport { LocationSearch, SubmitButton } from '../Search';\n\nconst ResultsSearch = props => {\n const [loading, setLoading] = useState(false);\n const [location, setLocation] = useState(props.area);\n const [locationValid, setLocationValid] = useState(true);\n\n useEffect(() => {\n if (location !== '') {\n setLocationValid(true);\n } else {\n setLocationValid(false);\n }\n }, [location]);\n\n const handleSubmit = e => {\n if (!locationValid) {\n e.preventDefault();\n return false;\n }\n setLoading(true);\n };\n\n return (\n \n );\n};\n\nexport default ResultsSearch;\n","import React from 'react';\n\nconst Button = ({active, onClick, children}) => (\n \n
\n \n
\n \n {result.name}
\n {result.distance && result.distance != 0 ? (\n \n {result.distance} {result.distance > 1 ? 'miles' : 'mile'} away\n \n ) : null}\n\n
\n \n {result.address}, {result.town}, {result.postcode}\n
\n\n {showPaginateButtons() && (\n
\n );\n};\n\nexport default Pagination;\n","import React from 'react';\nimport { InfoWindow } from '@react-google-maps/api';\n\nconst MapInfoWindow = ({ selectedMarker, handleClose, ...props }) => {\n return (\n \n
\n )}\n Page {page} of {pages}\n \n Previous Page \n Next Page \n
\n \n \n Book Your Scan Here\n \n
\n \n );\n};\n\nexport default MapInfoWindow;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { LoadScript, GoogleMap, Marker } from '@react-google-maps/api';\nimport MapInfoWindow from './MapInfoWindow';\nimport markerSvg from '../Icons/Marker.svg';\n\nconst Map = props => {\n const [map, setMap] = useState(null);\n\n const containerStyle = {\n width: '100%',\n height: '100%',\n };\n\n const options = {\n zoomControl: true,\n mapTypeControl: false,\n scaleControl: false,\n streetViewControl: false,\n rotateControl: false,\n clickableIcons: false,\n };\n\n const setBounds = () => {\n if (map) {\n const bounds = new window.google.maps.LatLngBounds();\n props.markers.map(marker => {\n bounds.extend({\n lat: marker.latitude || 0,\n lng: marker.longitude || 0,\n });\n });\n map.fitBounds(bounds);\n }\n };\n\n const panToMarker = (coordinates, zoom = 14) => {\n if (map) {\n map.panTo(coordinates);\n map.setZoom(zoom);\n }\n };\n\n useEffect(() => {\n if (props.selectedResult) {\n panToMarker({ lat: props.selectedResult.latitude || 0, lng: props.selectedResult.longitude || 0 });\n } else {\n setBounds();\n }\n }, [props.selectedResult]);\n\n useEffect(() => {\n if (props.markers.length == 1) {\n panToMarker({ lat: props.markers[0].latitude, lng: props.markers[0].longitude }, 11);\n } else {\n setBounds();\n }\n props.setSelectedResult(null);\n }, [map, props.markers]);\n\n const onLoad = useCallback(map => setMap(map), []);\n\n return (\n \n
\n \n
\n {selectedMarker.name}
\n\n {selectedMarker.address}, {selectedMarker.town}, {selectedMarker.postcode}\n
\n\n 
\n
\n);\n\nexport default PlaceholderMap;\n","import React, { useState, useEffect, useRef } from 'react';\nimport ResultItem from './ResultItem';\nimport ResultsSearch from './ResultsSearch';\nimport Pagination from './Pagination/Pagination';\nimport GoogleMap from '../Map/Map';\nimport PlaceholderMap from './PlaceholderMap';\nimport styled from 'styled-components';\nimport ReactDOM from 'react-dom';\nimport { scrollToRef } from '../utils';\n\nconst pageSize = 5;\nconst filterData = {\n sortingItems: ['distance', 'price'],\n searchRadiusItems: ['25 Miles', '50 Miles', '75 Miles', '100 Miles', '150 Miles', '200 Miles', 'Maximum'],\n scanTypes: ['all', 'rapid'],\n};\n\n// const Container = styled.div`\n// @media (min-width: 1024px) {\n// height: calc(100vh - 125px);\n// }\n// `;\n\nconst Results = props => {\n const area = props.results.area;\n const locations = props.results.results;\n const currentUserId = props.currentUserId;\n\n const [filteredLocations, setFilteredLocations] = useState(null);\n const [results, setResults] = useState(null);\n const [selectedResult, setSelectedResult] = useState(null);\n const [page, setPage] = useState(1);\n const [filters, setFilters] = useState([\n {\n name: 'type',\n filter: filterData.scanTypes[0],\n fnc: typeFilter,\n },\n {\n name: 'radius',\n filter: filterData.searchRadiusItems[0],\n fnc: radiusFilter,\n },\n ]);\n const [sorting, setSorting] = useState({\n sortBy: filterData.sortingItems[0],\n sortAsc: true,\n });\n\n const handleBooking = (e, result) => {\n e.stopPropagation();\n window\n .fetch('/draft_orders', {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n scanning_location_id: result.id\n }),\n })\n .then(res => {\n return res.json();\n })\n .then(data => {\n window.location.href = data.redirect_url;\n });\n };\n\n const resultsRef = useRef();\n const mapsRef = useRef();\n\n const handleResultClick = result => {\n setSelectedResult(result);\n scrollToRef(mapsRef);\n };\n\n let prevFilters = useRef(filters).current;\n\n useEffect(() => {\n // refactor this\n\n const radiusIndex = filters.findIndex(f => f.name === 'radius');\n\n // On change of a filter other than radius, set radius to minimum for a page of results\n if (filters[radiusIndex] === prevFilters[radiusIndex]) {\n const filteredExceptRadius = locations.filter(location =>\n filters.every(filter => {\n if (filter.name !== 'radius') {\n return filter.fnc(location, filter.filter);\n }\n return true;\n })\n );\n const minRadius = getMinSearchRadius(filteredExceptRadius);\n\n if (minRadius !== filters[radiusIndex].filter) {\n changeFilter('radius', minRadius);\n }\n }\n\n // Filter, sort and display results\n const filtered = locations.filter(location => filters.every(filter => filter.fnc(location, filter.filter)));\n const filteredSorted = filtered.sort((a, b) => sort(a, b, sorting.sortBy));\n setFilteredLocations(filteredSorted);\n setResults(paginate(filteredSorted));\n\n return () => {\n prevFilters[radiusIndex] = filters[radiusIndex];\n };\n }, [filters]);\n\n useEffect(() => {\n if (haveFilteredLocations()) {\n setFilteredLocations(state => [...state].sort((a, b) => sort(a, b, sorting.sortBy)));\n }\n }, [sorting]);\n\n useEffect(() => {\n if (haveFilteredLocations()) {\n setResults(paginate(filteredLocations));\n }\n }, [page, filteredLocations]);\n\n function haveFilteredLocations() {\n return filteredLocations && filteredLocations.length > 0;\n }\n\n function paginate(locations) {\n return [...locations].slice((page - 1) * pageSize, page * pageSize);\n }\n\n function getMinSearchRadius(locations) {\n let radius = filterData.searchRadiusItems[0];\n filterData.searchRadiusItems.every(newRadius => {\n const newRadiusLength = [...locations].filter(location => radiusFilter(location, newRadius)).length;\n if (newRadiusLength >= pageSize || newRadius === 'Maximum') {\n radius = newRadius;\n return false;\n }\n return true;\n });\n return radius;\n }\n\n function changeFilter(name, filter) {\n const index = findFilterIndex(name);\n const filtersCopy = [...filters];\n filtersCopy[index] = { ...filtersCopy[index], filter: filter };\n setFilters(filtersCopy);\n }\n\n function findFilter(name) {\n return filters.find(f => f.name === name);\n }\n\n function findFilterIndex(name) {\n return filters.findIndex(f => f.name === name);\n }\n\n function radiusFilter(location, radius) {\n if (radius === 'Maximum') {\n return location;\n }\n return location.distance <= formatSearchRadius(radius);\n }\n\n function typeFilter(location, type) {\n if (type === 'all') {\n return location;\n }\n return location[type];\n }\n\n function formatSearchRadius(radius) {\n return +radius.replace(/\\D/g, '');\n }\n\n function sort(a, b, sortBy) {\n if (sorting.sortAsc) {\n return a[sortBy] - b[sortBy];\n }\n return b[sortBy] - a[sortBy];\n }\n\n const nothingFoundNotice = (\n \n
\n );\n\n if (props.results.length == 0) {\n return No results found
\nWe couldn't find any available scanning centres using your search criteria.
\n\n Try expanding your search radius to include more scanning centres, or remove some filters.\n
\n{nothingFoundNotice}
;\n }\n\n return (\n \n
\n );\n};\n\nexport default Results;\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const node = document.getElementById('results');\n const data = JSON.parse(node.getAttribute('data'));\n const results = JSON.parse(data.results);\n\n ReactDOM.render(\n
\n {haveFilteredLocations() ? (\n \n
\n Choose a scanning centre
\nFind a convenient scanning centre to have your full body scan at.
\n\n {results &&\n results.map(result => (\n handleResultClick(result)}\n handleBooking={e => handleBooking(e, result)}\n />\n ))}\n
\n {haveFilteredLocations() ? (\n \n
\n ) : (\n \n
\n