chore(seer): Add seer automation alert on subscription page after checkout #93935
Conversation
github-actions
bot
added
the
Scope: Frontend
Codecov ReportAll modified and coverable lines are covered by tests ✅ Additional details and impacted files@@ Coverage Diff @@
## master #93935 +/- ##
=======================================
Coverage 88.03% 88.03%
=======================================
Files 10343 10343
Lines 597355 597355
Branches 23217 23217
=======================================
Hits 525870 525870
Misses 70981 70981
Partials 504 504 |
|
|
||
| export default function SeerAutomationAlert({organization}: SeerAutomationAlertProps) { | ||
| const location = useLocation(); | ||
| const isCheckoutRedirect = !!location.query.referrer; // only show this alert when redirected to this page, such as from the checkout page |
There was a problem hiding this comment.
i don't think looking at the presence of referrer alone is sufficient here
there are a couple in-product places where we redirect to this page and provide a referrer that aren't from checkout
There was a problem hiding this comment.
instead, we can modify the redirect in submitCheckout to pass a query parameter when the user has just bought seer, ie.
hasBoughtSeer = // whatever logic to indicate a user just bought seer
normalizeUrl(
`/settings/${organization.slug}/billing/overview/?referrer=${referrer}&show_seer_automation_alert={hasBoughtSeer}`
)
| @@ -625,14 +625,18 @@ export async function submitCheckout( | |||
| addSuccessMessage(t('Success')); | |||
| recordAnalytics(organization, subscription, data, isMigratingPartnerAccount); | |||
|
|
|||
| const justBoughtSeer = data.seer; | |||
There was a problem hiding this comment.
the only thing with this is that this would set showSeerAutomationAlert=true everytime a user went through checkout and either just bought Seer or already had it purchased
| const justBoughtSeer = data.seer; | |
| const alreadyHadSeer = !isTrialPlan && (subscription.reservedBudgets?.some(budget => (budget.apiName as string as SelectableProduct) === | |
| SelectableProduct.SEER && budget.reservedBudget > 0)); | |
| const justBoughtSeer = data.seer && !alreadyHadSeer; |
what alreadyHadSeer does is checks that the customer already had Seer enabled by looking at the current state of subscription (which is not yet refreshed); if they were on a trial plan at checkout time they had a seer budget > 0 but we don't count that as having purchased Seer already
Adds a dismissible alert banner at the top of the subscription page that shows when being redirected there post-checkout with Seer purchased. It notifies the user that Seer automation is on and offers a link to settings.
I did not use the custom colors in the design because the Alert component did not play nicely with them. I also did not put the exact settings status because that would require making a network request for each project in an org. I tweaked the copy to make sense given that constraint.