249 lines
8.7 KiB
JavaScript
249 lines
8.7 KiB
JavaScript
import React, { useRef, useState } from "react";
|
|
import {
|
|
Button,
|
|
ContactButton,
|
|
Grid,
|
|
Header,
|
|
Icon,
|
|
IconWithText,
|
|
InputField,
|
|
Interrupt,
|
|
Label,
|
|
Layout,
|
|
Link,
|
|
Map,
|
|
Section,
|
|
Select,
|
|
Text,
|
|
} from "@components/index";
|
|
import { getGoogleAPIKey } from "../lib/env";
|
|
import { CheckCircleSvg, EnvelopeSvg, MobileSvg, TeamSvg } from "../icons";
|
|
import bannerImg from "../images/banner_bathroom.jpg";
|
|
|
|
export default function About({ apikey }) {
|
|
const formRef = useRef();
|
|
const [formState, setFormState] = useState();
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
setFormState("submitting");
|
|
const body = new FormData(formRef.current);
|
|
fetch("/contact", { method: "POST", body })
|
|
.then((res) => {
|
|
if (res.status !== 200) {
|
|
setFormState("error");
|
|
} else {
|
|
setFormState("success");
|
|
}
|
|
})
|
|
.catch(() => setFormState("error"));
|
|
};
|
|
|
|
return (
|
|
<Layout title="Contact us">
|
|
<Header image={bannerImg} position="br">
|
|
<Text size="xl" weight="bold" noMargin>
|
|
<em>Get in</em> touch
|
|
</Text>
|
|
</Header>
|
|
<Section>
|
|
<Text size="xl">
|
|
Are you planning some work on your house? Are you looking for
|
|
inspiration? Our team are ready to help you through every step of the
|
|
journey.
|
|
</Text>
|
|
<Grid md={2}>
|
|
<div style={{ position: "relative" }}>
|
|
{formState === "success" && (
|
|
<>
|
|
<IconWithText
|
|
icon={
|
|
<Icon color="dark" size="lg">
|
|
<CheckCircleSvg />
|
|
</Icon>
|
|
}
|
|
>
|
|
<Text size="lg" color="dark" noMargin>
|
|
Thank you for contacting us!
|
|
</Text>
|
|
</IconWithText>
|
|
<Text>
|
|
We will get back to you in the next two working days.
|
|
</Text>
|
|
</>
|
|
)}
|
|
|
|
{formState !== "success" && (
|
|
<>
|
|
{formState === "submitting" && <Interrupt />}
|
|
<IconWithText
|
|
icon={
|
|
<Icon size="lg" color="dark">
|
|
<EnvelopeSvg />
|
|
</Icon>
|
|
}
|
|
>
|
|
<Text size="lg" color="dark" noMargin>
|
|
Contact us
|
|
</Text>
|
|
</IconWithText>
|
|
{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 href="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"
|
|
ref={formRef}
|
|
>
|
|
<input type="hidden" name="form-name" value="contact" />
|
|
<Label htmlFor="contact-name">Name</Label>
|
|
<InputField id="contact-name" name="name" />
|
|
<Label htmlFor="contact-email">Email</Label>
|
|
<InputField id="contact-email" name="email" />
|
|
<Label htmlFor="contact-telephone">Telephone</Label>
|
|
<InputField 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>
|
|
<InputField id="contact-message" name="message" textArea />
|
|
<Button type="submit">
|
|
{formState === "submitting" ? "Submitting..." : "Submit"}
|
|
</Button>
|
|
</form>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<IconWithText
|
|
icon={
|
|
<Icon color="dark" size="lg">
|
|
<TeamSvg />
|
|
</Icon>
|
|
}
|
|
>
|
|
<Text size="lg" color="dark" noMargin>
|
|
The Team
|
|
</Text>
|
|
</IconWithText>
|
|
<div>
|
|
<Text noMargin>
|
|
<strong>Daniel Costea</strong> – Project Director
|
|
</Text>
|
|
<ContactButton href="tel:+447378839358" size="sm">
|
|
<Icon size="sm">
|
|
<MobileSvg />
|
|
</Icon>
|
|
07378839358
|
|
</ContactButton>
|
|
<ContactButton
|
|
href="mailto:quotations@abcprojectdesign.com"
|
|
size="sm"
|
|
>
|
|
<Icon size="sm">
|
|
<EnvelopeSvg />
|
|
</Icon>
|
|
quotations@abcprojectdesign.com
|
|
</ContactButton>
|
|
</div>
|
|
</div>
|
|
</Grid>
|
|
</Section>
|
|
<Map apikey={apikey} zoom={10} showMarker />
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export async function getStaticProps() {
|
|
return {
|
|
props: {
|
|
apikey: getGoogleAPIKey(),
|
|
},
|
|
};
|
|
}
|