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,128 +511,127 @@ 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">
-                  Select a subscription plan
-                </h5>
-              </div>
-              <div className="plan-header-left">
-                <div className="select-toggle-box">
-                  <p className="select-billing-text">Billed annually</p>
-                  <Toggle onClick={handleToggle} />
-                  <p className="select-billing-text">Billed montly</p>
-                </div>
+          <div className="select-plan-header">
+            <div className="plan-header-right">
+              <h5 className="signup-subheader-text">
+                Select a subscription plan
+              </h5>
+            </div>
+            <div className="plan-header-left">
+              <div className="select-toggle-box">
+                <p className="select-billing-text">Billed annually</p>
+                <Toggle onClick={handleToggle} />
+                <p className="select-billing-text">Billed montly</p>
               </div>
             </div>
-            <div className="radio-group-box">
-              {signupRadioFields?.map((option, index) => (
-                <div className="signup-radio-container">
-                  <Radio
-                    onClick={handleChangeRadioInput}
-                    value={option.value}
-                    name={option.name}
-                    description={option.description}
-                    details={option.details}
-                    activeRadioOption={activeRadioOption}
-                    price={option.pricing}
-                    isAnnual={isAnnual}
-                    isUpgrade={index < disableIndex ? true : false}
-                    disabled={index < disableIndex ? true : false}
-                    currentPlan={currentPlan}
-                  />
+          </div>
+          <div className="radio-group-box">
+            {signupRadioFields?.map((option, index) => (
+              <div className="signup-radio-container">
+                <Radio
+                  onClick={handleChangeRadioInput}
+                  value={option.value}
+                  name={option.name}
+                  description={option.description}
+                  details={option.details}
+                  activeRadioOption={activeRadioOption}
+                  price={option.pricing}
+                  isAnnual={isAnnual}
+                  isUpgrade={index < disableIndex ? true : false}
+                  disabled={index < disableIndex ? true : false}
+                  currentPlan={currentPlan}
+                  parentIndex={index}
+                />
+              </div>
+            ))}
+          </div>
+          {showAddAccount && !isBusy ? (
+            <div className="show-addaccount-wrapper">
+              <div className="show-addaccount-container">
+                <div className="plan-header-right-lower">
+                  <h5 className="signup-button-wrapper-text">
+                    Add additional accounts
+                  </h5>
+                  <p className="signup-accounts-info">
+                    User profiles will be setup later
+                  </p>
                 </div>
-              ))}
-            </div>
-            {showAddAccount && !isBusy ? (
-              <div className="show-addaccount-wrapper">
-                <div className="show-addaccount-container">
-                  <div className="plan-header-right-lower">
-                    <h5 className="signup-button-wrapper-text">
-                      Add additional accounts
-                    </h5>
-                    <p className="signup-accounts-info">
-                      User profiles will be setup later
-                    </p>
-                  </div>
-                  <div className="signup-select-wrapper">
-                    <div className="signup-select-box">
-                      <select
-                        id="accountNo"
-                        className={`form-select`}
-                        value={numberOfAccountsToAdd}
-                        name={"addAccountsSelect"}
-                        onChange={(e) =>
-                          handleChangeAccountSelect(e, "addAccountsSelect")
-                        }
-                      >
+                <div className="signup-select-wrapper">
+                  <div className="signup-select-box">
+                    <select
+                      id="accountNo"
+                      className={`form-select`}
+                      value={numberOfAccountsToAdd}
+                      name={"addAccountsSelect"}
+                      onChange={(e) =>
+                        handleChangeAccountSelect(e, "addAccountsSelect")
+                      }
+                    >
+                      <option
+                        id="ddlProducts"
+                        className={`select-option`}
+                        value=""
+                      ></option>
+                      {selectAdditionalAccountValues.map((item, i) => (
                         <option
                           id="ddlProducts"
                           className={`select-option`}
-                          value=""
-                        ></option>
-                        {selectAdditionalAccountValues.map((item, i) => (
-                          <option
-                            id="ddlProducts"
-                            className={`select-option`}
-                            key={`item${i}`}
-                          >
-                            {item}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
+                          key={`item${i}`}
+                        >
+                          {item}
+                        </option>
+                      ))}
+                    </select>
                   </div>
-                  <div className="details-button-box">
+                </div>
+                <div className="details-button-box">
+                  <Button
+                    className="secondary-button back-button"
+                    onClick={handleCancelAdd}
+                    labelText="Cancel"
+                  />
+                  <div className="upload-button-box">
                     <Button
-                      className="secondary-button back-button"
-                      onClick={handleCancelAdd}
-                      labelText="Cancel"
+                      className="p-2 mr-2 primary-button signup-proceed-btn"
+                      onClick={handleAdd}
+                      labelText="Add And Proceed To Payment"
                     />
-                    <div className="upload-button-box">
-                      <Button
-                        className="p-2 mr-2 primary-button signup-proceed-btn"
-                        onClick={handleAdd}
-                        labelText="Add And Proceed To Payment"
-                      />
-                    </div>
                   </div>
                 </div>
               </div>
+            </div>
+          ) : (
+            <></>
+          )}
+          <div className="signup-button-box">
+            {!showAddAccount && !isBusy ? (
+              <>
+                {showAddAccountBtn ? (
+                  <Button
+                    className="secondary-button cancel-add-account-btn"
+                    type="button"
+                    size="lg"
+                    onClick={handleAddAccounts}
+                    disabled={isBusy}
+                    labelText="Add Account(s)"
+                    style={{ marginTight: "12px;" }}
+                  />
+                ) : (
+                  <></>
+                )}
+
+                <Button
+                  className="primary-button signup-proceed"
+                  type="button"
+                  size="lg"
+                  onClick={handleProceedToPayment}
+                  disabled={isBusy}
+                  labelText="Proceed to Payment"
+                />
+              </>
             ) : (
               <></>
             )}
-            <div className="signup-button-box">
-              {!showAddAccount && !isBusy ? (
-                <>
-                  {showAddAccountBtn ? (
-                    <Button
-                      className="secondary-button cancel-add-account-btn"
-                      type="button"
-                      size="lg"
-                      onClick={handleAddAccounts}
-                      disabled={isBusy}
-                      labelText="Add Account(s)"
-                      style={{ marginTight: "12px;" }}
-                    />
-                  ) : (
-                    <></>
-                  )}
-
-                  <Button
-                    className="primary-button signup-proceed"
-                    type="button"
-                    size="lg"
-                    onClick={handleProceedToPayment}
-                    disabled={isBusy}
-                    labelText="Proceed to Payment"
-                  />
-                </>
-              ) : (
-                <></>
-              )}
-            </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">
-                <div className="radio-price">
-                  {`$${price[index]["amount"]}/mo`}
-                </div>
+                {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%;
 }