{seo.contact.title}

import { ButtonSubmit } from '@components/Buttons'; import { Form, FormItem, Input, TextArea } from '@components/Form'; import { getLayout } from '@components/Layouts/Layout'; import PostHeader from '@components/PostHeader/PostHeader'; import Sidebar from '@components/Sidebar/Sidebar'; import { SocialMedia } from '@components/Widgets'; import { seo } from '@config/seo'; import { config } from '@config/website'; import { t } from '@lingui/macro'; import { sendMail } from '@services/graphql/mutations'; import styles from '@styles/pages/Page.module.scss'; import { NextPageWithLayout } from '@ts/types/app'; import { loadTranslation } from '@utils/helpers/i18n'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { FormEvent, useState } from 'react'; import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts'; const ContactPage: NextPageWithLayout = () => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [subject, setSubject] = useState(''); const [message, setMessage] = useState(''); const [status, setStatus] = useState(''); const router = useRouter(); 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 data = { body, mutationId: 'contact', replyTo, subject, }; const mail = await sendMail(data); if (mail.sent) { setStatus( t`Thanks. Your message was successfully sent. I will answer it as soon as possible.` ); resetForm(); } else { const errorPrefix = t`An error occurred:`; const error = `${errorPrefix} ${mail.message}`; setStatus(error); } }; const title = t`Contact`; const intro = t`Please fill the form to contact me.`; const pageUrl = `${config.url}${router.asPath}`; const webpageSchema: WebPage = { '@id': `${pageUrl}`, '@type': 'WebPage', breadcrumb: { '@id': `${config.url}/#breadcrumb` }, name: seo.contact.title, description: seo.contact.description, reviewedBy: { '@id': `${config.url}/#branding` }, url: `${pageUrl}`, isPartOf: { '@id': `${config.url}`, }, }; const contactSchema: ContactPageSchema = { '@id': `${config.url}/#contact`, '@type': 'ContactPage', name: title, description: intro, author: { '@id': `${config.url}/#branding` }, creator: { '@id': `${config.url}/#branding` }, editor: { '@id': `${config.url}/#branding` }, inLanguage: config.locales.defaultLocale, license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', mainEntityOfPage: { '@id': `${pageUrl}` }, }; const schemaJsonLd: Graph = { '@context': 'https://schema.org', '@graph': [webpageSchema, contactSchema], }; return ( <> {seo.contact.title}

{t`All fields marked with * are required.`}

{status &&

{status}

}