more

src/Components/SignupPage/SignupPage.js

@@ -383,6 +383,7 @@ const SignupPage = () => {
                   name={option.name}
                   description={option.description}
                   activeRadioOption={activeRadioOption}
+                  price={option.price}
                 />
               ))}
             </div>

src/Constants/Fields/RadioFields.js

@@ -4,17 +4,20 @@ export const signupRadioFields = [
     label: "Monthly - basic",
     value: "monthlyBasic",
     description: "Generate 1 document per month",
+    price: 89,
   },
   {
     name: "Monthly - pro plan",
     label: "Monthly - pro plan",
     value: "monthlyProPlan",
     description: "Generate up to 3 documents per month",
+    price: 159,
   },
   {
     name: "Annual - unlimted annual",
     label: "Annual - unlimited annual",
     value: "annualUnlimited",
     description: "Generate unlimited documents.  Billed annualy",
+    price: 1489,
   },
 ];

src/pageElements/Radio.js

@@ -3,8 +3,15 @@ import "../styles/radio.scss";
 
 const Radio = (props) => {
   console.log("hello");
-  const { name, description, onClick, value, disabled, activeRadioOption } =
-    props;
+  const {
+    name,
+    description,
+    onClick,
+    value,
+    price,
+    disabled,
+    activeRadioOption,
+  } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
   console.log("value, activeRadioOption", value, activeRadioOption);
@@ -23,6 +30,7 @@ const Radio = (props) => {
                   <CircleFill color="#1a76c7" size="20px" />
                 </div>
                 <div className="radio-name-box"> {`${name}`} </div>
+                <div className="radio-price-box"> {`${price}`} </div>
               </div>
               <div className="radio-circle-lower">
                 <div className="radio-description-box">

src/styles/radio.scss

@@ -9,14 +9,18 @@
 }
 
 .radio-circle-top {
-  height: 50px;
+  height: 40px;
   display: flex;
   flex-direction: row;
 }
-.radio-circle-bottom {
+
+.radio-circle-lower {
   display: flex;
   flex-direction: column;
+  margin-left: 18px;
+  padding-left: 26px;
 }
+
 .radio-circle-box {
   height: 40px;
   margin: 12px 8px;