fix: contact form

Disable gmail addresses.

src/components/footer/index.tsx

@@ -1,17 +1,35 @@
-import React from 'react'
+import React, { useState } from 'react'
-import { Link } from 'gatsby'
 
-// import dcLogo from "../../images/dclogo.png";
+import { Section } from '../shared'
-
-import { Container, Section } from '../shared'
 import { SolidButton } from '../shared/styledComponents'
 import { StyledHeading, StyledDesc, InputStyled, StyledAnchor } from './style'
 
-const anchorStyles = {
+const Footer = () => {
-  color: '#888'
+  const [email, setEmail] = useState('')
-}
+  const [emailError, setEmailError] = useState('')
 
-const Footer = () => (
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setEmail(value)
+
+    if (
+      value &&
+      (value.toLowerCase().includes('@gmail.com') ||
+        value.toLowerCase().includes('@googlemail.com'))
+    ) {
+      setEmailError('Gmail addresses are not allowed.')
+    } else {
+      setEmailError('')
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    if (emailError) {
+      e.preventDefault()
+    }
+  }
+
+  return (
     <Section bottomArrow={false}>
       <div className="row">
         <div className="col-md-3 me-md-5">
@@ -29,6 +47,7 @@ const Footer = () => (
             className="kwes-form"
             method="POST"
             action="https://kwes.io/api/foreign/forms/mxKuyK4lxZWnG2WNH3ga"
+            onSubmit={handleSubmit}
           >
             <div className="mb-3">
               <InputStyled
@@ -37,8 +56,21 @@ const Footer = () => (
                 className="form-control"
                 aria-describedby="emailHelp"
                 placeholder="Email Address*"
+                value={email}
+                onChange={handleEmailChange}
                 required
               />
+              {emailError && (
+                <div
+                  style={{
+                    color: 'red',
+                    fontSize: '0.875rem',
+                    marginTop: '0.25rem'
+                  }}
+                >
+                  {emailError}
+                </div>
+              )}
             </div>
             <div className="mb-3">
               <InputStyled
@@ -64,12 +96,13 @@ const Footer = () => (
           <StyledHeading>Other Resources</StyledHeading>
           <StyledDesc>
             Visit our educational and fun SAS® software quiz{' '}
-          <StyledAnchor href="https://sasensei.com">Sasensei</StyledAnchor> and
+            <StyledAnchor href="https://sasensei.com">Sasensei</StyledAnchor>{' '}
-          test your knowledge of SAS topics.
+            and test your knowledge of SAS topics.
           </StyledDesc>
         </div>
       </div>
     </Section>
-)
+  )
+}
 
 export default Footer