more

src/Components/SignupPage/SignupPage.js

@@ -10,6 +10,7 @@ import TextInput from "../../pageElements/TextInput";
 import { v4 as uuidv4 } from "uuid";
 import { collection, setDoc, doc } from "firebase/firestore";
 import { splitEvery } from "../../Utils/Array";
+import PaymentModal from "../Modals/PaymentModal";
 import {
   getFormDataDefaults,
   getValidatedFormData,
@@ -30,14 +31,16 @@ const SignupPage = () => {
   const fieldsChunkSize = 2;
   const [isBusy, setIsBusy] = useState(false);
   const [data, setData] = useState(getFormDataDefaults(signupfields));
-
+  const [showPaymentModal, setShowPaymentModal] = useState(false);
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupfields);
     if (newData !== null) {
       setData(newData);
     }
   };
-
+  const [cardNumber, setCardNumber] = useState("");
+  const [cardName, setCardName] = useState("");
+  const [cardSecNumber, setCardSecNumber] = useState("");
   const validateData = () => {
     const newData = getValidatedFormData(data, signupfields);
     const hasErrors = isFormDataHasErrors(newData);
@@ -115,6 +118,14 @@ const SignupPage = () => {
     }
   };
 
+  const handleProceed = () => {
+    setShowPaymentModal(true);
+  };
+
+  const handleCancel = () => {
+    setShowPaymentModal(false);
+  };
+
   const MobileForm = () => {
     return splitEvery(
       Object.keys(signupfields).slice(0, -2),
@@ -219,12 +230,12 @@ const SignupPage = () => {
         </Form>
         <div className="signup-button-box">
           <Button
-            className="primary-button"
+            className="primary-button signup-proceed-button"
             type="button"
             size="lg"
-            onClick={handleSignup}
+            onClick={handleProceed}
             disabled={isBusy}
-            labelText="Create Account"
+            labelText="Proceed to Payment"
           />
           <div className="mt-3">
             <span>
@@ -242,6 +253,20 @@ const SignupPage = () => {
           </>
         )}
       </div>
+      {showPaymentModal ? (
+        <PaymentModal
+          onCancel={handleCancel}
+          cardName={cardName}
+          setCardName={setCardName}
+          cardNumber={cardNumber}
+          setCardNumber={setCardNumber}
+          cardSecNumber={cardSecNumber}
+          setCardSecNumber={setCardSecNumber}
+          onConfirm={handleSignup}
+          buttonLabelText="Signup"
+          modalText="Please enter payment information"
+        />
+      ) : null}
     </div>
   );
 };