first commit

common/resources/client/billing/pricing-table/upsell-label.tsx

@@ -0,0 +1,59 @@
+// 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);
+}