Merge pull request #296 from Web-Dev-Path/refactor/replace-mailto-links-with-contact

refactor: Replace mailto button links with contact

Author: oluwatobiss

CHANGELOG.md

@@ -194,7 +194,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - CardsContainers
   - NewsletterSubscribe
   - Hero
-- Removed Styled Components dependency  
+- Removed Styled Components dependency
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling
@@ -209,3 +209,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fixed active state bug on the navigation.
 - Integrate Mailchimp Marketing API instead of react-mailchimp-subscribe dependency.
 - Removed unused props from Hero layout component
+- Replace mailto:hello@webdevpath.co button links with /contact

components/ContactUs/ContactUsForm/index.js

@@ -4,7 +4,7 @@ import RevealContentContainer from '@/components/containers/RevealContentContain
 import { SubmitButton } from '@/components/buttons/SubmitButton';
 import styles from './ContactUsForm.module.scss';
 
-function ContactUsForm({ setResponseMessage, getReCaptchaToken }) {
+function ContactUsForm({ subject, setResponseMessage, getReCaptchaToken }) {
   const {
     register,
     handleSubmit,
@@ -14,7 +14,7 @@ function ContactUsForm({ setResponseMessage, getReCaptchaToken }) {
     defaultValues: {
       Name: '',
       Email: '',
-      Subject: '',
+      Subject: subject || '',
       Message: '',
     },
   });

components/ContactUs/index.js

@@ -2,9 +2,11 @@ import React from 'react';
 import ReCapchaWrapper from '../Recapcha';
 import ContactUsForm from '@/components/ContactUs/ContactUsForm';
 
-const ContactUs = ({ setMsg }) => {
+const ContactUs = ({ subject, setMsg }) => {
   return (
-    <ReCapchaWrapper children={<ContactUsForm setResponseMessage={setMsg} />} />
+    <ReCapchaWrapper
+      children={<ContactUsForm subject={subject} setResponseMessage={setMsg} />}
+    />
   );
 };
 

components/buttons/ButtonLink/index.js

@@ -1,4 +1,5 @@
 import styles from './ButtonLink.module.scss';
+import Link from 'next/link';
 import { combineClasses } from '@/utils/classnames';
 
 export default function ButtonLink({
@@ -8,14 +9,18 @@ export default function ButtonLink({
   openNewTab,
 }) {
   const buttonClass = combineClasses(styles.buttonLink, customBtnClass, styles);
-  return (
+  return openNewTab ? (
     <a
       href={link}
       className={buttonClass}
-      target={openNewTab ? '_blank' : undefined}
+      target='_blank'
       rel='noopener noreferrer'
     >
       {children}
     </a>
+  ) : (
+    <Link href={link} className={buttonClass}>
+      {children}
+    </Link>
   );
 }

components/layout/Nav/index.js

@@ -90,27 +90,27 @@ export default function Nav() {
               {linksNav.map(({ text, href, id }) => {
                 return (
                   <li className={styles.item} key={id}>
-                    <a
+                    <Link
                       href={href}
                       className={`${styles.link} ${router.pathname === href ? styles.current : ''}`}
                       title={text}
                     >
                       {text}
-                    </a>
+                    </Link>
                   </li>
                 );
               })}
               <li className={styles.item}>
-                <a
-                  href='mailto:hello@webdevpath.co?subject=Project collaborator application'
+                <Link
+                  href='/contact?subject=Application: I want to join the project'
                   className={`
                     ${active ? styles.active : ''} 
                     ${isSticky ? styles.buttonSticky : styles.button}
                   `}
                   title='Join us'
                 >
                   Join us
-                </a>
+                </Link>
               </li>
             </ul>
             <button

pages/about.js

@@ -207,7 +207,7 @@ export default function AboutUs() {
           image='/images/svg/slash.svg'
           altTag=''
           customInnerClass='get-started'
-          link='mailto:hello@webdevpath.co'
+          link='/contact'
           linkText='Ping us'
           customBtnClass='inverted-grey'
         />

pages/contact.js

@@ -1,19 +1,36 @@
-import { useState } from 'react';
-import ContactUsFormSubscribe from '@/components/ContactUs';
-import ContactUsCards from '@/components/ContactUs/ContactUsCards';
-import styles from '@/styles/pages/contact.module.scss';
+import { useRef, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
+import ContactUsCards from '@/components/ContactUs/ContactUsCards';
+import ContactUsFormSubscribe from '@/components/ContactUs';
+import styles from '@/styles/pages/contact.module.scss';
 export default function ContactUs() {
+  const subjectFilled = useRef(false);
+  const searchParams = useSearchParams();
+  const subjectParam = searchParams.get('subject');
+  const [param, setParam] = useState(subjectParam || '');
   const [message, setMessage] = useState([]);
 
+  function updateSubject(state, value) {
+    subjectFilled.current = state;
+    setParam(value);
+  }
+
+  subjectParam && !subjectFilled.current && updateSubject(true, subjectParam);
+  !subjectParam && subjectFilled.current && updateSubject(false, '');
+
   return (
     <>
       <div className={styles.contactUsContainer}>
         <div className={styles.formWrapper}>
           <div className={styles.formAndDecorations}>
             <Bracket className={bracketStyles.yellowBracket} />
-            <ContactUsFormSubscribe setMsg={setMessage} />
+            <ContactUsFormSubscribe
+              key={param}
+              subject={param}
+              setMsg={setMessage}
+            />
             <img
               className={styles.yellowColon}
               src='/images/svg/yellow-colon.svg'