payment-kit 1.18.56 → 1.19.1

package/src/components/info-card.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { getWordBreakStyle } from '@blocklet/payment-react';
 import { Avatar, Stack, SxProps, Typography, Tooltip } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
@@ -14,17 +15,31 @@ type Props = {
   tooltip?: string | React.ReactNode;
 };
 
-export default function InfoCard(props: Props) {
+export default function InfoCard(rawProps: Props) {
+  const props = Object.assign(
+    {
+      logo: '',
+      size: 40,
+      variant: 'rounded',
+      sx: {},
+      className: '',
+      logoName: '',
+      tooltip: false,
+    },
+    rawProps
+  );
   const dimensions = { width: props.size, height: props.size, ...props.sx };
   const avatarName = typeof props.name === 'string' ? props.name : props.logo;
 
   const cardContent = (
     <Stack
       direction="row"
-      alignItems="center"
       spacing={1}
       className={`info-card-wrapper ${props.className}`}
-      sx={{ cursor: props.tooltip ? 'pointer' : 'default' }}>
+      sx={{
+        alignItems: 'center',
+        cursor: props.tooltip ? 'pointer' : 'default',
+      }}>
       {props.logo ? (
         <Avatar src={props.logo} alt={props.logoName ?? avatarName} variant={props.variant as any} sx={dimensions} />
       ) : (
@@ -34,18 +49,27 @@ export default function InfoCard(props: Props) {
       )}
       <Stack
         direction="column"
-        alignItems="flex-start"
-        justifyContent="space-around"
         className="info-card"
         sx={{
+          alignItems: 'flex-start',
+          justifyContent: 'space-around',
           wordBreak: getWordBreakStyle(props.name),
           minWidth: 140,
         }}>
-        <Typography variant="body2" color="text.primary" component="div">
+        <Typography
+          variant="body2"
+          component="div"
+          sx={{
+            color: 'text.primary',
+          }}>
           {props.name}
         </Typography>
         {props.description && (
-          <Typography variant="subtitle2" color="text.secondary">
+          <Typography
+            variant="subtitle2"
+            sx={{
+              color: 'text.secondary',
+            }}>
             {props.description}
           </Typography>
         )}
@@ -58,7 +82,7 @@ export default function InfoCard(props: Props) {
       <Tooltip
         title={props.tooltip}
         placement="top-start"
-        componentsProps={{
+        slotProps={{
           tooltip: {
             sx: {
               bgcolor: 'background.paper',
@@ -90,13 +114,3 @@ export default function InfoCard(props: Props) {
 
   return cardContent;
 }
-
-InfoCard.defaultProps = {
-  logo: '',
-  size: 40,
-  variant: 'rounded',
-  sx: {},
-  className: '',
-  logoName: '',
-  tooltip: false,
-};

package/src/components/info-metric.tsx

@@ -10,15 +10,28 @@ type Props = {
   divider?: boolean;
 };
 
-export default function InfoMetric(props: Props) {
+export default function InfoMetric(rawProps: Props) {
+  const props = Object.assign(
+    {
+      tip: '',
+      divider: false,
+    },
+    rawProps
+  );
+
   const { t } = useLocaleContext();
+  // eslint-disable-next-line react/prop-types
   const isNone = isEmptyExceptNumber(props.value);
   return (
     <>
       <Stack direction="column" alignItems="flex-start">
         <Typography component="div" variant="subtitle2" mb={1} color="text.primary">
+          {/* eslint-disable-next-line react/prop-types */}
           {props.label}
+          {/* eslint-disable-next-line react/prop-types */}
+          {/* eslint-disable-next-line react/prop-types */}
           {!!props.tip && (
+            // eslint-disable-next-line react/prop-types
             <Tooltip title={props.tip}>
               <InfoOutlined fontSize="small" />
             </Tooltip>
@@ -29,15 +42,12 @@ export default function InfoMetric(props: Props) {
           variant="body1"
           color={isNone ? 'text.disabled' : 'text.secondary'}
           sx={{ width: '100%', minHeight: '24px' }}>
+          {/* eslint-disable-next-line react/prop-types */}
           {isNone ? t('common.none') : props.value}
         </Typography>
       </Stack>
+      {/* eslint-disable-next-line react/prop-types */}
       {props.divider && <Divider orientation="vertical" flexItem />}
     </>
   );
 }
-
-InfoMetric.defaultProps = {
-  tip: '',
-  divider: false,
-};

package/src/components/info-row-group.tsx

@@ -98,7 +98,7 @@ function InfoRowGroup({ children, loading = false, skeletonHeight = 24, sx = {}
             },
           },
         };
-        return cloneElement(child as ReactElement, childProps);
+        return cloneElement(child as ReactElement<any>, childProps);
       }
       return child;
     });
@@ -113,10 +113,4 @@ function InfoRowGroup({ children, loading = false, skeletonHeight = 24, sx = {}
   );
 }
 
-InfoRowGroup.defaultProps = {
-  loading: false,
-  skeletonHeight: 24,
-  sx: {},
-};
-
 export default InfoRowGroup;

package/src/components/info-row.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Stack, SxProps } from '@mui/material';
 import { useContext } from 'react';
@@ -16,16 +17,18 @@ type Props = {
   showLabel?: boolean;
 };
 
-InfoRow.defaultProps = {
-  value: undefined,
-  sizes: [1, 3],
-  alignItems: 'center',
-  direction: 'row',
-  sx: {},
-  showLabel: true,
-};
-
-export default function InfoRow(props: Props) {
+export default function InfoRow(rawProps: Props) {
+  const props = Object.assign(
+    {
+      value: undefined,
+      sizes: [1, 3],
+      alignItems: 'center',
+      direction: 'row',
+      sx: {},
+      showLabel: true,
+    },
+    rawProps
+  );
   const { t } = useLocaleContext();
   const isNone = isEmptyExceptNumber(props.value);
   const sizes = props.sizes || [1, 3];
@@ -33,31 +36,33 @@ export default function InfoRow(props: Props) {
   return (
     <Stack
       direction={props.direction || 'row'}
-      alignItems={props.alignItems}
-      justifyContent="space-between"
-      flexWrap="wrap"
-      gap={1}
+      className="info-row-wrapper"
       sx={{
+        alignItems: props.alignItems,
+        justifyContent: 'space-between',
+        flexWrap: 'wrap',
+        gap: 1,
         mb: 2,
         ...props.sx,
+
         a: {
           color: 'text.link',
         },
-      }}
-      className="info-row-wrapper">
+      }}>
       {props.showLabel && (
         <Box
-          flex={sizes[0]}
           className="info-row-label"
-          color="text.primary"
-          fontSize={14}
           sx={{
+            color: 'text.primary',
+            fontSize: 14,
             flex: props.direction === 'column' ? 'none' : sizes[0],
             mb: props.direction === 'column' ? 0.5 : 0,
+
             ...(inGroup && {
               flex: 'none',
               whiteSpace: 'nowrap',
             }),
+
             fontWeight: {
               xs: 500,
               md: 400,
@@ -66,13 +71,14 @@ export default function InfoRow(props: Props) {
           {props.label}
         </Box>
       )}
-
       <Box
-        flex={sizes[1]}
-        color={isNone ? 'text.disabled' : 'text.secondary'}
         className="info-row-value"
-        fontSize={14}
-        sx={{ wordBreak: getWordBreakStyle(props.value) }}>
+        sx={{
+          flex: sizes[1],
+          color: isNone ? 'text.disabled' : 'text.secondary',
+          fontSize: 14,
+          wordBreak: getWordBreakStyle(props.value),
+        }}>
         {isNone ? t('common.none') : props.value}
       </Box>
     </Stack>

package/src/components/invoice/action.tsx

@@ -17,17 +17,11 @@ type Props = {
   mode?: 'admin' | 'customer';
 };
 
-InvoiceActions.defaultProps = {
-  variant: 'compact',
-
-  mode: 'admin',
-};
-
 const fetchStakingData = (id: string): Promise<{ value: string }> => {
   return api.get(`/api/invoices/${id}/return-stake`).then((res: any) => res.data);
 };
 
-export default function InvoiceActions({ data, variant, onChange, mode }: Props) {
+export default function InvoiceActions({ data, variant = 'compact', onChange, mode = 'admin' }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const [state, setState] = useSetState({

package/src/components/invoice/list.tsx

@@ -12,7 +12,7 @@ import {
   getTxLink,
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
-import { CircularProgress, Typography } from '@mui/material';
+import { Avatar, CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -73,21 +73,6 @@ const getListKey = (props: ListProps) => {
   return 'invoices';
 };
 
-InvoiceList.defaultProps = {
-  features: {
-    customer: true,
-    filter: true,
-  },
-  customer_id: '',
-  subscription_id: '',
-  status: '',
-  include_staking: false,
-  include_return_staking: false,
-  ignore_zero: false,
-
-  mode: 'admin',
-};
-
 const getInvoiceLink = (invoice: TInvoiceExpanded) => {
   if (invoice.id.startsWith('in_')) {
     return {
@@ -116,14 +101,17 @@ function InvoiceLink({ invoice, children }: { invoice: TInvoiceExpanded; childre
 }
 
 export default function InvoiceList({
-  customer_id,
-  subscription_id,
-  features,
-  status,
-  include_staking,
-  include_return_staking,
-  ignore_zero,
-  mode,
+  customer_id = '',
+  subscription_id = '',
+  features = {
+    customer: true,
+    filter: true,
+  },
+  status = '',
+  include_staking = false,
+  include_return_staking = false,
+  ignore_zero = false,
+  mode = 'admin',
 }: ListProps) {
   const listKey = getListKey({ customer_id, subscription_id });
 
@@ -176,8 +164,10 @@ export default function InvoiceList({
             <InvoiceLink invoice={item}>
               <Typography
                 component="strong"
-                fontWeight={600}
-                sx={{ textDecoration: item.status === 'void' ? 'line-through' : 'none' }}>
+                sx={{
+                  fontWeight: 600,
+                  textDecoration: item.status === 'void' ? 'line-through' : 'none',
+                }}>
                 {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
                 {item?.paymentCurrency.symbol}
               </Typography>
@@ -186,6 +176,24 @@ export default function InvoiceList({
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const invoice = data?.list[index] as TInvoiceExpanded;
+          return (
+            <InvoiceLink invoice={invoice}>
+              <Typography sx={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}>
+                <Avatar src={invoice.paymentMethod.logo} sx={{ width: 18, height: 18, mr: 1 }} />
+                {invoice.paymentMethod.name}
+              </Typography>
+            </InvoiceLink>
+          );
+        },
+      },
+    },
     {
       label: t('common.status'),
       name: 'status',

package/src/components/invoice/recharge.tsx

@@ -77,16 +77,14 @@ const getListKey = (props: ListProps) => {
   return 'invoices';
 };
 
-RechargeList.defaultProps = {
-  features: {
+export default function RechargeList({
+  currency_id = '',
+  subscription_id = '',
+  features = {
     customer: true,
     filter: true,
   },
-  currency_id: '',
-  subscription_id: '',
-};
-
-export default function RechargeList({ currency_id, subscription_id, features }: ListProps) {
+}: ListProps) {
   const listKey = getListKey({ currency_id, subscription_id });
 
   const { t, locale } = useLocaleContext();

package/src/components/invoice/table.tsx

@@ -119,7 +119,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
   };
 }
 
-export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props) {
+export default function InvoiceTable({ invoice, simple = false, emptyNodeText = '' }: Props) {
   const { t, locale } = useLocaleContext();
   const { detail, summary } = getInvoiceRows(invoice);
   const [state, setState] = useSetState({
@@ -163,15 +163,16 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
             <Stack
               direction="row"
               spacing={0.5}
-              alignItems="center"
+              onClick={() => onOpenUsageRecords(item)}
               sx={{
+                alignItems: 'center',
                 cursor: 'pointer',
+
                 justifyContent: {
                   xs: 'flex-start',
                   md: 'flex-end',
                 },
-              }}
-              onClick={() => onOpenUsageRecords(item)}>
+              }}>
               <Typography component="span">{item.quantity}</Typography>
               {!!item.rawQuantity && (
                 <Tooltip
@@ -268,17 +269,26 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
           }}>
           {summary.map((line) => (
             <Box key={line.key}>
-              <Typography component="span" variant="body1" color="text.secondary">
+              <Typography
+                component="span"
+                variant="body1"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t(line.key)}:&nbsp;
               </Typography>
-              <Typography component="span" variant="body1" color="text.primary">
+              <Typography
+                component="span"
+                variant="body1"
+                sx={{
+                  color: 'text.primary',
+                }}>
                 {line.value}
               </Typography>
             </Box>
           ))}
         </Stack>
       )}
-
       {state.subscriptionId && state.subscriptionItemId && (
         <UsageRecordDialog
           subscriptionId={state.subscriptionId}
@@ -294,11 +304,6 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
   );
 }
 
-InvoiceTable.defaultProps = {
-  simple: false,
-  emptyNodeText: '',
-};
-
 const Root = styled(Box)`
   .invoice-summary {
     padding-right: 16px;

package/src/components/layout/user.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { PaymentProvider } from '@blocklet/payment-react';
-import { UserCenter } from '@blocklet/ui-react';
+import { UserCenter } from '@blocklet/ui-react/lib/UserCenter';
 import { useEffect } from 'react';
 
 import { useSearchParams } from 'react-router-dom';