Move the "Buy add-on CI minutes" process into the app (MVC)
In this issue we explored what the next steps for starting to move the process for buying CI minutes into the app could be. We broke it down into 3 major steps:
- Redirect the user to their usage quota page and visually confirm that they now have additional CI minutes. (this issue)
- Move the whole purchase process into the app, re-use components from the Customer portal
- Next steps to improve the flow (saving credit card and billing info, potentially moving the flow into a modal etc.)
After implementing the improvements from this epic, this is the last screen that the users see in the flow:
We nudge them to click on a button to go back to the group usage quota page where the journey started from. We do that so that they can check and see and feel reassured that the additional minutes have been added to their quota. The next step (this issue) is to visually show that the additional minutes were indeed added on that screen (usage quota).
Once we move the whole purchase process into the app it will be this screen that will be the last one to confirm that the purchase process was successful.
To do that, I propose 2 changes:
- Show the success alert confirming that additional minutes were added. The content of the alert:
Additional pipeline minutes successfully purchased and added to your quota.
The top and bottom margins for these alerts as they are currently used is 10px
, maybe we should use the same?
- Let's change the styling of the additional minutes purchased (for example: "1000 minutes") so that it's shown in green (
$green-500
,#108548
) and bold.
We should do that only for the first time the user comes back to this screen. We can then revert the style back to normal.