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,33 +28,32 @@ const PaymentModal = ({
   const fieldsChunkSize = 2;
 
   const ModalForm = () => {
-    return splitEvery(
+    return splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
-      Object.keys(paymentfields).slice(0, -2),
+      (names, j) => (
-      fieldsChunkSize
+        <Row key={`row${j}`}>
-    ).map((names, j) => (
+          {names.map((name, i) => (
-      <Row key={`row${j}`}>
+            <Row key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-        {names.map((name, i) => (
+              {console.log("paymentdata", paymentdata)}
-          <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
+              <TextInput
-            {console.log("paymentdata", paymentdata)}
+                name={name}
-            <TextInput
+                value={paymentdata[name].value}
-              name={name}
+                onChange={(e) => handleChangePaymentInput(e, name)}
-              value={paymentdata[name].value}
+                error={paymentdata[name].error}
-              onChange={(e) => handleChangePaymentInput(e, name)}
+                message={paymentdata[name].message}
-              error={paymentdata[name].error}
+                label={
-              message={paymentdata[name].message}
+                  paymentdata[name].value.length === 0
-              label={
+                    ? paymentfields[name].label
-                paymentdata[name].value.length === 0
+                    : ""
-                  ? paymentfields[name].label
+                }
-                  : ""
+                type={paymentfields[name].type}
-              }
+                values={paymentfields[name].values}
-              type={paymentfields[name].type}
+                disabled={isBusy}
-              values={paymentfields[name].values}
+              />
-              disabled={isBusy}
+            </Row>
-            />
+          ))}
-          </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 },
+  cardFirstName: { required: true, label: "Card - First Name", maxLength: 45 },
-  cardLastName: { required: true, label: "Last Name", maxLength: 45 },
+  cardLastName: { required: true, label: "Card - Last Name", maxLength: 45 },
-  cardNumber: { required: true, label: "Firm", minLength: 2, maxLength: 45 },
+  cardNumber: {
-  cardSecNumber: { required: true, label: "Firm", minLength: 2, maxLength: 45 },
+    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;
+}