payment-kit 1.14.38 → 1.15.0

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/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.38
+version: 1.15.0
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.38",
+  "version": "1.15.0",
   "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.38",
+    "@blocklet/payment-react": "1.15.0",
     "@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.38",
+    "@blocklet/payment-types": "1.15.0",
     "@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": "f572122a40f30619bd736d8df20e362b6cdab420"
+  "gitHead": "a53bb8a9b781e36974899d3fc8a4aad544621a9c"
 }

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 }}
         />