payment-kit 1.18.55 → 1.19.0

package/src/components/product/form.tsx

@@ -19,7 +19,14 @@ type Props = {
   simple?: boolean;
 };
 
-export default function ProductForm(props: Props) {
+export default function ProductForm(rawProps: Props) {
+  const props = Object.assign(
+    {
+      simple: false,
+    },
+    rawProps
+  );
+
   const { t } = useLocaleContext();
   const { control, setValue, formState } = useFormContext();
   const images = useWatch({ control, name: 'images' });
@@ -34,8 +41,19 @@ export default function ProductForm(props: Props) {
   };
 
   return (
-    <Stack spacing={2} mb={3} direction="row" alignItems="flex-start">
-      <Stack spacing={2} flex={2} alignItems="flex-start">
+    <Stack
+      spacing={2}
+      direction="row"
+      sx={{
+        mb: 3,
+        alignItems: 'flex-start',
+      }}>
+      <Stack
+        spacing={2}
+        sx={{
+          flex: 2,
+          alignItems: 'flex-start',
+        }}>
         <FormInput
           name="name"
           rules={{
@@ -71,7 +89,11 @@ export default function ProductForm(props: Props) {
           inputProps={{ maxLength: 250 }}
         />
         <Collapse trigger={t('admin.product.additional')}>
-          <Stack spacing={2} alignItems="flex-start">
+          <Stack
+            spacing={2}
+            sx={{
+              alignItems: 'flex-start',
+            }}>
             <FormInput
               name="statement_descriptor"
               label={t('admin.product.statement_descriptor.label')}
@@ -90,21 +112,27 @@ export default function ProductForm(props: Props) {
                 maxLength: { value: 12, message: t('common.maxLength', { len: 12 }) },
               }}
             />
+            {/* eslint-disable-next-line react/prop-types */}
             {!props.simple && <ProductFeatures />}
+            {/* eslint-disable-next-line react/prop-types */}
             {!props.simple && <MetadataForm title={t('common.metadata.label')} />}
           </Stack>
         </Collapse>
       </Stack>
-      <Box flex={1}>
+      <Box
+        sx={{
+          flex: 1,
+        }}>
         <Stack direction="column">
-          <Typography mb={1}>{t('admin.product.image.label')}</Typography>
+          <Typography
+            sx={{
+              mb: 1,
+            }}>
+            {t('admin.product.image.label')}
+          </Typography>
           <Uploader onUploaded={onUploaded} preview={images[0]} />
         </Stack>
       </Box>
     </Stack>
   );
 }
-
-ProductForm.defaultProps = {
-  simple: false,
-};

package/src/components/progress-bar.tsx

@@ -3,7 +3,7 @@ import LinearProgress from '@mui/material/LinearProgress';
 import * as React from 'react';
 
 type Props = {
-  pending: boolean;
+  pending?: boolean;
 };
 
 export default function ProgressBar({ pending = true }: Props) {

package/src/components/refund/actions.tsx

@@ -15,13 +15,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-RefundActions.defaultProps = {
-  variant: 'compact',
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: () => {},
-};
-
-export default function RefundActions({ data, variant, onChange }: Props) {
+export default function RefundActions({ data, variant = 'compact', onChange = () => {} }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const [state, setState] = useSetState({

package/src/components/refund/list.tsx

@@ -78,25 +78,16 @@ const getListKey = (props: ListProps) => {
   return 'refunds';
 };
 
-RefundList.defaultProps = {
-  features: {
+export default function RefundList({
+  customer_id = '',
+  invoice_id = '',
+  subscription_id = '',
+  status = '',
+  features = {
     customer: true,
     filter: true,
   },
-  customer_id: '',
-  invoice_id: '',
-  status: '',
-  subscription_id: '',
-  payment_intent_id: '',
-};
-
-export default function RefundList({
-  customer_id,
-  invoice_id,
-  subscription_id,
-  status,
-  features,
-  payment_intent_id,
+  payment_intent_id = '',
 }: ListProps) {
   const { t } = useLocaleContext();
   const listKey = getListKey({ customer_id, invoice_id, subscription_id, payment_intent_id });
@@ -139,7 +130,11 @@ export default function RefundList({
           const item = data.list[index] as TRefundExpanded;
           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}
               </Typography>

package/src/components/section/header.tsx

@@ -8,16 +8,31 @@ type Props = {
   mt?: number;
 };
 
-export default function SectionHeader(props: Props) {
+export default function SectionHeader(rawProps: Props) {
+  const props = Object.assign(
+    {
+      children: null,
+      mb: 1.5,
+      mt: 1.5,
+    },
+    rawProps
+  );
+
   return (
     <Stack
       className="section-header"
       direction="row"
-      justifyContent="space-between"
-      alignItems="center"
-      flexWrap="wrap"
-      gap={1}
-      sx={{ mb: props.mb, mt: props.mt, pb: 1 }}>
+      sx={{
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 1,
+        // eslint-disable-next-line react/prop-types
+        mb: props.mb,
+        // eslint-disable-next-line react/prop-types
+        mt: props.mt,
+        pb: 1,
+      }}>
       <Typography
         variant="h3"
         sx={{
@@ -27,15 +42,11 @@ export default function SectionHeader(props: Props) {
           },
         }}
         component="div">
+        {/* eslint-disable-next-line react/prop-types */}
         {props.title}
       </Typography>
+      {/* eslint-disable-next-line react/prop-types */}
       {props.children}
     </Stack>
   );
 }
-
-SectionHeader.defaultProps = {
-  children: null,
-  mb: 1.5,
-  mt: 1.5,
-};

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

@@ -56,7 +56,12 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
 
   return (
     <Root sx={{ width: 400 }}>
-      <Stack direction="row" spacing={3} alignItems="flex-start">
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
         <Typography className="form-title">{t('admin.subscription.cancel.at.title')}</Typography>
         <Stack>
           <RadioGroup>
@@ -114,7 +119,12 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
         </Stack>
       </Stack>
       <Divider sx={{ my: 1 }} />
-      <Stack direction="row" spacing={3} alignItems="flex-start">
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
         <Typography className="form-title">{t('admin.subscription.cancel.refund.title')}</Typography>
         <Stack>
           <RadioGroup>
@@ -152,7 +162,12 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
       {data.paymentMethod.type === 'arcblock' && (
         <>
           <Divider sx={{ my: 1 }} />
-          <Stack direction="row" spacing={3} alignItems="flex-start">
+          <Stack
+            direction="row"
+            spacing={3}
+            sx={{
+              alignItems: 'flex-start',
+            }}>
             <Typography className="form-title">{t('admin.subscription.cancel.staking.title')}</Typography>
             <RadioGroup>
               <FormControlLabel
@@ -204,8 +219,10 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
                   placeholder={t('admin.subscription.cancel.staking.slashReason')}
                   error={!!(formState.errors as any)?.cancel?.slashReason}
                   helperText={(formState.errors as any)?.cancel?.slashReason?.message}
-                  inputProps={{
-                    maxLength: 200,
+                  slotProps={{
+                    htmlInput: {
+                      maxLength: 200,
+                    },
                   }}
                 />
               )}

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

@@ -20,15 +20,11 @@ type Props = {
   onChange: (action: string) => void;
 };
 
-SubscriptionActionsInner.defaultProps = {
-  variant: 'compact',
-};
-
 const fetchStakingData = (id: string, time: string): Promise<{ return_amount: string; slash_amount: string }> => {
   return api.get(`/api/subscriptions/${id}/staking?time=${encodeURIComponent(time)}`).then((res: any) => res.data);
 };
 
-function SubscriptionActionsInner({ data, variant, onChange }: Props) {
+function SubscriptionActionsInner({ data, variant = 'compact', onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const { reset, getValues, setError, handleSubmit } = useFormContext();
@@ -197,7 +193,14 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
   );
 }
 
-export default function SubscriptionActions(props: Props) {
+export default function SubscriptionActions(rawProps: Props) {
+  const props = Object.assign(
+    {
+      variant: 'compact',
+    },
+    rawProps
+  );
+
   const methods = useForm({
     defaultValues: {
       cancel: {
@@ -224,7 +227,3 @@ export default function SubscriptionActions(props: Props) {
     </FormProvider>
   );
 }
-
-SubscriptionActions.defaultProps = {
-  variant: 'compact',
-};

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

@@ -9,9 +9,22 @@ export default function SubscriptionPauseForm() {
 
   return (
     <Stack direction="column" spacing={3} sx={{ width: 400 }}>
-      <Stack direction="row" spacing={3} alignItems="flex-start">
-        <Typography flex={1}>{t('admin.subscription.pause.type.title')}</Typography>
-        <Stack flex={2}>
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
+        <Typography
+          sx={{
+            flex: 1,
+          }}>
+          {t('admin.subscription.pause.type.title')}
+        </Typography>
+        <Stack
+          sx={{
+            flex: 2,
+          }}>
           <Controller
             name="pause.type"
             control={control}
@@ -50,9 +63,22 @@ export default function SubscriptionPauseForm() {
           )}
         </Stack>
       </Stack>
-      <Stack direction="row" spacing={3} alignItems="flex-start">
-        <Typography flex={1}>{t('admin.subscription.pause.behavior.title')}</Typography>
-        <Stack flex={2}>
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
+        <Typography
+          sx={{
+            flex: 1,
+          }}>
+          {t('admin.subscription.pause.behavior.title')}
+        </Typography>
+        <Stack
+          sx={{
+            flex: 2,
+          }}>
           <Controller
             name="pause.behavior"
             control={control}

package/src/components/subscription/actions/slash-stake.tsx

@@ -34,10 +34,12 @@ export default function SlashStakeForm({ data, stakeValue }: { data: TSubscripti
             placeholder={t('admin.subscription.cancel.staking.slashReason')}
             error={!!(formState.errors as any)?.slashStake?.slashReason}
             helperText={(formState.errors as any)?.slashStake?.slashReason?.message}
-            inputProps={{
-              maxLength: 200,
-            }}
             sx={{ mt: 1 }}
+            slotProps={{
+              htmlInput: {
+                maxLength: 200,
+              },
+            }}
           />
         )}
       />

package/src/components/subscription/description.tsx

@@ -10,11 +10,21 @@ type Props = {
   maxLength?: number;
 };
 
-export default function SubscriptionDescription({ subscription, variant, hideSubscription, maxLength = 80 }: Props) {
+export default function SubscriptionDescription({
+  subscription,
+  variant = 'body1',
+  hideSubscription = false,
+  maxLength = 80,
+}: Props) {
   const { isMobile } = useMobile();
   if (subscription.description) {
     return (
-      <Stack direction="row" alignItems="center" spacing={1}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'center',
+        }}>
         <Typography variant={variant} className="subscription-description">
           <TruncatedText text={subscription.description} maxLength={maxLength} useWidth />
         </Typography>
@@ -33,9 +43,3 @@ export default function SubscriptionDescription({ subscription, variant, hideSub
     </Typography>
   );
 }
-
-SubscriptionDescription.defaultProps = {
-  variant: 'body1',
-  hideSubscription: false,
-  maxLength: 80,
-};

package/src/components/subscription/items/index.tsx

@@ -15,13 +15,9 @@ type ListProps = {
   mode?: 'admin' | 'customer';
 };
 
-SubscriptionItemList.defaultProps = {
-  mode: 'customer',
-};
-
 const size = { width: 48, height: 48 };
 
-export default function SubscriptionItemList({ data, currency, mode }: ListProps) {
+export default function SubscriptionItemList({ data, currency, mode = 'customer' }: ListProps) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
   const isAdmin = mode === 'admin';
@@ -35,12 +31,15 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
           const item = data[index] as TSubscriptionItemExpanded;
           return (
             <Stack
-              flexDirection="row"
-              flexWrap="wrap"
-              alignItems="center"
-              gap={{
-                xs: 1,
-                sm: 2,
+              sx={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+
+                gap: {
+                  xs: 1,
+                  sm: 2,
+                },
               }}>
               {item.price.product.images.length > 0 ? (
                 // @ts-ignore
@@ -58,12 +57,20 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
               )}
               {isAdmin ? (
                 <>
-                  <Typography color="text.primary" fontWeight={600}>
+                  <Typography
+                    sx={{
+                      color: 'text.primary',
+                      fontWeight: 600,
+                    }}>
                     <Link to={`/admin/products/${item?.price.product_id}`}>
                       <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
                     </Link>
                   </Typography>
-                  <Typography color="text.secondary" whiteSpace="nowrap">
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      whiteSpace: 'nowrap',
+                    }}>
                     <Link to={`/admin/products/${item?.price.id}`}>
                       {formatPrice(item.price, currency, item?.price.product.unit_label)}
                     </Link>
@@ -71,10 +78,18 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
                 </>
               ) : (
                 <>
-                  <Typography color="text.primary" fontWeight={600}>
+                  <Typography
+                    sx={{
+                      color: 'text.primary',
+                      fontWeight: 600,
+                    }}>
                     <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
                   </Typography>
-                  <Typography color="text.secondary" whiteSpace="nowrap">
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      whiteSpace: 'nowrap',
+                    }}>
                     {formatPrice(item.price, currency, item?.price.product.unit_label)}
                   </Typography>
                 </>

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

@@ -60,17 +60,26 @@ 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`)}>
+        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' },
+        }}>
         <Avatar
           src={subscription.paymentCurrency?.logo}
           sx={{ width: 16, height: 16 }}
           alt={subscription.paymentCurrency?.name}
         />
-        <Box display="flex" alignItems="baseline">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'baseline',
+          }}>
           {formatBNStr(payerValue?.token, subscription.paymentCurrency.decimal)}
           <Typography sx={{ fontSize: '14px', ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
         </Box>
@@ -90,7 +99,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 +120,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 +168,3 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
     </>
   );
 }
-
-SubscriptionMetrics.defaultProps = {
-  showBalance: true,
-};