more

src/Components/Modals/PaymentModal.js

@@ -2,8 +2,6 @@ import { useState } from "react";
 import Button from "../../pageElements/Button";
 import Modal from "react-bootstrap/Modal";
 import TextInput from "../../pageElements/TextInput";
-import { db } from "../../firebase";
-
 import { splitEvery } from "../../Utils/Array";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
@@ -14,6 +12,7 @@ import {
   handleFormDataChange,
   isFormDataHasErrors,
 } from "../../Utils/Form";
+import "../../styles/modals.scss";
 
 const PaymentModal = ({
   onCancel,
@@ -29,33 +28,32 @@ const PaymentModal = ({
   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">
-            {console.log("paymentdata", paymentdata)}
-            <TextInput
-              name={name}
-              value={paymentdata[name].value}
-              onChange={(e) => handleChangePaymentInput(e, name)}
-              error={paymentdata[name].error}
-              message={paymentdata[name].message}
-              label={
-                paymentdata[name].value.length === 0
-                  ? paymentfields[name].label
-                  : ""
-              }
-              type={paymentfields[name].type}
-              values={paymentfields[name].values}
-              disabled={isBusy}
-            />
-          </Col>
-        ))}
-      </Row>
-    ));
+    return splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
+      (names, j) => (
+        <Row key={`row${j}`}>
+          {names.map((name, i) => (
+            <Row key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+              {console.log("paymentdata", paymentdata)}
+              <TextInput
+                name={name}
+                value={paymentdata[name].value}
+                onChange={(e) => handleChangePaymentInput(e, name)}
+                error={paymentdata[name].error}
+                message={paymentdata[name].message}
+                label={
+                  paymentdata[name].value.length === 0
+                    ? paymentfields[name].label
+                    : ""
+                }
+                type={paymentfields[name].type}
+                values={paymentfields[name].values}
+                disabled={isBusy}
+              />
+            </Row>
+          ))}
+        </Row>
+      )
+    );
   };
 
   return (
@@ -65,7 +63,7 @@ const PaymentModal = ({
       </Modal.Header>
       <Modal.Body>
         <span>{modalText}</span>
-        <Form className="signup-form">
+        <Form className="payment-form">
           <ModalForm />
         </Form>
       </Modal.Body>