Merge pull request #108 from kjannette/addOfCounsel

Add of counsel

src/Components/Modals/PaymentModal.js

@@ -21,8 +21,6 @@ const PaymentModal = ({
   fieldsChunkSize,
   numberOfAccountsToAdd,
 }) => {
-  const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
-
   const monthlySubscriptionPriceToday = selectedPlan[0].pricing[0].amount;
   const annualSubscriptionPriceToday = selectedPlan[0].pricing[1].amount * 12;
 
@@ -46,12 +44,28 @@ const PaymentModal = ({
     (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
 
   const planName = selectedPlan[0].name ? selectedPlan[0].name : null;
-  const billingPeriod = isAnnual ? "Annually" : "Monthly";
+  const planValue = selectedPlan[0].value ? selectedPlan[0].value : null;
-  const amountToday = isAnnual
+  const billingPeriod =
+    planValue === "ofCounsel"
+      ? "Single Purchase"
+      : isAnnual
+      ? "Annually"
+      : "Monthly";
+  const amountToday =
+    planValue === "ofCounsel"
+      ? 59
+      : isAnnual
       ? annualSubscriptionPriceToday
       : monthlySubscriptionPriceToday;
 
-  const totalToday = amountToday + extraAccountsPrice;
+  const totalToday =
+    planValue === "ofCounsel" ? 59 : amountToday + extraAccountsPrice;
+
+  const isCounsel = planValue === "ofCounsel" ? true : false;
+  const handleSignupClick = () => {
+    //clear fields
+    handleSignup();
+  };
 
   return (
     <Modal show="true" size="lg">
@@ -92,7 +106,7 @@ const PaymentModal = ({
               <div className="paymodal-summary-right">Total today:</div>
               <div className="paymodal-summary-left">${totalToday}</div>
             </div>
-            {isAnnual ? (
+            {isAnnual && !isCounsel ? (
               <div className="payment-modal-text-wrapper">
                 <div className="paymodal-summary-right"></div>
                 <div className="paymodal-summary-left-bonus">
@@ -159,7 +173,7 @@ const PaymentModal = ({
         <Button
           disabled={isBusy}
           className="primary-button"
-          onClick={handleSignup}
+          onClick={handleSignupClick}
           labelText="Signup"
         />
       </Modal.Footer>
@@ -168,15 +182,3 @@ const PaymentModal = ({
 };
 
 export default PaymentModal;
-
-/*
-  const tempExtraAccountsPrice = isAnnual
-    ? additionalAccountsAnnualPriceToday
-    : additionalAccountsMonthlyPriceToday;
-
-  const extraAccountsPrice =
-    tempExtraAccountsPrice === NaN || tempExtraAccountsPrice === undefined
-      ? 0
-      : 0;
-      
-  */

src/Components/Navigation/Navbar.js

@@ -63,7 +63,6 @@ const NavbarElement = (props) => {
 
   function packUpAndLeave(link) {
     navToggle();
-
     handleClick(link);
   }
 

src/Components/SignupPage/SignupPage.js

@@ -45,12 +45,12 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
-
+  /*
   const [showSelectPlan, setShowSelectPlan] = useState(
     isUpgrade ? true : false
   );
-
+*/
-  //const [showSelectPlan, setShowSelectPlan] = useState(true);
+  const [showSelectPlan, setShowSelectPlan] = useState(true);
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
   const stripe = new Stripe(stripeApiKey);
@@ -65,6 +65,7 @@ const SignupPage = () => {
   const [isAnnual, setIsAnnual] = useState(1);
   const [valX, setValX] = useState(1);
   const [valY, setValY] = useState(4);
+  const userAgent = window.navigator.userAgent;
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -205,7 +206,6 @@ const SignupPage = () => {
     const fbAuthUid = authId;
     let plan = selectedPlan;
     let docsAllowedPerMonth;
-
     if (isPromotionalMebership === true) {
       docsAllowedPerMonth = 1;
       subscriptionId = uuidv4();
@@ -275,7 +275,6 @@ const SignupPage = () => {
   };
 
   const handleAdd = () => {
-    //add accounts, close section
     setShowAddAccount(!showAddAccount);
     setShowPaymentModal(true);
   };
@@ -347,9 +346,34 @@ const SignupPage = () => {
     });
 
     const type = selectedPlan[0].value ? selectedPlan[0].value : null;
-    const tempAnnual = isAnnual === 1 ? true : false;
+    const tempAnnual =
+      type === "ofCounsel" ? false : isAnnual === 1 ? true : false;
+
     try {
-      const response = await fetch(`${apiUrl}/create-subscription`, {
+      let response;
+      let data;
+
+      if (type === "ofCounsel") {
+        response = await fetch(`${apiUrl}/new-payment-intent`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "User-Agent": userAgent,
+          },
+          body: JSON.stringify({
+            planType: type,
+            additionalAccounts: 0,
+            isAnnual: false,
+            customerData: {
+              email: customerDataValues.email,
+              name: `${customerDataValues.firstName} ${customerDataValues.lastName}`,
+            },
+            token,
+          }),
+        });
+        data = await response.json();
+      } else {
+        response = await fetch(`${apiUrl}/create-subscription`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -365,12 +389,8 @@ const SignupPage = () => {
             token,
           }),
         });
-
+        data = await response.json();
-      const data = await response.json();
+      }
-
-      //subscriptionId = response.subscriptionId;
-      //customerId = response.customerId;
-
       return {
         data,
       };
@@ -379,11 +399,9 @@ const SignupPage = () => {
       return error;
     }
   }
+
   // ******************** END STRIPE PAYMENT API CALL ******************** //
-
   const handleSignup = async (e) => {
-    e.preventDefault();
-
     const paymentDataValues = validatePaymentData();
     if (paymentDataValues === null) {
       return;
@@ -406,7 +424,7 @@ const SignupPage = () => {
           paymentDataValues,
           dataValues
         );
-
+        console.log("data returned from handleStipeAuth", data);
         const customerId = data?.data?.customerId;
         const subscriptionCreated = data?.data?.subscriptionCreated;
         const subscriptionPeriodStart = data?.data?.subscriptionPeriodStart;
@@ -437,12 +455,11 @@ const SignupPage = () => {
             subscriptionId,
             isPromotionalMebership
           );
-
           setIsBusy(false);
           navigate("/dashboard");
         }
       } catch (error) {
-        console.log("Error handling request", error, error.message);
+        console.log("Error handling request", error);
         setIsBusy(false);
         setNotice("Sorry, something went wrong. Please try again.");
       }
@@ -625,6 +642,9 @@ const SignupPage = () => {
               <h5 className="signup-subheader-text">
                 Select a subscription plan
               </h5>
+              <p className="subscribe-header-sub">
+                ← Click left/right for more options →
+              </p>
             </div>
             <div className="plan-header-left">
               <div className="select-toggle-box">

src/Constants/Fields/RadioFields.js

@@ -4,16 +4,17 @@ export const signupRadioFields = [
     label: "Of Counsel",
     value: "ofCounsel",
     description: [
-      "One document/one-time fee",
+      "Single document/one-time fee",
-      "Documents conform with state rules",
       "Intellidraft AI - downloadable document in minutes",
+      "Documents formatted for jurisdiction",
       "24/7 support",
     ],
     details: "",
     docsAllowedPerMonth: 1,
     pricing: [
-      { type: "monthly", amount: 59 },
+      { type: "one-time", amount: 59 },
       { type: "annDiscount", amount: 59 },
+      { type: "additionalAccount", amount: 0 },
     ],
   },
   {
@@ -22,9 +23,9 @@ export const signupRadioFields = [
     value: "associate",
     description: [
       "1 document per month",
-      "Carryover 1 unused document each subscription period",
-      "Documents conform with state rules",
       "Intellidraft AI - downloadable document in minutes",
+      "Carryover 1 unused document each subscription period",
+      "Documents formatted for jurisdiction",
       "24/7 support",
       "First month is free!",
     ],
@@ -42,11 +43,11 @@ export const signupRadioFields = [
     value: "partner",
     description: [
       "3 documents per month",
-      "Carryover 1 unused document per month",
-      "Documents conform with state rules",
       "Intellidraft AI - downloadable document in minutes",
-      "Up to 2 additional accounts: $49/each",
+      "Carryover 1 unused document per month",
+      "Documents formatted for jurisdiction",
       "24/7 support",
+      "Up to 2 additional accounts: $49/each",
     ],
     details: "",
     docsAllowedPerMonth: 3,
@@ -62,8 +63,8 @@ export const signupRadioFields = [
     value: "seniorPartner",
     description: [
       "Unlimited documents.",
-      "Documents conform with state rules",
       "Intellidraft AI - downloadable document in minutes",
+      "Documents formatted for jurisdiction",
       "24/7 Triage-level support response",
       "Up to 8 additional accounts at $39/each",
     ],

src/pageElements/Radio.js

@@ -22,7 +22,7 @@ const Radio = (props) => {
   const index = isAnnual === 1 ? Number("1") : Number("0");
 
   const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
-
+  console.log("activeRadioOption", activeRadioOption);
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>

src/styles/signup.scss

@@ -86,7 +86,7 @@
 .select-plan-header {
   display: flex;
   flex-direction: row;
-  height: 55px;
+  height: 70px;
   width: 830px;
   margin-bottom: 10px;
 }
@@ -96,6 +96,16 @@
   width: 50%;
 }
 
+.plan-header-right > h5 {
+  margin-bottom: 4px !important;
+}
+
+.subscribe-header-sub {
+  margin-left: 14px;
+  font-size: 0.86rem;
+  font-weight: 300;
+}
+
 .plan-header-right-lower {
   display: flex;
   flex-direction: column;