more

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>

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,
+  },
+};