diff --git a/apps/web/public/locales/en/billing.json b/apps/web/public/locales/en/billing.json index fab6e2361..8438b5319 100644 --- a/apps/web/public/locales/en/billing.json +++ b/apps/web/public/locales/en/billing.json @@ -1,4 +1,8 @@ { + "units": { + "member_one": "member", + "member_other": "members" + }, "subscriptionTabSubheading": "Manage your Subscription and Billing", "planCardTitle": "Your Plan", "planCardDescription": "Below are the details of your current plan. You can change your plan or cancel your subscription at any time.", diff --git a/packages/billing/gateway/src/components/line-item-details.tsx b/packages/billing/gateway/src/components/line-item-details.tsx index 2dd5b7ab9..64532041c 100644 --- a/packages/billing/gateway/src/components/line-item-details.tsx +++ b/packages/billing/gateway/src/components/line-item-details.tsx @@ -19,7 +19,8 @@ export function LineItemDetails( selectedInterval?: string | undefined; }>, ) { - const locale = useTranslation().i18n.language; + const { t, i18n } = useTranslation(); + const locale = i18n.language; const currencyCode = props?.currency.toLowerCase(); return ( @@ -115,7 +116,7 @@ export function LineItemDetails( @@ -171,7 +172,7 @@ export function LineItemDetails( @@ -223,8 +224,17 @@ function Tiers({ currency: string; item: z.infer; }) { - const unit = item.unit; - const locale = useTranslation().i18n.language; + const unitKey = `billing:units.${item.unit}`; + const { t, i18n } = useTranslation(); + const locale = i18n.language; + + // Helper to safely convert tier values to numbers for pluralization + // Falls back to plural form (2) for 'unlimited' values + const getSafeCount = (value: number | 'unlimited' | string): number => { + if (value === 'unlimited') return 2; + const num = typeof value === 'number' ? value : Number(value); + return Number.isNaN(num) ? 2 : num; + }; const tiers = item.tiers?.map((tier, index) => { const tiersLength = item.tiers?.length ?? 0; @@ -257,8 +267,10 @@ function Tiers({ @@ -268,7 +280,7 @@ function Tiers({ @@ -277,7 +289,13 @@ function Tiers({ - + {' '} @@ -291,7 +309,11 @@ function Tiers({