diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 11853b5..45e5938 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -383,6 +383,7 @@ const SignupPage = () => { name={option.name} description={option.description} activeRadioOption={activeRadioOption} + price={option.price} /> ))} diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 187f4d5..568917e 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/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, }, ]; diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 887774c..1174494 100644 --- a/src/pageElements/Radio.js +++ b/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) => {
{`${name}`}
+
{`${price}`}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 64e20b8..71f7127 100644 --- a/src/styles/radio.scss +++ b/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;