@blocklet/payment-react 1.18.6 → 1.18.8

package/src/checkout/donate.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable react/no-unused-prop-types */
 /* eslint-disable react/require-default-props */
 /* eslint-disable @typescript-eslint/indent */
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type {
   DonationSettings,
+  PaymentBeneficiary,
   PaymentDetails,
   TCheckoutSessionExpanded,
   TPaymentCurrency,
@@ -12,20 +14,14 @@ import type {
   TSetting,
 } from '@blocklet/payment-types';
 import {
-  Alert,
   Avatar,
   AvatarGroup,
   Box,
   Button,
   CircularProgress,
-  Hidden,
   IconButton,
   Popover,
   Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
   Typography,
   Tooltip,
   type ButtonProps as MUIButtonProps,
@@ -36,14 +32,13 @@ import uniqBy from 'lodash/unionBy';
 import { useEffect, useRef, useState } from 'react';
 import { Settings } from '@mui/icons-material';
 
-import TxLink from '../components/blockchain/tx';
 import api from '../libs/api';
 import {
   formatAmount,
   formatBNStr,
-  formatDateTime,
-  formatError,
   getCustomerAvatar,
+  getTxLink,
+  getUserProfileLink,
   lazyLoad,
   openDonationSettings,
 } from '../libs/util';
@@ -59,22 +54,43 @@ export type DonateHistory = {
   supporters: TCheckoutSessionExpanded[];
   currency: TPaymentCurrency;
   method: TPaymentMethod;
-  // total?: number;
+  total?: number;
   totalAmount: string;
 };
-export type RequiredDonationSettings = Pick<
-  DonationSettings,
-  'target' | 'title' | 'description' | 'reference' | 'beneficiaries'
->;
-type OptionalDonationSettings = Partial<Omit<DonationSettings, keyof RequiredDonationSettings>>;
 
+export type CheckoutDonateSettings = {
+  target: string;
+  title: string;
+  description: string;
+  reference: string;
+  beneficiaries: PaymentBeneficiary[];
+  amount?: {
+    presets?: string[];
+    preset?: string;
+    minimum?: string;
+    maximum?: string;
+    custom?: boolean;
+  };
+  appearance?: {
+    button?: {
+      text?: any;
+      icon?: any;
+      size?: string;
+      color?: string;
+      variant?: string;
+    };
+    history?: {
+      variant?: string;
+    };
+  };
+};
 export interface ButtonType extends Omit<MUIButtonProps, 'text' | 'icon'> {
   text?: string | React.ReactNode;
   icon: React.ReactNode;
 }
 
 export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
-  settings: RequiredDonationSettings & OptionalDonationSettings;
+  settings: CheckoutDonateSettings;
   livemode?: boolean;
   timeout?: number;
   mode?: 'inline' | 'default' | 'custom';
@@ -129,124 +145,174 @@ const emojiFont = {
     'Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
 };
 
+function DonateDetails({ supporters = [], currency, method }: DonateHistory) {
+  const { locale } = useLocaleContext();
+  return (
+    <Stack
+      sx={{
+        width: '100%',
+        minWidth: '256px',
+        maxWidth: 'calc(100vw - 32px)',
+        maxHeight: '300px',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        margin: '0 auto',
+      }}>
+      {supporters.map((x) => (
+        <Box
+          key={x.id}
+          sx={{
+            padding: '6px',
+            '&:hover': {
+              backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+              transition: 'background-color 200ms linear',
+              cursor: 'pointer',
+            },
+            borderBottom: '1px solid var(--stroke-border-base, #EFF1F5)',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+          onClick={() => {
+            const { link, text } = getTxLink(method, x.payment_details as PaymentDetails);
+            if (link && text) {
+              window.open(link, '_blank');
+            }
+          }}>
+          <Stack
+            direction="row"
+            alignItems="center"
+            spacing={0.5}
+            sx={{
+              flex: 3,
+              overflow: 'hidden',
+            }}>
+            <Avatar
+              key={x.id}
+              src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 20)}
+              alt={x.customer?.name}
+              variant="circular"
+              sx={{ width: 20, height: 20 }}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (x.customer?.did) {
+                  window.open(getUserProfileLink(x.customer?.did, locale), '_blank');
+                }
+              }}
+            />
+            <Typography
+              sx={{
+                ml: '8px !important',
+                fontSize: '0.875rem',
+                fontWeight: '500',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (x.customer?.did) {
+                  window.open(getUserProfileLink(x.customer?.did, locale), '_blank');
+                }
+              }}>
+              {x.customer?.name}
+            </Typography>
+          </Stack>
+          <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={0.5} sx={{ flex: 1 }}>
+            <Avatar
+              key={x.id}
+              src={currency?.logo}
+              alt={currency?.symbol}
+              variant="circular"
+              sx={{ width: 16, height: 16 }}
+            />
+            <Typography sx={{ color: 'text.secondary' }}>{formatBNStr(x.amount_total, currency.decimal)}</Typography>
+            <Typography sx={{ color: 'text.secondary' }}>{currency.symbol}</Typography>
+          </Stack>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SupporterAvatar({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
-  const { t } = useLocaleContext();
+function SupporterAvatar({
+  supporters = [],
+  totalAmount = '0',
+  currency,
+  method,
+  showDonateDetails = false,
+}: DonateHistory & { showDonateDetails?: boolean }) {
+  const [open, setOpen] = useState(false);
   const customers = uniqBy(supporters, 'customer_did');
   const customersNum = customers.length;
+  if (customersNum === 0) return null;
   return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      sx={{
-        '.MuiAvatar-root': {
-          width: '32px',
-          height: '32px',
-        },
-      }}
-      gap={{
-        xs: 0.5,
-        sm: 1,
-      }}>
-      <Typography component="p" color="text.secondary">
-        {customersNum === 0 ? (
-          <span style={emojiFont}>{t('payment.checkout.donation.empty')}</span>
-        ) : (
-          t('payment.checkout.donation.summary', {
-            total: customersNum,
-            symbol: currency.symbol,
-            totalAmount: formatAmount(totalAmount || '0', currency.decimal),
-          })
-        )}
-      </Typography>
-      <AvatarGroup total={customersNum} max={20}>
-        {customers.map((x) => (
+    <Stack flexDirection="row" justifyContent="center" alignItems="center">
+      <AvatarGroup max={5}>
+        {customers.slice(0, 5).map((supporter) => (
           <Avatar
-            key={x.id}
-            title={x.customer?.name}
-            alt={x.customer?.name}
-            src={getCustomerAvatar(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : '', 48)}
-            variant="circular"
-            sx={{ width: 32, height: 32 }}
+            src={getCustomerAvatar(
+              supporter.customer?.did,
+              supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : '',
+              24
+            )}
+            alt={supporter.customer?.name}
+            key={supporter.customer?.id}
+            sx={{
+              width: '24px',
+              height: '24px',
+            }}
           />
         ))}
       </AvatarGroup>
-    </Box>
+      <Box
+        sx={{
+          fontSize: '14px',
+          color: 'text.secondary',
+          pl: 1.5,
+          pr: 1,
+          ml: -1,
+          borderRadius: '8px',
+          backgroundColor: '#f4f4f5',
+          height: '24px',
+          ...(showDonateDetails
+            ? {
+                cursor: 'pointer',
+                '&:hover': {
+                  backgroundColor: '#e5e7eb',
+                },
+              }
+            : {}),
+        }}
+        onClick={() => showDonateDetails && setOpen(true)}>
+        {`${customersNum} supporter${customersNum > 1 ? 's' : ''} (${formatAmount(totalAmount || '0', currency?.decimal)} ${currency.symbol})`}
+      </Box>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{
+          '.MuiDialogContent-root': {
+            width: '450px',
+            padding: '8px',
+          },
+        }}
+        title={`${customersNum} supporter${customersNum > 1 ? 's' : ''}`}>
+        <DonateDetails supporters={supporters} currency={currency} method={method} totalAmount={totalAmount} />
+      </Dialog>
+    </Stack>
   );
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function SupporterTable({ supporters = [], totalAmount = '0', currency, method }: DonateHistory) {
-  const { t } = useLocaleContext();
   const customers = uniqBy(supporters, 'customer_did');
   const customersNum = customers.length;
+  if (customersNum === 0) return null;
   return (
     <Box display="flex" flexDirection="column" alignItems="center" gap={{ xs: 0.5, sm: 1 }}>
-      <Typography component="p" color="text.secondary">
-        {customersNum === 0 ? (
-          <span style={emojiFont}>{t('payment.checkout.donation.empty')}</span>
-        ) : (
-          t('payment.checkout.donation.summary', {
-            total: customersNum,
-            symbol: currency.symbol,
-            totalAmount: formatAmount(totalAmount || '0', currency.decimal),
-          })
-        )}
-      </Typography>
-      <Table size="small" sx={{ width: '100%', overflow: 'hidden' }}>
-        <TableBody>
-          {supporters.map((x) => (
-            <TableRow
-              key={x.id}
-              sx={{
-                '> td': {
-                  padding: '8px 16px 8px 0',
-                  borderTop: '1px solid #e0e0e0',
-                  borderBottom: '1px solid #e0e0e0',
-                },
-                '> td:last-of-type': {
-                  paddingRight: '0',
-                },
-              }}>
-              <TableCell>
-                <Stack direction="row" alignItems="center" spacing={0.5}>
-                  <Avatar
-                    key={x.id}
-                    src={getCustomerAvatar(
-                      x.customer?.did,
-                      x?.updated_at ? new Date(x.updated_at).toISOString() : '',
-                      48
-                    )}
-                    alt={x.customer?.name}
-                    variant="circular"
-                    sx={{ width: 24, height: 24 }}
-                  />
-                  <Hidden smDown>
-                    <Typography>{x.customer?.name}</Typography>
-                  </Hidden>
-                </Stack>
-              </TableCell>
-              <TableCell align="right">
-                <Stack direction="row" alignItems="center" justifyContent="flex-end" spacing={0.5}>
-                  <Typography fontWeight={500} component="strong">
-                    {formatBNStr(x.amount_total, currency.decimal)}
-                  </Typography>
-                  <Typography component="span">{currency.symbol}</Typography>
-                </Stack>
-              </TableCell>
-              <Hidden smDown>
-                <TableCell align="right">
-                  <Typography>{formatDateTime(x.created_at)}</Typography>
-                </TableCell>
-              </Hidden>
-              <TableCell align="right">
-                <TxLink method={method} details={x.payment_details as PaymentDetails} mode="customer" align="right" />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+      <SupporterAvatar supporters={supporters} totalAmount={totalAmount} currency={currency} method={method} />
+      <DonateDetails supporters={supporters} totalAmount={totalAmount} currency={currency} method={method} />
     </Box>
   );
 }
@@ -300,11 +366,7 @@ const defaultDonateAmount = {
   maximum: '100',
   custom: true,
 };
-function useDonation(
-  settings: RequiredDonationSettings & OptionalDonationSettings,
-  livemode: boolean,
-  mode = 'default'
-) {
+function useDonation(settings: CheckoutDonateSettings, livemode: boolean, mode = 'default') {
   const [state, setState] = useSetState({
     open: false,
     supporterLoaded: false,
@@ -425,7 +487,7 @@ function CheckoutDonateInner({
   };
 
   if (donation.error) {
-    return <Alert severity="error">{formatError(donation.error)}</Alert>;
+    return null;
   }
 
   const handlePopoverOpen = (event: any) => {
@@ -523,11 +585,29 @@ function CheckoutDonateInner({
       <Button
         size={(donateSettings.appearance?.button?.size || 'medium') as any}
         color={(donateSettings.appearance?.button?.color || 'primary') as any}
-        variant={(donateSettings.appearance?.button?.variant || 'contained') as any}
+        variant={(donateSettings.appearance?.button?.variant || 'outlined') as any}
+        sx={{
+          ...(!donateSettings.appearance?.button?.variant
+            ? {
+                color: 'var(--foregrounds-fg-base, #010714)',
+                borderColor: 'var(--stroke-button-secondary-border, #E5E7EB)',
+                '&:hover': {
+                  backgroundColor: 'var(--buttons-button-neutral-hover, #F3F4F6)',
+                  borderColor: 'var(--stroke-button-secondary-border, #E5E7EB)',
+                },
+              }
+            : {}),
+          // @ts-ignore
+          ...(donateSettings.appearance?.button?.sx || {}),
+        }}
         {...donateSettings.appearance?.button}
         onClick={() => startDonate()}>
         <Stack direction="row" alignItems="center" spacing={0.5}>
-          {donateSettings.appearance.button.icon}
+          {donateSettings.appearance.button.icon && (
+            <Typography sx={{ mr: 0.5, display: 'inline-flex', alignItems: 'center' }}>
+              {donateSettings.appearance.button.icon}
+            </Typography>
+          )}
           {typeof donateSettings.appearance.button.text === 'string' ? (
             <Typography>{donateSettings.appearance.button.text}</Typography>
           ) : (
@@ -536,7 +616,7 @@ function CheckoutDonateInner({
         </Stack>
       </Button>
       {supporters.data && donateSettings.appearance.history.variant === 'avatar' && (
-        <SupporterAvatar {...(supporters.data as DonateHistory)} />
+        <SupporterAvatar {...(supporters.data as DonateHistory)} showDonateDetails />
       )}
       {supporters.data && donateSettings.appearance.history.variant === 'table' && (
         <SupporterTable {...(supporters.data as DonateHistory)} />
@@ -555,7 +635,7 @@ function CheckoutDonateInner({
             `${formatAmount(
               (supporters.data as DonateHistory)?.totalAmount || '0',
               (supporters.data as DonateHistory)?.currency?.decimal
-            )} ${(supporters.data as DonateHistory)?.currency?.symbol}`,
+            )} ${(supporters.data as DonateHistory)?.currency?.symbol || ''}`,
             (supporters.data as DonateHistory) || {},
             !!supporters.loading,
             donateSettings
@@ -563,7 +643,8 @@ function CheckoutDonateInner({
         </>
       ) : (
         <Typography>
-          Please provide a valid render function <pre>{'(openDonate, donateTotalAmount, supporters) => ReactNode'}</pre>
+          Please provide a valid render function{' '}
+          <pre>{'(openDonate, donateTotalAmount, supporters, loading, donateSettings) => ReactNode'}</pre>
         </Typography>
       );
     }

package/src/components/livemode.tsx

@@ -19,7 +19,7 @@ export default function Livemode({ color, backgroundColor, sx }: Props) {
         height: 18,
         lineHeight: 1.2,
         textTransform: 'uppercase',
-        fontSize: '0.8rem',
+        fontSize: '0.7rem',
         fontWeight: 'bold',
         borderRadius: '4px',
         backgroundColor,

package/src/components/loading-button.tsx

@@ -0,0 +1,100 @@
+import {
+  Button,
+  type ButtonProps,
+  CircularProgress,
+  type CircularProgressProps,
+  SxProps,
+  Theme,
+  Typography,
+} from '@mui/material';
+import { forwardRef } from 'react';
+
+export interface LoadingButtonProps extends ButtonProps {
+  loading?: boolean;
+  loadingIndicator?: React.ReactNode;
+  loadingPosition?: 'start' | 'center' | 'end';
+  loadingProps?: Partial<CircularProgressProps>;
+  loadingOnly?: boolean;
+}
+
+const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
+  (
+    {
+      children,
+      loading,
+      loadingPosition = 'start',
+      loadingIndicator,
+      loadingProps = {},
+      onClick,
+      sx,
+      loadingOnly = false,
+      ...props
+    },
+    ref
+  ) => {
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (loading) {
+        return;
+      }
+      onClick?.(e);
+    };
+
+    const getPositionStyles = (position: string) => {
+      return {
+        color: 'inherit',
+        ...(position === 'start' && { mr: 1 }),
+        ...(position === 'end' && { ml: 1 }),
+        ...(position === 'center' && {
+          position: 'absolute',
+          left: '50%',
+          transform: 'translateY(-50%) translateX(-50%)',
+          top: '50%',
+        }),
+        display: 'inline-flex',
+        alignItems: 'center',
+      } as const;
+    };
+
+    const defaultIndicator = (
+      <CircularProgress size={16} {...loadingProps} sx={{ color: 'inherit', ...(loadingProps?.sx || {}) }} />
+    );
+
+    const indicator = (
+      <Typography sx={getPositionStyles(loadingPosition) as SxProps<Theme>}>
+        {loadingIndicator || defaultIndicator}
+      </Typography>
+    );
+
+    return (
+      <Button
+        ref={ref}
+        disabled={props.disabled}
+        onClick={handleClick}
+        sx={{
+          position: 'relative',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...sx,
+        }}
+        {...props}>
+        {loading && loadingPosition === 'start' && indicator}
+        <Typography sx={{ visibility: loading && loadingOnly ? 'hidden' : 'visible' }}>{children}</Typography>
+        {loading && loadingPosition === 'center' && indicator}
+        {loading && loadingPosition === 'end' && indicator}
+      </Button>
+    );
+  }
+);
+
+LoadingButton.displayName = 'LoadingButton';
+
+LoadingButton.defaultProps = {
+  loading: false,
+  loadingIndicator: undefined,
+  loadingPosition: 'start',
+  loadingProps: {},
+  loadingOnly: false,
+};
+
+export default LoadingButton;

package/src/components/pricing-table.tsx

@@ -3,7 +3,6 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { PriceCurrency, PriceRecurring, TPricingTableExpanded, TPricingTableItem } from '@blocklet/payment-types';
 import { CheckOutlined } from '@mui/icons-material';
-import { LoadingButton } from '@mui/lab';
 import {
   Avatar,
   Box,
@@ -36,6 +35,7 @@ import {
 } from '../libs/util';
 import { useMobile } from '../hooks/mobile';
 import TruncatedText from './truncated-text';
+import LoadingButton from './loading-button';
 
 type SortOrder = { [key: string]: number };
 
@@ -322,7 +322,6 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}
           sx={{
             flex: '0 1 auto',
-            overflow: 'auto',
             pb: 2.5,
           }}
           className="price-table-wrap">
@@ -354,7 +353,8 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     '0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)',
                   '&:hover': {
                     borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
-                    boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                    boxShadow:
+                      '0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)),0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)),0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))',
                   },
                   width: {
                     xs: '100%',

package/src/components/table.tsx

@@ -71,7 +71,7 @@ const Wrapped = styled(Datatable)`
   ${(props: any) =>
     props?.hasRowLink
       ? `.MuiTableCell-root {
-    font-size: 1rem !important;
+    font-size: 0.875rem !important;
   }`
       : ''}
   .MuiPaper-root {

package/src/index.ts

@@ -30,6 +30,7 @@ import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
+import LoadingButton from './components/loading-button';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -79,4 +80,5 @@ export {
   Link,
   OverdueInvoicePayment,
   PaymentBeneficiaries,
+  LoadingButton,
 };

package/src/libs/util.ts

@@ -22,7 +22,7 @@ import numbro from 'numbro';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import stringWidth from 'string-width';
 import { defaultCountries } from 'react-international-phone';
-import { joinURL } from 'ufo';
+import { joinURL, withQuery } from 'ufo';
 
 import { t } from '../locales';
 import dayjs from './dayjs';
@@ -1184,3 +1184,13 @@ export function openDonationSettings(openInNewTab: boolean = false) {
     window.open(`${window.location.origin}${mountPoint}/integrations/donations`, openInNewTab ? '_blank' : '_self');
   }
 }
+
+export function getUserProfileLink(userDid: string, locale = 'en') {
+  return joinURL(
+    window.location.origin,
+    withQuery('.well-known/service/user', {
+      locale,
+      did: userDid,
+    })
+  );
+}

package/src/payment/amount.tsx

@@ -10,7 +10,7 @@ export default function PaymentAmount({ amount, sx }: Props) {
       sx={{
         my: 0.5,
         fontWeight: 600,
-        fontSize: '2.5rem',
+        fontSize: '2.1875rem',
         letterSpacing: '-0.03rem',
         fontVariantNumeric: 'tabular-nums',
         ...sx,