@blocklet/payment-react 1.21.16 → 1.22.0

package/src/components/stripe-payment-action.tsx

@@ -0,0 +1,220 @@
+/* eslint-disable react/require-default-props */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { Dialog } from '@arcblock/ux';
+import type { Customer, TPaymentMethod, TInvoiceExpanded } from '@blocklet/payment-types';
+import { Button, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect, useRef } from 'react';
+
+import StripeForm from '../payment/form/stripe';
+import api from '../libs/api';
+import { formatError } from '../libs/util';
+
+export interface StripePaymentActionProps {
+  invoice?: TInvoiceExpanded;
+  invoiceIds?: string[];
+  subscriptionId?: string;
+  customerId?: string;
+  currencyId?: string;
+  paymentMethod?: TPaymentMethod;
+
+  autoTrigger?: boolean;
+  onExternalPayment?: (invoiceId?: string) => void;
+
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+  onClose?: () => void;
+
+  children?: (onPay: () => void, loading: boolean) => React.ReactNode;
+}
+
+export default function StripePaymentAction(props: StripePaymentActionProps) {
+  const {
+    invoice,
+    invoiceIds,
+    subscriptionId,
+    customerId,
+    currencyId,
+    paymentMethod,
+    autoTrigger = false,
+    onExternalPayment,
+    onSuccess,
+    onError,
+    onClose,
+    children,
+  } = props;
+  const { t } = useLocaleContext();
+
+  const [state, setState] = useSetState<{
+    paying: boolean;
+    confirmDialog: boolean;
+    stripeDialog: boolean;
+    clientSecret: string | null;
+    publishableKey: string | null;
+    customer: Customer | null;
+  }>({
+    paying: false,
+    confirmDialog: false,
+    stripeDialog: false,
+    clientSecret: null,
+    publishableKey: null,
+    customer: null,
+  });
+
+  const autoTriggerRef = useRef(false);
+
+  useEffect(() => {
+    if (autoTrigger && !autoTriggerRef.current) {
+      autoTriggerRef.current = true;
+      handlePay();
+    }
+  }, [autoTrigger]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handlePay = async () => {
+    if (state.paying) {
+      return;
+    }
+
+    const hasSubscription = !!(subscriptionId || invoice?.subscription_id);
+    const method = paymentMethod || invoice?.paymentMethod;
+    const shouldShowConfirm = hasSubscription && method?.type === 'stripe';
+
+    if (shouldShowConfirm) {
+      setState({ confirmDialog: true });
+      return;
+    }
+
+    await proceedWithPayment();
+  };
+
+  const proceedWithPayment = async () => {
+    setState({ paying: true, confirmDialog: false });
+
+    const derivedCurrencyId = currencyId || invoice?.currency_id || invoice?.paymentCurrency?.id;
+    const derivedPaymentMethod = paymentMethod || invoice?.paymentMethod;
+    const isStripePayment = derivedPaymentMethod?.type === 'stripe';
+
+    if (isStripePayment && derivedCurrencyId) {
+      const stripePayload: Record<string, any> = {};
+
+      if (invoiceIds && invoiceIds.length > 0) {
+        stripePayload.invoice_ids = invoiceIds;
+      } else if (invoice) {
+        stripePayload.invoice_ids = [invoice.id];
+      } else if (subscriptionId) {
+        stripePayload.subscription_id = subscriptionId;
+      } else if (customerId) {
+        stripePayload.customer_id = customerId;
+      }
+
+      if (derivedCurrencyId) {
+        stripePayload.currency_id = derivedCurrencyId;
+      }
+
+      try {
+        const { data: paymentData } = await api.post('/api/invoices/pay-stripe', stripePayload);
+        setState({
+          paying: false,
+          stripeDialog: true,
+          clientSecret: paymentData.client_secret,
+          publishableKey: paymentData.publishable_key,
+          customer: paymentData.customer || null,
+        });
+        return;
+      } catch (err: any) {
+        const error = formatError(err);
+        Toast.error(error);
+        setState({ paying: false });
+        onError?.(error);
+        return;
+      }
+    }
+
+    setState({ paying: false });
+    if (onExternalPayment) {
+      onExternalPayment(invoice?.id);
+      return;
+    }
+
+    Toast.error(t('payment.customer.invoice.payError'));
+    onError?.(new Error('EXTERNAL_PAYMENT_HANDLER_NOT_PROVIDED'));
+  };
+
+  const handleConfirmCancel = () => {
+    setState({ confirmDialog: false, paying: false });
+    onClose?.();
+  };
+
+  const handleStripeConfirm = () => {
+    Toast.success(t('payment.customer.invoice.payProcessing'));
+    setState({
+      paying: false,
+      stripeDialog: false,
+      clientSecret: null,
+      publishableKey: null,
+      customer: null,
+    });
+
+    setTimeout(() => {
+      onSuccess?.();
+    }, 2000);
+  };
+
+  const handleStripeCancel = () => {
+    setState({
+      paying: false,
+      stripeDialog: false,
+      clientSecret: null,
+      publishableKey: null,
+      customer: null,
+    });
+    onClose?.();
+  };
+
+  return (
+    <>
+      {children?.(handlePay, state.paying)}
+
+      {state.confirmDialog && (
+        <Dialog
+          open={state.confirmDialog}
+          title={t('payment.customer.invoice.paymentConfirmTitle')}
+          onClose={handleConfirmCancel}
+          maxWidth="sm"
+          PaperProps={{
+            style: {
+              minHeight: 0,
+            },
+          }}
+          actions={[
+            <Button key="cancel" variant="outlined" onClick={handleConfirmCancel}>
+              {t('common.cancel')}
+            </Button>,
+            <Button key="continue" variant="contained" onClick={proceedWithPayment}>
+              {t('payment.customer.invoice.continue')}
+            </Button>,
+          ]}>
+          <Typography variant="body1" sx={{ color: 'text.secondary', mt: -2 }}>
+            {t('payment.customer.invoice.paymentConfirmDescription')}
+          </Typography>
+        </Dialog>
+      )}
+
+      {state.stripeDialog && state.clientSecret && state.publishableKey && state.customer && (
+        <StripeForm
+          clientSecret={state.clientSecret}
+          intentType="setup_intent"
+          publicKey={state.publishableKey}
+          customer={state.customer}
+          mode="setup"
+          title={t('payment.customer.invoice.pay')}
+          submitButtonText={t('common.submit')}
+          onConfirm={handleStripeConfirm}
+          onCancel={handleStripeCancel}
+          returnUrl={window.location.href}
+        />
+      )}
+    </>
+  );
+}

package/src/history/invoice/list.tsx

@@ -20,6 +20,7 @@ import Status from '../../components/status';
 import { usePaymentContext } from '../../contexts/payment';
 import { useSubscription } from '../../hooks/subscription';
 import api from '../../libs/api';
+import StripePaymentAction from '../../components/stripe-payment-action';
 import {
   formatBNStr,
   formatError,
@@ -323,11 +324,39 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
           const isVoid = invoice.status === 'void';
 
           if (action && !hidePay) {
-            return connect ? (
-              <Button variant="text" size="small" onClick={() => onPay(invoice.id)} sx={{ color: 'text.link' }}>
-                {t('payment.customer.invoice.pay')}
-              </Button>
-            ) : (
+            if (connect) {
+              if (invoice.paymentMethod?.type === 'stripe') {
+                return (
+                  <StripePaymentAction
+                    invoice={invoice}
+                    paymentMethod={invoice.paymentMethod as any}
+                    onSuccess={() => {
+                      refresh();
+                    }}>
+                    {(handlePay, paying) => (
+                      <Button
+                        variant="text"
+                        size="small"
+                        sx={{ color: 'text.link' }}
+                        disabled={paying}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handlePay();
+                        }}>
+                        {paying ? t('payment.checkout.processing') : t('payment.customer.invoice.pay')}
+                      </Button>
+                    )}
+                  </StripePaymentAction>
+                );
+              }
+              return (
+                <Button variant="text" size="small" onClick={() => onPay(invoice.id)} sx={{ color: 'text.link' }}>
+                  {t('payment.customer.invoice.pay')}
+                </Button>
+              );
+            }
+            return (
               <Button
                 component="a"
                 variant="text"
@@ -601,14 +630,39 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                   }}>
                   {action ? (
                     connect ? (
-                      <Button
-                        variant="contained"
-                        color="primary"
-                        size="small"
-                        onClick={() => onPay(invoice.id)}
-                        sx={{ whiteSpace: 'nowrap' }}>
-                        {t('payment.customer.invoice.pay')}
-                      </Button>
+                      invoice.paymentMethod?.type === 'stripe' ? (
+                        <StripePaymentAction
+                          invoice={invoice}
+                          paymentMethod={invoice.paymentMethod as any}
+                          onSuccess={async () => {
+                            await reloadAsync();
+                          }}>
+                          {(handlePay, paying) => (
+                            <Button
+                              variant="contained"
+                              color="primary"
+                              size="small"
+                              sx={{ whiteSpace: 'nowrap' }}
+                              disabled={paying}
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handlePay();
+                              }}>
+                              {paying ? t('payment.checkout.processing') : t('payment.customer.invoice.pay')}
+                            </Button>
+                          )}
+                        </StripePaymentAction>
+                      ) : (
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          size="small"
+                          onClick={() => onPay(invoice.id)}
+                          sx={{ whiteSpace: 'nowrap' }}>
+                          {t('payment.customer.invoice.pay')}
+                        </Button>
+                      )
                     ) : (
                       <Button
                         component="a"

package/src/index.ts

@@ -32,6 +32,7 @@ import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
+import StripePaymentAction from './components/stripe-payment-action';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
@@ -93,6 +94,7 @@ export {
   TruncatedText,
   Link,
   OverdueInvoicePayment,
+  StripePaymentAction,
   PaymentBeneficiaries,
   LoadingButton,
   DonateDetails,
@@ -109,3 +111,4 @@ export {
 };
 
 export type { CountrySelectProps } from './components/country-select';
+export type { StripePaymentActionProps } from './components/stripe-payment-action';

package/src/libs/util.ts

@@ -1085,8 +1085,8 @@ export function formatTotalPrice({
     };
   }
 
-  const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
   const currency: TPaymentCurrency = price?.currency ?? {};
+  const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
 
   const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol} `;
 
@@ -1336,3 +1336,20 @@ export function showStaking(method: TPaymentMethod, currency: TPaymentCurrency,
   }
   return false;
 }
+
+export function formatLinkWithLocale(url: string, locale?: string) {
+  if (!locale || !url) {
+    return url;
+  }
+  try {
+    const urlObj = new URL(url);
+    urlObj.searchParams.set('locale', locale);
+    return urlObj.toString();
+  } catch (error) {
+    if (/[?&]locale=[^&]*/.test(url)) {
+      return url.replace(/([?&])locale=[^&]*/, `$1locale=${locale}`);
+    }
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}locale=${locale}`;
+  }
+}

package/src/locales/en.tsx

@@ -111,6 +111,7 @@ export default flat({
     },
     paymentMethod: 'Payment Method',
     viewInvoice: 'View Invoice',
+    submit: 'Submit',
   },
   payment: {
     checkout: {
@@ -472,7 +473,11 @@ export default flat({
         amountApplied: 'Applied Credit',
         pay: 'Pay this invoice',
         paySuccess: 'You have successfully paid the invoice',
+        payProcessing: 'Payment is being processed, please refresh in a moment',
         payError: 'Failed to pay the invoice',
+        sync: 'Sync Status',
+        syncing: 'Syncing...',
+        syncSuccess: 'Synced successfully',
         renew: 'Renew the subscription',
         renewSuccess: 'You have successfully renewed the subscription',
         renewError: 'Failed to renew the subscription',
@@ -482,6 +487,16 @@ export default flat({
         emptyList: 'No Invoices',
         noPaymentRequired: 'No Payment Required',
         payBatch: 'Pay Due Invoices',
+        stripePayDescription: 'Complete payment using your saved payment method or add a new one.',
+        amount: 'Amount',
+        paymentConfirmTitle: 'Payment Confirmation',
+        paymentConfirmDescription:
+          'After completing this payment, the payment method you use will be automatically set as the default for this subscription. Additionally, we will retry payment for any other unpaid invoices associated with this subscription.',
+        continue: 'Continue',
+      },
+      overduePayment: {
+        setupPaymentDescription: 'Use your saved card or add a new one to complete payment via Stripe.',
+        totalAmount: 'Total Amount',
       },
       payment: {
         empty: 'There are no payments',
@@ -554,6 +569,7 @@ export default flat({
         empty: 'There are no overdue invoices for your subscription {name}.',
         retry: 'Retry',
         paid: 'Paid',
+        processing: 'Processing',
       },
     },
   },

package/src/locales/zh.tsx

@@ -111,6 +111,7 @@ export default flat({
     },
     paymentMethod: '支付方式',
     viewInvoice: '查看账单',
+    submit: '提交',
   },
   payment: {
     checkout: {
@@ -460,7 +461,11 @@ export default flat({
         amountApplied: '余额变更',
         pay: '支付此账单',
         paySuccess: '支付成功',
+        payProcessing: '支付处理中，请稍候刷新查看',
         payError: '支付失败',
+        sync: '同步状态',
+        syncing: '同步中...',
+        syncSuccess: '同步成功',
         renew: '恢复订阅',
         renewSuccess: '订阅恢复成功',
         renewError: '订阅恢复失败',
@@ -470,6 +475,10 @@ export default flat({
         emptyList: '没有账单',
         noPaymentRequired: '无需支付',
         payBatch: '支付欠款',
+        paymentConfirmTitle: '支付确认',
+        paymentConfirmDescription:
+          '完成本次支付后，您使用的支付方式将自动设置为该订阅的默认支付方式。此外，我们还将对该订阅的其他欠费账单进行重试收费。',
+        continue: '继续',
       },
       payment: {
         empty: '没有支付记录',
@@ -541,6 +550,7 @@ export default flat({
         empty: '您的【{name}】订阅当前没有欠费账单',
         retry: '重新支付',
         paid: '已支付',
+        processing: '支付中',
       },
     },
   },

package/src/payment/form/stripe/form.tsx

@@ -20,6 +20,7 @@ export type StripeCheckoutFormProps = {
   mode: string;
   onConfirm: Function;
   returnUrl?: string;
+  submitButtonText?: string;
 };
 
 const PaymentElementContainer = styled('div')`
@@ -39,6 +40,7 @@ function StripeCheckoutForm({
   mode,
   onConfirm,
   returnUrl = '',
+  submitButtonText = '',
 }: StripeCheckoutFormProps) {
   const stripe = useStripe();
   const elements = useElements();
@@ -236,7 +238,7 @@ function StripeCheckoutForm({
           variant="contained"
           color="primary"
           size="large">
-          {t('payment.checkout.continue', { action: t(`payment.checkout.${mode}`) })}
+          {submitButtonText || t('payment.checkout.continue', { action: t(`payment.checkout.${mode}`) })}
         </LoadingButton>
       )}
       {state.message && <Typography sx={{ mt: 1, color: 'error.main' }}>{state.message}</Typography>}
@@ -263,6 +265,8 @@ export type StripeCheckoutProps = {
   onConfirm: Function;
   onCancel: Function;
   returnUrl?: string;
+  title?: string;
+  submitButtonText?: string;
 };
 export default function StripeCheckout({
   clientSecret,
@@ -273,6 +277,8 @@ export default function StripeCheckout({
   onConfirm,
   onCancel,
   returnUrl = '',
+  title = '',
+  submitButtonText = '',
 }: StripeCheckoutProps) {
   const stripePromise = loadStripe(publicKey);
   const { isMobile } = useMobile();
@@ -294,7 +300,7 @@ export default function StripeCheckout({
 
   return (
     <Dialog
-      title={t('payment.checkout.cardPay', { action: t(`payment.checkout.${mode}`) })}
+      title={title || t('payment.checkout.cardPay', { action: t(`payment.checkout.${mode}`) })}
       showCloseButton={state.closable}
       open={state.open}
       onClose={handleClose}
@@ -344,6 +350,7 @@ export default function StripeCheckout({
           customer={customer}
           onConfirm={onConfirm}
           returnUrl={returnUrl}
+          submitButtonText={submitButtonText}
         />
       </Elements>
     </Dialog>

package/src/payment/product-item.tsx

@@ -249,7 +249,7 @@ export default function ProductItem({
     }
 
     const pendingAmountBN = new BN(pendingAmount || '0');
-    const creditAmountBN = fromTokenToUnit(new BN(creditAmount), creditCurrency?.decimal || 2);
+    const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
     const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
     const currentPurchaseCreditBN = creditAmountBN.mul(new BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();

package/src/payment/summary.tsx

@@ -475,7 +475,7 @@ export default function PaymentSummary({
             sx={{
               justifyContent: 'space-between',
               alignItems: 'center',
-              ...(staking > 0 && {
+              ...(+staking > 0 && {
                 borderTop: '1px solid',
                 borderColor: 'divider',
                 pt: 1,