kjannette/ax3Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Kenneth Jannette
2024-01-14 17:02:37 -06:00
parent ff74e641f7
commit 71baab3c06
2 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Components/Home/DemoRequestPage.js
View File

@@ -4,7 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
import Col from "react-bootstrap/Col"; import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form"; import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row"; 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 { useParams } from "react-router-dom";
import { splitEvery } from "../../Utils/Array"; import { splitEvery } from "../../Utils/Array";
import TextInput from "../../pageElements/TextInput"; import TextInput from "../../pageElements/TextInput";
@@ -23,21 +23,21 @@ import "../../styles/demo-request-page.scss";
const DemoRequestPage = () => { const DemoRequestPage = () => {
const { supReq } = useParams(); const { supReq } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const [data, setData] = useState(getFormDataDefaults(demofields));
const [isBusy, setIsBusy] = useState(); const [isBusy, setIsBusy] = useState();
const fieldsChunkSize = 2; const fieldsChunkSize = 2;
const isSupport = supReq === "5ac45d12"; const isSupport = supReq === "5ac45d12";
console.log("isSupport", isSupport); const inputFields = isSupport ? supportFields : demoFields;
const [data, setData] = useState(getFormDataDefaults(inputFields));
const handleChangeInput = (e, name) => { const handleChangeInput = (e, name) => {
const newData = handleFormDataChange(e, name, data, demofields); const newData = handleFormDataChange(e, name, data, inputFields);
if (newData !== null) { if (newData !== null) {
setData(newData); setData(newData);
} }
}; };
const validateData = () => { const validateData = () => {
const newData = getValidatedFormData(data, demofields); const newData = getValidatedFormData(data, inputFields);
const hasErrors = isFormDataHasErrors(newData); const hasErrors = isFormDataHasErrors(newData);
setData(newData); setData(newData);
return hasErrors ? null : objectMap(({ value }) => value, newData); return hasErrors ? null : objectMap(({ value }) => value, newData);
@@ -70,15 +70,23 @@ const DemoRequestPage = () => {
<div className="signup-super-container"> <div className="signup-super-container">
<div className="signup-sub-container"> <div className="signup-sub-container">
<div className="signup-header"> <div className="signup-header">
<h2 className="signup-header-text"> {isSupport ? (
Revolutionize Your Practice: Request A Demo <h2 className="signup-header-text">
</h2> Request Techical Or Account Support
<p className="requestdemo-para"> </h2>
Enter your information below we will contact you to schedule ) : (
</p> <>
<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> </div>
<Form className="demo-request-form"> <Form className="demo-request-form">
{splitEvery(Object.keys(demofields), fieldsChunkSize).map( {splitEvery(Object.keys(inputFields), fieldsChunkSize).map(
(names, j) => ( (names, j) => (
<Row key={`row${j}`}> <Row key={`row${j}`}>
{names.map((name, i) => ( {names.map((name, i) => (
@@ -94,11 +102,11 @@ const DemoRequestPage = () => {
message={data[name].message} message={data[name].message}
label={ label={
data[name].value.length === 0 data[name].value.length === 0
? demofields[name].label ? inputFields[name].label
: "" : ""
} }
type={demofields[name].type} type={inputFields[name].type}
values={demofields[name].values} values={inputFields[name].values}
disabled={isBusy} disabled={isBusy}
/> />
</Col> </Col>

20
src/Constants/Fields/DemoFields.js
View File

@@ -1,4 +1,4 @@
export const demofields = { export const demoFields = {
firstName: { required: true, label: "First Name", maxLength: 45 }, firstName: { required: true, label: "First Name", maxLength: 45 },
lastName: { required: true, label: "Last Name", maxLength: 45 }, lastName: { required: true, label: "Last Name", maxLength: 45 },
telephone: { telephone: {
@@ -16,3 +16,21 @@ export const demofields = {
maxLength: 45, 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,
},
};