more

src/Components/Modals/PaymentModal.js

@@ -3,6 +3,17 @@ import Button from "../../pageElements/Button";
 import Modal from "react-bootstrap/Modal";
 import TextInput from "../../pageElements/TextInput";
 import { db } from "../../firebase";
+import { paymentfields } from "../../Constants/Fields/Signupfields";
+import { splitEvery } from "../../Utils/Array";
+import Col from "react-bootstrap/Col";
+import Form from "react-bootstrap/Form";
+import Row from "react-bootstrap/Row";
+import {
+  getFormDataDefaults,
+  getValidatedFormData,
+  handleFormDataChange,
+  isFormDataHasErrors,
+} from "../../Utils/Form";
 
 const PaymentModal = ({
   onCancel,
@@ -11,7 +22,37 @@ const PaymentModal = ({
   modalText,
   isBusy,
   setCardNumber,
+  handleChangeInput,
 }) => {
+  const fieldsChunkSize = 2;
+
+  const ModalForm = () => {
+    return splitEvery(
+      Object.keys(paymentfields).slice(0, -2),
+      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 ? signupfields[name].label : ""
+              }
+              type={signupfields[name].type}
+              values={signupfields[name].values}
+              disabled={isBusy}
+            />
+          </Col>
+        ))}
+      </Row>
+    ));
+  };
+
   return (
     <Modal show="true" onHide={onCancel} size="lg">
       <Modal.Header closeButton>
@@ -19,16 +60,9 @@ const PaymentModal = ({
       </Modal.Header>
       <Modal.Body>
         <span>{modalText}</span>
-        <div style={{ marginTop: "16px" }}>
-          <TextInput
-            key={"captionTwo"}
-            name={"captionTwo"}
-            value={"issueText"}
-            message={"data.captionTwo.message"}
-            onChange={(e) => setCardNumber(e.target.value)}
-            label={"Card Number"}
-          />
-        </div>
+        <Form className="signup-form">
+          <ModalForm />
+        </Form>
       </Modal.Body>
       <Modal.Footer>
         <Button
@@ -49,3 +83,16 @@ const PaymentModal = ({
 };
 
 export default PaymentModal;
+
+/*
+        <div style={{ marginTop: "16px" }}>
+          <TextInput
+            key={"captionTwo"}
+            name={"captionTwo"}
+            value={"issueText"}
+            message={"data.captionTwo.message"}
+            onChange={(e) => setCardNumber(e.target.value)}
+            label={"Card Number"}
+          />
+        </div>
+        */

src/Components/SignupPage/SignupPage.js

@@ -32,15 +32,14 @@ const SignupPage = () => {
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
   const [showPaymentModal, setShowPaymentModal] = useState(false);
+
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupfields);
     if (newData !== null) {
       setData(newData);
     }
   };
-  const [cardNumber, setCardNumber] = useState("");
-  const [cardName, setCardName] = useState("");
-  const [cardSecNumber, setCardSecNumber] = useState("");
+
   const validateData = () => {
     const newData = getValidatedFormData(data, signupfields);
     const hasErrors = isFormDataHasErrors(newData);
@@ -48,6 +47,10 @@ const SignupPage = () => {
     return hasErrors ? null : objectMap(({ value }) => value, newData);
   };
 
+  const [cardNumber, setCardNumber] = useState("");
+  const [cardName, setCardName] = useState("");
+  const [cardSecNumber, setCardSecNumber] = useState("");
+
   async function saveUserData(authId, dataValues) {
     const appUserId = uuidv4();
     const firmId = uuidv4();

src/Constants/Fields/PaymentFields.js

@@ -0,0 +1,6 @@
+export const paymentfields = {
+  cardFirstName: { required: true, label: "First Name", maxLength: 45 },
+  cardLastName: { required: true, label: "Last Name", maxLength: 45 },
+  cardNumber: { required: true, label: "Firm", minLength: 2, maxLength: 45 },
+  cardSecNumber: { required: true, label: "Firm", minLength: 2, maxLength: 45 },
+};