From efed6c0a820c5c47e097fa29455157bbd318ffca Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 17 Dec 2021 23:28:17 +0100 Subject: chore: create mutation to send mail from contact form --- src/components/Form/Form.tsx | 16 ++++++++------ src/pages/contact.tsx | 24 ++++++++++++++++++-- src/services/graphql/contact.ts | 49 +++++++++++++++++++++++++++++++++++++++++ src/ts/types/contact.ts | 19 ++++++++++++++++ 4 files changed, 99 insertions(+), 9 deletions(-) create mode 100644 src/services/graphql/contact.ts create mode 100644 src/ts/types/contact.ts (limited to 'src') diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index cc97526..5e26e81 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -1,13 +1,15 @@ -import { FormEvent } from 'react'; +import { ReactNode } from 'react'; import styles from './Form.module.scss'; -const Form: React.FunctionComponent = ({ children }) => { - const submitForm = (e: FormEvent) => { - e.preventDefault(); - }; - +const Form = ({ + children, + submitHandler, +}: { + children: ReactNode; + submitHandler: any; +}) => { return ( -
+ {children}
); 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 ( <> @@ -34,7 +53,8 @@ const ContactPage: NextPageWithLayout = () => {

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

-
+ {status &&

{status}

} + { + const client = getGraphQLClient(); + const mutation = gql` + mutation SendEmail( + $subject: String! + $body: String! + $replyTo: String! + $mutationId: String! + ) { + sendEmail( + input: { + clientMutationId: $mutationId + body: $body + replyTo: $replyTo + subject: $subject + } + ) { + clientMutationId + message + sent + origin + replyTo + to + } + } + `; + + const variables = { subject, body, replyTo, mutationId }; + + try { + const response: SentEmailResponse = await client.request( + mutation, + variables + ); + return response.sendEmail; + } catch (error) { + console.error(error, undefined, 2); + process.exit(1); + } +}; diff --git a/src/ts/types/contact.ts b/src/ts/types/contact.ts new file mode 100644 index 0000000..c0f23e0 --- /dev/null +++ b/src/ts/types/contact.ts @@ -0,0 +1,19 @@ +export type SentEmail = { + clientMutationId: string; + message: string; + origin: string; + replyTo: string; + sent: boolean; + to: string; +}; + +export type SentEmailResponse = { + sendEmail: SentEmail; +}; + +export type SendMailReturn = ( + subject: string, + body: string, + replyTo: string, + mutationId: string +) => Promise; -- cgit v1.2.3