first commit

2024-01-11 18:24:41 -06:00
commit 4c1fb67383
103 changed files with 29954 additions and 0 deletions
--- a/src/Components/Home/DemoRequestPage.js
+++ b/src/Components/Home/DemoRequestPage.js
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import Button from "../../pageElements/Button";
+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 { splitEvery } from "../../Utils/Array";
+import TextInput from "../../pageElements/TextInput";
+import { objectMap } from "../../Utils/Object";
+import { v4 as uuidv4 } from "uuid";
+import {
+  getFormDataDefaults,
+  getValidatedFormData,
+  handleFormDataChange,
+  isFormDataHasErrors,
+} from "../../Utils/Form";
+import { db } from "../../firebase";
+import { collection, setDoc, doc } from "firebase/firestore";
+import "../../styles/demo-request-page.scss";
+
+const DemoRequestPage = () => {
+  const navigate = useNavigate();
+  const [data, setData] = useState(getFormDataDefaults(demofields));
+  const [isBusy, setIsBusy] = useState();
+  const fieldsChunkSize = 2;
+
+  const handleChangeInput = (e, name) => {
+    const newData = handleFormDataChange(e, name, data, demofields);
+    if (newData !== null) {
+      setData(newData);
+    }
+  };
+
+  const validateData = () => {
+    const newData = getValidatedFormData(data, demofields);
+    const hasErrors = isFormDataHasErrors(newData);
+    setData(newData);
+    return hasErrors ? null : objectMap(({ value }) => value, newData);
+  };
+
+  async function saveUserData(dataValues) {
+    console.log("saveUserData dataValues", dataValues);
+    const { firstName, lastName, firm, telephone, email } = dataValues;
+    const requestDate = new Date();
+    dataValues["requestDate"] = requestDate;
+    const requestId = uuidv4();
+    try {
+      const demoRef = collection(db, "demorequests");
+      await setDoc(doc(demoRef, 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("/");
+  }
+
+  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>
+        </div>
+        <Form className="demo-request-form">
+          {splitEvery(Object.keys(demofields), fieldsChunkSize).map(
+            (names, j) => (
+              <Row key={`row${j}`}>
+                {names.map((name, i) => (
+                  <Col
+                    key={`${name}${i + fieldsChunkSize * j}`}
+                    className="mb-3"
+                  >
+                    <TextInput
+                      name={name}
+                      value={data[name].value}
+                      onChange={(e) => handleChangeInput(e, name)}
+                      error={data[name].error}
+                      message={data[name].message}
+                      label={
+                        data[name].value.length === 0
+                          ? demofields[name].label
+                          : ""
+                      }
+                      type={demofields[name].type}
+                      values={demofields[name].values}
+                      disabled={isBusy}
+                    />
+                  </Col>
+                ))}
+              </Row>
+            )
+          )}
+        </Form>
+        <div className="signup-button-box">
+          <Button
+            className="primary-button"
+            type="button"
+            size="lg"
+            onClick={handleRequestDemo}
+            disabled={isBusy}
+            labelText="Request Demo"
+          />
+          <div className="mt-3">
+            <span>
+              <Link to="/signup">Go to signup</Link>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DemoRequestPage;