ft(ContactUs): Implement the contact us form submission

Author: Oliviier-dev

src/helpers/sendcontactForm.ts

@@ -0,0 +1,34 @@
+import { sendEmail } from '../utils/sendEmail'
+import contactFormTemplate from '../utils/templates/contactFormTemplate'
+
+export const sendMessage = async (
+  name: string,
+  email: string,
+  phone: string,
+  message: string
+): Promise<string> => {
+  if (!name || !email || !message) {
+    throw new Error('Name, email, and message are required!')
+  }
+
+  const adminEmail = process.env.ADMIN_EMAIL
+  const subject = 'DevPulse New Contact Us Form Submission'
+  const content = contactFormTemplate({ name, email, phone, message })
+
+  const senderEmail = process.env.ADMIN_EMAIL
+  const senderPassword = process.env.ADMIN_PASS
+
+  try {
+    const response = await sendEmail(
+      adminEmail,
+      subject,
+      content,
+      '',
+      senderEmail,
+      senderPassword
+    )
+    return 'Message sent successfully!'
+  } catch (error) {
+    throw new Error('Error sending message')
+  }
+}

src/index.ts

@@ -36,6 +36,7 @@ import attendanceResolver from './resolvers/attendance.resolvers'
 import Sessionresolvers from './resolvers/session.resolver'
 import invitationResolvers from './resolvers/invitation.resolvers'
 import organizationResolvers from './resolvers/organization.resolvers'
+import contactResolver from './resolvers/contactus.resolver'
 import schemas from './schema/index'
 import cohortSchema from './schema/cohort.schema'
 import programSchema from './schema/program.schema'
@@ -44,6 +45,7 @@ import phaseSchema from './schema/phase.schema'
 import ticketSchema from './schema/ticket.shema'
 import notificationSchema from './schema/notification.schema'
 import organizationSchema from './schema/organization.schema'
+import contactUsSchema from './schema/contactus.schema'
 
 import statisticsSchema from './schema/invitationStatics.schema'
 import StatisticsResolvers from './resolvers/invitationStatics.resolvers'
@@ -72,7 +74,8 @@ export const typeDefs = mergeTypeDefs([
   statisticsSchema,
   eventSchema,
   CommunitySchema,
-  organizationSchema
+  organizationSchema,
+  contactUsSchema,
 ])
 
 export const resolvers = mergeResolvers([
@@ -98,6 +101,7 @@ export const resolvers = mergeResolvers([
   invitationResolvers,
   TableViewInvitationResolver,
   faMutation,
+  contactResolver,
 ])
 
 async function startApolloServer(

src/resolvers/contactus.resolver.ts

@@ -0,0 +1,24 @@
+import { sendMessage } from '../helpers/sendContactForm'
+
+const contactResolver = {
+  Mutation: {
+    sendMessage: async (
+      _: any,
+      {
+        name,
+        email,
+        phone,
+        message,
+      }: { name: string; email: string; phone: string; message: string }
+    ) => {
+      try {
+        const response = await sendMessage(name, email, phone, message)
+        return response
+      } catch (error) {
+        throw new Error('Error sending message')
+      }
+    },
+  },
+}
+
+export default contactResolver

src/schema/contactus.schema.ts

@@ -0,0 +1,14 @@
+import gql from 'graphql-tag'
+
+const contactUsSchema = gql`
+  type Mutation {
+    sendMessage(
+      name: String!
+      email: String!
+      phone: String
+      message: String!
+    ): String
+  }
+`
+
+export default contactUsSchema

src/utils/templates/contactFormTemplate.ts

@@ -0,0 +1,61 @@
+const contactFormTemplate = ({
+  name,
+  email,
+  phone,
+  message,
+}: {
+  name: string
+  email: string
+  phone: string
+  message: string
+}): string => {
+  return `
+      <table style="border: 1px solid #ddd; padding: 16px; border-radius: 8px; background-color: #f9f9f9; max-width: 600px; margin: 0 auto; font-family: 'Rubik', sans-serif;">
+        <tr>
+          <td style="width: 100%; background-color: #E0E7FF; padding: 16px; text-align: center; border-radius: 8px 8px 0 0;">
+            <table width="100%" border="0" cellpadding="16" cellspacing="0" style="border-radius: 8px 8px 0 0;">
+              <tr>
+                <td style="text-align: center;">
+                  <img src="https://res.cloudinary.com/ddf0u9tgz/image/upload/v1724949908/emailLogo_rmmwdi.png" style="width: 150px; height: auto;" alt="Logo" />
+                  <p style="margin: 10px 0 0; font-size: 18px; font-weight: bold; color: #8667F2;">New Contact Form Submission</p>
+                </td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+
+        <tr>
+          <td style="padding: 16px; color: black; text-align: left;">
+            <p>Hello,</p>
+            <p>You have received a new contact form submission. Below are the details:</p>
+            <table width="100%" cellpadding="8" cellspacing="0" style="margin-top: 20px; border: 1px solid #ddd; border-radius: 8px;">
+              <tr>
+                <td style="background-color: #f1f1f1; font-weight: bold; color: #333;">Name:</td>
+                <td style="background-color: #ffffff; color: #333;">${name}</td>
+              </tr>
+              <tr>
+                <td style="background-color: #f1f1f1; font-weight: bold; color: #333;">Email:</td>
+                <td style="background-color: #ffffff; color: #333;">${email}</td>
+              </tr>
+              <tr>
+                <td style="background-color: #f1f1f1; font-weight: bold; color: #333;">Phone:</td>
+                <td style="background-color: #ffffff; color: #333;">${
+                  phone || 'Not Provided'
+                }</td>
+              </tr>
+              <tr>
+                <td style="background-color: #f1f1f1; font-weight: bold; color: #333;">Message:</td>
+                <td style="background-color: #ffffff; color: #333;">${message}</td>
+              </tr>
+            </table>
+  
+            <div style="margin-top: 30px; padding: 10px 0; text-align: center;">
+              <p style="font-size: 12px; color: #777777;">&copy; 2024 Devpulse. All rights reserved.</p>
+            </div>
+          </td>
+        </tr>
+      </table>
+    `
+}
+
+export default contactFormTemplate