payment-kit 1.18.56 → 1.19.0

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

@@ -89,23 +89,6 @@ type Props = {
   buttonSize?: 'small' | 'medium' | 'large';
 };
 
-SubscriptionActions.defaultProps = {
-  showExtra: false,
-  showRecharge: false,
-  showBalanceInfo: false,
-  showOverdraftProtection: false,
-  showDelegation: false,
-  onChange: null,
-  actionProps: {},
-  mode: 'all-buttons',
-  setUp: null,
-  showUnsubscribe: true,
-  includeActions: null,
-  excludeActions: null,
-  forceShowDetailAction: false,
-  buttonSize: 'small',
-};
-
 const fetchChangePlan = async (id: string): Promise<boolean> => {
   try {
     const res = await api.get(`/api/subscriptions/${id}/change-plan`);
@@ -136,20 +119,20 @@ const supportRecharge = (subscription: TSubscriptionExpanded) => {
 
 export function SubscriptionActionsInner({
   subscription,
-  showExtra,
-  showRecharge,
-  showOverdraftProtection,
-  showDelegation,
-  showUnsubscribe,
-  onChange,
-  actionProps,
-  mode,
-  setUp,
-  showBalanceInfo,
-  includeActions,
-  excludeActions,
-  forceShowDetailAction,
-  buttonSize,
+  showExtra = false,
+  showRecharge = false,
+  showOverdraftProtection = false,
+  showDelegation = false,
+  showUnsubscribe = true,
+  onChange = undefined,
+  actionProps = {},
+  mode = 'all-buttons',
+  setUp = undefined,
+  showBalanceInfo = false,
+  includeActions = null,
+  excludeActions = null,
+  forceShowDetailAction = false,
+  buttonSize = 'small',
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
@@ -396,7 +379,12 @@ export function SubscriptionActionsInner({
         show: !!(showRecharge && supportRecharge(subscription)),
         label: () => {
           const balanceDisplay = (
-            <Stack direction="row" spacing={0.5} alignItems="center">
+            <Stack
+              direction="row"
+              spacing={0.5}
+              sx={{
+                alignItems: 'center',
+              }}>
               <AddOutlined fontSize="small" />
               {t('customer.recharge.title')}
             </Stack>
@@ -408,19 +396,6 @@ export function SubscriptionActionsInner({
 
             return (
               <Tooltip
-                componentsProps={{
-                  tooltip: {
-                    sx: {
-                      bgcolor: 'background.paper',
-                      color: 'text.primary',
-                      boxShadow: 2,
-                      padding: '10px 16px',
-                      maxWidth: 480,
-                      minWidth: 350,
-                      wordBreak: 'break-word',
-                    },
-                  },
-                }}
                 title={
                   <Box>
                     {isInsufficientBalance && (
@@ -429,7 +404,11 @@ export function SubscriptionActionsInner({
                       </Alert>
                     )}
                     <Stack spacing={0.5}>
-                      <Box display="flex" justifyContent="space-between">
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                        }}>
                         <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.currentBalance')}
                         </Typography>
@@ -437,7 +416,11 @@ export function SubscriptionActionsInner({
                           {formattedBalance} {subscription.paymentCurrency.symbol}
                         </Typography>
                       </Box>
-                      <Box display="flex" justifyContent="space-between">
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                        }}>
                         <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.nextInvoiceAmount')}
                         </Typography>
@@ -445,7 +428,11 @@ export function SubscriptionActionsInner({
                           {formattedUpcoming} {subscription.paymentCurrency.symbol}
                         </Typography>
                       </Box>
-                      <Box display="flex" justifyContent="space-between">
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                        }}>
                         <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.paymentAddress')}
                         </Typography>
@@ -454,7 +441,20 @@ export function SubscriptionActionsInner({
                     </Stack>
                   </Box>
                 }
-                placement="top">
+                placement="top"
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      bgcolor: 'background.paper',
+                      color: 'text.primary',
+                      boxShadow: 2,
+                      padding: '10px 16px',
+                      maxWidth: 480,
+                      minWidth: 350,
+                      wordBreak: 'break-word',
+                    },
+                  },
+                }}>
                 {balanceDisplay}
               </Tooltip>
             );
@@ -632,7 +632,13 @@ export function SubscriptionActionsInner({
   };
 
   return (
-    <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: 'center',
+        gap: 1,
+        flexWrap: 'wrap',
+      }}>
       {renderActions()}
       {state.action === 'cancel' && state.subscription && (
         <ConfirmDialog
@@ -660,7 +666,6 @@ export function SubscriptionActionsInner({
           }}
         />
       )}
-
       {state.openProtection && (
         <OverdraftProtectionDialog
           value={overdraftProtection}
@@ -675,7 +680,6 @@ export function SubscriptionActionsInner({
           initValues={state.protectionInitValues}
         />
       )}
-
       {state.batchPay && (
         <OverdueInvoicePayment
           subscriptionId={subscription.id}
@@ -694,7 +698,26 @@ export function SubscriptionActionsInner({
   );
 }
 
-export default function SubscriptionActions(props: Props) {
+export default function SubscriptionActions(rawProps: Props) {
+  const props: Props = Object.assign(
+    {
+      showExtra: false,
+      showRecharge: false,
+      showBalanceInfo: false,
+      showOverdraftProtection: false,
+      showDelegation: false,
+      onChange: null,
+      actionProps: {},
+      mode: 'all-buttons',
+      setUp: null,
+      showUnsubscribe: true,
+      includeActions: null,
+      excludeActions: null,
+      forceShowDetailAction: false,
+      buttonSize: 'small',
+    },
+    rawProps
+  );
   const methods = useForm({
     defaultValues: {
       cancel: {
@@ -711,20 +734,3 @@ export default function SubscriptionActions(props: Props) {
     </FormProvider>
   );
 }
-
-SubscriptionActionsInner.defaultProps = {
-  showExtra: false,
-  showRecharge: false,
-  showOverdraftProtection: false,
-  showBalanceInfo: false,
-  showDelegation: false,
-  showUnsubscribe: true,
-  onChange: null,
-  actionProps: {},
-  mode: 'all-buttons',
-  setUp: null,
-  includeActions: null,
-  excludeActions: null,
-  forceShowDetailAction: false,
-  buttonSize: 'small',
-};

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

@@ -9,7 +9,12 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
   const { control } = useFormContext();
 
   return (
-    <Stack direction="column" spacing={1} alignItems="flex-start">
+    <Stack
+      direction="column"
+      spacing={1}
+      sx={{
+        alignItems: 'flex-start',
+      }}>
       <Typography>
         {data.status === 'trialing'
           ? t('payment.customer.cancel.trialDescription')
@@ -84,8 +89,10 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
             maxRows={4}
             placeholder={t('payment.customer.cancel.comment')}
             {...field}
-            inputProps={{
-              maxLength: 200,
+            slotProps={{
+              htmlInput: {
+                maxLength: 200,
+              },
             }}
           />
         )}

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

@@ -52,9 +52,9 @@ type Props = {
 export default function CurrentSubscriptions({
   id,
   status,
-  onChange,
+  onChange = () => {},
   onClickSubscription,
-  onlyActive,
+  onlyActive = false,
   changeActive = () => {},
   setStatusState = () => {},
   setHasSubscriptions = () => {},
@@ -74,10 +74,10 @@ export default function CurrentSubscriptions({
       reloadDeps: [id, status],
       onSuccess(res) {
         if (res.totalCount > 0 || res.count > 0) {
-          setStatusState(true);
-          setHasSubscriptions(true);
+          setStatusState?.(true);
+          setHasSubscriptions?.(true);
         } else {
-          setHasSubscriptions(false);
+          setHasSubscriptions?.(false);
         }
       },
       ...(isMobile
@@ -136,6 +136,7 @@ export default function CurrentSubscriptions({
                 <Stack
                   key={subscription.id}
                   sx={{
+                    flexWrap: 'wrap',
                     padding: 2,
                     height: '100%',
                     borderRadius: 1,
@@ -146,21 +147,37 @@ export default function CurrentSubscriptions({
                     flexDirection: 'column',
                     justifyContent: 'space-between',
                     gap: 2,
+
                     '&:hover': {
                       backgroundColor: 'grey.50',
                       transition: 'background-color 200ms linear',
                       cursor: 'pointer',
                     },
-                  }}
-                  flexWrap="wrap">
-                  <Stack direction="column" flex={1} spacing={2} {...rest}>
+                  }}>
+                  <Stack
+                    direction="column"
+                    spacing={2}
+                    {...rest}
+                    sx={[
+                      {
+                        flex: 1,
+                      },
+                      ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
+                    ]}>
                     <Stack
                       direction="row"
                       spacing={1}
-                      alignItems="flex-start"
-                      justifyContent="space-between"
-                      onClick={() => onClickSubscription(subscription)}>
-                      <Stack direction="row" spacing={1.5} alignItems="center">
+                      onClick={() => onClickSubscription(subscription)}
+                      sx={{
+                        alignItems: 'flex-start',
+                        justifyContent: 'space-between',
+                      }}>
+                      <Stack
+                        direction="row"
+                        spacing={1.5}
+                        sx={{
+                          alignItems: 'center',
+                        }}>
                         {subscription.metadata?.appLogo ? (
                           <Avatar
                             src={formatProxyUrl(subscription.metadata?.appLogo)}
@@ -214,10 +231,10 @@ export default function CurrentSubscriptions({
 
                     <Divider />
                     <Stack
-                      gap={1}
-                      justifyContent="space-between"
-                      flexWrap="nowrap"
                       sx={{
+                        gap: 1,
+                        justifyContent: 'space-between',
+                        flexWrap: 'nowrap',
                         flexDirection: 'row',
                         alignItems: 'center',
                       }}>
@@ -242,7 +259,11 @@ export default function CurrentSubscriptions({
                           )}
                         </Typography>
                         {subscriptionTime && (
-                          <Typography variant="body2" color="text.secondary">
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              color: 'text.secondary',
+                            }}>
                             ({subscriptionTime})
                           </Typography>
                         )}
@@ -329,7 +350,13 @@ export default function CurrentSubscriptions({
             })}
           </Stack>
           {hasMore && !isMobile && showLoadingMore && (
-            <Box alignItems="center" gap={0.5} display="flex" mt={0.5}>
+            <Box
+              sx={{
+                alignItems: 'center',
+                gap: 0.5,
+                display: 'flex',
+                mt: 0.5,
+              }}>
               {t('common.loadingMore', { resource: t('admin.subscriptions') })}
             </Box>
           )}
@@ -343,7 +370,10 @@ export default function CurrentSubscriptions({
                 </Button>
               )}
               {!hasMore && data.count > pageSize && (
-                <Typography color="text.secondary">
+                <Typography
+                  sx={{
+                    color: 'text.secondary',
+                  }}>
                   {t('common.noMore', { resource: t('admin.subscriptions') })}
                 </Typography>
               )}
@@ -369,11 +399,3 @@ export default function CurrentSubscriptions({
     </Stack>
   );
 }
-
-CurrentSubscriptions.defaultProps = {
-  onChange: null,
-  onlyActive: false,
-  changeActive: null,
-  setStatusState: null,
-  setHasSubscriptions: null,
-};

package/src/components/uploader.tsx

@@ -21,11 +21,11 @@ type Props = {
 
 export default function Uploader({
   onUploaded,
-  preview,
-  maxFileSize,
-  maxNumberOfFiles,
-  allowedFileExts,
-  disabled,
+  preview = '',
+  maxFileSize = undefined,
+  maxNumberOfFiles = 1,
+  allowedFileExts = ['.png', '.jpeg', '.webp', '.svg', '.jpg'],
+  disabled = false,
 }: Props) {
   const uploaderRef = useRef<any>(null);
   const handleOpen = useCallback(() => {
@@ -148,14 +148,6 @@ export default function Uploader({
   );
 }
 
-Uploader.defaultProps = {
-  preview: '',
-  maxFileSize: undefined,
-  maxNumberOfFiles: 1,
-  allowedFileExts: ['.png', '.jpeg', '.webp', '.svg', '.jpg'],
-  disabled: false,
-};
-
 const Div = styled(Box)`
   border: 1px solid;
   border-color: ${({ theme }) => theme.palette.grey[100]};

package/src/components/webhook/attempts.tsx

@@ -10,6 +10,7 @@ import {
   Grid,
   List,
   ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
@@ -49,13 +50,7 @@ type Props = {
   event?: TEvent & { requestInfo?: RequestInfo };
 };
 
-WebhookAttempts.defaultProps = {
-  event_id: '',
-  webhook_endpoint_id: '',
-  event: null,
-};
-
-export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }: Props) {
+export default function WebhookAttempts({ event_id = '', webhook_endpoint_id = '', event = undefined }: Props) {
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TWebhookAttemptExpanded>>(
     (d) => {
       const size = 15;
@@ -93,9 +88,14 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
 
   return (
     <Grid container spacing={2.5}>
-      <Grid item xs={12} md={4} className="attempt-list">
+      <Grid size={{ xs: 12, md: 4 }} className="attempt-list">
         {isEmpty(Object.keys(groupedAttempts)) ? (
-          <Typography color="text.secondary">No Attempt</Typography>
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
+            No Attempt
+          </Typography>
         ) : (
           <>
             <List sx={{ maxHeight: '64vh', overflowY: 'scroll' }}>
@@ -104,12 +104,17 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
                   <ListSubheader>{date}</ListSubheader>
                   {items.map((attempt) => (
                     <ListItem
-                      button
                       key={attempt.id}
+                      component={ListItemButton}
                       onClick={() => handleAttemptClick(attempt)}
                       selected={selected === attempt}
                       secondaryAction={
-                        <Typography color="text.secondary">{formatTime(attempt.created_at, 'HH:mm:ss A')}</Typography>
+                        <Typography
+                          sx={{
+                            color: 'text.secondary',
+                          }}>
+                          {formatTime(attempt.created_at, 'HH:mm:ss A')}
+                        </Typography>
                       }>
                       <ListItemIcon>
                         {isSuccessAttempt(attempt.response_status) === false ? (
@@ -118,7 +123,16 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
                           <CheckCircleOutlined color="success" />
                         )}
                       </ListItemIcon>
-                      <ListItemText primary={<Typography color="text.primary">{attempt.event.type}</Typography>} />
+                      <ListItemText
+                        primary={
+                          <Typography
+                            sx={{
+                              color: 'text.primary',
+                            }}>
+                            {attempt.event.type}
+                          </Typography>
+                        }
+                      />
                     </ListItem>
                   ))}
                 </React.Fragment>
@@ -129,11 +143,22 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
                 {loadingMore ? 'Loading more...' : 'Load more'}
               </Button>
             )}
-            {!hasMore && <Typography color="text.secondary">No more data</Typography>}
+            {!hasMore && (
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                No more data
+              </Typography>
+            )}
           </>
         )}
       </Grid>
-      <Grid item xs={12} md={8}>
+      <Grid
+        size={{
+          xs: 12,
+          md: 8,
+        }}>
         {selected && (
           <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'grey.100' }}>
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
@@ -143,7 +168,12 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
               <CodeBlock language="json">{JSON.stringify(selected.response_body, null, 2)}</CodeBlock>
             </Box>
             <Box>
-              <Stack direction="row" alignItems="center" spacing={1}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Typography variant="h6">Request</Typography>
                 <RequestInfoPopper
                   // @ts-ignore
@@ -158,7 +188,12 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
         )}
         {data?.list.length === 0 && event && (
           <Box>
-            <Stack direction="row" alignItems="center" spacing={1}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Typography variant="h6">Event Data</Typography>
               <RequestInfoPopper
                 // @ts-ignore

package/src/components/webhook/request-info.tsx

@@ -16,11 +16,7 @@ type Props = {
   requestInfo?: RequestInfo;
   request?: RequestType;
 };
-RequestInfoPopper.defaultProps = {
-  requestInfo: null,
-  request: null,
-};
-export default function RequestInfoPopper({ requestInfo, request }: Props) {
+export default function RequestInfoPopper({ requestInfo = undefined, request = undefined }: Props) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -119,7 +115,13 @@ export default function RequestInfoPopper({ requestInfo, request }: Props) {
           }}>
           {requestInfo ? (
             <>
-              <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
+              <Typography
+                variant="caption"
+                sx={{
+                  color: 'text.secondary',
+                  mb: 1,
+                  display: 'block',
+                }}>
                 Requested by:
               </Typography>
               <InfoCard

package/src/contexts/products.tsx

@@ -2,7 +2,7 @@ import { api } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress } from '@mui/material';
 import { useRequest } from 'ahooks';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, type JSX } from 'react';
 
 type ProductsContextType = {
   products: TProductExpanded[];