more

src/Components/SignupPage/SignupPage.js

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