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() { } /> } /> } /> - } /> + } /> { + 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 (
@@ -124,17 +131,17 @@ const AccountPage = () => {
Need Support?
+ {/* -
+ */} + - {/* -
- Or use our contact form -
- */} +
+ Or use our contact form +
diff --git a/src/Components/Home/DemoRequestPage.js b/src/Components/Home/DemoRequestPage.js index 73a285d..a32718b 100644 --- a/src/Components/Home/DemoRequestPage.js +++ b/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 (
-

- Revolutionize Your Practice: Request A Demo -

-

- Enter your information below we will contact you to schedule -

+ {isSupport ? ( +

+ Request Technical Or Account Support +

+ ) : ( + <> +

+ Revolutionize Your Practice: Request A Demo +

+

+ Enter your information below we will contact you to schedule +

+ + )}
- {splitEvery(Object.keys(demofields), fieldsChunkSize).map( + {splitEvery(Object.keys(inputFields), fieldsChunkSize).map( (names, 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} /> @@ -110,12 +137,16 @@ const DemoRequestPage = () => { size="lg" onClick={handleRequestDemo} disabled={isBusy} - labelText="Request Demo" + labelText={isSupport ? "Request Support" : "Request Demo"} />
- - Go to signup - + {isSupport ? ( + <> + ) : ( + + Go to signup + + )}
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 ( 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, + }, +};