@blocklet/payment-react 1.15.34 → 1.15.36

package/src/checkout/donate.tsx

@@ -57,11 +57,12 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
   settings: DonationSettings;
   livemode?: boolean;
   timeout?: number;
-  mode?: 'inline' | 'default';
+  mode?: 'inline' | 'default' | 'custom';
   inlineOptions?: {
     button?: ButtonType;
   };
   theme?: 'default' | 'inherit' | PaymentThemeOptions;
+  children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory) => React.ReactNode;
 };
 
 const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
@@ -315,6 +316,7 @@ function CheckoutDonateInner({
   mode,
   inlineOptions = {},
   theme,
+  children,
 }: DonateProps) {
   // eslint-disable-line
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
@@ -350,105 +352,135 @@ function CheckoutDonateInner({
     setPopoverOpen(false);
   };
 
-  return (
+  const startDonate = () => {
+    setState({ open: true });
+  };
+
+  const inlineRender = (
     <>
-      {mode === 'inline' ? (
-        <>
-          <Button
-            size={(settings.appearance?.button?.size || 'medium') as any}
-            color={(settings.appearance?.button?.color || 'primary') as any}
-            variant={(settings.appearance?.button?.variant || 'contained') as any}
-            {...settings.appearance?.button}
-            onClick={handlePopoverOpen}>
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              {settings.appearance.button.icon}
-              {typeof settings.appearance.button.text === 'string' ? (
-                <Typography sx={{ whiteSpace: 'nowrap' }}>{settings.appearance.button.text}</Typography>
-              ) : (
-                settings.appearance.button.text
-              )}
-            </Stack>
-          </Button>
-          <Popover
-            id="mouse-over-popper"
-            open={popoverOpen}
-            anchorEl={anchorEl}
-            onClose={handlePopoverClose}
-            anchorOrigin={{
-              vertical: 'top',
-              horizontal: 'center',
-            }}
-            transformOrigin={{
-              vertical: 'bottom',
-              horizontal: 'center',
-            }}>
-            <Box
-              sx={{
-                minWidth: 320,
-                padding: '20px',
-              }}>
-              {supporters.loading && (
-                <div
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: 'rgba(255, 255, 255, 0.7)',
-                  }}>
-                  <CircularProgress />
-                </div>
-              )}
-              <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
-                <Button {...inlineOptions.button} onClick={() => setState({ open: true })}>
-                  <Stack direction="row" alignItems="center" spacing={0.5}>
-                    {inlineOptions?.button?.icon}
-                    {typeof inlineOptions?.button?.text === 'string' ? (
-                      <Typography sx={{ whiteSpace: 'nowrap' }}>{inlineOptions?.button?.text}</Typography>
-                    ) : (
-                      inlineOptions?.button?.text
-                    )}
-                  </Stack>
-                </Button>
-                <SupporterSimple {...(supporters.data as DonateHistory)} />
-              </Box>
-            </Box>
-          </Popover>
-        </>
-      ) : (
-        <Box
-          sx={{ width: '100%', minWidth: 300, maxWidth: 720 }}
-          display="flex"
-          flexDirection="column"
-          alignItems="center"
-          gap={{ xs: 1, sm: 2 }}>
-          <Button
-            size={(settings.appearance?.button?.size || 'medium') as any}
-            color={(settings.appearance?.button?.color || 'primary') as any}
-            variant={(settings.appearance?.button?.variant || 'contained') as any}
-            {...settings.appearance?.button}
-            onClick={() => setState({ open: true })}>
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              {settings.appearance.button.icon}
-              {typeof settings.appearance.button.text === 'string' ? (
-                <Typography>{settings.appearance.button.text}</Typography>
-              ) : (
-                settings.appearance.button.text
-              )}
-            </Stack>
-          </Button>
-          {supporters.data && settings.appearance.history.variant === 'avatar' && (
-            <SupporterAvatar {...(supporters.data as DonateHistory)} />
+      <Button
+        size={(settings.appearance?.button?.size || 'medium') as any}
+        color={(settings.appearance?.button?.color || 'primary') as any}
+        variant={(settings.appearance?.button?.variant || 'contained') as any}
+        {...settings.appearance?.button}
+        onClick={handlePopoverOpen}>
+        <Stack direction="row" alignItems="center" spacing={0.5}>
+          {settings.appearance.button.icon}
+          {typeof settings.appearance.button.text === 'string' ? (
+            <Typography sx={{ whiteSpace: 'nowrap' }}>{settings.appearance.button.text}</Typography>
+          ) : (
+            settings.appearance.button.text
           )}
-          {supporters.data && settings.appearance.history.variant === 'table' && (
-            <SupporterTable {...(supporters.data as DonateHistory)} />
+        </Stack>
+      </Button>
+      <Popover
+        id="mouse-over-popper"
+        open={popoverOpen}
+        anchorEl={anchorEl}
+        onClose={handlePopoverClose}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}>
+        <Box
+          sx={{
+            minWidth: 320,
+            padding: '20px',
+          }}>
+          {supporters.loading && (
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'rgba(255, 255, 255, 0.7)',
+              }}>
+              <CircularProgress />
+            </div>
           )}
+          <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
+            <Button {...inlineOptions.button} onClick={() => startDonate()}>
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                {inlineOptions?.button?.icon}
+                {typeof inlineOptions?.button?.text === 'string' ? (
+                  <Typography sx={{ whiteSpace: 'nowrap' }}>{inlineOptions?.button?.text}</Typography>
+                ) : (
+                  inlineOptions?.button?.text
+                )}
+              </Stack>
+            </Button>
+            <SupporterSimple {...(supporters.data as DonateHistory)} />
+          </Box>
         </Box>
+      </Popover>
+    </>
+  );
+  const defaultRender = (
+    <Box
+      sx={{ width: '100%', minWidth: 300, maxWidth: 720 }}
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      gap={{ xs: 1, sm: 2 }}>
+      <Button
+        size={(settings.appearance?.button?.size || 'medium') as any}
+        color={(settings.appearance?.button?.color || 'primary') as any}
+        variant={(settings.appearance?.button?.variant || 'contained') as any}
+        {...settings.appearance?.button}
+        onClick={() => startDonate()}>
+        <Stack direction="row" alignItems="center" spacing={0.5}>
+          {settings.appearance.button.icon}
+          {typeof settings.appearance.button.text === 'string' ? (
+            <Typography>{settings.appearance.button.text}</Typography>
+          ) : (
+            settings.appearance.button.text
+          )}
+        </Stack>
+      </Button>
+      {supporters.data && settings.appearance.history.variant === 'avatar' && (
+        <SupporterAvatar {...(supporters.data as DonateHistory)} />
       )}
+      {supporters.data && settings.appearance.history.variant === 'table' && (
+        <SupporterTable {...(supporters.data as DonateHistory)} />
+      )}
+    </Box>
+  );
+  const renderInnerView = () => {
+    if (mode === 'inline') {
+      return inlineRender;
+    }
+    if (mode === 'custom') {
+      return children && typeof children === 'function' ? (
+        <>
+          {children(
+            startDonate,
+            `${formatAmount(
+              (supporters.data as DonateHistory)?.totalAmount || '0',
+              (supporters.data as DonateHistory)?.currency?.decimal
+            )} ${(supporters.data as DonateHistory)?.currency?.symbol}`,
+            (supporters.data as DonateHistory) || {}
+          )}
+        </>
+      ) : (
+        <Typography>
+          Please provide a valid render function <pre>{'(openDonate, donateTotalAmount, supporters) => ReactNode'}</pre>
+        </Typography>
+      );
+    }
+    return defaultRender;
+  };
+  return (
+    <>
+      {renderInnerView()}
       {donation.data && (
         <Dialog
           open={state.open}

package/src/components/pricing-table.tsx

@@ -33,7 +33,6 @@ import {
   getPriceUintAmountByCurrency,
   isMobileSafari,
 } from '../libs/util';
-import Amount from '../payment/amount';
 import { useMobile } from '../hooks/mobile';
 import TruncatedText from './truncated-text';
 
@@ -203,10 +202,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         max-width: 360px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        max-width: 720px !important;
+        max-width: 780px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        max-width: 1080px !important;
+        max-width: 1200px !important;
       }
     }
   `;
@@ -327,6 +326,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             if (mode === 'select') {
               action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
             }
+            const [amount, unit] = formatPriceAmount(x.price, currency, x.product.unit_label).split('/');
             return (
               <Stack
                 key={x?.price_id}
@@ -351,14 +351,13 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   },
                   width: {
                     xs: '100%',
-                    md: '320px',
+                    md: '360px',
                   },
                   maxWidth: '360px',
                   minWidth: '300px',
 
                   padding: '20px',
                   position: 'relative',
-                  height: 'fit-content',
                 }}>
                 <Box textAlign="center">
                   <Stack
@@ -369,7 +368,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     sx={{ gap: '12px' }}>
                     <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                       <Typography
-                        color="text.primary"
+                        color="text.secondary"
                         fontWeight={600}
                         sx={{
                           fontSize: '18px !important',
@@ -380,7 +379,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       {x.is_highlight && (
                         <Chip
                           label={x.highlight_text}
-                          color="default"
+                          color="primary"
                           size="small"
                           sx={{
                             position: 'absolute',
@@ -390,10 +389,29 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         />
                       )}
                     </Box>
-                    <Amount
-                      amount={formatPriceAmount(x.price, currency, x.product.unit_label)}
-                      sx={{ my: 0, marginTop: '0px !important', fontSize: '48px', fontWeight: 'bold' }}
-                    />
+                    <Typography
+                      component="div"
+                      sx={{
+                        my: 0,
+                        fontWeight: '700',
+                        fontSize: '32px',
+                        letterSpacing: '-0.03rem',
+                        fontVariantNumeric: 'tabular-nums',
+                        display: 'flex',
+                        alignItems: 'baseline',
+                        gap: '4px',
+                        flexWrap: 'wrap',
+                      }}>
+                      {amount}
+                      {unit ? (
+                        <Typography
+                          sx={{ fontSize: '16px', fontWeight: '400', color: 'text.secondary', textAlign: 'left' }}>
+                          / {unit}
+                        </Typography>
+                      ) : (
+                        ''
+                      )}
+                    </Typography>
                     <Typography
                       color="text.secondary"
                       sx={{
@@ -473,7 +491,7 @@ function Subscribe({ x, action, onSelect, currencyId }: any) {
       fullWidth
       size="medium"
       variant="contained"
-      color={x.is_highlight || x.is_selected ? 'info' : 'primary'}
+      color="primary"
       sx={{
         fontSize: '16px',
         padding: '10px 20px',

package/src/hooks/scroll.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export function usePreventWheel() {
+  useEffect(() => {
+    const handleWheel = (e: any) => {
+      // @ts-ignore
+      if (document.activeElement?.type === 'number') {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    return () => {
+      window.removeEventListener('wheel', handleWheel);
+    };
+  }, []);
+}

package/src/index.ts

@@ -38,6 +38,7 @@ export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
+export * from './hooks/scroll';
 
 export { translations, createTranslator } from './locales';
 

package/src/libs/util.ts

@@ -1121,14 +1121,17 @@ export function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale
     slash_stake: t('payment.invoice.reason.slashStake', locale),
     stake: t('payment.invoice.reason.stake', locale),
     return_stake: t('payment.invoice.reason.returnStake', locale),
+    recharge: t('payment.invoice.reason.recharge', locale),
   };
+  let invoiceType = t('payment.invoice.reason.payment', locale);
+  if (reason.includes('stake') || reason.includes('recharge')) {
+    invoiceType = reasonMap[reason as keyof typeof reasonMap];
+  }
   if (description?.startsWith('Subscription ') || description?.startsWith('Slash stake')) {
     return {
       description: reasonMap[reason as keyof typeof reasonMap],
       reason: reasonMap[reason as keyof typeof reasonMap],
-      type: reason.includes('stake')
-        ? reasonMap[reason as keyof typeof reasonMap]
-        : t('payment.invoice.reason.payment', locale),
+      type: invoiceType,
     };
   }
   const descMap = {
@@ -1136,12 +1139,12 @@ export function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale
     'Stake for subscription payment change': t('payment.invoice.reason.stakeForChangePayment', locale),
     'Stake for subscription': t('payment.invoice.reason.staking', locale),
     'Return Subscription staking': t('payment.invoice.reason.returnStake', locale),
+    'Recharge for subscription': t('payment.invoice.reason.rechargeForSubscription', locale),
   };
+
   return {
     description: descMap[description as keyof typeof descMap] || description,
     reason: reasonMap[reason as keyof typeof reasonMap] || reason,
-    type: reason.includes('stake')
-      ? reasonMap[reason as keyof typeof reasonMap]
-      : t('payment.invoice.reason.payment', locale),
+    type: invoiceType,
   };
 }

package/src/locales/en.tsx

@@ -326,6 +326,8 @@ export default flat({
         returnStake: 'Return stake',
         stakeForChangePlan: 'Subscription plan update',
         stakeForChangePayment: 'Subscription payment method update',
+        recharge: 'Recharge',
+        rechargeForSubscription: 'Subscription recharge',
       },
     },
   },

package/src/locales/zh.tsx

@@ -316,6 +316,8 @@ export default flat({
         returnStake: '退押金',
         stakeForChangePlan: '订阅套餐更新',
         stakeForChangePayment: '订阅支付方式更新',
+        recharge: '充值',
+        rechargeForSubscription: '订阅充值',
       },
     },
   },

package/src/payment/product-donation.tsx

@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 import Switch from '../components/switch-button';
 import { formatAmountPrecisionLimit } from '../libs/util';
 import { usePaymentContext } from '../contexts/payment';
+import { usePreventWheel } from '../hooks/scroll';
 
 export default function ProductDonation({
   item,
@@ -21,6 +22,7 @@ export default function ProductDonation({
 }) {
   const { t, locale } = useLocaleContext();
   const { setPayable } = usePaymentContext();
+  usePreventWheel();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || '0';
   const [state, setState] = useSetState({
     selected: preset,