more
This commit is contained in:
@@ -13,22 +13,21 @@ const PaymentModal = ({
|
|||||||
paymentData,
|
paymentData,
|
||||||
paymentfields,
|
paymentfields,
|
||||||
handleChangePaymentInput,
|
handleChangePaymentInput,
|
||||||
modalText,
|
orderSummary,
|
||||||
handleSignUp,
|
handleSignUp,
|
||||||
setShowPaymentModal,
|
setShowPaymentModal,
|
||||||
handleSignup,
|
handleSignup,
|
||||||
selectedPlan,
|
selectedPlan,
|
||||||
isAnnual,
|
isAnnual,
|
||||||
|
fieldsChunkSize,
|
||||||
}) => {
|
}) => {
|
||||||
const fieldsChunkSize = 2;
|
|
||||||
console.log("***", selectedPlan, isAnnual);
|
|
||||||
return (
|
return (
|
||||||
<Modal show="true" size="lg">
|
<Modal show="true" size="lg">
|
||||||
<Modal.Header closeButton>
|
<Modal.Header closeButton>
|
||||||
<Modal.Title>Enter Payment Information</Modal.Title>
|
<Modal.Title>Enter Payment Information</Modal.Title>
|
||||||
</Modal.Header>
|
</Modal.Header>
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
<div className="payment-modal-text-wrapper">{modalText}</div>
|
<div className="payment-modal-text-wrapper">{orderSummary.plan}</div>
|
||||||
<Form className="payment-form">
|
<Form className="payment-form">
|
||||||
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
|
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
|
||||||
(names, j) => (
|
(names, j) => (
|
||||||
|
|||||||
@@ -42,7 +42,6 @@ const SignupPage = () => {
|
|||||||
const [activeRadioOption, setActiveRadioOption] = useState("partner");
|
const [activeRadioOption, setActiveRadioOption] = useState("partner");
|
||||||
const [selectedPlan, setSelectedPlan] = useState([{}]);
|
const [selectedPlan, setSelectedPlan] = useState([{}]);
|
||||||
const [isAnnual, setIsAnnual] = useState(false);
|
const [isAnnual, setIsAnnual] = useState(false);
|
||||||
// Could also go in App.js if needed in the future
|
|
||||||
const stripe = new Stripe(stripeApiKey);
|
const stripe = new Stripe(stripeApiKey);
|
||||||
const apiUrl =
|
const apiUrl =
|
||||||
process.env.NODE_ENV === "development"
|
process.env.NODE_ENV === "development"
|
||||||
@@ -50,7 +49,7 @@ const SignupPage = () => {
|
|||||||
: process.env.REACT_APP_API_PROD;
|
: process.env.REACT_APP_API_PROD;
|
||||||
const [showAddAccount, setShowAddAccount] = useState(false);
|
const [showAddAccount, setShowAddAccount] = useState(false);
|
||||||
const [numberOfAccountsToAdd, setNumberOfAccountsToAdd] = useState();
|
const [numberOfAccountsToAdd, setNumberOfAccountsToAdd] = useState();
|
||||||
const modalText = "MAYBE PUT TOTAL HERE";
|
const orderSummary = { plan: selectedPlan, price: 1 };
|
||||||
|
|
||||||
const handleChangeInput = (e, name) => {
|
const handleChangeInput = (e, name) => {
|
||||||
const newData = handleFormDataChange(e, name, data, signupFields);
|
const newData = handleFormDataChange(e, name, data, signupFields);
|
||||||
@@ -85,15 +84,18 @@ const SignupPage = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
setSelectedPlan(tempPlan);
|
setSelectedPlan(tempPlan);
|
||||||
|
console.log("selectedPlan", selectedPlan);
|
||||||
setActiveRadioOption(tempPlan[0].value);
|
setActiveRadioOption(tempPlan[0].value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const vals = [
|
const vals = [
|
||||||
[1, 2, 3, 4, 5, 6, 7, 8],
|
[1, 2, 3, 4, 5, 6, 7, 8],
|
||||||
[1, 2],
|
[1, 2],
|
||||||
];
|
];
|
||||||
|
const selectAdditionalAccountValues =
|
||||||
|
selectedPlan[0].value === "partner" ? vals[1] : vals[0];
|
||||||
|
|
||||||
const selectValues = selectedPlan[0].value === "partner" ? vals[1] : vals[0];
|
const validateUserData = () => {
|
||||||
const validateData = () => {
|
|
||||||
const newData = getValidatedFormData(data, signupFields);
|
const newData = getValidatedFormData(data, signupFields);
|
||||||
const hasErrors = isFormDataHasErrors(newData);
|
const hasErrors = isFormDataHasErrors(newData);
|
||||||
setData(newData);
|
setData(newData);
|
||||||
@@ -107,10 +109,53 @@ const SignupPage = () => {
|
|||||||
return hasErrors ? null : objectMap(({ value }) => value, newPaymentData);
|
return hasErrors ? null : objectMap(({ value }) => value, newPaymentData);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
async function saveLeadData(dataValues) {
|
||||||
|
const signupId = uuidv4();
|
||||||
|
const {
|
||||||
|
firstName,
|
||||||
|
lastName,
|
||||||
|
firm,
|
||||||
|
telephone,
|
||||||
|
streetAddress,
|
||||||
|
city,
|
||||||
|
state,
|
||||||
|
zipCode,
|
||||||
|
barNumber,
|
||||||
|
practiceArea,
|
||||||
|
email,
|
||||||
|
} = dataValues;
|
||||||
|
|
||||||
|
const userData = {
|
||||||
|
firstName,
|
||||||
|
lastName,
|
||||||
|
firm,
|
||||||
|
telephone,
|
||||||
|
streetAddress,
|
||||||
|
city,
|
||||||
|
state,
|
||||||
|
zipCode,
|
||||||
|
barNumber,
|
||||||
|
practiceArea,
|
||||||
|
email,
|
||||||
|
signupId,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const collecRef = collection(db, "incompleteSignups");
|
||||||
|
await setDoc(doc(collecRef, `${signupId}`), userData);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`Error saving new user to db: ${error}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function saveUserData(authId, dataValues) {
|
async function saveUserData(authId, dataValues) {
|
||||||
const appUserId = uuidv4();
|
const appUserId = uuidv4();
|
||||||
const firmId = uuidv4();
|
const firmId = uuidv4();
|
||||||
const fbAuthUid = authId;
|
const fbAuthUid = authId;
|
||||||
|
const plan = selectedPlan;
|
||||||
|
const docsAllowed =
|
||||||
|
plan === "associate" ? 1 : plan === "partner" ? 3 : "unlimited";
|
||||||
|
const docsGenerated = 0;
|
||||||
const {
|
const {
|
||||||
firstName,
|
firstName,
|
||||||
lastName,
|
lastName,
|
||||||
@@ -129,6 +174,8 @@ const SignupPage = () => {
|
|||||||
const customerId = dataValues?.customerId;
|
const customerId = dataValues?.customerId;
|
||||||
|
|
||||||
const userData = {
|
const userData = {
|
||||||
|
docsAllowed,
|
||||||
|
docsGenerated,
|
||||||
appUserId,
|
appUserId,
|
||||||
fbAuthUid,
|
fbAuthUid,
|
||||||
firmId,
|
firmId,
|
||||||
@@ -154,7 +201,7 @@ const SignupPage = () => {
|
|||||||
console.log(`Error saving new user to db: ${error}`);
|
console.log(`Error saving new user to db: ${error}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log("activeRadioOption", activeRadioOption);
|
|
||||||
const handleProceedToPayment = (e) => {
|
const handleProceedToPayment = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
@@ -168,15 +215,14 @@ const SignupPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
const dataValues = validateData();
|
const userDataValues = validateUserData();
|
||||||
if (dataValues === null) {
|
if (dataValues === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
const dataValues = {
|
const userDataValues = {
|
||||||
barNumber: "232323",
|
barNumber: "232323",
|
||||||
city: "broolyn",
|
city: "broolyn",
|
||||||
confirmPassword: "123344556",
|
|
||||||
email: "j@s.com",
|
email: "j@s.com",
|
||||||
firm: "asdf",
|
firm: "asdf",
|
||||||
firstName: "ghghg",
|
firstName: "ghghg",
|
||||||
@@ -188,13 +234,14 @@ const SignupPage = () => {
|
|||||||
telephone: "(313) 555-5555",
|
telephone: "(313) 555-5555",
|
||||||
zipCode: "12345",
|
zipCode: "12345",
|
||||||
};
|
};
|
||||||
|
saveLeadData(userDataValues);
|
||||||
setShowSelectPlan(!showSelectPlan);
|
setShowSelectPlan(!showSelectPlan);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleToggle = () => {
|
const handleToggle = () => {
|
||||||
setIsAnnual(!isAnnual);
|
setIsAnnual(!isAnnual);
|
||||||
console.log("isAnnual", isAnnual);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAddAccounts = () => {
|
const handleAddAccounts = () => {
|
||||||
console.log("selectedPlan", selectedPlan);
|
console.log("selectedPlan", selectedPlan);
|
||||||
setShowAddAccount(!showAddAccount);
|
setShowAddAccount(!showAddAccount);
|
||||||
@@ -209,7 +256,7 @@ const SignupPage = () => {
|
|||||||
setShowAddAccount(!showAddAccount);
|
setShowAddAccount(!showAddAccount);
|
||||||
};
|
};
|
||||||
|
|
||||||
//STRIPE PAYMRNT **********************************************************************
|
// ******************** STRIPE PAY API CALL ******************** //
|
||||||
async function handleStripeAuthorization(
|
async function handleStripeAuthorization(
|
||||||
user,
|
user,
|
||||||
paymentDataValues,
|
paymentDataValues,
|
||||||
@@ -247,8 +294,7 @@ const SignupPage = () => {
|
|||||||
isAnnual: isAnnual,
|
isAnnual: isAnnual,
|
||||||
customerData: {
|
customerData: {
|
||||||
email: customerDataValues.email,
|
email: customerDataValues.email,
|
||||||
name:
|
name: `${customerDataValues.firstName} ${customerDataValues.lastName}`,
|
||||||
customerDataValues.firstName + " " + customerDataValues.lastName,
|
|
||||||
},
|
},
|
||||||
token,
|
token,
|
||||||
}),
|
}),
|
||||||
@@ -276,6 +322,7 @@ const SignupPage = () => {
|
|||||||
customerId,
|
customerId,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
// ******************** END STRIPE PAY API CALL ******************** //
|
||||||
|
|
||||||
const handleSignup = async (e) => {
|
const handleSignup = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@@ -283,8 +330,8 @@ const SignupPage = () => {
|
|||||||
if (paymentDataValues === null) {
|
if (paymentDataValues === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//
|
|
||||||
let dataValues = validateData();
|
let dataValues = validateUserData();
|
||||||
if (dataValues === null) {
|
if (dataValues === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -299,6 +346,7 @@ const SignupPage = () => {
|
|||||||
dataValues.email,
|
dataValues.email,
|
||||||
dataValues.password
|
dataValues.password
|
||||||
);
|
);
|
||||||
|
|
||||||
const user = userCredential.user;
|
const user = userCredential.user;
|
||||||
|
|
||||||
const paymentResponse = await handleStripeAuthorization(
|
const paymentResponse = await handleStripeAuthorization(
|
||||||
@@ -308,13 +356,11 @@ const SignupPage = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
if (paymentResponse === false) {
|
if (paymentResponse === false) {
|
||||||
// handle payment failure
|
|
||||||
setIsBusy(false);
|
setIsBusy(false);
|
||||||
setNotice("Sorry, something went wrong. Please try again.");
|
setNotice("Sorry, something went wrong. Please try again.");
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
dataValues = { ...dataValues, ...paymentResponse };
|
dataValues = { ...dataValues, ...paymentResponse };
|
||||||
|
|
||||||
await saveUserData(user.uid, dataValues);
|
await saveUserData(user.uid, dataValues);
|
||||||
navigate("/");
|
navigate("/");
|
||||||
}
|
}
|
||||||
@@ -368,7 +414,7 @@ const SignupPage = () => {
|
|||||||
))}
|
))}
|
||||||
</Row>
|
</Row>
|
||||||
))}
|
))}
|
||||||
<Row style={{ width: "80%" }}>
|
<Row>
|
||||||
<Col className="mb-3">
|
<Col className="mb-3">
|
||||||
<TextInput
|
<TextInput
|
||||||
id="signupPassword"
|
id="signupPassword"
|
||||||
@@ -386,7 +432,7 @@ const SignupPage = () => {
|
|||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row style={{ width: "80%" }}>
|
<Row>
|
||||||
<Col className="mb-3">
|
<Col className="mb-3">
|
||||||
<TextInput
|
<TextInput
|
||||||
id="confirmPassword"
|
id="confirmPassword"
|
||||||
@@ -489,7 +535,7 @@ const SignupPage = () => {
|
|||||||
className={`select-option`}
|
className={`select-option`}
|
||||||
value=""
|
value=""
|
||||||
></option>
|
></option>
|
||||||
{selectValues.map((item, i) => (
|
{selectAdditionalAccountValues.map((item, i) => (
|
||||||
<option
|
<option
|
||||||
id="ddlProducts"
|
id="ddlProducts"
|
||||||
className={`select-option`}
|
className={`select-option`}
|
||||||
@@ -562,11 +608,13 @@ const SignupPage = () => {
|
|||||||
setShowPaymentModal={setShowPaymentModal}
|
setShowPaymentModal={setShowPaymentModal}
|
||||||
handleChangePaymentInput={handleChangePaymentInput}
|
handleChangePaymentInput={handleChangePaymentInput}
|
||||||
handleSignup={handleSignup}
|
handleSignup={handleSignup}
|
||||||
modalText={modalText}
|
orderSummary={orderSummary}
|
||||||
notice={notice}
|
notice={notice}
|
||||||
setNotice={setNotice}
|
setNotice={setNotice}
|
||||||
selectedPlan={selectedPlan}
|
selectedPlan={selectedPlan}
|
||||||
isAnnual={isAnnual}
|
isAnnual={isAnnual}
|
||||||
|
numberOfAccountsToAdd={numberOfAccountsToAdd}
|
||||||
|
fieldsChunkSize={2}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
|
|||||||
Reference in New Issue
Block a user