more

src/Components/SignupPage/SignupPage.js

@@ -25,11 +25,13 @@ import "../../styles/signup.scss";
 const SignupPage = () => {
   const navigate = useNavigate();
   const [notice, setNotice] = useState("");
-
   const fieldsChunkSize = 2;
-
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
+  const [paymentData, setPaymentData] = useState(
+    getFormDataDefaults(paymentfields)
+  );
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupfields);
@@ -38,6 +40,13 @@ const SignupPage = () => {
     }
   };
 
+  const handleChangePaymentInput = (e, name) => {
+    const newData = handleFormDataChange(e, name, data, paymentfields);
+    if (newData !== null) {
+      setPaymentData(newData);
+    }
+  };
+
   const validateData = () => {
     const newData = getValidatedFormData(data, signupfields);
     const hasErrors = isFormDataHasErrors(newData);
@@ -97,11 +106,14 @@ const SignupPage = () => {
     if (dataValues === null) {
       return;
     }
+    showPaymentModal(true);
   };
 
-  const handleSignup = async (e) => {
+  const handleSignUp = async (e) => {
     e.preventDefault();
     const dataValues = validateData();
+
+    //const paymentSuccess = handleStripeAuthorization(paymentData)
     setIsBusy(true);
     try {
       const userCredential = await createUserWithEmailAndPassword(
@@ -195,9 +207,9 @@ const SignupPage = () => {
             className="primary-button"
             type="button"
             size="lg"
-            onClick={handleSignup}
+            onClick={handleProceedToPayment}
             disabled={isBusy}
-            labelText="Create Account"
+            labelText="Proceed to Payment"
           />
           <div className="mt-3">
             <span>
@@ -215,6 +227,17 @@ const SignupPage = () => {
           </>
         )}
       </div>
+      {showPaymentModal ? (
+        <PaymentModal
+          paymentData={paymentData}
+          paymentfields={paymentfields}
+          setShowPaymentModal={setShowPaymentModal}
+          handleChangePaymentInput={handleChangePaymentInput}
+          handleSignUp={handleSignUp}
+        />
+      ) : (
+        <></>
+      )}
     </div>
   );
 };