\r\n \r\n
\r\n );\r\n}","import React from 'react';\r\n\r\nexport default function IncludeUnderOfferCheckbox(props) {\r\n \r\n function handleChange(event) {\r\n if (props.handleChange) {\r\n props.handleChange(event.target.checked, \"underOffer\");\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n );\r\n}","import React from 'react';\r\n\r\nexport default class PickFromMapButton extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n Pick from map\r\n
\r\n )\r\n }\r\n}","import React from 'react';\r\nimport LocationsAutocomplete from '../Common/locations-autocomplete.jsx';\r\nimport PickFromMapButton from './pick-from-map-button.jsx';\r\nimport SubmitButton from './submit-button.jsx';\r\n\r\nexport default class LocationsInput extends React.Component {\r\n constructor(props) {\r\n super(props); \r\n }\r\n\r\n render() {\r\n let classname = \"search-form__location flex-search home searchInput\"\r\n let pickfromMapButton = \r\n \r\n
\r\n )\r\n }\r\n}","import React from 'react'; // needed for non-SSR route\r\n\r\nexport default function MinBedsSelect(props) {\r\n\r\n function handleChange(event) {\r\n if (props.handleChange) {\r\n props.handleChange(event.target.value, props.inputName);\r\n }\r\n }\r\n\r\n return (\r\n \r\n );\r\n}","import React from 'react';\r\n\r\nexport default function NewCheckbox(props) {\r\n\r\n function handleChange(event) {\r\n if (props.handleChange) {\r\n props.handleChange(event.target.checked ? event.target.value : '', \"new\")\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n )\r\n}","/* Handles changes to price on the three home page forms (buy, rent, schools) \r\n * Function is imported and bound to 'this' in the component constructor, so it behaves like a class method\r\n */\r\nexport default function handlePriceChange(value, name, rental = false) {\r\n let otherPrice = name === 'minPrice' ? 'maxPrice' : 'minPrice';\r\n let p = parseInt(this.state[otherPrice]);\r\n let data = {};\r\n data[name] = value;\r\n this.props.saveSearchFilter(value, name, rental);\r\n // If a value is selected for the other price, adjust it if required\r\n if (!isNaN(p) && (name === 'minPrice' && p < parseInt(value) || name === 'maxPrice' && p > parseInt(value))) {\r\n data[otherPrice] = value;\r\n this.props.saveSearchFilter(value, otherPrice, rental);\r\n }\r\n this.setState(data);\r\n}","import React from 'react'; // needed for non-SSR route\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default function PriceSelect(props) {\r\n\r\n function handleChange(event) {\r\n if (props.handleChange) {\r\n props.handleChange(event.target.value, props.inputName, props.rental);\r\n }\r\n }\r\n\r\n if (props.rental) {\r\n return (\r\n \r\n );\r\n }\r\n return (\r\n \r\n );\r\n}\r\n\r\nPriceSelect.propTypes = {\r\n inputId: PropTypes.string.isRequired,\r\n inputName: PropTypes.string.isRequired,\r\n rental: PropTypes.bool\r\n}","import React from 'react';\r\n\r\nexport default function PropertyTypeSelect(props) {\r\n\r\n function handleChange(event) {\r\n if (props.handleChange) {\r\n props.handleChange(event.target.value, props.inputName);\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n","import React from 'react';\r\n\r\nexport default class SearchBoxTabHeader extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {this.props.children}\r\n
\r\n )\r\n }\r\n}","import React from 'react';\r\nimport LocationsInput from './locations-input.jsx';\r\nimport NewCheckbox from './new-checkbox.jsx';\r\nimport AdvancedSearchButton from './advanced-search-button.jsx';\r\nimport SubmitButton from './submit-button.jsx';\r\nimport HomepageSelect from './homepage-select.jsx';\r\nimport MinBedsSelect from './min-beds-select.jsx';\r\nimport PriceSelect from './price-select.jsx';\r\nimport PropertyTypeSelect from './property-type-select.jsx';\r\nimport handlePriceChange from './price-change-util.js';\r\n\r\nexport default class RentForm extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleInputValueChange = this.handleInputValueChange.bind(this);\r\n this.handleLocationChange = this.handleLocationChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.handleFormChange = this.handleFormChange.bind(this);\r\n this.handlePriceChange = handlePriceChange.bind(this);\r\n this.state = props.getSearchFilters(\"rent\");\r\n this.state.selectedLocation = null;\r\n this.state.locationInputValue = '';\r\n this.state.placeholder = \"Enter location\";\r\n this.state.rental = true;\r\n }\r\n\r\n handleInputValueChange(event, value) {\r\n this.setState((currentState, currentProps) => {\r\n return {\r\n selectedLocation: \"\",\r\n locationInputValue: value\r\n };\r\n });\r\n }\r\n\r\n handleLocationChange(value, item) {\r\n this.setState((currentState, currentProps) => {\r\n return {\r\n selectedLocation: item,\r\n locationInputValue: value,\r\n };\r\n });\r\n }\r\n\r\n handleSubmit(event) {\r\n if (this.state.locationInputValue == '' || this.state.locationInputValue.length > 2) {\r\n GA.track(\"ToRent\");\r\n }\r\n else {\r\n // Don't allow a location length of 1. For a location length of 2, it must be a letter followed by a number\r\n var regex = /^[a-zA-Z]{1}[1-9]{1}$/\r\n if (!regex.test(this.state.locationInputValue)) {\r\n alert(\"Please continue typing or select an option from the drop down menu\");\r\n event.preventDefault(); // Prevent the form being submitted\r\n }\r\n else {\r\n GA.track(\"ToRent\");\r\n }\r\n }\r\n }\r\n\r\n handleFormChange(value, name) {\r\n let data = {};\r\n data[name] = value;\r\n this.props.saveSearchFilter(value, name, true);\r\n this.setState(data);\r\n }\r\n\r\n render() {\r\n let advancedSearchUrl = this.props.createUrl(this.state, \"advanced-search\");\r\n let mapRadiusSearchUrl = this.props.createUrl(this.state, \"map-radius-search\");\r\n return (\r\n \r\n )\r\n }\r\n}","import React, { Component } from 'react'; // needed for non-SSR route\r\n//import Autocomplete from 'react-autocomplete'; // not used\r\nimport PropTypes from 'prop-types';\r\nimport EspcAutocomplete from './espc-autocomplete.jsx';\r\nimport axios from 'axios';\r\n\r\nexport default class SchoolsAutocomplete extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleSelect = this.handleSelect.bind(this);\r\n this.updateSuggestions = this.updateSuggestions.bind(this);\r\n // assuming list of suggestions is something internal to the component\r\n // decided to store it in state\r\n this.state = {\r\n schools: []\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (this.props.value !== nextProps.value) {\r\n // TODO - debounce\r\n this.updateSuggestions(nextProps.value);\r\n }\r\n }\r\n\r\n updateSuggestions(text) {\r\n if (text) {\r\n axios.post('/schools/autocomplete', {\r\n query: text,\r\n size: this.props.size\r\n }).then(response => {\r\n if (response.data) {\r\n // need to add index to items in order to add different css class depending if the item index is odd\r\n let indexedItems = response.data.map((item, index, array) => ({ index: index, item: { ...item, key: item.id } }));\r\n this.setState({ schools: indexedItems });\r\n }\r\n else {\r\n this.setState({ schools: [] });\r\n }\r\n });\r\n }\r\n else {\r\n this.setState({ schools: [] });\r\n }\r\n }\r\n\r\n handleChange(event, value) {\r\n if (typeof this.props.onChange !== 'undefined') {\r\n this.props.onChange(event, value);\r\n }\r\n }\r\n\r\n handleSelect(value, item) {\r\n if (typeof this.props.onSelect !== 'undefined') {\r\n this.props.onSelect(value, item.item);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n}","import React from 'react';\r\nimport SchoolsInput from './schools-input.jsx';\r\nimport NewCheckbox from './new-checkbox.jsx';\r\nimport IncludeUnderOfferCheckbox from './include-under-offer-checkbox.jsx';\r\nimport SubmitButton from './submit-button.jsx';\r\nimport handlePriceChange from './price-change-util.js';\r\nimport HomepageSelect from './homepage-select.jsx';\r\nimport MinBedsSelect from './min-beds-select.jsx';\r\nimport PriceSelect from './price-select.jsx';\r\nimport PropertyTypeSelect from './property-type-select.jsx';\r\n\r\nexport default class SchoolsForm extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleInputValueChange = this.handleInputValueChange.bind(this);\r\n this.handleSchoolChange = this.handleSchoolChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.handleFormChange = this.handleFormChange.bind(this);\r\n this.handlePriceChange = handlePriceChange.bind(this);\r\n\r\n this.state = props.getSearchFilters(\"buy\");\r\n this.state.selectedSchool = null;\r\n this.state.selectedSchoolText = null;\r\n this.state.schoolInputValue = '';\r\n }\r\n\r\n handleInputValueChange(event, value) {\r\n this.setState((currentState, currentProps) => {\r\n return { schoolInputValue: value };\r\n });\r\n }\r\n\r\n handleSchoolChange(value, item) {\r\n this.setState((currentState, currentProps) => {\r\n return {\r\n selectedSchool: item,\r\n selectedSchoolText: value,\r\n schoolInputValue: value,\r\n };\r\n });\r\n }\r\n\r\n handleSubmit(event) {\r\n if (!this.state.selectedSchool || this.state.schoolInputValue.trim() != this.state.selectedSchoolText) {\r\n event.preventDefault();\r\n alert(\"Please select a school\");\r\n } else {\r\n GA.track(\"SchoolSearch\");\r\n }\r\n }\r\n\r\n handleFormChange(value, name) {\r\n let data = {};\r\n data[name] = value;\r\n this.props.saveSearchFilter(value, name, false);\r\n this.setState(data);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}","import React from 'react';\r\nimport LocationsInput from './locations-input.jsx';\r\nimport SubmitButton from './submit-button.jsx';\r\n\r\nexport default class PastSalesForm extends React.Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.handleInputValueChange = this.handleInputValueChange.bind(this);\r\n this.handleLocationChange = this.handleLocationChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.setPtypeRef = this.setPtypeRef.bind(this);\r\n this.state = {\r\n selectedLocation: null,\r\n locationInputValue: ''\r\n }\r\n }\r\n\r\n handleInputValueChange(event, value) {\r\n this.setState((currentState, currentProps) => {\r\n return { locationInputValue: value };\r\n });\r\n }\r\n\r\n handleLocationChange(value, item) {\r\n this.setState((currentState, currentProps) => {\r\n return {\r\n selectedLocation: item,\r\n locationInputValue: value,\r\n };\r\n });\r\n }\r\n\r\n handleSubmit(e) {\r\n if (this.state.selectedLocation === null) {\r\n alert(\"Please select a location\");\r\n e.preventDefault();\r\n } else {\r\n GA.track(\"PastSalesSearch\");\r\n // if ptype is empty string (any) don't include it by removing the input name\r\n // this is so the empty parameter is not included when form is submitted (method=GET)\r\n if (!this.ptypeSelect.value) {\r\n this.ptypeSelect.removeAttribute('name');\r\n }\r\n }\r\n }\r\n\r\n setPtypeRef(ptypeSelect) {\r\n this.ptypeSelect = ptypeSelect;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}","import React from 'react';\r\nimport { createRoot } from 'react-dom/client';\r\nimport SearchBoxTabHeader from './search-box-tab-header.jsx';\r\nimport TabsController from './tabs-controller.jsx';\r\nimport BuyForm from './buy-form.jsx';\r\nimport RentForm from './rent-form.jsx';\r\nimport SchoolsForm from './schools-form.jsx';\r\nimport PastSalesForm from './past-sales-form.jsx';\r\nimport { createSearchUrl } from '../Search/search-query';\r\n \r\nclass SearchBox extends React.Component {\r\n static init(id) {\r\n createRoot(document.getElementById(id)).render(\r\n \r\n \r\n
\r\n )}\r\n}\r\n\r\nif (typeof window !== 'undefined') {\r\n window.homepageInit = SearchBox.init;\r\n}\r\n ","import React from 'react';\r\n\r\nexport default class SubmitButton extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n \r\n render() {\r\n return (\r\n \r\n )\r\n }\r\n}","import React, { Component } from 'react'; // needed for non-SSR route\r\nimport PropTypes from 'prop-types';\r\nimport loadScript from 'load-script';\r\nimport {loadCSS} from 'fg-loadcss';\r\n\r\nexport default class LeafletMap extends Component {\r\n\r\n static defaultProps = {\r\n trackResize: true\r\n }\r\n\r\n constructor(props) {\r\n super(props);\r\n // this passes the reference of the map container DOM node up to the parent\r\n // needed to calculate height of the map dynamically\r\n this.mapContainerRefCallback = this.mapContainerRefCallback.bind(this);\r\n this.state = { mapLoading: true };\r\n this.initialBoundsChange = true;\r\n this.onMoveEnd = this.onMoveEnd.bind(this);\r\n }\r\n\r\n mapContainerRefCallback(container) {\r\n if (this.props.mapContainerRefCallback) {\r\n this.props.mapContainerRefCallback(container);\r\n }\r\n this.mapContainer = container;\r\n }\r\n\r\n renderChildren() {\r\n const { children } = this.props;\r\n\r\n if (!children || !this.map) return;\r\n\r\n return React.Children.map(children, c => {\r\n if (!c) return;\r\n return React.cloneElement(c, {\r\n map: this.map\r\n });\r\n });\r\n }\r\n\r\n componentDidMount() {\r\n\r\n var map = new L.Map('leaftlet-map', { trackResize: this.props.trackResize });\r\n map.invalidateSize();\r\n var osmUrl = this.props.mapTilesUrl;\r\n var osmAttrib = 'Map data © OpenStreetMap contributors';\r\n var osm = new L.TileLayer(osmUrl, { minZoom: 6, maxZoom: 20, attribution: osmAttrib });\r\n\r\n map.fitBounds(L.latLngBounds(this.props.bounds), { maxZoom: this.props.maxZoomAfterFitBounds });\r\n map.addLayer(osm);\r\n this.map = map;\r\n this.setState({ mapLoading: false });\r\n this.bindEventHandlers();\r\n }\r\n\r\n bindEventHandlers() {\r\n // add other events if needed\r\n // delete handlers when unmounting\r\n if (this.props.onClick) {\r\n this.map.on('click', this.props.onClick);\r\n }\r\n if (this.props.onMoveEnd) {\r\n this.map.on('moveend', this.onMoveEnd);\r\n }\r\n if (this.props.onZoomStart) {\r\n this.map.on('zoomstart', this.props.onZoomStart);\r\n }\r\n if (this.props.onZoomEnd) {\r\n this.map.on('zoomend', this.props.onZoomEnd);\r\n }\r\n }\r\n\r\n onMoveEnd(evt) {\r\n this.props.onMoveEnd(evt, this.map.getBounds());\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.map) {\r\n // whenever size of the container changes we need to let the map know\r\n // otherwise some graphical glitches occur\r\n if (this.props.height != prevProps.height) {\r\n this.map.invalidateSize();\r\n }\r\n // there should always be some bounds set by parent\r\n var prevBounds = L.latLngBounds(prevProps.bounds);\r\n var bounds = L.latLngBounds(this.props.bounds);\r\n\r\n // update bounds (bounds should always be set!)\r\n // if parent doesn't know bounds should pass some defaults\r\n var updateThreshold = 0.001;\r\n if (Math.abs(bounds.getNorth() - prevBounds.getNorth()) > updateThreshold\r\n || Math.abs(bounds.getSouth() - prevBounds.getSouth()) > updateThreshold\r\n || Math.abs(bounds.getWest() - prevBounds.getWest()) > updateThreshold\r\n || Math.abs(bounds.getEast() - prevBounds.getEast()) > updateThreshold)\r\n {\r\n if (this.initialBoundsChange) {\r\n // don't animate initial bounds change\r\n this.initialBoundsChange = false;\r\n this.map.fitBounds(bounds, { maxZoom: this.props.maxZoomAfterFitBounds });\r\n } else {\r\n this.map.fitBounds(bounds, {\r\n maxZoom: this.props.maxZoomAfterFitBounds,\r\n animate: true,\r\n pan: {\r\n duration: 0.5\r\n }\r\n });\r\n }\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n var state = this.state;\r\n var props = this.props;\r\n return (\r\n - \r\n
- \r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n \r\n
\r\n {state.mapLoading && 'Loading map...'}\r\n {state.mapLoading || this.renderChildren()}\r\n
\r\n );\r\n }\r\n}\r\n\r\nLeafletMap.propTypes = {\r\n height: PropTypes.string\r\n}","import { Component } from 'react';\r\n\r\nexport default class LeafletMarker extends Component {\r\n constructor(props) {\r\n super(props);\r\n // options\r\n var { /*map, position,*/ html, className, iconSize, iconAnchor, riseOnHover, iconUrl, zIndexOffset } = this.props;\r\n // handlers\r\n var { onClick, onMarkerAddedToMap } = this.props;\r\n\r\n var iconOptions = { html, className, iconSize, iconAnchor, iconUrl };\r\n\r\n // delete any undefined properties - turned out to be a problem\r\n for (var prop in iconOptions) {\r\n if (typeof iconOptions[prop] === 'undefined') {\r\n delete iconOptions[prop];\r\n }\r\n }\r\n\r\n var markerOptions = {\r\n icon: html ? L.divIcon(iconOptions) : L.icon(iconOptions),\r\n riseOnHover,\r\n zIndexOffset\r\n };\r\n this.marker = L.marker(this.props.position, markerOptions);\r\n this.marker.addTo(this.props.map);\r\n\r\n // add configured event handlers\r\n if (onClick) {\r\n this.marker.on('click', onClick);\r\n }\r\n\r\n // Let's provide access to L.marker instance as we want this component to be really simple and make parent handle any special behaviour\r\n onMarkerAddedToMap && onMarkerAddedToMap(this.marker);\r\n }\r\n\r\n componentWillUnmount() {\r\n this.marker.off('click', this.props.onClick);\r\n this.props.map.removeLayer(this.marker);\r\n }\r\n\r\n render() {\r\n // this component doesn't output anything\r\n return null;\r\n }\r\n}","import React from 'react';\r\nimport { Component } from 'react';\r\n\r\nexport default class WatchlistListView extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n watchlistUrl: \"/property/viewing?propertyId=\" + this.props.property.key\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n | \r\n {this.props.property.displayAddress} \r\n {this.props.property.summary} \r\n {this.props.property.bedrooms > 0 &&\r\n \r\n \r\n }\r\n {this.props.property.bathrooms > 0 &&\r\n {this.props.property.bedrooms} \r\n \r\n \r\n \r\n }\r\n {this.props.property.receptionRooms > 0 &&\r\n {this.props.property.bathrooms} \r\n \r\n \r\n \r\n }\r\n {this.props.property.receptionRooms} \r\n \r\n | \r\n\r\n \r\n {this.props.property.offerType} \r\n {this.props.property.price} \r\n | \r\n
| \r\n \r\n {this.props.property.isActive ? Book Viewing : null}\r\n {this.props.property.isActive ? Share Property : null}\r\n Remove from Watchlist\r\n \r\n | \r\n
\r\n
\r\n );\r\n }\r\n}","import React from 'react';\r\nimport { Component } from 'react';\r\nimport { shareProperty, removePropertyFromWatchlist } from '../../../watchlist-service';\r\nimport WatchlistListView from './watchlist-list-view.jsx';\r\nimport WatchlistGridView from './watchlist-grid-view.jsx';\r\n\r\nexport default class WatchlistContents extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleShareProperty = this.handleShareProperty.bind(this);\r\n this.handleRemoveProperty = this.handleRemoveProperty.bind(this);\r\n }\r\n\r\n handleShareProperty(evt) {\r\n shareProperty(evt, this.props.property);\r\n }\r\n\r\n handleRemoveProperty() {\r\n removePropertyFromWatchlist(this.props.property.key).then(this.props.update);\r\n }\r\n\r\n render() {\r\n const thumbStyle = {\r\n background: \"url(\" + this.props.property.bigImageUrl + \") center center no-repeat\",\r\n backgroundSize: \"cover\"\r\n };\r\n\r\n let propertyDetailsClass = \"\";\r\n this.props.view == \"grid\" ? propertyDetailsClass = propertyDetailsClass + \"grid-view\" : \"\";\r\n\r\n let propertyThumbClass = \"property-result__thumb\";\r\n this.props.view == \"grid\" ? propertyThumbClass = propertyThumbClass + \" grid-view\" : \"\";\r\n\r\n return (\r\n \r\n {\r\n this.props.property.isExclusive &&\r\n
\r\n\r\n \r\n\r\n 
\r\n\r\n
\r\n }\r\n \r\n {this.props.property.offerType} {this.props.property.offerType !== 'Price on Application' && {this.props.property.price}}\r\n
\r\n\r\n \r\n {this.props.property.bedrooms > 0 && {this.props.property.bedrooms}}\r\n {this.props.property.bathrooms > 0 && {this.props.property.bathrooms}}\r\n {this.props.property.receptionRooms > 0 && {this.props.property.receptionRooms}}\r\n
\r\n {this.props.property.displayAddress}
\r\n {this.props.property.summary}
\r\n \r\n {this.props.property.isActive ? Book Viewing : null}\r\n {this.props.property.isActive ? Share : null}\r\n Remove\r\n
\r\n \r\n
);\r\n}","import React, { Component } from 'react';\r\n\r\nexport default class WatchlistViewSelector extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleViewChange = this.handleViewChange.bind(this);\r\n }\r\n\r\n handleViewChange(view) {\r\n this.props.onViewChange(view);\r\n };\r\n\r\n render() {\r\n let listClassName = 'resultsMode list';\r\n let gridClassName = 'resultsMode grid-view';\r\n\r\n if (this.props.viewSelected == 'grid') {\r\n gridClassName += ' active';\r\n }\r\n if (this.props.viewSelected == 'list') {\r\n listClassName += ' active';\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n this.handleViewChange('list')}>\r\n LIST VIEW\r\n \r\n \r\n this.handleViewChange('grid')}>\r\n GRID VIEW\r\n \r\n \r\n
);\r\n }\r\n}","import React from 'react';\r\n\r\nexport default function Pagination(props) {\r\n let numPages = Math.ceil(props.totalResults / props.pageSize);\r\n\r\n let prevPage = \"page prev\";\r\n if (props.page == 1) { prevPage = \"disable\"; }\r\n\r\n let nextPage = \"page next\";\r\n if (props.page == numPages) { nextPage = \"disable\"; }\r\n\r\n function handleFirstPage(event) {\r\n event.preventDefault();\r\n props.handlePage(1);\r\n }\r\n\r\n function handlePrevPage(event) {\r\n event.preventDefault();\r\n props.handlePage(props.page - 1);\r\n }\r\n\r\n function handleNextPage(event) {\r\n event.preventDefault();\r\n props.handlePage(props.page + 1);\r\n }\r\n\r\n function handleLastPage(event) {\r\n event.preventDefault();\r\n props.handlePage(Math.ceil(props.totalResults / props.pageSize));\r\n }\r\n\r\n function handlePageSizeChange(event) {\r\n event.preventDefault();\r\n props.handlePageSize(event.target.value);\r\n }\r\n\r\n function handleNumberSwitchPage(event) {\r\n event.preventDefault();\r\n props.handlePage(event.currentTarget.value);\r\n }\r\n\r\n return (\r\n \r\n
\r\n - \r\n {/* Determine whether to enable or disable the previous page button\r\n Always include the first page as an option, unless it is the current active page */}\r\n {props.page > 1 ?\r\n [
- < ,\r\n
- 1 ]\r\n :\r\n
- < \r\n }\r\n\r\n {numPages > 1 && props.page == 3 ?
- 2 : null}\r\n {numPages > 1 && props.page > 4 ?
- ... : null}\r\n\r\n {/* For pages 4 or more, always include 2 pages before */}\r\n {props.page > 3 ?\r\n [
- {props.page - 2} ,\r\n
- {props.page - 1} ]\r\n :\r\n null\r\n }\r\n\r\n
- {props.page} \r\n\r\n {/* Include 2 pages after if we have not reached the total number of pages */}\r\n {numPages > (props.page + 1) ?
- {props.page + 1} : null}\r\n {numPages > (props.page + 2) ?
- {props.page + 2} : null}\r\n\r\n {props.page < numPages - 3 ?
- ... : null}\r\n\r\n {/* Determine whether to enable or disable the next page button\r\n Always include the last page as an option, unless it is the current active page */}\r\n {props.page < numPages ?\r\n [
- {numPages} ,\r\n
- > ]\r\n :\r\n
- > \r\n }\r\n
\r\n {(props.pageSize * (props.page - 1)) + 1} - {Math.min(props.page * props.pageSize, props.totalResults)} of {props.totalResults} properties at \r\n\r\n \r\n per page\r\n
\r\n Featured property
\r\n\r\n {\r\n {sortControl}\r\n
\r\n\r\n \r\n {viewControl}\r\n
\r\n\r\n \r\n {watchlist}\r\n
\r\n\r\n {\r\n
\r\n \r\n \r\n\r\n
\r\n }\r\n You've not watchlisted any properties yet. You can do so by clicking \"Watchlist\" on either the property list or the property details page.
\r\n\r\n\r\n \r\n \r\n\r\n
);\r\n }\r\n}","class QueryParameters {\r\n getAll() {\r\n var queryParams = [\r\n {\r\n name: \"sortby\",\r\n defaultValue: \"datedesc\",\r\n validValues: [\"datedesc\", \"priceasc\", \"pricedesc\"],\r\n optionLabels: {\r\n \"Recently sold\": \"datedesc\",\r\n \"Price (low to high)\": \"priceasc\",\r\n \"Price (high to low)\": \"pricedesc\"\r\n }\r\n },\r\n {\r\n name: \"ps\",\r\n longName: \"pageSize\",\r\n type: \"integer\",\r\n defaultValue: 10,\r\n validValues: [10, 25, 50]\r\n },\r\n {\r\n name: \"p\",\r\n longName: \"page\",\r\n type: \"integer\",\r\n defaultValue: 1,\r\n isValid: function (value) { return value > 0; }\r\n },\r\n {\r\n name: \"sold\",\r\n type: \"integer\",\r\n defaultValue: null,\r\n validValues: [null, 3, 6, 12, 24, 36, 60],\r\n optionLabels: {\r\n \"Anytime\": null,\r\n \"Last 3 months\": 3,\r\n \"Last 6 months\": 6,\r\n \"Last 12 months\": 12,\r\n \"Last 2 years\": 24,\r\n \"Last 3 years\": 36,\r\n \"Last 5 years\": 60\r\n }\r\n },\r\n {\r\n name: \"ptype\",\r\n type: \"integer\",\r\n isArray: true,\r\n defaultValue: [],\r\n validValues: [0, 3],\r\n optionLabels: {\r\n \"House\": 0,\r\n \"Flat\": 3\r\n },\r\n customHandler: function (value) { return value.split(\",\", 2).map(v => parseInt(v)); }\r\n },\r\n {\r\n name: \"key\"\r\n }];\r\n return queryParams;\r\n }\r\n\r\n getByName(name) {\r\n var queryParams = this.getAll();\r\n for (var i = 0; i < queryParams.length; i++) {\r\n var paramDefinition = queryParams[i];\r\n if (paramDefinition.name === name || paramDefinition.longName === name) {\r\n return paramDefinition;\r\n }\r\n }\r\n return null;\r\n }\r\n}\r\n\r\nexport default new QueryParameters(); // singleton export","import QS from 'qs';\r\nimport PastSalesParameters from './query-parameters.js';\r\n\r\nclass QueryManager {\r\n getQueryObjectFromUrl() {\r\n var resultQuery = {};\r\n var urlParams = QS.parse(window.location.search, { ignoreQueryPrefix: true });\r\n var paramDefinitions = PastSalesParameters.getAll();\r\n\r\n for (var i = 0; i < paramDefinitions.length; i++) {\r\n var paramDefinition = paramDefinitions[i];\r\n var paramValue = urlParams[paramDefinition.name];\r\n\r\n if (paramValue) {\r\n if (paramDefinition.customHandler) {\r\n paramValue = resultQuery[paramDefinition.longName ? paramDefinition.longName : paramDefinition.name] = paramDefinition.customHandler(paramValue);\r\n } else if (paramDefinition.type === \"integer\") {\r\n paramValue = window.parseInt(paramValue);\r\n }\r\n var valid = false;\r\n if (paramDefinition.isValid) {\r\n valid = paramDefinition.isValid(paramValue);\r\n } else if (paramDefinition.validValues) {\r\n if (paramValue instanceof Array && paramValue.length > 0) {\r\n valid = true;\r\n for (var k = 0; k < paramValue.length; k++) {\r\n var arrayItemValue = paramValue[k];\r\n var innerValid = false;\r\n for (var j = 0; j < paramDefinition.validValues.length; j++) {\r\n if (arrayItemValue == paramDefinition.validValues[j]) {\r\n innerValid = true;\r\n break;\r\n }\r\n }\r\n valid = valid && innerValid;\r\n }\r\n } else {\r\n for (var l = 0; l < paramDefinition.validValues.length; l++) {\r\n if (paramValue == paramDefinition.validValues[l]) {\r\n valid = true;\r\n }\r\n }\r\n }\r\n } else {\r\n valid = true;\r\n }\r\n if (!valid) {\r\n resultQuery[paramDefinition.longName ? paramDefinition.longName : paramDefinition.name] = paramDefinition.defaultValue;\r\n } else {\r\n resultQuery[paramDefinition.longName ? paramDefinition.longName : paramDefinition.name] = paramValue;\r\n }\r\n } else {\r\n // set the default value if it is provided for this parameter\r\n if (typeof paramDefinition.defaultValue !== 'undefined') {\r\n resultQuery[paramDefinition.longName ? paramDefinition.longName : paramDefinition.name] = paramDefinition.defaultValue;\r\n }\r\n }\r\n }\r\n\r\n return resultQuery;\r\n }\r\n\r\n createUrl(newQuery, isList) {\r\n var resultQueryStringObject = {};\r\n var key;\r\n for (var parameterName in newQuery) {\r\n var paramDefinition = PastSalesParameters.getByName(parameterName);\r\n if (paramDefinition === null) continue;\r\n // if parameter has a default value and the current value is the same - remove the param from the url\r\n if (typeof paramDefinition.defaultValue !== 'undefined') {\r\n if (paramDefinition.isArray && paramDefinition.defaultValue instanceof Array) {\r\n if (!(paramDefinition.defaultValue.sort().join() === newQuery[parameterName].sort().join())) {\r\n resultQueryStringObject[paramDefinition.name] = newQuery[parameterName].sort().join();\r\n }\r\n } else {\r\n if (paramDefinition.defaultValue !== newQuery[parameterName]) {\r\n resultQueryStringObject[paramDefinition.name] = newQuery[parameterName];\r\n }\r\n }\r\n } else {\r\n // if has a value and is an array, make it csv\r\n if (paramDefinition.isArray) {\r\n if (newQuery[parameterName] && newQuery[parameterName].length > 0) {\r\n resultQueryStringObject[paramDefinition.name] = newQuery[parameterName].join();\r\n }\r\n // if has value and not an array, just set it in url\r\n } else {\r\n if (parameterName === 'key') {\r\n key = newQuery['key'];\r\n } else {\r\n resultQueryStringObject[paramDefinition.name] = newQuery[parameterName];\r\n }\r\n }\r\n }\r\n }\r\n // add any other query parameters that are not listed\r\n // they may be used for some additional features (tracking, reporting, other libraries)\r\n /*if (keepUnknownParams) {\r\n var urlParams = QS.parse(window.location.search, { ignoreQueryPrefix: true });\r\n for (var parameterName in urlParams) {\r\n if (paramDefinition === null) {\r\n resultQueryStringObject[parameterName] = urlParams[parameterName];\r\n }\r\n }\r\n }*/\r\n if(!isList) {\r\n resultQueryStringObject['view'] = 'map';\r\n }\r\n var queryString = QS.stringify(resultQueryStringObject, { encode: false });\r\n var newUrl = key + (queryString ? '?' + queryString : '');\r\n return newUrl;\r\n }\r\n\r\n createQueryString(newQuery) {\r\n var url = this.createUrl(newQuery, true);\r\n var questionMarkIndex = url.indexOf('?');\r\n var queryString = null;\r\n if (questionMarkIndex > -1) {\r\n queryString = url.substring(questionMarkIndex);\r\n } else {\r\n queryString = '?';\r\n }\r\n // need to add key which is part of the path\r\n queryString += (queryString === '?' ? '' : '&') + 'key=' + url.substring(0, questionMarkIndex === -1?undefined:questionMarkIndex);\r\n return queryString;\r\n }\r\n}\r\n\r\nexport default new QueryManager(); // singleton export","import React from 'react';\r\n\r\nexport default class Pagination extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.onFirstPageClick = this.onFirstPageClick.bind(this);\r\n this.onPreviousPageClick = this.onPreviousPageClick.bind(this);\r\n this.onNextPageClick = this.onNextPageClick.bind(this);\r\n this.onLastPageClick = this.onLastPageClick.bind(this);\r\n this.onPageSizeChange = this.onPageSizeChange.bind(this);\r\n }\r\n\r\n onFirstPageClick(evt) {\r\n evt.preventDefault();\r\n window.scrollTo(0,0);\r\n this.props.onPageChange(1);\r\n }\r\n\r\n onPreviousPageClick(evt) {\r\n evt.preventDefault();\r\n window.scrollTo(0,0);\r\n this.props.onPageChange(this.props.page-1);\r\n }\r\n\r\n onNextPageClick(evt) {\r\n evt.preventDefault();\r\n window.scrollTo(0,0);\r\n this.props.onPageChange(this.props.page+1);\r\n }\r\n\r\n onLastPageClick(evt) {\r\n evt.preventDefault();\r\n //event prevent defailt;\r\n window.scrollTo(0,0);\r\n var total = this.props.total;\r\n var pageSize = this.props.pageSize;\r\n this.props.onPageChange(Math.floor(total/pageSize) + (total%pageSize?1:0));\r\n }\r\n\r\n onPageSizeChange(evt) {\r\n window.scrollTo(0,0);\r\n var pageSize = parseInt(evt.target.value); \r\n this.props.onPageSizeChange(pageSize);\r\n }\r\n\r\n render() {\r\n var { page, pageSize, total, createUrlForPage} = this.props;\r\n return (\r\n Refine your search
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n - \r\n
- \r\n \r\n \r\n
- \r\n \r\n \r\n
\r\n
\r\n {this.props.total} total properties matching your criteria
\r\n \r\n\r\n {page <= 1 && First}\r\n {page <= 1 && Prev}\r\n {page > 1 && First}\r\n {page > 1 && Previous}\r\n {pageSize * page >= total && Next}\r\n {pageSize * page >= total && Last}\r\n {pageSize * page < total && Next}\r\n {pageSize * page < total && Last}\r\n
\r\n \r\n {(page - 1) * pageSize + 1}-{total > page*pageSize?page*pageSize:total} of {total} properties at {' '}\r\n {' '}\r\n per page\r\n
\r\n {displayAddress}
,\r\n containsESPCSale &&\r\n {!!property.bedrooms && {property.bedrooms} Bed }\r\n {property.type.name}\r\n {!!property.receptionRooms && with }\r\n {!!property.receptionRooms && (property.receptionRooms === 1 ? {property.receptionRooms} public room : {property.receptionRooms} public rooms)}\r\n
,\r\n property.saleHistory.map((saleHistoryItem, index) => {\r\n return (\r\n\r\n {index === 0 && {currencyFormatter.format(saleHistoryItem.sellingPrice)}}\r\n {index !== 0 && {currencyFormatter.format(saleHistoryItem.sellingPrice)}}\r\n {' '} on {new Date(saleHistoryItem.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}\r\n
);\r\n })\r\n ];\r\n\r\n return (\r\n{content}
}\r\n \r\n \r\n Get a Free Property Valuation\r\n \r\n
);\r\n }\r\n }\r\n \r\n return [\r\n \r\n
);\r\n}","import React from 'react';\r\n\r\nexport default function Sorting(props) {\r\n var {\r\n sortby,\r\n onSortChange\r\n } = props;\r\n return (\r\n \r\n {total\r\n ? {total} properties\r\n : No properties}\r\n sold in \r\n {locationText}\r\n
\r\n { evt.preventDefault(); onMobileFiltersVisibilityChange(); }}>\r\n Refine\r\n \r\n\r\n {' '}\r\n \r\n
);\r\n}","import React from 'react';\r\n\r\nexport default function ViewToggle(props) {\r\n var {\r\n isList,\r\n onViewChange\r\n } = props;\r\n return (\r\n \r\n onViewChange(true)}>\r\n List\r\n \r\n onViewChange(false)}>\r\n Map\r\n \r\n
);\r\n}","import React from 'react';\r\nimport Marker from '../Leaflet/marker.jsx';\r\n\r\nexport default class SoldPropertiesMarker extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleMarkerAddedToMap = this.handleMarkerAddedToMap.bind(this);\r\n this.handleClick = this.handleClick.bind(this);\r\n }\r\n\r\n handleMarkerAddedToMap(leafletMarker) {\r\n this.marker = leafletMarker;\r\n }\r\n\r\n handleClick(e) {\r\n if (this.props.properties.length === 0) {\r\n this.props.map.setView(e.latlng, this.props.map.getZoom() + 2);\r\n } else {\r\n this.props.onClick(this.props.position, this.props.properties);\r\n }\r\n }\r\n\r\n render() {\r\n var { count, properties } = this.props;\r\n var colorClass = 'c-white';\r\n // set apprioprate css class depending if it's single property marker or multiple properties marker (seems not being used)\r\n var markerInnerClass = count > 1 ? 'cluster' : 'single';\r\n // set apprioprate content; home icon (if single property) or number (if multiple)\r\n var markerContent = count > 1 ? count : '';\r\n // compose everything all together\r\n var markerInnerHtml = '' + markerContent + '
';\r\n // there should be always at least one property so no need to check for empty/null\r\n var markerOutermostClass = 'map-pin';\r\n return (\r\n \r\n {containsESPCSale\r\n ? {p.displayAddress}\r\n :
\r\n );\r\n });\r\n return ReactDOM.createPortal(content, this.reactPortal);\r\n }\r\n}","import React from 'react';\r\nimport deepEqual from 'fast-deep-equal';\r\nimport Axios from 'axios';\r\nimport QueryManager from './query-manager';\r\nimport Map from '../Leaflet/map.jsx';\r\nimport SoldPropertiesMarker from './sold-properties-marker.jsx';\r\nimport MapMarkerPopup from './map-marker-popup.jsx';\r\nimport ReactDOM from 'react-dom';\r\nimport { debounce } from '../../Lib/generic-utils';\r\n\r\nexport default class MapResults extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n properties: null,\r\n bounds: null,\r\n // this is kinda of read only and is only used in request for data (affects clustering) not the map itself\r\n // aka actual width\r\n width: null, \r\n // this is used to dynamically set the map height to the height of the window minus the top bar and header (on window resize)\r\n // any initial height will do\r\n height: '500px',\r\n popupPosition: null,\r\n popupProperties: null,\r\n popupOpen: false\r\n };\r\n\r\n this.saveMapContainerDomNodeRef = this.saveMapContainerDomNodeRef.bind(this);\r\n this.updateMapDimensions = this.updateMapDimensions.bind(this);\r\n this.getInitialBounds = this.getInitialBounds.bind(this);\r\n this.getProperties = this.getProperties.bind(this);\r\n this.handleMoveEnd = this.handleMoveEnd.bind(this);\r\n this.handleMarkerClick = this.handleMarkerClick.bind(this);\r\n this.handlePopupClose = this.handlePopupClose.bind(this);\r\n this.handleAutoPanOnPopupOpen = this.handleAutoPanOnPopupOpen.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n // first get initial bounds for a query\r\n this.getInitialBounds().then(response => {\r\n this.setState({ bounds: [response.data.topLeft, response.data.botRight] });\r\n // this will trigger 'moveend' event on the map eventually which in turn will trigger data loading\r\n });\r\n this.resizeHandler = debounce(this.updateMapDimensions, 150).bind(this);\r\n window.addEventListener(\"resize\", this.resizeHandler);\r\n this.previousHeight = window.document.documentElement.clientHeight;\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n // get fresh data if query changes\r\n // supress making another query after bounds are set\r\n if (!deepEqual(this.props.query, prevProps.query)) {\r\n this.supressNextMoveEnd = true;\r\n this.getProperties();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.resizeHandler);\r\n }\r\n\r\n updateMapDimensions() {\r\n if (!this.mapContainer) return;\r\n // a hack to prevent map resizing on mobile when scrolling and browser address bar shows/hides\r\n if (this.previousHeight === window.document.documentElement.clientHeight) return;\r\n this.previousHeight = window.document.documentElement.clientHeight;\r\n\r\n var el = ReactDOM.findDOMNode(this.mapContainer);\r\n // don't want to query for data when the map resizes\r\n this.supressNextMoveEnd = true;\r\n \r\n this.setState({\r\n height: Math.round(window.innerHeight - el.getBoundingClientRect().top - window.pageYOffset) + 'px',\r\n width: el.offsetWidth\r\n });\r\n }\r\n\r\n getInitialBounds() {\r\n var queryString = QueryManager.createQueryString(this.props.query);\r\n var urlWithQueryString = '/soldproperties/boundingbox' + queryString;\r\n return Axios.get(urlWithQueryString).then(r => {\r\n this.props.onLoadingChange(false);\r\n return r;\r\n });\r\n }\r\n\r\n getProperties(bounds) {\r\n var queryString = QueryManager.createQueryString(this.props.query);\r\n // for map search there are additional parameters that need to be sent: bounds and map width in device independent px\r\n var additionalParams = {\r\n mapWidth: this.state.width\r\n };\r\n if (bounds) {\r\n additionalParams.left = bounds[0].lon;\r\n additionalParams.top = bounds[0].lat;\r\n additionalParams.right = bounds[1].lon;\r\n additionalParams.bottom = bounds[1].lat;\r\n }\r\n var urlWithQueryString = '/soldproperties/mapdata' + queryString;\r\n this.props.onLoadingChange(true);\r\n return Axios.get(urlWithQueryString, { params: additionalParams }).then(r => {\r\n this.props.onDataReceived(r.data);\r\n var newState = { properties: r.data.properties };\r\n // if bounds weren't provided for the query it means we need to calculate them from response\r\n // and position the map appropriately\r\n if (!bounds) {\r\n var calculatedBounds = this.calculateBounds(r.data.properties);\r\n newState.bounds = calculatedBounds;\r\n }\r\n this.setState(newState);\r\n this.props.onLoadingChange(false);\r\n return r;\r\n });\r\n }\r\n\r\n calculateBounds(properties) {\r\n if (!properties || properties.length === 0) {\r\n return null; // can't calculate bounds if there isn't any data\r\n }\r\n\r\n return properties.reduce((prev, curr) => {\r\n prev[0].lat = prev[0].lat < curr.latitude ? curr.latitude : prev[0].lat;\r\n prev[0].lon = prev[0].lon < curr.longitude ? curr.longitude : prev[0].lon;\r\n prev[1].lat = prev[1].lat > curr.latitude ? curr.latitude : prev[1].lat;\r\n prev[1].lon = prev[1].lon > curr.longitude ? curr.longitude : prev[1].lon;\r\n return prev;\r\n },[\r\n // start with bounds equal to first point\r\n { lat: properties[0].latitude, lon: properties[0].longitude },\r\n { lat: properties[0].latitude, lon: properties[0].longitude }\r\n ]);\r\n }\r\n\r\n saveMapContainerDomNodeRef(mapContainer) {\r\n this.mapContainer = mapContainer;\r\n if (mapContainer) {\r\n var el = ReactDOM.findDOMNode(this.mapContainer);\r\n this.setState({\r\n width: el.offsetWidth,\r\n height: Math.round(window.innerHeight - el.getBoundingClientRect().top - window.pageYOffset) + 'px'\r\n });\r\n }\r\n }\r\n\r\n handleMoveEnd(evt, bounds) {\r\n // handle special cases when sometimes moveend was caused not by user action\r\n if (this.supressNextMoveEnd) {\r\n this.supressNextMoveEnd = false;\r\n return;\r\n }\r\n // loading of properties on map moveend\r\n if (bounds) {\r\n this.getProperties([\r\n { lat: bounds.getNorthWest().lat, lon: bounds.getNorthWest().lng },\r\n { lat: bounds.getSouthEast().lat, lon: bounds.getSouthEast().lng }\r\n ]);\r\n }\r\n }\r\n\r\n handleMarkerClick(markerPosition, markerProperties) {\r\n this.setState({\r\n popupPosition: markerPosition,\r\n popupProperties: markerProperties,\r\n popupOpen: true\r\n });\r\n }\r\n\r\n handlePopupClose() {\r\n this.setState({\r\n popupOpen: false\r\n });\r\n }\r\n\r\n handleAutoPanOnPopupOpen() {\r\n // prevent querying for data after map moves to show the popup\r\n this.supressNextMoveEnd = true;\r\n }\r\n\r\n render() {\r\n // you can't display map if you don't know area you want to show\r\n if (this.state.bounds) {\r\n return (\r\n {p.displayAddress}
}\r\n {containsESPCSale &&{p.summary}
}\r\n {p.sales.map(s =>\r\n\r\n {currencyFormatter.format(s.sellingPrice)}\r\n {' on '}\r\n {new Date(s.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}\r\n
\r\n )}\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nif (typeof window !== 'undefined') {\r\n window.pastSalesInit = SearchResults.init;\r\n}","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst SliderThumb = ({\r\n customThumb,\r\n disableThumb,\r\n position,\r\n thumbSize,\r\n sliderSize,\r\n color,\r\n vertical,\r\n }) => {\r\n let defaultThumb;\r\n const thumbCentering = (sliderSize - thumbSize) * 0.5;\r\n const thumbWrapperStyles = {\r\n position: 'absolute',\r\n get left() { return !vertical ? `${position}%` : undefined; },\r\n get top() { return !vertical ? '0px' : undefined; },\r\n get bottom() { return !vertical ? undefined : `${position}%`; },\r\n get marginTop() { return !vertical ? `${thumbCentering}px` : undefined; },\r\n get marginLeft() {\r\n return !vertical\r\n ? `-${thumbSize * 0.5}px`\r\n : `${thumbCentering}px`;\r\n },\r\n get marginBottom() {\r\n return !vertical\r\n ? undefined\r\n : `-${thumbSize * 0.5}px`;\r\n },\r\n };\r\n if (!customThumb) {\r\n const defaultThumbStyles = {\r\n backgroundColor: `${color}`,\r\n opacity: (disableThumb ? '0' : '1'),\r\n borderRadius: '100%',\r\n height: `${thumbSize}px`,\r\n width: `${thumbSize}px`,\r\n };\r\n defaultThumb = ;\r\n }\r\n return (\r\n \r\n
\r\n \r\n {this.state.isLoading &&
\r\n \r\n
}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {this.state.isList\r\n &&
\r\n }\r\n {this.state.isList &&\r\n \r\n {customThumb}\r\n {defaultThumb && defaultThumb}\r\n
\r\n );\r\n};\r\nSliderThumb.propTypes = {\r\n position: PropTypes.number,\r\n offsetTop: PropTypes.number,\r\n offsetLeft: PropTypes.number,\r\n sliderSize: PropTypes.number,\r\n thumbSize: PropTypes.number,\r\n color: PropTypes.string,\r\n vertical: PropTypes.bool,\r\n disableThumb: PropTypes.bool,\r\n customThumb: PropTypes.node,\r\n};\r\nexport default SliderThumb;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst SliderLabel = ({ position, color, vertical, value, thumbSize, sliderSize }) => {\r\n const labelCentering = -10 + (sliderSize * 0.5);\r\n const labelVerticalOffset = 6 + (thumbSize * 0.6);\r\n const labelWrapperStyles = {\r\n position: 'absolute',\r\n backgroundColor: color,\r\n color: '#fff',\r\n fontSize: '12px',\r\n textAlign: 'center',\r\n margin: '0',\r\n zIndex: '5',\r\n width: '20px',\r\n height: '20px',\r\n borderRadius: '2px',\r\n get bottom() { return !vertical ? undefined : `${position}%`; },\r\n get left() { return !vertical ? `${position}%` : undefined; },\r\n get top() { return !vertical ? '-35px' : undefined; },\r\n get marginLeft() { return !vertical ? '-10px' : `${labelCentering}px`; },\r\n get marginBottom() {\r\n return !vertical\r\n ? undefined\r\n : `${labelVerticalOffset}px`; },\r\n };\r\n const pointerStyles = {\r\n position: 'absolute',\r\n left: '50%',\r\n marginLeft: '-4px',\r\n bottom: '-4px',\r\n borderColor: 'transparent',\r\n borderStyle: 'solid',\r\n width: '0',\r\n height: '0',\r\n borderWidth: '4px 4px 0 4px',\r\n borderTopColor: color,\r\n zIndex: '4',\r\n };\r\n return (\r\n \r\n {value}\r\n \r\n
\r\n );\r\n};\r\nSliderLabel.propTypes = {\r\n position: PropTypes.number,\r\n color: PropTypes.string,\r\n vertical: PropTypes.bool,\r\n value: PropTypes.number,\r\n thumbSize: PropTypes.number,\r\n sliderSize: PropTypes.number,\r\n};\r\nexport default SliderLabel;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst SliderTrack = ({ trackLength, color, vertical }) => {\r\n let trackStyles = {\r\n backgroundColor: color,\r\n get width() { return !vertical ? `${trackLength}%` : '100%'; },\r\n get height() { return !vertical ? '100%' : `${trackLength}%`; },\r\n get position() { return !vertical ? undefined : 'absolute'; },\r\n get bottom() { return !vertical ? undefined : '0'; },\r\n };\r\n return (\r\n \r\n );\r\n};\r\nSliderTrack.propTypes = {\r\n trackLength: PropTypes.number,\r\n color: PropTypes.string,\r\n vertical: PropTypes.bool,\r\n};\r\nexport default SliderTrack;\r\n","/* eslint-disable no-console */\r\n/* slightly modified code from https://github.com/tjallen/react-simple-range */\r\nimport React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport SliderThumb from './slider-thumb';\r\nimport SliderLabel from './slider-label';\r\nimport SliderTrack from './slider-track';\r\n\r\nfunction noOp() {}\r\n\r\nexport default class Slider extends Component {\r\n static propTypes = {\r\n children: PropTypes.element,\r\n min: PropTypes.number,\r\n max: PropTypes.number,\r\n step: PropTypes.number,\r\n value: PropTypes.number,\r\n defaultValue: PropTypes.number,\r\n onChange: PropTypes.func,\r\n onChangeComplete: PropTypes.func,\r\n vertical: PropTypes.bool,\r\n verticalSliderHeight: PropTypes.string,\r\n eventWrapperPadding: PropTypes.number,\r\n label: PropTypes.bool,\r\n disableTrack: PropTypes.bool,\r\n disableThumb: PropTypes.bool,\r\n sliderColor: PropTypes.string,\r\n trackColor: PropTypes.string,\r\n thumbColor: PropTypes.string,\r\n sliderSize: PropTypes.number,\r\n thumbSize: PropTypes.number,\r\n id: PropTypes.string,\r\n className: PropTypes.string\r\n }\r\n static defaultProps = {\r\n min: 0,\r\n max: 100,\r\n step: 1,\r\n onChange: noOp,\r\n onChangeComplete: noOp,\r\n vertical: false,\r\n verticalSliderHeight: '100px',\r\n eventWrapperPadding: 8,\r\n label: false,\r\n disableTrack: false,\r\n disableThumb: false,\r\n sliderColor: '#B9B9B9',\r\n trackColor: '#009688',\r\n thumbColor: '#009688',\r\n sliderSize: 4,\r\n id: null,\r\n }\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n drag: false,\r\n };\r\n this.onInteractionStart = this.onInteractionStart.bind(this);\r\n this.onMouseOrTouchMove = this.onMouseOrTouchMove.bind(this);\r\n this.onInteractionEnd = this.onInteractionEnd.bind(this);\r\n }\r\n componentWillMount() {\r\n this.updateStateFromProps(this.props);\r\n }\r\n componentDidMount() {\r\n if (this.props.onChange.name === 'noOp') {\r\n console.warn(\r\n `A react-simple-range component was not provided an onChange prop.\r\n \\nRecommend passing down a function as onChange else this component is purely cosmetic`);\r\n }\r\n }\r\n componentWillReceiveProps(nextProps) {\r\n this.updateStateFromProps(nextProps);\r\n }\r\n onInteractionStart(e) {\r\n const eventType = (e.touches !== undefined ? 'touch' : 'mouse');\r\n const leftMouseButton = 0;\r\n if ((eventType === 'mouse') && (e.button !== leftMouseButton)) return;\r\n this.updateSliderValue(e, eventType);\r\n this.setState({ drag: true, displayLabel: true });\r\n this.addEvents(eventType);\r\n e.preventDefault();\r\n }\r\n onInteractionEnd() {\r\n this.setState({\r\n drag: false,\r\n displayLabel: false,\r\n });\r\n this.props.onChangeComplete(this.state);\r\n this.removeEvents();\r\n }\r\n onMouseOrTouchMove(e) {\r\n const eventType = (e.touches !== undefined ? 'touch' : 'mouse');\r\n if (!this.state.drag) return;\r\n this.updateSliderValue(e, eventType);\r\n e.stopPropagation();\r\n }\r\n getSliderInfo() {\r\n const sl = this.refs.slider;\r\n const sliderInfo = {\r\n bounds: sl.getBoundingClientRect(),\r\n length: sl.clientWidth,\r\n height: sl.clientHeight,\r\n };\r\n return sliderInfo;\r\n }\r\n addEvents(type) {\r\n switch (type) {\r\n case 'mouse': {\r\n document.addEventListener('mousemove', this.onMouseOrTouchMove);\r\n document.addEventListener('mouseup', this.onInteractionEnd);\r\n break;\r\n }\r\n case 'touch': {\r\n document.addEventListener('touchmove', this.onMouseOrTouchMove);\r\n document.addEventListener('touchend', this.onInteractionEnd);\r\n break;\r\n }\r\n default: // nothing\r\n }\r\n }\r\n removeEvents() {\r\n document.removeEventListener('mousemove', this.onMouseOrTouchMove);\r\n document.removeEventListener('mouseup', this.onInteractionEnd);\r\n document.removeEventListener('touchmove', this.onMouseOrTouchMove);\r\n document.removeEventListener('touchend', this.onInteractionEnd);\r\n }\r\n updateSliderValue(e, eventType) {\r\n const { max, min } = this.state;\r\n const { vertical } = this.props;\r\n let { value } = this.state;\r\n const xCoords = (eventType !== 'touch' ? e.pageX : e.touches[0].pageX) - window.pageXOffset;\r\n const yCoords = (eventType !== 'touch' ? e.pageY : e.touches[0].pageY) - window.pageYOffset;\r\n // compare position to slider length to get percentage\r\n let position;\r\n let lengthOrHeight;\r\n if (!vertical) {\r\n position = xCoords - this.getSliderInfo().bounds.left;\r\n lengthOrHeight = this.getSliderInfo().length;\r\n } else {\r\n lengthOrHeight = this.getSliderInfo().height;\r\n position = lengthOrHeight - (yCoords - this.getSliderInfo().bounds.top);\r\n }\r\n const percent = this.clampValue(+(position / lengthOrHeight).toFixed(2), 0, 1);\r\n // convert perc -> value then match value to notch as per props/state.step\r\n const rawValue = this.valueFromPercent(percent);\r\n value = this.calculateMatchingNotch(rawValue);\r\n // avoid repeated updates of the same value\r\n if (value === this.state.value) return;\r\n // percentage of the range to render the track/thumb to\r\n const ratio = (value - min) * 100 / (max - min);\r\n this.setState({\r\n percent,\r\n value,\r\n ratio,\r\n }, this.handleChange);\r\n }\r\n handleChange() {\r\n this.props.onChange(this.state);\r\n }\r\n valueFromPercent(perc) {\r\n const { range, min } = this.state;\r\n const val = (range * perc) + min;\r\n return val;\r\n }\r\n calculateMatchingNotch(value) {\r\n const { step, max, min } = this.state;\r\n const values = [];\r\n for (let i = min; Math.round(i * 100) / 100 <= max; i+=step) {\r\n values.push(Math.round(i * 100) / 100);\r\n }\r\n // reduce over the potential notches and find which is the closest\r\n const match = values.reduce((prev, curr) => {\r\n if (Math.abs(curr - value) < Math.abs(prev - value)) {\r\n return curr;\r\n }\r\n return prev;\r\n });\r\n return match;\r\n }\r\n clampValue(val, min, max) {\r\n return Math.max(min, Math.min(val, max));\r\n }\r\n updateStateFromProps(props) {\r\n let { value, thumbSize } = props;\r\n if (value === undefined) {\r\n value = (props.defaultValue !== undefined ? props.defaultValue : 0);\r\n }\r\n if (props.thumbSize === undefined) {\r\n thumbSize = (this.props.disableThumb ? 0 : props.sliderSize * 2);\r\n }\r\n const { min, max, step, id } = props;\r\n const range = max - min;\r\n const ratio = Math.max((value - min), 0) * 100 / (max - min);\r\n this.setState({\r\n value,\r\n min,\r\n max,\r\n range,\r\n step,\r\n ratio,\r\n thumbSize,\r\n id,\r\n });\r\n }\r\n render() {\r\n const {\r\n vertical,\r\n sliderSize,\r\n disableThumb,\r\n disableTrack,\r\n children,\r\n label,\r\n trackColor,\r\n thumbColor,\r\n verticalSliderHeight,\r\n eventWrapperPadding,\r\n } = this.props;\r\n const eventWrapperStyle = {\r\n height: '100%',\r\n position: 'relative',\r\n cursor: 'pointer',\r\n margin: '0 auto',\r\n get padding() {\r\n return !vertical\r\n ? `${eventWrapperPadding}px 0`\r\n : `0 ${eventWrapperPadding}px`;\r\n },\r\n get width() { return !vertical ? 'auto' : `${sliderSize}px`; },\r\n };\r\n const sliderStyle = {\r\n backgroundColor: this.props.sliderColor,\r\n position: 'relative',\r\n overflow: 'visible',\r\n get height() {\r\n return !vertical\r\n ? `${sliderSize}px`\r\n : verticalSliderHeight;\r\n },\r\n get width() { return !vertical ? '100%' : `${sliderSize}px`; },\r\n };\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\nif (typeof window !== 'undefined') {\r\n window.radiusSearchInit = RadiusSearch.init;\r\n}","import React from 'react'; // needed for non-SSR route\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default function LocationItem(props) {\r\n function handleRemoveLocation() {\r\n props.handleRemoveLocation(props.location);\r\n }\r\n\r\n let location = props.location;\r\n let cssClass = \"filter-section__item selected\";\r\n if (props.padLeft) {\r\n cssClass += \" pad-left\";\r\n }\r\n return (\r\n \r\n
\r\n Click or tap where you want to search
\r\nClick or tap where you want to search
\r\n\r\n
\r\n \r\n \r\n {this.state.radiuses.map((radius) =>\r\n this.handleRadiusChange(radius.tmpKey, value)}\r\n handleRadiusDelete={this.handleRadiusDelete}\r\n handleMarkerDragEnd={this.handleMarkerDragEnd}\r\n updatePlaceName={this.updatePlaceName}\r\n />\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n Location
\r\n\r\n {this.state.radiuses.length < 5 ?\r\n {hintText}\r\n {this.state.radiuses.length > 0 ? '' :
\r\n \r\n
\r\n )}\r\n \r\n Search using these locations\r\n \r\n \r\n \r\n
\r\n \r\n this.handleRadiusChange(radius.tmpKey, value.value)} />\r\n
\r\n {radius.displayText}
\r\n Distance: {radius.radius} miles
\r\n \r\n
\r\n this.handleRadiusDelete(radius.tmpKey)}>
\r\n {location.displayText}
\r\n {props.canRemove ?\r\n \r\n : }\r\n {radius.displayText}
\r\n {props.canRemove\r\n ? \r\n : }\r\n - \r\n {props.locations && props.locations.map((location, i, array) => location.key == props.defaultLocationKey && props.hideDefaultLocation?null:(\r\n
Locations
\r\n\r\n \r\n {this.isDefaultLocationOrFreeText()\r\n ? ()\r\n : ()}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {radiusButtonText}\r\n
\r\n \r\n Search by school catchment\r\n
\r\n Refine your search
\r\n \r\n- \r\n
\r\n
\r\n )\r\n}","import React from 'react';\r\n\r\nexport default class PropertyTypeList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.mapParents = this.mapParents.bind(this);\r\n this.mapChildren = this.mapChildren.bind(this);\r\n this.handleChange = this.handleChange.bind(this);\r\n this.configureItems = this.configureItems.bind(this);\r\n this.shouldShowChildren = this.shouldShowChildren.bind(this);\r\n this.renderInput = this.renderInput.bind(this);\r\n this.expandSection = this.expandSection.bind(this);\r\n this.contractSection = this.contractSection.bind(this);\r\n\r\n var parents = this.configureItems(props);\r\n this.state = {\r\n 'parents': parents,\r\n 'expanded': parents.filter(p => !p.selected && p.children.filter(c => c.selected).length > 0)\r\n .map(p => p.value) };\r\n }\r\n\r\n configureItems(props) {\r\n var parents = props.pTypesDef.map(p => {\r\n return {\r\n label: p.label,\r\n value: p.value,\r\n selected: props.pTypes.includes(p.value),\r\n children: p.children ? p.children.map(c => {\r\n return {\r\n label: c.label,\r\n value: c.value,\r\n selected: props.pTypes.includes(c.value)\r\n }\r\n }) : []\r\n };\r\n });\r\n\r\n // Any parents that are selected should have all children selected\r\n parents.filter(p => p.selected)\r\n .forEach(p => p.children.forEach(c => c.selected = true));\r\n\r\n return parents;\r\n }\r\n\r\n shouldShowChildren(pType) {\r\n return this.state.expanded.includes(pType);\r\n }\r\n\r\n expandSection(pType) {\r\n if (!this.state.expanded.includes(pType)) {\r\n var copyState = this.state.expanded.slice();\r\n copyState.push(pType);\r\n this.setState({ 'expanded': copyState });\r\n }\r\n }\r\n\r\n contractSection(pType) {\r\n if (this.state.expanded.includes(pType)) {\r\n this.setState({ 'expanded': this.state.expanded.filter(x => x !== pType) });\r\n }\r\n }\r\n\r\n handleChange(ev) {\r\n this.props.handleChange(ev.currentTarget.value, ev.currentTarget.checked);\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setState({\r\n 'parents': this.configureItems(nextProps)\r\n });\r\n }\r\n\r\n renderInput(item) {\r\n return (\r\n {props.keywords.category}
\r\n- \r\n {keywordMap(props.keywords)}\r\n
\r\n
\r\n )\r\n } else {\r\n return (\r\n - \r\n {parent.children.map(this.renderInput)}\r\n
\r\n
\r\n )\r\n }\r\n }\r\n\r\n mapParents() {\r\n return this.state.parents.map(p => (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nfunction ExpanderLink(props) {\r\n let action = (ev) => props.action(props.value);\r\n return (\r\n {props.label}\r\n )\r\n}","import React, { Component } from 'react'; // This line is here because this comp is used by a non-SSRed comp as well as a SSRed comp.\r\nimport SearchQuery, { createSearchUrl } from '../Search/search-query';\r\nimport SearchParameters from '../Search/search-parameters';\r\n\r\nexport default function PropertyQueryHandler(WrappedComponent) {\r\n return class PropertyQueryHandler extends Component {\r\n constructor(props) {\r\n super(props);\r\n // To Do: make local storage service a React component instead of relying on global objects\r\n this.saveSearchFilter = typeof window !== 'undefined' && window.localStorageService\r\n ? window.localStorageService.saveSearchFilter\r\n : function () { };\r\n this.handleAddLocation = this.handleAddLocation.bind(this);\r\n this.handleChangeLocation = this.handleChangeLocation.bind(this);\r\n this.handleRemoveLocation = this.handleRemoveLocation.bind(this);\r\n this.handleRemoveFreeText = this.handleRemoveFreeText.bind(this);\r\n this.handleAddSingleRadius = this.handleAddSingleRadius.bind(this);\r\n this.handleRemoveRadius = this.handleRemoveRadius.bind(this);\r\n this.handlePageChange = this.handlePageChange.bind(this);\r\n this.handleSortBy = this.handleSortBy.bind(this);\r\n this.handlePageSize = this.handlePageSize.bind(this);\r\n this.handleChangeSchool = this.handleChangeSchool.bind(this);\r\n this.handleBedsChange = this.handleBedsChange.bind(this);\r\n this.handleMinPriceChange = this.handleMinPriceChange.bind(this);\r\n this.handleMaxPriceChange = this.handleMaxPriceChange.bind(this);\r\n this.handleUnderOfferChange = this.handleUnderOfferChange.bind(this);\r\n this.handleFixedPriceChange = this.handleFixedPriceChange.bind(this);\r\n this.handleVirtualTourChange = this.handleVirtualTourChange.bind(this);\r\n this.handleEpcRatingChange = this.handleEpcRatingChange.bind(this);\r\n this.handleNewChange = this.handleNewChange.bind(this);\r\n this.handleExclusiveChange = this.handleExclusiveChange.bind(this);\r\n this.handlePropertyTypeChange = this.handlePropertyTypeChange.bind(this);\r\n this.handleKeywordChange = this.handleKeywordChange.bind(this);\r\n this.handleNewBuildsChange = this.handleNewBuildsChange.bind(this);\r\n this.handleViewChange = this.handleViewChange.bind(this);\r\n this.setQueryState = this.setQueryState.bind(this);\r\n this.createUrl = this.createUrl.bind(this);\r\n this.updateUrl = this.updateUrl.bind(this);\r\n this.getPropertyQuery = this.getPropertyQuery.bind(this);\r\n this.getMergedState = this.getMergedState.bind(this);\r\n this.handleRemoveFilter = this.handleRemoveFilter.bind(this);\r\n this.clearNearMe = this.clearNearMe.bind(this);\r\n this.state = {\r\n locations: props.searchState.locations,\r\n radiuses: props.searchState.radiuses,\r\n page: props.searchState.p,\r\n school: props.searchState.school,\r\n orgId: props.searchState.orgId,\r\n pageSize: props.searchState.ps,\r\n sortBy: props.searchState.sortBy,\r\n rental: props.searchState.rental,\r\n minBeds: props.searchState.minBeds || '', // React throws warning if select input is null or undefined\r\n minPrice: props.searchState.minPrice || '',\r\n maxPrice: props.searchState.maxPrice || '',\r\n fixedPrice: props.searchState.fixedPrice,\r\n underOffer: props.searchState.underOffer,\r\n new: props.searchState.new || '',\r\n exclusive: props.searchState.exclusive,\r\n featured: props.searchState.featured,\r\n keywords: props.searchState.keywords,\r\n ptype: props.searchState.ptype,\r\n virtualTour: props.searchState.virtualTour,\r\n epc: props.searchState.epcRatings,\r\n freeText: props.searchState.locationText,\r\n view: props.searchState.view || SearchParameters.find(x => x.name === 'view').defaultValue,\r\n propertyTypesDef: props.searchState.propertyTypesDef,\r\n inlinedListResults: props.searchState.listResults,\r\n inlinedMapResults: props.searchState.mapResults,\r\n solicitor: props.searchState.solicitor,\r\n searchId: props.searchId,\r\n isUserLoggedIn: props.searchState.isUserLoggedIn,\r\n nearme: props.searchState.nearme,\r\n newbuilds: props.searchState.newBuilds\r\n }\r\n }\r\n\r\n handleRemoveFilter(filter) {\r\n let filterDefinition = SearchParameters.filter(f => f.name === filter.name)[0];\r\n this.setState(prevState => {\r\n return filterDefinition.handleTagRemove(prevState, filter);\r\n }, this.updateCurrentUrl);\r\n }\r\n\r\n handleAddLocation(location) {\r\n var newLocations = this.state.locations.slice();\r\n if (newLocations.filter(e => e.key === location.key).length === 0) {\r\n newLocations.push(location);\r\n this.setState({ locations: newLocations, page: null }, this.updateCurrentUrl);\r\n }\r\n }\r\n\r\n handleChangeLocation(location) {\r\n this.setState({ locations: [location], radiuses: [], freeText: [], page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleRemoveLocation(location) {\r\n var newLocations = this.state.locations.slice();\r\n newLocations = newLocations.filter(function (item) {\r\n return item.key !== location.key;\r\n });\r\n if (newLocations.length === 0 && this.state.radiuses.length === 0) {\r\n newLocations.push({\r\n key: this.props.clientConfig.defaultLocationSearchKey,\r\n displayText: this.props.clientConfig.defaultLocationSearchLabel,\r\n category: 0\r\n });\r\n }\r\n this.setState({ locations: newLocations, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleRemoveRadius(radius) {\r\n let radiuses = this.state.radiuses.slice(); // copy array\r\n let index = radiuses.indexOf(radius); // find by reference\r\n if (index > -1) {\r\n radiuses.splice(index, 1);\r\n }\r\n let newState = { radiuses: radiuses, page: null };\r\n if (radiuses.length === 0 && this.state.locations.length === 0) {\r\n newState.locations = [{\r\n key: this.props.clientConfig.defaultLocationSearchKey,\r\n displayText: this.props.clientConfig.defaultLocationSearchLabel,\r\n category: 0\r\n }];\r\n }\r\n this.setState(newState, this.updateCurrentUrl);\r\n }\r\n\r\n handleAddSingleRadius(radius) {\r\n let newState = {\r\n radiuses: [radius], locations: [], nearme: null, page: null };\r\n this.setState(newState, () => this.updateCurrentUrl(null, true));\r\n }\r\n\r\n clearNearMe() {\r\n let newState = { nearme: null };\r\n this.setState(newState, () => this.updateCurrentUrl(null, true));\r\n }\r\n\r\n handleRemoveFreeText(setDefaultLocation) {\r\n let newState = { freeText: [], page: null };\r\n if (setDefaultLocation === true) {\r\n if (this.state.radiuses.length === 0 && this.state.locations.length === 0) {\r\n newState.locations = [{\r\n key: this.props.clientConfig.defaultLocationSearchKey,\r\n displayText: this.props.clientConfig.defaultLocationSearchLabel,\r\n category: 0\r\n }];\r\n }\r\n }\r\n this.setState(newState, this.updateCurrentUrl);\r\n }\r\n\r\n handlePageChange(page) {\r\n this.setState({ page: page }, () => {\r\n this.updateCurrentUrl(true);\r\n window.scrollTo(0, 0);\r\n });\r\n }\r\n\r\n handleSortBy(sortBy) {\r\n this.setState({ sortBy: sortBy, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handlePageSize(pageSize) {\r\n this.setState({ page: null, pageSize: pageSize }, () => {\r\n this.updateCurrentUrl();\r\n window.scrollTo(0, 0);\r\n });\r\n }\r\n\r\n handleChangeSchool(school) {\r\n this.setState({ school: school, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleBedsChange(minBeds) {\r\n this.saveSearchFilter(minBeds, \"minBeds\", this.state.rental);\r\n this.setState({ minBeds: minBeds, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleMinPriceChange(minPrice) {\r\n let max = parseInt(this.state.maxPrice);\r\n let change = { minPrice: minPrice, page: null };\r\n // minPrice must be a number for this to be true, all comparison to NaN are false\r\n if (!isNaN(max) && max < parseInt(minPrice)) {\r\n change.maxPrice = minPrice;\r\n this.saveSearchFilter(minPrice, \"maxPrice\", this.state.rental);\r\n }\r\n this.saveSearchFilter(minPrice, \"minPrice\", this.state.rental);\r\n this.setState(change, this.updateCurrentUrl);\r\n }\r\n\r\n handleMaxPriceChange(maxPrice) {\r\n let min = parseInt(this.state.minPrice);\r\n let change = { maxPrice: maxPrice, page: null };\r\n // maxPrice must be a number for this to be true, all comparison to NaN are false\r\n if (!isNaN(min) && min > parseInt(maxPrice)) {\r\n change.minPrice = maxPrice;\r\n this.saveSearchFilter(maxPrice, \"minPrice\", this.state.rental);\r\n }\r\n this.saveSearchFilter(maxPrice, \"maxPrice\", this.state.rental);\r\n this.setState(change, this.updateCurrentUrl);\r\n }\r\n\r\n handleUnderOfferChange(val) {\r\n this.saveSearchFilter(val, \"underOffer\", this.state.rental);\r\n this.setState({ underOffer: val, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleFixedPriceChange(val) {\r\n this.setState({ fixedPrice: val, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleVirtualTourChange(val) {\r\n this.setState({ virtualTour: val, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleNewChange(days) {\r\n this.setState({ new: days, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleExclusiveChange(val) {\r\n this.setState({ exclusive: val, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleNewBuildsChange(val) {\r\n this.setState({ newbuilds: val, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n handleKeywordChange(value, checked) {\r\n let selectedKeywords = this.state.keywords.slice();\r\n let found = selectedKeywords.filter(keyword => keyword === value).length > 0;\r\n if (checked !== found) {\r\n if (checked) {\r\n selectedKeywords.push(value);\r\n } else {\r\n selectedKeywords.splice(selectedKeywords.indexOf(value), 1);\r\n }\r\n\r\n this.setState({ keywords: selectedKeywords, page: null }, this.updateCurrentUrl);\r\n }\r\n }\r\n\r\n handleEpcRatingChange(value, checked) {\r\n let selectedEPC = this.state.epc.slice();\r\n let found = selectedEPC.filter(e => e === value).length > 0;\r\n if (checked !== found) {\r\n if (checked) {\r\n selectedEPC.push(value);\r\n } else {\r\n selectedEPC.splice(selectedEPC.indexOf(value), 1);\r\n }\r\n\r\n this.setState({ epc: selectedEPC, page: null }, this.updateCurrentUrl);\r\n }\r\n }\r\n\r\n handlePropertyTypeChange(value, checked, ifParentSelectedAreAllChildrenSelected) {\r\n let selectedPtypes = this.state.ptype.slice();\r\n let parentChange = value.indexOf('_') < 0;\r\n\r\n let found = selectedPtypes.filter(ptype => ptype === value).length > 0;\r\n if (checked !== found) {\r\n if (checked) {\r\n selectedPtypes.push(value);\r\n if (parentChange) {\r\n let parent = value;\r\n // if parent is checked - uncheck all children\r\n let selectedChildren = selectedPtypes.filter(ptype => ptype.indexOf(parent + '_') > -1 && ptype !== \"other_26\" && ptype !== \"other_43\");\r\n for (var i = 0; i < selectedChildren.length; i++) {\r\n selectedPtypes.splice(selectedPtypes.indexOf(selectedChildren[i]), 1);\r\n }\r\n } else {\r\n // if child is selected be sure to uncheck parent\r\n if (!(value === \"other_26\" || value === \"other_43\")) {\r\n let parent = value.substring(0, value.indexOf('_'));\r\n let indexOfParent = selectedPtypes.indexOf(parent);\r\n if (indexOfParent > -1) {\r\n selectedPtypes.splice(indexOfParent, 1);\r\n }\r\n }\r\n }\r\n } else {\r\n var index = selectedPtypes.indexOf(value);\r\n selectedPtypes.splice(index, 1);\r\n }\r\n this.setState({ ptype: selectedPtypes, page: null }, this.updateCurrentUrl);\r\n }\r\n\r\n // When ptype is ['house'] for example all children are checked in UI but are not listed in ptype\r\n // This case deals with un-checking one of the children\r\n // Should add all the sub-types except the unchecked one and remove the parent\r\n if (!found && !checked && ifParentSelectedAreAllChildrenSelected) {\r\n let parent = this.state.propertyTypesDef.find(p => p.children.filter(c => c.value === value).length > 0);\r\n if (parent) {\r\n // Check that the parent is currently selected, before removing it\r\n if (selectedPtypes.includes(parent.value)) {\r\n // remove the parent value\r\n var index1 = selectedPtypes.indexOf(value);\r\n selectedPtypes.splice(index1, 1);\r\n\r\n // add all the children except the one being unchecked\r\n parent.children.forEach(x => {\r\n if (selectedPtypes.indexOf(x.value) === -1 && x.value !== value) {\r\n selectedPtypes.push(x.value);\r\n }\r\n });\r\n this.setState({ ptype: selectedPtypes, page: null }, this.updateCurrentUrl);\r\n }\r\n }\r\n }\r\n }\r\n\r\n handleViewChange(view) {\r\n let newState = {\r\n view: view,\r\n page: this.state.page\r\n };\r\n if (view === 'map') {\r\n // reset sort and page on map view\r\n newState.page = null;\r\n newState.sortBy = null;\r\n }\r\n if (this.state.view !== view || this.state.page !== newState.page) {\r\n this.setState(newState, () => {\r\n this.updateCurrentUrl();\r\n // TODO: Migrate gtag calls\r\n // window.gtag('config', this.props.clientConfig.googleAnalyticsTrackingId, { 'page_path': window.location.pathname + window.location.search });\r\n // window.gtag('event', 'page_view', { send_to: this.props.clientConfig.googleAnalyticsTrackingId });\r\n });\r\n }\r\n }\r\n\r\n // to allow children to update state of the query in a generic way\r\n setQueryState(state, shouldUpdateUrl, callback) {\r\n // call callback if passed, if not check shouldUpdateUrl\r\n this.setState(state, (callback ? callback : (shouldUpdateUrl ? this.updateCurrentUrl : null)));\r\n }\r\n\r\n updateCurrentUrl(keepPathname, replaceState) {\r\n if (replaceState === undefined) {\r\n replaceState = this.props.searchState.isResultsPage ? false : true;\r\n } \r\n // keep pathname for pages other than results page (radius search, advanced search)\r\n let pathname = this.props.searchState.isResultsPage ? null : window.location.pathname.substring(1);\r\n // sometimes we want to keep it even for results page - like a page change\r\n if (keepPathname) {\r\n pathname = window.location.pathname.substring(1);\r\n }\r\n this.updateUrl(null, replaceState, pathname);\r\n }\r\n\r\n updateUrl(stateMergeObj, replaceState, stem) {\r\n let url = this.createUrl(stateMergeObj, stem);\r\n let history = this.props.history;\r\n if (replaceState) {\r\n history.replace(url, this.state);\r\n } else {\r\n history.push(url, this.state);\r\n }\r\n }\r\n\r\n createUrl(stateMergeObj, stem) {\r\n let state = this.getMergedState(stateMergeObj);\r\n return createSearchUrl(state, stem); // imported function\r\n }\r\n\r\n getMergedState(toBeMergedIntoCurrent) {\r\n let state = {};\r\n if (toBeMergedIntoCurrent) {\r\n Object.assign(state, this.state, toBeMergedIntoCurrent);\r\n } else {\r\n state = this.state;\r\n }\r\n return state;\r\n }\r\n\r\n getPropertyQuery() {\r\n return new SearchQuery(this.state);\r\n }\r\n\r\n render() {\r\n return (\r\n Property Types
\r\n- \r\n {this.mapParents()}\r\n
\r\n {listComponent}\r\n
)\r\n }\r\n let catCounts = this.categoryCounts(this.props.searchState.keywordsDef, this.props.keywords);\r\n // add epcRatings\r\n catCounts.splice(2, 0, {\r\n category: \"EPC rating\",\r\n count: this.props.epc.length\r\n });\r\n return (\r\n \r\n )\r\n }\r\n\r\n static init(id, initialState, clientConfig) {\r\n const RootComponent = PropertyQueryHandler(RefineSearch);\r\n createRoot(document.getElementById(id)).render(\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nif (typeof window !== 'undefined') {\r\n window.propertyForSaleInit = PropertyForSaleSearchBox.init;\r\n}\r\n ","const searchParameters = [\r\n {\r\n name: 'page',\r\n urlName: 'p',\r\n type: 'integer',\r\n defaultValue: 1,\r\n isValid: (value) => {\r\n return value > 0;\r\n },\r\n invisibleAsTag: true\r\n },\r\n {\r\n name: 'pageSize',\r\n urlName: 'ps',\r\n type: 'integer',\r\n defaultValue: 10,\r\n isValid: (value) => {\r\n return value == 10 || value == 25 || value == 50;\r\n },\r\n invisibleAsTag: true\r\n },\r\n {\r\n name: 'sortBy',\r\n urlName: 'sortby',\r\n type: 'string',\r\n defaultValue: 'datedesc',\r\n invisibleAsTag: true\r\n },\r\n {\r\n name: 'locations',\r\n urlName: 'locations',\r\n urlValue: (locations) => {\r\n if (!locations instanceof Array) {\r\n return null;\r\n } else {\r\n return locations.map(function (location) {\r\n // global regex to replace all forward slashes \"/\"\r\n // a regex literal is /.../ but forward slash must be escaped: /\\//\r\n // to replace all, add g\r\n return location.key.replace(/\\//g, '_');\r\n }).join();\r\n }\r\n },\r\n defaultValue: 'scotland',\r\n getTags: function (query, additionalData) {\r\n let locations = query[this.name];\r\n if (!locations || locations.length === 1 && locations[0].key === additionalData.defaultLocationKey)\r\n return [];\r\n return locations.map((l) => ({\r\n name: this.name,\r\n displayText: l.displayText,\r\n value: l.key,\r\n defaultLocationKey: additionalData.defaultLocationKey // will be needed for removal\r\n }));\r\n },\r\n handleTagRemove: function (state, filter) {\r\n let array = state[this.name];\r\n let locations = array.slice();\r\n locations = locations.filter(location => location.key !== filter.value);\r\n let newState = {};\r\n newState[this.name] = locations;\r\n // this checks if the new state will need to have default location added\r\n if (shouldAddDefaultLocation(Object.assign({}, state, newState))) {\r\n return newState = addDefaultLocation(state, newState);\r\n }\r\n return newState;\r\n }\r\n },\r\n {\r\n name: 'radiuses',\r\n urlName: 'radiuses',\r\n urlValue: (radiuses) => {\r\n if (!radiuses instanceof Array) {\r\n return null;\r\n } else {\r\n return radiuses.map(function (radius) {\r\n return radius.lat + ',' + radius.lon + ',' + radius.radius + ',' + encodeURIComponent(radius.displayText);\r\n }).join(';');\r\n }\r\n },\r\n getTags: function (query) {\r\n let radiuses = query[this.name];\r\n if (!radiuses || radiuses.length === 0) {\r\n return [];\r\n }\r\n return radiuses.map((l) =>\r\n ({\r\n name: this.name,\r\n displayText: l.displayText,\r\n value: { 'lat': l.lat, 'lon': l.lon }\r\n }));\r\n }, handleTagRemove: function (state, filter) {\r\n let array = state[this.name];\r\n let radiuses = array.slice();\r\n radiuses = radiuses.filter(radius => radius.lat !== filter.value.lat && radius.lon !== filter.value.lon);\r\n let newState = {};\r\n newState[this.name] = radiuses;\r\n // this checks if the new state will need to have default location added\r\n if (shouldAddDefaultLocation(Object.assign({}, state, newState))) {\r\n return newState = addDefaultLocation(state, newState);\r\n }\r\n return newState;\r\n }\r\n },\r\n {\r\n name: 'school',\r\n urlName: 'school',\r\n urlValue: (school) => {\r\n return school.schoolId;\r\n },\r\n tagName: 'School catchment',\r\n getTags: function(query) {\r\n let value = query[this.name];\r\n if (!value) return [];\r\n return [{ name: this.name, displayText: 'School: ' + value.displayText }];\r\n },\r\n handleTagRemove: function (state) {\r\n // always add default location if school is removed\r\n let newState = { [this.name]: null };\r\n newState = addDefaultLocation(state, newState);\r\n return newState;\r\n }\r\n },\r\n {\r\n name: 'rental',\r\n urlName: 'rental',\r\n type: 'bool',\r\n invisibleAsTag: true\r\n },\r\n {\r\n name: 'minBeds',\r\n urlName: 'minbeds',\r\n tagName: 'Bedrooms',\r\n tagValue: function (val) {\r\n return val.replace('plus', '+');\r\n },\r\n nullValue: '',\r\n type: 'string',\r\n getTags: function (query) {\r\n let value = query[this.name];\r\n if (!value)\r\n return [];\r\n let text;\r\n if (value !== '1') {\r\n text = \"bedrooms\";\r\n } else {\r\n text = \"bedroom\";\r\n }\r\n return [{\r\n name: this.name,\r\n displayText: this.tagValue(value) + \" \" + text\r\n }];\r\n },\r\n handleTagRemove: function () {\r\n return { [this.name]: '' };\r\n }\r\n },\r\n {\r\n name: 'minPrice',\r\n urlName: 'minprice',\r\n tagName: 'Min. price',\r\n type: 'integer',\r\n nullValue: '',\r\n // special case as minPrice and maxPrice have one tag\r\n // it's going to be handled here\r\n getTags: function (query) {\r\n // maxPrice (property name) needs to be hardcoded here\r\n let maxPrice = query.maxPrice;\r\n let minPrice = query[this.name];\r\n let maxPriceFormatted = null;\r\n let minPriceFormatted = null;\r\n let displayText = null;\r\n if (maxPrice) {\r\n maxPriceFormatted = formatToCurrency(maxPrice);\r\n }\r\n if (minPrice) {\r\n minPriceFormatted = formatToCurrency(minPrice);\r\n }\r\n if (maxPriceFormatted && minPriceFormatted) {\r\n displayText = minPriceFormatted + ' - ' + maxPriceFormatted;\r\n } else if (maxPriceFormatted) {\r\n displayText = maxPriceFormatted + ' max';\r\n } else if (minPriceFormatted) {\r\n displayText = 'min ' + minPriceFormatted;\r\n } else {\r\n return [];\r\n }\r\n return [{\r\n name: this.name,\r\n displayText\r\n }];\r\n },\r\n handleTagRemove: function () {\r\n return {\r\n [this.name]: '',\r\n maxPrice: ''\r\n };\r\n }\r\n },\r\n {\r\n name: 'maxPrice',\r\n urlName: 'maxprice',\r\n tagName: 'Max. price',\r\n type: 'integer',\r\n nullValue: '',\r\n invisibleAsTag: true // handled together with minPrice\r\n },\r\n {\r\n name: 'new',\r\n urlName: 'new',\r\n tagName: 'Added',\r\n tagValue: function (val) {\r\n return 'last ' + val + ' days';\r\n },\r\n type: 'integer',\r\n nullValue: '',\r\n getTags: function (query) {\r\n let value = query[this.name];\r\n if (!value) {\r\n return [];\r\n }\r\n return [{\r\n name: this.name,\r\n displayText: this.tagName + \" \" + this.tagValue(value)\r\n }];\r\n },\r\n handleTagRemove: function () {\r\n return { [this.name]: '' };\r\n }\r\n },\r\n {\r\n name: 'nearme',\r\n urlName: 'nearme',\r\n type: 'bool',\r\n invisibleAsTag: true\r\n },\r\n {\r\n name: 'fixedPrice',\r\n urlName: 'fixedprice',\r\n tagName: 'Fixed price',\r\n type: 'bool',\r\n getTags: getBooleanTag,\r\n handleTagRemove: handleBooleanTagRemove\r\n },\r\n {\r\n name: 'virtualTour',\r\n urlName: 'vtour',\r\n tagName: 'Virtual tour',\r\n type: 'bool',\r\n getTags: getBooleanTag,\r\n handleTagRemove: handleBooleanTagRemove\r\n },\r\n {\r\n name: 'underOffer',\r\n urlName: 'underoffer',\r\n tagName: 'Including under offer',\r\n type: 'bool',\r\n getTags: getBooleanTag,\r\n handleTagRemove: handleBooleanTagRemove\r\n },\r\n {\r\n name: 'featured',\r\n urlName: 'featured',\r\n tagName: 'Featured',\r\n type: 'bool',\r\n getTags: getBooleanTag,\r\n handleTagRemove: handleBooleanTagRemove\r\n },\r\n {\r\n name: 'exclusive',\r\n urlName: 'exclusive',\r\n tagName: 'Exclusive',\r\n type: 'bool',\r\n getTags: getBooleanTag,\r\n handleTagRemove: handleBooleanTagRemove\r\n },\r\n {\r\n name: 'solicitor',\r\n urlName: 'orgid',\r\n queryName: 'orgId',\r\n queryValue: function (solicitor) {\r\n return this.urlValue(solicitor);\r\n },\r\n urlValue: function (solicitor) {\r\n return solicitor ? solicitor.id : null;\r\n },\r\n getTags: function (query, { solicitor }) {\r\n if (solicitor)\r\n return [{ name: this.name, displayText: 'Agent: ' + solicitor.firm.name, value: solicitor.id }];\r\n return [];\r\n },\r\n handleTagRemove: handleBooleanTagRemove\r\n },\r\n {\r\n name: 'ptype',\r\n urlName: 'ptype',\r\n urlValue: function (ptypes) {\r\n if (ptypes instanceof Array) {\r\n return ptypes.join();\r\n }\r\n if (typeof ptypes === 'string') {\r\n return ptypes;\r\n }\r\n return null;\r\n },\r\n getTags: function (query, additionalData) {\r\n return getMultiFilterTagInfo.call(this, query, additionalData.propertyTypesDef, 'children');\r\n },\r\n handleTagRemove: handleMultiFilterValueRemoval\r\n },\r\n {\r\n name: 'freeText',\r\n urlName: 'locationtext',\r\n urlValue: function (locationText) {\r\n if (!locationText instanceof Array) {\r\n return null;\r\n } else {\r\n return encodeURIComponent(locationText.join());\r\n }\r\n },\r\n getTags: function (query) {\r\n let freeText = query[this.name];\r\n if (!freeText || freeText.length === 0) {\r\n return [];\r\n }\r\n return freeText.map((l) =>\r\n ({\r\n name: this.name,\r\n displayText: l,\r\n value: l\r\n }));\r\n }, handleTagRemove: function (state, filter) {\r\n let array = state[this.name];\r\n let freeText = array.slice();\r\n freeText = freeText.filter(text => text !== filter.value);\r\n let newState = {};\r\n newState[this.name] = freeText;\r\n // this checks if the new state will need to have default location added\r\n if (shouldAddDefaultLocation(Object.assign({}, state, newState))) {\r\n return newState = addDefaultLocation(state, newState);\r\n }\r\n return newState;\r\n }\r\n },\r\n {\r\n name: 'view',\r\n urlName: 'view',\r\n defaultValue: 'list',\r\n type: 'string',\r\n invisibleAsTag: true\r\n },\r\n {\r\n name: 'keywords',\r\n urlName: 'keywords',\r\n urlValue: function (keywords) {\r\n if (!keywords instanceof Array) {\r\n return null;\r\n } else {\r\n return keywords.join();\r\n }\r\n },\r\n getTags: function (query, additionalData) {\r\n return getMultiFilterTagInfo.call(this, query, additionalData.keywordsDef, 'keywords');\r\n },\r\n handleTagRemove: handleMultiFilterValueRemoval\r\n },\r\n {\r\n name: 'epc',\r\n urlName: 'epc',\r\n tagName: 'EPC rating',\r\n urlValue: function (epcQueryString) {\r\n if (!epcQueryString instanceof Array) {\r\n return null;\r\n } else {\r\n return epcQueryString.join();\r\n }\r\n },\r\n getTags: function (query) {\r\n let epcRatings = query[this.name];\r\n if (!epcRatings || epcRatings.length === 0) { \r\n return [];\r\n }\r\n return [{\r\n name: this.name,\r\n displayText: this.tagName + ': ' + epcRatings.join()\r\n }];\r\n },\r\n handleTagRemove: function () {\r\n return {\r\n [this.name]: []\r\n };\r\n }\r\n },\r\n {\r\n name: 'newbuilds',\r\n urlName: 'newbuilds',\r\n tagName: 'New builds',\r\n type: 'bool',\r\n getTags: getBooleanTag,\r\n handleTagRemove: handleBooleanTagRemove\r\n }\r\n];\r\n\r\nfunction shouldAddDefaultLocation(searchQuery) {\r\n if (searchQuery.locations.length === 0 && searchQuery.radiuses.length === 0 && !searchQuery.school) {\r\n return true;\r\n }\r\n}\r\n\r\nfunction addDefaultLocation(state, newState) {\r\n if (!newState['locations']) {\r\n let locations = state['locations'];\r\n newState['locations'] = locations;\r\n }\r\n newState.locations.push({\r\n key: 'scotland',\r\n displayText: '', // this is not visible anywhere anymore\r\n category: 0\r\n });\r\n return newState;\r\n}\r\n\r\nfunction getBooleanTag(query) {\r\n let value = query[this.name];\r\n if (!value)\r\n return [];\r\n return [{\r\n name: this.name,\r\n displayText: this.tagName\r\n }];\r\n}\r\n\r\nfunction handleBooleanTagRemove() {\r\n return { [this.name]: null };\r\n}\r\n\r\nfunction getMultiFilterTagInfo(query, allValuesInfo, childrenPropertyName) {\r\n let tags = [];\r\n let tagInfo = (selectedFilter) => ({\r\n displayText: selectedFilter.label,\r\n value: selectedFilter.value,\r\n name: this.name\r\n });\r\n var arrayFilter = query[this.name];\r\n if (arrayFilter && arrayFilter.length > 0) {\r\n // iterate over all selected values of a filter\r\n for (const selectedFilter of arrayFilter) {\r\n // find their labels by value\r\n for (const filterValueDefinition of allValuesInfo) {\r\n if (filterValueDefinition.value === selectedFilter) {\r\n tags.push(tagInfo(filterValueDefinition));\r\n }\r\n // check children if exist (for ptypes) \r\n if (filterValueDefinition[childrenPropertyName]) {\r\n for (const childFilterValueDefinition of filterValueDefinition[childrenPropertyName]) {\r\n if (childFilterValueDefinition.value === selectedFilter) {\r\n tags.push(tagInfo(childFilterValueDefinition));\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n return tags;\r\n}\r\n\r\nfunction handleMultiFilterValueRemoval(state, filter) {\r\n let array = state[this.name];\r\n let copy = array.slice();\r\n copy = copy.filter(item => item !== filter.value);\r\n let newState = {};\r\n newState[this.name] = copy;\r\n return newState;\r\n}\r\n\r\nfunction formatToCurrency(number) {\r\n // use native API if available\r\n // fallback for legacy browsers\r\n if (typeof Intl === 'object' && Intl && typeof Intl.NumberFormat === 'function') {\r\n var formatter = new Intl.NumberFormat('en-GB', {\r\n style: 'currency',\r\n currency: 'GBP',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0\r\n });\r\n return formatter.format(number);\r\n }\r\n return '£' + number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n}\r\n\r\n\r\n\r\nexport default searchParameters;\r\n","import searchParameters from './search-parameters.js';\r\n\r\nexport default class SearchQuery {\r\n constructor(rootState) {\r\n for (var i = 0; i < searchParameters.length; i++) {\r\n var searchParameter = searchParameters[i];\r\n if (typeof rootState[searchParameter.name] !== 'undefined') {\r\n this[searchParameter.queryName || searchParameter.name] = searchParameter.queryValue ? searchParameter.queryValue(rootState[searchParameter.name]) : rootState[searchParameter.name];\r\n }\r\n }\r\n }\r\n\r\n isEqual(searchQuery) {\r\n for (var i = 0; i < searchParameters.length; i++) {\r\n var searchParameter = searchParameters[i];\r\n if (searchQuery[searchParameter.queryName || searchParameter.name] !== this[searchParameter.queryName || searchParameter.name]) {\r\n return false;\r\n }\r\n }\r\n return true;\r\n }\r\n}\r\n\r\n/* Exported functions\r\n createCanonicalUrl: returns null if no canonical form exists\r\n createSearchUrl: build a url with querystring that represents current state\r\n*/\r\nfunction createCanonicalUrl(state) {\r\n return createUrl(state, undefined, true);\r\n}\r\n\r\nfunction createSearchUrl(state, stem) {\r\n return createUrl(state, stem);\r\n}\r\n\r\nfunction createMeta(state, solicitor)\r\n{\r\n const parts = [];\r\n var beds = '';\r\n if (state.minBeds && state.minBeds.length === 1) {\r\n try {\r\n let bedsNumber = parseInt(state.minBeds);\r\n if (bedsNumber > 0 && bedsNumber < 7) {\r\n beds = bedsNumber.toString() + \" Bedroom \";\r\n }\r\n }\r\n catch {\r\n console.warn('failed to parse minBeds');\r\n }\r\n }\r\n // When more than one property type in search, fall back to \"Property\"\r\n var part = \"Property \";\r\n var ptype = \"property\";\r\n\r\n // Default search: use Property\r\n if (state.ptype.length === 0) {\r\n ptype = \"Property\";\r\n part = \"Property \";\r\n }\r\n\r\n // Specific property type\r\n if (state.ptype.length === 1) {\r\n var p = state.ptype[0];\r\n if (!p.startsWith(\"other\")) {\r\n ptype = p.split(\"_\")[0] + \"s\";\r\n }\r\n // For title, convert ptype like \"houses\" to \"Houses \"\r\n // If the type was \"other...\" this will be \"Property \"\r\n part = ptype.charAt(0).toUpperCase() + ptype.slice(1) + \" \";\r\n }\r\n\r\n part += state.rental ? \"for Rent\" : \"for Sale\";\r\n\r\n let radiusCount = (state.radiuses) ? state.radiuses.length : 0;\r\n let locationCount = (state.locations) ? state.locations.length : 0;\r\n let defaultLocation = searchParameters.filter(x => x.name === 'locations')[0].defaultValue;\r\n\r\n var district = \"\";\r\n var area = \"\";\r\n\r\n //single location, except if it's the default\r\n if (locationCount === 1 && state.locations[0].key !== defaultLocation && radiusCount === 0)\r\n {\r\n var locationParts = state.locations[0].displayText.split(\",\");\r\n //not district, area - treat as entire entity\r\n if (locationParts.length !== 2) {\r\n part += \" in \";\r\n district = state.locations[0].displayText;\r\n part += district;\r\n part = beds + part;\r\n parts.push(part);\r\n }\r\n else\r\n {\r\n part += \" in \";\r\n district = locationParts[0].trim();\r\n part += district;\r\n part = beds + part;\r\n parts.push(part);\r\n area = locationParts[1].trim();\r\n parts.push(area);\r\n }\r\n }\r\n else if (radiusCount === 1 && locationCount === 0)\r\n {\r\n part += \" \";\r\n part += state.radiuses[0].displayText;\r\n part = beds + part;\r\n parts.push(part);\r\n }\r\n else\r\n {\r\n part = beds + part;\r\n parts.push(part);\r\n }\r\n\r\n if (state.school) parts.push(state.school.displayText + \" Catchment\");\r\n if (solicitor && solicitor.firm) parts.push(solicitor.firm.name);\r\n\r\n parts.push(\"ESPC\");\r\n\r\n let selected = parts.slice(0, 3);\r\n\r\n let saleOrRent = (state.rental) ? \"rent\" : \"sale\";\r\n\r\n let intro = (0 === district.length) ? \"\" : \"Find your home in \" + district + \". \";\r\n let blurb = \"Expert advice on buying property. Find homes for sale first with ESPC\";\r\n\r\n return {\r\n title: selected.join(\" | \"),\r\n description: intro + \"Discover \" + ptype + \" for \" + saleOrRent + (0 === district.length ? \"\" : \" in \" + district) + (0 === area.length ? \"\" : \", \" + area)+\". \" + blurb\r\n };\r\n}\r\n/* End Exported */\r\n\r\nfunction createUrl(state, stem, makeCanonical) {\r\n var urlStem = stem || \"properties\";\r\n var shouldMakeCanonical = makeCanonical || false;\r\n var query = getExtraParams();\r\n for (var i = 0; i < searchParameters.length; i++) {\r\n var param = searchParameters[i];\r\n\r\n if (param.type && param.type == 'integer') {\r\n if (state[param.name]) {\r\n let value = state[param.name];\r\n if (typeof param.defaultValue !== 'undefined') {\r\n // don't put it in url the value is default value\r\n if (param.defaultValue == value) {\r\n continue;\r\n }\r\n }\r\n query[param.urlName] = value.toString();\r\n }\r\n } else if (param.type && param.type == 'string') {\r\n if (state[param.name]) {\r\n let value = state[param.name];\r\n if (typeof param.defaultValue !== 'undefined') {\r\n // don't put it in url the value is default value\r\n if (param.defaultValue == value) {\r\n continue;\r\n }\r\n }\r\n query[param.urlName] = value;\r\n }\r\n } else if (param.type && param.type == 'bool') {\r\n if (state[param.name] == true) {\r\n query[param.urlName] = 'true';\r\n }\r\n } else {\r\n let value = state[param.name];\r\n if (param.urlValue && value) {\r\n if (Array.isArray(value) && value.length < 1) {\r\n continue;\r\n }\r\n // Special handling for default search location\r\n if (param.name === 'locations' && Array.isArray(value) && value.length === 1 && typeof param.defaultValue !== 'undefined') {\r\n // don't put it in url the value is default value\r\n if (param.defaultValue === value[0].key) {\r\n continue;\r\n }\r\n }\r\n query[param.urlName] = param.urlValue(state[param.name]);\r\n }\r\n }\r\n }\r\n\r\n if (stem && (stem.includes(\"property-for-sale\") || stem.includes(\"property-for-rent\"))){\r\n delete query.locations;\r\n }\r\n var queryString = Object.keys(query)\r\n .map(k => (k) + (query[k] != null ? '=' + query[k] : ''))\r\n .join('&');\r\n\r\n return (shouldMakeCanonical)\r\n ? createCanonical(query, state)\r\n : '/' + urlStem + (queryString.length != 0 ? '?' + queryString : '');\r\n}\r\n\r\n// Will return null if no canonical is possible\r\nfunction createCanonical(query, state) {\r\n // Check conditions for possible canonical url\r\n var allowed = ['new', 'locations', 'rental', 'featured', 'p', 'ptype', 'minbeds'];\r\n var queryString = Object.keys(query);\r\n\r\n for (var i = 0; i < queryString.length; i++) {\r\n if (!allowed.includes(queryString[i])) return null;\r\n }\r\n\r\n if (state.ptype.length > 1 || (state.ptype.length === 1 && !(state.ptype[0] === 'house' || state.ptype[0] === 'flat')))\r\n {\r\n return null;\r\n }\r\n\r\n let defaultLocation = searchParameters.filter(x => x.name === 'locations')[0].defaultValue;\r\n\r\n // Page is always allowed, need to add it as a querystring parameter if present\r\n var page;\r\n if (queryString.includes('p')) {\r\n page = query['p'];\r\n queryString = queryString.filter(x => x !== 'p');\r\n }\r\n\r\n // If we have no querystring, or only a page number\r\n if (queryString.length === 0) {\r\n return paginate('/property-for-sale/' + defaultLocation, page);\r\n }\r\n\r\n // Try to generate /property-for-rent and /property-for-sale\r\n // Can't do canonical urls for multiple locations\r\n if (queryString.includes('locations') && state.locations.length === 1){\r\n let minBeds = query['minbeds'];\r\n let locations = query['locations'].replace('_', '/');\r\n let pType;\r\n if (query['ptype']) {\r\n if (state.ptype[0] === \"house\") {\r\n pType= \"houses\";\r\n }\r\n else {\r\n pType= \"flats\";\r\n }\r\n }\r\n let type = query['rental'] ? \"/property-for-rent\" : \"/property-for-sale\";\r\n let result = `${type}/${locations}`;\r\n if (pType){\r\n result += `/${pType}`\r\n }\r\n if (minBeds){\r\n result += `/${minBeds}-bed`\r\n }\r\n return paginate(result, page);\r\n }\r\n\r\n // New and Featured can only canonicalise with single parameter\r\n // Catch Rental with no location here as well\r\n // if (queryString.length > 1) return null;\r\n if (queryString[0] === 'new') {\r\n return paginate('/new', page);\r\n }\r\n if (queryString[0] === 'featured') {\r\n return paginate('/featured-properties', page);\r\n }\r\n if (queryString[0] === 'rental') {\r\n return paginate('/property-for-rent/' + defaultLocation, page);\r\n }\r\n\r\n // There *should* be no conditions where this is reached\r\n return null; \r\n}\r\n\r\nfunction paginate(url, page) {\r\n return (page) ? url + '?p=' + page : url;\r\n}\r\n\r\nfunction createLocale(state)\r\n{\r\n if (state.school) {\r\n return \" in \" + state.school.displayText + \" catchment\";\r\n }\r\n\r\n let geoSearchCount = 0;\r\n if (state.locations) { geoSearchCount += state.locations.length }\r\n if (state.radiuses) { geoSearchCount += state.radiuses.length }\r\n if (geoSearchCount > 1) {\r\n return \"\";\r\n }\r\n\r\n let locale = \"\";\r\n if (state.locations && state.locations.length > 0) {\r\n locale += (state.locations[0].category === 0) ? \" in \" : \" on \";\r\n locale += (state.locations[0].displayText);\r\n }\r\n else if (state.radiuses && state.radiuses.length > 0) {\r\n locale += \" near \" + state.radiuses[0].displayText;\r\n }\r\n\r\n return locale;\r\n}\r\n\r\n//get any extra params that are not in the searchParams so they can be preserved\r\nfunction getExtraParams() {\r\n var params = {};\r\n if (typeof window === 'undefined') {\r\n return params;\r\n }\r\n var query = global.location.search.substring(1);\r\n var vars = query.split('&');\r\n if (query.length == 0) {\r\n return params;\r\n }\r\n for (var i = 0; i < vars.length; i++) {\r\n var pair = vars[i].split('=');\r\n var found = false;\r\n for (var j = 0; j < searchParameters.length; j++) {\r\n var param = searchParameters[j];\r\n if (param.urlName == pair[0]) {\r\n found = true;\r\n continue;\r\n }\r\n }\r\n if (!found) {\r\n if (pair.length == 1) {\r\n params[pair[0]] = null;\r\n }\r\n else {\r\n params[pair[0]] = pair[1]\r\n }\r\n }\r\n }\r\n return params;\r\n}\r\n\r\nexport { createSearchUrl, createCanonicalUrl, createMeta };","import React from 'react';\r\nimport Autocomplete from 'react-autocomplete';\r\nimport PropTypes from 'prop-types';\r\nimport EspcAutocomplete from '../../Common/espc-autocomplete.jsx';\r\n\r\nexport default class SolicitorsValuationsAutocomplete extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleSelect = this.handleSelect.bind(this);\r\n this.updateSuggestions = window.debounce(this.updateSuggestions,500).bind(this);\r\n }\r\n\r\n componentWillReceiveProps(nextProps)\r\n {\r\n if (this.props.value !== nextProps.value) {\r\n // this is debounced - see constructor\r\n this.updateSuggestions(nextProps.value);\r\n }\r\n }\r\n\r\n updateSuggestions(query) {\r\n if (query && query.length) {\r\n $.ajax({\r\n url: ('/solicitors/byname'),\r\n method: 'GET',\r\n data: { query: query, limit: 5 },\r\n success: function (data) {\r\n if (data) {\r\n let indexedItems = data.map((item, index, array) => { return { index: index, item: { key: item.firmId, displayText: item.name } } });\r\n this.props.onSuggestionsUpdate(indexedItems);\r\n }\r\n else {\r\n this.props.onSuggestionsUpdate([]);\r\n }\r\n },\r\n complete: function () {\r\n this.props.onLoadingComplete();\r\n },\r\n context: this\r\n });\r\n }\r\n }\r\n\r\n handleChange(event, value) {\r\n if (typeof this.props.onChange !== 'undefined') {\r\n this.props.onChange(event, value);\r\n }\r\n }\r\n\r\n handleSelect(value, item) {\r\n if(typeof this.props.onSelect !== 'undefined') {\r\n this.props.onSelect({\r\n firmId: item.item.key,\r\n name: item.item.displayText\r\n });\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n
\r\n Property for Sale
\r\n\r\n
\r\n );\r\n }\r\n}","import React from 'react';\r\n\r\nexport default function SelectedSolicitor(props) {\r\n return (\r\n \r\n
\r\n {this.props.solicitorNotSelectedError ? * : null}\r\n Search for your existing solicitor by name.\r\n
\r\n\r\n {this.state.loading ?\r\n
\r\n \r\n
\r\n : (this.state.input.length && this.state.solicitors.length == 0 ?\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Sorry, no results found.
\r\n : null)}\r\n \r\n
\r\n );\r\n}","import React from 'react';\r\nimport SelectSingleSolicitor from './select-single-solicitor.jsx';\r\nimport SelectedSolicitor from './selected-solicitor.jsx';\r\n\r\nexport default class ValuationsInitialForm extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n var userForm = props.userForm || {};\r\n var solicitor = props.solicitor || {};\r\n this.state = {\r\n // initial value should be taken either from userForm (if provided) or user (when user logged in)\r\n firstName: userForm.name || props.user && props.user.firstName || '',\r\n lastName: userForm.name || props.user && props.user.lastName || '',\r\n propertyPostcode: userForm.propertyPostcode || '',\r\n propertyAddress: userForm.propertyAddress || '',\r\n propertyType: userForm.propertyType || '',\r\n bedrooms: userForm.bedrooms || '',\r\n phone: userForm.phone || props.user && props.user.phone || '',\r\n email: userForm.email || props.user && props.user.email || '',\r\n contactPreference: userForm.contactPreference || 'none', // 'email' | 'phone' | 'none' (default)\r\n hasSolicitor: userForm.hasExistingSolicitor,\r\n preSelectedsolicitor: props.solicitor.firmId !== null,\r\n selectedSolicitor: props.solicitor.firmId && props.solicitor || null,\r\n errors: {},\r\n validateInputOnChange: false,\r\n formIncomplete: true,\r\n selling: userForm.selling || ''\r\n };\r\n this.state.formIncomplete = !this.isFormComplete(this.state);\r\n\r\n this.handleFirstNameChange = this.handleFirstNameChange.bind(this);\r\n this.handleLastNameChange = this.handleLastNameChange.bind(this);\r\n this.handlePropertyPostcodeChange = this.handlePropertyPostcodeChange.bind(this);\r\n this.handlePropertyAddressChange = this.handlePropertyAddressChange.bind(this);\r\n this.handlePhoneChange = this.handlePhoneChange.bind(this);\r\n this.handleEmailChange = this.handleEmailChange.bind(this);\r\n this.handleContactPreferenceChange = this.handleContactPreferenceChange.bind(this);\r\n this.handlePropertyTypeChange = this.handlePropertyTypeChange.bind(this);\r\n this.handleBedroomsChange = this.handleBedroomsChange.bind(this);\r\n this.handleSelectedSolicitorChange = this.handleSelectedSolicitorChange.bind(this);\r\n this.handleHasSolicitorChange = this.handleHasSolicitorChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.validateInput = this.validateInput.bind(this);\r\n this.handleFocus = this.handleFocus.bind(this);\r\n this.handleBlur = this.handleBlur.bind(this);\r\n this.checkIfFormComplete = this.checkIfFormComplete.bind(this);\r\n this.handleSellingChange = this.handleSellingChange.bind(this);\r\n }\r\n\r\n checkIfFormComplete() {\r\n const incomplete = !this.isFormComplete(this.state);\r\n if (incomplete !== this.state.formIncomplete) {\r\n this.setState({ formIncomplete: incomplete });\r\n }\r\n }\r\n\r\n isFormComplete(state) {\r\n return (state.firstName) &&\r\n (state.lastName) &&\r\n (state.propertyPostcode) &&\r\n (state.propertyAddress) &&\r\n (state.phone || this.state.email) &&\r\n (state.propertyType) &&\r\n (state.bedrooms) &&\r\n (state.selling) &&\r\n ((typeof state.hasSolicitor !== 'undefined') &&\r\n ((state.hasSolicitor && state.selectedSolicitor) || (!state.hasSolicitor && state.selectedSolicitor === null)) ||\r\n (typeof state.hasSolicitor === 'undefined' && state.preSelectedsolicitor === true));\r\n }\r\n \r\n handleFirstNameChange(event) {\r\n this.setState({ firstName: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n \r\n handleLastNameChange(event) {\r\n this.setState({ lastName: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handlePropertyPostcodeChange(event) {\r\n var value = event.target.value;\r\n if (event.target.value) {\r\n value = value.toUpperCase();\r\n }\r\n this.setState({ propertyPostcode: value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handlePropertyAddressChange(event) {\r\n this.setState({ propertyAddress: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handlePhoneChange(event) {\r\n this.setState({ phone: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handleEmailChange(event) {\r\n this.setState({ email: event.target.value.toLowerCase() }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handlePropertyTypeChange(event) {\r\n this.setState({ propertyType: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handleBedroomsChange(event) {\r\n this.setState({ bedrooms: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handleHasSolicitorChange(event) {\r\n var newState = { hasSolicitor: event.target.value == 'true' };\r\n if (!newState.hasSolicitor && this.state.selectedSolicitor) {\r\n newState.selectedSolicitor = null;\r\n }\r\n this.setState(newState, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handleContactPreferenceChange(event) {\r\n this.setState({ contactPreference: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n });\r\n }\r\n\r\n handleSelectedSolicitorChange(solicitor) {\r\n this.setState({ selectedSolicitor: solicitor }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handleSellingChange(event) {\r\n this.setState({ selling: event.target.value }, () => {\r\n if (this.state.validateInputOnChange) {\r\n this.validateInput();\r\n }\r\n this.checkIfFormComplete();\r\n });\r\n }\r\n\r\n handleSubmit() {\r\n if (!this.validateInput()) {\r\n this.setState({ validateInputOnChange: true });\r\n } else {\r\n var submitData = {\r\n firstName: this.state.firstName,\r\n lastName: this.state.lastName,\r\n email: this.state.email,\r\n phone: this.state.phone,\r\n propertyPostcode: this.state.propertyPostcode,\r\n propertyAddress: this.state.propertyAddress,\r\n propertyType: this.state.propertyType,\r\n bedrooms: this.state.bedrooms,\r\n selling: this.state.selling,\r\n hasExistingSolicitor: this.state.hasSolicitor,\r\n solicitors: this.state.selectedSolicitor ? [{ firmId: this.state.selectedSolicitor.firmId }] : [],\r\n contactPreference: this.state.contactPreference\r\n }\r\n this.props.onSubmit(submitData);\r\n }\r\n }\r\n\r\n validateInput() {\r\n var errors = {};\r\n if (!this.state.firstName || this.state.firstName.trim().length < 1) {\r\n errors.firstName = \"Please enter your first name\";\r\n }\r\n else if (this.state.firstName.trim().length > 50) {\r\n errors.firstName = \"First name must be between 1 to 50 characters\";\r\n } else {\r\n delete errors.firstName;\r\n }\r\n if (!this.state.lastName || this.state.lastName.trim().length < 1) {\r\n errors.lastName = \"Please enter your last name\";\r\n }\r\n else if (this.state.lastName.trim().length > 50) {\r\n errors.lastName = \"Last name must be between 1 to 50 characters\";\r\n } else {\r\n delete errors.lastName;\r\n }\r\n var emailEmpty = !this.state.email || this.state.email.trim().length < 1;\r\n if (!emailEmpty) {\r\n var emailRegexp = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;\r\n if (!emailRegexp.test(this.state.email)) {\r\n errors.email = \"Please enter a valid email address\";\r\n } else if (this.state.email.trim().length > 100) {\r\n errors.email = \"Email address cannot exceed 100 characters\";\r\n }\r\n }\r\n var phoneEmpty = !this.state.phone || this.state.phone.trim().length < 1;\r\n if (!phoneEmpty) {\r\n var phoneRegexp = /^[+0-9 \\-\\(\\)]{11,}$/\r\n if (!phoneRegexp.test(this.state.phone)) {\r\n errors.phone = \"Please enter a valid phone number\";\r\n } else if (this.state.phone.trim().length < 11 || this.state.phone.trim().length > 20) {\r\n errors.phone = \"Phone number must be between 11 to 20 characters\";\r\n }\r\n }\r\n // if both are missing\r\n if (emailEmpty && phoneEmpty) {\r\n errors.emailAndPhone = \"Please provide email or phone\";\r\n delete errors.phone;\r\n delete errors.email;\r\n }\r\n var postcodeRegexp = /^[A-Z]{1,2}[0-9][0-9A-Z]? ?[0-9][A-BD-HJLNP-UW-Z]{2}$/;\r\n if (!postcodeRegexp.test(this.state.propertyPostcode)) {\r\n errors.propertyPostcode = \"Please enter a valid postcode\";\r\n } else {\r\n delete errors.propertyPostcode;\r\n }\r\n if (!this.state.propertyAddress || this.state.propertyAddress.trim().length < 1) {\r\n errors.propertyAddress = \"Please enter property address\";\r\n }\r\n if (!this.state.propertyType || this.state.propertyType.trim().length < 1) {\r\n errors.propertyType = \"Please choose a property type\";\r\n }\r\n if (!this.state.bedrooms || this.state.bedrooms < 1 || this.state.bedrooms > 5) {\r\n errors.bedrooms = \"Please choose number or bedrooms\";\r\n }\r\n if (!this.state.selling || this.state.selling.length < 1 ) {\r\n errors.selling = \"Please select a selling time frame\";\r\n }\r\n if (this.state.hasSolicitor == null && this.state.preSelectedsolicitor === false) {\r\n errors.hasSolicitor = \"Please choose an answer\";\r\n } else {\r\n delete errors.hasSolicitor;\r\n }\r\n if ((this.state.hasSolicitor === true || this.state.preSelectedsolicitor === true) && !this.state.selectedSolicitor) {\r\n errors.selectedSolicitor = \"Please select your solicitor\";\r\n }\r\n\r\n this.setState({ errors: errors, contactPreference: errors.emailAndPhone || emailEmpty || phoneEmpty ? 'none': this.state.contactPreference});\r\n return Object.keys(errors).length < 1;\r\n }\r\n\r\n handleFocus(event) {\r\n // show border\r\n var ele = event.target;\r\n ele.parentElement.style.border = \"1px dotted #444\";\r\n }\r\n\r\n handleBlur(event) {\r\n // hide border\r\n var ele = event.target;\r\n ele.parentElement.style.border = \"1px dotted #FFF\";\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {props.selectedSolicitor.name}\r\n props.onSelectedSolicitorChange(null)} style={{\r\n color: '#b94a48',\r\n cursor: 'pointer'\r\n }}>\r\n
\r\n \r\n {!this.props.user ?
\r\n )\r\n }\r\n} ","import React from 'react';\r\nimport { Popup } from 'reactjs-popup';\r\n\r\nexport default function SolicitorsListMultipleSelect(props) {\r\n\r\n var handleChange = function (solicitor, event) {\r\n var checked = event.target.checked;\r\n var selectedSolicitors = props.selectedSolicitors.slice();\r\n var exists = selectedSolicitors.map(s => s.organisationId || s.firmId).indexOf(solicitor.organisationId || solicitor.firmId);\r\n if (exists < 0) {\r\n // not found\r\n if (checked) {\r\n // add\r\n selectedSolicitors.push({ organisationId: solicitor.organisationId, firmId: solicitor.firmId });\r\n }\r\n } else {\r\n // found\r\n if (!checked) {\r\n // remove\r\n selectedSolicitors.splice(exists, 1);\r\n }\r\n }\r\n\r\n props.onSelectedSolicitorsChange(selectedSolicitors);\r\n }\r\n\r\n const list = props.solicitors.map((s) => {\r\n // 's.organisationId && s.firmId' expression means organisationId or firmId whatever first is not null or 0\r\n // this is to support nearby offices where user selects organisationId (branch)\r\n // in other algorithms user selects firmId\r\n var checked = props.selectedSolicitors.map(s => s.organisationId || s.firmId).indexOf(s.organisationId || s.firmId) > -1;\r\n return (\r\n Log in to get your details filled in automatically
: null}\r\n {this.state.preSelectedsolicitor === true && (\r\nSending valuation request to {this.state.selectedSolicitor.name}
\r\n )}\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n
\r\n {this.state.hasSolicitor === true &&\r\n {this.state.errors.propertyType ? * : null}What type of property is it?
\r\n \r\n \r\n \r\nHow many bedrooms?
\r\n {this.state.errors.bedrooms ? * : null}\r\n {[[1, \"1\"], [2, \"2\"], [3, \"3\"], [4, \"4\"], [5, \"5+\"]].map(item =>\r\n ()\r\n )}\r\n\r\nWhen are you thinking of selling? {this.state.errors.selling ? * : null}
\r\n \r\n\r\n {this.state.email && this.state.email.trim().length > 0 && this.state.phone && this.state.phone.trim().length > 0 && (\r\n\r\n
\r\n )} \r\n\r\n {this.state.preSelectedsolicitor === false && (\r\n Do you have a preference for how the firm contacts you?
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n )}\r\n\r\n\r\n Do you already have a solicitor?
\r\n {this.state.errors.hasSolicitor ? * : null}\r\n \r\n \r\n\r\n {this.state.selectedSolicitor == null ?\r\n :\r\n }\r\n
\r\n }\r\n\r\n \r\n {Object.keys(this.state.errors).length > 0 ? (\r\n
\r\n \r\n
) : null}\r\n Sorry, there seems to be a problem.
\r\n\r\n
\r\n - \r\n {this.state.errors.firstName ?
- {this.state.errors.firstName} : null}\r\n {this.state.errors.lastName ?
- {this.state.errors.lastName} : null}\r\n {this.state.errors.propertyPostcode ?
- {this.state.errors.propertyPostcode} : null}\r\n {this.state.errors.propertyAddress ?
- {this.state.errors.propertyAddress} : null}\r\n {this.state.errors.email && !this.state.errors.emailAndPhone ?
- {this.state.errors.email} : null}\r\n {this.state.errors.phone && !this.state.errors.emailAndPhone ?
- {this.state.errors.phone} : null}\r\n {this.state.errors.emailAndPhone ?
- {this.state.errors.emailAndPhone} : null}\r\n {this.state.errors.propertyType ?
- {this.state.errors.propertyType} : null}\r\n {this.state.errors.bedrooms ?
- {this.state.errors.bedrooms} : null}\r\n {this.state.errors.selling ?
- {this.state.errors.selling} : null}\r\n {this.state.errors.hasSolicitor ?
- {this.state.errors.hasSolicitor} : null}\r\n {this.state.errors.selectedSolicitor ?
- {this.state.errors.selectedSolicitor} : null}\r\n
\r\n \r\n
\r\n {this.props.submitResult == 'error' ?\r\n \r\n
: null}\r\n \r\n
\r\n There seems to be an problem with your request.\r\n Try again or if the problem persists please contact us at support@espc.com
\r\n\r\n
\r\n By providing this information, you consent to us providing it to the selected solicitors so that they can contact you directly about your \r\n property valuation. Please read our terms & conditions
\r\n\r\n ![](\"/resources/images/espc_chartered_firm.png\")
\r\n (\r\n \r\n )}\r\n position={['right center', 'left center']}\r\n closeOnDocumentClick\r\n keepTooltipInside\r\n on=\"hover\"\r\n >\r\n Chartered Firms are ESPC Solicitor Estate Agents who have agreed to guarantee clients and prospective clients a higher level of service. Learn more \r\n \r\n \r\n
}\r\n \r\n - \r\n {list}\r\n
\r\n
\r\n )\r\n }\r\n}","import React from 'react';\r\n\r\nexport default function ValuationFormHeading(props) {\r\n var clickHandler = function (e) {\r\n e.preventDefault();\r\n window.scrollTo(0, 0);\r\n history.back();\r\n };\r\n return (\r\n \r\n (\r\n \r\n )}\r\n position={['right center', 'left center']}\r\n closeOnDocumentClick\r\n keepTooltipInside\r\n on=\"hover\"\r\n >\r\n Chartered Firms are ESPC Solicitor Estate Agents who have agreed to guarantee clients and prospective clients a higher level of service. Learn more \r\n \r\n
\r\n \r\n \r\n Only show Chartered Firms\r\n
\r\n \r\n
\r\n - \r\n
- \r\n Sold
Nearby\r\n \r\n - \r\n Highest
Price\r\n \r\n - \r\n Quickest
Sale\r\n \r\n - \r\n Offices
Nearby\r\n \r\n
\r\n
\r\n :\r\n (this.state.method && this.state.solicitors.length > 0 && \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
)}\r\n \r\n {!this.state.loading && this.state.method && this.state.solicitors.length == 0 &&\r\n {this.state.method.blurb}
\r\n\r\n
}\r\n Sorry, we couldn't find any solicitors providing valuation services close to your area. Try changing the options above or\r\n window.location.href = window.location.href}> try again with different postcode
\r\n\r\n {this.state.solicitors.length > 0 && (\r\n \r\n SEND VALUATION REQUEST\r\n )}\r\n
\r\n {this.props.submitResult == 'error' ?\r\n \r\n
: null}\r\n \r\n
\r\n There seems to be an problem with your request.\r\n Try again or if the problem persists please contact us at support@espc.com
\r\n\r\n
\r\n );\r\n}","import React from 'react';\r\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\r\nimport InitialForm from './initial-form.jsx';\r\nimport SolicitorsByAlgorithm from './solicitors-by-algorithm.jsx';\r\nimport ValuationFormHeading from './heading.jsx';\r\nimport {createRoot} from \"react-dom/client\";\r\n\r\nclass Valuations extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = history.state || {\r\n userForm: { suggestionPreference: props.solicitor.firmId !== null ? 'fromPropertyDetails' : 'existingSolicitor' },\r\n submitInProgress: false,\r\n step: 1\r\n };\r\n this.state.submitResult = null;\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n this.handleSolicitorsSubmit = this.handleSolicitorsSubmit.bind(this);\r\n this.handleExistingSolicitorSubmit = this.handleExistingSolicitorSubmit.bind(this);\r\n this.captchaValidated = this.captchaValidated.bind(this);\r\n this.resumeSubmittingForm = this.resumeSubmittingForm.bind(this);\r\n window.onpopstate = (event) => {\r\n // need to RESET the state\r\n // setState merges the state so any properties existing in the current state \r\n // that don't exist in the new state will still be there\r\n // below is copying current state, sets all properties to null, sets other properties to values from new state\r\n var reset = { ...this.state };\r\n Object.keys(reset).forEach(key => reset[key] = null);\r\n var newState = Object.assign(reset, event.state);\r\n this.setState(newState);\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.initialiseCaptcha();\r\n this.reportView();\r\n }\r\n\r\n initialiseCaptcha() {\r\n if (typeof window.grecaptcha === 'undefined' || typeof window.grecaptcha.render === 'undefined') {\r\n window.setTimeout(this.initialiseCaptcha.bind(this), 100);\r\n } else {\r\n window.grecaptcha.render('recaptcha-service', { callback: this.captchaValidated }, true);\r\n }\r\n }\r\n\r\n reportView() {\r\n $.post('/valuations/report/view');\r\n }\r\n\r\n captchaValidated(token) {\r\n // challenge completed\r\n // resume submitting form\r\n // token will get extracted with grecaptcha.getResponse();\r\n this.resumeSubmittingForm();\r\n }\r\n\r\n resumeSubmittingForm() {\r\n // resume after captcha challenge completed\r\n // no-op if captcha is validated without needing to show challenge\r\n // this method gets overwritten if challenge is shown\r\n }\r\n\r\n handleSubmit(userForm) {\r\n var browserState = { ...this.state, userForm };\r\n // add a state to current history entry so that when you come back it can be restored\r\n history.replaceState(browserState, null);\r\n\r\n // this method assumes that the data is already validated\r\n // two scenarios possible now\r\n // 1. if solicitors is a non empty array it means the data a should be submitted to server\r\n // 2. else, we should display another view with options to select solicitors by different algorithms\r\n if (userForm.solicitors && userForm.solicitors.length > 0) {\r\n grecaptcha.execute();\r\n var token = grecaptcha.getResponse();\r\n if (!token) {\r\n // this means that user wasn't validated and was shown a challenge\r\n // we need to wait for it to complete it\r\n // capture current form data in a closure\r\n this.resumeSubmittingForm = () => {\r\n this.handleSubmit(userForm);\r\n };\r\n } else {\r\n this.setState({ submitInProgress: true });\r\n $.ajax({\r\n url: '/valuations',\r\n method: 'POST',\r\n data: { ...userForm, 'g-recaptcha-response': token},\r\n success: function () {\r\n GA.track(\"ValuationRequested\");\r\n this.setState({ submitResult: 'success' }, () => {\r\n // back browser button should always go to the first step\r\n if (this.state.step == 2) {\r\n history.replaceState({ ...this.state }, null);\r\n } else {\r\n history.pushState({ ...this.state }, null);\r\n }\r\n });\r\n },\r\n error: function () {\r\n this.setState({ submitResult: 'error' });\r\n },\r\n complete: function () {\r\n this.setState({ submitInProgress: false });\r\n },\r\n context: this\r\n });\r\n }\r\n } else {\r\n // add a new history entry for step 2\r\n history.pushState({ ...browserState, step: 2 }, null);\r\n // and go to this next step\r\n this.setState({ userForm: userForm, step: 2 }, () => {\r\n $.post('/valuations/report/2ndStep');\r\n });\r\n }\r\n }\r\n\r\n handleSolicitorsSubmit(selectedSolicitors, method) {\r\n var userForm = { ...this.state.userForm };\r\n userForm.solicitors = selectedSolicitors;\r\n userForm.suggestionPreference = method;\r\n this.handleSubmit(userForm);\r\n }\r\n\r\n handleExistingSolicitorSubmit(userForm) {\r\n userForm.suggestionPreference = this.state.userForm.suggestionPreference;\r\n this.handleSubmit(userForm);\r\n }\r\n\r\n static init(id, initialProps) {\r\n createRoot(document.getElementById(id)).render((\r\n - \r\n
- {props.step < 2\r\n ? (Your Details)\r\n : (Your Details)\r\n }\r\n \r\n
- Choose Solicitors \r\n
{props.step === 2 ? \"Select your solicitor estate agent\" : \"Request a Home Valuation\"}
\r\n {props.step === 1 &&\r\n <>\r\n\r\n Finding out how much your property is worth is the first step in the selling process. \r\n To request a free, no-obligation valuation from one of our Solicitor Estate Agents, please fill in the form below.\r\n
\r\n\r\n You can select which Solicitor Estate Agents you’d like to send your valuation request to, \r\n and they will be in touch to discuss the next steps in getting your home valued.\r\n
\r\n }\r\n {props.step === 2 &&\r\n <>\r\n\r\n Select one of the options below to see a list of solicitor estate agents that will best meet your needs.\r\n
\r\n }\r\n\r\n
\r\n );\r\n } else {\r\n return (\r\n Thank you!
\r\n\r\n
\r\n \r\n \r\n Thank you! We have now passed on your valuation enquiry to your chosen solicitor estate agent firms.\r\n They will contact you directly via phone or email to fully discuss the next steps in getting your pre-sale home valuation.\r\n
\r\n\r\n In the meantime, have a look at our free advice section or head back to our homepage to search for your dream home.\r\n
\r\n\r\n You might also be interested in:\r\n
\r\n- \r\n
- How to sell a house in Scotland \r\n
- ESPC Mortgages \r\n
- Mortgage calculator \r\n
- Search by school catchment \r\n
- Ask the Expert drop-ins \r\n
- Unlock for sellers \r\n
- Moving house checklist \r\n
\r\n
);\r\n }\r\n }\r\n}\r\nif (typeof window !== 'undefined') {\r\n window.valuationsInit = Valuations.init;\r\n}","import React from 'react';\r\nimport Marker from '../Leaflet/marker.jsx';\r\n\r\nexport default class SolicitorOfficeMarker extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleMarkerAddedToMap = this.handleMarkerAddedToMap.bind(this);\r\n }\r\n\r\n handleMarkerAddedToMap(leafletMarker) {\r\n // Leaflet doesn't provide an official method to access marker's icon's HtmlElement\r\n // _icon which is used here is undocumented and likely to break! Had some ideas for workarounds but they weren't worth the effort.\r\n this.markerHtmlElement = leafletMarker._icon;\r\n this.marker = leafletMarker;\r\n var sol = this.props.solicitors[0];\r\n var popupContent = this.props.solicitors.map(sol =>\r\n '\r\n This site is protected by reCAPTCHA and the Google \r\n Privacy Policy and\r\n Terms of Service apply.\r\n
\r\n \r\n' +\r\n '![](\"')
' +\r\n '
' +\r\n '' +\r\n '' +\r\n '' +\r\n '
' +\r\n '' + sol.name + '
' +\r\n '' +\r\n '' + sol.address + '
' +\r\n 't: ' + sol.phone + '
' +\r\n '' +\r\n '' +\r\n popupContent +\r\n '
', {\r\n closeButton: false\r\n });\r\n }\r\n\r\n render() {\r\n var count = this.props.solicitors.length;\r\n var markerInnerClass = (count > 1 ?'cluster': 'single') + ' c-white';\r\n var markerContent = count > 1 ? count : '';\r\n var markerInnerHtml = '' + markerContent + '
';\r\n var markerOutermostClass = 'map-pin';\r\n return (\r\n