payment-kit 1.14.29 → 1.14.31

package/api/third.d.ts

@@ -16,6 +16,8 @@ declare module 'sql-where-parser';
 
 declare module 'cls-hooked';
 
+declare module 'express-xss-sanitizer';
+
 namespace Express {
   interface Request {
     user?: {

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.29",
+  "version": "1.14.31",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,29 +43,29 @@
   },
   "dependencies": {
     "@abtnode/cron": "1.16.28",
-    "@arcblock/did": "^1.18.128",
+    "@arcblock/did": "^1.18.132",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.16",
-    "@arcblock/did-util": "^1.18.128",
-    "@arcblock/jwt": "^1.18.128",
-    "@arcblock/ux": "^2.10.16",
-    "@arcblock/validator": "^1.18.128",
+    "@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",
     "@blocklet/js-sdk": "1.16.28",
     "@blocklet/logger": "1.16.28",
-    "@blocklet/payment-react": "1.14.29",
+    "@blocklet/payment-react": "1.14.31",
     "@blocklet/sdk": "1.16.28",
-    "@blocklet/ui-react": "^2.10.16",
-    "@blocklet/uploader": "^0.1.20",
+    "@blocklet/ui-react": "^2.10.23",
+    "@blocklet/uploader": "^0.1.23",
     "@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.128",
-    "@ocap/client": "^1.18.128",
-    "@ocap/mcrypto": "^1.18.128",
-    "@ocap/util": "^1.18.128",
-    "@ocap/wallet": "^1.18.128",
+    "@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",
     "@react-pdf/renderer": "^3.4.4",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
@@ -84,6 +84,7 @@
     "express": "^4.19.2",
     "express-async-errors": "^3.1.1",
     "express-history-api-fallback": "^2.2.1",
+    "express-xss-sanitizer": "^1.2.0",
     "fastq": "^1.17.1",
     "flat": "^5.0.2",
     "google-libphonenumber": "^3.2.38",
@@ -118,7 +119,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.28",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.14.29",
+    "@blocklet/payment-types": "1.14.31",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -144,7 +145,7 @@
     "typescript": "^4.9.5",
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
-    "vite-plugin-blocklet": "^0.8.16",
+    "vite-plugin-blocklet": "^0.8.17",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -160,5 +161,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "104f4189d9ef96c1e332ffa90824ebd3063c989d"
+  "gitHead": "bd36f69fcd955be6b1353b520879bbb3c1e3266f"
 }

package/src/components/customer/form.tsx

@@ -30,6 +30,17 @@ export default function CustomerForm() {
         errorPosition="right"
         rules={{
           required: t('payment.checkout.required'),
+          minLength: {
+            value: 2,
+            message: t('common.minLength', { len: 2 }),
+          },
+          maxLength: {
+            value: 30,
+            message: t('common.maxLength', { len: 30 }),
+          },
+        }}
+        inputProps={{
+          maxLength: 30,
         }}
         label={t('payment.checkout.customer.name')}
       />
@@ -72,6 +83,15 @@ export default function CustomerForm() {
         errorPosition="right"
         label={t('payment.checkout.billing.state')}
         placeholder={t('payment.checkout.billing.state')}
+        inputProps={{
+          maxLength: 50,
+        }}
+        rules={{
+          maxLength: {
+            value: 50,
+            message: t('common.maxLength', { len: 50 }),
+          },
+        }}
       />
       <FormInput
         name="address.city"
@@ -79,6 +99,15 @@ export default function CustomerForm() {
         errorPosition="right"
         label={t('payment.checkout.billing.city')}
         placeholder={t('payment.checkout.billing.city')}
+        inputProps={{
+          maxLength: 50,
+        }}
+        rules={{
+          maxLength: {
+            value: 50,
+            message: t('common.maxLength', { len: 50 }),
+          },
+        }}
       />
       <FormInput
         name="address.line1"
@@ -86,6 +115,15 @@ export default function CustomerForm() {
         errorPosition="right"
         label={t('payment.checkout.billing.line1')}
         placeholder={t('payment.checkout.billing.line1')}
+        inputProps={{
+          maxLength: 100,
+        }}
+        rules={{
+          maxLength: {
+            value: 100,
+            message: t('common.maxLength', { len: 100 }),
+          },
+        }}
       />
       <FormInput
         name="address.line2"
@@ -93,6 +131,15 @@ export default function CustomerForm() {
         errorPosition="right"
         label={t('payment.checkout.billing.line2')}
         placeholder={t('payment.checkout.billing.line2')}
+        inputProps={{
+          maxLength: 100,
+        }}
+        rules={{
+          maxLength: {
+            value: 100,
+            message: t('common.maxLength', { len: 100 }),
+          },
+        }}
       />
       <FormInput
         name="address.postal_code"
@@ -100,6 +147,12 @@ export default function CustomerForm() {
         errorPosition="right"
         label={t('payment.checkout.billing.postal_code')}
         placeholder={t('payment.checkout.billing.postal_code')}
+        rules={{
+          maxLength: {
+            value: 20,
+            message: t('common.maxLength', { len: 20 }),
+          },
+        }}
       />
     </Stack>
   );

package/src/components/filter-toolbar.tsx

@@ -158,7 +158,7 @@ function SearchStatus({
 
 function filterCurrency(methods: any) {
   const out: any = {};
-  methods.forEach((m: any) => {
+  methods?.forEach((m: any) => {
     const currencies = m.payment_currencies;
     currencies.forEach((c: any) => {
       out[c.symbol] = c.id;

package/src/components/invoice/list.tsx

@@ -176,14 +176,14 @@ export default function InvoiceList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          const desc = item?.description || item?.id;
-          return (
-            <Link to={`/admin/billing/${item.id}`}>
-              {desc.startsWith('Subscription ')
-                ? t(`payment.invoice.reason.${desc.replace('Subscription ', '')}`)
-                : desc}
-            </Link>
-          );
+          let desc = item?.description || item?.id;
+          if (desc.startsWith('Slash stake')) {
+            desc = t('payment.invoice.reason.slashStake');
+          }
+          if (desc.startsWith('Subscription ')) {
+            desc = t(`payment.invoice.reason.${desc.replace('Subscription ', '')}`);
+          }
+          return <Link to={`/admin/billing/${item.id}`}>{desc}</Link>;
         },
       },
     },

package/src/components/invoice/table.tsx

@@ -8,12 +8,14 @@ import { toBN } from '@ocap/util';
 import { useSetState } from 'ahooks';
 
 import { styled } from '@mui/system';
+import { isEmpty } from 'lodash';
 import LineItemActions from '../subscription/items/actions';
 import { UsageRecordDialog } from '../subscription/items/usage-records';
 
 type Props = {
   invoice: TInvoiceExpanded;
   simple?: boolean;
+  emptyNodeText?: string;
 };
 
 type InvoiceDetailItem = {
@@ -112,7 +114,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
   };
 }
 
-export default function InvoiceTable({ invoice, simple }: Props) {
+export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props) {
   const { t, locale } = useLocaleContext();
   const { detail, summary } = getInvoiceRows(invoice);
   const [state, setState] = useSetState({
@@ -194,7 +196,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
           {
             label: t('common.actions'),
             name: '',
-            width: 40,
+            width: 80,
             options: {
               customBodyRenderLite: (_: string, index: number) => {
                 const item = detail[index] as InvoiceDetailItem;
@@ -226,41 +228,44 @@ export default function InvoiceTable({ invoice, simple }: Props) {
         dire
         locale={locale}
         mobileTDFlexDirection="row"
-        emptyNodeText={t('payment.customer.invoice.emptyList')}
+        emptyNodeText={emptyNodeText || t('payment.customer.invoice.emptyList')}
       />
-      <Stack
-        className="invoice-summary"
-        sx={{
-          display: 'flex',
-          flexDirection: {
-            xs: 'column',
-            md: 'row',
-          },
-          justifyContent: 'flex-end',
-          alignItems: {
-            xs: 'flex-end',
-            md: 'center',
-          },
-          gap: {
-            xs: 1,
-            md: 3,
-          },
-          mt: {
-            xs: 1,
-            md: 2,
-          },
-        }}>
-        {summary.map((line) => (
-          <Box key={line.key}>
-            <Typography component="span" variant="body1" color="text.secondary">
-              {t(line.key)}:&nbsp;
-            </Typography>
-            <Typography component="span" variant="body1" color="text.primary">
-              {line.value}
-            </Typography>
-          </Box>
-        ))}
-      </Stack>
+      {!isEmpty(detail) && (
+        <Stack
+          className="invoice-summary"
+          sx={{
+            display: 'flex',
+            flexDirection: {
+              xs: 'column',
+              md: 'row',
+            },
+            justifyContent: 'flex-end',
+            alignItems: {
+              xs: 'flex-end',
+              md: 'center',
+            },
+            gap: {
+              xs: 1,
+              md: 3,
+            },
+            mt: {
+              xs: 1,
+              md: 2,
+            },
+          }}>
+          {summary.map((line) => (
+            <Box key={line.key}>
+              <Typography component="span" variant="body1" color="text.secondary">
+                {t(line.key)}:&nbsp;
+              </Typography>
+              <Typography component="span" variant="body1" color="text.primary">
+                {line.value}
+              </Typography>
+            </Box>
+          ))}
+        </Stack>
+      )}
+
       {state.subscriptionId && state.subscriptionItemId && (
         <UsageRecordDialog
           subscriptionId={state.subscriptionId}
@@ -276,6 +281,7 @@ export default function InvoiceTable({ invoice, simple }: Props) {
 
 InvoiceTable.defaultProps = {
   simple: false,
+  emptyNodeText: '',
 };
 
 const Root = styled(Box)`

package/src/components/metadata/form.tsx

@@ -42,7 +42,7 @@ export default function MetadataForm({
   }, [errors.metadata, errorRef]);
 
   return (
-    <Box sx={{ width: 1 }}>
+    <Box sx={{ width: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>
       {!!title && <Typography>{title}</Typography>}
       <Stack
         sx={{
@@ -55,6 +55,7 @@ export default function MetadataForm({
           pb: 1.5,
           mr: -1.5,
           pr: 1.5,
+          flex: 1,
         }}>
         {metadata.fields.map((meta, index) => (
           <Stack
@@ -67,23 +68,43 @@ export default function MetadataForm({
             <Stack direction="row" spacing={2} sx={{ flex: 1 }}>
               <FormInput
                 sx={{ flex: 1 }}
+                errorPosition="right"
                 size="small"
                 name={`metadata.${index}.key`}
-                rules={{ required: t('payment.checkout.required') }}
+                rules={{
+                  required: t('payment.checkout.required'),
+                  maxLength: {
+                    value: 64,
+                    message: t('common.maxLength', { len: 64 }),
+                  },
+                }}
                 placeholder="Key"
                 label="Key"
                 // @ts-ignore
                 ref={errors?.metadata?.[index]?.key ? errorRef : null}
+                inputProps={{
+                  maxLength: 64,
+                }}
               />
               <FormInput
                 sx={{ flex: 2 }}
                 size="small"
+                errorPosition="right"
                 name={`metadata.${index}.value`}
                 placeholder="Value"
-                rules={{ required: t('payment.checkout.required') }}
+                rules={{
+                  required: t('payment.checkout.required'),
+                  maxLength: {
+                    value: 256,
+                    message: t('common.maxLength', { len: 256 }),
+                  },
+                }}
                 label="Value"
                 // @ts-ignore
                 ref={errors?.metadata?.[index]?.value ? errorRef : null}
+                inputProps={{
+                  maxLength: 256,
+                }}
               />
             </Stack>
             <IconButton

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

@@ -155,6 +155,9 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
             placeholder={t('admin.paymentIntent.refundForm.description')}
             error={!!(errors as any)?.refund?.description}
             helperText={(errors as any)?.refund?.description?.message}
+            inputProps={{
+              maxLength: 200,
+            }}
           />
         )}
       />
@@ -171,12 +174,21 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
     loading: false,
   });
   const [refundMaxAmount, setRefundMaxAmount] = useState('0');
-  const { runAsync: runRefundAmountAsync } = useRequest(() => fetchRefundData(data.id), {
-    onSuccess: (res) => {
-      const amount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
-      setRefundMaxAmount(amount);
+  const isSlash = data.payment_details?.arcblock?.type === 'slash' && data.paymentMethod?.type === 'arcblock';
+  const { runAsync: runRefundAmountAsync } = useRequest(
+    () => {
+      if (isSlash) {
+        return Promise.resolve({ amount: '0' });
+      }
+      return fetchRefundData(data.id);
     },
-  });
+    {
+      onSuccess: (res) => {
+        const amount = formatBNStr(res?.amount, data.paymentCurrency.decimal);
+        setRefundMaxAmount(amount);
+      },
+    }
+  );
 
   const onRefund = async () => {
     const { refund } = getValues();

package/src/components/payment-link/after-pay.tsx

@@ -1,11 +1,17 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
+import { get } from 'lodash';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
 export default function AfterPay() {
   const { t } = useLocaleContext();
-  const { control, setValue, getValues } = useFormContext();
+  const {
+    control,
+    setValue,
+    getValues,
+    formState: { errors },
+  } = useFormContext();
   const type = useWatch({ control, name: 'after_completion.type' });
   const nftMintEnabled = useWatch({ control, name: 'nft_mint_settings.enabled' });
 
@@ -34,13 +40,23 @@ export default function AfterPay() {
         <Controller
           name="after_completion.hosted_confirmation.custom_message"
           control={control}
+          rules={{
+            maxLength: {
+              value: 200,
+              message: t('common.maxLength', { len: 200 }),
+            },
+          }}
           render={({ field }) => (
             <TextField
               {...field}
               placeholder={t('admin.paymentLink.customMessage')}
-              helperText={t('admin.paymentLink.customMessageTip')}
+              helperText={get(errors, field.name)?.message || t('admin.paymentLink.customMessageTip')}
+              error={!!get(errors, field.name)}
               fullWidth
               size="small"
+              inputProps={{
+                maxLength: 200,
+              }}
             />
           )}
         />
@@ -65,8 +81,21 @@ export default function AfterPay() {
         <Controller
           name="after_completion.redirect.url"
           control={control}
+          rules={{
+            maxLength: {
+              value: 2048,
+              message: t('common.maxLength', { len: 2048 }),
+            },
+          }}
           render={({ field }) => (
-            <TextField placeholder="Redirect customers to your site" {...field} fullWidth size="small" />
+            <TextField
+              placeholder="Redirect customers to your site"
+              {...field}
+              fullWidth
+              size="small"
+              error={!!get(errors, field.name)}
+              helperText={get(errors, field.name)?.message as string}
+            />
           )}
         />
       )}
@@ -90,8 +119,21 @@ export default function AfterPay() {
         <Controller
           name="nft_mint_settings.factory"
           control={control}
+          rules={{
+            maxLength: {
+              value: 40,
+              message: t('common.maxLength', { len: 40 }),
+            },
+          }}
           render={({ field }) => (
-            <TextField {...field} placeholder={t('admin.paymentLink.mintNftFrom')} fullWidth size="small" />
+            <TextField
+              {...field}
+              placeholder={t('admin.paymentLink.mintNftFrom')}
+              fullWidth
+              size="small"
+              error={!!get(errors, field.name)}
+              helperText={get(errors, field.name)?.message as string}
+            />
           )}
         />
       )}

package/src/components/payouts/list.tsx

@@ -159,7 +159,7 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
         sort: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPayoutExpanded;
-          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.updated_at)}</Link>;
+          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },

package/src/components/price/form.tsx

@@ -482,20 +482,32 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             <Controller
               name={getFieldName('nickname')}
               control={control}
+              rules={{
+                maxLength: {
+                  value: 64,
+                  message: t('common.maxLength', { len: 64 }),
+                },
+              }}
               render={({ field }) => (
                 <Box>
                   <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.nickname.label')}</FormLabel>
-                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} />
+                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
                 </Box>
               )}
             />
             <Controller
               name={getFieldName('lookup_key')}
               control={control}
+              rules={{
+                maxLength: {
+                  value: 64,
+                  message: t('common.maxLength', { len: 64 }),
+                },
+              }}
               render={({ field }) => (
                 <Box>
                   <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.lookup_key.label')}</FormLabel>
-                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} />
+                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
                 </Box>
               )}
             />

package/src/components/pricing-table/payment-settings.tsx

@@ -15,7 +15,12 @@ export function PricePaymentSettings({ index }: { index: number }) {
   const getFieldName = (name: string) => `items.${index}.${name}`;
 
   const { t } = useLocaleContext();
-  const { control, setValue, getValues } = useFormContext();
+  const {
+    control,
+    setValue,
+    getValues,
+    formState: { errors },
+  } = useFormContext();
   const type = useWatch({ control, name: getFieldName('after_completion.type') });
   const nftMintEnabled = useWatch({ control, name: 'nft_mint_settings.enabled' });
 
@@ -107,13 +112,23 @@ export function PricePaymentSettings({ index }: { index: number }) {
         <Controller
           name={getFieldName('after_completion.hosted_confirmation.custom_message')}
           control={control}
+          rules={{
+            maxLength: {
+              value: 200,
+              message: t('common.maxLength', { len: 200 }),
+            },
+          }}
           render={({ field }) => (
             <TextField
               {...field}
               placeholder={t('admin.paymentLink.customMessage')}
-              helperText={t('admin.paymentLink.customMessageTip')}
               fullWidth
               size="small"
+              error={!!get(errors, field.name)}
+              helperText={get(errors, field.name)?.message || t('admin.paymentLink.customMessageTip')}
+              inputProps={{
+                maxLength: 200,
+              }}
             />
           )}
         />
@@ -138,8 +153,21 @@ export function PricePaymentSettings({ index }: { index: number }) {
         <Controller
           name={getFieldName('after_completion.redirect.url')}
           control={control}
+          rules={{
+            maxLength: {
+              value: 2048,
+              message: t('common.maxLength', { len: 2048 }),
+            },
+          }}
           render={({ field }) => (
-            <TextField placeholder="Redirect customers to your site" {...field} fullWidth size="small" />
+            <TextField
+              placeholder="Redirect customers to your site"
+              {...field}
+              fullWidth
+              size="small"
+              error={!!get(errors, field.name)}
+              helperText={get(errors, field.name)?.message as string}
+            />
           )}
         />
       )}
@@ -163,8 +191,21 @@ export function PricePaymentSettings({ index }: { index: number }) {
         <Controller
           name={getFieldName('nft_mint_settings.factory')}
           control={control}
+          rules={{
+            maxLength: {
+              value: 40,
+              message: t('common.maxLength', { len: 40 }),
+            },
+          }}
           render={({ field }) => (
-            <TextField {...field} placeholder={t('admin.paymentLink.mintNftFrom')} fullWidth size="small" />
+            <TextField
+              {...field}
+              placeholder={t('admin.paymentLink.mintNftFrom')}
+              fullWidth
+              size="small"
+              error={!!get(errors, field.name)}
+              helperText={get(errors, field.name)?.message as string}
+            />
           )}
         />
       )}