more

src/Components/SignupPage/SignupPage.js

@@ -387,6 +387,7 @@ const SignupPage = () => {
                   value={option.value}
                   name={option.name}
                   description={option.description}
+                  details={option.details}
                   activeRadioOption={activeRadioOption}
                   price={option.price}
                 />
@@ -394,7 +395,13 @@ const SignupPage = () => {
             </div>
           </div>
           <div className="select-sub-right">
-            <div className="select-plan-summary-box "></div>
+            <div className="select-plan-summary-box ">
+              <div>Order summary</div>
+              <div>{`{subVar} subscription type`}</div>
+              <div>{`{subVar} subscription mini description`}</div>
+              <div>{`{subVar} Total billed today: `}</div>
+              <div>Plus aplicable sales tax -toooltip</div>
+            </div>
             <div className="selectplan-payment-button-wrapper">
               <Button
                 className="primary-button signup-proceed"

src/Constants/Fields/RadioFields.js

@@ -4,6 +4,7 @@ export const signupRadioFields = [
     label: "Monthly - basic",
     value: "monthlyBasic",
     description: "Generate 1 document per month",
+    details: "Billed every month",
     price: 89,
   },
   {
@@ -11,6 +12,7 @@ export const signupRadioFields = [
     label: "Monthly - pro",
     value: "monthlyProPlan",
     description: "Generate up to 3 documents per month",
+    details: "Billed every three months. A xxx percent savings",
     price: 159,
   },
   {
@@ -18,6 +20,7 @@ export const signupRadioFields = [
     label: "Annual - unlimited annual",
     value: "annualUnlimited",
     description: "Generate unlimited documents.  Billed annualy",
+    details: "Billed annualy. A xxx percent savings",
     price: 1489,
   },
 ];

src/pageElements/Radio.js

@@ -11,6 +11,7 @@ const Radio = (props) => {
     price,
     disabled,
     activeRadioOption,
+    details,
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
@@ -41,6 +42,7 @@ const Radio = (props) => {
                   {" "}
                   {`${description}`}{" "}
                 </div>
+                <div className="radio-description-box">{`${details}`} </div>
               </div>
             </div>
           </>
@@ -58,6 +60,7 @@ const Radio = (props) => {
               </div>
               <div className="radio-circle-lower">
                 <div className="radio-description-box">{`${description}`} </div>
+                <div className="radio-description-box">{`${details}`} </div>
               </div>
             </div>
           </>