payment-kit 1.18.7 → 1.18.8

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.7",
+  "version": "1.18.8",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -44,29 +44,29 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.38",
-    "@arcblock/did": "^1.19.9",
+    "@arcblock/did": "^1.19.10",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.11.40",
-    "@arcblock/did-util": "^1.19.9",
-    "@arcblock/jwt": "^1.19.9",
-    "@arcblock/ux": "^2.11.40",
-    "@arcblock/validator": "^1.19.9",
+    "@arcblock/did-connect": "^2.11.44",
+    "@arcblock/did-util": "^1.19.10",
+    "@arcblock/jwt": "^1.19.10",
+    "@arcblock/ux": "^2.11.44",
+    "@arcblock/validator": "^1.19.10",
     "@blocklet/js-sdk": "^1.16.38",
     "@blocklet/logger": "^1.16.38",
-    "@blocklet/payment-react": "1.18.7",
+    "@blocklet/payment-react": "1.18.8",
     "@blocklet/sdk": "^1.16.38",
-    "@blocklet/ui-react": "^2.11.40",
+    "@blocklet/ui-react": "^2.11.44",
     "@blocklet/uploader": "^0.1.70",
     "@blocklet/xss": "^0.1.25",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.19.9",
-    "@ocap/client": "^1.19.9",
-    "@ocap/mcrypto": "^1.19.9",
-    "@ocap/util": "^1.19.9",
-    "@ocap/wallet": "^1.19.9",
+    "@ocap/asset": "^1.19.10",
+    "@ocap/client": "^1.19.10",
+    "@ocap/mcrypto": "^1.19.10",
+    "@ocap/util": "^1.19.10",
+    "@ocap/wallet": "^1.19.10",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -121,7 +121,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.38",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.7",
+    "@blocklet/payment-types": "1.18.8",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -151,7 +151,7 @@
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.9.20",
+    "vite-plugin-blocklet": "^0.9.21",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -167,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "b75168ab5e2cd939571e6e26543374c8d0dab963"
+  "gitHead": "0815493ffd53c977d2d14779703d85f2e0e34299"
 }

package/src/components/filter-toolbar.tsx

@@ -126,7 +126,7 @@ function SearchStatus({
       <Button className="option-btn" variant="text">
         {search!.status ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -136,7 +136,7 @@ function SearchStatus({
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.status')}
         <span>{formatStatus ? formatStatus(search!.status) : search!.status}</span>
@@ -192,7 +192,7 @@ function SearchCurrency({ setSearch, search }: Pick<Props, 'setSearch' | 'search
       <Button className="option-btn" variant="text">
         {search!.currency_id ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -202,7 +202,7 @@ function SearchCurrency({ setSearch, search }: Pick<Props, 'setSearch' | 'search
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.currency')}
         <span>{Object.keys(currencies).find((x) => currencies[x] === search!.currency_id)}</span>
@@ -260,7 +260,7 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
       <Button className="option-btn" variant="text">
         {search!.customer_id ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -270,7 +270,7 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.customer')}
         <span>{customers.find((x) => x.id === search!.customer_id)?.name}</span>
@@ -373,7 +373,7 @@ function SearchProducts({ setSearch, search }: Pick<Props, 'setSearch' | 'search
         }}>
         {display ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -385,7 +385,7 @@ function SearchProducts({ setSearch, search }: Pick<Props, 'setSearch' | 'search
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('admin.subscription.product')}
         <span>{display}</span>
@@ -424,7 +424,7 @@ function SearchDonation({ donation = [], search, setSearch }: Pick<Props, 'donat
       <Button className="option-btn" variant="text">
         {search!.donation ? (
           <Close
-            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
             onClick={(e) => {
               e.stopPropagation();
               setSearch({
@@ -434,7 +434,7 @@ function SearchDonation({ donation = [], search, setSearch }: Pick<Props, 'donat
             }}
           />
         ) : (
-          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }} />
         )}
         {t('common.donation')}
         <span>{search!.donation}</span>

package/src/components/layout/admin.tsx

@@ -20,6 +20,7 @@ const Root = styled(Dashboard)<{ padding: string }>`
         margin-right: 24px;
         min-height: 32px;
         min-width: auto;
+        font-size: 0.875rem;
       }
 
       .MuiTabs-root {

package/src/components/payment-link/product-select.tsx

@@ -39,7 +39,7 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
 
   const items = (callback?: any) =>
     filterProducts(products, hasSelected).map((product) => [
-      <ListSubheader key={product.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+      <ListSubheader key={product.id} sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
         <Stack direction="row" alignItems="center" spacing={0.5}>
           {product.images[0] ? (
             <Avatar src={product.images[0]} alt={product.name} variant="square" sx={size} />

package/src/components/price/currency-select.tsx

@@ -92,7 +92,9 @@ export default function CurrencySelect({
         disabled={disabled}
         onClose={() => setMode(initialMode)}>
         {extraCurrencies.map((method) => [
-          <ListSubheader key={method.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+          <ListSubheader
+            key={method.id}
+            sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
             {method.name}
           </ListSubheader>,
           ...method.payment_currencies.map((currency) => (

package/src/components/price/form.tsx

@@ -425,7 +425,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   <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 }}>
+                  <Typography color="error" sx={{ fontSize: '0.65625rem', mt: 0.5, ml: 1.75 }}>
                     {/* @ts-ignore */}
                     {get(errors, getFieldName('recurring.interval_config')).message}
                   </Typography>

package/src/components/section/header.tsx

@@ -23,7 +23,7 @@ export default function SectionHeader(props: Props) {
         sx={{
           fontSize: {
             xs: '18px',
-            md: '1.25rem',
+            md: '1.09375rem',
           },
         }}
         component="div">

package/src/global.css

@@ -2,7 +2,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-size: 14px;
 }
 
 a:has(> div) {
@@ -11,8 +10,8 @@ a:has(> div) {
 
 .MuiButton-sizeSmall {
   font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: 0.875rem;
+  line-height: 1.3125rem;
   border-color: #ccc;
 }
 
@@ -21,6 +20,7 @@ a:has(> div) {
   margin-right: 24px;
   min-height: 32px;
   min-width: auto;
+  font-size: 0.875rem;
 }
 
 .MuiTabs-root {
@@ -53,7 +53,7 @@ a:has(> div) {
 }
 
 .MuiTableCell-root {
-  font-size: 1rem !important;
+  font-size: 0.875rem !important;
   padding-top: 8px;
   padding-bottom: 8px;
   padding-right: 24px;

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -77,7 +77,7 @@ export default function WebhookDetail(props: { id: string }) {
                   title={
                     <ul style={{ padding: 0, margin: 0 }}>
                       {data.enabled_events.map((x) => (
-                        <li key={x} style={{ fontSize: '0.9rem' }}>
+                        <li key={x} style={{ fontSize: '0.7875rem' }}>
                           {x}
                         </li>
                       ))}

package/src/pages/admin/overview.tsx

@@ -298,7 +298,7 @@ export default function Overview() {
                         sx={{ width: 36, height: 36 }}
                       />
                       <Box flex={1}>
-                        <Typography variant="h5" component="div" sx={{ fontSize: '2rem' }}>
+                        <Typography variant="h5" component="div" sx={{ fontSize: '1.75rem' }}>
                           {formatBNStr(
                             summary.data?.balances?.[currencyId] as string,
                             currencies[currencyId]?.decimal as number
@@ -338,7 +338,7 @@ export default function Overview() {
                     variant="outlined"
                     sx={{ padding: 1, width: 0.48 }}>
                     <Box>
-                      <Typography component="div" sx={{ fontSize: '2rem' }}>
+                      <Typography component="div" sx={{ fontSize: '1.75rem' }}>
                         {metric.count}
                       </Typography>
                       <Typography sx={{ fontSize: 14 }} color="text.secondary">
@@ -366,7 +366,7 @@ export default function Overview() {
                     variant="outlined"
                     sx={{ padding: 1, width: 0.48 }}>
                     <Box>
-                      <Typography component="div" sx={{ fontSize: '2rem' }}>
+                      <Typography component="div" sx={{ fontSize: '1.75rem' }}>
                         {metric.count}
                       </Typography>
                       <Typography sx={{ fontSize: 14 }} color="text.secondary">

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

@@ -139,7 +139,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Amount amount={received} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                <Amount amount={received} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 <Copyable text={props.id} />
               </Stack>
             </Stack>

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

@@ -159,7 +159,7 @@ export default function PayoutDetail(props: { id: string }) {
                   sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
                 />
                 <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                  <Amount amount={total} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                  <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                   <Copyable text={props.id} />
                 </Stack>
               </Stack>

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

@@ -137,7 +137,7 @@ export default function RefundDetail(props: { id: string }) {
                 sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Amount amount={amount} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                <Amount amount={amount} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 <Copyable text={props.id} />
               </Stack>
             </Stack>

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

@@ -389,7 +389,7 @@ export default function ProductDetail(props: { id: string }) {
                     sx={{
                       fontSize: {
                         xs: '18px',
-                        md: '1.25rem',
+                        md: '1.09375rem',
                       },
                     }}>
                     {t('admin.product.cross_sell.title')}

package/src/pages/customer/payout/detail.tsx

@@ -113,7 +113,7 @@ export default function PayoutDetail() {
                   sx={{ width: '52px', height: '52px', borderRadius: 'var(--radius-s, 4px)' }}
                 />
                 <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                  <Amount amount={total} sx={{ my: 0, fontSize: '2rem', lineHeight: '32px' }} />
+                  <Amount amount={total} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
                 </Stack>
               </Stack>
             </Stack>

package/src/pages/customer/subscription/change-payment.tsx

@@ -270,7 +270,13 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
             {state.paying ? t('payment.checkout.processing') : t('payment.customer.changePayment.submit')}
           </LoadingButton>
           <Typography
-            sx={{ mt: 1, color: 'text.secondary', fontSize: '0.9rem', lineHeight: '1.1rem', textAlign: 'center' }}>
+            sx={{
+              mt: 1,
+              color: 'text.secondary',
+              fontSize: '0.7875rem',
+              lineHeight: '0.9625rem',
+              textAlign: 'center',
+            }}>
             {t('payment.customer.changePayment.confirm', {
               payee,
               symbol: findCurrency(settings.paymentMethods, selectedCurrencyId)?.symbol,

package/src/pages/integrations/donations/index.tsx

@@ -269,7 +269,7 @@ export default function DonationList() {
 
   return (
     <>
-      <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap" mb={-1}>
+      <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
         <Typography variant="h6">{t('admin.donate.intro')}</Typography>
         <Button variant="text" size="small" onClick={() => setShowExample(true)} sx={{ color: 'text.link' }}>
           {t('admin.donate.usage.viewExample')}

package/src/pages/integrations/donations/preview.tsx

@@ -3,6 +3,50 @@ import { Box, Typography, Button, TextField, Stack, Paper, Divider } from '@mui/
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TSetting } from '@blocklet/payment-types';
 
+function PreviewAvatars({ count }: { count: number }) {
+  return (
+    <Stack flexDirection="row" justifyContent="center" alignItems="center">
+      {/* Avatar Group */}
+      <Box sx={{ display: 'flex', position: 'relative' }}>
+        {Array(Math.min(count, 5))
+          .fill(0)
+          .map((_, i) => (
+            <Box
+              // eslint-disable-next-line react/no-array-index-key
+              key={i}
+              sx={{
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                bgcolor: '#e0e0e0',
+                border: '2px solid #fff',
+                position: 'relative',
+                marginLeft: i === 0 ? 0 : '-8px',
+                zIndex: count - i,
+              }}
+            />
+          ))}
+      </Box>
+
+      {/* Counter Box */}
+      <Box
+        sx={{
+          fontSize: '14px',
+          color: 'text.secondary',
+          pl: 1.5,
+          pr: 1,
+          ml: -1,
+          borderRadius: '8px',
+          backgroundColor: '#f4f4f5',
+          height: '24px',
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+        {`${count} supporter${count > 1 ? 's' : ''} (XX ABT)`}
+      </Box>
+    </Stack>
+  );
+}
 export default function DonationPreview({ config }: { config: TSetting['settings'] }) {
   const { t } = useLocaleContext();
   const hasPresets = config.settings.amount.presets?.length > 0;
@@ -41,43 +85,12 @@ export default function DonationPreview({ config }: { config: TSetting['settings
           {t('admin.donate.btn.preview')}
         </Typography>
         <Stack spacing={2} alignItems="center">
-          <Button variant="contained" color="primary">
+          <Button variant="outlined" color="primary">
             {config.settings.btnText}
           </Button>
-
+          <PreviewAvatars count={3} />
           <Box sx={{ width: '100%', maxWidth: 300 }}>
-            <Typography variant="caption" display="block" gutterBottom color="text.secondary" mb={1} textAlign="center">
-              total XX ABT
-            </Typography>
-            {config.settings.historyType === 'avatar' ? (
-              <Box
-                sx={{
-                  height: 40,
-                  position: 'relative',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                {Array(5)
-                  .fill(0)
-                  .map((_, i) => (
-                    <Box
-                      // eslint-disable-next-line react/no-array-index-key
-                      key={i}
-                      sx={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: '50%',
-                        bgcolor: '#e0e0e0',
-                        position: 'absolute',
-                        left: `calc(50% - 16px + ${i * 24}px - ${2 * 24}px)`,
-                        opacity: 1 - i * 0.1,
-                        border: '2px solid #fff',
-                      }}
-                    />
-                  ))}
-              </Box>
-            ) : (
+            {config.settings.historyType === 'table' && (
               <Box
                 sx={{
                   borderRadius: 1,
@@ -96,30 +109,38 @@ export default function DonationPreview({ config }: { config: TSetting['settings
                       sx={{
                         display: 'flex',
                         justifyContent: 'center',
-                        gap: 2,
+                        alignItems: 'center',
+                        gap: 1,
                         opacity: 1 - i * 0.2,
                         width: '100%',
                         maxWidth: 240,
                       }}>
+                      <Box display="flex" alignItems="center" gap={0.5} width="75%">
+                        <Box
+                          // eslint-disable-next-line react/no-array-index-key
+                          key={i}
+                          sx={{
+                            width: '16px',
+                            height: '16px',
+                            borderRadius: '50%',
+                            bgcolor: '#e0e0e0',
+                            border: '2px solid #fff',
+                            position: 'relative',
+                          }}
+                        />
+                        <Box
+                          sx={{
+                            width: '100%',
+                            height: 8,
+                            borderRadius: 1,
+                            bgcolor: '#e0e0e0',
+                          }}
+                        />
+                      </Box>
+
                       <Box
                         sx={{
-                          width: '30%',
-                          height: 8,
-                          borderRadius: 1,
-                          bgcolor: '#e0e0e0',
-                        }}
-                      />
-                      <Box
-                        sx={{
-                          width: '20%',
-                          height: 8,
-                          borderRadius: 1,
-                          bgcolor: '#e0e0e0',
-                        }}
-                      />
-                      <Box
-                        sx={{
-                          width: '15%',
+                          width: '25%',
                           height: 8,
                           borderRadius: 1,
                           bgcolor: '#e0e0e0',