@blocklet/payment-react 1.18.15 → 1.18.17

package/lib/history/invoice/list.js

@@ -73,7 +73,8 @@ const InvoiceTable = _react.default.memo(props => {
     include_staking,
     include_return_staking,
     include_recovered_from,
-    onTableDataChange
+    onTableDataChange,
+    relatedSubscription
   } = props;
   const listKey = "invoice-table";
   const {
@@ -141,6 +142,11 @@ const InvoiceTable = _react.default.memo(props => {
       target: link.external ? "_blank" : target
     });
   };
+  const handleRelatedSubscriptionClick = (e, invoice) => {
+    if (invoice.subscription_id) {
+      (0, _navigation.handleNavigation)(e, (0, _navigation.createLink)(`/customer/subscription/${invoice.subscription_id}`), navigate);
+    }
+  };
   const columns = [{
     label: t("common.amount"),
     name: "total",
@@ -149,10 +155,14 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (_, index) => {
         const invoice = data?.list[index];
+        const isVoid = invoice.status === "void";
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            sx: isVoid ? {
+              textDecoration: "line-through"
+            } : {},
             children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
           })
         });
@@ -186,7 +196,30 @@ const InvoiceTable = _react.default.memo(props => {
         });
       }
     }
-  }, {
+  }, ...(relatedSubscription ? [{
+    label: t("common.relatedSubscription"),
+    name: "subscription",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const invoice = data?.list[index];
+        return invoice.subscription_id ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleRelatedSubscriptionClick(e, invoice),
+          sx: {
+            color: "text.link",
+            cursor: "pointer"
+          },
+          children: invoice.subscription?.description
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: {
+            ...linkStyle,
+            color: "text.lighter"
+          },
+          children: t("common.none")
+        });
+      }
+    }
+  }] : []), {
     label: t("common.updatedAt"),
     name: "name",
     options: {
@@ -195,7 +228,7 @@ const InvoiceTable = _react.default.memo(props => {
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
-          children: (0, _util.formatToDate)(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss")
+          children: (0, _util.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
         });
       }
     }
@@ -223,6 +256,7 @@ const InvoiceTable = _react.default.memo(props => {
         const {
           connect
         } = getInvoiceLink(invoice, action);
+        const isVoid = invoice.status === "void";
         if (action && !hidePay) {
           return connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             variant: "text",
@@ -247,7 +281,17 @@ const InvoiceTable = _react.default.memo(props => {
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleLinkClick(e, invoice),
           sx: linkStyle,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+          children: isVoid ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("payment.customer.invoice.noPaymentRequired"),
+            arrow: true,
+            placement: "top",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+                label: invoice.status,
+                color: (0, _util.getInvoiceStatusColor)(invoice.status)
+              })
+            })
+          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: invoice.status,
             color: (0, _util.getInvoiceStatusColor)(invoice.status)
           })
@@ -432,6 +476,7 @@ const InvoiceList = _react.default.memo(props => {
           link,
           connect
         } = getInvoiceLink(invoice, action);
+        const isVoid = invoice.status === "void";
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {
@@ -458,14 +503,15 @@ const InvoiceList = _react.default.memo(props => {
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   component: "span",
                   children: invoice.number
-                }), link.external && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-                  mdDown: true,
-                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
-                    fontSize: "small",
-                    sx: {
-                      color: "text.secondary"
+                }), link.external && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
+                  fontSize: "small",
+                  sx: {
+                    color: "text.secondary",
+                    display: {
+                      xs: "none",
+                      md: "inline-flex"
                     }
-                  })
+                  }
                 })]
               })
             })
@@ -473,6 +519,9 @@ const InvoiceList = _react.default.memo(props => {
             flex: 1,
             textAlign: "right",
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              sx: isVoid ? {
+                textDecoration: "line-through"
+              } : {},
               children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
@@ -481,15 +530,18 @@ const InvoiceList = _react.default.memo(props => {
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               children: (0, _util.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
             })
-          }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
-            mdDown: true,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-              flex: 2,
-              className: "invoice-description",
-              textAlign: "right",
-              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                children: invoice.description || invoice.id
-              })
+          }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 2,
+            className: "invoice-description",
+            textAlign: "right",
+            sx: {
+              display: {
+                xs: "none",
+                lg: "inline-flex"
+              }
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: invoice.description || invoice.id
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
@@ -513,6 +565,16 @@ const InvoiceList = _react.default.memo(props => {
               },
               rel: "noreferrer",
               children: t("payment.customer.invoice.pay")
+            }) : isVoid ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: t("payment.customer.invoice.noPaymentRequired"),
+              arrow: true,
+              placement: "top",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+                  label: invoice.status,
+                  color: (0, _util.getInvoiceStatusColor)(invoice.status)
+                })
+              })
             }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
               label: invoice.status,
               color: (0, _util.getInvoiceStatusColor)(invoice.status)
@@ -618,15 +680,13 @@ CustomerInvoiceList.defaultProps = {
   target: "_self",
   action: "",
   type: "list",
-  onTableDataChange: () => {}
+  onTableDataChange: () => {},
+  relatedSubscription: false
 };
 const Root = (0, _system.styled)(_material.Stack)`
   @media (max-width: ${({
   theme
 }) => theme.breakpoints.values.md}px) {
-    .invoice-description {
-      display: none !important;
-    }
     svg.MuiSvgIcon-root {
       display: none !important;
     }

package/lib/locales/en.js

@@ -100,7 +100,8 @@ module.exports = (0, _flat.default)({
     saveAsDefaultPriceSuccess: "Set default price successfully",
     stakeAmount: "Stake Amount",
     slashStakeAmount: "Slash Stake Amount",
-    know: "I know"
+    know: "I know",
+    relatedSubscription: "Subscription"
   },
   payment: {
     checkout: {
@@ -244,12 +245,13 @@ module.exports = (0, _flat.default)({
       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",
@@ -298,7 +300,8 @@ module.exports = (0, _flat.default)({
         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",
@@ -319,6 +322,11 @@ module.exports = (0, _flat.default)({
         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: {
@@ -349,16 +357,18 @@ module.exports = (0, _flat.default)({
     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/lib/locales/zh.js

@@ -100,7 +100,8 @@ module.exports = (0, _flat.default)({
     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: {
@@ -244,12 +245,13 @@ module.exports = (0, _flat.default)({
       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",
@@ -298,7 +300,8 @@ module.exports = (0, _flat.default)({
         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",
@@ -319,6 +322,11 @@ module.exports = (0, _flat.default)({
         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: {
@@ -348,17 +356,19 @@ module.exports = (0, _flat.default)({
     },
     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/lib/payment/donation-form.js

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

package/lib/payment/form/address.js

@@ -28,86 +28,82 @@ function AddressForm({
   if (mode === "required") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
       in: true,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         className: "cko-payment-address cko-payment-form",
         sx,
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
-          className: "base-label",
-          children: t(`payment.checkout.billing.${mode}`)
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-            direction: "row",
-            spacing: 0,
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-              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__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-                  position: "start",
-                  style: {
-                    marginRight: "2px",
-                    marginLeft: "-8px"
-                  },
-                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-                    name: "billing_address.country",
-                    control,
-                    render: ({
-                      field
-                    }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
-                      ...field,
-                      sx: {
-                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "transparent"
-                        }
-                      }
-                    })
-                  })
-                })
-              }
-            })
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            className: "base-label",
+            children: t("payment.checkout.billing.line1")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            name: "billing_address.line1",
+            rules: {
+              required: t("payment.checkout.required")
+            },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
-            children: t("payment.checkout.billing.state")
+            children: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-            name: "billing_address.state",
+            name: "billing_address.city",
             rules: {
               required: t("payment.checkout.required")
             },
             errorPosition: "right",
             variant: "outlined",
-            placeholder: t("payment.checkout.billing.state")
+            placeholder: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
-            children: t("payment.checkout.billing.line1")
+            children: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-            name: "billing_address.line1",
+            name: "billing_address.state",
             rules: {
               required: t("payment.checkout.required")
             },
             errorPosition: "right",
             variant: "outlined",
-            placeholder: t("payment.checkout.billing.line1")
+            placeholder: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
             className: "base-label",
-            children: t("payment.checkout.billing.city")
+            children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
-            name: "billing_address.city",
+            name: "billing_address.postal_code",
             rules: {
               required: t("payment.checkout.required")
             },
             errorPosition: "right",
             variant: "outlined",
-            placeholder: t("payment.checkout.billing.city")
+            placeholder: t("payment.checkout.billing.postal_code"),
+            InputProps: {
+              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                position: "start",
+                style: {
+                  marginRight: "2px",
+                  marginLeft: "-8px"
+                },
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+                  name: "billing_address.country",
+                  control,
+                  render: ({
+                    field
+                  }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
+                    ...field,
+                    sx: {
+                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent"
+                      }
+                    }
+                  })
+                })
+              })
+            }
           })]
-        })]
+        })
       })
     });
   }

package/lib/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/lib/payment/form/index.js

@@ -59,7 +59,8 @@ const hasDidWallet = user => {
 };
 exports.hasDidWallet = hasDidWallet;
 PaymentForm.defaultProps = {
-  onlyShowBtn: false
+  onlyShowBtn: false,
+  isDonation: false
 };
 function PaymentForm({
   checkoutSession,
@@ -72,7 +73,8 @@ function PaymentForm({
   // mode,
   action,
   currencyId,
-  onlyShowBtn
+  onlyShowBtn,
+  isDonation = false
 }) {
   const {
     t
@@ -192,10 +194,11 @@ function PaymentForm({
   } else {
     buttonText = t(`payment.checkout.${checkoutSession.mode}`);
   }
-  buttonText = session?.user ? buttonText : t("payment.checkout.connect", {
+  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 () => {
@@ -263,7 +266,12 @@ function PaymentForm({
       submitting: true
     });
     try {
-      const result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      let result;
+      if (isDonationMode) {
+        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/donate-submit`, data);
+      } else {
+        result = await _api.default.put(`/api/checkout-sessions/${checkoutSession.id}/submit`, data);
+      }
       setState({
         paymentIntent: result.data.paymentIntent,
         stripeContext: result.data.stripeContext,
@@ -275,7 +283,7 @@ function PaymentForm({
         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({
@@ -372,6 +380,10 @@ function PaymentForm({
         });
       }
     } else {
+      if (isDonationMode) {
+        handleSubmit(onFormSubmit, onFormError)();
+        return;
+      }
       session?.login(() => {
         setState({
           submitting: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.15",
+  "version": "1.18.17",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -18,7 +18,8 @@
   "scripts": {
     "lint": "tsc --noEmit && eslint src tests --ext js --ext jsx --ext ts --ext tsx",
     "lint:fix": "pnpm run lint --fix",
-    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js && pnpm run cpfiles",
+    "clean": "rm -rf es lib",
+    "build": "pnpm run clean && tsc --noEmit && unbuild && node tools/auto-exports.js && pnpm run cpfiles",
     "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
     "precommit": "CI=1 pnpm run lint",
     "prepush": "CI=1 pnpm run lint",
@@ -53,10 +54,10 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.12.12",
-    "@arcblock/ux": "^2.12.12",
+    "@arcblock/did-connect": "^2.12.25",
+    "@arcblock/ux": "^2.12.25",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/ui-react": "^2.12.12",
+    "@blocklet/ui-react": "^2.12.25",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -92,7 +93,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.15",
+    "@blocklet/payment-types": "1.18.17",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +124,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "fd58f00bb5d9c625439c03577d9b5f33676823e2"
+  "gitHead": "9d43381dd3744506455547260f5e621c6ad88e8f"
 }