feat: Add alert about overdue invoices

[bs1180]

Problem

PostHog staff are spending time manually chasing unpaid invoices, normally messaging via shared Slack channels or sending emails to users. This is time consuming and not always effective.

Changes

This PR adds a new billing alert which can be used to nag targeted users about overdue invoices. It's intended as another tool in the CSM arsenal rather than replacing other forms of communication. The use of the FF for targeting gives flexibility and lets any PostHog user add/remove it as necessary.

How did you test this code?

Turned the flag on and off :D

Changelog: (features only) Is this feature complete?

Yes, but probably not changlog worthy.

[github-actions]

Size Change: +222 B (+0.01%)

Total Size: 3.06 MB

ℹ️ View Unchanged

Filename	Size	Change
frontend/dist/toolbar.js	3.06 MB	+222 B (+0.01%)

_{compressed-size-action}

[greptile-apps]

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Missing space after // in comment

Suggested change

	UNPAID_INVOICE_NAG: 'unpaid-invoice-nag', //owner: @bs1180
	UNPAID_INVOICE_NAG: 'unpaid-invoice-nag', // owner: @bs1180

Prompt To Fix With AI

This is a comment left during a code review.
Path: frontend/src/lib/constants.tsx
Line: 321:321

Comment:
style: Missing space after `//` in comment

```suggestion
    UNPAID_INVOICE_NAG: 'unpaid-invoice-nag', // owner: @bs1180
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

logic: Missing return statement after setting the unpaid invoice alert. Without it, the alert could be overridden by subsequent logic checks like productSpecificAlert.

Suggested change

	if (values.featureFlags[FEATURE_FLAGS.UNPAID_INVOICE_NAG]) {
	actions.setBillingAlert({
	status: 'error',
	title: 'Your organization has an overdue invoice',
	message: 'Please pay it or your account risks suspension.',
	})
	}
	if (values.featureFlags[FEATURE_FLAGS.UNPAID_INVOICE_NAG]) {
	actions.setBillingAlert({
	status: 'error',
	title: 'Your organization has an overdue invoice',
	message: 'Please pay it or your account risks suspension.',
	})
	return
	}

Prompt To Fix With AI

This is a comment left during a code review.
Path: frontend/src/scenes/billing/billingLogic.tsx
Line: 724:730

Comment:
logic: Missing `return` statement after setting the unpaid invoice alert. Without it, the alert could be overridden by subsequent logic checks like `productSpecificAlert`.

```suggestion
            if (values.featureFlags[FEATURE_FLAGS.UNPAID_INVOICE_NAG]) {
                actions.setBillingAlert({
                    status: 'error',
                    title: 'Your organization has an overdue invoice',
                    message: 'Please pay it or your account risks suspension.',
                })
                return
            }
```

How can I resolve this? If you propose a fix, please make it concise.

[mcoll-posthog]

@bs1180 With the current implementation you probably do need to do this

[posthog-bot]

📸 UI snapshots have been updated

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

• chromium: 0 added, 78 modified, 0 deleted (diff for shard 14, diff for shard 8, diff for shard 1, diff for shard 11)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[pawel-cebula]

Good idea to give this more visibility on the platform!

I'm not a big fan of doing this via a flag because it requires removing it manually, so it will continue showing once someone pays it, and you won't always find out right away that it was paid indeed.

We already have some logic that does this something similar dynamically, e.g.

See code here: https://github.com/PostHog/posthog/blob/master/frontend/src/scenes/billing/billingLogic.tsx#L382-L410

It does so based on the /api/get_invoices billing endpoint, where it fetches open invoices (which doesn't seem ideal; I assume we'd want to fetch uncollectible invoices too).

Another downside is that the current one is only shown on the billing page, while alerts are shown on other pages too.

So I'd recommend modifying the implementation to determine whether they have overdue invoices dynamically based on the open invoices data that we're already fetching. You could e.g. create a new selector in billingLogic to store the data fetched in loadInvoices and then read from it in determineBillingAlert to decide whether to show this alert.

[bs1180]

So I'd recommend modifying the implementation to determine whether they have overdue invoices dynamically based on the open invoices data that we're already fetching. You could e.g. create a new selector in billingLogic to store the data fetched in loadInvoices and then read from it in determineBillingAlert to decide whether to show this alert.

Thanks @pawel-cebula, I'll dig more into the server side API then.