Update Billing Provider and Refactor Pricing UI

Updated the billing provider in the environment configuration to use 'stripe' instead of 'lemon-squeezy'. Multiple changes were also made to UI components related to pricing, including better data handling for different billing tiers and enhanced visualization of selected options. These revisions aim to both enhance the user experience and ensure compatibility with the new billing provider.
This commit is contained in:
giancarlo
2024-04-07 18:12:45 +08:00
parent 1e23ee2783
commit ab1e90f093
5 changed files with 161 additions and 172 deletions

View File

@@ -214,12 +214,12 @@ export function PlanPicker(
return null;
}
const baseLineItem = getPrimaryLineItem(
const primaryLineItem = getPrimaryLineItem(
props.config,
plan.id,
);
if (!baseLineItem) {
if (!primaryLineItem) {
throw new Error(`Base line item was not found`);
}
@@ -295,7 +295,7 @@ export function PlanPicker(
<span>
{formatCurrency(
product.currency.toLowerCase(),
baseLineItem.cost,
primaryLineItem.cost,
)}
</span>
</Price>
@@ -420,19 +420,21 @@ function PlanDetails({
</p>
</div>
<Separator />
<If condition={selectedPlan.lineItems.length > 0}>
<Separator />
<div className={'flex flex-col space-y-2'}>
<span className={'text-sm font-semibold'}>
<Trans i18nKey={'billing:detailsLabel'} />
</span>
<div className={'flex flex-col space-y-2'}>
<span className={'text-sm font-semibold'}>
<Trans i18nKey={'billing:detailsLabel'} />
</span>
<LineItemDetails
lineItems={selectedPlan.lineItems ?? []}
selectedInterval={isRecurring ? selectedInterval : undefined}
currency={selectedProduct.currency}
/>
</div>
<LineItemDetails
lineItems={selectedPlan.lineItems ?? []}
selectedInterval={isRecurring ? selectedInterval : undefined}
currency={selectedProduct.currency}
/>
</div>
</If>
<Separator />