4 files changed, 99 insertions, 9 deletions
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 (
-    <form onSubmit={submitForm} className={styles.wrapper}>
+    <form onSubmit={submitHandler} className={styles.wrapper}>
       {children}
     </form>
   );
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"
diff --git a/src/services/graphql/contact.ts b/src/services/graphql/contact.ts
new file mode 100644
index 0000000..4699688
--- /dev/null
+++ b/src/services/graphql/contact.ts
@@ -0,0 +1,49 @@
+import { SendMailReturn, SentEmailResponse } from '@ts/types/contact';
+import { gql } from 'graphql-request';
+import { getGraphQLClient } from './client';
+
+export const sendMail: SendMailReturn = async (
+  subject: string,
+  body: string,
+  replyTo: string,
+  mutationId: string
+) => {
+  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<SentEmail>;