@blocklet/payment-react 1.18.55 → 1.19.0

package/src/components/input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, type ReactNode, useImperativeHandle, useRef } from 'react';
+import React, { type ReactNode, useImperativeHandle, useRef } from 'react';
 import { Box, FormLabel, InputAdornment, TextField, Typography } from '@mui/material';
 import get from 'lodash/get';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -24,50 +24,54 @@ function FormInputError({ error }: { error: string }) {
   );
 }
 
-const FormInput = forwardRef<HTMLInputElement, InputProps>(
-  ({ name, label, placeholder, rules, errorPosition, wrapperStyle, ...rest }, ref) => {
-    const { control, formState } = useFormContext();
-    const inputRef = useRef<HTMLInputElement | null>(null);
-    useImperativeHandle(ref, () => {
-      return inputRef.current as HTMLInputElement;
-    });
-    const error = get(formState.errors, name)?.message as string;
+export default function FormInput({
+  ref = undefined,
+  name,
+  label = '',
+  placeholder = '',
+  rules = {},
+  errorPosition = 'bottom',
+  wrapperStyle = {},
+  inputProps = {},
+  ...rest
+}: InputProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+  inputProps?: TextFieldProps['inputProps'];
+}) {
+  const { control, formState } = useFormContext();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  useImperativeHandle(ref, () => {
+    return inputRef.current as HTMLInputElement;
+  });
+  const error = get(formState.errors, name)?.message as string;
 
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={rules}
-        render={({ field }) => (
-          <Box sx={{ width: '100%', ...wrapperStyle }}>
-            {!!label && <FormLabel sx={{ color: 'text.primary' }}>{label}</FormLabel>}
-            <TextField
-              fullWidth
-              error={!!get(formState.errors, name)}
-              helperText={errorPosition === 'bottom' && error ? error : ''}
-              placeholder={placeholder}
-              size="small"
-              {...field}
-              {...rest}
-              inputRef={inputRef}
-              InputProps={Object.assign(
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field }) => (
+        <Box sx={{ width: '100%', ...wrapperStyle }}>
+          {!!label && <FormLabel sx={{ color: 'text.primary' }}>{label}</FormLabel>}
+          <TextField
+            fullWidth
+            error={!!get(formState.errors, name)}
+            helperText={errorPosition === 'bottom' && error ? error : ''}
+            placeholder={placeholder}
+            size="small"
+            {...field}
+            {...rest}
+            inputRef={inputRef}
+            slotProps={{
+              htmlInput: inputProps,
+              input: Object.assign(
                 rest.InputProps || {},
                 errorPosition === 'right' && error ? { endAdornment: <FormInputError error={error} /> } : {}
-              )}
-            />
-          </Box>
-        )}
-      />
-    );
-  }
-);
-
-FormInput.defaultProps = {
-  label: '',
-  placeholder: '',
-  errorPosition: 'bottom',
-  rules: {},
-  wrapperStyle: {},
-};
-
-export default FormInput;
+              ),
+            }}
+          />
+        </Box>
+      )}
+    />
+  );
+}

package/src/components/link.tsx

@@ -10,7 +10,15 @@ interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   outLink?: boolean;
 }
 
-export default function Link({ to, children, onClick, replace, target, outLink = false, ...props }: LinkProps) {
+export default function Link({
+  to,
+  children,
+  onClick,
+  replace = false,
+  target = undefined,
+  outLink = false,
+  ...props
+}: LinkProps) {
   const navigate = useNavigate();
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
@@ -32,9 +40,3 @@ export default function Link({ to, children, onClick, replace, target, outLink =
     </a>
   );
 }
-
-Link.defaultProps = {
-  replace: false,
-  target: undefined,
-  outLink: false,
-};

package/src/components/livemode.tsx

@@ -7,7 +7,8 @@ type Props = {
   backgroundColor?: string;
 } & ChipOwnProps;
 
-export default function Livemode({ color, backgroundColor, sx }: Props) {
+// @ts-ignore
+export default function Livemode({ color = '#bb5504', backgroundColor = '#ffde92', sx }: Props) {
   const { t } = useLocaleContext();
   return (
     <Chip
@@ -29,8 +30,3 @@ export default function Livemode({ color, backgroundColor, sx }: Props) {
     />
   );
 }
-
-Livemode.defaultProps = {
-  color: '#bb5504',
-  backgroundColor: '#ffde92',
-};

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>;
+}) {
+  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,
-};