Feature/kanban 1084

package.json

@@ -60,6 +60,7 @@
     "react-bootstrap-table2-paginator": "^2.1.2",
     "react-dom": "^19.1.0",
     "react-ga4": "^2.1.0",
+    "react-google-recaptcha-v3": "^1.11.0",
     "react-helmet": "^6.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.6.0",

src/constants.js

@@ -1,4 +1,6 @@
+export const CONTACT_API_URL = 'https://1ythblxki4.execute-api.us-east-1.amazonaws.com/prod/contact';
 export const HELP_EMAIL = 'help@alliancegenome.org';
+export const RECAPTCHA_SITE_KEY = '6Ld-r5EsAAAAAMlCU84nH_F5o4_sLkJYnBhr3j8b';
 export const SEARCH_API_ERROR_MESSAGE = `There was a problem connecting to the server. Please refresh the page. If you continue to see this message, please contact ${HELP_EMAIL}`;
 export const LARGE_COL_CLASS = 'col-md-8 col-12';
 export const SMALL_COL_CLASS = 'col-md-4 col-12';

src/containers/contactPage/index.jsx

@@ -0,0 +1,182 @@
+import React, { useCallback, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { GoogleReCaptchaProvider, useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+import { HELP_EMAIL, RECAPTCHA_SITE_KEY } from '../../constants';
+import HeadMetaTags from '../../components/headMetaTags.jsx';
+import style from '../wordpress/style.module.scss';
+import { sendContactEmail } from '../../lib/sendContactEmail';
+
+const ContactForm = () => {
+  const [searchParams] = useSearchParams();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [subject, setSubject] = useState(searchParams.get('subject') || '');
+  const [message, setMessage] = useState('');
+  const [emailError, setEmailError] = useState('');
+  const [submitStatus, setSubmitStatus] = useState(null);
+  const [submitError, setSubmitError] = useState('');
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  // const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  const clearSubmitStatus = () => {
+    if (submitStatus === 'success') {
+      setSubmitStatus(null);
+    }
+  };
+
+  const validateEmail = (e) => {
+    if (!e.target.validity.valid) {
+      setEmailError('Please enter a valid email address.');
+    } else {
+      setEmailError('');
+    }
+  };
+
+  const handleReset = () => {
+    setName('');
+    setEmail('');
+    setSubject('');
+    setMessage('');
+    setEmailError('');
+    setSubmitStatus(null);
+    setSubmitError('');
+  };
+
+  const handleSubmit = useCallback(
+    async (e) => {
+      e.preventDefault();
+      if (!executeRecaptcha) {
+        setSubmitError('reCAPTCHA not ready. Please try again.');
+        setSubmitStatus('error');
+        return;
+      }
+      setSubmitStatus('sending');
+      setSubmitError('');
+      try {
+        const captchaToken = await executeRecaptcha('contact');
+        await sendContactEmail({ name, email, subject, message, captchaToken });
+        setSubmitStatus('success');
+        setName('');
+        setEmail('');
+        setSubject('');
+        setMessage('');
+      } catch (err) {
+        setSubmitStatus('error');
+        setSubmitError(err.message || 'Network error. Please try again later.');
+      }
+    },
+    [executeRecaptcha, name, email, subject, message]
+  );
+
+  return (
+    <div>
+      <HeadMetaTags title="Contact Us" />
+      <div className={style.contactMenuContainer}>
+        <div className="container-fluid">
+          <div className={style.secondaryNavEmptyRow}></div>
+          <div className={`row ${style.secondaryNav}`}>
+            <div className="container">
+              <h1>Contact Us</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-md-6 col-12">
+            <p>
+              Have a question or need help? &nbsp;&nbsp;Fill out the form below and we will get back to you as soon as
+              possible.
+            </p>
+            <form onFocus={clearSubmitStatus} onSubmit={handleSubmit}>
+              <div className="form-group mb-3">
+                <label htmlFor="contact-name">Name</label>
+                <input
+                  className="form-control"
+                  id="contact-name"
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                  type="text"
+                  value={name}
+                />
+              </div>
+              <div className="form-group mb-3">
+                <label htmlFor="contact-email">Email</label>
+                <input
+                  className={`form-control ${emailError ? 'is-invalid' : ''}`}
+                  id="contact-email"
+                  onBlur={(e) => validateEmail(e)}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                    setEmailError('');
+                  }}
+                  required
+                  type="email"
+                  value={email}
+                />
+                {emailError && <div className="invalid-feedback">{emailError}</div>}
+              </div>
+              <div className="form-group mb-3">
+                <label htmlFor="contact-subject">Subject</label>
+                <input
+                  className="form-control"
+                  id="contact-subject"
+                  onChange={(e) => setSubject(e.target.value)}
+                  required
+                  type="text"
+                  value={subject}
+                />
+              </div>
+              <div className="form-group mb-3">
+                <label htmlFor="contact-message">Message</label>
+                <textarea
+                  className="form-control"
+                  id="contact-message"
+                  onChange={(e) => setMessage(e.target.value)}
+                  required
+                  rows="6"
+                  value={message}
+                />
+              </div>
+              <div className="mb-4">
+                <button
+                  className="btn btn-primary"
+                  disabled={submitStatus === 'sending'}
+                  style={{ marginRight: '3rem' }}
+                  type="submit"
+                >
+                  {submitStatus === 'sending' ? 'Sending...' : 'Send'}
+                </button>
+                <button
+                  className="btn btn-primary"
+                  disabled={submitStatus === 'sending'}
+                  onClick={handleReset}
+                  type="button"
+                >
+                  Reset
+                </button>
+              </div>
+              {submitStatus === 'success' && (
+                <div className="alert alert-success">
+                  Your message has been sent successfully. We will get back to you soon.
+                </div>
+              )}
+              {submitStatus === 'error' && <div className="alert alert-danger">{submitError}</div>}
+            </form>
+            <p className="mb-5">
+              To email the Alliance of Genome Resources directly: <a href={`mailto:${HELP_EMAIL}`}>{HELP_EMAIL}</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ContactPage = () => (
+  <GoogleReCaptchaProvider reCaptchaKey={RECAPTCHA_SITE_KEY} useEnterprise>
+    <ContactForm />
+  </GoogleReCaptchaProvider>
+);
+
+export default ContactPage;

src/containers/layout/topBar.jsx

@@ -1,23 +1,21 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Link } from 'react-router-dom';
 
-import { HELP_EMAIL } from '../../constants';
 import SocialMedia from './SocialMedia';
 
 import style from './style.module.scss';
 
-class TopBar extends Component {
-  render() {
-    return (
-      <div className={style.topBar}>
-        <div className="align-items-center container-fluid d-flex justify-content-between py-2">
-          <span>
-            Questions? <a href={`mailto:${HELP_EMAIL}`}>Contact Us</a>
-          </span>
-          <SocialMedia />
-        </div>
+const TopBar = () => {
+  return (
+    <div className={style.topBar}>
+      <div className="align-items-center container-fluid d-flex justify-content-between py-2">
+        <span>
+          Questions? <Link to="/contact-us">Contact Us</Link>
+        </span>
+        <SocialMedia />
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default TopBar;

src/lib/sendContactEmail.js

@@ -0,0 +1,23 @@
+import { CONTACT_API_URL } from '../constants.js';
+
+export const sendContactEmail = async ({ name, email, subject, message, captchaToken }) => {
+  const response = await fetch(CONTACT_API_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, email, subject, message, captchaToken }),
+  });
+  if (!response.ok) {
+    let errMessage = 'Failed to send errMessage.';
+    const text = await response.text();
+
+    try {
+      const data = JSON.parse(text);
+      errMessage = data.errors?.join(', ') || data.error || errMessage;
+    } catch {
+      errMessage = text || errMessage;
+    }
+
+    throw new Error(errMessage);
+  }
+  return response.json();
+};

src/routes.jsx

@@ -20,6 +20,7 @@ import MODLanding from './containers/modLanding/Main.jsx';
 import DiseasePortalPage from './containers/diseasePortal/index.jsx';
 import AlzheimersPage from './containers/alzheimersPage/index.jsx';
 import BlastPage from './containers/blastPage/index.jsx';
+import ContactPage from './containers/contactPage/index.jsx';
 
 const WordpressRedirect = () => {
   const { slug } = useParams();
@@ -53,7 +54,7 @@ const LayoutWithRoutes = () => (
       {/* <Route exact path="/disease-portal/alzheimers-disease" component={AlzheimersPageRedirect} /> */}
       {/* <Route exact path="/disease-portal/alzheimers-disease" element={<AlzheimersPage />} /> */}
       <Route exact path="/blastservice" element={<BlastPage />} />
-
+      <Route exact path="/contact-us" element={<ContactPage />} />
       <Route exact path="/wordpress/:slug" component={WordpressRedirect} />
       <Route path="/:slug" element={<WordpressPage />} />