payment-kit 1.14.37 → 1.14.39

package/api/src/integrations/arcblock/stake.ts

@@ -189,6 +189,7 @@ export async function getStakeSummaryByDid(did: string, livemode: boolean = true
     return {};
   }
 
+  // FIXME: should use listStakes to find all stakes and summarize here
   const address = toStakeAddress(did, wallet.address);
   const results: GroupedBN = {};
   await Promise.all(

package/api/src/integrations/stripe/resource.ts

@@ -44,7 +44,7 @@ export async function ensureStripeProduct(internal: Product, method: PaymentMeth
     attrs.unit_label = internal.unit_label;
   }
   if (internal.statement_descriptor) {
-    attrs.statement_descriptor_suffix = internal.statement_descriptor;
+    attrs.statement_descriptor_suffix = '';
   }
 
   const product = await client.products.create(attrs);
@@ -176,7 +176,7 @@ export async function ensureStripePaymentIntent(
         enabled: true,
         allow_redirects: 'never',
       },
-      statement_descriptor_suffix: internal.statement_descriptor,
+      statement_descriptor_suffix: '',
       metadata: {
         appPid: env.appPid,
         id: internal.id,

package/api/src/libs/api.ts

@@ -163,13 +163,13 @@ function validateMetadataValue(value: any, helpers: any) {
 export const MetadataSchema = Joi.alternatives()
   .try(
     Joi.object()
-      .pattern(Joi.string().max(64), Joi.any().custom(validateMetadataValue, 'Custom Validation'))
+      .pattern(Joi.string().max(40), Joi.any().custom(validateMetadataValue, 'Custom Validation'))
       .min(0)
       .allow(null),
     Joi.array()
       .items(
         Joi.object({
-          key: Joi.string().max(64).required(),
+          key: Joi.string().max(40).required(),
           value: Joi.any().custom(validateMetadataValue, 'Custom Validation').required(),
         })
       )

package/api/src/libs/subscription.ts

@@ -30,7 +30,7 @@ import dayjs from './dayjs';
 import env from './env';
 import logger from './logger';
 import { getPriceCurrencyOptions, getPriceUintAmountByCurrency, getRecurringPeriod } from './session';
-import { getConnectQueryParam } from './util';
+import { getConnectQueryParam, getCustomerStakeAddress } from './util';
 
 export function getCustomerSubscriptionPageUrl({
   subscriptionId,
@@ -700,16 +700,25 @@ export async function getSubscriptionRemainingStakeSetup(
   paymentMethod: PaymentMethod,
   action: 'return' | 'slash' = 'return'
 ) {
+  const currency = await PaymentCurrency.findByPk(subscription.currency_id);
+  if (!currency) {
+    return {
+      total: '0',
+      return_amount: '0',
+      sender: '',
+    };
+  }
+
   const client = paymentMethod.getOcapClient();
   const { state } = await client.getStakeState({ address });
-  const currency = await PaymentCurrency.findByPk(subscription.currency_id);
-  if (!state.tokens || !currency) {
+  if (!state) {
     return {
       total: '0',
       return_amount: '0',
       sender: '',
     };
   }
+
   let total = new BN(state.tokens.find((x: any) => x.address === currency.contract)?.value || '0');
   if (action === 'slash') {
     // add revoked tokens to total
@@ -763,17 +772,18 @@ export async function checkRemainingStake(
       revoked: '0',
     };
   }
+
   const client = paymentMethod.getOcapClient();
   const { state } = await client.getStakeState({ address });
-
   if (!state) {
-    logger.warn('getStakeState failed in checkRemainingStake', { address, paymentMethod, paymentCurrency });
+    logger.warn('getStakeState failed in checkRemainingStake', { address });
     return {
       enough: false,
       staked: '0',
       revoked: '0',
     };
   }
+
   const staked = state.tokens?.find((x: any) => x.address === paymentCurrency.contract);
   const revoked = state.revokedTokens?.find((x: any) => x.address === paymentCurrency.contract);
   let total = new BN(0);
@@ -783,6 +793,7 @@ export async function checkRemainingStake(
   if (revoked) {
     total = total.add(new BN(revoked?.value || '0'));
   }
+
   return {
     enough: total.gte(new BN(amount)),
     staked,
@@ -805,3 +816,10 @@ export function getSubscriptionTrialSetup(data: Partial<SubscriptionData>, curre
     trialEnd,
   };
 }
+
+export async function getSubscriptionStakeAddress(subscription: Subscription, customerDid: string) {
+  return (
+    subscription.payment_details?.arcblock?.staking?.address ||
+    (await getCustomerStakeAddress(customerDid, subscription.id))
+  );
+}

package/api/src/libs/util.ts

@@ -2,11 +2,14 @@ import crypto from 'crypto';
 
 import { getUrl } from '@blocklet/sdk/lib/component';
 import env from '@blocklet/sdk/lib/env';
+import { getWalletDid } from '@blocklet/sdk/lib/did';
+import { toStakeAddress } from '@arcblock/did-util';
 import { customAlphabet } from 'nanoid';
 import type { LiteralUnion } from 'type-fest';
 import { withQuery } from 'ufo';
 
 import dayjs from './dayjs';
+import { blocklet, wallet } from './auth';
 
 export const OCAP_PAYMENT_TX_TYPE = 'fg:t:transfer_v2';
 
@@ -260,3 +263,12 @@ export function formatAmountPrecisionLimit(
   }
   return '';
 }
+
+export async function getCustomerStakeAddress(customerDid: string, nonce?: string) {
+  const { user } = await blocklet.getUser(customerDid, { enableConnectedAccount: true });
+  if (user) {
+    return toStakeAddress(getWalletDid(user), wallet.address, nonce);
+  }
+
+  return toStakeAddress(customerDid, wallet.address, nonce);
+}

package/api/src/queues/payment.ts

@@ -1,6 +1,5 @@
 import isEmpty from 'lodash/isEmpty';
 
-import { toStakeAddress } from '@arcblock/did-util';
 import { ensureStakedForGas } from '../integrations/arcblock/stake';
 import { transferErc20FromUser } from '../integrations/ethereum/token';
 import { createEvent } from '../libs/audit';
@@ -19,6 +18,7 @@ import {
   getMaxRetryCount,
   getMinRetryMail,
   getSubscriptionCreateSetup,
+  getSubscriptionStakeAddress,
   shouldCancelSubscription,
 } from '../libs/subscription';
 import { MAX_RETRY_COUNT, MIN_RETRY_MAIL, getNextRetry } from '../libs/util';
@@ -402,7 +402,7 @@ const handleStakeSlash = async (
     return;
   }
 
-  const address = toStakeAddress(customer.did, wallet.address, subscription.id);
+  const address = await getSubscriptionStakeAddress(subscription, customer.did);
   const slashAmount = paymentIntent.amount;
   const stakeEnough = await checkRemainingStake(paymentMethod, paymentCurrency, address, slashAmount);
   if (!stakeEnough.enough) {
@@ -432,7 +432,7 @@ const handleStakeSlash = async (
   const signed = await client.signSlashStakeTx({
     tx: {
       itx: {
-        address: toStakeAddress(customer.did, wallet.address, subscription.id),
+        address,
         outputs: [{ owner: wallet.address, tokens: [{ address: paymentCurrency.contract, value: slashAmount }] }],
         message: 'stake_slash_on_subscription_cancel',
         data: {

package/api/src/queues/refund.ts

@@ -1,6 +1,5 @@
-import { toStakeAddress } from '@arcblock/did-util';
-import { isRefundReasonSupportedByStripe } from '@api/libs/refund';
-import { checkRemainingStake } from '@api/libs/subscription';
+import { isRefundReasonSupportedByStripe } from '../libs/refund';
+import { checkRemainingStake, getSubscriptionStakeAddress } from '../libs/subscription';
 import { sendErc20ToUser } from '../integrations/ethereum/token';
 import { wallet } from '../libs/auth';
 import CustomError from '../libs/error';
@@ -14,6 +13,7 @@ import { PaymentCurrency } from '../store/models/payment-currency';
 import { PaymentIntent } from '../store/models/payment-intent';
 import { PaymentMethod } from '../store/models/payment-method';
 import { Refund } from '../store/models/refund';
+import { Subscription } from '../store/models/subscription';
 import type { PaymentError } from '../store/models/types';
 
 type RefundJob = {
@@ -313,7 +313,8 @@ const handleStakeReturnJob = async (
         return;
       }
       const client = paymentMethod.getOcapClient();
-      const address = toStakeAddress(customer.did, wallet.address, refund.subscription_id);
+      const subscription = await Subscription.findByPk(refund.subscription_id);
+      const address = await getSubscriptionStakeAddress(subscription!, customer.did);
       const stakeEnough = await checkRemainingStake(paymentMethod, paymentCurrency, address, refund.amount);
       if (!stakeEnough.enough) {
         logger.warn('Stake return aborted because stake is not enough ', {

package/api/src/queues/subscription.ts

@@ -1,4 +1,3 @@
-import { toStakeAddress } from '@arcblock/did-util';
 import type { LiteralUnion } from 'type-fest';
 
 import { ensurePassportRevoked } from '../integrations/blocklet/passport';
@@ -15,6 +14,7 @@ import {
   checkRemainingStake,
   getSubscriptionCycleAmount,
   getSubscriptionCycleSetup,
+  getSubscriptionStakeAddress,
   getSubscriptionStakeReturnSetup,
   getSubscriptionStakeSlashSetup,
   shouldCancelSubscription,
@@ -329,7 +329,7 @@ const handleStakeSlashAfterCancel = async (subscription: Subscription) => {
 
   // check the staking
   const client = method.getOcapClient();
-  const address = toStakeAddress(customer.did, wallet.address, subscription.id);
+  const address = await getSubscriptionStakeAddress(subscription, customer.did);
   const { state } = await client.getStakeState({ address });
   if (!state || !state.data?.value) {
     logger.warn('Stake slashing aborted because no staking state', {
@@ -374,7 +374,7 @@ const handleStakeSlashAfterCancel = async (subscription: Subscription) => {
   const signed = await client.signSlashStakeTx({
     tx: {
       itx: {
-        address: toStakeAddress(customer.did, wallet.address, subscription.id),
+        address,
         outputs: [{ owner: wallet.address, tokens: [{ address: currency.contract, value: invoice.amount_remaining }] }],
         message: 'uncollectible_past_due_invoice',
         data: {
@@ -530,7 +530,6 @@ const slashStakeOnCancel = async (subscription: Subscription) => {
     });
     return;
   }
-  const address = toStakeAddress(customer.did, wallet.address, subscription.id);
   const currency = await PaymentCurrency.findByPk(subscription.currency_id);
   if (!currency) {
     logger.warn('Stake slashing skipped because currency not found', {
@@ -539,6 +538,7 @@ const slashStakeOnCancel = async (subscription: Subscription) => {
     });
     return;
   }
+  const address = await getSubscriptionStakeAddress(subscription, customer.did);
   const result = await getSubscriptionStakeSlashSetup(subscription, address, paymentMethod);
   const stakeEnough = await checkRemainingStake(paymentMethod, currency, address, result.return_amount);
   if (!stakeEnough.enough) {

package/api/src/routes/connect/shared.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/indent */
 /* eslint-disable prettier/prettier */
 import { toTypeInfo } from '@arcblock/did';
-import { toDelegateAddress, toStakeAddress } from '@arcblock/did-util';
+import { toDelegateAddress } from '@arcblock/did-util';
 import type { Transaction } from '@ocap/client';
 import { BN, fromTokenToUnit, toBase58 } from '@ocap/util';
 import { fromPublicKey } from '@ocap/wallet';
@@ -21,7 +21,7 @@ import {
   getSubscriptionItemPrice,
   getSubscriptionStakeSetup,
 } from '../../libs/subscription';
-import { OCAP_PAYMENT_TX_TYPE } from '../../libs/util';
+import { getCustomerStakeAddress, OCAP_PAYMENT_TX_TYPE } from '../../libs/util';
 import { invoiceQueue } from '../../queues/invoice';
 import type { TLineItemExpanded } from '../../store/models';
 import { CheckoutSession } from '../../store/models/checkout-session';
@@ -745,7 +745,7 @@ export async function getStakeTxClaim({
   if (paymentMethod.type === 'arcblock') {
     // create staking data
     const client = paymentMethod.getOcapClient();
-    const address = toStakeAddress(userDid, wallet.address, subscription.id);
+    const address = await getCustomerStakeAddress(userDid, subscription.id);
     const { state } = await client.getStakeState({ address });
     const data = {
       type: 'json',
@@ -1026,7 +1026,7 @@ export async function executeOcapTransactions(
     type: 'delegate',
     staking: {
       tx_hash: stakingTxHash,
-      address: toStakeAddress(userDid, wallet.address, nonce),
+      address: await getCustomerStakeAddress(userDid, nonce),
     },
   };
 }

package/api/src/routes/products.ts

@@ -21,11 +21,19 @@ const auth = authenticate<Product>({ component: true, roles: ['owner', 'admin']
 const ProductAndPriceSchema = Joi.object({
   name: Joi.string().max(64).empty('').optional(),
   type: Joi.string().valid('service', 'good').empty('').optional(),
-  description: Joi.string().max(256).empty('').optional(),
+  description: Joi.string().max(250).empty('').optional(),
   images: Joi.any().optional(),
   metadata: MetadataSchema,
-  statement_descriptor: Joi.string().max(32).empty('').optional(),
-  unit_label: Joi.string().max(32).empty('').optional(),
+  statement_descriptor: Joi.string()
+    .max(22)
+    .pattern(/^(?=.*[A-Za-z])[^\u4e00-\u9fa5<>"’\\]*$/)
+    .messages({
+      'string.pattern.base':
+        'statement_descriptor should be at least one letter and cannot include Chinese characters and special characters such as <, >、"、’ or \\',
+    })
+    .empty('')
+    .optional(),
+  unit_label: Joi.string().max(12).empty('').optional(),
   nft_factory: Joi.string().max(40).allow(null).empty('').optional(),
   features: Joi.array()
     .items(Joi.object({ name: Joi.string().max(64).empty('').optional() }).unknown(true))

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

@@ -177,13 +177,11 @@ describe('MetadataSchema', () => {
 
   it('should invalidate an object with a key longer than 64 characters', () => {
     const data = {
-      ['a'.repeat(65)]: 'value1',
+      ['a'.repeat(41)]: 'value1',
     };
     const { error } = MetadataSchema.validate(data);
     expect(error).toBeDefined();
-    expect(error?.details?.[0]?.message).toMatch(
-      /"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" is not allowed/
-    );
+    expect(error?.details?.[0]?.message).toMatch(/"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" is not allowed/);
   });
 
   it('should invalidate an array with an object missing the key field', () => {

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.37
+version: 1.14.39
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.37",
+  "version": "1.14.39",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,34 +43,34 @@
   },
   "dependencies": {
     "@abtnode/cron": "1.16.30",
-    "@arcblock/did": "^1.18.132",
+    "@arcblock/did": "^1.18.135",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.23",
-    "@arcblock/did-util": "^1.18.132",
-    "@arcblock/jwt": "^1.18.132",
-    "@arcblock/ux": "^2.10.23",
-    "@arcblock/validator": "^1.18.132",
+    "@arcblock/did-connect": "^2.10.25",
+    "@arcblock/did-util": "^1.18.135",
+    "@arcblock/jwt": "^1.18.135",
+    "@arcblock/ux": "2.10.24",
+    "@arcblock/validator": "^1.18.135",
     "@blocklet/js-sdk": "1.16.30",
     "@blocklet/logger": "1.16.30",
-    "@blocklet/payment-react": "1.14.37",
+    "@blocklet/payment-react": "1.14.39",
     "@blocklet/sdk": "1.16.30",
-    "@blocklet/ui-react": "^2.10.23",
+    "@blocklet/ui-react": "^2.10.25",
     "@blocklet/uploader": "^0.1.27",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/styles": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.18.132",
-    "@ocap/client": "^1.18.132",
-    "@ocap/mcrypto": "^1.18.132",
-    "@ocap/util": "^1.18.132",
-    "@ocap/wallet": "^1.18.132",
+    "@ocap/asset": "^1.18.135",
+    "@ocap/client": "^1.18.135",
+    "@ocap/mcrypto": "^1.18.135",
+    "@ocap/util": "^1.18.135",
+    "@ocap/wallet": "^1.18.135",
     "@react-pdf/renderer": "^3.4.4",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
-    "axios": "^1.7.2",
+    "axios": "^1.7.5",
     "body-parser": "^1.20.2",
     "cls-hooked": "^4.2.2",
     "cookie-parser": "^1.4.6",
@@ -119,7 +119,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.30",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.14.37",
+    "@blocklet/payment-types": "1.14.39",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -139,13 +139,13 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.3.3",
     "prettier-plugin-import-sort": "^0.0.7",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "type-fest": "^4.23.0",
     "typescript": "^4.9.5",
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
-    "vite-plugin-blocklet": "^0.9.1",
+    "vite-plugin-blocklet": "^0.9.3",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -161,5 +161,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "645ae0bdbab463eec878af0521eb982b51499639"
+  "gitHead": "a0f45877c7288ccd7a7f73b3fedc464c19cc0163"
 }

package/src/components/customer/link.tsx

@@ -1,6 +1,7 @@
 import type { TCustomer } from '@blocklet/payment-types';
 import { Link } from 'react-router-dom';
 
+import { getCustomerAvatar } from '@blocklet/payment-react';
 import InfoCard from '../info-card';
 
 export default function CustomerLink({ customer, linked }: { customer: TCustomer; linked?: boolean }) {
@@ -11,7 +12,11 @@ export default function CustomerLink({ customer, linked }: { customer: TCustomer
     return (
       <Link to={`/admin/customers/${customer.id}`}>
         <InfoCard
-          logo={`/.well-known/service/user/avatar/${customer.did}?imageFilter=resize&w=48&h=48`}
+          logo={getCustomerAvatar(
+            customer?.did,
+            customer?.updated_at ? new Date(customer.updated_at).toISOString() : '',
+            48
+          )}
           name={customer.email}
           description={`${customer.did.slice(0, 6)}...${customer.did.slice(-6)}`}
         />
@@ -21,7 +26,7 @@ export default function CustomerLink({ customer, linked }: { customer: TCustomer
 
   return (
     <InfoCard
-      logo={`/.well-known/service/user/avatar/${customer.did}?imageFilter=resize&w=48&h=48`}
+      logo={getCustomerAvatar(customer.did, customer.updated_at ? new Date(customer.updated_at).toISOString() : '', 48)}
       name={customer.email}
       description={<span style={{ wordBreak: 'break-all' }}>{customer?.did}</span>}
     />

package/src/components/filter-toolbar.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, useMobile, usePaymentContext } from '@blocklet/payment-react';
+import { api, getCustomerAvatar, useMobile, usePaymentContext } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Add, Close } from '@mui/icons-material';
 import { Button, Menu, MenuItem } from '@mui/material';
@@ -300,7 +300,7 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
               setShow(null);
             }}>
             <InfoCard
-              logo={`/.well-known/service/user/avatar/${x.did}?imageFilter=resize&w=48&h=48`}
+              logo={getCustomerAvatar(x?.did, x?.updated_at, 48)}
               name={x.email}
               key={x.id}
               description={`${x.did.slice(0, 6)}...${x.did.slice(-6)}`}

package/src/components/metadata/form.tsx

@@ -75,7 +75,7 @@ export default function MetadataForm({
                   required: t('payment.checkout.required'),
                   maxLength: {
                     value: 64,
-                    message: t('common.maxLength', { len: 64 }),
+                    message: t('common.maxLength', { len: 40 }),
                   },
                 }}
                 placeholder="Key"
@@ -83,7 +83,7 @@ export default function MetadataForm({
                 // @ts-ignore
                 ref={errors?.metadata?.[index]?.key ? errorRef : null}
                 inputProps={{
-                  maxLength: 64,
+                  maxLength: 40,
                 }}
               />
               <FormInput

package/src/components/price/form.tsx

@@ -104,6 +104,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
     control,
     setValue,
     formState: { errors },
+    trigger,
   } = useFormContext();
   const getFieldError = (name: string) => {
     const names = name?.split('.');
@@ -111,7 +112,6 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   };
   const { settings, livemode } = usePaymentContext();
   const currencies = useFieldArray({ control, name: getFieldName('currency_options') });
-
   const priceLocked = useWatch({ control, name: getFieldName('locked') });
   const isRecurring = useWatch({ control, name: getFieldName('type') }) === 'recurring';
   const isMetered = useWatch({ control, name: getFieldName('recurring.usage_type') }) === 'metered';
@@ -138,6 +138,11 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
     return true;
   };
 
+  const handleRemoveCurrency = async (index: number) => {
+    await currencies.remove(index);
+    trigger(getFieldName('recurring.interval_config'));
+  };
+
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
       {isLocked && <Alert severity="info">{t('admin.price.locked')}</Alert>}
@@ -280,7 +285,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     );
                   }}
                 />
-                <IconButton size="small" disabled={isLocked} onClick={() => currencies.remove(index)}>
+                <IconButton size="small" disabled={isLocked} onClick={() => handleRemoveCurrency(index)}>
                   <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
                 </IconButton>
               </Stack>
@@ -322,6 +327,19 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             name={getFieldName('recurring.interval_config')}
             control={control}
             disabled={isLocked}
+            rules={{
+              validate: (val) => {
+                const hasStripe = currencies.fields?.some((x: any) => {
+                  return !!settings.paymentMethods.find(
+                    (y) => y?.type === 'stripe' && x?.currency_id === y?.default_currency_id
+                  );
+                });
+                if (val === 'hour_1' && hasStripe) {
+                  return t('admin.price.recurring.stripeTip');
+                }
+                return true;
+              },
+            }}
             render={({ field }) => (
               <Box>
                 <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.recurring.interval')}</FormLabel>
@@ -333,8 +351,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     setValue(getFieldName('recurring.interval'), interval);
                     setValue(getFieldName('recurring.interval_count'), +count);
                     setValue(getFieldName('recurring.interval_config'), e.target.value);
+                    trigger(getFieldName('recurring.interval_config'));
                   }}
                   sx={{ width: INPUT_WIDTH }}
+                  error={!!get(errors, getFieldName('recurring.interval_config'))}
                   size="small">
                   {!livemode && <MenuItem value="hour_1">{t('common.hourly')}</MenuItem>}
                   <MenuItem value="day_1">{t('common.daily')}</MenuItem>
@@ -345,6 +365,12 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   <MenuItem value="year_1">{t('common.yearly')}</MenuItem>
                   <MenuItem value="month_2">{t('common.custom')}</MenuItem>
                 </Select>
+                {get(errors, getFieldName('recurring.interval_config'))?.message && (
+                  <Typography color="error" sx={{ fontSize: '0.75rem', mt: 0.5, ml: 1.75 }}>
+                    {/* @ts-ignore */}
+                    {get(errors, getFieldName('recurring.interval_config')).message}
+                  </Typography>
+                )}
               </Box>
             )}
           />

package/src/components/product/form.tsx

@@ -57,8 +57,8 @@ export default function ProductForm(props: Props) {
           rules={{
             required: t('admin.product.description.required'),
             maxLength: {
-              value: 256,
-              message: t('common.maxLength', { len: 256 }),
+              value: 250,
+              message: t('common.maxLength', { len: 250 }),
             },
           }}
           label={t('admin.product.description.label')}
@@ -68,21 +68,27 @@ export default function ProductForm(props: Props) {
           multiline
           minRows={2}
           maxRows={4}
-          inputProps={{ maxLength: 256 }}
+          inputProps={{ maxLength: 250 }}
         />
         <Collapse trigger={t('admin.product.additional')}>
           <Stack spacing={2} alignItems="flex-start">
             <FormInput
               name="statement_descriptor"
               label={t('admin.product.statement_descriptor.label')}
-              rules={{ maxLength: { value: 32, message: t('common.maxLength', { len: 32 }) } }}
-              inputProps={{ maxLength: 32 }}
+              rules={{
+                maxLength: { value: 22, message: t('common.maxLength', { len: 22 }) },
+                pattern: {
+                  value: /^(?=.*[A-Za-z])[^\u4e00-\u9fa5<>"’\\]*$/,
+                  message: t('common.latinOnly'),
+                },
+              }}
             />
             <FormInput
               name="unit_label"
               label={t('admin.product.unit_label.label')}
-              rules={{ maxLength: { value: 32, message: t('common.maxLength', { len: 32 }) } }}
-              inputProps={{ maxLength: 32 }}
+              rules={{
+                maxLength: { value: 12, message: t('common.maxLength', { len: 12 }) },
+              }}
             />
             {!props.simple && <ProductFeatures />}
             {!props.simple && <MetadataForm title={t('common.metadata.label')} />}

package/src/locales/en.tsx

@@ -18,6 +18,9 @@ export default flat({
     exit: 'Exit',
     maxLength: 'Max {len} characters',
     minLength: 'Min {len} characters',
+    invalidCharacters: 'Invalid characters',
+    latinOnly:
+      'At least one letter and cannot include Chinese characters and special characters such as <, >、"、’ or \\',
     loading: 'Loading...',
   },
   admin: {
@@ -148,6 +151,7 @@ export default flat({
           'Metered billing lets you charge customers based on reported usage at the end of each billing period.',
         aggregate: 'Charge for metered usage by',
         intervalCountTip: 'Billing interval must be a positive integer',
+        stripeTip: 'Stripe requires the billing period to be greater than or equal to 1 day',
       },
       currency: {
         add: 'Add more currencies',

package/src/locales/zh.tsx

@@ -18,6 +18,8 @@ export default flat({
     exit: '退出',
     maxLength: '最多输入{len}个字符',
     minLength: '最少输入{len}个字符',
+    invalidCharacters: '无效字符',
+    latinOnly: '至少包含一个字母，并且不能包含中文字符和特殊字符如 <, >、"、’ 或 \\',
     loading: '加载中...',
   },
   admin: {
@@ -144,6 +146,7 @@ export default flat({
         meteredTip: '计量计费允许您根据每个计费周期结束时的报告的使用情况向客户收费。',
         aggregate: '按何种方式收费计量使用',
         intervalCountTip: '计费周期必须是正整数',
+        stripeTip: 'Stripe要求计费周期不能为小时',
       },
       currency: {
         add: '添加更多货币',

package/src/pages/admin/customers/customers/detail.tsx

@@ -2,7 +2,15 @@
 import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, formatBNStr, formatError, formatTime, useMobile, usePaymentContext } from '@blocklet/payment-react';
+import {
+  api,
+  formatBNStr,
+  formatError,
+  formatTime,
+  getCustomerAvatar,
+  useMobile,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
@@ -196,7 +204,11 @@ export default function CustomerDetail(props: { id: string }) {
             <Stack direction="row" alignItems="center" spacing={1}>
               <Avatar
                 title={data.customer.name}
-                src={`/.well-known/service/user/avatar/${data?.customer?.did}`}
+                src={getCustomerAvatar(
+                  data.customer?.did,
+                  data.customer?.updated_at ? new Date(data.customer.updated_at).toISOString() : '',
+                  52
+                )}
                 variant="square"
                 sx={{ width: 52, height: 52, borderRadius: 'var(--radius-s, 4px)' }}
               />

package/src/pages/admin/customers/customers/index.tsx

@@ -2,7 +2,7 @@
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatTime, Table } from '@blocklet/payment-react';
+import { api, formatTime, getCustomerAvatar, Table } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -60,7 +60,11 @@ export default function CustomersList() {
             <Link to={`/admin/customers/${item.id}`}>
               <Stack direction="row" alignItems="center" spacing={1}>
                 <Avatar
-                  src={`/.well-known/service/user/avatar/${item.did}?imageFilter=resize&w=48&h=48`}
+                  src={getCustomerAvatar(
+                    item?.did,
+                    item?.updated_at ? new Date(item.updated_at).toISOString() : '',
+                    48
+                  )}
                   variant="square"
                   sx={{ borderRadius: 'var(--radius-m, 8px)' }}
                 />

package/src/pages/customer/index.tsx

@@ -5,6 +5,7 @@ import {
   CustomerInvoiceList,
   formatBNStr,
   formatError,
+  getCustomerAvatar,
   getPrefix,
   TruncatedText,
   useMobile,
@@ -337,7 +338,7 @@ export default function CustomerHome() {
       <Box display="flex" alignItems="center" gap={1} flexWrap="wrap" sx={{ mb: 3 }}>
         <Avatar
           title={data?.name}
-          src={`/.well-known/service/user/avatar/${data?.did}`}
+          src={getCustomerAvatar(data?.did, data?.updated_at ? new Date(data.updated_at).toISOString() : '', 48)}
           variant="circular"
           sx={{ width: 48, height: 48 }}
         />