@blocklet/payment-react 1.18.56 → 1.19.1

package/src/payment/summary.tsx

@@ -62,6 +62,7 @@ type Props = {
   showStaking?: boolean;
   onUpsell?: Function;
   onDownsell?: Function;
+  onQuantityChange?: Function;
   onChangeAmount?: Function;
   onApplyCrossSell?: Function;
   onCancelCrossSell?: Function;
@@ -69,6 +70,7 @@ type Props = {
   crossSellBehavior?: string;
   donationSettings?: DonationSettings; // only include backend part
   action?: string;
+  completed?: boolean;
 };
 
 async function fetchCrossSell(id: string) {
@@ -118,37 +120,24 @@ 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,
+  onQuantityChange = noop,
+  onApplyCrossSell = noop,
+  onCancelCrossSell = noop,
+  onChangeAmount = noop,
+  checkoutSessionId = '',
+  crossSellBehavior = '',
+  showStaking = false,
+  donationSettings = undefined,
+  action = '',
   trialEnd = 0,
+  completed = false,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -181,6 +170,11 @@ export default function PaymentSummary({
     runAsync();
   };
 
+  const handleQuantityChange = async (itemId: string, quantity: number) => {
+    await onQuantityChange!(itemId, quantity);
+    runAsync();
+  };
+
   const handleDownsell = async (from: string) => {
     await onDownsell!(from);
     runAsync();
@@ -236,9 +230,18 @@ export default function PaymentSummary({
               trialEnd={trialEnd}
               currency={currency}
               onUpsell={handleUpsell}
-              onDownsell={handleDownsell}>
+              onDownsell={handleDownsell}
+              adjustableQuantity={x.adjustable_quantity}
+              completed={completed}
+              onQuantityChange={handleQuantityChange}>
               {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 +261,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 +273,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 +305,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 +329,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 +352,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 +372,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 +397,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,