more

src/Components/Modals/PaymentModal.js

@@ -2,8 +2,6 @@ import { useState } from "react";
 import Button from "../../pageElements/Button";
 import Modal from "react-bootstrap/Modal";
 import TextInput from "../../pageElements/TextInput";
-import { db } from "../../firebase";
-
 import { splitEvery } from "../../Utils/Array";
 import Col from "react-bootstrap/Col";
 import Form from "react-bootstrap/Form";
@@ -14,6 +12,7 @@ import {
   handleFormDataChange,
   isFormDataHasErrors,
 } from "../../Utils/Form";
+import "../../styles/modals.scss";
 
 const PaymentModal = ({
   onCancel,
@@ -29,13 +28,11 @@ const PaymentModal = ({
   const fieldsChunkSize = 2;
 
   const ModalForm = () => {
-    return splitEvery(
-      Object.keys(paymentfields).slice(0, -2),
-      fieldsChunkSize
-    ).map((names, j) => (
+    return splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
+      (names, j) => (
         <Row key={`row${j}`}>
           {names.map((name, i) => (
-          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+            <Row key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
               {console.log("paymentdata", paymentdata)}
               <TextInput
                 name={name}
@@ -52,10 +49,11 @@ const PaymentModal = ({
                 values={paymentfields[name].values}
                 disabled={isBusy}
               />
-          </Col>
+            </Row>
           ))}
         </Row>
-    ));
+      )
+    );
   };
 
   return (
@@ -65,7 +63,7 @@ const PaymentModal = ({
       </Modal.Header>
       <Modal.Body>
         <span>{modalText}</span>
-        <Form className="signup-form">
+        <Form className="payment-form">
           <ModalForm />
         </Form>
       </Modal.Body>

src/Components/SignupPage/SignupPage.js

@@ -110,7 +110,9 @@ const SignupPage = () => {
 
   async function handleStripePaymentAuthorization(paymentDataValues) {
     console.log(paymentDataValues);
+    // Stripe API calls, etc
   }
+
   const handleSignup = async (e) => {
     e.preventDefault();
     const paymentDataValues = validatePaymentData();
@@ -145,12 +147,13 @@ const SignupPage = () => {
     */
   };
 
-  const handleProceedToPayent = () => {
+  const handleProceedToPayment = () => {
+    /*
     const dataValues = validateData();
     if (dataValues === null) {
       return;
     }
-
+*/
     setShowPaymentModal(true);
   };
 
@@ -266,7 +269,7 @@ const SignupPage = () => {
             className="primary-button signup-proceed-button"
             type="button"
             size="lg"
-            onClick={handleProceedToPayent}
+            onClick={handleProceedToPayment}
             disabled={isBusy}
             labelText="Proceed to Payment"
           />

src/Constants/Fields/PaymentFields.js

@@ -1,6 +1,16 @@
 export const paymentfields = {
-  cardFirstName: { required: true, label: "First Name", maxLength: 45 },
-  cardLastName: { required: true, label: "Last Name", maxLength: 45 },
-  cardNumber: { required: true, label: "Firm", minLength: 2, maxLength: 45 },
-  cardSecNumber: { required: true, label: "Firm", minLength: 2, maxLength: 45 },
+  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,
+  },
+  cardSecNumber: {
+    required: true,
+    label: "Card CVV Number",
+    minLength: 3,
+    maxLength: 6,
+  },
 };

src/styles/modals.scss

@@ -72,3 +72,7 @@
 .create-modal-input {
   font-weight: 400;
 }
+
+.payment-form {
+  width: 740px;
+}