60 lines
1.5 KiB
TypeScript
Executable File
60 lines
1.5 KiB
TypeScript
Executable File
// find the highest percentage decrease between monthly and yearly prices of specified products
|
|
import {Product} from '../product';
|
|
import {findBestPrice} from './find-best-price';
|
|
import {Fragment, memo} from 'react';
|
|
import {Trans} from '../../i18n/trans';
|
|
|
|
interface UpsellLabelProps {
|
|
products?: Product[];
|
|
}
|
|
export const UpsellLabel = memo(({products}: UpsellLabelProps) => {
|
|
const upsellPercentage = calcHighestUpsellPercentage(products);
|
|
|
|
if (upsellPercentage <= 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<span className="font-medium text-positive-darker">
|
|
{' '}
|
|
(
|
|
<Trans
|
|
message="Save up to :percentage%"
|
|
values={{percentage: upsellPercentage}}
|
|
/>
|
|
)
|
|
</span>
|
|
</Fragment>
|
|
);
|
|
});
|
|
|
|
function calcHighestUpsellPercentage(products?: Product[]) {
|
|
if (!products?.length) return 0;
|
|
|
|
const decreases = products.map(product => {
|
|
if (product.hidden) return 0;
|
|
|
|
const monthly = findBestPrice('monthly', product.prices);
|
|
const yearly = findBestPrice('yearly', product.prices);
|
|
|
|
if (!monthly || !yearly) return 0;
|
|
|
|
// monthly plan per year amount
|
|
const monthlyAmount = monthly.amount * 12;
|
|
const yearlyAmount = yearly.amount;
|
|
|
|
const savingsPercentage = Math.round(
|
|
((monthlyAmount - yearlyAmount) / monthlyAmount) * 100,
|
|
);
|
|
|
|
if (savingsPercentage > 0 && savingsPercentage <= 200) {
|
|
return savingsPercentage;
|
|
}
|
|
|
|
return 0;
|
|
});
|
|
|
|
return Math.max(Math.max(...decreases), 0);
|
|
}
|