279 lines
9.6 KiB
JavaScript
279 lines
9.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import { graphql } from "gatsby";
|
|
import { Marker } from "google-maps-react";
|
|
import Layout from "../layout";
|
|
import {
|
|
Button,
|
|
Grid,
|
|
Header,
|
|
Heading,
|
|
Icon,
|
|
IconWithContent,
|
|
InputText,
|
|
Interrupt,
|
|
Label,
|
|
Link,
|
|
Map,
|
|
Section,
|
|
Select,
|
|
Team,
|
|
Text
|
|
} from "../components";
|
|
import CheckCircleIcon from "../icons/check-circle.svg";
|
|
import EnvelopeIcon from "../icons/envelope.svg";
|
|
import TeamIcon from "../icons/team.svg";
|
|
|
|
const encode = data => {
|
|
const formData = new FormData();
|
|
Object.keys(data).forEach(k => {
|
|
formData.append(k, data[k]);
|
|
});
|
|
return formData;
|
|
};
|
|
|
|
export default function Index({ data }) {
|
|
const [formState, setFormState] = useState();
|
|
|
|
const handleSubmit = e => {
|
|
e.preventDefault();
|
|
setFormState("submitting");
|
|
const body = encode({
|
|
"form-name": "contact",
|
|
name: e.target.name.value,
|
|
email: e.target.email.value,
|
|
telephone: e.target.telephone.value,
|
|
start: e.target.start.value,
|
|
stage: e.target.stage.value,
|
|
status: e.target.status.value,
|
|
budget: e.target.budget.value,
|
|
message: e.target.message.value
|
|
});
|
|
fetch("/contact", { method: "POST", body })
|
|
.then(res => {
|
|
if (res.status !== 200) {
|
|
setFormState("error");
|
|
} else {
|
|
setFormState("success");
|
|
}
|
|
})
|
|
.catch(() => setFormState("error"));
|
|
};
|
|
return (
|
|
<Layout location="/contact" title="Contact us">
|
|
<Header
|
|
image={data.headerImage.childImageSharp.fluid}
|
|
position="bottom right"
|
|
>
|
|
<Heading shadow="xl-white">
|
|
<em>Get in</em> touch
|
|
</Heading>
|
|
</Header>
|
|
<Section>
|
|
<Text size="xl">
|
|
Are you planning a new bathroom? Are you looking for inspiration? Our
|
|
team are ready to help you through every step of the journey.
|
|
</Text>
|
|
<Text>
|
|
A typical bathroom refurbishment starts from £3,500, increasing up to
|
|
£20,000. Our quotes include stripping out the old bathroom, disposal
|
|
of rubbish, fitting the new bathroom, labour and building materials
|
|
for tiling, plastering, painting and decorating. It does not include
|
|
bathroom suites or tiles.
|
|
</Text>
|
|
<Grid columns={[1, 2]} breakpoints={["40em"]} verticalSeparator="40em">
|
|
<div style={{ position: "relative" }}>
|
|
{formState === "success" && (
|
|
<>
|
|
<IconWithContent>
|
|
<Icon color="dark" size="lg">
|
|
<CheckCircleIcon />
|
|
</Icon>
|
|
<Text color="dark" size="lg">
|
|
Thank you for contacting us!
|
|
</Text>
|
|
</IconWithContent>
|
|
<Text>
|
|
We will get back to you in the next two working days.
|
|
</Text>
|
|
</>
|
|
)}
|
|
{formState !== "success" && (
|
|
<>
|
|
{formState === "submitting" && <Interrupt />}
|
|
<IconWithContent>
|
|
<Icon color="dark" size="lg">
|
|
<EnvelopeIcon />
|
|
</Icon>
|
|
<Text color="dark" size="lg">
|
|
Contact us
|
|
</Text>
|
|
</IconWithContent>
|
|
{formState === "error" && (
|
|
<>
|
|
<Text size="lg" color="primary" weight="bold">
|
|
There was an error submitting the form, please try again
|
|
later.
|
|
</Text>
|
|
<Text color="primary">
|
|
Alternatively, please feel free to email us at{" "}
|
|
<Link to="mailto:quotations@abcprojectdesign.com">
|
|
quotations@abcprojectdesign.com
|
|
</Link>
|
|
.
|
|
</Text>
|
|
</>
|
|
)}
|
|
<form
|
|
name="contact"
|
|
method="POST"
|
|
action="/contact"
|
|
onSubmit={e => handleSubmit(e, scroll)}
|
|
data-netlify="true"
|
|
data-netlify-honeypot="bot-field"
|
|
>
|
|
<input type="hidden" name="form-name" value="contact" />
|
|
<Label htmlFor="contact-name">Name</Label>
|
|
<InputText id="contact-name" name="name" />
|
|
<Label htmlFor="contact-email">Email</Label>
|
|
<InputText id="contact-email" name="email" />
|
|
<Label htmlFor="contact-telephone">Telephone</Label>
|
|
<InputText id="contact-telephone" name="telephone" />
|
|
<Label htmlFor="contact-stage">
|
|
What stage of planning are you at?
|
|
</Label>
|
|
<Select
|
|
id="contact-stage"
|
|
name="stage"
|
|
options={[
|
|
{ value: "", label: "" },
|
|
{ value: "ready to hire", label: "I'm ready to hire" },
|
|
{
|
|
value: "budgeting and planning",
|
|
label: "I'm planning and budgeting"
|
|
},
|
|
{
|
|
value: "quote for insurance",
|
|
label: "I need a quote for insurance"
|
|
}
|
|
]}
|
|
/>
|
|
<Label htmlFor="contact-start">
|
|
When would you like the job to start?
|
|
</Label>
|
|
<Select
|
|
id="contact-start"
|
|
name="start"
|
|
options={[
|
|
{ value: "", label: "" },
|
|
{ value: "urgently", label: "Urgently" },
|
|
{ value: "within 1 week", label: "Within 1 week" },
|
|
{ value: "within 2 weeks", label: "Within 2 weeks" },
|
|
{ value: "within 1 month", label: "Within 1 month" },
|
|
{ value: "within 2 months", label: "Within 2 months" },
|
|
{ value: "not sure", label: "Not sure" }
|
|
]}
|
|
/>
|
|
<Label htmlFor="contact-status">
|
|
Are you the owner of the property?
|
|
</Label>
|
|
<Select
|
|
id="contact-status"
|
|
name="status"
|
|
options={[
|
|
{ value: "", label: "" },
|
|
{ value: "owner", label: "I own the property" },
|
|
{ value: "landlord", label: "I am the landlord" },
|
|
{ value: "tenant", label: "I am a tenant" },
|
|
{
|
|
value: "council property",
|
|
label: "It's a council property"
|
|
}
|
|
]}
|
|
/>
|
|
<Label htmlFor="contact-budget">What is your budget?</Label>
|
|
<Select
|
|
id="contact-budget"
|
|
name="budget"
|
|
options={[
|
|
{ value: "under £2,000", label: "Under £2,000" },
|
|
{ value: "under £3,000", label: "Under £3,000" },
|
|
{ value: "under £4,000", label: "Under £4,000" },
|
|
{ value: "under £5,000", label: "Under £5,000" },
|
|
{ value: "under £6,000", label: "Under £6,000" },
|
|
{ value: "under £7,000", label: "Under £7,000" },
|
|
{ value: "under £8,000", label: "Under £8,000" },
|
|
{ value: "under £9,000", label: "Under £9,000" },
|
|
{ value: "under £10,000", label: "Under £10,000" },
|
|
{ value: "under £15,000", label: "Under £15,000" },
|
|
{ value: "under £20,000", label: "Under £20,000" }
|
|
]}
|
|
/>
|
|
<Label htmlFor="contact-message">
|
|
Describe what needs to be done
|
|
</Label>
|
|
<InputText id="contact-message" name="message" textArea />
|
|
<Button type="submit" float="right">
|
|
{formState === "submitting" ? "Submitting..." : "Submit"}
|
|
</Button>
|
|
</form>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<IconWithContent>
|
|
<Icon color="dark" size="lg">
|
|
<TeamIcon />
|
|
</Icon>
|
|
<Text color="dark" size="lg">
|
|
The team
|
|
</Text>
|
|
</IconWithContent>
|
|
<Team team={data.allPerson.nodes} />
|
|
</div>
|
|
</Grid>
|
|
</Section>
|
|
<Map
|
|
initialCenter={{
|
|
lat: 51.5614,
|
|
lng: 0.1071
|
|
}}
|
|
zoom={10}
|
|
scrollwheel={false}
|
|
draggable={false}
|
|
keyboardShortcuts={false}
|
|
disableDoubleClickZoom={false}
|
|
zoomControl={false}
|
|
mapTypeContol={false}
|
|
scaleControl={false}
|
|
streetViewControl={false}
|
|
panControl={false}
|
|
rotateControl={false}
|
|
fullscreenControl={false}
|
|
>
|
|
<Marker title={"ABC Project Design Ltd"} />
|
|
</Map>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export const query = graphql`
|
|
query {
|
|
headerImage: file(relativePath: { eq: "banner_bathroom.jpg" }) {
|
|
childImageSharp {
|
|
fluid(maxWidth: 1920, quality: 90) {
|
|
...GatsbyImageSharpFluid_withWebp
|
|
}
|
|
}
|
|
}
|
|
allPerson {
|
|
nodes {
|
|
name
|
|
email
|
|
phone
|
|
altPhone
|
|
title
|
|
}
|
|
}
|
|
}
|
|
`;
|