✨ Expose pricing plans

[odeimaiz]

What do these changes do?

This PR implements the frontend part for #4812

The frontend elements stay more or the same (some extra information about the plan itself is required), but the names and the costs per unit are provided by the backend.

Related issue/s

related to ITISFoundation/osparc-issues#922

How to test

DevOps Checklist

[pcrespov]

Cool! Some suggestions

1. wallet credits are displayed as "XX Credits" while the pricing plan just "XX". I would add "XX Credits/hour"
2. wallet credits is highlighted while princing plan is not. I would stress more the pricing plan than the wallet remaining credits (or at least give them the same importance).

[odeimaiz]

1. wallet credits are displayed as "XX Credits" while the pricing plan just "XX". I would add "XX Credits/hour"

In order to save some space, the short version doesn't show the unit while the Advanced does.

2. wallet credits is highlighted while princing plan is not. I would stress more the pricing plan than the wallet remaining credits (or at least give them the same importance).

👍

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[codeclimate]

Code Climate has analyzed commit 40c9683 and detected 0 issues on this pull request.

View more on Code Climate.

[ignapas]

👀
Sorry, what is the difference between advanced and not advanced besides the buttons having different size? Something that will come in the future?

[elisabettai]

As IP said, I don't understand for the moment the "Advanced" view vs. the normal one.

If the normal one is don't stress the user about the "price", then I'd just show "SMALL", "MEDIUM", "LARGE"

[odeimaiz]

@ignapas @elisabettai
It shows the Tier's extra information. As you might remember, this info used to be mocked in the frontend (number of CPUs, GPU...), now it shows what the backed provides... hopefully it will soon be populated.