This commit is contained in:
Kenneth Jannette
2024-01-28 14:44:54 -06:00
parent 3d31d39bf0
commit 393f795745
2 changed files with 71 additions and 24 deletions

View File

@@ -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) => (

View File

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