@blocklet/payment-react 1.18.15 → 1.18.17

package/es/history/invoice/list.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Stack, Typography, Tooltip } from "@mui/material";
 import { styled } from "@mui/system";
 import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
 import React, { useEffect, useRef, useState } from "react";
@@ -72,7 +72,8 @@ const InvoiceTable = React.memo((props) => {
     include_staking,
     include_return_staking,
     include_recovered_from,
-    onTableDataChange
+    onTableDataChange,
+    relatedSubscription
   } = props;
   const listKey = "invoice-table";
   const { t, locale } = useLocaleContext();
@@ -135,6 +136,11 @@ const InvoiceTable = React.memo((props) => {
     const { link } = getInvoiceLink(invoice, action);
     handleNavigation(e, link, navigate, { target: link.external ? "_blank" : target });
   };
+  const handleRelatedSubscriptionClick = (e, invoice) => {
+    if (invoice.subscription_id) {
+      handleNavigation(e, createLink(`/customer/subscription/${invoice.subscription_id}`), navigate);
+    }
+  };
   const columns = [
     {
       label: t("common.amount"),
@@ -144,7 +150,8 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsxs(Typography, { children: [
+          const isVoid = invoice.status === "void";
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
             formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
             "\xA0",
             invoice.paymentCurrency.symbol
@@ -172,13 +179,36 @@ const InvoiceTable = React.memo((props) => {
         }
       }
     },
+    ...relatedSubscription ? [
+      {
+        label: t("common.relatedSubscription"),
+        name: "subscription",
+        options: {
+          customBodyRenderLite: (_, index) => {
+            const invoice = data?.list[index];
+            return invoice.subscription_id ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                onClick: (e) => handleRelatedSubscriptionClick(e, invoice),
+                sx: { color: "text.link", cursor: "pointer" },
+                children: invoice.subscription?.description
+              }
+            ) : /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: { ...linkStyle, color: "text.lighter" }, children: t("common.none") });
+          }
+        }
+      }
+    ] : [],
     {
       label: t("common.updatedAt"),
       name: "name",
       options: {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(
+            invoice.created_at,
+            locale,
+            relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss"
+          ) });
         }
       }
     },
@@ -201,6 +231,7 @@ const InvoiceTable = React.memo((props) => {
           const invoice = data?.list[index];
           const hidePay = invoice.billing_reason === "overdraft-protection";
           const { connect } = getInvoiceLink(invoice, action);
+          const isVoid = invoice.status === "void";
           if (action && !hidePay) {
             return connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
               Button,
@@ -215,7 +246,7 @@ const InvoiceTable = React.memo((props) => {
               }
             );
           }
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
         }
       }
     }
@@ -349,6 +380,7 @@ const InvoiceList = React.memo((props) => {
       /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
       invoices.map((invoice) => {
         const { link, connect } = getInvoiceLink(invoice, action);
+        const isVoid = invoice.status === "void";
         return /* @__PURE__ */ jsxs(
           Stack,
           {
@@ -371,17 +403,35 @@ const InvoiceList = React.memo((props) => {
                   onClick: (e) => handleLinkClick(e, link),
                   children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
                     /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
-                    link.external && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
+                    link.external && /* @__PURE__ */ jsx(
+                      OpenInNewOutlined,
+                      {
+                        fontSize: "small",
+                        sx: {
+                          color: "text.secondary",
+                          display: { xs: "none", md: "inline-flex" }
+                        }
+                      }
+                    )
                   ] })
                 }
               ) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { children: [
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
                 formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
                 "\xA0",
                 invoice.paymentCurrency.symbol
               ] }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
-              !action && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) }),
+              !action && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  flex: 2,
+                  className: "invoice-description",
+                  textAlign: "right",
+                  sx: { display: { xs: "none", lg: "inline-flex" } },
+                  children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id })
+                }
+              ),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? connect ? /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -403,7 +453,7 @@ const InvoiceList = React.memo((props) => {
                   rel: "noreferrer",
                   children: t("payment.customer.invoice.pay")
                 }
-              ) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
+              ) : isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
             ]
           },
           invoice.id
@@ -468,13 +518,11 @@ CustomerInvoiceList.defaultProps = {
   action: "",
   type: "list",
   onTableDataChange: () => {
-  }
+  },
+  relatedSubscription: false
 };
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    .invoice-description {
-      display: none !important;
-    }
     svg.MuiSvgIcon-root {
       display: none !important;
     }

package/es/locales/en.js

@@ -93,7 +93,8 @@ export default flat({
     saveAsDefaultPriceSuccess: "Set default price successfully",
     stakeAmount: "Stake Amount",
     slashStakeAmount: "Slash Stake Amount",
-    know: "I know"
+    know: "I know",
+    relatedSubscription: "Subscription"
   },
   payment: {
     checkout: {
@@ -237,12 +238,13 @@ export default flat({
       pastDue: {
         button: "Pay",
         invoices: "Past Due Invoices",
-        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.",
         alert: {
           title: "You have unpaid invoices",
           description: "Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.",
           confirm: "Pay Now"
-        }
+        },
+        view: "View Due Invoices"
       },
       recover: {
         button: "Resume Subscription",
@@ -291,7 +293,8 @@ export default flat({
         empty: "There are no invoices",
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
-        emptyList: "No Invoice"
+        emptyList: "No Invoice",
+        noPaymentRequired: "No Payment Required"
       },
       payment: {
         empty: "There are no payments",
@@ -312,6 +315,11 @@ export default flat({
         changePayment: "Change payment method",
         trialLeft: "Trail Left",
         owner: "Subscription Owner"
+      },
+      overdue: {
+        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. Please pay immediately to avoid service disruption.",
+        simpleTitle: "You have {count} due invoices. Please pay now to ensure uninterrupted service.",
+        empty: "Great! You have no due invoices."
       }
     },
     invoice: {
@@ -342,16 +350,18 @@ export default flat({
     subscription: {
       overdue: {
         simpleTitle: "There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.",
-        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.",
+        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}{method}, you need to pay them to activate your subscription or before making new purchases.",
         payNow: "Pay Now",
         notSupport: "This payment method is not supported",
-        total: "Total {total} {currency}",
+        total: "Total {total} {currency}{method}",
         view: "View Subscription Details",
         viewNow: "View Now",
         pastDue: "Past Due Invoices",
         description: "If you have any questions, you can choose ",
         list: "Past Due Invoices:",
-        empty: "There are no overdue invoices for your subscription {name}."
+        empty: "There are no overdue invoices for your subscription {name}.",
+        retry: "Retry",
+        paid: "Paid"
       }
     }
   },

package/es/locales/zh.js

@@ -93,7 +93,8 @@ export default flat({
     saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
     slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
-    know: "\u6211\u77E5\u9053\u4E86"
+    know: "\u6211\u77E5\u9053\u4E86",
+    relatedSubscription: "\u8BA2\u9605"
   },
   payment: {
     checkout: {
@@ -237,12 +238,13 @@ export default flat({
       pastDue: {
         button: "\u7EED\u8D39",
         invoices: "\u6B20\u8D39\u5E10\u5355",
-        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1\uFF0C\u8BF7\u9010\u4E2A\u6253\u5F00\u8D26\u5355\u8BE6\u60C5\u5E76\u5B8C\u6210\u652F\u4ED8",
+        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1\u3002",
         alert: {
           title: "\u4F60\u6709\u6B20\u8D39\u8D26\u5355",
           description: "\u770B\u8D77\u6765\u4F60\u6709\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u5728\u4F60\u652F\u4ED8\u6240\u6709\u6B20\u8D39\u8D26\u5355\u4E4B\u524D\uFF0C\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\uFF0C\u8BF7\u4E0D\u8981\u8C03\u76AE\u3002",
           confirm: "\u53BB\u652F\u4ED8"
-        }
+        },
+        view: "\u67E5\u770B\u6B20\u8D39\u660E\u7EC6"
       },
       recover: {
         button: "\u6062\u590D\u8BA2\u9605",
@@ -291,7 +293,8 @@ export default flat({
         empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
         next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
-        emptyList: "\u6CA1\u6709\u8D26\u5355"
+        emptyList: "\u6CA1\u6709\u8D26\u5355",
+        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
@@ -312,6 +315,11 @@ export default flat({
         changePayment: "\u5207\u6362\u652F\u4ED8\u65B9\u5F0F",
         trialLeft: "\u5269\u4F59\u8BD5\u7528\u65F6\u957F",
         owner: "\u8BA2\u9605\u62E5\u6709\u8005"
+      },
+      overdue: {
+        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}{method}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002"
       }
     },
     invoice: {
@@ -341,17 +349,19 @@ export default flat({
     },
     subscription: {
       overdue: {
-        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}{method}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
         simpleTitle: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
         payNow: "\u7ACB\u5373\u652F\u4ED8",
         notSupport: "\u6682\u4E0D\u652F\u6301\u8BE5\u652F\u4ED8\u65B9\u5F0F",
-        total: "\u603B\u8BA1 {total} {currency}",
+        total: "\u603B\u8BA1 {total} {currency}{method}",
         view: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
         pastDue: "\u6B20\u8D39\u8D26\u5355",
         viewNow: "\u7ACB\u5373\u67E5\u770B",
         description: "\u5982\u679C\u60A8\u6709\u4EFB\u4F55\u7591\u95EE\uFF0C\u53EF\u4EE5\u9009\u62E9 ",
         list: "\u6B20\u8D39\u8D26\u5355\uFF1A",
-        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355"
+        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355",
+        retry: "\u91CD\u65B0\u652F\u4ED8",
+        paid: "\u5DF2\u652F\u4ED8"
       }
     }
   },

package/es/payment/donation-form.js

@@ -319,7 +319,8 @@ function PaymentInner({
                   onError,
                   mode,
                   action,
-                  onlyShowBtn: true
+                  onlyShowBtn: true,
+                  isDonation: true
                 }
               )
             ]

package/es/payment/form/address.js

@@ -11,74 +11,72 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   if (mode === "required") {
-    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
-      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
-        /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.postal_code",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.postal_code"),
-            InputProps: {
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
-                Controller,
-                {
-                  name: "billing_address.country",
-                  control,
-                  render: ({ field }) => /* @__PURE__ */ jsx(
-                    CountrySelect,
-                    {
-                      ...field,
-                      sx: {
-                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "transparent"
-                        }
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.line1",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.line1")
+        }
+      ),
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.city") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.city",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.city")
+        }
+      ),
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.state",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.state")
+        }
+      ),
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.postal_code",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.postal_code"),
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                name: "billing_address.country",
+                control,
+                render: ({ field }) => /* @__PURE__ */ jsx(
+                  CountrySelect,
+                  {
+                    ...field,
+                    sx: {
+                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent"
                       }
                     }
-                  )
-                }
-              ) })
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.state",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.state")
-          }
-        ),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.line1",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.line1")
-          }
-        ),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.city") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.city",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.city")
+                  }
+                )
+              }
+            ) })
           }
-        )
-      ] })
-    ] }) });
+        }
+      )
+    ] }) }) });
   }
   if (stripe) {
     return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [

package/es/payment/form/index.d.ts

@@ -4,11 +4,13 @@ export declare const waitForCheckoutComplete: (sessionId: string) => Promise<Che
 export declare const hasDidWallet: (user: any) => any;
 type PageData = CheckoutContext & CheckoutCallbacks & {
     onlyShowBtn?: boolean;
+    isDonation?: boolean;
 };
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, currencyId, onlyShowBtn, isDonation, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {
         onlyShowBtn: boolean;
+        isDonation: boolean;
     };
 }
 export default PaymentForm;

package/es/payment/form/index.js

@@ -54,7 +54,8 @@ export const hasDidWallet = (user) => {
   return connected.some((x) => x.provider === "wallet");
 };
 PaymentForm.defaultProps = {
-  onlyShowBtn: false
+  onlyShowBtn: false,
+  isDonation: false
 };
 export default function PaymentForm({
   checkoutSession,
@@ -67,7 +68,8 @@ export default function PaymentForm({
   // mode,
   action,
   currencyId,
-  onlyShowBtn
+  onlyShowBtn,
+  isDonation = false
 }) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
@@ -170,8 +172,9 @@ export default function PaymentForm({
   } else {
     buttonText = t(`payment.checkout.${checkoutSession.mode}`);
   }
-  buttonText = session?.user ? buttonText : t("payment.checkout.connect", { action: buttonText });
+  buttonText = session?.user || isDonation ? buttonText : t("payment.checkout.connect", { action: buttonText });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
+  const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
   const showForm = session?.user;
   const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
@@ -228,7 +231,12 @@ export default function PaymentForm({
   const onFormSubmit = async (data) => {
     setState({ submitting: true });
     try {
-      const result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      let result;
+      if (isDonationMode) {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+      } else {
+        result = await api.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      }
       setState({
         paymentIntent: result.data.paymentIntent,
         stripeContext: result.data.stripeContext,
@@ -238,7 +246,7 @@ export default function PaymentForm({
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
         setState({ paying: true });
-        if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
+        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode) {
           await handleConnected();
         } else {
           connect.open({
@@ -314,6 +322,10 @@ export default function PaymentForm({
         });
       }
     } else {
+      if (isDonationMode) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn().then(afterUserLoggedIn).catch((err) => {

package/lib/checkout/donate.js

@@ -11,7 +11,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _unionBy = _interopRequireDefault(require("lodash/unionBy"));
+var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
 var _react = require("react");
 var _iconsMaterial = require("@mui/icons-material");
 var _api = _interopRequireDefault(require("../libs/api"));
@@ -104,7 +104,7 @@ function DonateDetails({
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
           src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 20),
-          alt: x.customer?.name,
+          alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
           variant: "circular",
           sx: {
             width: 20,
@@ -112,6 +112,9 @@ function DonateDetails({
           },
           onClick: e => {
             e.stopPropagation();
+            if (x.customer?.metadata?.anonymous) {
+              return;
+            }
             if (x.customer?.did) {
               window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
             }
@@ -126,6 +129,9 @@ function DonateDetails({
             textOverflow: "ellipsis"
           },
           onClick: e => {
+            if (x.customer?.metadata?.anonymous) {
+              return;
+            }
             e.stopPropagation();
             if (x.customer?.did) {
               window.open((0, _util.getUserProfileLink)(x.customer?.did, locale), "_blank");
@@ -172,7 +178,7 @@ function SupporterAvatar({
   showDonateDetails = false
 }) {
   const [open, setOpen] = (0, _react.useState)(false);
-  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -183,12 +189,15 @@ function SupporterAvatar({
       max: 5,
       sx: {
         "& .MuiAvatar-root": {
-          backgroundColor: "background.paper"
+          backgroundColor: "background.paper",
+          "&.MuiAvatar-colorDefault": {
+            backgroundColor: "#bdbdbd"
+          }
         }
       },
       children: customers.slice(0, 5).map(supporter => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         src: (0, _util.getCustomerAvatar)(supporter.customer?.did, supporter?.updated_at ? new Date(supporter.updated_at).toISOString() : "", 24),
-        alt: supporter.customer?.name,
+        alt: supporter.customer?.metadata?.anonymous ? "" : supporter.customer?.name,
         sx: {
           width: "24px",
           height: "24px"
@@ -238,7 +247,7 @@ function SupporterTable({
   currency,
   method
 }) {
-  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   if (customersNum === 0) return null;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -271,7 +280,7 @@ function SupporterSimple({
   const {
     t
   } = (0, _context.useLocaleContext)();
-  const customers = (0, _unionBy.default)(supporters, "customer_did");
+  const customers = (0, _uniqBy.default)(supporters, "customer_id");
   const customersNum = customers.length;
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     display: "flex",
@@ -297,7 +306,7 @@ function SupporterSimple({
       max: 10,
       children: customers.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
         title: x.customer?.name,
-        alt: x.customer?.name,
+        alt: x.customer?.metadata?.anonymous ? "" : x.customer?.name,
         src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 48),
         variant: "circular",
         sx: {
@@ -410,7 +419,7 @@ function CheckoutDonateInner({
     donateSettings,
     supportUpdateSettings
   } = useDonation(settings, livemode, mode);
-  const customers = (0, _unionBy.default)(supporters?.data?.supporters || [], "customer_did");
+  const customers = (0, _uniqBy.default)(supporters?.data?.supporters || [], "customer_did");
   const {
     t
   } = (0, _context.useLocaleContext)();