From 86fef9c5a0ff1524c0a86d1d074201cf6bcd4fc6 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 18:17:47 -0600
Subject: [PATCH 1/4] more

---
 src/Components/SignupPage/SignupPage.js | 4 ++--
 src/styles/signup.scss                  | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index d01d202..c2c088f 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -225,7 +225,7 @@ const SignupPage = () => {
         </Form>
         <div className="signup-button-box">
           <Button
-            className="primary-button"
+            className="primary-button signup-proceed"
             type="button"
             size="lg"
             onClick={handleProceedToPayment}
@@ -234,7 +234,7 @@ const SignupPage = () => {
           />
           <div className="mt-3">
             <span>
-              <Link to="/">Return to login</Link>
+              <Link to="/login">Go to login</Link>
             </span>
           </div>
         </div>
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index cf3ac59..5fbd148 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -42,6 +42,7 @@
   flex-direction: column;
   align-items: flex-end;
 }
-.signup-btn {
-  width: 150px;
+
+.signup-proceed {
+  width: 160px;
 }

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

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

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index c2c088f..d0a4566 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -41,9 +41,9 @@ const SignupPage = () => {
   };
 
   const handleChangePaymentInput = (e, name) => {
-    const newData = handleFormDataChange(e, name, data, paymentfields);
-    if (newData !== null) {
-      setPaymentData(newData);
+    const newPaymentData = handleFormDataChange(e, name, data, paymentfields);
+    if (newPaymentData !== null) {
+      setPaymentData(newPaymentData);
     }
   };
 
@@ -117,9 +117,9 @@ const SignupPage = () => {
   };
 
   async function handleStripeAuthorization(paymentDataValues) {
-    //Do calls to Stripe API
+    // Do: calls to Stripe API
     // if success, return some truthy value or
-    // handleFailure()
+    // handle failure
   }
 
   const handleSignUp = async (e) => {

From 38a988e420f13c9ca4e0de26a8cd718165cf493a Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Fri, 19 Jan 2024 18:22:35 -0600
Subject: [PATCH 3/4] more

---
 src/Components/Modals/PaymentModal.js   | 6 +++---
 src/Components/SignupPage/SignupPage.js | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index b183d53..c15547f 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -31,7 +31,7 @@ const PaymentModal = ({
       (names, j) => (
         <Row key={`row${j}`}>
           {names.map((name, i) => (
-            <Row key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+            <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
               {console.log("paymentdata", paymentData)}
               <TextInput
                 name={name}
@@ -48,7 +48,7 @@ const PaymentModal = ({
                 values={paymentfields[name].values}
                 disabled={isBusy}
               />
-            </Row>
+            </Col>
           ))}
         </Row>
       )
@@ -77,7 +77,7 @@ const PaymentModal = ({
           disabled={isBusy}
           className="primary-button"
           onClick={handleSignup}
-          labelText={buttonLabelText}
+          labelText="Signup"
         />
       </Modal.Footer>
     </Modal>
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index d0a4566..c8076dc 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -106,6 +106,7 @@ const SignupPage = () => {
 
   const handleProceedToPayment = (e) => {
     e.preventDefault();
+    /*
     if (isBusy) {
       return;
     }
@@ -113,6 +114,7 @@ const SignupPage = () => {
     if (dataValues === null) {
       return;
     }
+    */
     setShowPaymentModal(true);
   };
 

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

---
 src/Components/Modals/PaymentModal.js   |  4 ++--
 src/Components/SignupPage/SignupPage.js | 11 ++++++++++-
 src/Constants/Fields/PaymentFields.js   | 17 ++++++++++++++---
 src/styles/modals.scss                  |  5 +++++
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index c15547f..df0c842 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -32,7 +32,7 @@ const PaymentModal = ({
         <Row key={`row${j}`}>
           {names.map((name, i) => (
             <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-              {console.log("paymentdata", paymentData)}
+              {console.log("paymentdata, name", paymentData, name)}
               <TextInput
                 name={name}
                 value={paymentData[name].value}
@@ -61,7 +61,7 @@ const PaymentModal = ({
         <Modal.Title>Enter Payment Card Information</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <span>{modalText}</span>
+        <div className="payment-modal-text-wrapper">{modalText}</div>
         <Form className="payment-form">
           <ModalForm />
         </Form>
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index c8076dc..02df9d7 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -32,6 +32,7 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const modalText = "Description of monthly and annual subscriptions";
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupfields);
@@ -41,7 +42,13 @@ const SignupPage = () => {
   };
 
   const handleChangePaymentInput = (e, name) => {
-    const newPaymentData = handleFormDataChange(e, name, data, paymentfields);
+    console.log("e, name", e, name);
+    const newPaymentData = handleFormDataChange(
+      e,
+      name,
+      paymentData,
+      paymentfields
+    );
     if (newPaymentData !== null) {
       setPaymentData(newPaymentData);
     }
@@ -169,6 +176,7 @@ const SignupPage = () => {
             <Row key={`row${j}`}>
               {names.map((name, i) => (
                 <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+                  {console.log("data, name", data, name)}
                   <TextInput
                     name={name}
                     value={data[name].value}
@@ -257,6 +265,7 @@ const SignupPage = () => {
           setShowPaymentModal={setShowPaymentModal}
           handleChangePaymentInput={handleChangePaymentInput}
           handleSignUp={handleSignUp}
+          modalText={modalText}
         />
       ) : (
         <></>
diff --git a/src/Constants/Fields/PaymentFields.js b/src/Constants/Fields/PaymentFields.js
index c275444..62461f7 100644
--- a/src/Constants/Fields/PaymentFields.js
+++ b/src/Constants/Fields/PaymentFields.js
@@ -1,16 +1,27 @@
 export const paymentfields = {
-  cardFirstName: { required: true, label: "Card First Name", maxLength: 45 },
-  cardLastName: { required: true, label: "Card Last Name", maxLength: 45 },
+  cardFirstName: {
+    required: true,
+    label: "Card First Name",
+    maxLength: 45,
+    type: "cardFirstName",
+  },
+  cardLastName: {
+    required: true,
+    label: "Card Last Name",
+    maxLength: 45,
+    type: "cardLastName",
+  },
   cardNumber: {
     required: true,
     label: "Card Number",
     minLength: 16,
     maxLength: 16,
+    type: "cardNumber",
   },
   cardCvvCode: {
     required: true,
     label: "Card CVV Number",
     maxLength: 5,
-    type: "cvv",
+    type: "cardCvvCode",
   },
 };
diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index eb390f5..fcdcad9 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -76,3 +76,8 @@
 .payment-form {
   width: 740px;
 }
+
+.payment-modal-text-wrapper {
+  margin: 8px 0px 18px 0px;
+  padding-left: 4px;
+}