diff --git a/apps/web/public/locales/en/billing.json b/apps/web/public/locales/en/billing.json index bd10fb6b9..81fac4ede 100644 --- a/apps/web/public/locales/en/billing.json +++ b/apps/web/public/locales/en/billing.json @@ -40,6 +40,8 @@ "includedUpTo": "Up to {{upTo}} {{unit}} included in the plan", "fromPreviousTierUpTo": "for each {{unit}} for the next {{ upTo }} {{ unit }}", "andAbove": "above {{ previousTier }} {{ unit }}", + "startingAtPriceUnit": "Starting at {{price}}/{{unit}}", + "priceUnit": "{{price}}/{{unit}}", "forEveryUnit": "for every {{ unit }}", "setupFee": "plus a {{ setupFee }} setup fee", "perUnitIncluded": "({{included}} included)", diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx index 0996a385b..c35206084 100644 --- a/packages/billing/gateway/src/components/plan-picker.tsx +++ b/packages/billing/gateway/src/components/plan-picker.tsx @@ -239,6 +239,28 @@ export function PlanPicker( throw new Error(`Base line item was not found`); } + const shouldDisplayTier = + primaryLineItem.type === 'metered' && + Array.isArray(primaryLineItem.tiers) && + primaryLineItem.tiers.length > 0; + + const isMultiTier = + Array.isArray(primaryLineItem.tiers) && + primaryLineItem.tiers.length > 1; + + const lowestTier = primaryLineItem.tiers?.reduce( + (acc, curr) => { + if (acc && acc.cost < curr.cost) { + return acc; + } + + return curr; + }, + primaryLineItem.tiers[0], + ); + + const tierTranslationKey = isMultiTier ? 'billing:startingAtPriceUnit' : 'billing:priceUnit'; + return (
- - - {formatCurrency({ - currencyCode: - product.currency.toLowerCase(), - value: primaryLineItem.cost, - locale, - })} - - + + + {formatCurrency({ + currencyCode: + product.currency.toLowerCase(), + value: primaryLineItem.cost, + locale, + })} + + + } + > + +