Merge pull request said7388#43 from kansaok/fix-send-mail

[FIX] - 2024-09-02

Author: said7388

.env.example

@@ -4,4 +4,6 @@ NEXT_PUBLIC_EMAILJS_PUBLIC_KEY =
 NEXT_PUBLIC_GTM = 
 NEXT_PUBLIC_APP_URL = "http://127.0.0.1:3000"
 NEXT_PUBLIC_RECAPTCHA_SECRET_KEY = 
-NEXT_PUBLIC_RECAPTCHA_SITE_KEY = 
+NEXT_PUBLIC_RECAPTCHA_SITE_KEY = 
+TELEGRAM_BOT_TOKEN =
+TELEGRAM_CHAT_ID = 

app/components/homepage/contact/contact-without-captcha.jsx

@@ -1,17 +1,18 @@
 "use client";
 // @flow strict
-import { isValidEmail } from '@/utils/check-email';
-import axios from 'axios';
-import { useState } from 'react';
+import { isValidEmail } from "@/utils/check-email";
+import axios from "axios";
+import { useState } from "react";
 import { TbMailForward } from "react-icons/tb";
-import { toast } from 'react-toastify';
+import { toast } from "react-toastify";
+import emailjs from "@emailjs/browser";
 
 function ContactWithoutCaptcha() {
   const [error, setError] = useState({ email: false, required: false });
   const [userInput, setUserInput] = useState({
-    name: '',
-    email: '',
-    message: '',
+    name: "",
+    email: "",
+    message: "",
   });
 
   const checkRequired = () => {
@@ -29,7 +30,7 @@ function ContactWithoutCaptcha() {
       return;
     } else {
       setError({ ...error, required: false });
-    };
+    }
 
     const serviceID = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
     const templateID = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
@@ -38,29 +39,24 @@ function ContactWithoutCaptcha() {
     try {
       const res = await emailjs.send(serviceID, templateID, userInput, options);
       const teleRes = await axios.post(`${process.env.NEXT_PUBLIC_APP_URL}/api/contact`, userInput);
-
       if (res.status === 200 || teleRes.status === 200) {
-        toast.success('Message sent successfully!');
+        toast.success("Message sent successfully!");
         setUserInput({
-          name: '',
-          email: '',
-          message: '',
+          name: "",
+          email: "",
+          message: "",
         });
-      };
+      }
     } catch (error) {
       toast.error(error?.text || error);
-    };
+    }
   };
 
   return (
     <div className="">
-      <p className="font-medium mb-5 text-[#16f2b3] text-xl uppercase">
-        Contact with me
-      </p>
+      <p className="font-medium mb-5 text-[#16f2b3] text-xl uppercase">Contact with me</p>
       <div className="max-w-3xl text-white rounded-lg border border-[#464c6a] p-3 lg:p-5">
-        <p className="text-sm text-[#d3d8e8]">
-          {"If you have any questions or concerns, please don't hesitate to contact me. I am open to any work opportunities that align with my skills and interests."}
-        </p>
+        <p className="text-sm text-[#d3d8e8]">{"If you have any questions or concerns, please don't hesitate to contact me. I am open to any work opportunities that align with my skills and interests."}</p>
         <div className="mt-6 flex flex-col gap-4">
           <div className="flex flex-col gap-2">
             <label className="text-base">Your Name: </label>
@@ -89,9 +85,7 @@ function ContactWithoutCaptcha() {
                 setError({ ...error, email: !isValidEmail(userInput.email) });
               }}
             />
-            {error.email &&
-              <p className="text-sm text-red-400">Please provide a valid email!</p>
-            }
+            {error.email && <p className="text-sm text-red-400">Please provide a valid email!</p>}
           </div>
 
           <div className="flex flex-col gap-2">
@@ -108,11 +102,7 @@ function ContactWithoutCaptcha() {
             />
           </div>
           <div className="flex flex-col items-center gap-2">
-            {error.required &&
-              <p className="text-sm text-red-400">
-                Email and Message are required!
-              </p>
-            }
+            {error.required && <p className="text-sm text-red-400">Email and Message are required!</p>}
             <button
               className="flex items-center gap-1 hover:gap-3 rounded-full bg-gradient-to-r from-pink-500 to-violet-600 px-5 md:px-12 py-2.5 md:py-3 text-center text-xs md:text-sm font-medium uppercase tracking-wider text-white no-underline transition-all duration-200 ease-out hover:text-white hover:no-underline md:font-semibold"
               role="button"
@@ -126,6 +116,6 @@ function ContactWithoutCaptcha() {
       </div>
     </div>
   );
-};
+}
 
-export default ContactWithoutCaptcha;
+export default ContactWithoutCaptcha;