@blocklet/payment-react 1.18.55 → 1.19.0

package/src/payment/skeleton/payment.tsx

@@ -6,8 +6,16 @@ export default function PaymentSkeleton() {
       <Stack direction="column">
         <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={68} />
-        <Box mt={1}>
-          <Typography component="div" variant="h4" mb={-1}>
+        <Box
+          sx={{
+            mt: 1,
+          }}>
+          <Typography
+            component="div"
+            variant="h4"
+            sx={{
+              mb: -1,
+            }}>
             <Skeleton />
           </Typography>
           <Typography component="div">
@@ -15,7 +23,12 @@ export default function PaymentSkeleton() {
           </Typography>
         </Box>
         <Box>
-          <Typography component="div" variant="h4" mb={-1}>
+          <Typography
+            component="div"
+            variant="h4"
+            sx={{
+              mb: -1,
+            }}>
             <Skeleton />
           </Typography>
           <Typography component="div">

package/src/payment/success.tsx

@@ -20,9 +20,9 @@ export default function PaymentSuccess({
   message,
   action,
   payee,
-  invoiceId,
-  subscriptionId,
-  subscriptions,
+  invoiceId = '',
+  subscriptionId = '',
+  subscriptions = [],
 }: Props) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
@@ -88,7 +88,11 @@ export default function PaymentSuccess({
     }
   } else if (invoiceId) {
     next = (
-      <Typography textAlign="center" sx={{ mt: 2 }}>
+      <Typography
+        sx={{
+          textAlign: 'center',
+          mt: 2,
+        }}>
         <Link href={joinURL(prefix, `/customer/invoice/${invoiceId}`)}>
           {t('payment.checkout.next.invoice', { payee })}
         </Link>
@@ -100,9 +104,11 @@ export default function PaymentSuccess({
     <Grow in>
       <Stack
         direction="column"
-        alignItems="center"
-        justifyContent={mode === 'standalone' ? 'center' : 'flex-start'}
-        sx={{ height: mode === 'standalone' ? 'fit-content' : 300 }}>
+        sx={{
+          alignItems: 'center',
+          justifyContent: mode === 'standalone' ? 'center' : 'flex-start',
+          height: mode === 'standalone' ? 'fit-content' : 300,
+        }}>
         <Div>
           <div className="check-icon">
             <span className="icon-line line-tip" />
@@ -111,10 +117,21 @@ export default function PaymentSuccess({
             <div className="icon-fix" />
           </div>
         </Div>
-        <Typography variant="h5" color="text.primary" mb={3}>
+        <Typography
+          variant="h5"
+          sx={{
+            color: 'text.primary',
+            mb: 3,
+          }}>
           {message}
         </Typography>
-        <Typography variant="body1" color="text.secondary" textAlign="center" sx={{ fontSize: '14px' }}>
+        <Typography
+          variant="body1"
+          sx={{
+            color: 'text.secondary',
+            textAlign: 'center',
+            fontSize: '14px',
+          }}>
           {t('payment.checkout.completed.tip', { payee })}
         </Typography>
         {next}
@@ -123,12 +140,6 @@ export default function PaymentSuccess({
   );
 }
 
-PaymentSuccess.defaultProps = {
-  invoiceId: '',
-  subscriptionId: '',
-  subscriptions: [],
-};
-
 const Div = styled('div')`
   width: 80px;
   height: 115px;

package/src/payment/summary.tsx

@@ -119,35 +119,21 @@ function getStakingSetup(items: TLineItemExpanded[], currency: TPaymentCurrency,
   return '0';
 }
 
-PaymentSummary.defaultProps = {
-  onUpsell: noop,
-  onDownsell: noop,
-  onApplyCrossSell: noop,
-  onCancelCrossSell: noop,
-  onChangeAmount: noop,
-  checkoutSessionId: '',
-  crossSellBehavior: '',
-  showStaking: false,
-  donationSettings: null,
-  action: '',
-  trialEnd: 0,
-};
-
 export default function PaymentSummary({
   items,
   currency,
   trialInDays,
   billingThreshold,
-  onUpsell,
-  onDownsell,
-  onApplyCrossSell,
-  onCancelCrossSell,
-  onChangeAmount,
-  checkoutSessionId,
-  crossSellBehavior,
-  showStaking,
-  donationSettings,
-  action,
+  onUpsell = noop,
+  onDownsell = noop,
+  onApplyCrossSell = noop,
+  onCancelCrossSell = noop,
+  onChangeAmount = noop,
+  checkoutSessionId = '',
+  crossSellBehavior = '',
+  showStaking = false,
+  donationSettings = undefined,
+  action = '',
   trialEnd = 0,
   ...rest
 }: Props) {
@@ -238,7 +224,13 @@ export default function PaymentSummary({
               onUpsell={handleUpsell}
               onDownsell={handleDownsell}>
               {x.cross_sell && (
-                <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
+                <Stack
+                  direction="row"
+                  sx={{
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    width: 1,
+                  }}>
                   <Typography />
                   <LoadingButton
                     size="small"
@@ -258,7 +250,10 @@ export default function PaymentSummary({
       </Stack>
       {data && items.some((x) => x.price_id === data.id) === false && (
         <Grow in>
-          <Stack mt={1}>
+          <Stack
+            sx={{
+              mt: 1,
+            }}>
             <ProductItem
               item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
               items={items}
@@ -267,7 +262,13 @@ export default function PaymentSummary({
               trialEnd={trialEnd}
               onUpsell={noop}
               onDownsell={noop}>
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
+              <Stack
+                direction="row"
+                sx={{
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  width: 1,
+                }}>
                 <Typography>
                   {crossSellBehavior === 'required' && (
                     <Status label={t('payment.checkout.required')} color="info" variant="outlined" sx={{ mr: 1 }} />
@@ -293,7 +294,12 @@ export default function PaymentSummary({
   return (
     <Fade in>
       <Stack className="cko-product" direction="column" {...rest}>
-        <Box display="flex" alignItems="center" sx={{ mb: 2.5 }}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            mb: 2.5,
+          }}>
           <Typography
             title={t('payment.checkout.orderSummary')}
             sx={{
@@ -312,11 +318,13 @@ export default function PaymentSummary({
         {isMobile && !donationSettings ? (
           <>
             <Stack
-              justifyContent="space-between"
-              flexDirection="row"
-              alignItems="center"
-              mb={1.5}
-              onClick={() => setState({ expanded: !state.expanded })}>
+              onClick={() => setState({ expanded: !state.expanded })}
+              sx={{
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                alignItems: 'center',
+                mb: 1.5,
+              }}>
               <Typography>{t('payment.checkout.productListTotal', { total: items.length })}</Typography>
               <ExpandMore expand={state.expanded} aria-expanded={state.expanded} aria-label="show more">
                 <ExpandMoreIcon />
@@ -333,8 +341,19 @@ export default function PaymentSummary({
         <Divider sx={{ mt: 2.5, mb: 2.5 }} />
         {staking > 0 && (
           <>
-            <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
-              <Stack direction="row" alignItems="center" spacing={0.5}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="row"
+                spacing={0.5}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.paymentRequired')}</Typography>
                 <Tooltip title={t('payment.checkout.stakingConfirm')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
@@ -342,8 +361,19 @@ export default function PaymentSummary({
               </Stack>
               <Typography>{headlines.amount}</Typography>
             </Stack>
-            <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
-              <Stack direction="row" alignItems="center" spacing={0.5}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="row"
+                spacing={0.5}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.staking.title')}</Typography>
                 <Tooltip title={t('payment.checkout.staking.tooltip')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
@@ -356,11 +386,13 @@ export default function PaymentSummary({
           </>
         )}
         <Stack
-          display="flex"
-          justifyContent="space-between"
-          flexDirection="row"
-          alignItems="center"
-          sx={{ width: '100%' }}>
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+          }}>
           <Box className="base-label">{t('common.total')} </Box>
           <PaymentAmount amount={`${totalAmount} ${currency.symbol}`} sx={{ fontSize: '16px' }} />
         </Stack>

package/src/theme/index.tsx

@@ -10,10 +10,6 @@ import './types';
 import { typography } from './typography';
 import { type PaymentThemeOptions } from '../types';
 
-PaymentThemeProvider.defaultProps = {
-  theme: {},
-};
-
 export function PaymentThemeProvider({
   children,
   theme: customTheme = {},
@@ -26,6 +22,7 @@ export function PaymentThemeProvider({
   const parentTheme = useTheme();
 
   const mergeTheme = useMemo(() => {
+    // @ts-ignore
     const blockletTheme = parentTheme.themeName === 'ArcBlock' ? parentTheme : createBlockletTheme();
     const { mode } = blockletTheme.palette;
 
@@ -187,7 +184,7 @@ export function PaymentThemeProvider({
             styleOverrides: {
               '.base-card': {
                 padding: '20px',
-                borderRadius: 1.5 * borderRadius, // 12px
+                borderRadius: 1.5 * (borderRadius as number), // 12px
                 background: palette.background.default,
                 border: `1px solid ${palette.divider}`,
                 boxShadow: shadows[1],
@@ -262,7 +259,7 @@ export function PaymentThemeProvider({
           MuiChip: {
             styleOverrides: {
               root: {
-                borderRadius: `${borderRadius * 2}px`,
+                borderRadius: `${(borderRadius as number) * 2}px`,
                 border: '1px solid transparent',
                 '&.MuiChip-filledSuccess': {
                   color: palette.chip.success.text,
@@ -274,7 +271,7 @@ export function PaymentThemeProvider({
                   backgroundColor: palette.chip.default.background,
                   borderColor: palette.chip.default.border,
                 },
-                '&.MuiChip-filledSecondary': {
+                '&.MuiChip-filled.MuiChip-colorSecondary': {
                   color: palette.chip.secondary.text,
                   backgroundColor: palette.chip.secondary.background,
                   borderColor: palette.chip.secondary.border,
@@ -289,7 +286,7 @@ export function PaymentThemeProvider({
                   backgroundColor: palette.chip.warning.background,
                   borderColor: palette.chip.warning.border,
                 },
-                '&.MuiChip-filledPrimary,&.MuiChip-filledInfo': {
+                '&.MuiChip-filled.MuiChip-colorPrimary,&.MuiChip-filledInfo': {
                   color: palette.chip.info.text,
                   backgroundColor: palette.chip.info.background,
                   borderColor: palette.chip.info.border,

package/src/theme/typography.ts

@@ -1,6 +1,6 @@
-import type { TypographyOptions } from '@mui/material/styles/createTypography';
+import type { TypographyStyleOptions } from '@mui/material/styles/createTypography';
 
-export const typography: TypographyOptions = {
+export const typography: TypographyStyleOptions = {
   h1: {
     fontSize: '1.5rem',
     lineHeight: 1.2,