feat: submiting question and email service

components/forms/contact/ContactPageForm.jsx

@@ -12,6 +12,7 @@ import Link from 'next/link';
 import PropType from 'prop-types';
 import React from 'react';
 import { BASE_PAGE } from '../../../constants/pages';
+import { postQuestion } from '../../../requests/question/postQuestionRequest';
 import { contactPageSchema } from '../../../schemas/contactSchema';
 
 const ContactPageForm = () => {
@@ -19,7 +20,11 @@ const ContactPageForm = () => {
   //const [error] = useState({ hasError: false, errorMessage: '' });
 
   const handleSubmit = async (values) => {
-    console.log(values);
+    try {
+      postQuestion(values);
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const formik = useFormik({

models/question.js

@@ -0,0 +1,39 @@
+const mongoose = require('mongoose');
+const validator = require('validator');
+
+const QuestionSchema = new mongoose.Schema({
+  firstName: {
+    type: String,
+    required: [true, 'Please provide a name.'],
+    maxlength: [60, 'Name cannot be more than 60 characters'],
+    trim: true,
+  },
+  lastName: {
+    type: String,
+    required: [true, 'Please provide a last name.'],
+    maxlength: [60, 'Name cannot be more than 60 characters'],
+    trim: true,
+  },
+  email: {
+    type: String,
+    unique: [true, 'Email must be unique.'],
+    required: [true, 'Please provide an email.'],
+    trim: true,
+    lowercase: true,
+    validate(value) {
+      if (!validator.isEmail(value)) {
+        throw new Error('Email is invalid');
+      }
+    },
+  },
+  message: {
+    type: String,
+    required: [true, 'Please provide a message/question.'],
+    trim: true,
+  },
+});
+
+const Question =
+  mongoose.models.Question ||
+  mongoose.model('Question', QuestionSchema, 'Questions');
+module.exports = Question;

next.config.js

@@ -9,6 +9,7 @@ const nextConfig = {
     NEXT_PUBLIC_STRIPE_PUBLIC_API_KEY:
       process.env.NEXT_PUBLIC_STRIPE_PUBLIC_API_KEY,
     NEXT_PUBLIC_MAP_KEY: process.env.NEXT_PUBLIC_NEXT_PUBLIC_MAP_KEY,
+    NEXT_PUBLIC_SEND_GRID: process.env.NEXT_PUBLIC_SEND_GRID,
   },
   reactStrictMode: true,
   swcMinify: true,

package.json

@@ -19,6 +19,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.2",
     "@react-google-maps/api": "^2.12.2",
+    "@sendgrid/mail": "^7.7.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.0.10",
     "bcryptjs": "^2.4.3",

pages/api/question/index.js

@@ -0,0 +1,49 @@
+const Question = require('../../../models/question');
+import dbConnect from '../../../utils/helpers/dbHelpers';
+const sgMail = require('@sendgrid/mail');
+
+async function handler(req, res) {
+  const { method } = req;
+  await dbConnect();
+
+  switch (method) {
+    case 'POST': {
+      try {
+        const question = await Question.create(req.body);
+
+        sgMail.setApiKey(process.env.NEXT_PUBLIC_SEND_GRID);
+
+        const msg = {
+          to: 'nikola.tasic@dilig.net', //req.body.email, // Change to your recipient
+          from: 'nikola.tasic@dilig.net', // Change to your verified sender
+          subject: 'Question submitted',
+          text: 'Your question was submitted successfully, we will contact you via email shortly. Thank you!',
+          html: '<strong>Your question was submitted successfully, we will contact you via email shortly. Thank you!</strong>',
+        };
+
+        sgMail
+          .send(msg)
+          .then(() => {
+            console.log('Email sent');
+          })
+          .catch((error) => {
+            res.status(400).json({ message: error });
+          });
+
+        res.status(201).json({
+          message:
+            'Your message/question was submitted successfully, check your mail for confirmation.',
+          question,
+        });
+      } catch (error) {
+        res.status(400).json({ message: error });
+      }
+      break;
+    }
+    default:
+      res.status(405).json({ message: 'Method not allowed' });
+      break;
+  }
+}
+
+export default handler;

requests/apiEndpoints.js

@@ -8,4 +8,5 @@ export default {
   featuredProducts: '/api/product/featured-products',
   order: '/api/order',
   userUpdate: '/api/user',
+  question: '/api/question',
 };

requests/question/postQuestionRequest.js

@@ -0,0 +1,19 @@
+import apiEndpoints from '../apiEndpoints';
+
+export const postQuestion = async (questionData) => {
+  const response = await fetch(apiEndpoints.question, {
+    method: 'POST',
+    body: JSON.stringify(questionData),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    throw new Error(data.message || 'Something went wrong!');
+  }
+
+  return data;
+};