Merge pull request #87 from kjannette/preprod

Preprod

src/Components/SignupPage/SignupPage.js

@@ -43,9 +43,12 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
+  /*
   const [showSelectPlan, setShowSelectPlan] = useState(
     isUpgrade ? true : false
   );
+  */
+  const [showSelectPlan, setShowSelectPlan] = useState(true);
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
   const [isAnnual, setIsAnnual] = useState(1);
@@ -508,7 +511,6 @@ const SignupPage = () => {
       {!isUpgrade && !isBusy ? signupForm : <></>}
       {showSelectPlan && !isBusy ? (
         <div className="select-plan-container">
-          <div className="select-sub-left">
           <div className="select-plan-header">
             <div className="plan-header-right">
               <h5 className="signup-subheader-text">
@@ -538,6 +540,7 @@ const SignupPage = () => {
                   isUpgrade={index < disableIndex ? true : false}
                   disabled={index < disableIndex ? true : false}
                   currentPlan={currentPlan}
+                  parentIndex={index}
                 />
               </div>
             ))}
@@ -631,7 +634,6 @@ const SignupPage = () => {
             )}
           </div>
         </div>
-        </div>
       ) : (
         <></>
       )}

src/Constants/Fields/RadioFields.js

@@ -5,7 +5,7 @@ export const signupRadioFields = [
     value: "associate",
     description: [
       "1 document per month",
-      "Carryover 1 document to next period",
+      "Carryover 1 unused document each subscription period",
       "Documents conforming with state rules",
       "24/7 support",
       "First month free!",
@@ -24,7 +24,7 @@ export const signupRadioFields = [
     value: "partner",
     description: [
       "3 documents per month",
-      "Carryover 2 documents to next period",
+      "Carryover 1 unused document per month",
       "Documents conforming with state rules",
       "Up to 2 additional accounts: $49/each",
       "24/7 support",
@@ -55,5 +55,22 @@ export const signupRadioFields = [
       { type: "additionalAccount", amount: 39 },
     ],
   },
+  {
+    name: "Of Counsel",
+    label: "Of Counsel",
+    value: "ofCounsel",
+    description: [
+      "One document - pay as you go",
+      "24/7 support",
+      "Document conforming with state rules",
+    ],
+    details: "",
+    docsAllowedPerMonth: 1,
+    pricing: [
+      { type: "oneTime", amount: 59 },
+      { type: "oneTime", amount: 59 },
+      { type: "oneTime", amount: 59 },
+    ],
+  },
 ];
 //

src/pageElements/Radio.js

@@ -15,6 +15,7 @@ const Radio = (props) => {
     isAnnual,
     isUpgrade,
     currentPlan,
+    parentIndex,
   } = props;
 
   const classCheckbox = "checkbox";
@@ -43,9 +44,15 @@ const Radio = (props) => {
               )}
               <div className="radio-name-box"> {`${name}`} </div>
               <div className="radio-price-box">
+                {parentIndex > 2 ? (
+                  <div className="radio-price">
+                    {`$${price[index]["amount"]}/doc`}
+                  </div>
+                ) : (
                   <div className="radio-price">
                     {`$${price[index]["amount"]}/mo`}
                   </div>
+                )}
               </div>
             </div>
             <div className="radio-circle-lower">

src/styles/signup.scss

@@ -11,7 +11,7 @@
   flex-direction: column;
   align-items: center;
   margin-top: 45px;
-  width: 960px;
+  width: 920px;
   padding: 12px;
   border-radius: 10px;
   background-color: rgb(240, 247, 250);
@@ -81,13 +81,6 @@
   width: 160px;
 }
 
-.select-plan-container {
-  display: flex;
-  flex-direction: row;
-  margin-top: 24px;
-  width: 920px;
-}
-
 .select-plan-header {
   display: flex;
   flex-direction: row;
@@ -118,17 +111,22 @@
   width: 50%;
 }
 
+.select-plan-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 24px;
+  width: 920px;
+  min-height: 810px;
+  border-radius: 10px;
+  background-color: rgb(240, 247, 250);
+  border: 1px solid #e9e9e9;
+}
+
 .select-sub-left {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 45px;
   width: 100%;
-  padding: 12px;
-  border-radius: 10px;
-  background-color: rgb(240, 247, 250);
-  border: 1px solid #e9e9e9;
-  padding: 6px;
 }
 
 .select-sub-right {
@@ -168,9 +166,9 @@
 .radio-group-box {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   padding: 6px;
   width: 100%;
-  height: 340px;
 }
 
 .select-plan-summary-box {
@@ -197,7 +195,7 @@
 }
 
 .signup-radio-container {
-  width: 350px;
+  width: 300px;
   height: 100%;
 }