From 372f7ed0ca4e294b674d1e1e18ef03578ceef8e4 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 14:37:12 -0600
Subject: [PATCH] more

---
 src/Components/Modals/PaymentModal.js   | 51 +++++++++++++++++++++++++
 src/Components/SignupPage/SignupPage.js | 35 ++++++++++++++---
 src/styles/signup.scss                  |  4 +-
 3 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 src/Components/Modals/PaymentModal.js

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
new file mode 100644
index 0000000..c86c2a6
--- /dev/null
+++ b/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;
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 6ae52fa..c37bfe1 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/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>
   );
 };
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 2b41d5b..d257aad 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -43,8 +43,8 @@
   align-items: flex-end;
 }
 
-.signup-btn {
-  width: 150px;
+.signup-proceed-button {
+  width: 160px;
 }
 
 .signup-passw-inputs {