1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import { ButtonSubmit } from '@components/Buttons';
import { Form, FormItem, Input, TextArea } from '@components/Form';
import Layout from '@components/Layouts/Layout';
import { seo } from '@config/seo';
import { t } from '@lingui/macro';
import { sendMail } from '@services/graphql/contact';
import { NextPageWithLayout } from '@ts/types/app';
import { loadTranslation } from '@utils/helpers/i18n';
import { GetStaticProps, GetStaticPropsContext } from 'next';
import Head from 'next/head';
import { FormEvent, ReactElement, useState } from 'react';
const ContactPage: NextPageWithLayout = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [subject, setSubject] = useState('');
const [message, setMessage] = useState('');
const [status, setStatus] = useState('');
const resetForm = () => {
setName('');
setEmail('');
setSubject('');
setMessage('');
};
const submitHandler = async (e: FormEvent) => {
e.preventDefault();
const body = `Message received from ${name} <${email}> on ArmandPhilippot.com.\n\n${message}`;
const replyTo = `${name} <${email}>`;
const mail = await sendMail(subject, body, replyTo, 'contact');
if (mail.sent) {
setStatus(
t`Thanks. Your message was successfully sent. I will answer it as soon as possible.`
);
resetForm();
} else {
const error = `${t`An error occurred:`} ${mail.message}`;
setStatus(error);
}
};
return (
<>
<Head>
<title>{seo.contact.title}</title>
<meta name="description" content={seo.contact.description} />
</Head>
<article>
<header>
<h1>{t`Contact`}</h1>
</header>
<div>
<p>{t`All fields marked with * are required.`}</p>
{status && <p>{status}</p>}
<Form submitHandler={submitHandler}>
<FormItem>
<Input
id="contact-name"
name="name"
value={name}
setValue={setName}
label={t`Name`}
required={true}
/>
</FormItem>
<FormItem>
<Input
id="contact-email"
name="email"
value={email}
setValue={setEmail}
label={t`Email`}
required={true}
/>
</FormItem>
<FormItem>
<Input
id="contact-subject"
name="subject"
value={subject}
setValue={setSubject}
label={t`Subject`}
/>
</FormItem>
<FormItem>
<TextArea
id="contact-message"
name="message"
value={message}
setValue={setMessage}
label={t`Message`}
required={true}
/>
</FormItem>
<FormItem>
<ButtonSubmit>{t`Send`}</ButtonSubmit>
</FormItem>
</Form>
</div>
</article>
</>
);
};
ContactPage.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;
export const getStaticProps: GetStaticProps = async (
context: GetStaticPropsContext
) => {
const translation = await loadTranslation(
context.locale!,
process.env.NODE_ENV === 'production'
);
return {
props: {
translation,
},
};
};
export default ContactPage;
|
