more

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>

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}
         />
       ) : (
         <></>

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",
   },
 };

src/styles/modals.scss

@@ -76,3 +76,8 @@
 .payment-form {
   width: 740px;
 }
+
+.payment-modal-text-wrapper {
+  margin: 8px 0px 18px 0px;
+  padding-left: 4px;
+}