@blocklet/payment-react 1.18.7 → 1.18.8

package/src/checkout/donate.tsx

@@ -1,3 +1,4 @@
+/* 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';
@@ -18,14 +19,9 @@ import {
   Box,
   Button,
   CircularProgress,
-  Hidden,
   IconButton,
   Popover,
   Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
   Typography,
   Tooltip,
   type ButtonProps as MUIButtonProps,
@@ -36,13 +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,
   getCustomerAvatar,
+  getTxLink,
+  getUserProfileLink,
   lazyLoad,
   openDonationSettings,
 } from '../libs/util';
@@ -58,7 +54,7 @@ export type DonateHistory = {
   supporters: TCheckoutSessionExpanded[];
   currency: TPaymentCurrency;
   method: TPaymentMethod;
-  // total?: number;
+  total?: number;
   totalAmount: string;
 };
 
@@ -149,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>
   );
 }
@@ -539,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>
           ) : (
@@ -552,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)} />

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/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/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,

package/src/payment/form/index.tsx

@@ -575,7 +575,7 @@ export default function PaymentForm({
           </Box>
 
           {['subscription', 'setup'].includes(checkoutSession.mode) && (
-            <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.9rem', lineHeight: '1.1rem' }}>
+            <Typography sx={{ mt: 2.5, color: 'text.lighter', fontSize: '0.7875rem', lineHeight: '0.9625rem' }}>
               {t('payment.checkout.confirm', { payee })}
             </Typography>
           )}

package/src/payment/form/stripe/form.tsx

@@ -125,7 +125,7 @@ function StripeCheckoutForm({
       {stripe && elements && state.loaded && (
         <LoadingButton
           fullWidth
-          sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '1.1rem' }}
+          sx={{ mt: 2, mb: 1, borderRadius: 0, fontSize: '0.875rem' }}
           type="submit"
           disabled={state.confirming || !state.loaded}
           loading={state.confirming}

package/src/payment/product-card.tsx

@@ -41,13 +41,13 @@ export default function ProductCard({ size, variant, name, logo, description, ex
           <Typography
             variant="body1"
             title={description}
-            sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1.2, textAlign: 'left' }}
+            sx={{ fontSize: '0.74375rem', mb: 0.5, lineHeight: 1.2, textAlign: 'left' }}
             color="text.lighter">
             {description}
           </Typography>
         )}
         {extra && (
-          <Box sx={{ fontSize: '0.85rem' }} color="text.lighter">
+          <Box sx={{ fontSize: '0.74375rem' }} color="text.lighter">
             {extra}
           </Box>
         )}

package/src/payment/product-item.tsx

@@ -86,7 +86,7 @@ export default function ProductItem({
               {primaryText}
             </Typography>
             {pricing.secondary && (
-              <Typography sx={{ fontSize: '0.85rem', color: 'text.lighter' }}>{pricing.secondary}</Typography>
+              <Typography sx={{ fontSize: '0.74375rem', color: 'text.lighter' }}>{pricing.secondary}</Typography>
             )}
           </Stack>
         </Stack>

package/src/payment/product-skeleton.tsx

@@ -22,7 +22,7 @@ export default function ProductSkeleton({ count }: { count: number }) {
         <Typography component="div" variant="h4" sx={{ width: '50%' }}>
           <Skeleton />
         </Typography>
-        <Skeleton variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+        <Skeleton variant="text" sx={{ fontSize: '0.875rem', width: '60%' }} />
         <Typography component="div" variant="h3" sx={{ width: '60%' }}>
           <Skeleton />
         </Typography>
@@ -31,7 +31,7 @@ export default function ProductSkeleton({ count }: { count: number }) {
         </Typography>
         {Array.from({ length: count }).map((_, i) => (
           // eslint-disable-next-line react/no-array-index-key
-          <Skeleton key={i} variant="text" sx={{ fontSize: '1rem', width: '60%' }} />
+          <Skeleton key={i} variant="text" sx={{ fontSize: '0.875rem', width: '60%' }} />
         ))}
       </Stack>
     </Fade>

package/src/payment/skeleton/donation.tsx

@@ -4,7 +4,7 @@ export default function DonationSkeleton() {
   return (
     <Fade in>
       <Stack direction="column">
-        <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+        <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={40} />
         <Divider
           sx={{

package/src/payment/skeleton/overview.tsx

@@ -5,7 +5,7 @@ export default function OverviewSkeleton() {
     <Fade in>
       <Stack direction="column">
         <Stack direction="row" alignItems="center" spacing={2}>
-          <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+          <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         </Stack>
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={100} />
         <Typography mt={2} component="div" variant="h4">

package/src/payment/skeleton/payment.tsx

@@ -4,7 +4,7 @@ export default function PaymentSkeleton() {
   return (
     <Fade in>
       <Stack direction="column">
-        <Skeleton variant="text" sx={{ fontSize: '2rem', width: '40%' }} />
+        <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}>

package/src/payment/summary.tsx

@@ -366,7 +366,7 @@ export default function PaymentSummary({
         {headlines.then && headlines.showThen && (
           <Typography
             component="div"
-            sx={{ fontSize: '0.9rem', color: 'text.lighter', textAlign: 'right', margin: '-2px 0 8px' }}>
+            sx={{ fontSize: '0.7875rem', color: 'text.lighter', textAlign: 'right', margin: '-2px 0 8px' }}>
             {headlines.then}
           </Typography>
         )}

package/src/theme/index.tsx

@@ -60,7 +60,7 @@ export function PaymentThemeProvider({
         },
         styleOverrides: {
           root: {
-            fontSize: '1rem',
+            fontSize: '0.875rem',
             fontWeight: 500,
             textTransform: 'none',
             boxShadow: 'none',
@@ -109,6 +109,7 @@ export function PaymentThemeProvider({
         styleOverrides: {
           root: {
             textTransform: 'none',
+            fontSize: '0.875rem',
           },
         },
       },

package/src/theme/typography.ts

@@ -2,7 +2,7 @@ import type { TypographyOptions } from '@mui/material/styles/createTypography';
 
 export const typography: TypographyOptions = {
   h1: {
-    fontSize: '1.875rem',
+    fontSize: '1.5rem',
     lineHeight: 1.2,
     fontWeight: 800,
     letterSpacing: '-.025em',
@@ -14,38 +14,38 @@ export const typography: TypographyOptions = {
     letterSpacing: '-.025em',
   },
   h3: {
-    fontSize: '1.25rem',
+    fontSize: '1.09375rem',
     lineHeight: 1.4,
     fontWeight: 600,
     letterSpacing: '-.025em',
   },
   h4: {
-    fontSize: '1.125rem',
+    fontSize: '1.09375rem',
     lineHeight: 1.5,
     fontWeight: 600,
   },
   h5: {
-    fontSize: '1rem',
+    fontSize: '0.875rem',
     lineHeight: 1.75,
     fontWeight: 400,
   },
   h6: {
-    fontSize: '1rem',
+    fontSize: '0.875rem',
     lineHeight: 1.75,
     fontWeight: 400,
   },
   subtitle1: {
-    fontSize: '1rem',
+    fontSize: '0.875rem',
     lineHeight: 1.75,
     fontWeight: 400,
   },
   subtitle2: {
-    fontSize: '1rem',
+    fontSize: '0.875rem',
     lineHeight: 1.75,
     fontWeight: 400,
   },
   body1: {
-    fontSize: '1rem',
+    fontSize: '0.875rem',
     lineHeight: 1.75,
   },