\n { video ? (\n <>\n { !playing && image &&
\n )\n }\n}\n\nexport default Video","import React, { FC } from \"react\"\nimport { ButtonType } from \"../../../types\"\nimport { Button } from \"./button\"\n\ntype Props = {\n collection: {\n items: ButtonType[]\n } \n}\n\nexport const ButtonCollection: FC\n {items.map((button, index) => (\n \n ))}\n
\n )\n}","import React, { FC } from 'react';\nimport CustomLink from '../CustomLink';\nimport Video from '../../Helper/video'\nimport { BannerType } from './types';\nimport { ButtonCollection } from '../../Helper/buttonCollection';\n\ntype Props = {\n component: {\n banner: BannerType\n }\n}\n\nconst Banner: FC\n
\n )\n \n}\n\nexport default Banner;","const contentful = require(\"contentful\");\nexport const client = contentful.createClient({\n space: \"17g0rvry75o4\",\n accessToken: \"F41sAQxqpg5hgxtUIp210r2woL-hiu-d035GmCt9roo\"\n});","import React, { Component } from 'react';\nimport { client } from '../../../ContentfulContext';\nimport {Components} from '../';\nimport {Helmet} from \"react-helmet\";\n\nclass Destination extends Component {\n constructor(props) { \n super(props);\n\n this.state = {\n id: window.location.pathname.replace(\"/destination/\", \"\"),\n loaded: false,\n destination: {},\n components: [],\n };\n }\n\n getDestination() {\n client\n .getEntries({content_type: \"destinations\", \"fields.handle[match]\": this.state.id})\n .then(async entry => {\n await this.setState({destination: entry.items[0].fields})\n this.getComponents();\n })\n .catch(err => console.log(err));\n }\n\n async componentDidUpdate() {\n const id = window.location.pathname.replace(\"/destination/\", \"\");\n if (this.state.id !== id) {\n await this.setState({\n id: id,\n loaded: false,\n destination: {},\n components: [],\n });\n this.getDestination();\n }\n }\n\n componentDidMount() {\n this.getDestination();\n }\n\n render() {\n return (\n \n 
}\n
\n \n
\n {video && }\n {!video && image && \n {buttonTitle} \n ): null}\n
\n {title}
\n{subTitle}
\n{subSubTitle}
\n\n {this.state.destination.components.map(component => {\n const contentType = component.sys.contentType.sys.id;\n const ComponentToRender = Components[contentType];\n \n return \n })}\n
\n )}\n \n
\n)\n }\n\nexport default TitleParagraph;","import { gql } from \"@apollo/client\"\n\nconst TitleParagraphQuery = gql`\n query ($id: String!) {\n titleParagraph(id: $id) {\n title\n font\n hideLine\n paragraph\n buttonTitle\n buttonUrl\n button {\n title\n type\n url\n contactForm {\n sys {\n id\n }\n __typename\n }\n }\n }\n }\n`\n\nexport default TitleParagraphQuery","import React, { FC, useEffect, useState, useRef } from \"react\";\nimport { Button } from \"../../Helper/button\";\nimport CustomLink from \"../CustomLink\";\nimport { ImageTextType } from \"./types\";\n\ntype Props = {\n component: {\n imageText: ImageTextType;\n };\n};\n\nconst ImageText: FC{!hideLine ? {title} : title}
\n{paragraph}
\n {buttonTitle && !button && (\n\n {buttonTitle} \n
\n )}\n {button && (\n \n \n
\n )}\n\n \n
\n \n
\n \n );\n};\n\nexport default ImageText;\n","import { gql } from \"@apollo/client\"\n\nconst ImageTextQuery = gql`\n query ($id: String!) {\n imageText(id: $id) {\n title\n font\n paragraph\n button {\n title\n type\n url\n contactForm {\n sys {\n id\n }\n __typename\n }\n }\n buttonTitle\n buttonUrl\n image {\n title\n url\n }\n imageOnTheLeft\n ratio\n textLarger\n }\n }\n`\n\nexport default ImageTextQuery","import React, { FC, useEffect, useState, useRef } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport TextTruncate from \"react-text-truncate\";\n\nimport { formatMoney } from \"../../Properties/utils\";\nimport { ComponentLoader } from \"../../..\";\nimport { FeaturedProperty } from \"./types\";\nimport {\n CarouselProvider,\n Slider,\n Slide,\n ButtonBack,\n ButtonNext,\n} from \"pure-react-carousel\";\nimport { ArrowLeft, ArrowRight } from \"../../../../Styles/icons\";\nimport { Button } from \"../../Helper/button\";\n\nconst options = {\n root: null,\n rootMargin: \"0px\",\n threshold: [0.1, 0.5, 1.0],\n};\n\ntype Props = {\n component: {\n featuredProperties: FeaturedProperty;\n };\n};\n\nconst FeaturedProperties: FC\n {title && (\n \n {buttonTitle}\n \n )}\n
\n {title}
\n )}\n {title && }\n {paragraph &&{paragraph}
}\n {button && }\n {buttonTitle && (\n\n {title && \n setContactPropertyName(undefined)}\n style={{\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n top: \"0\",\n left: \"0\",\n backgroundColor: \"rgba(0,0,0,0.5\",\n }}\n >
\n \n )}\n {buttonTitle && (\n \n {buttonTitle}\n \n )}\n \n );\n};\n\nexport default FeaturedProperties;\n","import React from 'react'\n\nexport const BedIcon = () => (\n \n)\n\nexport const BathIcon = () => (\n\n)\n\nexport const ArrowLeft = (props) => {\n let colour = \"#ffffff\";\n let weight = 6;\n if (props.colour) { colour = props.colour };\n if (props.weight) { weight = props.weight };\n return (\n \n )\n}\n\nexport const ArrowRight = (props) => {\n let colour = \"#ffffff\";\n let weight = 6;\n if (props.colour) { colour = props.colour };\n if (props.weight) { weight = props.weight };\n return (\n \n )\n}","import { gql } from \"@apollo/client\";\n\nconst FeaturedPropertiesQuery = gql`\n query ($id: String!) {\n featuredProperties(id: $id) {\n title\n buttonTitle\n buttonUrl\n propertiesCollection {\n items {\n name\n propertyHandle\n description\n photosCollection {\n items {\n fileName\n url\n }\n }\n bedrooms\n bathroom\n propertySizeSqm\n propertyBedroomsMax\n propertyBathroomMax\n propertySizeSqftMax\n price\n propertyCurrency\n startingFrom\n }\n }\n contactForm {\n sys {\n id\n }\n }\n }\n }\n`;\n\nexport default FeaturedPropertiesQuery;\n","import React, { Component } from 'react';\nimport Slider from \"react-slick\";\nimport {ArrowLeft, ArrowRight} from '../../../Styles/icons';\n\nclass Carousel extends Component {\n constructor(props) { \n super(props);\n\n this.state = {\n component: props.component\n };\n\n this.next = this.next.bind(this);\n this.prev = this.prev.bind(this);\n }\n\n next() {\n this.slider.slickNext();\n }\n prev() {\n this.slider.slickPrev();\n }\n\n componentDidUpdate() {\n if (this.state.component !== this.props.component) {\n this.setState({component: this.props.component});\n }\n }\n \n render() {\n var settings = {\n dots: false,\n arrows: false,\n infinite: false,\n speed: 500,\n slidesToScroll: 1,\n slidesToShow: this.state.component.slidesPerPage,\n row: 1,\n responsive: [\n {\n breakpoint: 650,\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1\n }\n }\n ]\n };\n return (\n {title}
}\n\n\n {properties.map((property, index) => {\n let {\n name,\n price,\n bedrooms,\n bathroom,\n propertySizeSqm,\n propertyBedroomsMax,\n propertyBathroomMax,\n propertySizeSqftMax,\n description,\n startingFrom,\n propertyCurrency,\n photosCollection,\n propertyHandle,\n } = property;\n const propertyLink = `/property/${propertyHandle}`;\n\n if (propertyBedroomsMax && bedrooms !== propertyBedroomsMax)\n bedrooms += \" - \" + propertyBedroomsMax;\n if (propertyBathroomMax) bathroom += \" - \" + propertyBathroomMax;\n if (propertySizeSqftMax)\n propertySizeSqm += \" - \" + propertySizeSqftMax;\n const priceLabel = `${\n startingFrom ? \"From\" : \"\"\n } ${propertyCurrency}${formatMoney(price)}`;\n\n const PropertyCard = ({ link }: { link: string }) => (\n
\n {contactPropertyName && contactForm && (\n \n {/* \n \n {photosCollection.items.map((image, key) => {\n const { url, fileName } = image;\n return (\n // @ts-ignore\n \n 
\n \n );\n })}\n \n \n \n \n \n \n\n <>\n setContactPropertyName(name)}\n />\n \n
\n );\n\n return (\n {name}
\n\n {bedrooms} Beds | {bathroom} Baths | {propertySizeSqm} Sqft\n
\n\n
{priceLabel}
\n\n
\n );\n })}\n \n
\n )\n }\n}\n\nexport default Carousel;","import React, { Component } from 'react';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\n\nclass CustomHTML extends Component {\n constructor(props) { \n super(props);\n\n this.state = {\n component: props.component\n };\n }\n\n componentDidUpdate() {\n if (this.state.component !== this.props.component) {\n this.setState({component: this.props.component});\n }\n }\n render() {\n \n return (\n \n
\n {this.state.component.title}
\n\n (this.slider = c)} {...settings}>\n {this.state.component.images.map(image => (\n \n
\n \n
\n ))}\n \n 
\n
\n {this.state.component.title}
\n {this.state.component.html.content.map(el => documentToReactComponents(el))} \n{title}
}\n{paragraph}
\n\n
} light={videoThumbnail ? videoThumbnail.fields.file.url : \"\"}>\n\n\n \n \n {this.state.component.title}\n
\n {this.state.loaded && (\n\n {this.state.teams.items.map((team) => {\n return (\n
\n )}\n \n \n
\n );\n })}\n {team.fields.name}
\n{team.fields.jobTitle}
\n{team.fields.email}
\n\n
\n \n
\n {this.state.component.title}
\n{this.state.component.paragraph}
\n\n (this.slider = c)} {...settings}>\n {this.state.press.map(article => {\n const {headline, publisher, date, articleImage} = article.fields;\n return (\n \n
\n \n
\n )\n })}\n \n 
\n
\n \n
\n {headline}
\n@{publisher} {date}
\n\n
\n\n \n 
\n
\n \n \n
\n {title}
\n {paragraph && paragraph.content.map(el => documentToReactComponents(el))}\n\n\n \n
\n
\n | Property Name | \nBedroom | \nBathroom | \nSqft | \nListing Price | \n\n |
|---|---|---|---|---|---|
| {name} | \n{bedrooms} | \n{bathroom} | \n{propertySizeSqm} | \n{price} | \n\n View Property\n | \n
\n {this.state.component.title}\n
\n\n \n
\n \n );\n }\n}\n\nexport default VR;\n","import { gql } from \"@apollo/client\";\n\nexport const OurServicesQuery = gql`\n query ($id: String!) {\n\t ourServices(id: $id) {\n \ttitle\n servicesPerLine\n servicesPerRowCollection {\n items {\n \ttitle\n extract\n button {\n title\n url\n contactForm {\n sys {\n id\n }\n __typename\n }\n }\n handle\n buttonTitle\n thumbNail {\n title\n url\n }\n }\n }\n }\n }\n`\n\nexport default OurServicesQuery","import React, { FC, Fragment, useEffect, useRef, useState } from 'react';\nimport Slider from 'react-slick';\nimport Banner from '../Banner';\nimport BlogList from '../BlogList';\nimport { Link } from 'react-router-dom';\nimport { BlogLandingPageType } from \"./types\"\nimport { BannerType } from '../Banner/types';\n\ntype Props = {\n component: {\n blogLandingPage: BlogLandingPageType;\n }\n}\n\n // this.state = {\n // url: window.location.pathname.replace(\"/montague-post\", \"\"),\n // component: props.component,\n // blogs: [],\n // articles: [],\n // activeBlog: null,\n // };\n \n\n // async fetchBlogs() {\n // let id = \"\";\n \n // const promise = await this.state.component.blogs.map((blog, key) => {\n // if (key === 0) return id = id + blog.sys.id\n // return id = id + `,${blog.sys.id}`\n // });\n // await Promise.all(promise);\n \n // client\n // .getEntries({\"sys.id[in]\": id})\n // .then(entry => {\n // if (this.state.url === \"\" || this.state.url ===\"/\") {\n // const activeBlog = entry.items.find(o => o.sys.id === this.state.component.blogs[0].sys.id);\n // this.setState({blogs: entry.items, activeBlog: activeBlog, loaded: true})\n // } else {\n // const activeBlog = entry.items.find(o => o.fields.handle === this.state.url);\n // const index = this.state.component.blogs.findIndex(x => x.sys.id === activeBlog.sys.id)\n // console.log(index);\n // this.setState({blogs: entry.items, activeBlog: activeBlog, initialSlide: index, loaded: true})\n // }\n \n // })\n // .catch(err => console.log(err));\n // }\n\nconst settings = {\n dots: false,\n infinite: false,\n fade: true,\n speed: 500,\n slidesToScroll: 1,\n slidesToShow: 1,\n draggable: false,\n initialSlide: 0\n};\n\nexport const BlogLandingPage: FC\n \n {blogs.map((blog, index) => {\n const banner: BannerType = {\n title: blog.title,\n image: blog.blogFeaturedImage,\n buttonCollection: {\n items: []\n }\n }\n \n return (\n \n\n \n
\n\n {/* \n
\n\n \n
\n \n {blogs.map((blog, key) => {\n const url = \"/montague-post\" + blog.handle;\n return (\n // \n
\n {\n if(slider) (slider as any).slickGoTo(key);\n setActiveBlog(blog)\n }}>{blog.title}
\n // \n )\n })}\n\n {this.state.articles && this.state.activeBlog ? (\n
*/}\n\n \n
\n )\n}\n\nconst ChildItem = props => {\n const {title, url, parent, showSlide, id, onClickHanlder} = props;\n if (parent)\n return (\n e.preventDefault()}>\n \n
\n\n {navigation.map((item, index) => {\n if(item.fields) {\n const {title, url, links} = item.fields\n if (links) {\n const id = item.sys.id;\n return (\n \n {title ? {\n e.preventDefault();\n closeSlide(e, id)}\n }>
\n \n
\n )\n } else {\n return (\n \n
\n )\n }\n }\n return null\n })}\n showSlide(e, id)}>{title}
{title}
\n \n )\n }\n}","import React, { Component, Fragment } from \"react\";\nimport \"../../../Styles/navigation.sass\";\nimport { client } from \"../../../ContentfulContext\";\nimport NavigationSlider from \"./Navigation-slider\";\nimport { Link } from \"react-router-dom\";\n\nclass Navigation extends Component {\n constructor(props) {\n super(props);\n this.state = {\n navigation: [],\n nav_state: false,\n pathname: props.pathname,\n colour: props.colour,\n nav_size: false,\n hideBurger: props.hideBurger,\n };\n }\n\n onClickHanlder = () => {\n this.setState({\n nav_state: !this.state.nav_state,\n });\n\n const el = document.querySelectorAll(\".navigation-slider .open\");\n\n if (el) {\n for (const e of el) {\n e.className = \"navigation-slider\";\n }\n }\n };\n\n async getAllEntries() {\n let snapshot = this.state.navigation;\n snapshot.forEach(async (item) => {\n if (!item.fields?.links) return;\n\n for await (let link of item.fields.links) {\n await client\n .getEntry(link.sys.id)\n .then((entry) => {\n link.fields = entry.fields;\n return;\n })\n .catch((err) => console.log(err));\n }\n await this.setState({ navigation: snapshot });\n });\n }\n\n async componentDidUpdate() {\n if (this.state.colour !== this.props.colour) {\n await this.setState({ colour: this.props.colour });\n }\n\n if (this.state.hideBurger !== this.props.hideBurger) {\n await this.setState({ hideBurger: this.props.hideBurger });\n }\n }\n\n handleScroll = (event) => {\n let scrollTop = window.pageYOffset;\n\n if (scrollTop > 10 && this.state.nav_size === false) {\n this.setState({ nav_size: true });\n } else if (scrollTop < 10 && this.state.nav_size === true) {\n this.setState({ nav_size: false });\n }\n };\n\n async componentDidMount() {\n client\n .getEntry(\"HEdbWFAfUiLbzzdZJiKa3\")\n .then(async (entry) => {\n await this.setState({ navigation: entry.fields.link });\n this.getAllEntries();\n })\n .catch((err) => console.log(err));\n\n window.addEventListener(\"scroll\", this.handleScroll);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n render() {\n return (\n\n \n \n {/* */}\n
\n \n {!this.state.hideBurger ? (\n \n {this.state.colour ? (\n ![\"Montague](\"/logo-white.png\")
\n ) : (\n ![\"Montague](\"/logo.png\")
\n )}\n \n ) : (\n \n {this.state.colour ? (\n \n ) : (\n \n )}\n \n )}\n
\n\n \n ) : (\n \n )}\n \n ) : (\n \n ) : (\n \n )}\n \n {!this.state.hideBurger ? (\n \n \n \n \n \n
\n ) : null}\n \n\n \n \n \n );\n }\n}\n\nexport default Navigation;\n","import React from 'react';\nimport { Link } from 'react-router-dom';\n\nexport const FooterGroup = props => {\n const { title, links } = props.group;\n return (\n \n
\n ) \n}","import React, { Component } from \"react\";\nimport emailjs from \"emailjs-com\";\n\nclass Newsletter extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n first_name: \"\",\n last_name: \"\",\n email: \"\",\n show_fields: false,\n success: false,\n error: false,\n };\n\n this.sendEmail = this.sendEmail.bind(this);\n }\n\n onChangeHandler = (name) => (event) => {\n this.setState({\n [name]: event.target.value,\n show_fields: true,\n });\n };\n\n sendEmail(e) {\n e.preventDefault();\n if (this.state.first_name === \"\") return this.setState({ error: true });\n if (this.state.last_name === \"\") return this.setState({ error: true });\n if (this.state.email === \"\") return this.setState({ error: true });\n\n emailjs\n .sendForm(\"gmail\", \"template_pxsuo5e\", e.target, \"NpPDsAhPcFBT3yvHm\")\n .then(\n (result) => {\n this.setState({\n success: true,\n first_name: \"\",\n last_name: \"\",\n email: \"\",\n });\n },\n (error) => {\n this.setState({ error: true });\n }\n );\n }\n\n onClickHandler = () => {\n this.setState({\n show_fields: true,\n });\n };\n\n render() {\n const { first_name, last_name, email } = this.state;\n return (\n {title}
\n {links.map((link, index) => {\n const { title, url } = link.fields;\n if (url.includes(\"http\")) return{title}
\n return{title}
\n })}\n\n
\n Stay In Touch
\n\n\n
\n \n \n );\n }\n}\nexport default Newsletter;\n","import React, { Component } from \"react\";\nimport { client } from \"../../../ContentfulContext\";\nimport { FooterGroup } from \"./Footer-Item\";\nimport Newsletter from \"../Newsletter\";\n\nclass Footer extends Component {\n constructor(props) {\n super(props);\n\n this.footer = [];\n\n this.state = {\n footer: false,\n footerLegal: \"\",\n };\n }\n\n fetchParentFooter() {\n client\n .getEntry(\"20kMJ5HVsxGRE4oP98AawR\")\n .then((entry) => {\n this.setState({ footerLegal: entry.fields.bottomLegalText });\n this.peprareFooter(entry.fields.footerLinkGroups);\n })\n .catch((err) => console.log(err));\n }\n\n async peprareFooter(groups) {\n const promises = groups.map(async (group) => {\n const item = {};\n item.title = group.fields.title;\n\n const items = await this.fetchFooterItems(group.fields.links);\n item.links = items;\n\n this.footer.push(item);\n });\n\n await Promise.all(promises);\n this.setState({ footer: true });\n }\n\n async fetchFooterItems(links) {\n let items = [];\n\n const promises = links.map(async (link) => {\n await client.getEntry(link.sys.id).then((entry) => items.push(entry));\n });\n\n await Promise.all(promises);\n return items;\n }\n\n componentDidMount() {\n this.fetchParentFooter();\n }\n\n render() {\n return (\n \n \n
\n \n \n
\n );\n }\n}\n\nexport default Footer;\n","import React, { Component } from 'react'\n\nclass CookieBanner extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n show_me: true\n };\n }\n\n async setCookie() {\n await localStorage.setItem(\"cookies\", \"accepted\");\n return\n }\n\n onClickHandler = async () => {\n await this.setCookie();\n\n this.setState({\n show_me: false\n })\n }\n\n render() {\n return (\n \n {this.footer.map((group, index) => {\n return
\n {this.state.footerLegal}
\n\n {this.state.show_me ? (\n
\n )\n }\n}\n\nexport default CookieBanner;","import React, { Component } from 'react';\nimport { Link } from 'react-router-dom';\nimport \"../../Styles/landing.sass\";\n\nclass e404 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n image: 1,\n image1: true\n }\n }\n\n render() {\n \n return (\n \n
\n ): null}\n \n
\n \n
\n This site uses cookies and similar technology to function properly and to provide the services present on it, analytical cookies (our own and third party) to understand and improve users' browsing experience, and profiling cookies (our own and third party) to serve you advertisements in line with preferences displayed while browsing online. For further information, see our Cookie Policy. To refuse consent for some or all cookies, click here. By clicking \"accept\", you consent to the use of the aforementioned cookies.
\n\n \n
\n \n \n
\n )\n }\n}\n\nexport default e404;","import { gql } from '@apollo/client'\n\nexport const QUERY_PAGE_COMPONENTS_BY_ID = gql`\n query ($id: String!) {\n page(id: $id) {\n componentsCollection {\n items {\n sys {\n id\n }\n }\n }\n }\n }\n`","import React, { useState, useEffect } from 'react'\nimport { client } from '../Store/client'\nimport { ComponentLoader } from '../components/index'\nimport { ComponentType } from './models'\nimport { QUERY_PAGE_COMPONENTS_BY_ID } from './queries'\nimport {Helmet} from \"react-helmet\";\nimport { Page } from '../types'; \n\ninterface PageLoaderProps {\n page: Page\n setHideBurger: React.Dispatch\n \n
\n \n \n
\n\n \n \n \n
\n \n
\n Page Not Found
\nMontague Real Estate is known for its refreshing, modern and luxury approach to real estate, whilst providing a premium service to clients across the globe. Our relationships with clients can start with something as simple as real estate, but our services go far beyond that, including complex acquisitions, investment advice and luxury sales.
\n Home\n Contact Us\n\n \n \n {page.title} \n {page.meta_description && } \n \n {pageComponents.map((component: ComponentType, key: number) => (\n
\n )\n}\n\nexport const PageLoader = React.memo(PageLoaderEvent)","import React from 'react';\nimport { TitleSize, TextCentered } from './models'\n\ninterface TextProps {\n title?: string,\n titleSize?: TitleSize,\n textCentered?: TextCentered,\n column?: boolean,\n paragraph?: string,\n rows?: number,\n accent?: boolean\n textColour?: string\n backgroundColour?: string\n}\n\nexport const Text = ({title, titleSize = 'Heading 1', textCentered, column, paragraph, backgroundColour, textColour, accent, rows}: TextProps) => (\n <>\n \n
\n \n)\n\nconst Title = ({title, titleSize = \"Heading 1\", accent, textColour, backgroundColour}: TextProps) => (\n <>\n {{\n \"Heading 1\": \n {title &&
\n \n {textColour ? { title } : title }
,\n \"Heading 2\":{textColour ? { title } : title}
,\n \"Heading 3\":{ title }
,\n \"Heading 4\":\n {textColour ? \n \n { title }\n : \n \n { title }\n \n }
,\n \"Heading 5\":{ title }
,\n \"Heading 6\":{textColour ? { title } : title }
,\n \"Heading 7\":{ title }
\n }[ titleSize ]}\n \n)\n\nconst Paragraph = ({paragraph, column, accent}: TextProps) => (\n{ paragraph }
\n)","import React, { Reducer, useReducer, useState } from \"react\";\nimport { Text } from \"../Helper/text\";\nimport styles from \"./Consultation.module.sass\";\nimport emailjs from \"emailjs-com\";\n\nfunction isValidEmailAddress(email: string = \"\"): boolean {\n const reg =\n /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return reg.test(email.toLowerCase());\n}\n\ntype Action = {\n url?: string;\n messages?: Message[];\n input: \"firstName\" | \"lastName\" | \"email\" | \"phone\" | \"\";\n save: boolean;\n};\n\ntype Message = {\n owner: string | null;\n text: string;\n options: {\n title?: string;\n action: Action;\n }[];\n};\n\ninterface ConsultationState {\n email: string;\n phone: string;\n firstName: string;\n lastName: string;\n undefined: string;\n error: string;\n}\n\nlet feedInit: Message[] = [\n {\n owner: \"Casey Nankivell\",\n text: \"Schedule a call with one of our property professionals or let us know how we can help.\",\n options: [\n {\n title: \"WhatsApp\",\n action: {\n input: \"\",\n save: false,\n url: \"https://api.whatsapp.com/send?phone=+442071181162\",\n },\n },\n {\n title: \"Phone Call\",\n action: {\n input: \"\",\n save: false,\n messages: [\n {\n owner: null,\n text: \"Phone Call\",\n options: [],\n },\n {\n owner: \"Casey Nankivell\",\n text: \"Please enter your phone number.\",\n options: [\n {\n action: {\n save: false,\n input: \"phone\",\n },\n },\n ],\n },\n ],\n },\n },\n {\n title: \"Email\",\n action: {\n input: \"\",\n save: false,\n messages: [\n {\n owner: null,\n text: \"Email\",\n options: [],\n },\n {\n owner: \"Casey Nankivell\",\n text: \"Please enter your email addresss.\",\n options: [\n {\n action: {\n save: false,\n input: \"email\",\n },\n },\n ],\n },\n ],\n },\n },\n ],\n },\n];\n\nconst actions = {\n lastName: [\n {\n owner: \"Casey Nankivell\",\n text: \"Thank you for your enquiry. We aim to be in contact within 48hours.\",\n options: [\n {\n action: {\n input: \"\",\n save: true,\n },\n },\n ],\n },\n ],\n phone: [\n {\n owner: \"Casey Nankivell\",\n text: \"Please enter your first name.\",\n options: [\n {\n action: {\n save: false,\n input: \"firstName\",\n },\n },\n ],\n },\n ],\n email: [\n {\n owner: \"Casey Nankivell\",\n text: \"Please enter your first name.\",\n options: [\n {\n action: {\n save: false,\n input: \"firstName\",\n },\n },\n ],\n },\n ],\n firstName: [\n {\n owner: \"Casey Nankivell\",\n text: \"Please enter your family name.\",\n options: [\n {\n action: {\n save: false,\n input: \"lastName\",\n },\n },\n ],\n },\n ],\n};\n\nexport function Consultation() {\n const [open, setOpen] = useState\n setOpen(!open)}\n >\n \n \n
\n \n \n addToFeed(option.action)}\n style={{ margin: 0 }}\n >\n {option.title}\n \n
\n ) : null)\n )}\n \n \n ))}\n\n {feed[feed.length - 1].options &&\n feed[feed.length - 1].options[0].action?.input && (\n \n \n \n \n
\n ) : option.action[\"messages\"] ? (\n \n
\n\n {feed.map((message: Message, key: number) => (\n Today
\n\n \n
\n {message.options?.map(\n (option, index) =>\n option.action &&\n (option.action[\"url\"] ? (\n {message.text}
\n{option.title}
\n \n\n \n \n setState({ [lastKey as string]: e.target.value })\n }\n value={state[lastKey ? lastKey : \"phone\"]}\n placeholder={feed[feed.length - 1].text}\n />\n \n \n
\n )}\n \n \n \n \n );\n}\n\nexport default Consultation;\n","import React, { FC, Fragment, useEffect, useState } from 'react';\nimport { withRouter, Route, Switch } from 'react-router-dom';\nimport { client } from './ContentfulContext';\nimport './Styles/components.sass';\nimport Nav from './View/Core/Navigation/Navigation';\nimport Footer from './View/Core/Footer/Footer';\nimport CookieBanner from './View/Core/CookieBanner';\nimport e404 from './View/Core/e404';\nimport {PageLoader} from \"./pageLoader/index\"\nimport { Page } from \"./types\";\nimport Consultation from './components/Components/Consultation';\n\nfunction mapPagesResponse (entry: any): Page {\n return {\n \"id\": entry.sys.id,\n \"title\": entry.fields.title,\n \"url\": entry.fields.url,\n \"navColour\": entry.fields.whiteNavigation,\n \"meta_description\": entry.fields.meta_description,\n \"landingPage\": entry.fields.landingPage\n }\n}\n\nconst AppRouter: FC = (props: any) => {\n const [loaded, setLoaded] = useState{state.error}
\n\n \n \n \n )}\n {showCookies && (\n
\n )}\n \n {this.state.loaded && (\n
\n )\n }\n}\n\nexport default HighLight;","import React, { Component, Fragment } from \"react\";\nimport { documentToReactComponents } from \"@contentful/rich-text-react-renderer\";\nimport Highlight from \"./Highlight\";\n\nclass PropertyHighlights extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n component: props.component,\n };\n }\n\n render() {\n return (\n {this.state.component.fields.fieldTitle} {this.state.component.fields.fieldContent}
\n )}\n\n {this.state.component.fields.aboveHighlights.content.map(\n (el, index) => (\n \n {documentToReactComponents(el)}\n \n )\n )}\n\n {this.state.component.fields.propertyTable && (\n \n {this.state.component.fields.belowHighlights.content.map(\n (el, index) => (\n \n {documentToReactComponents(el)}\n \n )\n )}\n \n )}\n
\n );\n }\n}\n\nexport default PropertyHighlights;\n","import React, { Component } from 'react';\nimport { Map, GoogleApiWrapper} from 'google-maps-react';\n\nconst mapStyles = {\n width: '100%',\n height: '100%'\n};\n\nexport class MapContainer extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n location: {\n lat: null,\n lng: null\n }\n }\n\n this.geocode = this.geocode.bind(this);\n }\n\n\n async geocode(geocoder) {\n await geocoder.geocode({'address': \"13 spenlow apartment, wenlock road, london, n1 7gh\"}, async (results, status) => {\n if (status === 'OK') {\n await this.setState({\n location: {\n lat: results[0].geometry.location.lat(),\n lng: results[0].geometry.location.lng()\n }\n })\n } else {\n console.log(status);\n }\n })\n }\n\n async componentDidMount() {\n const google = window.google;\n let geocoder = new google.maps.Geocoder();\n await this.geocode(geocoder)\n }\n \n\n render() {\n return (\n \n {this.state.component.fields.propertyTable.map((el, index) => (\n
\n )}\n\n {this.state.component.fields.belowHighlights && (\n \n
\n );\n }\n}\n\nexport default GoogleApiWrapper({\n apiKey: (\"AIzaSyBrHZ7TqCyB_sT0c4OGK91RxQV5GAaPgPs\")\n})(MapContainer)","import React, { Component } from \"react\";\nimport PropertyHighlights from \"./PropertyHighlights\";\nimport GoogleMap from \"../Core/GoogleMap\";\n\nclass PropertyToggle extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n component: props.component,\n activeTab: 0,\n };\n }\n\n onClickHandle(tab) {\n this.setState({\n activeTab: tab,\n });\n }\n\n componentDidUpdate() {\n if (this.state.component !== this.props.component) {\n this.setState({ component: this.props.component });\n }\n }\n\n render() {\n const { tite, components } = this.props.component;\n return (\n \n
\n \n \n );\n }\n}\n\nexport default PropertyToggle;\n","import React, { FC, useEffect, useMemo, useState } from \"react\";\nimport Select from \"react-select\";\nimport { useParams } from \"react-router-dom\";\n\nimport { client } from \"../../../../ContentfulContext\";\n\nimport { PropertyFilters } from \"../../../../types\";\n\nfunction mapOptions(option: string) {\n return { label: option, value: option };\n}\n\ninterface Option {\n readonly label: string;\n readonly value: string | undefined;\n}\n\ntype FilterOptions = {\n ids: Array\n {tite}\n
\n\n {components.map((component, key) => {\n const { tabHeading } = component.fields;\n return (\n {\n this.onClickHandle(key);\n }}\n >\n {tabHeading}\n \n );\n })}\n
\n \n {components.map((component, key) => {\n const contentType = component.sys.contentType.sys.id;\n return (\n \n {contentType === \"propertyHighlights\" && (\n \n )}\n {contentType === \"googleMap\" && (\n \n )}\n
\n );\n })}\n \n \n {subTitle}\n \n )}\n
\n \n {showFilter && (\n {pageTitle}
\n {subTitle && (\n\n
\n\n \n
\n \n \n {/* {\n if (e) setHighToLow(e?.value);\n }}\n className=\"input-select-form bedrooms\"\n defaultValue={{ value: false, label: \"Low to High\" }}\n options={[\n { value: false, label: \"Low to High\" },\n { value: true, label: \"High to Low\" },\n ]}\n />\n
\n Results: {properties.length}
*/}\n\n\n
\n \n \n \n \n \n
\n \n \n
\n \n
\n setShowFilters(!showFilters)}>Filters
\n\n
*/}\n \n \n \n \n
\n {/* style={{ backgroundImage: `url('${property.fields.photos[0].fields.file.url}')` }}>\n {photos\n .slice(0, 4)\n .reverse()\n .map(\n (phone: any, index: number) =>\n photos.length > 1 && (\n
\n \n \n
\n )\n )}\n \n {photos.slice(0, 4).map((photo: any, key: number) => (\n \n ))}\n
\n \n \n
\n \n \n );\n })}\n \n \n );\n};\n\nexport default Listings;\n","import { useEffect, useState } from \"react\";\nimport { client } from \"../../../../ContentfulContext\";\nimport { PropertyFilters } from \"../../../../types\";\nimport { buildPropertiesFilter, mapProperties, server_property } from \"../utils\";\nimport { ListingsProperty } from \"./types\";\n\n\nexport const useFilters = (filters: PropertyFilters, params: {[key: string]: string}): {\n properties: ListingsProperty[]\n} => {\n const [entries, setEntries] = useState{`${propertyLocation.location}, ${\n propertyLocation.region ?? propertyLocation.country\n }`}
\n{name}
\n\n {bedroomsLabel} Beds | {bathroomsLabel} Baths |{\" \"}\n {sqftLabel} Sqft\n
\n\n {priceLabel}\n {filters.rent && \"pcm\"}\n
\n \n\n
\n \n {title}\n
\n{paragraph}
\n\n {imagesCollection.items.map((image, index) => {\n const { url, title } = image;\n return (\n
\n \n \n
\n );\n })}\n \n 
\n
\n)","import React, { FC } from \"react\";\nimport { GridItem } from \"./gridItem\";\nimport { GridContainerType } from \"./types\";\n\ntype Props = {\n component: {\n gridContainer: GridContainerType;\n };\n};\n\nexport const gridContainer: FC\n
\n {title}
\n{extract}
\n {button && }\n\n {title}\n
\n\n {gridItemsCollection.items.map((item, index) => (\n
\n \n
\n );\n};\n","import React, { Component } from \"react\";\nimport { client } from \"../../../ContentfulContext\";\nimport { PropertyNavigation } from \"./PropertyNavigation\";\nimport { ComponentLoader } from \"../../\";\nimport { ArrowLeft, ArrowRight } from \"../../../Styles/icons\";\nimport \"../../../Styles/property.sass\";\nimport {\n CarouselProvider,\n Slider,\n Slide,\n ButtonBack,\n ButtonNext,\n} from \"pure-react-carousel\";\nimport \"pure-react-carousel/dist/react-carousel.es.css\";\nimport ContactForm from \"../Core/ContactForm\";\nimport { Helmet } from \"react-helmet\";\n\nfunction capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\nclass Property extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n id: window.location.pathname.replace(\"/property/\", \"\"),\n property: {},\n components: [],\n loaded: false,\n setSticky: false,\n };\n }\n\n async getComponents() {\n if (this.state.property.components) {\n let id = \"\";\n\n const promise = await this.state.property.components.map(\n (component, key) => {\n if (key === 0) return (id = id + component.sys.id);\n return (id = id + `,${component.sys.id}`);\n }\n );\n await Promise.all(promise);\n\n client\n .getEntries({ \"sys.id[in]\": id })\n .then((entry) => {\n this.setState({ components: entry, loaded: true });\n window.addEventListener(\"scroll\", this.handleScroll);\n })\n .catch((err) => console.log(err));\n } else {\n this.setState({ loaded: true });\n }\n }\n\n formatMoney(amount, decimalCount = 2, decimal = \".\", thousands = \",\") {\n try {\n decimalCount = Math.abs(decimalCount);\n decimalCount = isNaN(decimalCount) ? 2 : decimalCount;\n\n const negativeSign = amount < 0 ? \"-\" : \"\";\n\n let i = parseInt(\n (amount = Math.abs(Number(amount) || 0).toFixed(decimalCount))\n ).toString();\n let j = i.length > 3 ? i.length % 3 : 0;\n\n return (\n negativeSign +\n (j ? i.substr(0, j) + thousands : \"\") +\n i.substr(j).replace(/(\\d{3})(?=\\d)/g, \"$1\" + thousands) +\n (decimalCount\n ? decimal +\n Math.abs(amount - i)\n .toFixed(decimalCount)\n .slice(2)\n : \"\")\n );\n } catch (e) {\n console.log(e);\n }\n }\n\n getProperty() {\n client\n .getEntries({\n content_type: \"properties\",\n \"fields.propertyHandle[match]\": this.state.id,\n })\n .then(async (entry) => {\n let property = entry.items[0].fields;\n if (\n property.propertyBedroomsMax &&\n property.bedrooms !== property.propertyBedroomsMax\n )\n property.bedrooms += \" - \" + property.propertyBedroomsMax;\n if (property.propertyBathroomMax)\n property.bathroom += \" - \" + property.propertyBathroomMax;\n if (property.propertySizeSqftMax)\n property.propertySizeSqm += \" - \" + property.propertySizeSqftMax;\n if (property.price)\n property.price =\n property.propertyCurrency +\n this.formatMoney(property.price) +\n `${property.saleType ? \"pcm\" : \"\"}`;\n if (property.startingFrom) property.price = \"From \" + property.price;\n await this.setState({ property: property });\n this.getComponents();\n })\n .catch((err) => console.log(err));\n }\n\n async componentDidUpdate() {\n const id = window.location.pathname.replace(\"/property/\", \"\");\n if (this.state.id !== id) {\n await this.setState({\n id: id,\n loaded: false,\n property: {},\n components: [],\n });\n this.getProperty();\n }\n }\n\n async componentDidMount() {\n this.getProperty();\n }\n\n render() {\n return (\n \n
\n \n {components.map((component, index) => {\n let linkTo = \"\";\n let title = \"\";\n\n if (component.fields.title) {\n linkTo = component.fields.title.trim().replaceAll(\" \", \"-\");\n title = component.fields.title;\n }\n\n if (component.fields.tite) {\n linkTo = component.fields.tite.trim().replaceAll(\" \", \"-\");\n title = component.fields.tite;\n }\n\n return (\n {\n e.preventDefault();\n scrollWithOffset(\"contact-us\");\n }}\n className=\"btn property-btn\"\n >\n Request A Brochure\n \n
\n \n {\n e.preventDefault();\n scrollWithOffset(linkTo);\n }}\n >\n
\n );\n })}\n\n {title}
\n \n\n {this.state.loaded ? (\n
\n );\n }\n}\n\nexport default Property;\n","import React, { FC } from 'react';\nimport { Link } from 'react-router-dom';\nimport TextTruncate from 'react-text-truncate';\nimport { ServiceType } from './types';\nimport { Button } from '../../Helper/button';\n\nexport const Service: FC<{service: ServiceType}> = ({service}) => {\n const {title, handle, extract, button, buttonTitle, thumbNail} = service;\n\n return (\n \n \n {`${this.state.property.name} | ${this.state.property.propertyLocation.fields.location}, ${this.state.property.propertyLocation.fields.region}`} \n \n \n\n
\n ) : null}\n \n {this.state.property.photos.length === 1 ? (\n \n \n {this.state.property.photos.map((photo, key) => {\n return (\n \n\n \n \n \n \n \n )}\n
\n\n \n \n
\n ) : (\n \n
\n \n
\n {`${this.state.property.propertyLocation.fields.location}, ${this.state.property.propertyLocation.fields.region}`}
\n{this.state.property.name}
\n {/* */}\n\n {key === 0 ? (\n \n \n ) : (\n \n \n )}\n
\n );\n })}\n \n \n
\n \n
\n \n
\n {`${this.state.property.propertyLocation.fields.location}, ${this.state.property.propertyLocation.fields.region}`}
\n{this.state.property.name}
\n {/* */}\n\n \n
\n \n
\n \n
\n {photo.fields.description}
\n\n
\n \n
\n\n {this.state.property.components && (\n \n
\n \n
\n {this.state.property.name}
\n\n {this.state.property.bedrooms} Beds |{\" \"}\n {this.state.property.bathroom} Baths |{\" \"}\n {this.state.property.propertySizeSqm} Sqft |{\" \"}\n {this.state.property.price}\n
\n{this.state.property.description}
\n\n {this.state.property.components.map((component, index) => {\n let type = capitalizeFirstLetter(\n component.sys.contentType.sys.id\n );\n\n const mappedComponent = {\n sys: {\n id: component.sys.id,\n },\n __typename: type,\n };\n\n return (\n
\n )}\n \n \n \n \n
\n )\n}","import React, { FC, Fragment } from 'react';\nimport { Service } from './serive';\nimport { OurServices } from './types';\n\ntype Props = {\n component: {\n ourServices: OurServices\n }\n}\n\nexport const Services: FC\n
\n {title}
\n{title}
\n\n {servicesPerRowCollection.items.map((service, index) => (\n
\n