From ff74e641f7da5f47839063e725af8bfa4cac0a63 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 14 Jan 2024 16:32:37 -0600
Subject: [PATCH 1/3] more

---
 src/App.js                             |  2 +-
 src/Components/Account/AccountPage.js  | 19 +++++++++++++------
 src/Components/Home/DemoRequestPage.js |  4 ++++
 src/Components/Home/HomePage.js        |  3 ++-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5e205db..71c1f8f 100644
--- a/src/App.js
+++ b/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?"
diff --git a/src/Components/Account/AccountPage.js b/src/Components/Account/AccountPage.js
index ac30ec6..046b05a 100644
--- a/src/Components/Account/AccountPage.js
+++ b/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">
diff --git a/src/Components/Home/DemoRequestPage.js b/src/Components/Home/DemoRequestPage.js
index 73a285d..3991942 100644
--- a/src/Components/Home/DemoRequestPage.js
+++ b/src/Components/Home/DemoRequestPage.js
@@ -5,6 +5,7 @@ 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 { useParams } from "react-router-dom";
 import { splitEvery } from "../../Utils/Array";
 import TextInput from "../../pageElements/TextInput";
 import { objectMap } from "../../Utils/Object";
@@ -20,10 +21,13 @@ 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 [isBusy, setIsBusy] = useState();
   const fieldsChunkSize = 2;
+  const isSupport = supReq === "5ac45d12";
+  console.log("isSupport", isSupport);
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, demofields);
diff --git a/src/Components/Home/HomePage.js b/src/Components/Home/HomePage.js
index e17fc2c..dc03c15 100644
--- a/src/Components/Home/HomePage.js
+++ b/src/Components/Home/HomePage.js
@@ -21,7 +21,8 @@ const HomePage = () => {
   };
 
   const handleDemo = () => {
-    navigate("/demorequestpage");
+    const supReq = null;
+    navigate("/requestpage/supReq");
   };
 
   return (

From 71baab3c06a62e21faa29eb17c1e1a10ec8da60b Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 14 Jan 2024 17:02:37 -0600
Subject: [PATCH 2/3] more

---
 src/Components/Home/DemoRequestPage.js | 40 +++++++++++++++-----------
 src/Constants/Fields/DemoFields.js     | 20 ++++++++++++-
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/Components/Home/DemoRequestPage.js b/src/Components/Home/DemoRequestPage.js
index 3991942..ca03dcb 100644
--- a/src/Components/Home/DemoRequestPage.js
+++ b/src/Components/Home/DemoRequestPage.js
@@ -4,7 +4,7 @@ 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";
@@ -23,21 +23,21 @@ import "../../styles/demo-request-page.scss";
 const DemoRequestPage = () => {
   const { supReq } = useParams();
   const navigate = useNavigate();
-  const [data, setData] = useState(getFormDataDefaults(demofields));
+
   const [isBusy, setIsBusy] = useState();
   const fieldsChunkSize = 2;
   const isSupport = supReq === "5ac45d12";
-  console.log("isSupport", isSupport);
-
+  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);
@@ -70,15 +70,23 @@ const DemoRequestPage = () => {
     <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 Techical 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) => (
@@ -94,11 +102,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>
diff --git a/src/Constants/Fields/DemoFields.js b/src/Constants/Fields/DemoFields.js
index cc0f88f..0fc9159 100644
--- a/src/Constants/Fields/DemoFields.js
+++ b/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,
+  },
+};

From b2eb5c5cb20eea90178192962863f8aff0c745ae Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 14 Jan 2024 17:42:40 -0600
Subject: [PATCH 3/3] more

---
 src/Components/Home/DemoRequestPage.js | 41 +++++++++++++++++++-------
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/Components/Home/DemoRequestPage.js b/src/Components/Home/DemoRequestPage.js
index ca03dcb..a32718b 100644
--- a/src/Components/Home/DemoRequestPage.js
+++ b/src/Components/Home/DemoRequestPage.js
@@ -23,10 +23,10 @@ import "../../styles/demo-request-page.scss";
 const DemoRequestPage = () => {
   const { supReq } = useParams();
   const navigate = useNavigate();
-
+  const token = window.sessionStorage.getItem("token");
   const [isBusy, setIsBusy] = useState();
   const fieldsChunkSize = 2;
-  const isSupport = supReq === "5ac45d12";
+  const isSupport = token && supReq === "5ac45d12";
   const inputFields = isSupport ? supportFields : demoFields;
   const [data, setData] = useState(getFormDataDefaults(inputFields));
   const handleChangeInput = (e, name) => {
@@ -44,7 +44,6 @@ const DemoRequestPage = () => {
   };
 
   async function saveUserData(dataValues) {
-    const { firstName, lastName, firm, telephone, email } = dataValues;
     const requestDate = new Date();
     dataValues["requestDate"] = requestDate;
     const requestId = uuidv4();
@@ -56,14 +55,30 @@ 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 (
@@ -72,7 +87,7 @@ const DemoRequestPage = () => {
         <div className="signup-header">
           {isSupport ? (
             <h2 className="signup-header-text">
-              Request Techical Or Account Support
+              Request Technical Or Account Support
             </h2>
           ) : (
             <>
@@ -122,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>