From 0345ecbc2051986993d560e4d8b47fe01cb90c4b Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 17:23:10 -0600
Subject: [PATCH 1/7] more

---
 src/Components/SignupPage/SignupPage.js |  4 +++-
 src/Constants/Fields/PaymentFields.js   | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 src/Constants/Fields/PaymentFields.js

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 8990db0..1ae4661 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -17,7 +17,9 @@ import {
   isFormDataHasErrors,
 } from "../../Utils/Form";
 import { objectMap } from "../../Utils/Object";
-import { signupfields } from "../../Constants/Fields/Signupfields";
+import { signupfields } from "../../Constants/Fields/SignupFields";
+import { paymentfields } from "../../Constants/Fields/PaymentFields";
+import PaymentModal from "../Modals/PaymentModal";
 import "../../styles/signup.scss";
 
 const SignupPage = () => {
diff --git a/src/Constants/Fields/PaymentFields.js b/src/Constants/Fields/PaymentFields.js
new file mode 100644
index 0000000..c275444
--- /dev/null
+++ b/src/Constants/Fields/PaymentFields.js
@@ -0,0 +1,16 @@
+export const paymentfields = {
+  cardFirstName: { required: true, label: "Card First Name", maxLength: 45 },
+  cardLastName: { required: true, label: "Card Last Name", maxLength: 45 },
+  cardNumber: {
+    required: true,
+    label: "Card Number",
+    minLength: 16,
+    maxLength: 16,
+  },
+  cardCvvCode: {
+    required: true,
+    label: "Card CVV Number",
+    maxLength: 5,
+    type: "cvv",
+  },
+};

From 7a9feb49077cb350d331356e5e5940c5d0d727c0 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 17:25:31 -0600
Subject: [PATCH 2/7] more

---
 src/Components/SignupPage/SignupPage.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 1ae4661..f11f92a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -88,7 +88,7 @@ const SignupPage = () => {
     }
   }
 
-  const handleSignup = async (e) => {
+  const handleProceedToPayment = (e) => {
     e.preventDefault();
     if (isBusy) {
       return;
@@ -97,6 +97,11 @@ const SignupPage = () => {
     if (dataValues === null) {
       return;
     }
+  };
+
+  const handleSignup = async (e) => {
+    e.preventDefault();
+    const dataValues = validateData();
     setIsBusy(true);
     try {
       const userCredential = await createUserWithEmailAndPassword(

From 46b021c4298c5df98f1bd61f772c4f8798ee186e Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 17:38:39 -0600
Subject: [PATCH 3/7] more

---
 src/Components/Modals/PaymentModal.js   | 28 +++++++++++----------
 src/Components/SignupPage/SignupPage.js | 33 +++++++++++++++++++++----
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index aad7006..87baede 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -15,15 +15,13 @@ import {
 import "../../styles/modals.scss";
 
 const PaymentModal = ({
-  onCancel,
   buttonLabelText,
-  modalText,
   isBusy,
-  handleChangePaymentInput,
-  handleSignup,
+  paymentData,
   paymentfields,
-  paymentdata,
-  setPaymentdata,
+  handleChangePaymentInput,
+  modalText,
+  handleSignup,
 }) => {
   const fieldsChunkSize = 2;
 
@@ -33,15 +31,15 @@ const PaymentModal = ({
         <Row key={`row${j}`}>
           {names.map((name, i) => (
             <Row key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-              {console.log("paymentdata", paymentdata)}
+              {console.log("paymentdata", paymentData)}
               <TextInput
                 name={name}
-                value={paymentdata[name].value}
+                value={paymentData[name].value}
                 onChange={(e) => handleChangePaymentInput(e, name)}
-                error={paymentdata[name].error}
-                message={paymentdata[name].message}
+                error={paymentData[name].error}
+                message={paymentData[name].message}
                 label={
-                  paymentdata[name].value.length === 0
+                  paymentData[name].value.length === 0
                     ? paymentfields[name].label
                     : ""
                 }
@@ -57,7 +55,7 @@ const PaymentModal = ({
   };
 
   return (
-    <Modal show="true" onHide={onCancel} size="lg">
+    <Modal show="true" size="lg">
       <Modal.Header closeButton>
         <Modal.Title>Enter Payment Card Information</Modal.Title>
       </Modal.Header>
@@ -71,7 +69,7 @@ const PaymentModal = ({
         <Button
           disabled={isBusy}
           className="secondary-button"
-          onClick={onCancel}
+          onClick={"onCancel"}
           labelText="Cancel"
         />
         <Button
@@ -86,3 +84,7 @@ const PaymentModal = ({
 };
 
 export default PaymentModal;
+
+/*
+ onHide={onCancel} 
+ */
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index f11f92a..9d6457e 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/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>
   );
 };

From ac7cc4a0790f351d5fd13cf3fd54ca3553201cd7 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 17:50:10 -0600
Subject: [PATCH 4/7] more

---
 src/Components/SignupPage/SignupPage.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 9d6457e..0da275b 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -54,6 +54,13 @@ const SignupPage = () => {
     return hasErrors ? null : objectMap(({ value }) => value, newData);
   };
 
+  const validatePaymentData = () => {
+    const newPaymentData = ""; // getValidatedFormData(data, signupfields);
+    const hasErrors = isFormDataHasErrors(newPaymentData);
+    setPaymentData(newPaymentData);
+    return hasErrors ? null : objectMap(({ value }) => value, newPaymentData);
+  };
+
   async function saveUserData(authId, dataValues) {
     const appUserId = uuidv4();
     const firmId = uuidv4();
@@ -102,11 +109,13 @@ const SignupPage = () => {
     if (isBusy) {
       return;
     }
+    /*
     const dataValues = validateData();
     if (dataValues === null) {
       return;
     }
-    showPaymentModal(true);
+    */
+    setShowPaymentModal(true);
   };
 
   const handleSignUp = async (e) => {

From 0eb744ab76b530825e66e5ecd5858022f515eba7 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 17:53:17 -0600
Subject: [PATCH 5/7] more

---
 src/Components/SignupPage/SignupPage.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 0da275b..5d7b32a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -109,20 +109,28 @@ const SignupPage = () => {
     if (isBusy) {
       return;
     }
-    /*
+
     const dataValues = validateData();
     if (dataValues === null) {
       return;
     }
-    */
+
     setShowPaymentModal(true);
   };
 
+  async function handleStripeAuthorization() {}
+
   const handleSignUp = async (e) => {
     e.preventDefault();
+    const paymentDataValues = validatePaymentData();
+    if (paymentDataValues === null) {
+      return;
+    }
     const dataValues = validateData();
-
-    //const paymentSuccess = handleStripeAuthorization(paymentData)
+    if (dataValues === null) {
+      return;
+    }
+    //const paymentSuccess = handleStripeAuthorization(paymentDataValues)
     setIsBusy(true);
     try {
       const userCredential = await createUserWithEmailAndPassword(

From 670b76a6072964de83a504dcea0b35f8aaa8f677 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 17:57:17 -0600
Subject: [PATCH 6/7] more

---
 src/Components/Modals/PaymentModal.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index 87baede..b183d53 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -22,6 +22,7 @@ const PaymentModal = ({
   handleChangePaymentInput,
   modalText,
   handleSignup,
+  setShowPaymentModal,
 }) => {
   const fieldsChunkSize = 2;
 
@@ -69,7 +70,7 @@ const PaymentModal = ({
         <Button
           disabled={isBusy}
           className="secondary-button"
-          onClick={"onCancel"}
+          onClick={() => setShowPaymentModal(false)}
           labelText="Cancel"
         />
         <Button

From 7b0255374cb9f205c12d28aa1ae82717b46b14b6 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 18:00:10 -0600
Subject: [PATCH 7/7] more

---
 src/Components/SignupPage/SignupPage.js | 40 ++++++++++++++-----------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 5d7b32a..d01d202 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -109,16 +109,18 @@ const SignupPage = () => {
     if (isBusy) {
       return;
     }
-
     const dataValues = validateData();
     if (dataValues === null) {
       return;
     }
-
     setShowPaymentModal(true);
   };
 
-  async function handleStripeAuthorization() {}
+  async function handleStripeAuthorization(paymentDataValues) {
+    //Do calls to Stripe API
+    // if success, return some truthy value or
+    // handleFailure()
+  }
 
   const handleSignUp = async (e) => {
     e.preventDefault();
@@ -130,22 +132,24 @@ const SignupPage = () => {
     if (dataValues === null) {
       return;
     }
-    //const paymentSuccess = handleStripeAuthorization(paymentDataValues)
     setIsBusy(true);
-    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."
-      );
+    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."
+        );
+      }
     }
   };