payment-kit 1.18.55 → 1.19.0

package/src/components/payment-link/actions.tsx

@@ -18,11 +18,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-PaymentLinkActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function PaymentLinkActions({ data, variant, onChange }: Props) {
+export default function PaymentLinkActions({ data, variant = 'compact', onChange }: Props) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({
     action: '',

package/src/components/payment-link/after-pay.tsx

@@ -54,8 +54,10 @@ export default function AfterPay() {
               error={!!get(errors, field.name)}
               fullWidth
               size="small"
-              inputProps={{
-                maxLength: 200,
+              slotProps={{
+                htmlInput: {
+                  maxLength: 200,
+                },
               }}
             />
           )}

package/src/components/payment-link/before-pay.tsx

@@ -16,7 +16,7 @@ import ProductSelect from './product-select';
 export default function BeforePay({
   triggerError = () => {},
 }: {
-  triggerError: (keys: { [key: string]: boolean }) => void;
+  triggerError?: (keys: { [key: string]: boolean }) => void;
 }) {
   const { t } = useLocaleContext();
   const [params, setParams] = useSearchParams();
@@ -123,12 +123,20 @@ export default function BeforePay({
             );
           })}
           {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).recurring) && (
-            <Typography color="error" fontSize="small">
+            <Typography
+              color="error"
+              sx={{
+                fontSize: 'small',
+              }}>
               {t('admin.paymentLink.recurringNotAligned')}
             </Typography>
           )}
           {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).currency) && (
-            <Typography color="error" fontSize="small">
+            <Typography
+              color="error"
+              sx={{
+                fontSize: 'small',
+              }}>
               {t('admin.paymentLink.currencyNotAligned')}
             </Typography>
           )}
@@ -248,9 +256,11 @@ export default function BeforePay({
             <TextField
               {...field}
               size="small"
-              InputProps={{ endAdornment: t('common.days') }}
               helperText={get(errors, 'subscription_data.trial_period_days')?.message as string}
               error={!!get(errors, 'subscription_data.trial_period_days')}
+              slotProps={{
+                input: { endAdornment: t('common.days') },
+              }}
             />
           )}
         />

package/src/components/payment-link/item.tsx

@@ -75,7 +75,11 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
           ]}
         />
       </ClickBoundary>
-      <Stack direction="column" alignItems="flex-start">
+      <Stack
+        direction="column"
+        sx={{
+          alignItems: 'flex-start',
+        }}>
         <InfoCard
           logo={product.images[0]}
           name={product.name}
@@ -85,10 +89,14 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
           name={getFieldName('quantity')}
           control={control}
           render={({ field }) => (
-            <Stack direction="row" alignItems="center" mt={1}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                mt: 1,
+              }}>
               <TextField
                 sx={{ width: 80, mr: 1 }}
-                inputProps={{ style: { padding: '4px 8px' } }}
                 size="small"
                 type="number"
                 {...field}
@@ -98,6 +106,9 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
                     field.onChange(intValue);
                   }
                 }}
+                slotProps={{
+                  htmlInput: { style: { padding: '4px 8px' } },
+                }}
               />
               <FormLabel style={{ marginBottom: 0 }}>{t('common.quantity')}</FormLabel>
             </Stack>
@@ -118,7 +129,13 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         />
         {adjustable && (
           <>
-            <Stack direction="row" alignItems="center" mt={1} ml={6}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                mt: 1,
+                ml: 6,
+              }}>
               <Typography sx={{ mr: 0.5 }}>Between</Typography>
               <Controller
                 name={getFieldName('adjustable_quantity.minimum')}
@@ -131,10 +148,12 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
                 render={({ field }) => (
                   <TextField
                     sx={{ width: 40 }}
-                    inputProps={{ style: { padding: '4px 8px' } }}
                     size="small"
                     error={!!adjustableError}
                     {...field}
+                    slotProps={{
+                      htmlInput: { style: { padding: '4px 8px' } },
+                    }}
                   />
                 )}
               />
@@ -152,10 +171,12 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
                 render={({ field }) => (
                   <TextField
                     sx={{ width: 40 }}
-                    inputProps={{ style: { padding: '4px 8px' } }}
                     size="small"
                     error={!!adjustableError}
                     {...field}
+                    slotProps={{
+                      htmlInput: { style: { padding: '4px 8px' } },
+                    }}
                   />
                 )}
               />

package/src/components/payment-link/preview.tsx

@@ -1,10 +1,16 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
 import { useTheme } from '@mui/material';
 import Chrome from './chrome';
 
-const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
+export default function PaymentLinkPreview({
+  ref = undefined,
+  id,
+  version = 1,
+}: { id: string; version?: number } & {
+  ref?: React.RefObject<unknown>;
+}) {
   const theme = useTheme();
   const innerRef = useRef(null);
   const size = useSize(innerRef);
@@ -50,10 +56,4 @@ const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; versio
       )}
     </div>
   );
-});
-
-PaymentLinkPreview.defaultProps = {
-  version: 1,
-};
-
-export default PaymentLinkPreview;
+}

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

@@ -40,7 +40,12 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
   const items = (callback?: any) =>
     filterProducts(products, hasSelected).map((product) => [
       <ListSubheader key={product.id} sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
+        <Stack
+          direction="row"
+          spacing={0.5}
+          sx={{
+            alignItems: 'center',
+          }}>
           {product.images[0] ? (
             <Avatar src={product.images[0]} alt={product.name} variant="square" sx={size} />
           ) : (
@@ -65,8 +70,17 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
                 callback(price);
               }
             }}>
-            <Typography color="text.primary">{formatPrice(price, currency!)}</Typography>
-            <Typography color="text.secondary" sx={{ ml: 2 }}>
+            <Typography
+              sx={{
+                color: 'text.primary',
+              }}>
+              {formatPrice(price, currency!)}
+            </Typography>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                ml: 2,
+              }}>
               {getPriceCurrencyOptions(price).length > 1
                 ? ` +${getPriceCurrencyOptions(price).length - 1} more currencies`
                 : ''}

package/src/components/payment-method/arcblock.tsx

@@ -68,7 +68,12 @@ export default function ArcBlockMethodForm({ checkDisabled }: { checkDisabled: (
         disabled={checkDisabled('settings.arcblock.explorer_host')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>

package/src/components/payment-method/base.tsx

@@ -75,7 +75,12 @@ export default function BaseMethodForm({ checkDisabled }: { checkDisabled: (key:
         disabled={checkDisabled('settings.base.confirmation')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>

package/src/components/payment-method/bitcoin.tsx

@@ -68,7 +68,12 @@ export default function BitcoinMethodForm({ checkDisabled }: { checkDisabled: (k
         disabled={checkDisabled('settings.bitcoin.explorer_host')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>

package/src/components/payment-method/ethereum.tsx

@@ -75,7 +75,12 @@ export default function EthereumMethodForm({ checkDisabled }: { checkDisabled: (
         disabled={checkDisabled('settings.ethereum.confirmation')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>

package/src/components/payment-method/evm-rpc-input.tsx

@@ -13,11 +13,7 @@ interface Props {
   disabled?: boolean;
 }
 
-EvmRpcInput.defaultProps = {
-  disabled: false,
-};
-
-export default function EvmRpcInput({ name, label, placeholder, disabled }: Props) {
+export default function EvmRpcInput({ name, label, placeholder, disabled = false }: Props) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   const apiHost = useWatch({
@@ -42,14 +38,22 @@ export default function EvmRpcInput({ name, label, placeholder, disabled }: Prop
               {status.loading ? (
                 <>
                   <CircularProgress size={14} />
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: 'text.secondary',
+                    }}>
                     {t('admin.paymentMethod.evm.checking')}
                   </Typography>
                 </>
               ) : status.connected ? (
                 <>
                   <CheckCircleOutline sx={{ fontSize: 14 }} color="success" />
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: 'text.secondary',
+                    }}>
                     {t('admin.paymentMethod.evm.connected')} | {t('admin.paymentMethod.evm.blockHeight')}:{' '}
                     {status.blockNumber?.toLocaleString()}
                   </Typography>

package/src/components/payment-method/form.tsx

@@ -9,14 +9,9 @@ import EthereumMethodForm from './ethereum';
 import StripeMethodForm from './stripe';
 import BaseMethodForm from './base';
 
-PaymentMethodForm.defaultProps = {
-  action: 'create',
-  editableKeys: [],
-};
-
 export default function PaymentMethodForm({
-  action,
-  editableKeys,
+  action = 'create',
+  editableKeys = [],
 }: {
   action?: 'create' | 'edit';
   editableKeys?: string[];

package/src/components/payouts/actions.tsx

@@ -11,11 +11,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-PayoutActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function PayoutActions({ data, variant }: Props) {
+export default function PayoutActions({ data, variant = 'compact' }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const actions = [

package/src/components/payouts/list.tsx

@@ -70,17 +70,15 @@ const getListKey = (props: ListProps) => {
   return 'payouts';
 };
 
-PayoutList.defaultProps = {
-  features: {
+export default function PayoutList({
+  customer_id = '',
+  payment_intent_id = '',
+  status = '',
+  features = {
     customer: true,
     filter: true,
   },
-  status: '',
-  customer_id: '',
-  payment_intent_id: '',
-};
-
-export default function PayoutList({ customer_id, payment_intent_id, status, features }: ListProps) {
+}: ListProps) {
   const { t } = useLocaleContext();
 
   const listKey = getListKey({ customer_id, payment_intent_id });
@@ -120,7 +118,11 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
           const item = data.list[index] as TPayoutExpanded;
           return (
             <Link to={`/admin/payments/${item.id}`}>
-              <Typography component="strong" fontWeight={600}>
+              <Typography
+                component="strong"
+                sx={{
+                  fontWeight: 600,
+                }}>
                 {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
                 &nbsp;
                 {item?.paymentCurrency.symbol}

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

@@ -57,14 +57,12 @@ const getListKey = (props: ListProps) => {
   return 'payouts-mine';
 };
 
-CustomerRevenueList.defaultProps = {
-  status: '',
-  currency_id: '',
-  customer_id: '',
-  setHasRevenues: () => {},
-};
-
-export default function CustomerRevenueList({ currency_id, status, customer_id, setHasRevenues }: ListProps) {
+export default function CustomerRevenueList({
+  currency_id = '',
+  status = '',
+  customer_id = '',
+  setHasRevenues = () => {},
+}: ListProps) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile('sm');
 
@@ -107,7 +105,11 @@ export default function CustomerRevenueList({ currency_id, status, customer_id,
           const item = data.list[index] as TPayoutExpanded;
           return (
             <Link to={`/customer/payout/${item.id}`}>
-              <Typography component="strong" fontWeight={600}>
+              <Typography
+                component="strong"
+                sx={{
+                  fontWeight: 600,
+                }}>
                 {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
                 &nbsp;
                 {item?.paymentCurrency.symbol}

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

@@ -19,20 +19,14 @@ type Props = {
   selectSX?: SxProps;
 };
 
-CurrencySelect.defaultProps = {
-  width: '100%',
-  disabled: false,
-  selectSX: {},
-};
-
 export default function CurrencySelect({
   mode: initialMode,
   hasSelected,
   onSelect,
   value,
-  width,
-  disabled,
-  selectSX,
+  width = '100%',
+  disabled = false,
+  selectSX = {},
 }: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
@@ -59,14 +53,17 @@ export default function CurrencySelect({
   if (mode === 'selected') {
     return (
       <Typography
-        fontSize="12px"
         onClick={() => {
           if (canSelect) {
             setMode('selecting');
           }
         }}
-        sx={{ cursor: canSelect ? 'pointer' : 'default', display: 'inline-flex' }}>
-        {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+        sx={{
+          fontSize: '12px',
+          cursor: canSelect ? 'pointer' : 'default',
+          display: 'inline-flex',
+        }}>
+        {selectedCurrency?.symbol}({selectedPaymentMethod?.name})
         {canSelect && <ArrowDropDown sx={{ color: 'text.secondary', fontSize: 21 }} />}
       </Typography>
     );
@@ -99,9 +96,20 @@ export default function CurrencySelect({
           </ListSubheader>,
           ...method.payment_currencies.map((currency) => (
             <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
-              <Stack direction="row" justifyContent="space-between" sx={{ width: '100%' }} gap={2}>
+              <Stack
+                direction="row"
+                sx={{
+                  justifyContent: 'space-between',
+                  gap: 2,
+                  width: '100%',
+                }}>
                 <Currency logo={currency.logo} name={currency.name} />
-                <Typography fontWeight="bold">{currency.symbol}</Typography>
+                <Typography
+                  sx={{
+                    fontWeight: 'bold',
+                  }}>
+                  {currency.symbol}
+                </Typography>
               </Stack>
             </MenuItem>
           )),
@@ -113,10 +121,13 @@ export default function CurrencySelect({
   return (
     <span>
       <Stack
-        sx={{ cursor: 'pointer', display: 'inline-flex' }}
         direction="row"
-        alignItems="center"
-        onClick={() => setMode('selecting')}>
+        onClick={() => setMode('selecting')}
+        sx={{
+          alignItems: 'center',
+          cursor: 'pointer',
+          display: 'inline-flex',
+        }}>
         <AddOutlined color="primary" />
         <Typography color="primary">{t('admin.price.currency.add')}</Typography>
       </Stack>