add page context to the inquiries

Dujota · Nov 23, 2024 · df00312 · df00312
1 parent 70b39c7
commit df00312
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/components/common/forms/ContactForm.tsx b/components/common/forms/ContactForm.tsx
@@ -1,5 +1,6 @@
 import { contactUser } from 'lib/api/email';
 import { validateEmail } from 'lib/helpers/string-helpers';
+import { useMounted } from 'lib/hooks/useMounted';
 import { useState } from 'react';
 
 import Honeypot from './fields/Honeypot';
@@ -36,6 +37,7 @@ const ContactForm = ({ buttonText = 'Send Message', headingMessage = defaultMess
   const [success, setSuccess] = useState(false);
   const [loading, setLoading] = useState(false);
   const [submitMessage, setSubmitMessage] = useState('');
+  const mounted = useMounted();
 
   const validate = () => {
     let hasError = false;
@@ -67,7 +69,7 @@ const ContactForm = ({ buttonText = 'Send Message', headingMessage = defaultMess
     setSuccess(false);
 
     if (validate()) {
-      await contactUser({ email, phoneNumber, message }, setLoading, setSubmitMessage, setSuccess);
+      await contactUser({ email, phoneNumber, message, page: window?.location?.href }, setLoading, setSubmitMessage, setSuccess);
 
       if (success) {
         setPhoneNumber('');
@@ -80,6 +82,8 @@ const ContactForm = ({ buttonText = 'Send Message', headingMessage = defaultMess
     }
   };
 
+  if (!mounted) return null;
+
   return (
     <div id='contact-form' className={`font-poppins relative w-[403px] rounded-2xl p-[32px] text-left text-5xl text-black ${bg} ${sticky} ${toggle ? 'sm:!w-full' : ''}`}>
       <form onSubmit={handleSubmit}>

diff --git a/lib/email-templates/contact-admin.ts b/lib/email-templates/contact-admin.ts
@@ -1,4 +1,4 @@
-export function adminEmailTemplate({ phoneNumber, email, message }) {
+export function adminEmailTemplate({ phoneNumber, email, message, page }) {
   return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html lang="en">
   <head>
@@ -19,6 +19,7 @@ export function adminEmailTemplate({ phoneNumber, email, message }) {
           <p>Message:</p>
           <p>${message ?? 'no message provided'}</p>
           <br>
+          <p>This inquiry was generated from page: ${page}</p>
           </div>
           </div>
   </body>

diff --git a/lib/hooks/useMounted.tsx b/lib/hooks/useMounted.tsx
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export const useMounted = () => {
+  const [mounted, setMounted] = useState<boolean>();
+  // effects run only client-side
+  // so we can detect when the component is hydrated/mounted
+  // @see https://react.dev/reference/react/useEffect
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+};
diff --git a/pages/api/contact.ts b/pages/api/contact.ts
@@ -12,6 +12,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
     const email = req.body.email;
     const phoneNumber = req.body.phoneNumber;
     const message = req.body.message;
+    const page = req.body.page;
 
     switch (method) {
       case 'POST': {
@@ -20,7 +21,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
           toEmail: process.env.NODEMAILER_EMAIL,
           fromEmail: email,
           otpText: `INQUIRY --> CONTACT FORMPLAYACAR HOMES WEBSITE, EMAIL ADDRESS: ${email}, PHONE NUMBER: ${phoneNumber}, MESSAGE: ${message}`,
-          emailHtml: adminEmailTemplate({ phoneNumber, email, message }),
+          emailHtml: adminEmailTemplate({ phoneNumber, email, message, page }),
         });
 
         res.status(200).json({