Migrate to Next
This commit is contained in:
254
pages/contact.js
Normal file
254
pages/contact.js
Normal file
@@ -0,0 +1,254 @@
|
||||
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 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 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(),
|
||||
},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user