fix(billing): clarify upgrade flow charge details

[posthog]

Summary

The Pro upgrade dialog didn't make it clear who was being charged, how they were being charged, or why the first charge wouldn't match the listed $200/mo (it's prorated). Adam reported being charged $102.44 on the 5th of the month with no in-app indication of why — and Peter confirmed proration should be in the copy.

This updates the upgrade dialog to:

• Name the organization being charged (e.g. "Acme will be charged $200/month..."), falling back to "Your organization" when the name is missing.
• Spell out that the charge uses the payment method already on file in PostHog (so users aren't expecting a separate card-entry step).
• Add a small notice below the feature list explaining that the first charge is prorated for the remainder of the current billing cycle.

No logic changes — copy and one extra info block in PlanUsageSettings.tsx.

Test plan

• Open Settings → Plan & Usage on a Free org, click Upgrade and confirm the dialog shows the org name, "payment method on file" wording, and the prorated-charge notice.
• Upgrade and confirm the existing flow still works (no behavior change to upgradeToPro).
• Confirm the fallback string renders correctly when seat.organization_name is undefined.

---

Created with PostHog Code

[greptile-apps]

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
apps/code/src/renderer/features/settings/components/sections/PlanUsageSettings.tsx:355-364
The suffix "will be charged $200/month using the payment method on file in PostHog." is identical in both branches, violating the OnceAndOnlyOnce simplicity rule. Factor out just the subject so the shared tail is expressed once.

```suggestion
          <Dialog.Description color="gray" className="text-sm">
            {seat?.organization_name ? (
              <Text weight="medium">{seat.organization_name}</Text>
            ) : (
              "Your organization"
            )}{" "}
            will be charged $200/month using the payment method on file in
            PostHog.
          </Dialog.Description>
```

_{Reviews (1): Last reviewed commit: "fix(billing): clarify upgrade flow charg..." | Re-trigger Greptile}

[greptile-apps]

The suffix "will be charged $200/month using the payment method on file in PostHog." is identical in both branches, violating the OnceAndOnlyOnce simplicity rule. Factor out just the subject so the shared tail is expressed once.

Suggested change

	<Dialog.Description color="gray" className="text-sm">
	You are about to subscribe to the Pro plan. Your organization will
	be charged $200/month starting immediately.
	{seat?.organization_name ? (
	<>
	<Text weight="medium">{seat.organization_name}</Text> will be
	charged $200/month using the payment method on file in PostHog.
	</>
	) : (
	"Your organization will be charged $200/month using the payment method on file in PostHog."
	)}
	</Dialog.Description>
	<Dialog.Description color="gray" className="text-sm">
	{seat?.organization_name ? (
	<Text weight="medium">{seat.organization_name}</Text>
	) : (
	"Your organization"
	)}{" "}
	will be charged $200/month using the payment method on file in
	PostHog.
	</Dialog.Description>

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/settings/components/sections/PlanUsageSettings.tsx
Line: 355-364

Comment:
The suffix "will be charged $200/month using the payment method on file in PostHog." is identical in both branches, violating the OnceAndOnlyOnce simplicity rule. Factor out just the subject so the shared tail is expressed once.

```suggestion
          <Dialog.Description color="gray" className="text-sm">
            {seat?.organization_name ? (
              <Text weight="medium">{seat.organization_name}</Text>
            ) : (
              "Your organization"
            )}{" "}
            will be charged $200/month using the payment method on file in
            PostHog.
          </Dialog.Description>
```

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

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!