more

src/Components/Modals/PaymentModal.js

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import Button from "../../pageElements/Button";
+import Modal from "react-bootstrap/Modal";
+import TextInput from "../../pageElements/TextInput";
+import { db } from "../../firebase";
+
+const PaymentModal = ({
+  onCancel,
+  onConfirm,
+  buttonLabelText,
+  modalText,
+  isBusy,
+  setCardNumber,
+}) => {
+  return (
+    <Modal show="true" onHide={onCancel} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Enter Payment Card Information</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <span>{modalText}</span>
+        <div style={{ marginTop: "16px" }}>
+          <TextInput
+            key={"captionTwo"}
+            name={"captionTwo"}
+            value={"issueText"}
+            message={"data.captionTwo.message"}
+            onChange={(e) => setCardNumber(e.target.value)}
+            label={"Card Number"}
+          />
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          disabled={isBusy}
+          className="secondary-button"
+          onClick={onCancel}
+          labelText="Cancel"
+        />
+        <Button
+          disabled={isBusy}
+          className="primary-button"
+          onClick={onConfirm}
+          labelText={buttonLabelText}
+        />
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default PaymentModal;

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>
   );
 };

src/styles/signup.scss

@@ -43,8 +43,8 @@
   align-items: flex-end;
 }
 
-.signup-btn {
+.signup-proceed-button {
-  width: 150px;
+  width: 160px;
 }
 
 .signup-passw-inputs {