payment-kit 1.18.56 → 1.19.1

package/src/components/subscription/items/usage-records.tsx

@@ -117,7 +117,11 @@ export function UsageRecordDialog({
       message={
         <>
           {start && end ? (
-            <Typography variant="h6" mb={2}>
+            <Typography
+              variant="h6"
+              sx={{
+                mb: 2,
+              }}>
               {t('admin.subscription.usage.cycle')}: {formatTime(start * 1000)} - {formatTime(end * 1000)}
             </Typography>
           ) : null}
@@ -148,17 +152,27 @@ export function UsageRecordDialog({
             <Empty>{t('admin.usageRecord.empty')}</Empty>
           )}
           {!settings.livemode && window.location.pathname.includes('/admin/billing') && !disableAddUsageQuantity && (
-            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} pt={1} pb={1} gap={1}>
+            <Box
+              sx={{
+                pt: 1,
+                pb: 1,
+                gap: 1,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
               <TextField
                 id="add-usage-record"
                 label={t('admin.usageRecord.add.quantity')}
                 type="number"
                 size="small"
-                InputLabelProps={{
-                  shrink: true,
-                }}
                 value={usageQuantity}
                 onChange={(e) => setUsageQuantity(+e.target.value)}
+                slotProps={{
+                  inputLabel: {
+                    shrink: true,
+                  },
+                }}
               />
               <Button onClick={handAddUsageQuantity} sx={{ color: 'text.link' }}>
                 {t('admin.usageRecord.add.label')}

package/src/components/subscription/list.tsx

@@ -56,16 +56,14 @@ const getListKey = (props: ListProps) => {
   return 'subscriptions';
 };
 
-SubscriptionList.defaultProps = {
-  features: {
+export default function SubscriptionList({
+  customer_id = '',
+  features = {
     customer: true,
     filter: true,
   },
-  customer_id: '',
-  status: '',
-};
-
-export default function SubscriptionList({ customer_id, features, status }: ListProps) {
+  status = '',
+}: ListProps) {
   const listKey = getListKey({ customer_id });
 
   const { t } = useLocaleContext();

package/src/components/subscription/metrics.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatBNStr, formatTime } from '@blocklet/payment-react';
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+import type { TSubscriptionExpanded, CreditGrantSummary } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 
 import { Button, Stack, Typography, Tooltip, Avatar, Box, CircularProgress, Skeleton } from '@mui/material';
@@ -23,8 +23,21 @@ const fetchPayer = (id: string): Promise<{ token: string; paymentAddress: string
   return api.get(`/api/subscriptions/${id}/payer-token`).then((res) => res.data);
 };
 
+const fetchCreditBalance = ({
+  customerId,
+  subscriptionId,
+}: {
+  customerId: string;
+  subscriptionId: string;
+}): Promise<{ [key: string]: CreditGrantSummary }> => {
+  return api
+    .get(`/api/credit-grants/summary?customer_id=${customerId}&subscription_id=${subscriptionId}`)
+    .then((res) => res.data);
+};
+
 export default function SubscriptionMetrics({ subscription, showBalance = true }: Props) {
   const { t } = useLocaleContext();
+  const isCredit = subscription.paymentCurrency?.type === 'credit';
   const { data: upcoming, loading: upcomingLoading } = useRequest(() => fetchUpcoming(subscription.id));
   const navigate = useNavigate();
 
@@ -32,6 +45,17 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
     ready: showBalance,
   });
 
+  const { data: creditBalance } = useRequest(
+    () =>
+      fetchCreditBalance({
+        customerId: subscription.customer_id,
+        subscriptionId: subscription.id,
+      }),
+    {
+      ready: isCredit,
+    }
+  );
+
   const supportShowBalance = showBalance && ['arcblock', 'ethereum', 'base'].includes(subscription.paymentMethod.type);
   // let scheduleToCancelTime = 0;
   // if (['active', 'trialing', 'past_due'].includes(subscription.status) && subscription.cancel_at) {
@@ -41,12 +65,20 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
   // }
 
   const isInsufficientBalance = new BN(payerValue?.token || '0').lt(new BN(upcoming?.amount || '0'));
+
+  const handleRecharge = () => {
+    if (isCredit) {
+      return;
+    }
+    navigate(`/customer/subscription/${subscription.id}/recharge`);
+  };
   const renderBalanceValue = () => {
+    const balance = isCredit ? creditBalance?.[subscription.paymentCurrency.id]?.remainingAmount : payerValue?.token;
     if (upcomingLoading || payerLoading) {
       return <CircularProgress size={16} />;
     }
 
-    if (isInsufficientBalance) {
+    if (isInsufficientBalance && !isCredit) {
       return (
         <Button
           component="a"
@@ -60,18 +92,27 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
 
     return (
       <Stack
-        flexDirection="row"
-        alignItems="center"
-        gap={0.5}
-        sx={{ fontSize: '16px', fontWeight: 500, cursor: 'pointer', '&:hover': { color: 'primary.main' } }}
-        onClick={() => navigate(`/customer/subscription/${subscription.id}/recharge`)}>
+        sx={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 0.5,
+          fontSize: '16px',
+          fontWeight: 500,
+          cursor: 'pointer',
+          '&:hover': { color: 'primary.main' },
+        }}
+        onClick={handleRecharge}>
         <Avatar
           src={subscription.paymentCurrency?.logo}
           sx={{ width: 16, height: 16 }}
           alt={subscription.paymentCurrency?.name}
         />
-        <Box display="flex" alignItems="baseline">
-          {formatBNStr(payerValue?.token, subscription.paymentCurrency.decimal)}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'baseline',
+          }}>
+          {formatBNStr(balance, subscription.paymentCurrency.decimal)}
           <Typography sx={{ fontSize: '14px', ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
         </Box>
       </Stack>
@@ -90,7 +131,12 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
       {['active', 'trialing'].includes(subscription.status) && upcoming?.amount && upcoming.amount !== '0' && (
         <InfoMetric
           label={
-            <Typography display="flex" alignItems="center" gap={0.5}>
+            <Typography
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+              }}>
               {t('admin.subscription.nextInvoiceAmount')}
               <Tooltip title={t('admin.subscription.nextInvoiceAmountTip')} placement="top" arrow>
                 <InfoOutlined fontSize="small" sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '16px' }} />
@@ -106,7 +152,12 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
       {supportShowBalance && ['active', 'trialing'].includes(subscription.status) && (
         <InfoMetric
           label={
-            <Stack direction="row" spacing={1} alignItems="center">
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Typography>{t('admin.subscription.currentBalance')}</Typography>
               <Tooltip
                 title={
@@ -149,7 +200,3 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
     </>
   );
 }
-
-SubscriptionMetrics.defaultProps = {
-  showBalance: true,
-};

package/src/components/subscription/portal/actions.tsx

@@ -89,23 +89,6 @@ type Props = {
   buttonSize?: 'small' | 'medium' | 'large';
 };
 
-SubscriptionActions.defaultProps = {
-  showExtra: false,
-  showRecharge: false,
-  showBalanceInfo: false,
-  showOverdraftProtection: false,
-  showDelegation: false,
-  onChange: null,
-  actionProps: {},
-  mode: 'all-buttons',
-  setUp: null,
-  showUnsubscribe: true,
-  includeActions: null,
-  excludeActions: null,
-  forceShowDetailAction: false,
-  buttonSize: 'small',
-};
-
 const fetchChangePlan = async (id: string): Promise<boolean> => {
   try {
     const res = await api.get(`/api/subscriptions/${id}/change-plan`);
@@ -130,26 +113,27 @@ const fetchBatchPay = async (id: string): Promise<string> => {
 const supportRecharge = (subscription: TSubscriptionExpanded) => {
   return (
     ['active', 'trialing', 'past_due'].includes(subscription?.status) &&
-    ['arcblock', 'ethereum', 'base'].includes(subscription?.paymentMethod?.type)
+    ['arcblock', 'ethereum', 'base'].includes(subscription?.paymentMethod?.type) &&
+    subscription.paymentCurrency?.type !== 'credit'
   );
 };
 
 export function SubscriptionActionsInner({
   subscription,
-  showExtra,
-  showRecharge,
-  showOverdraftProtection,
-  showDelegation,
-  showUnsubscribe,
-  onChange,
-  actionProps,
-  mode,
-  setUp,
-  showBalanceInfo,
-  includeActions,
-  excludeActions,
-  forceShowDetailAction,
-  buttonSize,
+  showExtra = false,
+  showRecharge = false,
+  showOverdraftProtection = false,
+  showDelegation = false,
+  showUnsubscribe = true,
+  onChange = undefined,
+  actionProps = {},
+  mode = 'all-buttons',
+  setUp = undefined,
+  showBalanceInfo = false,
+  includeActions = null,
+  excludeActions = null,
+  forceShowDetailAction = false,
+  buttonSize = 'small',
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
@@ -396,7 +380,12 @@ export function SubscriptionActionsInner({
         show: !!(showRecharge && supportRecharge(subscription)),
         label: () => {
           const balanceDisplay = (
-            <Stack direction="row" spacing={0.5} alignItems="center">
+            <Stack
+              direction="row"
+              spacing={0.5}
+              sx={{
+                alignItems: 'center',
+              }}>
               <AddOutlined fontSize="small" />
               {t('customer.recharge.title')}
             </Stack>
@@ -408,19 +397,6 @@ export function SubscriptionActionsInner({
 
             return (
               <Tooltip
-                componentsProps={{
-                  tooltip: {
-                    sx: {
-                      bgcolor: 'background.paper',
-                      color: 'text.primary',
-                      boxShadow: 2,
-                      padding: '10px 16px',
-                      maxWidth: 480,
-                      minWidth: 350,
-                      wordBreak: 'break-word',
-                    },
-                  },
-                }}
                 title={
                   <Box>
                     {isInsufficientBalance && (
@@ -429,7 +405,11 @@ export function SubscriptionActionsInner({
                       </Alert>
                     )}
                     <Stack spacing={0.5}>
-                      <Box display="flex" justifyContent="space-between">
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                        }}>
                         <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.currentBalance')}
                         </Typography>
@@ -437,7 +417,11 @@ export function SubscriptionActionsInner({
                           {formattedBalance} {subscription.paymentCurrency.symbol}
                         </Typography>
                       </Box>
-                      <Box display="flex" justifyContent="space-between">
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                        }}>
                         <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.nextInvoiceAmount')}
                         </Typography>
@@ -445,7 +429,11 @@ export function SubscriptionActionsInner({
                           {formattedUpcoming} {subscription.paymentCurrency.symbol}
                         </Typography>
                       </Box>
-                      <Box display="flex" justifyContent="space-between">
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                        }}>
                         <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.paymentAddress')}
                         </Typography>
@@ -454,7 +442,20 @@ export function SubscriptionActionsInner({
                     </Stack>
                   </Box>
                 }
-                placement="top">
+                placement="top"
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      bgcolor: 'background.paper',
+                      color: 'text.primary',
+                      boxShadow: 2,
+                      padding: '10px 16px',
+                      maxWidth: 480,
+                      minWidth: 350,
+                      wordBreak: 'break-word',
+                    },
+                  },
+                }}>
                 {balanceDisplay}
               </Tooltip>
             );
@@ -632,7 +633,13 @@ export function SubscriptionActionsInner({
   };
 
   return (
-    <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: 'center',
+        gap: 1,
+        flexWrap: 'wrap',
+      }}>
       {renderActions()}
       {state.action === 'cancel' && state.subscription && (
         <ConfirmDialog
@@ -660,7 +667,6 @@ export function SubscriptionActionsInner({
           }}
         />
       )}
-
       {state.openProtection && (
         <OverdraftProtectionDialog
           value={overdraftProtection}
@@ -675,7 +681,6 @@ export function SubscriptionActionsInner({
           initValues={state.protectionInitValues}
         />
       )}
-
       {state.batchPay && (
         <OverdueInvoicePayment
           subscriptionId={subscription.id}
@@ -694,7 +699,26 @@ export function SubscriptionActionsInner({
   );
 }
 
-export default function SubscriptionActions(props: Props) {
+export default function SubscriptionActions(rawProps: Props) {
+  const props: Props = Object.assign(
+    {
+      showExtra: false,
+      showRecharge: false,
+      showBalanceInfo: false,
+      showOverdraftProtection: false,
+      showDelegation: false,
+      onChange: null,
+      actionProps: {},
+      mode: 'all-buttons',
+      setUp: null,
+      showUnsubscribe: true,
+      includeActions: null,
+      excludeActions: null,
+      forceShowDetailAction: false,
+      buttonSize: 'small',
+    },
+    rawProps
+  );
   const methods = useForm({
     defaultValues: {
       cancel: {
@@ -711,20 +735,3 @@ export default function SubscriptionActions(props: Props) {
     </FormProvider>
   );
 }
-
-SubscriptionActionsInner.defaultProps = {
-  showExtra: false,
-  showRecharge: false,
-  showOverdraftProtection: false,
-  showBalanceInfo: false,
-  showDelegation: false,
-  showUnsubscribe: true,
-  onChange: null,
-  actionProps: {},
-  mode: 'all-buttons',
-  setUp: null,
-  includeActions: null,
-  excludeActions: null,
-  forceShowDetailAction: false,
-  buttonSize: 'small',
-};

package/src/components/subscription/portal/cancel.tsx

@@ -9,7 +9,12 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
   const { control } = useFormContext();
 
   return (
-    <Stack direction="column" spacing={1} alignItems="flex-start">
+    <Stack
+      direction="column"
+      spacing={1}
+      sx={{
+        alignItems: 'flex-start',
+      }}>
       <Typography>
         {data.status === 'trialing'
           ? t('payment.customer.cancel.trialDescription')
@@ -84,8 +89,10 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
             maxRows={4}
             placeholder={t('payment.customer.cancel.comment')}
             {...field}
-            inputProps={{
-              maxLength: 200,
+            slotProps={{
+              htmlInput: {
+                maxLength: 200,
+              },
             }}
           />
         )}

package/src/components/subscription/portal/list.tsx

@@ -52,9 +52,9 @@ type Props = {
 export default function CurrentSubscriptions({
   id,
   status,
-  onChange,
+  onChange = () => {},
   onClickSubscription,
-  onlyActive,
+  onlyActive = false,
   changeActive = () => {},
   setStatusState = () => {},
   setHasSubscriptions = () => {},
@@ -74,10 +74,10 @@ export default function CurrentSubscriptions({
       reloadDeps: [id, status],
       onSuccess(res) {
         if (res.totalCount > 0 || res.count > 0) {
-          setStatusState(true);
-          setHasSubscriptions(true);
+          setStatusState?.(true);
+          setHasSubscriptions?.(true);
         } else {
-          setHasSubscriptions(false);
+          setHasSubscriptions?.(false);
         }
       },
       ...(isMobile
@@ -136,6 +136,7 @@ export default function CurrentSubscriptions({
                 <Stack
                   key={subscription.id}
                   sx={{
+                    flexWrap: 'wrap',
                     padding: 2,
                     height: '100%',
                     borderRadius: 1,
@@ -146,21 +147,37 @@ export default function CurrentSubscriptions({
                     flexDirection: 'column',
                     justifyContent: 'space-between',
                     gap: 2,
+
                     '&:hover': {
                       backgroundColor: 'grey.50',
                       transition: 'background-color 200ms linear',
                       cursor: 'pointer',
                     },
-                  }}
-                  flexWrap="wrap">
-                  <Stack direction="column" flex={1} spacing={2} {...rest}>
+                  }}>
+                  <Stack
+                    direction="column"
+                    spacing={2}
+                    {...rest}
+                    sx={[
+                      {
+                        flex: 1,
+                      },
+                      ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+                    ]}>
                     <Stack
                       direction="row"
                       spacing={1}
-                      alignItems="flex-start"
-                      justifyContent="space-between"
-                      onClick={() => onClickSubscription(subscription)}>
-                      <Stack direction="row" spacing={1.5} alignItems="center">
+                      onClick={() => onClickSubscription(subscription)}
+                      sx={{
+                        alignItems: 'flex-start',
+                        justifyContent: 'space-between',
+                      }}>
+                      <Stack
+                        direction="row"
+                        spacing={1.5}
+                        sx={{
+                          alignItems: 'center',
+                        }}>
                         {subscription.metadata?.appLogo ? (
                           <Avatar
                             src={formatProxyUrl(subscription.metadata?.appLogo)}
@@ -214,10 +231,10 @@ export default function CurrentSubscriptions({
 
                     <Divider />
                     <Stack
-                      gap={1}
-                      justifyContent="space-between"
-                      flexWrap="nowrap"
                       sx={{
+                        gap: 1,
+                        justifyContent: 'space-between',
+                        flexWrap: 'nowrap',
                         flexDirection: 'row',
                         alignItems: 'center',
                       }}>
@@ -242,7 +259,11 @@ export default function CurrentSubscriptions({
                           )}
                         </Typography>
                         {subscriptionTime && (
-                          <Typography variant="body2" color="text.secondary">
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              color: 'text.secondary',
+                            }}>
                             ({subscriptionTime})
                           </Typography>
                         )}
@@ -329,7 +350,13 @@ export default function CurrentSubscriptions({
             })}
           </Stack>
           {hasMore && !isMobile && showLoadingMore && (
-            <Box alignItems="center" gap={0.5} display="flex" mt={0.5}>
+            <Box
+              sx={{
+                alignItems: 'center',
+                gap: 0.5,
+                display: 'flex',
+                mt: 0.5,
+              }}>
               {t('common.loadingMore', { resource: t('admin.subscriptions') })}
             </Box>
           )}
@@ -343,7 +370,10 @@ export default function CurrentSubscriptions({
                 </Button>
               )}
               {!hasMore && data.count > pageSize && (
-                <Typography color="text.secondary">
+                <Typography
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
                   {t('common.noMore', { resource: t('admin.subscriptions') })}
                 </Typography>
               )}
@@ -369,11 +399,3 @@ export default function CurrentSubscriptions({
     </Stack>
   );
 }
-
-CurrentSubscriptions.defaultProps = {
-  onChange: null,
-  onlyActive: false,
-  changeActive: null,
-  setStatusState: null,
-  setHasSubscriptions: null,
-};

package/src/components/uploader.tsx

@@ -21,11 +21,11 @@ type Props = {
 
 export default function Uploader({
   onUploaded,
-  preview,
-  maxFileSize,
-  maxNumberOfFiles,
-  allowedFileExts,
-  disabled,
+  preview = '',
+  maxFileSize = undefined,
+  maxNumberOfFiles = 1,
+  allowedFileExts = ['.png', '.jpeg', '.webp', '.svg', '.jpg'],
+  disabled = false,
 }: Props) {
   const uploaderRef = useRef<any>(null);
   const handleOpen = useCallback(() => {
@@ -148,14 +148,6 @@ export default function Uploader({
   );
 }
 
-Uploader.defaultProps = {
-  preview: '',
-  maxFileSize: undefined,
-  maxNumberOfFiles: 1,
-  allowedFileExts: ['.png', '.jpeg', '.webp', '.svg', '.jpg'],
-  disabled: false,
-};
-
 const Div = styled(Box)`
   border: 1px solid;
   border-color: ${({ theme }) => theme.palette.grey[100]};