@blocklet/payment-react 1.18.0 → 1.18.2

package/src/checkout/form.tsx

@@ -9,6 +9,7 @@ import { getPrefix, mergeExtraParams } from '../libs/util';
 import Payment from '../payment';
 import type { CheckoutContext, CheckoutProps } from '../types';
 import { PaymentThemeProvider } from '../theme';
+import DonationForm from '../payment/donation-form';
 
 const promises: { [key: string]: Promise<any> } = {};
 const startFromPaymentLink = (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
@@ -41,6 +42,7 @@ export default function CheckoutForm({
   extraParams,
   action,
   theme = 'default',
+  formType = 'payment',
   ...restProps
 }: CheckoutProps) {
   if (!id.startsWith('plink_') && !id.startsWith('cs_')) {
@@ -76,9 +78,9 @@ export default function CheckoutForm({
     onError?.(err);
   };
 
-  if (theme === 'inherit') {
-    return (
-      <Payment
+  const Checkout =
+    formType === 'donation' ? (
+      <DonationForm
         checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
         paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
         paymentIntent={data?.paymentIntent}
@@ -92,34 +94,10 @@ export default function CheckoutForm({
         goBack={goBack}
         mode={mode as string}
         action={action}
+        id={id}
         {...restProps}
       />
-    );
-  }
-  if (theme && typeof theme === 'object') {
-    return (
-      <PaymentThemeProvider theme={theme}>
-        <Payment
-          checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
-          paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
-          paymentIntent={data?.paymentIntent}
-          paymentLink={data?.paymentLink}
-          customer={data?.customer}
-          completed={state.completed}
-          error={apiError}
-          onPaid={handlePaid}
-          onError={handleError}
-          onChange={onChange}
-          goBack={goBack}
-          mode={mode as string}
-          action={action}
-          {...restProps}
-        />
-      </PaymentThemeProvider>
-    );
-  }
-  return (
-    <PaymentThemeProvider>
+    ) : (
       <Payment
         checkoutSession={data?.checkoutSession as TCheckoutSessionExpanded}
         paymentMethods={data?.paymentMethods as TPaymentMethodExpanded[]}
@@ -136,8 +114,15 @@ export default function CheckoutForm({
         action={action}
         {...restProps}
       />
-    </PaymentThemeProvider>
-  );
+    );
+
+  if (theme === 'inherit') {
+    return Checkout;
+  }
+  if (theme && typeof theme === 'object') {
+    return <PaymentThemeProvider theme={theme}>{Checkout}</PaymentThemeProvider>;
+  }
+  return <PaymentThemeProvider>{Checkout}</PaymentThemeProvider>;
 }
 
 CheckoutForm.defaultProps = {
@@ -146,4 +131,5 @@ CheckoutForm.defaultProps = {
   mode: 'inline',
   action: '',
   extraParams: {},
+  formType: 'payment',
 };

package/src/components/payment-beneficiaries.tsx

@@ -0,0 +1,97 @@
+/* eslint-disable @typescript-eslint/indent */
+import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { BN, fromUnitToToken } from '@ocap/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+export interface TBeneficiary {
+  name: string;
+  address: string;
+  avatar?: string;
+  percent: number;
+  amount?: string;
+  url?: string;
+  type?: 'user' | 'dapp';
+}
+
+interface BenefitsProps {
+  data: TBeneficiary[];
+  currency: {
+    symbol: string;
+    decimal: number;
+  };
+  totalAmount?: string;
+}
+
+PaymentBeneficiaries.defaultProps = {
+  totalAmount: '0',
+};
+
+export default function PaymentBeneficiaries({ data, currency, totalAmount }: BenefitsProps) {
+  const { t } = useLocaleContext();
+  return (
+    <Stack spacing={2}>
+      <Typography variant="subtitle2" color="text.secondary">
+        {t('benefits.title', { count: data.length })}
+      </Typography>
+
+      {data.map((item) => {
+        const amount =
+          item.amount ||
+          (totalAmount
+            ? new BN(totalAmount)
+                .mul(new BN(Number(item.percent)))
+                .div(new BN(100))
+                .toString()
+            : '0');
+        return (
+          <Stack
+            key={item.address}
+            direction={{ xs: 'column', sm: 'row' }}
+            alignItems="center"
+            justifyContent="space-between"
+            sx={{
+              px: 0.5,
+              borderRadius: 1,
+              bgcolor: 'background.paper',
+              '&:hover': {
+                bgcolor: 'action.hover',
+              },
+            }}>
+            <Stack direction="row" spacing={1.5} alignItems="center" sx={{ width: { xs: '100%', sm: 'auto' } }}>
+              <Avatar src={item.avatar} alt={item.name} sx={{ width: 32, height: 32 }} variant="square" />
+              <Box>
+                <Typography
+                  variant="subtitle2"
+                  onClick={() => {
+                    if (item.url) {
+                      window.open(item.url, '_blank');
+                    }
+                  }}
+                  sx={{
+                    cursor: item.url ? 'pointer' : 'default',
+                    '&:hover': {
+                      color: item.url ? 'text.link' : 'inherit',
+                    },
+                  }}>
+                  {item.name}
+                </Typography>
+                <Typography variant="caption" color="text.secondary" sx={{ cursor: 'pointer' }}>
+                  {item.address}
+                </Typography>
+              </Box>
+            </Stack>
+
+            <Stack alignItems="flex-end" sx={{ width: { xs: '100%', sm: 'auto' }, mt: { xs: 1, sm: 0 } }}>
+              <Typography variant="subtitle2">
+                {fromUnitToToken(amount, currency.decimal)} {currency.symbol}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                {Number(item.percent)}%
+              </Typography>
+            </Stack>
+          </Stack>
+        );
+      })}
+    </Stack>
+  );
+}

package/src/index.ts

@@ -29,6 +29,7 @@ import TruncatedText from './components/truncated-text';
 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';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -75,4 +76,5 @@ export {
   TruncatedText,
   Link,
   OverdueInvoicePayment,
+  PaymentBeneficiaries,
 };

package/src/locales/en.tsx

@@ -33,6 +33,8 @@ export default flat({
     upload: 'Upload',
     change: 'Change',
     cancel: 'Cancel',
+    close: 'Close',
+    back: 'Back',
     every: 'every',
     per: 'per {interval}',
     slash: '/ {interval}',
@@ -129,6 +131,13 @@ export default flat({
         select: 'Select Amount',
         summary: '{total} supporters {totalAmount} {symbol}',
         empty: 'No supporters yet',
+        gaveTips: '{count} people gave tips',
+        tipAmount: 'Tip Amount',
+        benefits: {
+          one: '{name} will receive all tips',
+          multiple: 'Tips will be distributed to {count} beneficiaries',
+          view: 'Click to view details',
+        },
       },
       cardPay: '{action} with card',
       empty: 'No thing to pay',
@@ -363,4 +372,7 @@ export default flat({
   empty: {
     records: 'No matching records found',
   },
+  benefits: {
+    title: '{count} Beneficiaries',
+  },
 });

package/src/locales/zh.tsx

@@ -33,6 +33,8 @@ export default flat({
     change: '更换',
     confirm: '确认',
     cancel: '取消',
+    close: '关闭',
+    back: '返回',
     every: '每',
     per: '每{interval}',
     slash: '每{interval}',
@@ -128,6 +130,13 @@ export default flat({
         select: '选择金额',
         summary: '共有 {total} 人支持 {totalAmount} {symbol}',
         empty: '❤️ 支持一下',
+        gaveTips: '已有 {count} 人打赏',
+        tipAmount: '打赏金额',
+        benefits: {
+          one: '{name} 将获得全部打赏',
+          multiple: '打赏将按比例分配给 {count} 位受益人',
+          view: '点击查看详情',
+        },
       },
       cardPay: '使用卡片{action}',
       empty: '没有可支付的项目',
@@ -353,4 +362,7 @@ export default flat({
   empty: {
     records: '没有找到匹配的记录',
   },
+  benefits: {
+    title: '{count} 位受益人',
+  },
 });