more

src/Components/Modals/PaymentModal.js

@@ -3,7 +3,7 @@ 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";
@@ -21,8 +21,10 @@ const PaymentModal = ({
   buttonLabelText,
   modalText,
   isBusy,
-  setCardNumber,
-  handleChangeInput,
+  handleChangePaymentInput,
+  handleSignup,
+  paymentdata,
+  setPaymentdata,
 }) => {
   const fieldsChunkSize = 2;
 
@@ -41,10 +43,10 @@ const PaymentModal = ({
               error={data[name].error}
               message={data[name].message}
               label={
-                data[name].value.length === 0 ? signupfields[name].label : ""
+                data[name].value.length === 0 ? paymentfields[name].label : ""
               }
-              type={signupfields[name].type}
-              values={signupfields[name].values}
+              type={paymentfields[name].type}
+              values={paymentfields[name].values}
               disabled={isBusy}
             />
           </Col>

src/Components/SignupPage/SignupPage.js

@@ -19,6 +19,7 @@ import {
 } from "../../Utils/Form";
 import { objectMap } from "../../Utils/Object";
 import { signupfields } from "../../Constants/Fields/Signupfields";
+import { paymentfields } from "../../Constants/Fields/PaymentFields";
 import "../../styles/signup.scss";
 
 const SignupPage = () => {
@@ -31,6 +32,9 @@ const SignupPage = () => {
   const fieldsChunkSize = 2;
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
+  const [paymentdata, setPaymentdata] = useState(
+    getFormDataDefaults(signupfields)
+  );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
 
   const handleChangeInput = (e, name) => {
@@ -40,6 +44,13 @@ const SignupPage = () => {
     }
   };
 
+  const handleChangePaymentInput = (e, name) => {
+    const newData = handleFormDataChange(e, name, data, signupfields);
+    if (newData !== null) {
+      setData(newData);
+    }
+  };
+
   const validateData = () => {
     const newData = getValidatedFormData(data, signupfields);
     const hasErrors = isFormDataHasErrors(newData);
@@ -259,13 +270,10 @@ const SignupPage = () => {
       {showPaymentModal ? (
         <PaymentModal
           onCancel={handleCancel}
-          cardName={cardName}
-          setCardName={setCardName}
-          cardNumber={cardNumber}
-          setCardNumber={setCardNumber}
-          cardSecNumber={cardSecNumber}
-          setCardSecNumber={setCardSecNumber}
-          onConfirm={handleSignup}
+          handleChangePaymentInput={handleChangePaymentInput}
+          handleSignup={handleSignup}
+          paymentdata={paymentdata}
+          setPaymentdata={setPaymentdata}
           buttonLabelText="Signup"
           modalText="Please enter payment information"
         />