@blocklet/payment-react 1.18.56 → 1.19.1

package/src/components/loading-button.tsx

@@ -7,7 +7,6 @@ import {
   Theme,
   Typography,
 } from '@mui/material';
-import { forwardRef } from 'react';
 
 export interface LoadingButtonProps extends ButtonProps {
   loading?: boolean;
@@ -17,84 +16,72 @@ export interface LoadingButtonProps extends ButtonProps {
   loadingOnly?: boolean;
 }
 
-const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
-  (
-    {
-      children,
-      loading,
-      loadingPosition = 'start',
-      loadingIndicator,
-      loadingProps = {},
-      onClick,
-      sx,
-      loadingOnly = false,
-      ...props
-    },
-    ref
-  ) => {
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      if (loading) {
-        return;
-      }
-      onClick?.(e);
-    };
+export default function LoadingButton({
+  ref = undefined,
+  children,
+  loading = false,
+  loadingPosition = 'start',
+  loadingIndicator = undefined,
+  loadingProps = {},
+  loadingOnly = false,
+  onClick,
+  sx,
+  ...props
+}: LoadingButtonProps & {
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}) {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (loading) {
+      return;
+    }
+    onClick?.(e);
+  };
 
-    const getPositionStyles = (position: string) => {
-      return {
-        color: 'inherit',
-        ...(position === 'start' && { mr: 1 }),
-        ...(position === 'end' && { ml: 1 }),
-        ...(position === 'center' && {
-          position: 'absolute',
-          left: '50%',
-          transform: 'translateY(-50%) translateX(-50%)',
-          top: '50%',
-        }),
-        display: 'inline-flex',
-        alignItems: 'center',
-      } as const;
-    };
+  const getPositionStyles = (position: string) => {
+    return {
+      color: 'inherit',
+      ...(position === 'start' && { mr: 1 }),
+      ...(position === 'end' && { ml: 1 }),
+      ...(position === 'center' && {
+        position: 'absolute',
+        left: '50%',
+        transform: 'translateY(-50%) translateX(-50%)',
+        top: '50%',
+      }),
+      display: 'inline-flex',
+      alignItems: 'center',
+    } as const;
+  };
 
-    const defaultIndicator = (
-      <CircularProgress size={16} {...loadingProps} sx={{ color: 'inherit', ...(loadingProps?.sx || {}) }} />
-    );
+  const defaultIndicator = (
+    <CircularProgress size={16} {...loadingProps} sx={{ color: 'inherit', ...(loadingProps?.sx || {}) }} />
+  );
 
-    const indicator = (
-      <Typography sx={getPositionStyles(loadingPosition) as SxProps<Theme>}>
-        {loadingIndicator || defaultIndicator}
-      </Typography>
-    );
+  const indicator = (
+    <Typography sx={getPositionStyles(loadingPosition) as SxProps<Theme>}>
+      {loadingIndicator || defaultIndicator}
+    </Typography>
+  );
 
-    return (
-      <Button
-        ref={ref}
-        disabled={props.disabled || loading}
-        onClick={handleClick}
-        sx={{
-          position: 'relative',
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          ...sx,
-        }}
-        {...props}>
-        {loading && loadingPosition === 'start' && indicator}
-        <Typography sx={{ visibility: loading && loadingOnly ? 'hidden' : 'visible' }}>{children}</Typography>
-        {loading && loadingPosition === 'center' && indicator}
-        {loading && loadingPosition === 'end' && indicator}
-      </Button>
-    );
-  }
-);
+  return (
+    <Button
+      ref={ref}
+      disabled={props.disabled || loading}
+      onClick={handleClick}
+      sx={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...sx,
+      }}
+      {...props}>
+      {loading && loadingPosition === 'start' && indicator}
+      <Typography sx={{ visibility: loading && loadingOnly ? 'hidden' : 'visible' }}>{children}</Typography>
+      {loading && loadingPosition === 'center' && indicator}
+      {loading && loadingPosition === 'end' && indicator}
+    </Button>
+  );
+}
 
 LoadingButton.displayName = 'LoadingButton';
-
-LoadingButton.defaultProps = {
-  loading: false,
-  loadingIndicator: undefined,
-  loadingPosition: 'start',
-  loadingProps: {},
-  loadingOnly: false,
-};
-
-export default LoadingButton;

package/src/components/over-due-invoice-payment.tsx

@@ -92,16 +92,18 @@ const fetchOverdueInvoices = async (params: {
 };
 
 function OverdueInvoicePayment({
-  subscriptionId,
-  customerId,
+  subscriptionId = undefined,
+  customerId = undefined,
   mode = 'default',
-  dialogProps = {},
-  children,
+  dialogProps = {
+    open: true,
+  },
+  children = undefined,
   onPaid = () => {},
   detailLinkOptions = { enabled: true },
   successToast = true,
   alertMessage = '',
-  authToken,
+  authToken = undefined,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const theme = useTheme();
@@ -463,11 +465,19 @@ function OverdueInvoicePayment({
       {error ? (
         <Alert severity="error">{error.message}</Alert>
       ) : (
-        <Stack gap={1}>
+        <Stack
+          sx={{
+            gap: 1,
+          }}>
           {summaryList.length === 0 && (
             <>
               <Alert severity="success">{getEmptyStateMessage()}</Alert>
-              <Stack direction="row" justifyContent="flex-end" mt={2}>
+              <Stack
+                direction="row"
+                sx={{
+                  justifyContent: 'flex-end',
+                  mt: 2,
+                }}>
                 <Button variant="outlined" color="primary" onClick={handleClose} sx={{ width: 'fit-content' }}>
                   {/* @ts-ignore */}
                   {t('common.know')}
@@ -477,7 +487,11 @@ function OverdueInvoicePayment({
           )}
           {summaryList.length === 1 && (
             <>
-              <Typography color="text.secondary" variant="body1">
+              <Typography
+                variant="body1"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {getOverdueTitle()}
                 {detailLinkOptions.enabled && (
                   <>
@@ -494,7 +508,13 @@ function OverdueInvoicePayment({
                   </>
                 )}
               </Typography>
-              <Stack direction="row" justifyContent="flex-end" gap={2} mt={2}>
+              <Stack
+                direction="row"
+                sx={{
+                  justifyContent: 'flex-end',
+                  gap: 2,
+                  mt: 2,
+                }}>
                 <Button variant="outlined" color="primary" onClick={handleClose}>
                   {/* @ts-ignore */}
                   {t('common.cancel')}
@@ -506,7 +526,11 @@ function OverdueInvoicePayment({
           )}
           {summaryList.length > 1 && (
             <>
-              <Typography color="text.secondary" variant="body1">
+              <Typography
+                variant="body1"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {getOverdueTitle()}
                 {detailLinkOptions.enabled && (
                   <>
@@ -523,7 +547,11 @@ function OverdueInvoicePayment({
                   </>
                 )}
               </Typography>
-              <Typography color="text.secondary" variant="body1">
+              <Typography
+                variant="body1"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t('payment.subscription.overdue.list')}
               </Typography>
               <Stack>
@@ -531,16 +559,18 @@ function OverdueInvoicePayment({
                   <Stack
                     key={item?.currency?.id}
                     direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
                     sx={{
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
                       py: 1,
                       px: 0.5,
                       borderBottom: '1px solid',
                       borderColor: 'grey.200',
+
                       '&:hover': {
                         backgroundColor: () => theme.palette.grey[100],
                       },
+
                       mt: 0,
                     }}>
                     <Typography>
@@ -567,19 +597,4 @@ function OverdueInvoicePayment({
   );
 }
 
-OverdueInvoicePayment.defaultProps = {
-  mode: 'default',
-  onPaid: () => {},
-  dialogProps: {
-    open: true,
-  },
-  children: null,
-  detailLinkOptions: { enabled: true },
-  subscriptionId: undefined,
-  customerId: undefined,
-  successToast: true,
-  alertMessage: '',
-  authToken: undefined,
-};
-
 export default OverdueInvoicePayment;

package/src/components/payment-beneficiaries.tsx

@@ -22,18 +22,17 @@ interface BenefitsProps {
   totalAmount?: string;
 }
 
-PaymentBeneficiaries.defaultProps = {
-  totalAmount: '0',
-};
-
-export default function PaymentBeneficiaries({ data, currency, totalAmount }: BenefitsProps) {
+export default function PaymentBeneficiaries({ data, currency, totalAmount = '0' }: BenefitsProps) {
   const { t } = useLocaleContext();
   return (
     <Stack spacing={2}>
-      <Typography variant="subtitle2" color="text.secondary">
+      <Typography
+        variant="subtitle2"
+        sx={{
+          color: 'text.secondary',
+        }}>
         {t('benefits.title', { count: data.length })}
       </Typography>
-
       {data.map((item) => {
         const amount =
           item.amount ||
@@ -47,17 +46,24 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount }: Be
           <Stack
             key={item.address}
             direction={{ xs: 'column', sm: 'row' }}
-            alignItems="center"
-            justifyContent="space-between"
             sx={{
+              alignItems: 'center',
+              justifyContent: 'space-between',
               px: 0.5,
               borderRadius: 1,
               bgcolor: 'background.paper',
+
               '&:hover': {
                 bgcolor: 'action.hover',
               },
             }}>
-            <Stack direction="row" spacing={1.5} alignItems="center" sx={{ width: { xs: '100%', sm: 'auto' } }}>
+            <Stack
+              direction="row"
+              spacing={1.5}
+              sx={{
+                alignItems: 'center',
+                width: { xs: '100%', sm: 'auto' },
+              }}>
               <Avatar src={item.avatar} alt={item.name} sx={{ width: 32, height: 32 }} variant="square" />
               <Box>
                 <Typography
@@ -75,17 +81,30 @@ export default function PaymentBeneficiaries({ data, currency, totalAmount }: Be
                   }}>
                   {item.name}
                 </Typography>
-                <Typography variant="caption" color="text.secondary" sx={{ cursor: 'pointer' }}>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    color: 'text.secondary',
+                    cursor: 'pointer',
+                  }}>
                   {item.address}
                 </Typography>
               </Box>
             </Stack>
-
-            <Stack alignItems="flex-end" sx={{ width: { xs: '100%', sm: 'auto' }, mt: { xs: 1, sm: 0 } }}>
+            <Stack
+              sx={{
+                alignItems: 'flex-end',
+                width: { xs: '100%', sm: 'auto' },
+                mt: { xs: 1, sm: 0 },
+              }}>
               <Typography variant="subtitle2">
                 {fromUnitToToken(amount, currency.decimal)} {currency.symbol}
               </Typography>
-              <Typography variant="caption" color="text.secondary">
+              <Typography
+                variant="caption"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {Number(item.percent)}%
               </Typography>
             </Stack>

package/src/components/pricing-item.tsx

@@ -20,7 +20,7 @@ export type PricingItemProps = {
   children?: (pricing: PricingRenderProps, product?: TProductExpanded | undefined) => React.ReactNode;
 };
 
-function PricingItem({ productId, quantity, children, priceId }: PricingItemProps) {
+function PricingItem({ productId, quantity, children = undefined, priceId }: PricingItemProps) {
   const { locale } = useLocaleContext();
 
   const { data: productInfo, loading = false } = useRequest(() => fetchProduct(productId), {
@@ -51,7 +51,4 @@ function PricingItem({ productId, quantity, children, priceId }: PricingItemProp
   return <Box>{children ? children(pricing, productInfo) : <Typography>{pricing?.totalPrice}</Typography>}</Box>;
 }
 
-PricingItem.defaultProps = {
-  children: null,
-};
 export default PricingItem;

package/src/components/pricing-table.tsx

@@ -75,14 +75,14 @@ type Props = {
   hideCurrency?: boolean;
 };
 
-PricingTable.defaultProps = {
-  alignItems: 'center',
-  mode: 'checkout',
-  interval: '',
-  hideCurrency: false,
-};
-
-export default function PricingTable({ table, alignItems, interval, mode, onSelect, hideCurrency }: Props) {
+export default function PricingTable({
+  table,
+  alignItems = 'center',
+  interval = '',
+  mode = 'checkout',
+  onSelect,
+  hideCurrency = false,
+}: Props) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const {

package/src/components/resume-subscription.tsx

@@ -59,10 +59,12 @@ const recoverSubscription = async (params: {
 
 function RecoverSubscription({
   subscriptionId,
-  dialogProps = {},
+  dialogProps = {
+    open: true,
+  },
   onResumed = () => {},
   successToast = true,
-  authToken,
+  authToken = undefined,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -182,8 +184,15 @@ function RecoverSubscription({
       {error ? (
         <Alert severity="error">{error.message}</Alert>
       ) : (
-        <Stack gap={2}>
-          <Typography color="text.secondary" variant="body2">
+        <Stack
+          sx={{
+            gap: 2,
+          }}>
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'text.secondary',
+            }}>
             {t('payment.customer.recover.description', {
               date: formatToDate(Number(data?.subscription?.current_period_end || '0') * 1000),
             })}
@@ -191,7 +200,13 @@ function RecoverSubscription({
 
           {needStake && <Alert severity="warning">{t('payment.customer.recover.stakeRequiredDescription')}</Alert>}
 
-          <Stack direction="row" justifyContent="flex-end" gap={2} mt={2}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: 'flex-end',
+              gap: 2,
+              mt: 2,
+            }}>
             <Button variant="outlined" color="primary" onClick={handleClose}>
               {t('common.cancel')}
             </Button>
@@ -205,13 +220,4 @@ function RecoverSubscription({
   );
 }
 
-RecoverSubscription.defaultProps = {
-  onResumed: () => {},
-  dialogProps: {
-    open: true,
-  },
-  successToast: true,
-  authToken: undefined,
-};
-
 export default RecoverSubscription;

package/src/components/table.tsx

@@ -81,13 +81,13 @@ const Wrapped = styled(Datatable)`
   table.MuiTable-root {
     outline: 1px solid;
     outline-color: ${({ theme }) => theme.palette.grey[100]};
-    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+    border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
     overflow: hidden;
   }
   [class*='MUIDataTable-responsiveBase'] {
     outline: 1px solid;
     outline-color: ${({ theme }) => theme.palette.grey[100]};
-    border-radius: ${({ theme }) => `${2 * theme.shape.borderRadius}px`};
+    border-radius: ${({ theme }) => `${2 * (theme.shape.borderRadius as number)}px`};
   }
 
   th.MuiTableCell-head {

package/src/components/truncated-text.tsx

@@ -35,9 +35,3 @@ export default function TruncatedText({ text = '', maxLength = 100, useWidth = f
     </CustomTooltip>
   );
 }
-
-TruncatedText.defaultProps = {
-  useWidth: false,
-  text: '',
-  maxLength: 100,
-};

package/src/contexts/donate.tsx

@@ -162,7 +162,12 @@ function DonateProvider({
         <>
           {enableDonate && isAdmin && (
             <Stack spacing={1} sx={{ alignItems: 'center' }}>
-              <Typography color="text.secondary">{t('payment.checkout.donation.inactive')}</Typography>
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                {t('payment.checkout.donation.inactive')}
+              </Typography>
               <Button
                 size="small"
                 variant="outlined"
@@ -205,12 +210,6 @@ function useDonateContext() {
   return context;
 }
 
-DonateProvider.defaultProps = {
-  defaultSettings: {},
-  active: true,
-  enableDonate: false,
-};
-
 export const clearDonateCache = (mountLocation: string) => {
   const livemode = localStorage.getItem('livemode') !== 'false';
   const cacheKey = `donate-settings-${mountLocation}-${livemode}`;

package/src/contexts/payment.tsx

@@ -90,7 +90,13 @@ const syncToSpaceRequest = (userDid: string, spaceDid: string) => {
   });
 };
 
-function PaymentProvider({ session, connect, children, baseUrl, authToken }: PaymentContextProps) {
+function PaymentProvider({
+  session,
+  connect,
+  children,
+  baseUrl = undefined,
+  authToken = undefined,
+}: PaymentContextProps) {
   const [crossOriginLoading, setCrossOriginLoading] = useState(false);
 
   if (authToken) {
@@ -217,6 +223,4 @@ function usePaymentContext() {
   return context;
 }
 
-PaymentProvider.defaultProps = {};
-
 export { PaymentContext, PaymentProvider, Consumer as SettingsConsumer, usePaymentContext };