Merge pull request #21 from kjannette/gem3

Gem3

src/App.js

@@ -47,7 +47,7 @@ function App() {
           <Route exact path="/" element={<Homepage />} />
           <Route exact path="/login" element={<Login />} />
           <Route path="/signup" element={<SignupPage />} />
-          <Route path="/demorequestpage" element={<DemoRequestPage />} />
+          <Route path="/requestpage/:supReq" element={<DemoRequestPage />} />
           <Route
             exact
             path="/passwordreset/:mode?/:oobCode?"

src/Components/Account/AccountPage.js

@@ -1,4 +1,5 @@
 import { useState, useContext, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { db } from "../../firebase";
 import { collection, onSnapshot, query, where } from "firebase/firestore";
 import Button from "../../pageElements/Button";
@@ -7,6 +8,7 @@ import { AuthContext } from "../../Context/AuthProvider";
 import ProgressBar from "../../pageElements/ProgressBar";
 
 const AccountPage = () => {
+  const navigate = useNavigate();
   const { currentUserCreatedAt } = useContext(AuthContext);
   const { appState } = useContext(AppContext);
   const { group } = appState;
@@ -34,6 +36,11 @@ const AccountPage = () => {
     return null;
   }
 
+  const handleSupport = () => {
+    const supReq = "5ac45d12";
+    navigate(`/requestpage/${supReq}`);
+  };
+
   return (
     <div className="account-container">
       <div className="account-left-column">
@@ -124,17 +131,17 @@ const AccountPage = () => {
             <div className="account-support-title account-support-info-title">
               Need Support?
             </div>
+            {/*
             <div>
               <a href="tel:+12223334444">1-222-333-4444</a>
             </div>
-            <div>
+            */}
+            <div style={{ marginTop: "8px" }}>
               <a href="mailto:support@novodraft.ai">support@novodraft.ai</a>
             </div>
-            {/*
-              <div>
-                Or use our <a href="#">contact form</a>
-              </div>
-            */}
+            <div style={{ marginTop: "4px" }} onClick={handleSupport}>
+              Or use our <a href="">contact form</a>
+            </div>
           </div>
           <div className="account-support-links">
             <div className="account-support-title account-support-links-title">

src/Components/Home/DemoRequestPage.js

@@ -4,7 +4,8 @@ import { Link, useNavigate } from "react-router-dom";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
-import { demofields } from "../../Constants/Fields/DemoFields";
+import { demoFields, supportFields } from "../../Constants/Fields/DemoFields";
+import { useParams } from "react-router-dom";
 import { splitEvery } from "../../Utils/Array";
 import TextInput from "../../pageElements/TextInput";
 import { objectMap } from "../../Utils/Object";
@@ -20,27 +21,29 @@ import { collection, setDoc, doc } from "firebase/firestore";
 import "../../styles/demo-request-page.scss";
 
 const DemoRequestPage = () => {
+  const { supReq } = useParams();
   const navigate = useNavigate();
-  const [data, setData] = useState(getFormDataDefaults(demofields));
+  const token = window.sessionStorage.getItem("token");
   const [isBusy, setIsBusy] = useState();
   const fieldsChunkSize = 2;
-
+  const isSupport = token && supReq === "5ac45d12";
+  const inputFields = isSupport ? supportFields : demoFields;
+  const [data, setData] = useState(getFormDataDefaults(inputFields));
   const handleChangeInput = (e, name) => {
-    const newData = handleFormDataChange(e, name, data, demofields);
+    const newData = handleFormDataChange(e, name, data, inputFields);
     if (newData !== null) {
       setData(newData);
     }
   };
 
   const validateData = () => {
-    const newData = getValidatedFormData(data, demofields);
+    const newData = getValidatedFormData(data, inputFields);
     const hasErrors = isFormDataHasErrors(newData);
     setData(newData);
     return hasErrors ? null : objectMap(({ value }) => value, newData);
   };
 
   async function saveUserData(dataValues) {
-    const { firstName, lastName, firm, telephone, email } = dataValues;
     const requestDate = new Date();
     dataValues["requestDate"] = requestDate;
     const requestId = uuidv4();
@@ -52,29 +55,53 @@ const DemoRequestPage = () => {
     }
   }
 
+  async function saveSupportRequestData(dataValues) {
+    const requestDate = new Date();
+    dataValues["requestDate"] = requestDate;
+    const requestId = uuidv4();
+    try {
+      const supportRef = collection(db, "supportrequests");
+      await setDoc(doc(supportRef, requestId), dataValues);
+    } catch (error) {
+      console.log(`Error saving request data to db: ${error}`);
+    }
+  }
+
   async function handleRequestDemo() {
-    console.log("handlerequest demo");
     const dataValues = validateData();
     if (dataValues === null) {
       return;
     }
-    saveUserData(dataValues);
-    navigate("/");
+    if (isSupport) {
+      saveSupportRequestData(dataValues);
+      navigate("/");
+    } else {
+      saveUserData(dataValues);
+      navigate("/");
+    }
   }
 
   return (
     <div className="signup-super-container">
       <div className="signup-sub-container">
         <div className="signup-header">
-          <h2 className="signup-header-text">
-            Revolutionize Your Practice: Request A Demo
-          </h2>
-          <p className="requestdemo-para">
-            Enter your information below we will contact you to schedule
-          </p>
+          {isSupport ? (
+            <h2 className="signup-header-text">
+              Request Technical Or Account Support
+            </h2>
+          ) : (
+            <>
+              <h2 className="signup-header-text">
+                Revolutionize Your Practice: Request A Demo
+              </h2>
+              <p className="requestdemo-para">
+                Enter your information below we will contact you to schedule
+              </p>
+            </>
+          )}
         </div>
         <Form className="demo-request-form">
-          {splitEvery(Object.keys(demofields), fieldsChunkSize).map(
+          {splitEvery(Object.keys(inputFields), fieldsChunkSize).map(
             (names, j) => (
               <Row key={`row${j}`}>
                 {names.map((name, i) => (
@@ -90,11 +117,11 @@ const DemoRequestPage = () => {
                       message={data[name].message}
                       label={
                         data[name].value.length === 0
-                          ? demofields[name].label
+                          ? inputFields[name].label
                           : ""
                       }
-                      type={demofields[name].type}
-                      values={demofields[name].values}
+                      type={inputFields[name].type}
+                      values={inputFields[name].values}
                       disabled={isBusy}
                     />
                   </Col>
@@ -110,12 +137,16 @@ const DemoRequestPage = () => {
             size="lg"
             onClick={handleRequestDemo}
             disabled={isBusy}
-            labelText="Request Demo"
+            labelText={isSupport ? "Request Support" : "Request Demo"}
           />
           <div className="mt-3">
-            <span>
-              <Link to="/signup">Go to signup</Link>
-            </span>
+            {isSupport ? (
+              <></>
+            ) : (
+              <span>
+                <Link to="/signup">Go to signup</Link>
+              </span>
+            )}
           </div>
         </div>
       </div>

src/Components/Home/HomePage.js

@@ -21,7 +21,8 @@ const HomePage = () => {
   };
 
   const handleDemo = () => {
-    navigate("/demorequestpage");
+    const supReq = null;
+    navigate("/requestpage/supReq");
   };
 
   return (

src/Constants/Fields/DemoFields.js

@@ -1,4 +1,4 @@
-export const demofields = {
+export const demoFields = {
   firstName: { required: true, label: "First Name", maxLength: 45 },
   lastName: { required: true, label: "Last Name", maxLength: 45 },
   telephone: {
@@ -16,3 +16,21 @@ export const demofields = {
     maxLength: 45,
   },
 };
+
+export const supportFields = {
+  firstName: { required: true, label: "First Name", maxLength: 45 },
+  lastName: { required: true, label: "Last Name", maxLength: 45 },
+  telephone: {
+    required: true,
+    label: "Telephone: (###) ###-####",
+    maxLength: 45,
+    type: "phone",
+  },
+  email: { required: true, label: "Email", maxLength: 45, type: "email" },
+  supportIssue: {
+    required: true,
+    label: "Support Issue",
+    minLength: 3,
+    maxLength: 45,
+  },
+};