feat: billing plan and startup program badges on billing page by pawel-cebula · Pull Request #30242 · PostHog/posthog

pawel-cebula · 2025-03-20T17:50:45Z

Problem

Customers couldn't see on the billing page what billing plan are they on and/or if they're part of the startup program
Only those on the free plan would see a CTA to upgrade

Changes

Adapts the BillingCTAHero into BillingHero, where content changes depending on the billingPlan and startupProgramLabel
If startupProgramLabel is present, it takes priority over the billingPlan
In each variation we render a different badge, copy, CTAs, background
- We're missing a Teams plan badge, I've requested one from Lottie in Art request - Teams plan badge posthog.com#11022 but we could render the ridiculously cheap one (or neither?) in the meantime

These UI changes dependent on a billing PR (https://github.com/PostHog/billing/pull/1162), which needs to be merged first.

Does this work well for both Cloud and self-hosted?

Cloud only

How did you test this code?

Manually tested all variations of billing plans and startup programs
Manually tested the UI responsiveness (see https://www.loom.com/share/245c65be6dfa46c498f1095dfd94440c - slightly out of date - swapped order of billing plan and current spend + removed 1 paragraph from copy)

Desktop layout

Mobile layout

⚠️ Note that all screenshots below are from before removing paragraph about all plans coming with all products/features except for the free plan.

Free plan

Paid plan

Teams plan

Enterprise plan

Startup plan

YC plan

…or in Billing

greptile-apps

PR Summary

This PR introduces significant changes to the billing page UI, focusing on plan visibility and startup program status. Here's a summary of the key changes:

Replaces BillingCTAHero with a new BillingHero component that adapts content based on billing plan and startup program status
Introduces new BillingSummary component to display detailed billing information like current totals and projections
Adds new billing plan badges (Free, Paid, Teams, Enterprise) and startup program badges (YC, Startup)
Implements responsive layouts for both desktop and mobile views
Moves styling from SCSS to Tailwind classes for better maintainability

Key points to note:

Cloud-only changes with comprehensive testing across different billing plans
New billingPlan and startupProgramLabel selectors in billingLogic
Improved UX with plan-specific messaging and CTAs
Proper handling of Stripe portal integration through new StripePortalButton component

The changes appear well-structured and thoroughly tested across different scenarios and screen sizes.

_{💡 (5/5) You can turn off certain types of comments like style here!}

_{8 file(s) reviewed, 7 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

frontend/src/scenes/billing/Billing.tsx

frontend/src/scenes/billing/BillingHero.tsx

frontend/src/scenes/billing/BillingSummary.tsx

frontend/src/scenes/billing/StripePortalButton.tsx

frontend/src/types.ts

posthog-bot · 2025-03-20T18:00:38Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 5)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

github-actions · 2025-03-21T16:05:33Z

Size Change: +4.27 kB (+0.04%)

Total Size: 9.76 MB

Filename	Size	Change
`frontend/dist/toolbar.js`	9.76 MB	+4.27 kB (+0.04%)

_{compressed-size-action}

… rendering logic at the top of billing page

posthog-bot · 2025-03-21T16:24:50Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 5)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-03-21T16:54:46Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 5)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-03-22T08:05:55Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-03-22T08:16:29Z

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-03-22T17:35:31Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 5)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

posthog-bot · 2025-03-23T12:49:57Z

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

chromium: 0 added, 2 modified, 0 deleted (diff for shard 5)
webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

pawel-cebula · 2025-03-23T13:26:48Z

@zlwaterfield I think I've implemented all the feedback. I've also improved the layout of the credits CTA component a bit. Had to fix some unrelated type errors too that suddenly popped up, and fix an E2E test. Should be good for another review.

zlwaterfield

Added two comments but looks good other than that (neither are blockers but nice to haves IMO)

zlwaterfield · 2025-03-24T15:43:25Z

frontend/src/scenes/billing/BillingHero.tsx

+    },
+    [BillingPlan.Teams]: {
+        title: 'Good call!',
+        subtitle: "You're on the Teams plan.",


Can we update this to say You're on the Ridiculously Cheap™ plan (with Teams) or something like that until we have the badge, it's a big confusing.

zlwaterfield · 2025-03-24T15:44:17Z

frontend/__snapshots__/scenes-other-billing--billing-with-credit-cta--light.png

This looks to be squshing the summary, are we able avoid that with a min width?

I actually wanted to leave more space for the credits banner/CTA so I wanted to limit the width of the summary based on current bill total and wrap rest, if needed. Otherwise the credits banner could be quite narrow and could end up taking a lot of height, with lots of empty space on the left (below summary).

I could modify it so that e.g. a date doesn't wrap but that could look a bit odd with spacing and end up taking 3 lines 🤔 Will try to see what it looks like and decide.

pawel-cebula added 20 commits March 13, 2025 15:34

add plan badges svgs

7421865

billingLogic selector billingPlan rough mock and BillingPlan type

8643215

Merge remote-tracking branch 'origin/master' into billing-plan-badges

20aa24f

billing hero wip

8cb619a

hero variants for plans and basic copy

bfe9724

styling

c687262

wip

3713bb1

responsive ui

272999b

abstract BillingSummary

a7ecc1d

colors in badge config

d3b7879

todo

bd3c7b6

abstract StripeBillingButton and render either inside BillingSummary …

66afaa8

…or in Billing

fix billingPlan and startupProgramLabel related types

f3586e1

teams and enterprise upgrade copy

55969a3

Teams and Enterprise link/scroll to those addons

ee30eb5

testing and fixing

0ac0ddc

type fixes

4c9ba24

StartupProgramLabel fix

700b3b9

rename component

9d37f5e

Merge remote-tracking branch 'origin/master' into billing-plan-badges

c4e4db7

pawel-cebula requested review from joethreepwood, joshsny, patricio-posthog and zlwaterfield March 20, 2025 17:50

greptile-apps bot reviewed Mar 20, 2025

View reviewed changes

Update UI snapshots for chromium (5)

1a7077b

pawel-cebula and others added 3 commits March 20, 2025 19:03

teams

4f1c957

move back credit cta hero above

f4a0a0f

Update UI snapshots for chromium (5)

60823d7

unrelated generated type missing in scenes

59a56d2

pawel-cebula and others added 3 commits March 21, 2025 17:15

render credits cta instead of hero when appropriate, simplify all the…

efbf94b

… rendering logic at the top of billing page

Merge remote-tracking branch 'origin/master' into billing-plan-badges

4f2f18f

Update UI snapshots for chromium (5)

998f3e3

pawel-cebula and others added 2 commits March 21, 2025 17:45

styling for credits cta hero

129d72b

Update UI snapshots for chromium (5)

9de0643

pawel-cebula and others added 2 commits March 22, 2025 08:53

Merge remote-tracking branch 'origin/master' into billing-plan-badges

974a220

Update UI snapshots for chromium (1)

7ae07ce

Update UI snapshots for chromium (1)

a82f255

pawel-cebula and others added 5 commits March 22, 2025 14:18

fix e2e test

5794b38

Merge remote-tracking branch 'origin/master' into billing-plan-badges

d3e664d

ts fixes

2d70a90

CreditCTAHero layout

830d922

Update UI snapshots for chromium (5)

4a2e5f1

pawel-cebula and others added 2 commits March 23, 2025 13:36

credits cta image and btn widths

774ef8b

Update UI snapshots for chromium (5)

a91a542

pawel-cebula requested a review from zlwaterfield March 23, 2025 13:26

zlwaterfield approved these changes Mar 24, 2025

View reviewed changes

pawel-cebula added 2 commits March 25, 2025 07:04

minor tweaks

8afb196

Merge remote-tracking branch 'origin/master' into billing-plan-badges

2f573bc

pawel-cebula merged commit 976378c into master Mar 25, 2025
112 checks passed

pawel-cebula deleted the billing-plan-badges branch March 25, 2025 08:30

Conversation

pawel-cebula commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Changes

Does this work well for both Cloud and self-hosted?

How did you test this code?

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

posthog-bot commented Mar 20, 2025

📸 UI snapshots have been updated

Uh oh!

github-actions bot commented Mar 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

posthog-bot commented Mar 21, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Mar 21, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Mar 22, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Mar 22, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Mar 22, 2025

📸 UI snapshots have been updated

Uh oh!

posthog-bot commented Mar 23, 2025

📸 UI snapshots have been updated

Uh oh!

pawel-cebula commented Mar 23, 2025

Uh oh!

zlwaterfield left a comment

Choose a reason for hiding this comment

Uh oh!

zlwaterfield Mar 24, 2025

Choose a reason for hiding this comment

Uh oh!

zlwaterfield Mar 24, 2025

Choose a reason for hiding this comment

Uh oh!

pawel-cebula Mar 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

pawel-cebula commented Mar 20, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading