Merge pull request #49 from kjannette/stripe5

Stripe5

src/Components/SignupPage/SignupPage.js

@@ -18,6 +18,7 @@ import {
   isFormDataHasErrors,
 } from "../../Utils/Form";
 import { objectMap } from "../../Utils/Object";
+import { determinePlan } from "../../Utils/Miscutils";
 import { signupFields } from "../../Constants/Fields/SignupFields";
 import { paymentfields } from "../../Constants/Fields/PaymentFields";
 import { signupRadioFields } from "../../Constants/Fields/RadioFields";
@@ -38,12 +39,12 @@ const SignupPage = () => {
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
   const [showSelectPlan, setShowSelectPlan] = useState(false);
-  const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic");
+  const [activeRadioOption, setActiveRadioOption] = useState("Partner");
   const [selectedPlan, setSelectedPlan] = useState({});
-  const [isAnnualBilling, setIsAnnualBilling] = useState(false);
+  const [isAnnual, setIsAnnual] = useState(false);
   // Could also go in App.js if needed in the future
   const stripe = new Stripe(stripeApiKey);
-
+  console.log("activeRadioOption", activeRadioOption);
   const apiUrl =
     process.env.NODE_ENV === "development"
       ? process.env.REACT_APP_API_DEV
@@ -141,7 +142,7 @@ const SignupPage = () => {
       console.log(`Error saving new user to db: ${error}`);
     }
   }
-
+  console.log("activeRadioOption", activeRadioOption);
   const handleProceedToPayment = (e) => {
     e.preventDefault();
 
@@ -179,8 +180,8 @@ const SignupPage = () => {
   };
 
   const handleToggle = () => {
-    setIsAnnualBilling(!isAnnualBilling);
-    console.log("isAnnualBilling", isAnnualBilling);
+    setIsAnnual(!isAnnual);
+    console.log("isAnnual", isAnnual);
   };
 
   async function handleStripeAuthorization(
@@ -213,6 +214,7 @@ const SignupPage = () => {
         },
         body: JSON.stringify({
           type: "monthly",
+          isAnnual: isAnnual,
           customerData: {
             email: customerDataValues.email,
             name:
@@ -257,6 +259,7 @@ const SignupPage = () => {
       return;
     }
 
+    const planType = determinePlan(isAnnual, activeRadioOption);
     setIsBusy(true);
 
     if (paymentDataValues && dataValues) {
@@ -416,7 +419,7 @@ const SignupPage = () => {
                     details={option.details}
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
-                    isAnnualBilling={isAnnualBilling}
+                    isAnnual={isAnnual}
                   />
                 </div>
               ))}

src/Constants/Fields/RadioFields.js

@@ -2,7 +2,7 @@ export const signupRadioFields = [
   {
     name: "Associate",
     label: "Monthly - basic",
-    value: "monthlyBasic",
+    value: "associate",
     description: [
       "1 document per month",
       "Carryover 1 document to next period",
@@ -18,11 +18,11 @@ export const signupRadioFields = [
   {
     name: "Partner",
     label: "Monthly - pro",
-    value: "monthlyProPlan",
+    value: "partner",
     description: [
       "3 documents per month",
       "Carryover 2 documents to next period",
-      "Up to 2 additional accounts: 59/each",
+      "Up to 2 additional accounts: $49/each",
       "24/7 support",
     ],
     details: "",
@@ -34,11 +34,11 @@ export const signupRadioFields = [
   {
     name: "Senior Partner",
     label: "Annual - unlimited annual",
-    value: "annualUnlimited",
+    value: "seniorPartner",
     description: [
       "Unlimited documents.",
       "Triage-level support",
-      "Up to 8 additional accounts at 19/each",
+      "Up to 10 additional accounts at $39/each",
     ],
     details: "",
     pricing: [

src/Utils/Miscutils.js

@@ -0,0 +1,33 @@
+export const determinePlan = (isAnnual, activeRadioOption) => {
+  if (isAnnual === true && activeRadioOption === "associate") {
+    return {
+      planType: "Annual Assoc",
+      planId: "8a7b889e-8626-4d3e-a37d-ef2a8b762419",
+    };
+  } else if (isAnnual === false && activeRadioOption === "associate") {
+    return {
+      planType: "Monthly Assoc",
+      planId: "4e177c87-d074-4409-9f5e-6358adff5017",
+    };
+  } else if (isAnnual === true && activeRadioOption === "partner") {
+    return {
+      planType: "annualPartner",
+      planId: "45b567bc-c1fb-47dd-bfb1-c180380141bc",
+    };
+  } else if (isAnnual === false && activeRadioOption === "partner") {
+    return {
+      planType: "monthlyPartner",
+      planId: "c70bc329-9c17-4997-a7d3-fe8f62db49b0",
+    };
+  } else if (isAnnual === true && activeRadioOption === "seniorPartner") {
+    return {
+      planType: "annualSeniorPartner",
+      planId: "35b3109c-5fe3-46e3-a64c-1f43fe7136c4",
+    };
+  } else if (isAnnual === false && activeRadioOption === "seniorPartner") {
+    return {
+      planType: "monthlySeniorPartner",
+      planId: "a88ce618-cee2-42ae-ab4c-e404b2a5422d",
+    };
+  }
+};

src/pageElements/Radio.js

@@ -2,7 +2,6 @@ import { CircleFill, Circle } from "react-bootstrap-icons";
 import "../styles/radio.scss";
 
 const Radio = (props) => {
-  console.log("hello");
   const {
     name,
     description,
@@ -12,12 +11,12 @@ const Radio = (props) => {
     disabled,
     activeRadioOption,
     details,
-    isAnnualBilling,
+    isAnnual,
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
-  const index = isAnnualBilling ? Number("0") : Number("1");
-  //
+  const index = isAnnual ? Number("0") : Number("1");
+
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>
@@ -39,15 +38,22 @@ const Radio = (props) => {
               <div className="radio-name-box"> {`${name}`} </div>
               <div className="radio-price-box">
                 <div className="radio-price">
-                  {" "}
-                  {`${price[index]["amount"]}`}{" "}
+                  {`$${price[index]["amount"]}`}{" "}
                 </div>
               </div>
             </div>
             <div className="radio-circle-lower">
               <div className="radio-description-box">
                 {description.map((item, i) => {
-                  return <p className="signup-feat-item">{item}</p>;
+                  const el =
+                    item == "First month is free!" ? (
+                      <div className="offer-div">
+                        <p className="signup-feat-item-bold">{item}</p>
+                      </div>
+                    ) : (
+                      <p className="signup-feat-item">{item}</p>
+                    );
+                  return el;
                 })}
               </div>
               <div className="radio-description-box">{`${details}`} </div>

src/styles/radio.scss

@@ -55,6 +55,8 @@
   height: 25px;
   width: 40px;
   float: right;
+  margin-right: 8px;
+  padding-top: 6px;
 }
 
 .radio-description-box {

src/styles/signup.scss

@@ -171,3 +171,22 @@
   font-size: 0.9rem;
   margin: 8px 0px 8px 4px;
 }
+
+.signup-feat-item-bold {
+  font-family: Roboto;
+  color: #005eff;
+  font-size: 1.15rem;
+  letter-spacing: -0.008rem;
+  font-weight: 500;
+  margin: 12px 0px 8px 4px;
+}
+
+.offer-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30px;
+  background-color: #fdbe72;
+  border-radius: 10px;
+  margin-top: 25px;
+}