payment-kit 1.24.4 → 1.25.0

package/src/pages/customer/subscription/change-plan.tsx

@@ -3,11 +3,11 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import {
   LoadingButton,
+  PaymentSummary,
   PricingTable,
   api,
   formatBNStr,
   formatError,
-  formatPrice,
   formatTime,
   usePaymentContext,
 } from '@blocklet/payment-react';
@@ -18,11 +18,118 @@ import { useRequest, useSetState } from 'ahooks';
 import { useRef } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
-import InfoCard from '../../../components/info-card';
+import BigNumber from 'bignumber.js';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionDescription from '../../../components/subscription/description';
 import { goBackOrFallback } from '../../../libs/util';
 import { useArcsphere } from '../../../hooks/browser';
+import { useSubscriptionExchangeRate } from '../../../hooks/subscription';
+
+/**
+ * Calculate total amount for items using live exchange rate
+ * For dynamic pricing items, calculate: base_amount / rate
+ * For fixed pricing items, use unit_amount directly
+ */
+const calculateTotalWithLiveRate = (
+  items: TLineItemExpanded[],
+  liveRate: string | undefined,
+  currencyDecimal: number
+): string | null => {
+  if (!items?.length) return null;
+
+  let total = new BigNumber(0);
+  const hasAnyDynamicPricing = items.some((item) => {
+    const price = (item.upsell_price || item.price) as any;
+    return price?.pricing_type === 'dynamic';
+  });
+
+  // If there's dynamic pricing but no live rate, return null
+  if (hasAnyDynamicPricing && !liveRate) return null;
+
+  for (const item of items) {
+    const price = (item.upsell_price || item.price) as any;
+    const quantity = item.quantity || 1;
+
+    if (price?.pricing_type === 'dynamic' && price?.base_amount && liveRate) {
+      // Dynamic pricing: amount = base_amount / rate * 10^decimal
+      const baseAmount = new BigNumber(price.base_amount);
+      const rate = new BigNumber(liveRate);
+      if (rate.gt(0)) {
+        const amount = baseAmount.dividedBy(rate).times(new BigNumber(10).pow(currencyDecimal)).times(quantity);
+        // Round up to ensure we don't undercharge
+        total = total.plus(amount.integerValue(BigNumber.ROUND_CEIL));
+      }
+    } else if (price?.unit_amount) {
+      // Fixed pricing: use unit_amount directly
+      total = total.plus(new BigNumber(price.unit_amount).times(quantity));
+    }
+  }
+
+  return total.toString();
+};
+
+/**
+ * Proration type with additional info from backend
+ */
+type ProrationItem = {
+  price_id: string;
+  amount: string;
+  quantity: number;
+  description: string;
+  pricing_type?: string;
+  base_amount_usd?: string | null;
+  proration_rate?: number;
+};
+
+/**
+ * Recalculate prorations using live exchange rate for dynamic pricing items
+ * For fixed pricing items, use the original amount from backend
+ *
+ * IMPORTANT: The recalculated amount is capped at the original payment amount.
+ * This prevents the case where token depreciation causes the refund to exceed
+ * what the user originally paid.
+ */
+const recalculateProrations = (
+  prorations: ProrationItem[],
+  liveRate: string | undefined,
+  currencyDecimal: number
+): ProrationItem[] => {
+  if (!prorations?.length) return [];
+
+  return prorations.map((p) => {
+    // Only recalculate for dynamic pricing items with base_amount_usd
+    if (p.pricing_type === 'dynamic' && p.base_amount_usd && p.proration_rate && liveRate) {
+      const baseAmountUsd = new BigNumber(p.base_amount_usd);
+      const rate = new BigNumber(liveRate);
+      const prorationRate = new BigNumber(p.proration_rate);
+
+      if (rate.gt(0)) {
+        // Calculate: base_amount_usd / rate * proration_rate * quantity * 10^decimal
+        const calculatedAmount = baseAmountUsd
+          .dividedBy(rate)
+          .times(prorationRate)
+          .times(p.quantity || 1)
+          .times(new BigNumber(10).pow(currencyDecimal))
+          .integerValue(BigNumber.ROUND_CEIL);
+
+        // Get the original amount from backend (absolute value)
+        const originalAmount = new BigNumber(p.amount.replace('-', ''));
+
+        // Cap at original amount: don't refund more than what was paid
+        // This handles the case where token depreciation would cause
+        // the calculated refund to exceed the original payment
+        const finalAmount = BigNumber.min(calculatedAmount, originalAmount);
+
+        return {
+          ...p,
+          amount: `-${finalAmount.toString()}`, // Proration is negative (credit)
+        };
+      }
+    }
+    // For fixed pricing or if we can't recalculate, use original amount
+    return p;
+  });
+};
 
 const fetchData = async (
   id: string
@@ -75,6 +182,25 @@ export default function CustomerSubscriptionChangePlan() {
     paid: false,
   });
 
+  let planItems: TLineItemExpanded[] = [];
+  if (state.items.length > 0) {
+    planItems = state.items as TLineItemExpanded[];
+  } else if (data?.subscription?.items) {
+    planItems = data.subscription.items as unknown as TLineItemExpanded[];
+  }
+  const planHasDynamicPricing =
+    planItems?.length &&
+    planItems.some((item) => {
+      const price = (item.upsell_price || item.price) as any;
+      return price?.pricing_type === 'dynamic';
+    });
+  const planNeedsExchangeRate = planHasDynamicPricing && data?.subscription?.paymentMethod?.type !== 'stripe';
+  const { liveRateInfo, liveRateUnavailable } = useSubscriptionExchangeRate({
+    subscriptionId: data?.subscription?.id,
+    currencyId: data?.subscription?.paymentCurrency?.id,
+    enabled: !!planNeedsExchangeRate,
+  });
+
   if (error) {
     return <Alert severity="error">{formatError(error)}</Alert>;
   }
@@ -87,6 +213,18 @@ export default function CustomerSubscriptionChangePlan() {
     return <Alert severity="error">{t('payment.customer.changePlan.subscriptionNotFound')}</Alert>;
   }
 
+  const planItemsAfterData = state.items.length
+    ? (state.items as TLineItemExpanded[])
+    : (data.subscription.items as unknown as TLineItemExpanded[]);
+  const planHasDynamicPricingAfterData =
+    planItemsAfterData?.length &&
+    planItemsAfterData.some((item) => {
+      const price = (item.upsell_price || item.price) as any;
+      return price?.pricing_type === 'dynamic';
+    });
+  const planNeedsExchangeRateAfterData =
+    planHasDynamicPricingAfterData && data.subscription.paymentMethod?.type !== 'stripe';
+
   const handleSelect = async (priceId: string) => {
     try {
       if (state.priceId === priceId) {
@@ -219,6 +357,53 @@ export default function CustomerSubscriptionChangePlan() {
   const { recurring } = data.subscription.items.find((x) => x.price.type === 'recurring')?.price || {};
   const interval = [recurring?.interval, recurring?.interval_count].join('-');
 
+  // Calculate display values using live exchange rate for dynamic pricing
+  // For fixed pricing, use backend's values directly
+  const needsLiveRateCalculation = planNeedsExchangeRateAfterData && liveRateInfo?.rate;
+
+  // Recalculate prorations with current exchange rate for dynamic pricing items
+  const displayProrations = needsLiveRateCalculation
+    ? recalculateProrations(
+        state.prorations as ProrationItem[],
+        liveRateInfo?.rate,
+        data.subscription.paymentCurrency.decimal
+      )
+    : state.prorations;
+
+  // Calculate total with current exchange rate
+  const calculatedTotal = needsLiveRateCalculation
+    ? calculateTotalWithLiveRate(planItemsAfterData, liveRateInfo?.rate, data.subscription.paymentCurrency.decimal)
+    : null;
+  const displayTotal = calculatedTotal || state.total;
+
+  // Recalculate due and newCredit: total + sum(prorations) - appliedCredit
+  const calculateDisplayValues = (): { due: string; newCredit: string } => {
+    if (!needsLiveRateCalculation) {
+      return { due: state.due, newCredit: state.newCredit };
+    }
+    const totalBN = new BigNumber(displayTotal || '0');
+    const prorationsSum = displayProrations.reduce(
+      (sum: BigNumber, p: any) => sum.plus(new BigNumber(p.amount || '0')),
+      new BigNumber(0)
+    );
+    const appliedCreditBN = new BigNumber(state.appliedCredit || '0');
+    const balanceBN = totalBN.plus(prorationsSum).minus(appliedCreditBN);
+
+    // If balance is negative, due=0 and the excess becomes newCredit
+    // If balance is positive, due=balance and newCredit=0
+    if (balanceBN.lt(0)) {
+      return {
+        due: '0',
+        newCredit: balanceBN.abs().toString(),
+      };
+    }
+    return {
+      due: balanceBN.toString(),
+      newCredit: '0',
+    };
+  };
+  const { due: displayDue, newCredit: displayNewCredit } = calculateDisplayValues();
+
   const getInfoRow = (label: string, value: string, prefix?: string) => {
     return (
       <Stack
@@ -232,7 +417,7 @@ export default function CustomerSubscriptionChangePlan() {
         </Typography>
         <Typography component="p" style={{ fontWeight: 'bold' }}>
           {prefix}
-          {formatBNStr(value, data.subscription.paymentCurrency.decimal)} {data.subscription.paymentCurrency.symbol}
+          {formatBNStr(value, data.subscription.paymentCurrency.decimal, 2)} {data.subscription.paymentCurrency.symbol}
         </Typography>
       </Stack>
     );
@@ -278,47 +463,31 @@ export default function CustomerSubscriptionChangePlan() {
       {state.priceId && state.total && state.setup && (
         <Stack direction="column" spacing={3} sx={{ maxWidth: 640 }}>
           <SectionHeader title={t('payment.customer.changePlan.confirm')} />
-          <Stack direction="column" spacing={2}>
-            <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
-              {t('payment.customer.changePlan.summary', {
-                // @ts-ignore
-                date: formatTime(state.setup.period.end * 1000, 'lll', locale),
-              })}
-            </Typography>
-            {state.items.map((x: TLineItemExpanded) => {
-              const { product } = x.price;
-              return (
-                <Stack
-                  key={x.price_id}
-                  direction="row"
-                  sx={{
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}>
-                  <InfoCard logo={product.images[0]} name={product.name} description={product.description} />
-                  <Typography component="p" style={{ fontWeight: 'bold' }}>
-                    {formatPrice(
-                      x.price,
-                      data.subscription.paymentCurrency,
-                      x.price.product.unit_label,
-                      1,
-                      true,
-                      locale
-                    )}
-                  </Typography>
-                </Stack>
-              );
+          <PaymentSummary
+            items={planItemsAfterData}
+            currency={data.subscription.paymentCurrency}
+            trialInDays={0}
+            billingThreshold={0}
+            showStaking={false}
+            liveRate={liveRateInfo}
+            rateUnavailable={!!(planNeedsExchangeRateAfterData && liveRateUnavailable)}
+            action={t('payment.customer.changePlan.summary', {
+              // @ts-ignore
+              date: formatTime(state.setup.period.end * 1000, 'lll', locale),
             })}
-          </Stack>
+            completed
+            isStripePayment={data.subscription.paymentMethod?.type === 'stripe'}
+          />
           <Divider />
           <Stack direction="column" spacing={1}>
-            {getInfoRow(t('payment.customer.changePlan.total'), state.total)}
-            {state.prorations.map((x: any) => getInfoRow(x.description, x.amount))}
+            {getInfoRow(t('payment.customer.changePlan.total'), displayTotal)}
+            {displayProrations.map((x: any) => getInfoRow(x.description, x.amount))}
             {state.appliedCredit > '0' &&
               getInfoRow(t('payment.customer.changePlan.appliedCredit'), state.appliedCredit, '-')}
-            {state.newCredit > '0' && getInfoRow(t('payment.customer.changePlan.newCredit'), state.newCredit)}
+            {new BigNumber(displayNewCredit).gt(0) &&
+              getInfoRow(t('payment.customer.changePlan.newCredit'), displayNewCredit)}
             <Divider />
-            {getInfoRow(t('payment.customer.changePlan.remaining'), state.due)}
+            {getInfoRow(t('payment.customer.changePlan.remaining'), displayDue)}
             <Divider />
             <Stack
               direction="row"