Plan details yearly monthly styles

[tanmoyAtb]

closes #1856

---

Submission checklist:

Layout

• Change looks good in the desktop web ui
• Change looks good in the mobile web ui

Theme

• Components / elements inspected in light mode
• Components / elements inspected in dark mode

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-1872.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7lc0u8nlki59c8ejcn0.

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-1872.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7lc0uonlki59c8ejd3g.

[render]

Your Render PR Server URL is https://files-ui-stage-pr-1872.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7lc0v8nlki59c8ejd80.

[asnaith]

This is working well 👍

I noticed this branch had conflicts that needed resolving and it was because I'd just merged some tests to dev (after your pr submission) that related to the plan details. I was checking to make sure the label changed when the toggle was enabled etc.

I resolved the conflicts and updated the tests to reflect current behavior in this PR, thought it would be quicker for me to do it as I knew exactly what was going on.

[tanmoyAtb]

This is working well 👍

I noticed this branch had conflicts that needed resolving and it was because I'd just merged some tests to dev (after your pr submission) that related to the plan details. I was checking to make sure the label changed when the toggle was enabled etc.

I resolved the conflicts and updated the tests to reflect current behavior in this PR, thought it would be quicker for me to do it as I knew exactly what was going on.

Thanks a lot for taking care of this ! The changes look good 👍

[Tbaut]

Looks good, just could we add the % discount next to the yearly billing as seen in the mock #1856 (comment)? That's very informative IMHO.

[tanmoyAtb]

#1856 (comment)

Added the "% off" text, I have added a task to #1873 to make sure that the correct "% off" is displayed before deployment.

[Tbaut]

Thanks, what I meant is that we should calculate programmatically what percentage it is, we have both prices so that shouldn't be a problem to calculate,((monthly * 12) - yearly)/(monthly * 12) * 100 so that we are consistent with what we show. Even if it shows 99% right now because our yearly plan is 1$, that's fine. I think this shouldn't be hard-coded :)

[tanmoyAtb]

Thanks, what I meant is that we should calculate programmatically what percentage it is, we have both prices so that shouldn't be a problem to calculate,((monthly * 12) - yearly)/(monthly * 12) * 100 so that we are consistent with what we show. Even if it shows 99% right now because our yearly plan is 1$, that's fine. I think this shouldn't be hard-coded :)

The percentage update is up !

[Tbaut]

looks great, thanks a lot!