payment-kit 1.14.5 → 1.14.7

package/api/src/libs/refund.ts

@@ -24,6 +24,9 @@ export async function getRefundAmountSetup({
       [Op.not]: 'canceled',
     },
     payment_intent_id: paymentIntentId,
+    amount: {
+      [Op.gt]: '0',
+    },
   };
   if (currencyId) {
     where.currency_id = currencyId;

package/api/src/libs/util.ts

@@ -248,3 +248,15 @@ export function getConnectQueryParam({ userDid }: { userDid: string }): {
     '__did-connect__': Buffer.from(JSON.stringify(data), 'utf8').toString('base64'),
   };
 }
+
+export function formatAmountPrecisionLimit(
+  amount: string,
+  precision: number = 6,
+  amountLabel: LiteralUnion<'Amount' | 'Price', string> = 'Amount'
+) {
+  const [, decimal] = amount.split('.');
+  if (decimal && decimal.length > precision) {
+    return `${amountLabel} decimal places must be less than or equal to ${precision}`;
+  }
+  return '';
+}

package/api/src/routes/checkout-sessions.ts

@@ -42,7 +42,7 @@ import {
   getDaysUntilDue,
   getSubscriptionCreateSetup,
 } from '../libs/subscription';
-import { CHECKOUT_SESSION_TTL, formatMetadata, getDataObjectFromQuery } from '../libs/util';
+import { CHECKOUT_SESSION_TTL, formatAmountPrecisionLimit, formatMetadata, getDataObjectFromQuery } from '../libs/util';
 import { invoiceQueue } from '../queues/invoice';
 import { paymentQueue } from '../queues/payment';
 import type { LineItem, TPriceExpanded, TProductExpanded } from '../store/models';
@@ -1189,6 +1189,14 @@ router.put('/:id/amount', ensureCheckoutSessionOpen, async (req, res) => {
           if (input > Number(maximum)) {
             return res.status(400).json({ error: 'Custom amount should not be smaller than maximum' });
           }
+          const precisionError = formatAmountPrecisionLimit(
+            input.toString(),
+            currency.maximum_precision || 6,
+            'Custom amount'
+          );
+          if (precisionError) {
+            return res.status(400).json({ error: precisionError });
+          }
         } else if (presets?.some((x) => Number(x) === input) === false) {
           return res.status(400).json({ error: 'Custom amount must be one of the presets' });
         }

package/api/src/routes/payment-intents.ts

@@ -246,11 +246,12 @@ const refundRequestSchema = Joi.object({
   metadata: Joi.object().optional(),
 });
 
+// eslint-disable-next-line consistent-return
 router.put('/:id/refund', authAdmin, async (req, res) => {
   try {
     const { error } = refundRequestSchema.validate(req.body);
     if (error) {
-      res.status(400).json({ error: `payment intent refund request invalid: ${error.message}` });
+      return res.status(400).json({ error: `payment intent refund request invalid: ${error.message}` });
     }
     const doc = await PaymentIntent.findOne({
       where: { id: req.params.id },

package/api/src/routes/payment-methods.ts

@@ -106,8 +106,8 @@ router.post('/', auth, async (req, res) => {
       raw.settings.ethereum.chain_id = network.chainId.toString();
       logger.info('ethereum api endpoint verified', { settings: raw.settings.ethereum, network, blockNumber });
     } catch (err) {
-      console.error(err);
-      return res.status(400).json({ error: 'ethereum api_host is required' });
+      logger.error('verify ethereum api endpoint failed', err);
+      return res.status(400).json({ error: err.message });
     }
 
     const exist = await PaymentMethod.findOne({

package/api/src/routes/settings.ts

@@ -8,7 +8,7 @@ import { PaymentMethod } from '../store/models/payment-method';
 const router = Router();
 
 router.get('/', async (req, res) => {
-  const attributes = ['id', 'name', 'symbol', 'decimal', 'logo', 'payment_method_id'];
+  const attributes = ['id', 'name', 'symbol', 'decimal', 'logo', 'payment_method_id', 'maximum_precision'];
   const where: WhereOptions<PaymentMethod> = { livemode: req.livemode, active: true };
 
   const methods = await PaymentMethod.findAll({
@@ -26,7 +26,7 @@ router.get('/', async (req, res) => {
 
   res.json({
     paymentMethods: methods.map((x) =>
-      pick(x, ['id', 'name', 'type', 'logo', 'payment_currencies', 'default_currency_id'])
+      pick(x, ['id', 'name', 'type', 'logo', 'payment_currencies', 'default_currency_id', 'maximum_precision'])
     ),
     baseCurrency: await PaymentCurrency.findOne({
       where: { is_base_currency: true, livemode: req.livemode },

package/api/src/store/migrations/20240729-payment-currency.ts

@@ -0,0 +1,22 @@
+import { DataTypes } from 'sequelize';
+
+import { Migration, safeApplyColumnChanges } from '../migrate';
+
+export const up: Migration = async ({ context }) => {
+  await safeApplyColumnChanges(context, {
+    payment_links: [
+      {
+        name: 'maximum_precision',
+        field: {
+          type: DataTypes.NUMBER,
+          allowNull: true,
+          defaultValue: 6,
+        },
+      },
+    ],
+  });
+};
+
+export const down: Migration = async ({ context }) => {
+  await context.removeColumn('payment_currencies', 'maximum_precision');
+};

package/api/src/store/migrations/20240730-payment-currency.ts

@@ -0,0 +1,26 @@
+import { DataTypes } from 'sequelize';
+
+import { Migration, safeApplyColumnChanges } from '../migrate';
+
+export const up: Migration = async ({ context }) => {
+  await safeApplyColumnChanges(context, {
+    payment_currencies: [
+      {
+        name: 'maximum_precision',
+        field: {
+          type: DataTypes.NUMBER,
+          allowNull: true,
+          defaultValue: 6,
+        },
+      },
+    ],
+  });
+  const schema = await context.describeTable('payment_links');
+  if (schema.maximum_precision) {
+    await context.removeColumn('payment_links', 'maximum_precision');
+  }
+};
+
+export const down: Migration = async ({ context }) => {
+  await context.removeColumn('payment_currencies', 'maximum_precision');
+};

package/api/src/store/models/payment-currency.ts

@@ -29,6 +29,7 @@ export class PaymentCurrency extends Model<InferAttributes<PaymentCurrency>, Inf
   declare logo: string;
   declare symbol: string;
   declare decimal: number;
+  declare maximum_precision?: number;
 
   declare minimum_payment_amount: string;
   declare maximum_payment_amount: string;
@@ -87,6 +88,11 @@ export class PaymentCurrency extends Model<InferAttributes<PaymentCurrency>, Inf
       type: DataTypes.NUMBER,
       defaultValue: 2,
     },
+    maximum_precision: {
+      type: DataTypes.NUMBER,
+      allowNull: true,
+      defaultValue: 6,
+    },
     minimum_payment_amount: {
       type: DataTypes.STRING(32),
       defaultValue: '0',

package/api/tests/libs/util.spec.ts

@@ -5,6 +5,7 @@ import dayjs from '../../src/libs/dayjs';
 import {
   createCodeGenerator,
   createIdGenerator,
+  formatAmountPrecisionLimit,
   formatMetadata,
   getDataObjectFromQuery,
   getNextRetry,
@@ -202,3 +203,40 @@ describe('getWhereFromKvQuery', () => {
     });
   });
 });
+
+describe('formatAmountPrecisionLimit', () => {
+  it('should return an empty string if the decimal places are within the precision limit', () => {
+    const result = formatAmountPrecisionLimit('123.456', 6);
+    expect(result).toBe('');
+  });
+
+  it('should return an error message if the decimal places exceed the precision limit', () => {
+    const result = formatAmountPrecisionLimit('123.456789', 5);
+    expect(result).toBe('Amount decimal places must be less than or equal to 5');
+  });
+
+  it('should use the default precision of 6 if not provided', () => {
+    const result = formatAmountPrecisionLimit('123.456789');
+    expect(result).toBe('');
+  });
+
+  it('should use the provided amountLabel in the error message', () => {
+    const result = formatAmountPrecisionLimit('123.456789', 5, 'Price');
+    expect(result).toBe('Price decimal places must be less than or equal to 5');
+  });
+
+  it('should return an empty string if there are no decimal places', () => {
+    const result = formatAmountPrecisionLimit('123');
+    expect(result).toBe('');
+  });
+
+  it('should handle an empty string as amount', () => {
+    const result = formatAmountPrecisionLimit('');
+    expect(result).toBe('');
+  });
+
+  it('should handle an amount with no decimal part', () => {
+    const result = formatAmountPrecisionLimit('123.');
+    expect(result).toBe('');
+  });
+});

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.14.5
+version: 1.14.7
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.5",
+  "version": "1.14.7",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -52,7 +52,7 @@
     "@arcblock/validator": "^1.18.124",
     "@blocklet/js-sdk": "1.16.28",
     "@blocklet/logger": "1.16.28",
-    "@blocklet/payment-react": "1.14.5",
+    "@blocklet/payment-react": "1.14.7",
     "@blocklet/sdk": "1.16.28",
     "@blocklet/ui-react": "^2.10.3",
     "@blocklet/uploader": "^0.1.20",
@@ -118,7 +118,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.28",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.14.5",
+    "@blocklet/payment-types": "1.14.7",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -160,5 +160,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "e4715805a87b2e4e3622564f4bc26578f19211e4"
+  "gitHead": "683097ae01a97a7b303194d68cdabbae24201c14"
 }

package/src/components/payment-intent/actions.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { ConfirmDialog, api, formatBNStr, formatError } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatAmountPrecisionLimit, formatBNStr, formatError } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { useRequest, useSetState } from 'ahooks';
 import { useNavigate } from 'react-router-dom';
@@ -39,11 +39,26 @@ const fetchRefundData = (id: string) => {
 };
 
 function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; refundMaxAmount: string }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { control, getFieldState, setValue } = useFormContext();
 
-  const positive = (v: number) => {
-    return Number(v) > 0 && Number(v) <= Number(refundMaxAmount);
+  const validateAmount = (v: number) => {
+    if (Number(v) <= 0 || Number(v) > Number(refundMaxAmount)) {
+      return t('admin.paymentIntent.refundForm.amountRange', {
+        min: 0,
+        max: refundMaxAmount,
+        symbol: data.paymentCurrency.symbol,
+      });
+    }
+    const validPrecision = formatAmountPrecisionLimit(
+      v.toString(),
+      locale,
+      data.paymentCurrency.maximum_precision || 6
+    );
+    if (validPrecision) {
+      return validPrecision;
+    }
+    return true;
   };
   return (
     <Stack direction="column" spacing={1} alignItems="flex-start" sx={{ width: 400 }}>
@@ -90,6 +105,9 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
         <Controller
           name="refund.amount"
           control={control}
+          rules={{
+            validate: validateAmount,
+          }}
           render={({ field }) => (
             <TextField
               {...field}
@@ -98,16 +116,8 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
               type="number"
               fullWidth
               placeholder={t('admin.paymentIntent.refundForm.amount')}
-              error={!!getFieldState('refund.amount').error || !positive(field.value)}
-              helperText={
-                !positive(field.value)
-                  ? t('admin.paymentIntent.refundForm.amountRange', {
-                      min: 0,
-                      max: refundMaxAmount,
-                      symbol: data.paymentCurrency.symbol,
-                    })
-                  : getFieldState('refund.amount').error?.message
-              }
+              error={!!getFieldState('refund.amount').error}
+              helperText={getFieldState('refund.amount').error?.message}
               InputProps={{
                 endAdornment: <InputAdornment position="end">{data.paymentCurrency.symbol}</InputAdornment>,
               }}
@@ -126,6 +136,9 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
       <Controller
         name="refund.description"
         control={control}
+        rules={{
+          required: t('common.required'),
+        }}
         render={({ field }) => (
           <TextField
             {...field}
@@ -136,6 +149,8 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
             minRows={2}
             maxRows={4}
             placeholder={t('admin.paymentIntent.refundForm.description')}
+            error={!!getFieldState('refund.description').error}
+            helperText={getFieldState('refund.description').error?.message}
           />
         )}
       />
@@ -146,7 +161,7 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
 export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
-  const { reset, getValues, setValue } = useFormContext();
+  const { reset, getValues, setValue, handleSubmit } = useFormContext();
   const [state, setState] = useSetState({
     action: '',
     loading: false,
@@ -219,7 +234,7 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
       <Actions variant={variant} actions={actions} />
       {state.action === 'refund' && (
         <ConfirmDialog
-          onConfirm={onRefund}
+          onConfirm={handleSubmit(onRefund)}
           onCancel={() => setState({ action: '' })}
           title={t('admin.paymentIntent.refund')}
           message={<RefundForm data={data} refundMaxAmount={refundMaxAmount} />}
@@ -232,6 +247,7 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
 
 export default function PaymentIntentActions(props: Props) {
   const methods = useForm({
+    mode: 'onChange',
     defaultValues: {
       refund: {
         reason: 'requested_by_admin',

package/src/components/price/form.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { findCurrency, usePaymentContext } from '@blocklet/payment-react';
+import { findCurrency, formatAmountPrecisionLimit, usePaymentContext } from '@blocklet/payment-react';
 import type {
   InferFormType,
   PriceRecurring,
@@ -98,7 +98,7 @@ function stripeCurrencyValidate(v: number, currency: TPaymentCurrencyExpanded |
 export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
 
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { control, setValue, getFieldState } = useFormContext();
   const { settings, livemode } = usePaymentContext();
 
@@ -109,7 +109,6 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const isMetered = useWatch({ control, name: getFieldName('recurring.usage_type') }) === 'metered';
   const isCustomInterval = useWatch({ control, name: getFieldName('recurring.interval_config') }) === 'month_2';
   const model = useWatch({ control, name: getFieldName('model') });
-  const positive = (v: number) => v >= 0;
   const quantityPositive = (v: number | undefined) => !v || v.toString().match(/^(0|[1-9]\d*)$/);
   const intervalCountPositive = (v: number) => Number.isInteger(Number(v)) && v > 0;
 
@@ -119,6 +118,17 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
 
   const isLocked = priceLocked && window.blocklet?.PAYMENT_CHANGE_LOCKED_PRICE !== '1';
 
+  const validateAmount = (v: number, currency: { maximum_precision?: number }) => {
+    if (Number(v) < 0) {
+      return t('admin.price.unit_amount.positive');
+    }
+    const validPrecision = formatAmountPrecisionLimit(v.toString(), locale, currency?.maximum_precision || 6);
+    if (validPrecision) {
+      return validPrecision;
+    }
+    return true;
+  };
+
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
       {isLocked && <Alert severity="info">{t('admin.price.locked')}</Alert>}
@@ -154,7 +164,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           control={control}
           rules={{
             required: t('admin.price.unit_amount.required'),
-            validate: (v) => (Number(v) > 0 ? true : t('admin.price.unit_amount.positive')),
+            validate: (v) => validateAmount(v, settings.baseCurrency),
           }}
           disabled={isLocked}
           render={({ field }) => (
@@ -174,12 +184,8 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                 type="number"
                 size="small"
                 sx={{ width: INPUT_WIDTH }}
-                error={!!getFieldState(getFieldName('unit_amount')).error || !positive(field.value)}
-                helperText={
-                  !positive(field.value)
-                    ? t('admin.price.unit_amount.positive')
-                    : getFieldState(getFieldName('unit_amount')).error?.message
-                }
+                error={!!getFieldState(getFieldName('unit_amount')).error}
+                helperText={getFieldState(getFieldName('unit_amount')).error?.message}
                 InputProps={{
                   endAdornment: (
                     <InputAdornment position="end">
@@ -227,7 +233,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                 <Controller
                   name={fieldName}
                   control={control}
-                  rules={{ required: t('admin.price.unit_amount.required') }}
+                  rules={{
+                    required: t('admin.price.unit_amount.required'),
+                    validate: (v) => validateAmount(v, currency ?? {}),
+                  }}
                   disabled={isLocked}
                   render={({ field }) => {
                     const hasStripError = !stripeCurrencyValidate(field.value, currency);

package/src/components/product/add-price.tsx

@@ -19,14 +19,22 @@ export default function AddPrice({
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const methods = useForm<Price>({
+    mode: 'onChange',
     defaultValues: {
       ...DEFAULT_PRICE,
       currency_id: settings.baseCurrency.id,
     },
   });
 
-  const { handleSubmit, reset } = methods;
+  const {
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
   const onSubmit = () => {
+    if (Object.keys(errors).length > 0) {
+      return;
+    }
     handleSubmit(async (formData: any) => {
       await onSave(formData);
       reset();

package/src/components/product/create.tsx

@@ -23,6 +23,7 @@ export default function CreateProduct({
   const { settings } = usePaymentContext();
   const [state, setState] = useSetState({ loading: false });
   const methods = useForm<Product>({
+    mode: 'onChange',
     defaultValues: {
       type: 'service',
       name: '',
@@ -36,7 +37,12 @@ export default function CreateProduct({
     },
   });
 
-  const { control, handleSubmit, reset } = methods;
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
   const prices = useFieldArray({ control, name: 'prices' });
 
   const onCreate = (data: Product) => {
@@ -56,6 +62,9 @@ export default function CreateProduct({
   };
 
   const onSubmit = () => {
+    if (Object.keys(errors).length > 0) {
+      return;
+    }
     handleSubmit(async (formData: any) => {
       await onCreate(formData);
       await reset();

package/src/components/product/edit-price.tsx

@@ -24,6 +24,7 @@ export default function EditPrice({
 }) {
   const { t } = useLocaleContext();
   const methods = useForm<Price>({
+    mode: 'onChange',
     defaultValues: {
       ...price,
       unit_amount: fromUnitToToken(price.unit_amount, price.currency.decimal),
@@ -46,8 +47,15 @@ export default function EditPrice({
     },
   });
 
-  const { handleSubmit, reset } = methods;
+  const {
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
   const onSubmit = () => {
+    if (Object.keys(errors).length > 0) {
+      return;
+    }
     handleSubmit(async (formData: any) => {
       if (
         Number(formData.quantity_available) > 0 &&

package/src/pages/admin/payments/refunds/detail.tsx

@@ -19,6 +19,7 @@ import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { Link } from 'react-router-dom';
 
+import { startCase } from 'lodash';
 import Copyable from '../../../../components/copyable';
 import Currency from '../../../../components/currency';
 import CustomerLink from '../../../../components/customer/link';
@@ -128,7 +129,21 @@ export default function RefundDetail(props: { id: string }) {
               <Stack direction="row" alignItems="center" spacing={1}>
                 <Status label={data.status} color={getRefundStatusColor(data.status)} />
                 {data.last_attempt_error && (
-                  <Tooltip title={<pre>{JSON.stringify(data.last_attempt_error, null, 2)}</pre>}>
+                  <Tooltip
+                    title={
+                      <pre>
+                        {JSON.stringify(
+                          {
+                            ...data.last_attempt_error,
+                            next_attempt: data.next_attempt ? formatTime(data.next_attempt * 1000) : '-',
+                            attempt_count: data.attempt_count,
+                            type: startCase(data.last_attempt_error?.type),
+                          },
+                          null,
+                          2
+                        )}
+                      </pre>
+                    }>
                     <InfoOutlined fontSize="small" color="error" />
                   </Tooltip>
                 )}

package/src/pages/admin/products/prices/actions.tsx

@@ -131,8 +131,8 @@ export default function PriceActions({ data, onChange, variant, setAsDefault }:
       color: 'text.primary',
       disabled: true,
     },
-    { label: 'Create payment link', handler: onCreatePaymentLink, color: 'primary' },
-    { label: 'Create pricing table', handler: onCreatePricingTable, color: 'primary' },
+    { label: t('admin.paymentLink.add'), handler: onCreatePaymentLink, color: 'primary' },
+    { label: t('admin.pricingTable.add'), handler: onCreatePricingTable, color: 'primary' },
   ];
 
   if (setAsDefault) {

package/src/pages/admin/products/prices/list.tsx

@@ -100,7 +100,7 @@ export default function PricesList({ product, onChange }: { product: Product; on
         sort: false,
         customBodyRenderLite: (_: any, index: number) => {
           const price = product.prices[index] as any;
-          return <PriceActions data={price} onChange={onChange} setAsDefault={price.id !== product.default_price_id} />;
+          return <PriceActions data={price} onChange={onChange} setAsDefault={price.id === product.default_price_id} />;
         },
       },
     },

package/src/pages/admin/products/products/create.tsx

@@ -20,6 +20,7 @@ export default function ProductsCreate() {
   const { settings } = usePaymentContext();
 
   const methods = useForm<Product>({
+    mode: 'onChange',
     defaultValues: {
       type: 'service',
       name: '',
@@ -32,7 +33,7 @@ export default function ProductsCreate() {
       metadata: [],
     },
   });
-  const { control, handleSubmit, getValues } = methods;
+  const { control, handleSubmit, getValues, clearErrors } = methods;
 
   const prices = useFieldArray({ control, name: 'prices' });
   const getPrice = (index: number) => methods.getValues().prices[index];
@@ -56,6 +57,7 @@ export default function ProductsCreate() {
     <DrawerForm
       icon={<AddOutlined />}
       text={t('admin.product.add')}
+      onClose={() => clearErrors()}
       width={640}
       addons={
         <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>