feat: highlight annual billing discount

Author: sunnylqm

src/pages/user.tsx

@@ -21,6 +21,7 @@ import {
   ANNUAL_BILLING_MONTHS,
   type BillingOption,
   DEFAULT_MONTHLY_PRICE_FACTOR,
+  getAnnualSavings,
   getBillingOptions,
   resolveMonthlyPriceFactor,
 } from '@/utils/billing';
@@ -72,14 +73,39 @@ function formatMoney(value: number) {
   return Number.isInteger(value) ? `￥${value}` : `￥${value.toFixed(2)}`;
 }
 
-function formatBillingOptionLabel(option: BillingOption, showAmount = true) {
+function formatDiscount(value: number) {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
+function formatBillingOptionText(option: BillingOption, showAmount = true) {
   const amount = showAmount ? `，${formatMoney(option.amount)}` : '';
   if (option.billingCycle === 'year') {
     return `年付（${option.billingMonths}个月${amount}）`;
   }
   return `${option.billingMonths}个月${showAmount ? `（${formatMoney(option.amount)}）` : ''}`;
 }
 
+function BillingOptionLabel({
+  option,
+  showAmount,
+}: {
+  option: BillingOption;
+  showAmount: boolean;
+}) {
+  const savings = getAnnualSavings(option);
+
+  return (
+    <span className="inline-flex min-w-0 flex-wrap items-center gap-1.5">
+      <span>{formatBillingOptionText(option, showAmount)}</span>
+      {savings.discount > 0 && (
+        <Tag color="gold" className="m-0">
+          约{formatDiscount(savings.discount)}折优惠
+        </Tag>
+      )}
+    </span>
+  );
+}
+
 function BillingMonthsSelect({
   disabled,
   onChange,
@@ -109,6 +135,12 @@ function BillingMonthsSelect({
   const selectedValue = options.some((option) => option.value === value)
     ? value
     : fallbackValue;
+  const selectedOption = options.find(
+    (option) => option.value === selectedValue,
+  );
+  const selectedSavings = selectedOption
+    ? getAnnualSavings(selectedOption)
+    : { amount: 0, percent: 0, discount: 0 };
 
   useEffect(() => {
     if (selectedValue !== value) {
@@ -121,17 +153,24 @@ function BillingMonthsSelect({
   }
 
   return (
-    <Select
-      aria-label="选择付费周期"
-      className="w-full sm:w-60"
-      disabled={disabled}
-      onChange={onChange}
-      options={options.map((option) => ({
-        label: formatBillingOptionLabel(option, showAmount),
-        value: option.value,
-      }))}
-      value={selectedValue}
-    />
+    <div className="flex w-full flex-col gap-1 sm:w-72">
+      <Select
+        aria-label="选择付费周期"
+        className="w-full"
+        disabled={disabled}
+        onChange={onChange}
+        options={options.map((option) => ({
+          label: <BillingOptionLabel option={option} showAmount={showAmount} />,
+          value: option.value,
+        }))}
+        value={selectedValue}
+      />
+      {selectedSavings.discount > 0 && (
+        <div className="rounded border border-red-200 bg-red-50 px-2 py-1 text-xs font-medium text-red-600">
+          {`年付比按月购买节省 ${formatMoney(selectedSavings.amount)}，约${formatDiscount(selectedSavings.discount)}折优惠`}
+        </div>
+      )}
+    </div>
   );
 }
 

src/utils/billing.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 import {
   DEFAULT_MONTHLY_PRICE_FACTOR,
+  getAnnualSavings,
   getBillingOptions,
   resolveBillingPlan,
 } from './billing';
@@ -28,6 +29,26 @@ describe('resolveBillingPlan', () => {
   });
 });
 
+describe('getAnnualSavings', () => {
+  test('returns annual savings compared with paying monthly', () => {
+    const plan = resolveBillingPlan(800, 12, DEFAULT_MONTHLY_PRICE_FACTOR);
+    const savings = getAnnualSavings(plan);
+
+    expect(savings.amount).toBe(400);
+    expect(savings.percent).toBe(33);
+    expect(savings.discount).toBe(6.7);
+  });
+
+  test('does not show savings for monthly plans', () => {
+    const plan = resolveBillingPlan(800, 1, DEFAULT_MONTHLY_PRICE_FACTOR);
+    const savings = getAnnualSavings(plan);
+
+    expect(savings.amount).toBe(0);
+    expect(savings.percent).toBe(0);
+    expect(savings.discount).toBe(0);
+  });
+});
+
 describe('getBillingOptions', () => {
   test('removes month counts that would use annual billing', () => {
     const options = getBillingOptions({

src/utils/billing.ts

@@ -18,10 +18,20 @@ export interface BillingOption extends BillingPlan {
   value: number;
 }
 
+export interface AnnualSavings {
+  amount: number;
+  percent: number;
+  discount: number;
+}
+
 function roundMoney(value: number) {
   return Math.round((value + Number.EPSILON) * 100) / 100;
 }
 
+function roundDiscount(value: number) {
+  return Math.round((value + Number.EPSILON) * 10) / 10;
+}
+
 function positiveFiniteNumber(value: unknown) {
   if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
     return undefined;
@@ -90,6 +100,29 @@ export function resolveBillingPlan(
   };
 }
 
+export function getAnnualSavings(
+  plan: Pick<
+    BillingPlan,
+    'amount' | 'billingCycle' | 'billingMonths' | 'monthlyPrice'
+  >,
+): AnnualSavings {
+  if (plan.billingCycle !== 'year') {
+    return { amount: 0, percent: 0, discount: 0 };
+  }
+
+  const monthlyTotal = roundMoney(plan.monthlyPrice * plan.billingMonths);
+  const savingsAmount = roundMoney(monthlyTotal - plan.amount);
+  if (monthlyTotal <= 0 || savingsAmount <= 0) {
+    return { amount: 0, percent: 0, discount: 0 };
+  }
+
+  return {
+    amount: savingsAmount,
+    percent: Math.round((savingsAmount / monthlyTotal) * 100),
+    discount: roundDiscount((plan.amount / monthlyTotal) * 10),
+  };
+}
+
 export function getBillingOptions({
   annualBillingMonths = ANNUAL_BILLING_MONTHS,
   annualPrice,