diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index ed3aed3..aad7006 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/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(
- Object.keys(paymentfields).slice(0, -2),
- fieldsChunkSize
- ).map((names, j) => (
-
- {names.map((name, i) => (
-
- {console.log("paymentdata", paymentdata)}
- handleChangePaymentInput(e, name)}
- error={paymentdata[name].error}
- message={paymentdata[name].message}
- label={
- paymentdata[name].value.length === 0
- ? paymentfields[name].label
- : ""
- }
- type={paymentfields[name].type}
- values={paymentfields[name].values}
- disabled={isBusy}
- />
-
- ))}
-
- ));
+ return splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
+ (names, j) => (
+
+ {names.map((name, i) => (
+
+ {console.log("paymentdata", paymentdata)}
+ handleChangePaymentInput(e, name)}
+ error={paymentdata[name].error}
+ message={paymentdata[name].message}
+ label={
+ paymentdata[name].value.length === 0
+ ? paymentfields[name].label
+ : ""
+ }
+ type={paymentfields[name].type}
+ values={paymentfields[name].values}
+ disabled={isBusy}
+ />
+
+ ))}
+
+ )
+ );
};
return (
@@ -65,7 +63,7 @@ const PaymentModal = ({
{modalText}
-
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 1d17636..cc690ab 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/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"
/>
diff --git a/src/Constants/Fields/PaymentFields.js b/src/Constants/Fields/PaymentFields.js
index fb97861..24cd328 100644
--- a/src/Constants/Fields/PaymentFields.js
+++ b/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,
+ },
};
diff --git a/src/styles/modals.scss b/src/styles/modals.scss
index 468dfbd..eb390f5 100644
--- a/src/styles/modals.scss
+++ b/src/styles/modals.scss
@@ -72,3 +72,7 @@
.create-modal-input {
font-weight: 400;
}
+
+.payment-form {
+ width: 740px;
+}