feat: Add self serve billing management UI #5431

AdityaHegde · 2024-08-12T14:45:29Z

Adds a self serve billing page under organisation settings. Some local setup is needed to get this working.

Contact me on slack for stripe and orb keys to be added to .env. Once .env is updated run rill devtool start cloud --refresh-dotenv=false to start cloud.

Trial subscription

To test trail subscription there is a helper command to advance time artifically. (might get merged into devtool subcommand in rill) : https://github.com/rilldata/rill-helpers?tab=readme-ov-file#trail-subscription
--org is optional and will default to the org selected using rill org switch

After starting a fresh subscription, run ./rill-helpers sub advance-time --org <org_name> --time <today+2> to get the Ending soon email. This is mandatory to keep things consistant.
Run ./rill-helpers sub advance-time --org <org_name> next to end the trial.
Run ./rill-helpers sub advance-time --org <org_name> next to end the grace period as well.

Team plan

To test team plans webhooks forwarder is needed for stripe and orb.

Signup to ngrok: https://ngrok.com
Follow steps to download and authenticate: https://dashboard.ngrok.com/get-started/setup/macos
Create a domain: https://dashboard.ngrok.com/domains
Start ngrok with above domain: ngrok http --url=<domain name> 8080
Using url https://<domain>/payment/webhook, add webhook to stripe: https://dashboard.stripe.com/test/webhooks.(select all events while creating this)
Copy over the secret to RILL_ADMIN_STRIPE_WEBHOOK_SECRET. Reveal signing secret on the webhook page to get this.
Using https://<domain>/billing/webhook as url, add webhook to orb: https://app.withorb.com/webhooks (Make sure to be on test plan).
Copy over the secret to RILL_ADMIN_ORB_WEBHOOK_SECRET. Get the signing secret from webhook page.
Restart cloud server if already started. Use rill devtool start cloud --refresh-dotenv=false to avoid overwriting the keys.

To test a cancelled team plan expiring (needs some familiarity with orb),

Make sure the plan is cancelled.
Go to orb test account : https://app.withorb.com/customers.
Look for your org's customer using org name.
"Unschedule cancellation" and cancel again by selecting "cancel immediately"
Run ./rill-helpers sub advance-time --org <org_name> to reflect things in rill.

To test a failed payment,

Go to stripe using org's billing settings section.
Add a card that will fail payment: https://docs.stripe.com/testing#declined-payments
Go to https://app.withorb.com/invoices/new.
Find the customer and create a new invoice.
Make sure to select "Payment terms" as "Due on issue".
After creating make sure to manually issue it.
Rill cloud should now catch the failed payment.
Advance time to test grace period passing: ./rill-helpers sub advance-time --org <org_name>

ericpgreen2 · 2024-10-24T20:15:09Z

web-admin/src/routes/[organization]/-/settings/billing/+page.ts

Moving the showUpgrade state from the query parameter to localStorage seems overly complicated. Can we just keep the query parameter in the URL?

And a nit for clarity: showUpgradeDialog

This was a bad experience for me. If the url somehow got saved then refreshing or saving it would always show the modal. Added a comment to explain why we need this.

web-admin/src/routes/[organization]/-/settings/billing/upgrade/+page.ts

web-admin/src/routes/[organization]/-/upgrade-callback/+page.svelte

web-common/src/components/icons/TopToBottomGradient.svelte

web-common/src/lib/openPopupWindow.ts

web-admin/src/routes/[organization]/[project]/+layout.ts

ericpgreen2 · 2024-10-24T21:02:18Z

web-admin/src/routes/[organization]/-/upgrade-callback/+page.ts

+export const load: PageLoad = async ({ params: { organization } }) => {
+  let issues: V1BillingIssue[] = [];
+  try {
+    issues = await fetchOrganizationBillingIssues(organization);


I'm wondering if this should happen at the [organization] route level (semantically that would make sense), and then this callback should just invalidate the parent load function? But maybe not, because that might lead to excessive invalidation?

Lets keep it simple for now.

web-admin/src/routes/[organization]/-/upgrade-callback/+page.svelte

web-admin/src/routes/[organization]/-/settings/billing/+page.svelte

web-admin/src/routes/[organization]/+page.ts

web-admin/src/features/billing/issues/getMessageForPaymentIssues.ts

web-admin/src/features/billing/issues/useBillingIssueMessage.ts

ericpgreen2 · 2024-10-24T22:35:25Z

web-admin/src/features/billing/selectors.ts

+export function getSubscriptionForOrg<T = V1GetBillingSubscriptionResponse>(
+  organization: string,
+  queryOptions?: CreateQueryOptions<
+    V1GetBillingSubscriptionResponse,
+    ErrorType<RpcStatus>,
+    T // T is the return type of the `select` function
+  >,
+): CreateQueryResult<T, ErrorType<RpcStatus>> {
+  return derived(
+    [createAdminServiceGetOrganization(organization)],
+    ([orgResp], set) =>
+      createAdminServiceGetBillingSubscription(organization, {
+        query: {
+          ...queryOptions,
+          enabled:
+            (queryOptions && "enabled" in queryOptions
+              ? queryOptions.enabled
+              : true) &&
+            !!orgResp.data?.permissions?.manageOrg &&
+            !!organization,
+          queryClient,
+        },
+      }).subscribe(set),
+  );
+}


At first glance, this wrapper seemed a bit heavy. Another approach: see web-admin/src/routes/+layout.svelte for how specific projectPermissions are passed through to a child component. Perhaps if we follow that pattern, we can avoid a sprawl of GetOrganization calls.

Good point. This is not needed at all since I added the BillingBannerManagerForAdmins and OrganizationHibernatingForAdmins

Also could you point to other places where GetOrg call is not needed? I have added a comment in Payment.svelte and removed it from useBillingIssueMessage.

web-admin/src/routes/[organization]/+page.svelte

web-admin/src/features/billing/plans/utils.ts

web-admin/src/features/errors/error-utils.ts

web-admin/src/routes/[organization]/+page.ts

web-admin/src/routes/[organization]/-/settings/billing/payment/+page.ts

web-common/src/lib/openPopupWindow.ts

web-admin/src/routes/[organization]/+layout.ts

ericpgreen2 · 2024-10-25T13:59:21Z

web-admin/src/routes/+layout.ts

The calls to redirectToLoginIfNotLoggedIn break Public URLs. We have two options:

For now, remove them in favor of the call in the global error callback in error-utils.ts where we handle the Public URL case.

Handle the Public URL case here. With a refactor, we might actually be able to migrate away from the global error callback & instead rely on throwing errors in the relevant +layout.ts files, like you've done here.

1 might be safer & easier, but 2 is probably better long-term.

ericpgreen2 · 2024-10-25T14:04:07Z

web-admin/src/routes/+layout.ts

+        if (
+          withinProject({ url, route } as Page) &&
+          !isProjectRequestAccessPage({ url, route } as Page)
+        ) {
+          // if not in request access page (approve or deny routes) then go to a page to get access
+          throw redirect(
+            307,
+            `/-/request-project-access/?organization=${organization}&project=${project}`,
+          );
+        }


This doesn't look like it's supposed to be here

Since this is at the highest level +layout.ts errorUtils is not initialised just yet, so it is never hit to run that logic. Lets revisit that, perhaps we could move its initialisation here, but lets not add too many possible regressions in this PR.

web-admin/src/routes/+layout.ts

* use svelte and vite-plugin-singlefile * cleanup * revert * more cleanup * regen package-lock

* wip * project share initial work * apply avatar circle list to project share * square * user invite org and group * spacing * scrollable users * user invite user set role * user invite group set role * copy * ability to remove user * do not allow current user to remove themselves * ability to remove user group * use invite group tooltip * prop rename * one more * rename * wip tooltip * use popover * add tooltip to org users * polish user email addition exp * copy * comments * lint * no prop drilling * lint * lint * clean up some org groups * feedback * feedback complete * comment out org groups * clean up avatar list item * lint * move avatar list item to avatar dir * defensive * lint * move avatar list item to features users * everyone from text * cursor tweaks * disable role change for current user * hide all users from groups * apply selected to user invite button * comment out manage org members, org set role changes * rebase fix * apply user photo url to popover * default null photo url * apply other photo urls in avatar * spacing set role margin right * support everyone at all-users * use all-users members * lint * wip * lint * multiple access tooltip * remove unused * Revert "multiple access tooltip" This reverts commit 0f62db8. * popover rename * clean up * remove unused * user-management rename * feedback * feedback * lint * defensive * use found all users group

* disable preview button when explore resource is reconciling * update tooltip

* display null values with italics * remove log

…5976)

* trigger org repair manually * review comments * fix billing cust id, raise issues when updating stripe customer manually * disallow renewal to non public plan

web-admin/src/routes/+layout.ts

web-admin/src/routes/[organization]/+layout.ts

web-admin/src/routes/[organization]/-/settings/billing/payment/+page.ts

ericpgreen2 · 2024-10-28T14:00:56Z

web-admin/src/routes/[organization]/[project]/+layout.ts

+      hasBlockerIssues(issues) &&
+      (await fetchAllProjectsHibernating(organization))
+    ) {
+      shouldRedirectToProjectsList = true;


It doesn't look like we need to keep this shouldRedirectToProjectsList state & we can just fire the redirect right here

We need this because of the try catch. throw redirect... will end up getting caught there.

Oh I see. That's a little confusing, so we could only do the data fetching within the try, and move the conditional to the bottom?

ericpgreen2 · 2024-10-28T15:11:51Z

web-admin/src/routes/[organization]/-/settings/billing/payment/+page.ts

+      `${url.protocol}//${url.host}/${organization}`,
+    );
+  } catch (e) {
+    if (e.response?.status !== 403) {


We should throw the error when it's a 403 too

ericpgreen2 · 2024-10-28T15:16:42Z

web-admin/src/routes/[organization]/[project]/+layout.ts

+      hasBlockerIssues(issues) &&
+      (await fetchAllProjectsHibernating(organization))
+    ) {
+      shouldRedirectToProjectsList = true;


Oh I see. That's a little confusing, so we could only do the data fetching within the try, and move the conditional to the bottom?

pjain1 · 2024-10-28T16:42:42Z

admin/server/billing.go

@@ -233,6 +237,17 @@ func (s *Server) CancelBillingSubscription(ctx context.Context, req *adminv1.Can
 		return nil, status.Error(codes.Internal, err.Error())
 	}

+	// err = s.admin.Email.SendSubscriptionCancelled(&email.SubscriptionCancelled{


can you uncomment this, just remove the `Plan Name' from template no harm in that, once Eric O is back we can discuss.

AdityaHegde added 30 commits August 12, 2024 20:13

Add basic plan info

2440f32

Add actions for switching plans

acb2da5

Add payment section

44a38ab

Merge branch 'main' into adityahegde/billing-ui

475dbd0

Merge branch 'main' into adityahegde/billing-ui

441e0bf

Merge branch 'main' into adityahegde/billing-ui

662bfee

Use new APIs

418e180

Merge branch 'main' into adityahegde/billing-ui

376cbaa

Add banners for trial and billing issues

96d26a0

Improve trial end math

72e6508

Add TRIAL_ENDING_SOON state

1f71f66

Remove TRIAL_ENDING_SOON

fade30f

Merge branch 'main' into adityahegde/billing-ui

83ae354

Add plan pill

e5af9dd

Add start team plan variants

c337e64

Merge branch 'main' into adityahegde/billing-ui

a16c1f7

Handle payment issues

6ba3913

Handle some edge cases

b60caca

Open stripe page before plan upgrade

368dd77

Use billing issue to show trial dates

ebc8e6e

Merge branch 'main' into adityahegde/billing-ui

7730520

Avoid using ListPlans API

5a3105c

Add null checks

c4ea1c3

Fix trial grace period end check

8310b96

Handle cancelled subscriptions

df1f20b

UXQA fixes - pass 1

9752b05

Merge branch 'main' into adityahegde/billing-ui

fc7e934

Use RenewBillingSubscription

3dabb6a

Handle no subscription case

1d61d74

Always fetch stripe page

e993973

AdityaHegde added 4 commits October 24, 2024 11:59

Add spinner to iframe loading

5674229

Merge branch 'main' into adityahegde/billing-ui

8ec01f5

Add POC plan support

6d57a5c

Tweaks

4b87ed9

ericpgreen2 requested changes Oct 24, 2024

View reviewed changes

ericpgreen2 requested changes Oct 25, 2024

View reviewed changes

AdityaHegde and others added 2 commits October 25, 2024 13:08

PR comments pass 4

8dcd55b

fix start trial race condition (#5971)

f4301e5

ericpgreen2 requested changes Oct 25, 2024

View reviewed changes

briangregoryholmes and others added 9 commits October 28, 2024 10:13

web-auth: use svelte and vite-plugin-singlefile (#5965)

a8e41c2

* use svelte and vite-plugin-singlefile * cleanup * revert * more cleanup * regen package-lock

disable preview button when explore resource is reconciling (#5962)

0d774ea

* disable preview button when explore resource is reconciling * update tooltip

fix: display null values with italics in TDD (#5945)

06c444c

* display null values with italics * remove log

completely remove org from orb and stripe (#5955)

c535b01

Don't log request cancellation as internal errors in the Github APIs (#…

035155b

…5976)

trigger org repair manually (#5936)

87b95ae

* trigger org repair manually * review comments * fix billing cust id, raise issues when updating stripe customer manually * disallow renewal to non public plan

Merge branch 'main' into adityahegde/billing-ui

2af7c7d

Fix public URLs

4b14bf3

ericpgreen2 reviewed Oct 28, 2024

View reviewed changes

AdityaHegde added 2 commits October 28, 2024 19:51

Fix upgrade emails

7c5ba24

Merge branch 'main' into adityahegde/billing-ui

52df6b5

ericpgreen2 approved these changes Oct 28, 2024

View reviewed changes

Fix lint

0dc2a39

AdityaHegde force-pushed the adityahegde/billing-ui branch from 5f6de87 to 0dc2a39 Compare October 28, 2024 15:17

AdityaHegde and others added 2 commits October 28, 2024 20:59

PR comments pass 5

691c99a

check org billing init in start trial job (#5983)

1deb7fb

pjain1 reviewed Oct 28, 2024

View reviewed changes

Add back commented email

15132a4

AdityaHegde merged commit 75bb62c into main Oct 28, 2024
9 checks passed

AdityaHegde deleted the adityahegde/billing-ui branch October 28, 2024 16:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add self serve billing management UI #5431

feat: Add self serve billing management UI #5431

AdityaHegde commented Aug 12, 2024 •

edited

Loading

ericpgreen2 Oct 24, 2024

ericpgreen2 Oct 24, 2024

AdityaHegde Oct 25, 2024 •

edited

Loading

ericpgreen2 Oct 24, 2024

AdityaHegde Oct 25, 2024

ericpgreen2 Oct 24, 2024

AdityaHegde Oct 25, 2024 •

edited

Loading

AdityaHegde Oct 25, 2024

ericpgreen2 Oct 25, 2024

ericpgreen2 Oct 25, 2024

AdityaHegde Oct 28, 2024

ericpgreen2 Oct 28, 2024

AdityaHegde Oct 28, 2024

ericpgreen2 Oct 28, 2024

ericpgreen2 Oct 28, 2024

ericpgreen2 Oct 28, 2024

pjain1 Oct 28, 2024

feat: Add self serve billing management UI #5431

feat: Add self serve billing management UI #5431

Conversation

AdityaHegde commented Aug 12, 2024 • edited Loading

Trial subscription

Team plan

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdityaHegde Oct 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdityaHegde Oct 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AdityaHegde commented Aug 12, 2024 •

edited

Loading

AdityaHegde Oct 25, 2024 •

edited

Loading

AdityaHegde Oct 25, 2024 •

edited

Loading