more

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"
         />