diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/contact.tsx | 24 |
1 files changed, 22 insertions, 2 deletions
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index 15e1ad5..bfdd681 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -3,17 +3,19 @@ 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 { ReactElement, useState } from 'react'; +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(''); @@ -22,6 +24,23 @@ const ContactPage: NextPageWithLayout = () => { 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> @@ -34,7 +53,8 @@ const ContactPage: NextPageWithLayout = () => { </header> <div> <p>{t`All fields marked with * are required.`}</p> - <Form> + {status && <p>{status}</p>} + <Form submitHandler={submitHandler}> <FormItem> <Input id="contact-name" |