@blocklet/payment-react 1.13.210 → 1.13.211

package/lib/util.js

@@ -24,6 +24,7 @@ exports.formatUpsellSaving = formatUpsellSaving;
 exports.getCheckoutAmount = getCheckoutAmount;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
 exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
+exports.getPayoutStatusColor = getPayoutStatusColor;
 exports.getPrefix = void 0;
 exports.getPriceCurrencyOptions = getPriceCurrencyOptions;
 exports.getPriceUintAmountByCurrency = getPriceUintAmountByCurrency;
@@ -129,6 +130,9 @@ function formatNumber(n, precision = 6, trim = true) {
   return trim ? (0, _trimEnd.default)(num.format(options), "0.") : num.format(options);
 }
 const formatPrice = (price, currency, unit_label, quantity = 1, bn = true, locale = "en") => {
+  if (price.custom_unit_amount) {
+    return `Custom (${currency.symbol})`;
+  }
   const unit = getPriceUintAmountByCurrency(price, currency);
   const amount = bn ? (0, _util.fromUnitToToken)(new _util.BN(unit).mul(new _util.BN(quantity)), currency.decimal).toString() : +unit * quantity;
   if (price?.type === "recurring" && price.recurring) {
@@ -198,9 +202,15 @@ function getPriceUintAmountByCurrency(price, currency) {
   const options = getPriceCurrencyOptions(price);
   const option = options.find(x => x.currency_id === currency.id);
   if (option) {
+    if (option.custom_unit_amount) {
+      return option.custom_unit_amount.preset || option.custom_unit_amount.presets[0];
+    }
     return option.unit_amount;
   }
   if (price.currency_id === currency.id) {
+    if (price.custom_unit_amount) {
+      return price.custom_unit_amount.preset || price.custom_unit_amount.presets[0];
+    }
     return price.unit_amount;
   }
   console.warn(`Currency ${currency.id} not configured for price`, price);
@@ -213,8 +223,8 @@ function getPriceCurrencyOptions(price) {
   return [{
     currency_id: price.currency_id,
     unit_amount: price.unit_amount,
-    tiers: null,
-    custom_unit_amount: null
+    custom_unit_amount: price.custom_unit_amount || null,
+    tiers: null
   }];
 }
 function formatLineItemPricing(item, currency, trial, locale = "en") {
@@ -305,6 +315,19 @@ function getRefundStatusColor(status) {
       return "default";
   }
 }
+function getPayoutStatusColor(status) {
+  switch (status) {
+    case "paid":
+      return "success";
+    case "failed":
+      return "warning";
+    case "canceled":
+    case "pending":
+    case "in_transit":
+    default:
+      return "default";
+  }
+}
 function getInvoiceStatusColor(status) {
   switch (status) {
     case "paid":
@@ -329,14 +352,26 @@ function getWebhookStatusColor(status) {
   }
 }
 function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
+  if (items.find(x => (x.upsell_price || x.price).custom_unit_amount) && items.length > 1) {
+    throw new Error("Multiple items with custom unit amount are not supported");
+  }
   let renew = new _util.BN(0);
   const total = items.filter(x => {
     const price = upsell ? x.upsell_price || x.price : x.price;
     return price != null;
   }).reduce((acc, x) => {
+    if (x.custom_amount) {
+      return acc.add(new _util.BN(x.custom_amount));
+    }
     const price = upsell ? x.upsell_price || x.price : x.price;
+    const unitPrice = getPriceUintAmountByCurrency(price, currency);
+    if (price.custom_unit_amount) {
+      if (unitPrice) {
+        return acc.add(new _util.BN(unitPrice).mul(new _util.BN(x.quantity)));
+      }
+    }
     if (price?.type === "recurring") {
-      renew = renew.add(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(x.quantity)));
+      renew = renew.add(new _util.BN(unitPrice).mul(new _util.BN(x.quantity)));
       if (trialing) {
         return acc;
       }
@@ -344,7 +379,7 @@ function getCheckoutAmount(items, currency, trialing = false, upsell = true) {
         return acc;
       }
     }
-    return acc.add(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(x.quantity)));
+    return acc.add(new _util.BN(unitPrice).mul(new _util.BN(x.quantity)));
   }, new _util.BN(0)).toString();
   return {
     subtotal: total,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.210",
+  "version": "1.13.211",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,14 +52,14 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.64",
-    "@arcblock/ux": "^2.9.64",
+    "@arcblock/did-connect": "^2.9.66",
+    "@arcblock/ux": "^2.9.66",
     "@mui/icons-material": "^5.15.14",
     "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.14",
     "@mui/styles": "^5.15.14",
     "@mui/system": "^5.15.14",
-    "@ocap/util": "^1.18.114",
+    "@ocap/util": "^1.18.115",
     "@stripe/react-stripe-js": "^2.4.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.3.2",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.210",
+    "@blocklet/payment-types": "1.13.211",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "4d13c9b750596c25098c219a6e269ed141734d5e"
+  "gitHead": "2fe03028e2284261a1a62260d82a2e79ec45ce4a"
 }

package/src/checkout/donate.tsx

@@ -0,0 +1,256 @@
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type {
+  DonationSettings,
+  PaymentDetails,
+  TCheckoutSessionExpanded,
+  TPaymentCurrency,
+  TPaymentLink,
+  TPaymentMethod,
+} from '@blocklet/payment-types';
+import {
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Box,
+  Button,
+  CircularProgress,
+  Hidden,
+  Stack,
+  Table,
+  TableCell,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import { useRequest, useSetState } from 'ahooks';
+import omit from 'lodash/omit';
+import uniqBy from 'lodash/unionBy';
+import { useEffect } from 'react';
+
+import api from '../api';
+import TxLink from '../components/blockchain/tx';
+import { CheckoutProps } from '../types';
+import { formatAmount, formatDateTime, formatError } from '../util';
+import CheckoutForm from './form';
+
+export type DonateHistory = {
+  supporters: TCheckoutSessionExpanded[];
+  currency: TPaymentCurrency;
+  method: TPaymentMethod;
+  total: number;
+};
+export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
+  settings: DonationSettings;
+  livemode?: boolean;
+};
+
+const donationCache: { [key: string]: Promise<TPaymentLink> } = {};
+const createOrUpdateDonation = (settings: DonationSettings, livemode: boolean = true): Promise<TPaymentLink> => {
+  if (!donationCache[settings.target]) {
+    donationCache[settings.target] = api
+      .post(`/api/donations?livemode=${livemode}`, omit(settings, ['appearance']))
+      .then((res) => res.data)
+      .finally(() => {
+        setTimeout(() => {
+          delete donationCache[settings.target];
+        }, 3000);
+      });
+  }
+
+  return donationCache[settings.target];
+};
+
+const supporterCache: { [key: string]: Promise<DonateHistory> } = {};
+const fetchSupporters = (target: string): Promise<DonateHistory> => {
+  if (!supporterCache[target]) {
+    supporterCache[target] = api
+      .get(`/api/donations?&target=${target}`)
+      .then((res) => res.data)
+      .finally(() => {
+        setTimeout(() => {
+          delete supporterCache[target];
+        }, 3000);
+      });
+  }
+
+  return supporterCache[target];
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SupporterAvatar({ supporters = [], total, currency, method }: DonateHistory) {
+  const { t } = useLocaleContext();
+  const customers = uniqBy(supporters, 'customer_did');
+  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">
+        {t('payment.checkout.donation.summary', { total })}
+      </Typography>
+      <AvatarGroup total={total} max={20}>
+        {customers.map((x) => (
+          <Avatar
+            key={x.id}
+            title={x.customer?.name}
+            src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
+            variant="circular"
+            sx={{ width: 32, height: 32 }}
+          />
+        ))}
+      </AvatarGroup>
+    </Box>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function SupporterTable({ supporters = [], total, currency, method }: DonateHistory) {
+  const { t } = useLocaleContext();
+  return (
+    <Box display="flex" flexDirection="column" alignItems="center" sx={{ width: '100%' }} gap={{ xs: 0.5, sm: 1 }}>
+      <Typography component="p" color="text.secondary">
+        {t('payment.checkout.donation.summary', { total })}
+      </Typography>
+      <Table size="small" sx={{ width: '100%', overflow: 'hidden' }}>
+        {supporters.map((x) => (
+          <TableRow
+            key={x.id}
+            sx={{
+              '> td': { padding: '8px 16px 8px 0', borderTop: '1px solid #e0e0e0', borderBottom: '1px solid #e0e0e0' },
+            }}>
+            <TableCell>
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                <Avatar
+                  key={x.id}
+                  src={`/.well-known/service/user/avatar/${x.customer?.did}?imageFilter=resize&w=48&h=48`}
+                  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">
+                  {formatAmount(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>
+        ))}
+      </Table>
+    </Box>
+  );
+}
+
+export default function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps) {
+  const [state, setState] = useSetState({
+    open: false,
+    supporterLoaded: false,
+    exist: false,
+  });
+
+  const donation = useRequest(() => createOrUpdateDonation(settings, livemode));
+  const supporters = useRequest(() => (donation.data ? fetchSupporters(donation.data.id) : Promise.resolve({})));
+
+  useEffect(() => {
+    if (donation.data && state.supporterLoaded === false) {
+      setState({ supporterLoaded: true });
+      supporters.runAsync().catch(console.error);
+    }
+  }, [donation.data]); // eslint-disable-line
+
+  const handlePaid = (...args: any[]) => {
+    if (onPaid) {
+      // @ts-ignore
+      onPaid(...args);
+    }
+
+    supporters.runAsync().catch(console.error);
+
+    setTimeout(() => {
+      setState({ open: false });
+    }, 3000);
+  };
+
+  if (donation.error) {
+    return <Alert severity="error">{formatError(donation.error)}</Alert>;
+  }
+
+  if (donation.loading || !donation.data) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <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}
+        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)} />
+      )}
+      {supporters.data && settings.appearance.history.variant === 'table' && (
+        <SupporterTable {...(supporters.data as DonateHistory)} />
+      )}
+      <Dialog
+        open={state.open}
+        title={settings.title}
+        maxWidth="md"
+        showCloseButton
+        disableBackdropClick
+        disableEscapeKeyDown
+        onClose={(e: any, reason: string) => setState({ open: reason === 'backdropClick' })}>
+        <Box sx={{ mb: 1, mt: -2 }}>
+          <CheckoutForm
+            id={donation.data.id}
+            onPaid={handlePaid}
+            onError={onError}
+            action={settings.appearance?.button?.text}
+            mode="inline"
+          />
+        </Box>
+      </Dialog>
+    </Box>
+  );
+}
+
+CheckoutDonate.defaultProps = {
+  livemode: true,
+};

package/src/checkout/form.tsx

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { TCheckoutSessionExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { TCheckoutSessionExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import { useEffect } from 'react';
@@ -31,8 +30,16 @@ const fetchCheckoutSession = async (id: string): Promise<CheckoutContext> => {
   return data;
 };
 
-// FIXME: @wangshijun support popup
-export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams }: CheckoutProps) {
+export default function CheckoutForm({
+  id,
+  mode,
+  onPaid,
+  onError,
+  onChange,
+  goBack,
+  extraParams,
+  action,
+}: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
     throw new Error('Either a checkoutSession or a paymentLink id is required.');
   }
@@ -80,6 +87,7 @@ export default function CheckoutForm({ id, mode, onPaid, onError, onChange, goBa
       onChange={onChange}
       goBack={goBack}
       mode={mode as string}
+      action={action}
     />
   );
 }
@@ -88,5 +96,6 @@ CheckoutForm.defaultProps = {
   onPaid: noop,
   onError: console.error,
   mode: 'inline',
+  action: '',
   extraParams: {},
 };

package/src/components/blockchain/tx.tsx

@@ -7,12 +7,14 @@ import { getTxLink } from '../../util';
 
 TxLink.defaultProps = {
   mode: 'dashboard',
+  align: 'left',
 };
 
 export default function TxLink(props: {
   details: PaymentDetails;
   method: TPaymentMethod;
   mode?: 'customer' | 'dashboard';
+  align?: 'left' | 'right';
 }) {
   const { t } = useLocaleContext();
 
@@ -29,7 +31,12 @@ export default function TxLink(props: {
   if (link) {
     return (
       <Link href={link} target="_blank" rel="noopener noreferrer">
-        <Stack component="span" direction="row" alignItems="center" spacing={1}>
+        <Stack
+          component="span"
+          direction="row"
+          alignItems="center"
+          justifyContent={props.align === 'left' ? 'flex-start' : 'flex-end'}
+          spacing={1}>
           <Typography component="span" color="primary">
             {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
           </Typography>

package/src/index.ts

@@ -1,4 +1,5 @@
 import api from './api';
+import CheckoutDonate from './checkout/donate';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
 import TxLink from './components/blockchain/tx';
@@ -39,6 +40,7 @@ export {
   ConfirmDialog,
   CheckoutForm,
   CheckoutTable,
+  CheckoutDonate,
   CurrencySelector,
   Payment,
   PaymentSummary,

package/src/locales/en.tsx

@@ -88,6 +88,7 @@ export default flat({
       try: 'Try for free',
       include: 'This includes:',
       subscription: 'Subscribe',
+      donate: 'Donate',
       select: 'Select',
       selected: 'Selected',
       noPricing: 'No items to purchase',
@@ -104,6 +105,12 @@ export default flat({
         tooltip:
           'Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription.',
       },
+      donation: {
+        between: 'Please enter an amount between {min} and {max}.',
+        custom: 'Custom Amount',
+        select: 'Select Amount',
+        summary: '{total} supporters',
+      },
       cardPay: '{action} with card',
       empty: 'No thing to pay',
       per: 'per',
@@ -119,6 +126,7 @@ export default flat({
         payment: 'Thanks for your purchase',
         subscription: 'Thanks for your subscribing',
         setup: 'Thanks for your subscribing',
+        donate: 'Thanks for your support',
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
       },
       confirm:

package/src/locales/zh.tsx

@@ -88,6 +88,7 @@ export default flat({
       try: '免费试用',
       include: '包括：',
       subscription: '订阅',
+      donate: '捐赠',
       select: '选择',
       selected: '已选',
       noPricing: '没有可购买的物品',
@@ -103,6 +104,12 @@ export default flat({
         title: '质押数量',
         tooltip: '质押相当于保证金，用于确保未来的账单能够正常扣款，如果你从 DID Wallet 撤销质押，订阅也会被取消。',
       },
+      donation: {
+        between: '金额必须大于 {min} 且小于 {max}',
+        custom: '输入金额',
+        select: '选择金额',
+        summary: '已经有 {total} 人支持',
+      },
       cardPay: '使用卡片{action}',
       empty: '没有可支付的项目',
       per: '每',
@@ -118,6 +125,7 @@ export default flat({
         payment: '感谢您的购买',
         subscription: '感谢您的订阅',
         setup: '感谢您的订阅',
+        donate: '感谢您的支持',
         tip: '向{payee}的付款已完成。您可以在您的账户中查看此付款的详细信息。',
       },
       confirm:

package/src/payment/error.tsx

@@ -4,11 +4,12 @@ type Props = {
   title: string;
   description: string;
   button?: string;
+  mode?: string;
 };
 
-export default function PaymentError({ title, description, button }: Props) {
+export default function PaymentError({ title, description, button, mode }: Props) {
   return (
-    <Stack sx={{ height: '100vh' }} alignItems="center" justifyContent="center">
+    <Stack sx={{ height: mode === 'inline' ? 'auto' : '100vh' }} alignItems="center" justifyContent="center">
       <Stack sx={{ width: '280px' }} direction="column" alignItems="center" justifyContent="center">
         <Typography variant="h5" sx={{ mb: 2 }}>
           {title}
@@ -26,4 +27,5 @@ export default function PaymentError({ title, description, button }: Props) {
 
 PaymentError.defaultProps = {
   button: 'Back',
+  mode: 'standalone',
 };

package/src/payment/form/currency.tsx

@@ -11,6 +11,7 @@ type Props = {
 export default function CurrencySelector({ value, currencies, onChange }: Props) {
   return (
     <Root
+      count={currencies.length}
       style={{
         display: currencies.length > 1 ? 'grid' : 'block',
         gridTemplateColumns: '50% 50%',
@@ -42,12 +43,12 @@ export default function CurrencySelector({ value, currencies, onChange }: Props)
   );
 }
 
-const Root = styled('section')`
+const Root = styled<any>('section')`
   .cko-payment-card {
     position: relative;
-    border: 2px solid ${(props) => props.theme.palette.primary.main};
-    padding: 5px 10px;
-    margin: 5px 0;
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    padding: 4px 8px;
+    margin: 8px 0 0;
     cursor: pointer;
   }
 
@@ -62,18 +63,15 @@ const Root = styled('section')`
   }
 
   .cko-payment-card-unselect {
-    border: 2px solid #ddd;
-    padding: 5px 10px;
-    margin: 5px 0;
+    border: 1px solid #ddd;
+    padding: 4px 8px;
+    margin: 8px 0 0;
     cursor: pointer;
   }
 
-  .cko-payment-card:nth-child(odd) {
-    margin-right: 8px;
-  }
-
+  .cko-payment-card:nth-child(odd),
   .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: 8px;
+    margin-right: ${(props) => (props.count > 1 ? 8 : 0)}px;
   }
 
   .cko-payment-card::after {
@@ -83,7 +81,7 @@ const Root = styled('section')`
     position: absolute;
     right: 3px;
     bottom: 3px;
-    border: 2px solid #fff;
+    border: 1px solid #fff;
     border-top-color: transparent;
     border-left-color: transparent;
     transform: rotate(35deg);

package/src/payment/form/index.tsx

@@ -70,10 +70,12 @@ export default function PaymentForm({
   checkoutSession,
   paymentMethods,
   paymentIntent,
+  paymentLink,
   customer,
   onPaid,
   onError,
   mode,
+  action,
 }: PageData) {
   const theme = useTheme();
   const { t } = useLocaleContext();
@@ -140,9 +142,17 @@ export default function PaymentForm({
   }, [domSize, theme]);
 
   const payee = getStatementDescriptor(checkoutSession.line_items);
-  const buttonText = session?.user
-    ? t(`payment.checkout.${checkoutSession.mode}`)
-    : t('payment.checkout.connect', { action: t(`payment.checkout.${checkoutSession.mode}`) });
+  let buttonText = '';
+  if (paymentLink?.donation_settings) {
+    if (action) {
+      buttonText = action;
+    } else {
+      buttonText = t('payment.checkout.donate');
+    }
+  } else {
+    buttonText = t(`payment.checkout.${checkoutSession.mode}`);
+  }
+  buttonText = session?.user ? buttonText : t('payment.checkout.connect', { action: buttonText });
 
   const method = paymentMethods.find((x) => x.id === paymentMethod) as TPaymentMethodExpanded;
 
@@ -348,7 +358,7 @@ export default function PaymentForm({
       <AddressForm mode={checkoutSession.billing_address_collection as string} stripe={method?.type === 'stripe'} />
       <Fade in>
         <Stack direction="column" alignItems="flex-start" className="cko-payment-methods">
-          <Typography sx={{ mb: 2, color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
+          <Typography sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>{t('payment.checkout.method')}</Typography>
           <Stack direction="row" sx={{ width: '100%' }}>
             <Controller
               name="payment_currency"