mirror of
https://github.com/vernu/textbee.git
synced 2026-07-30 17:07:46 -04:00
ad7bcd99a5
The status pill hardcoded a check mark and varied only its colour, so a past_due or canceled subscriber was shown a tick beside the bad news. It also fell back to the label "Active" when the payload carried no status at all, inventing a healthy state on a billing screen. The icon now comes from the status, and an absent status reads "Unknown". formatPrice returned "Free" whenever the currency was missing, even with a real amount. Since the badge only renders when amount > 0, the one case it could produce was a paying customer being shown "Free / monthly". Default the currency instead. The page also derived its usage numbers inline instead of calling deriveUsage, which exists precisely so billing and the dashboard cannot disagree. The inline copy skipped the helper's 0-100 clamp, so the invariant was already broken. Monthly is a rolling 30-day window server-side, not a calendar month, which the dashboard already labels correctly. Billing said "this month", so a user capping out late in the month would wait for a reset that never arrives. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
// Shared formatting helpers. These were previously duplicated inline across
|
|
// subscription-info, device-list, overview and others.
|
|
|
|
// A plan limit of -1 means unlimited; null/undefined render as 0.
|
|
export function formatLimit(value: number | null | undefined): string {
|
|
if (value === -1) return 'Unlimited'
|
|
if (value == null) return '0'
|
|
return value.toLocaleString()
|
|
}
|
|
|
|
// Amounts come from the backend in minor units (cents). Null amount = Free.
|
|
export function formatPrice(
|
|
amount: number | null | undefined,
|
|
currency: string | null | undefined
|
|
): string {
|
|
// Only a missing amount means free. A missing currency used to fall through
|
|
// to "Free" as well, so a paying customer whose payload omitted the currency
|
|
// was shown the badge "Free / monthly" on their own billing page.
|
|
if (amount == null) return 'Free'
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: currency?.toUpperCase() || 'USD',
|
|
minimumFractionDigits: 2,
|
|
}).format(amount / 100)
|
|
}
|
|
|
|
export function getBillingInterval(
|
|
interval: string | null | undefined
|
|
): string {
|
|
if (!interval) return ''
|
|
return interval.toLowerCase() === 'month' ? 'monthly' : 'yearly'
|
|
}
|
|
|
|
export function formatDate(value: string | number | Date | null | undefined) {
|
|
if (!value) return 'N/A'
|
|
return new Date(value).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})
|
|
}
|
|
|
|
// "past_due" -> "Past Due"
|
|
export function titleCaseStatus(status: string | null | undefined): string {
|
|
if (!status) return ''
|
|
return status
|
|
.split('_')
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' ')
|
|
}
|