zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle case for metered line items in the Plan Picker by displaying t… (#107)

Browse Source 
* Handle case for metered line items in the Plan Picker by displaying the cost of the lower tier as "Starting at {price}/{unit}"
This commit is contained in:
Giancarlo Buomprisco
2025-01-16 12:24:27 +08:00
committed by GitHub
parent f3ff0e7bb3
commit 41193e5697
2 changed files with 52 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/public/locales/en/billing.json
View File

@@ -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)",

60
packages/billing/gateway/src/components/plan-picker.tsx
View File

@@ -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 (
<RadioGroupItemLabel
selected={selected}
@@ -318,16 +340,34 @@ export function PlanPicker(
}
>
<div>
<Price key={plan.id}>
<span>
{formatCurrency({
currencyCode:
product.currency.toLowerCase(),
value: primaryLineItem.cost,
locale,
})}
</span>
</Price>
<If
condition={shouldDisplayTier}
fallback={
<Price key={plan.id}>
<span>
{formatCurrency({
currencyCode:
product.currency.toLowerCase(),
value: primaryLineItem.cost,
locale,
})}
</span>
</Price>
}
>
<Trans
i18nKey={tierTranslationKey}
values={{
price: formatCurrency({
currencyCode:
product.currency.toLowerCase(),
value: lowestTier?.cost ?? 0,
locale,
}),
unit: primaryLineItem.unit,
}}
/>
</If>
<div>
<span className={'text-muted-foreground'}>