feat(fe2): Billing - Add tooltips to disabled buttons #3615
Conversation
| @@ -34,13 +33,24 @@ | |||
| </div> | |||
| <div v-if="workspaceId" class="w-full mt-4"> | |||
| <FormButton | |||
| v-if="isMonthlyToAnnual || canUpgradeToPlan" | |||
There was a problem hiding this comment.
Had to do this hacky fix to the v-tippy reactivity bug
There was a problem hiding this comment.
Tested and found various problems. Don't mind the slightly transparent tooltips in the images – my screenshotting tool is a bit glitchy.
- This tooltip appears on the starter plan while you're on a trial:
-
The downgrading tooltip appears on the starter plan while the button is in the "current plan" state
-
No tooltips on the disabled Plus and Business plan – in this case because I'm on an annual Starter plan and trying to upgrade to monthly Plus or Business plan.
-
The annual->monthly tooltip appears on the current plan here after I toggle the billing switch on and off.
packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue
Show resolved
Hide resolved
packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue
Show resolved
Hide resolved
…andrew/web-2227-add-tooltips-to-buttons
packages/frontend-2/components/settings/workspaces/billing/PricingTable/Plan.vue
Outdated
Show resolved
Hide resolved
|
@benjaminvo This one has been approved, but I can't merge until you also approve. Thanks |
andrewwallacespeckle
deleted the
andrew/web-2227-add-tooltips-to-buttons
branch
|
I just tested this on Latest. I'm still experiencing problem 3 and 4 from this message 🤔. No tooltips on the disabled upgrade buttons (3) and a wrong tooltip on the "current plan" button after switching the billing switch on and off (4). |
I have just opened a PR for point 3 here. I haven't been able to recreate point 4, was there anything else you did to get it? 🤔 |
Not really I think. It's whenever my current plan is a yearly plan -> I switch to monthly billing -> hover the disabled "change to monthly" button -> switch back to yearly billing -> hover the disabled "current plan" button. |
Let the user know why certain actions are disabled in Settings>Workspace>Billing.
I created some new computed for some of these conditionals and used them where appropriate.