@blocklet/payment-react 1.17.12 → 1.18.1

package/es/checkout/donate.js

@@ -27,6 +27,8 @@ import { formatAmount, formatBNStr, formatDateTime, formatError, getCustomerAvat
 import CheckoutForm from "./form.js";
 import { PaymentThemeProvider } from "../theme/index.js";
 import { usePaymentContext } from "../contexts/payment.js";
+import Livemode from "../components/livemode.js";
+import { useMobile } from "../hooks/mobile.js";
 const donationCache = {};
 const createOrUpdateDonation = (settings, livemode = true) => {
   const donationKey = `${settings.target}-${livemode}`;
@@ -232,8 +234,11 @@ function CheckoutDonateInner({
   children
 }) {
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
+  const customers = uniqBy(supporters?.data?.supporters || [], "customer_did");
+  const { t } = useLocaleContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const { isMobile } = useMobile();
   const handlePaid = (...args) => {
     if (onPaid) {
       onPaid(...args);
@@ -380,23 +385,43 @@ function CheckoutDonateInner({
       Dialog,
       {
         open: state.open,
-        title: settings.title,
+        title: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 0.5, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h3", sx: { maxWidth: 320, textOverflow: "ellipsis", overflow: "hidden" }, children: settings.title }),
+          !donation.data.livemode && /* @__PURE__ */ jsx(Livemode, { sx: { width: "fit-content" } })
+        ] }),
         maxWidth: "md",
-        showCloseButton: true,
+        toolbar: isMobile ? null : /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, sx: { color: "text.secondary" }, children: [
+          /* @__PURE__ */ jsx(AvatarGroup, { total: customers?.length, max: 5, children: customers.map((x) => /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              title: x.customer?.name,
+              src: getCustomerAvatar(
+                x.customer?.did,
+                x?.updated_at ? new Date(x.updated_at).toISOString() : "",
+                18
+              ),
+              variant: "circular",
+              sx: { width: 18, height: 18 }
+            },
+            x.id
+          )) }),
+          customers?.length > 0 && t("payment.checkout.donation.gaveTips", { count: customers?.length })
+        ] }),
+        showCloseButton: false,
         disableEscapeKeyDown: true,
         sx: {
           ".MuiDialogContent-root": {
-            padding: {
-              xs: 0,
-              md: "0 16px 0"
-            },
+            padding: "16px 24px",
             borderTop: "1px solid var(--stroke-border-base, #EFF1F5)",
-            width: {
-              xs: "100%",
-              md: 900
-            }
+            width: "100%"
+          },
+          ".ux-dialog_header": {
+            gap: 5
           }
         },
+        PaperProps: {
+          style: { minHeight: "auto", width: 680 }
+        },
         onClose: (e, reason) => setState({ open: reason === "backdropClick" }),
         children: /* @__PURE__ */ jsx(Box, { sx: { height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(
           CheckoutForm,
@@ -407,8 +432,13 @@ function CheckoutDonateInner({
             action: settings.appearance?.button?.text,
             mode: "inline",
             theme,
+            formType: "donation",
             extraParams: {
               livemode
+            },
+            formRender: {
+              cancel: /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "large", onClick: () => setState({ open: false }), children: t("common.cancel") }),
+              onCancel: () => setState({ open: false })
             }
           }
         ) })

package/es/checkout/form.d.ts

@@ -1,5 +1,5 @@
 import type { CheckoutProps } from '../types';
-declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, ...restProps }: CheckoutProps): import("react").JSX.Element;
+declare function CheckoutForm({ id, mode, onPaid, onError, onChange, goBack, extraParams, action, theme, formType, ...restProps }: CheckoutProps): import("react").JSX.Element;
 declare namespace CheckoutForm {
     var defaultProps: {
         onPaid: any;
@@ -10,6 +10,7 @@ declare namespace CheckoutForm {
         mode: string;
         action: string;
         extraParams: {};
+        formType: string;
     };
 }
 export default CheckoutForm;

package/es/checkout/form.js

@@ -7,6 +7,7 @@ import api from "../libs/api.js";
 import { getPrefix, mergeExtraParams } from "../libs/util.js";
 import Payment from "../payment/index.js";
 import { PaymentThemeProvider } from "../theme/index.js";
+import DonationForm from "../payment/donation-form.js";
 const promises = {};
 const startFromPaymentLink = (id, params) => {
   if (!promises[id]) {
@@ -32,6 +33,7 @@ export default function CheckoutForm({
   extraParams,
   action,
   theme = "default",
+  formType = "payment",
   ...restProps
 }) {
   if (!id.startsWith("plink_") && !id.startsWith("cs_")) {
@@ -60,49 +62,26 @@ export default function CheckoutForm({
     setState({ appError: err });
     onError?.(err);
   };
-  if (theme === "inherit") {
-    return /* @__PURE__ */ jsx(
-      Payment,
-      {
-        checkoutSession: data?.checkoutSession,
-        paymentMethods: data?.paymentMethods,
-        paymentIntent: data?.paymentIntent,
-        paymentLink: data?.paymentLink,
-        customer: data?.customer,
-        completed: state.completed,
-        error: apiError,
-        onPaid: handlePaid,
-        onError: handleError,
-        onChange,
-        goBack,
-        mode,
-        action,
-        ...restProps
-      }
-    );
-  }
-  if (theme && typeof theme === "object") {
-    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme, children: /* @__PURE__ */ jsx(
-      Payment,
-      {
-        checkoutSession: data?.checkoutSession,
-        paymentMethods: data?.paymentMethods,
-        paymentIntent: data?.paymentIntent,
-        paymentLink: data?.paymentLink,
-        customer: data?.customer,
-        completed: state.completed,
-        error: apiError,
-        onPaid: handlePaid,
-        onError: handleError,
-        onChange,
-        goBack,
-        mode,
-        action,
-        ...restProps
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: /* @__PURE__ */ jsx(
+  const Checkout = formType === "donation" ? /* @__PURE__ */ jsx(
+    DonationForm,
+    {
+      checkoutSession: data?.checkoutSession,
+      paymentMethods: data?.paymentMethods,
+      paymentIntent: data?.paymentIntent,
+      paymentLink: data?.paymentLink,
+      customer: data?.customer,
+      completed: state.completed,
+      error: apiError,
+      onPaid: handlePaid,
+      onError: handleError,
+      onChange,
+      goBack,
+      mode,
+      action,
+      id,
+      ...restProps
+    }
+  ) : /* @__PURE__ */ jsx(
     Payment,
     {
       checkoutSession: data?.checkoutSession,
@@ -120,12 +99,20 @@ export default function CheckoutForm({
       action,
       ...restProps
     }
-  ) });
+  );
+  if (theme === "inherit") {
+    return Checkout;
+  }
+  if (theme && typeof theme === "object") {
+    return /* @__PURE__ */ jsx(PaymentThemeProvider, { theme, children: Checkout });
+  }
+  return /* @__PURE__ */ jsx(PaymentThemeProvider, { children: Checkout });
 }
 CheckoutForm.defaultProps = {
   onPaid: noop,
   onError: console.error,
   mode: "inline",
   action: "",
-  extraParams: {}
+  extraParams: {},
+  formType: "payment"
 };

package/es/components/payment-beneficiaries.d.ts

@@ -0,0 +1,24 @@
+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;
+}
+declare function PaymentBeneficiaries({ data, currency, totalAmount }: BenefitsProps): import("react").JSX.Element;
+declare namespace PaymentBeneficiaries {
+    var defaultProps: {
+        totalAmount: string;
+    };
+}
+export default PaymentBeneficiaries;

package/es/components/payment-beneficiaries.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar, Box, Stack, Typography } from "@mui/material";
+import { BN, fromUnitToToken } from "@ocap/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+PaymentBeneficiaries.defaultProps = {
+  totalAmount: "0"
+};
+export default function PaymentBeneficiaries({ data, currency, totalAmount }) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: t("benefits.title", { count: data.length }) }),
+    data.map((item) => {
+      const amount = item.amount || (totalAmount ? new BN(totalAmount).mul(new BN(Number(item.percent))).div(new BN(100)).toString() : "0");
+      return /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: { xs: "column", sm: "row" },
+          alignItems: "center",
+          justifyContent: "space-between",
+          sx: {
+            px: 0.5,
+            borderRadius: 1,
+            bgcolor: "background.paper",
+            "&:hover": {
+              bgcolor: "action.hover"
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, alignItems: "center", sx: { width: { xs: "100%", sm: "auto" } }, children: [
+              /* @__PURE__ */ jsx(Avatar, { src: item.avatar, alt: item.name, sx: { width: 32, height: 32 }, variant: "square" }),
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(
+                  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"
+                      }
+                    },
+                    children: item.name
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { cursor: "pointer" }, children: item.address })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Stack, { alignItems: "flex-end", sx: { width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 } }, children: [
+              /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
+                fromUnitToToken(amount, currency.decimal),
+                " ",
+                currency.symbol
+              ] }),
+              /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+                Number(item.percent),
+                "%"
+              ] })
+            ] })
+          ]
+        },
+        item.address
+      );
+    })
+  ] });
+}

package/es/index.d.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';
 export * from './libs/util';
 export * from './libs/connect';
@@ -39,4 +40,4 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, };

package/es/index.js

@@ -29,6 +29,7 @@ import TruncatedText from "./components/truncated-text.js";
 import Link from "./components/link.js";
 import { createLazyComponent } from "./components/lazy-loader.js";
 import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
+import PaymentBeneficiaries from "./components/payment-beneficiaries.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -70,5 +71,6 @@ export {
   Table,
   TruncatedText,
   Link,
-  OverdueInvoicePayment
+  OverdueInvoicePayment,
+  PaymentBeneficiaries
 };

package/es/locales/en.js

@@ -31,6 +31,8 @@ export default flat({
     upload: "Upload",
     change: "Change",
     cancel: "Cancel",
+    close: "Close",
+    back: "Back",
     every: "every",
     per: "per {interval}",
     slash: "/ {interval}",
@@ -125,7 +127,14 @@ export default flat({
         custom: "Custom Amount",
         select: "Select Amount",
         summary: "{total} supporters {totalAmount} {symbol}",
-        empty: "No supporters yet"
+        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",
@@ -347,5 +356,8 @@ export default flat({
   },
   empty: {
     records: "No matching records found"
+  },
+  benefits: {
+    title: "{count} Beneficiaries"
   }
 });

package/es/locales/zh.js

@@ -31,6 +31,8 @@ export default flat({
     change: "\u66F4\u6362",
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
+    close: "\u5173\u95ED",
+    back: "\u8FD4\u56DE",
     every: "\u6BCF",
     per: "\u6BCF{interval}",
     slash: "\u6BCF{interval}",
@@ -125,7 +127,14 @@ export default flat({
         custom: "\u8F93\u5165\u91D1\u989D",
         select: "\u9009\u62E9\u91D1\u989D",
         summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount} {symbol}",
-        empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B"
+        empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B",
+        gaveTips: "\u5DF2\u6709 {count} \u4EBA\u6253\u8D4F",
+        tipAmount: "\u6253\u8D4F\u91D1\u989D",
+        benefits: {
+          one: "{name} \u5C06\u83B7\u5F97\u5168\u90E8\u6253\u8D4F",
+          multiple: "\u6253\u8D4F\u5C06\u6309\u6BD4\u4F8B\u5206\u914D\u7ED9 {count} \u4F4D\u53D7\u76CA\u4EBA",
+          view: "\u70B9\u51FB\u67E5\u770B\u8BE6\u60C5"
+        }
       },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
@@ -347,5 +356,8 @@ export default flat({
   },
   empty: {
     records: "\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"
+  },
+  benefits: {
+    title: "{count} \u4F4D\u53D7\u76CA\u4EBA"
   }
 });

package/es/payment/donation-form.d.ts

@@ -0,0 +1,24 @@
+import { type BoxProps } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
+import type { CheckoutCallbacks, CheckoutContext } from '../types';
+type Props = CheckoutContext & CheckoutCallbacks & {
+    completed?: boolean;
+    error?: any;
+    showCheckoutSummary?: boolean;
+    formRender?: Record<string, any>;
+    id: string;
+};
+declare function DonationForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, formRender, id, }: Props): import("react").JSX.Element;
+declare namespace DonationForm {
+    var defaultProps: {
+        completed: boolean;
+        error: null;
+        showCheckoutSummary: boolean;
+        formRender: {};
+    };
+}
+export default DonationForm;
+type RootProps = {
+    mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+} & BoxProps;
+export declare const Root: React.FC<RootProps>;