Merge pull request #34 from kjannette/stripeInputs3

Stripe inputs3

src/Components/Modals/PaymentModal.js

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import Button from "../../pageElements/Button";
 import Modal from "react-bootstrap/Modal";
 import TextInput from "../../pageElements/TextInput";
@@ -6,12 +5,6 @@ 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";
 import "../../styles/modals.scss";
 
 const PaymentModal = ({
@@ -21,8 +14,9 @@ const PaymentModal = ({
   paymentfields,
   handleChangePaymentInput,
   modalText,
-  handleSignup,
+  handleSignUp,
   setShowPaymentModal,
+  handleSignup,
 }) => {
   const fieldsChunkSize = 2;
 
@@ -32,7 +26,6 @@ const PaymentModal = ({
         <Row key={`row${j}`}>
           {names.map((name, i) => (
             <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-              {console.log("paymentdata, name", paymentData, name)}
               <TextInput
                 name={name}
                 value={paymentData[name].value}
@@ -58,7 +51,7 @@ const PaymentModal = ({
   return (
     <Modal show="true" size="lg">
       <Modal.Header closeButton>
-        <Modal.Title>Enter Payment Card Information</Modal.Title>
+        <Modal.Title>Enter Payment Information</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <div className="payment-modal-text-wrapper">{modalText}</div>

src/Components/SignupPage/SignupPage.js

@@ -62,7 +62,8 @@ const SignupPage = () => {
   };
 
   const validatePaymentData = () => {
-    const newPaymentData = ""; // getValidatedFormData(data, signupfields);
+    console.log("paymentData", paymentData);
+    const newPaymentData = getValidatedFormData(paymentData, paymentfields);
     const hasErrors = isFormDataHasErrors(newPaymentData);
     setPaymentData(newPaymentData);
     return hasErrors ? null : objectMap(({ value }) => value, newPaymentData);
@@ -122,6 +123,7 @@ const SignupPage = () => {
       return;
     }
     */
+
     setShowPaymentModal(true);
   };
 
@@ -131,35 +133,13 @@ const SignupPage = () => {
     // handle failure
   }
 
-  const handleSignUp = async (e) => {
+  const handleSignup = async (e) => {
     e.preventDefault();
     const paymentDataValues = validatePaymentData();
     if (paymentDataValues === null) {
       return;
     }
-    const dataValues = validateData();
-    if (dataValues === null) {
-      return;
-    }
-    setIsBusy(true);
-    const paymentSuccess = "true"; // handleStripeAuthorization(paymentDataValues)
-    if (paymentSuccess) {
-      try {
-        const userCredential = await createUserWithEmailAndPassword(
-          auth,
-          dataValues.email,
-          dataValues.password
-        );
-        const user = userCredential.user;
-        await saveUserData(user.uid, dataValues);
-        navigate("/");
-      } catch (error) {
-        setIsBusy(false);
-        setNotice(
-          error.message || "Sorry, something went wrong. Please try again."
-        );
-      }
-    }
+    console.log("paymentDataValues", paymentDataValues);
   };
 
   return (
@@ -264,7 +244,7 @@ const SignupPage = () => {
           paymentfields={paymentfields}
           setShowPaymentModal={setShowPaymentModal}
           handleChangePaymentInput={handleChangePaymentInput}
-          handleSignUp={handleSignUp}
+          handleSignup={handleSignup}
           modalText={modalText}
         />
       ) : (