@blocklet/payment-react 1.13.235 → 1.13.237

package/es/checkout/donate.d.ts

@@ -11,7 +11,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
 };
-declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element;
+declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;

package/es/checkout/donate.js

@@ -7,7 +7,6 @@ import {
   AvatarGroup,
   Box,
   Button,
-  CircularProgress,
   Hidden,
   Stack,
   Table,
@@ -147,7 +146,7 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError })
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(donation.error) });
   }
   if (donation.loading || !donation.data) {
-    return /* @__PURE__ */ jsx(CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */ jsxs(
     Box,

package/es/contexts/payment.d.ts

@@ -24,7 +24,7 @@ declare function PaymentProvider({ children, session, connect }: {
     children: any;
     session: any;
     connect: any;
-}): JSX.Element;
+}): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/es/contexts/payment.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Alert, CircularProgress } from "@mui/material";
+import { Alert } from "@mui/material";
 import { useLocalStorageState, useRequest } from "ahooks";
 import { createContext, useContext } from "react";
 import api from "../api.js";
@@ -22,7 +22,7 @@ function PaymentProvider({ children, session, connect }) {
     return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */ jsx(
     Provider,

package/es/history/invoice/list.js

@@ -54,7 +54,7 @@ export default function CustomerInvoiceList({
   target,
   action
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const size = pageSize || 10;
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
     (d) => {
@@ -100,20 +100,33 @@ export default function CustomerInvoiceList({
               sm: 1.5,
               md: 3
             },
+            alignItems: "center",
             flexWrap: "nowrap",
             children: [
               /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", 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" } }) })
               ] }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, "en", "HH:mm:ss") }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { children: [
                 formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
                 "\xA0",
                 invoice.paymentCurrency.symbol
               ] }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }),
-              /* @__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 }) }) })
+              /* @__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 }) }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  component: "a",
+                  variant: "contained",
+                  color: "primary",
+                  size: "small",
+                  href: link.url,
+                  target: link.external ? "_blank" : target,
+                  rel: "noreferrer",
+                  children: t("payment.customer.invoice.pay")
+                }
+              ) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
             ]
           },
           invoice.id
@@ -145,4 +158,8 @@ const Root = styled(Stack)`
       display: none !important;
     }
   }
+
+  a.MuiButton-root {
+    text-decoration: none !important;
+  }
 `;

package/es/history/mini-invoice/list.js

@@ -19,10 +19,10 @@ import api from "../../api.js";
 import Status from "../../components/status.js";
 import {
   formatBNStr,
-  formatDateTime,
   formatError,
   formatSubscriptionProduct,
   formatTime,
+  formatToDate,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor
@@ -118,14 +118,13 @@ export default function MiniInvoiceList() {
             /* @__PURE__ */ jsx(ListSubheader, { disableGutters: true, sx: { padding: 0 }, children: /* @__PURE__ */ jsx(Typography, { component: "h2", variant: "h6", fontSize: "16px", children: t("payment.customer.invoices") }) }),
             invoices.length === 0 ? /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.invoice.empty") }) : invoices.map((item) => {
               return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, sx: { display: "flex", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: formatDateTime(item.created_at, locale) }),
+                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: formatToDate(item.created_at, locale, "YYYY-MM-DD") }),
                 /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { flex: 1, textAlign: "right" }, children: [
                   formatBNStr(item.total, item.paymentCurrency.decimal),
                   "\xA0",
                   item.paymentCurrency.symbol
                 ] }),
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) }) }),
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: /* @__PURE__ */ jsx(Typography, { children: item.description || item.id }) })
+                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 2, textAlign: "right" }, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) }) })
               ] }, item.id);
             })
           ] }) }),

package/es/locales/en.js

@@ -197,7 +197,7 @@ 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.",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.",
         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.",

package/es/locales/zh.js

@@ -197,7 +197,7 @@ 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",
+        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",
         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",

package/es/payment/form/index.js

@@ -39,6 +39,10 @@ const waitForCheckoutComplete = async (sessionId) => {
   );
   return result;
 };
+const hasDidWallet = (user) => {
+  const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+  return connected.some((x) => x.provider === "wallet");
+};
 PaymentForm.defaultProps = {};
 export default function PaymentForm({
   checkoutSession,
@@ -213,19 +217,38 @@ export default function PaymentForm({
       setState({ submitting: false });
     }
   };
-  const onFormError = () => {
+  const onFormError = (err) => {
+    if (err) {
+      console.error(err);
+    }
     setState({ submitting: false });
   };
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onFormSubmit, onFormError)();
+      if (hasDidWallet(session.user)) {
+        handleSubmit(onFormSubmit, onFormError)();
+      } else {
+        session.bindWallet(() => {
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 2e3);
+        });
+      }
     } else {
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn().then(() => {
-          setTimeout(() => {
-            handleSubmit(onFormSubmit, onFormError)();
-          }, 50);
+          if (hasDidWallet(session.user)) {
+            setTimeout(() => {
+              handleSubmit(onFormSubmit, onFormError)();
+            }, 80);
+          } else {
+            session.bindWallet(() => {
+              setTimeout(() => {
+                handleSubmit(onFormSubmit, onFormError)();
+              }, 2e3);
+            });
+          }
         }).catch((err) => {
           console.error(err);
           setState({ submitting: false });

package/lib/checkout/donate.d.ts

@@ -11,7 +11,7 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
 };
-declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element;
+declare function CheckoutDonate({ settings, livemode, onPaid, onError }: DonateProps): import("react").JSX.Element | null;
 declare namespace CheckoutDonate {
     var defaultProps: {
         livemode: boolean;

package/lib/checkout/donate.js

@@ -225,7 +225,7 @@ function CheckoutDonate({
     });
   }
   if (donation.loading || !donation.data) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {

package/lib/contexts/payment.d.ts

@@ -24,7 +24,7 @@ declare function PaymentProvider({ children, session, connect }: {
     children: any;
     session: any;
     connect: any;
-}): JSX.Element;
+}): import("react").JSX.Element | null;
 declare namespace PaymentProvider {
     var defaultProps: {};
 }

package/lib/contexts/payment.js

@@ -54,7 +54,7 @@ function PaymentProvider({
     });
   }
   if (loading) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+    return null;
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Provider, {
     value: {

package/lib/history/invoice/list.js

@@ -58,7 +58,8 @@ function CustomerInvoiceList({
   action
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const size = pageSize || 10;
   const {
@@ -133,6 +134,7 @@ function CustomerInvoiceList({
             sm: 1.5,
             md: 3
           },
+          alignItems: "center",
           flexWrap: "nowrap",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 2,
@@ -158,12 +160,6 @@ function CustomerInvoiceList({
                 })]
               })
             })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 1,
-            textAlign: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: (0, _util.formatToDate)(invoice.created_at, "en", "HH:mm:ss")
-            })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
             textAlign: "right",
@@ -173,11 +169,10 @@ function CustomerInvoiceList({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
             textAlign: "right",
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-              label: invoice.status,
-              color: (0, _util.getInvoiceStatusColor)(invoice.status)
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: (0, _util.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
             })
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
+          }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Hidden, {
             mdDown: true,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               flex: 2,
@@ -187,6 +182,22 @@ function CustomerInvoiceList({
                 children: invoice.description || invoice.id
               })
             })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 1,
+            textAlign: "right",
+            children: action ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              component: "a",
+              variant: "contained",
+              color: "primary",
+              size: "small",
+              href: link.url,
+              target: link.external ? "_blank" : target,
+              rel: "noreferrer",
+              children: t("payment.customer.invoice.pay")
+            }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+              label: invoice.status,
+              color: (0, _util.getInvoiceStatusColor)(invoice.status)
+            })
           })]
         }, invoice.id);
       })]
@@ -230,4 +241,8 @@ const Root = (0, _system.styled)(_material.Stack)`
       display: none !important;
     }
   }
+
+  a.MuiButton-root {
+    text-decoration: none !important;
+  }
 `;

package/lib/history/mini-invoice/list.js

@@ -176,7 +176,7 @@ function MiniInvoiceList() {
                 sx: {
                   flex: 3
                 },
-                children: (0, _util.formatDateTime)(item.created_at, locale)
+                children: (0, _util.formatToDate)(item.created_at, locale, "YYYY-MM-DD")
               }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                 component: "span",
                 sx: {
@@ -188,20 +188,12 @@ function MiniInvoiceList() {
                 component: "span",
                 sx: {
                   flex: 2,
-                  textAlign: "center"
+                  textAlign: "right"
                 },
                 children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
                   label: item.status,
                   color: (0, _util.getInvoiceStatusColor)(item.status)
                 })
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                sx: {
-                  flex: 3
-                },
-                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  children: item.description || item.id
-                })
               })]
             }, item.id);
           })]

package/lib/locales/en.js

@@ -204,7 +204,7 @@ 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.",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.",
         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.",

package/lib/locales/zh.js

@@ -204,7 +204,7 @@ 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",
+        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",
         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",

package/lib/payment/form/index.js

@@ -48,6 +48,10 @@ const waitForCheckoutComplete = async sessionId => {
   });
   return result;
 };
+const hasDidWallet = user => {
+  const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+  return connected.some(x => x.provider === "wallet");
+};
 PaymentForm.defaultProps = {};
 function PaymentForm({
   checkoutSession,
@@ -264,23 +268,42 @@ function PaymentForm({
       });
     }
   };
-  const onFormError = () => {
+  const onFormError = err => {
+    if (err) {
+      console.error(err);
+    }
     setState({
       submitting: false
     });
   };
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onFormSubmit, onFormError)();
+      if (hasDidWallet(session.user)) {
+        handleSubmit(onFormSubmit, onFormError)();
+      } else {
+        session.bindWallet(() => {
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 2e3);
+        });
+      }
     } else {
       session?.login(() => {
         setState({
           submitting: true
         });
         onUserLoggedIn().then(() => {
-          setTimeout(() => {
-            handleSubmit(onFormSubmit, onFormError)();
-          }, 50);
+          if (hasDidWallet(session.user)) {
+            setTimeout(() => {
+              handleSubmit(onFormSubmit, onFormError)();
+            }, 80);
+          } else {
+            session.bindWallet(() => {
+              setTimeout(() => {
+                handleSubmit(onFormSubmit, onFormError)();
+              }, 2e3);
+            });
+          }
         }).catch(err => {
           console.error(err);
           setState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.235",
+  "version": "1.13.237",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -52,8 +52,8 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.71",
-    "@arcblock/ux": "^2.9.71",
+    "@arcblock/did-connect": "^2.9.75",
+    "@arcblock/ux": "^2.9.75",
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.15",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.235",
+    "@blocklet/payment-types": "1.13.237",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "0ce69f4fb2a09658835deab572b1f860f305b195"
+  "gitHead": "895430a130d53b62707f4f78c5295b06ce55d4db"
 }

package/src/checkout/donate.tsx

@@ -14,7 +14,6 @@ import {
   AvatarGroup,
   Box,
   Button,
-  CircularProgress,
   Hidden,
   Stack,
   Table,
@@ -206,7 +205,7 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError }:
   }
 
   if (donation.loading || !donation.data) {
-    return <CircularProgress />;
+    return null;
   }
 
   return (

package/src/contexts/payment.tsx

@@ -1,5 +1,5 @@
 import type { TPaymentCurrency, TPaymentMethodExpanded } from '@blocklet/payment-types';
-import { Alert, CircularProgress } from '@mui/material';
+import { Alert } from '@mui/material';
 import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
 import { createContext, useContext } from 'react';
@@ -41,7 +41,7 @@ const getCurrency = (currencyId: string, methods: TPaymentMethodExpanded[]) => {
 };
 
 // eslint-disable-next-line react/prop-types
-function PaymentProvider({ children, session, connect }: { children: any; session: any; connect: any }): JSX.Element {
+function PaymentProvider({ children, session, connect }: { children: any; session: any; connect: any }) {
   const { data, error, run, loading } = useRequest(getSettings);
   const [livemode, setLivemode] = useLocalStorageState('livemode', { defaultValue: true });
 
@@ -50,7 +50,7 @@ function PaymentProvider({ children, session, connect }: { children: any; sessio
   }
 
   if (loading) {
-    return <CircularProgress />;
+    return null;
   }
 
   return (

package/src/history/invoice/list.tsx

@@ -74,7 +74,7 @@ export default function CustomerInvoiceList({
   target,
   action,
 }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const size = pageSize || 10;
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Result>(
@@ -137,6 +137,7 @@ export default function CustomerInvoiceList({
                   sm: 1.5,
                   md: 3,
                 }}
+                alignItems="center"
                 flexWrap="nowrap">
                 <Box flex={2}>
                   <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
@@ -150,9 +151,6 @@ export default function CustomerInvoiceList({
                     </Stack>
                   </a>
                 </Box>
-                <Box flex={1} textAlign="right">
-                  <Typography>{formatToDate(invoice.created_at, 'en', 'HH:mm:ss')}</Typography>
-                </Box>
                 <Box flex={1} textAlign="right">
                   <Typography>
                     {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
@@ -160,13 +158,31 @@ export default function CustomerInvoiceList({
                   </Typography>
                 </Box>
                 <Box flex={1} textAlign="right">
-                  <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+                  <Typography>{formatToDate(invoice.created_at, locale, 'HH:mm:ss')}</Typography>
+                </Box>
+                {!action && (
+                  <Hidden mdDown>
+                    <Box flex={2} className="invoice-description" textAlign="right">
+                      <Typography>{invoice.description || invoice.id}</Typography>
+                    </Box>
+                  </Hidden>
+                )}
+                <Box flex={1} textAlign="right">
+                  {action ? (
+                    <Button
+                      component="a"
+                      variant="contained"
+                      color="primary"
+                      size="small"
+                      href={link.url}
+                      target={link.external ? '_blank' : target}
+                      rel="noreferrer">
+                      {t('payment.customer.invoice.pay')}
+                    </Button>
+                  ) : (
+                    <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+                  )}
                 </Box>
-                <Hidden mdDown>
-                  <Box flex={2} className="invoice-description" textAlign="right">
-                    <Typography>{invoice.description || invoice.id}</Typography>
-                  </Box>
-                </Hidden>
               </Stack>
             );
           })}
@@ -210,4 +226,8 @@ const Root = styled(Stack)`
       display: none !important;
     }
   }
+
+  a.MuiButton-root {
+    text-decoration: none !important;
+  }
 `;

package/src/history/mini-invoice/list.tsx

@@ -21,10 +21,10 @@ import api from '../../api';
 import Status from '../../components/status';
 import {
   formatBNStr,
-  formatDateTime,
   formatError,
   formatSubscriptionProduct,
   formatTime,
+  formatToDate,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor,
@@ -158,18 +158,15 @@ export default function MiniInvoiceList() {
                 return (
                   <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
                     <Typography component="span" sx={{ flex: 3 }}>
-                      {formatDateTime(item.created_at, locale)}
+                      {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
                     </Typography>
                     <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                       {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
                       {item.paymentCurrency.symbol}
                     </Typography>
-                    <Typography component="span" sx={{ flex: 2, textAlign: 'center' }}>
+                    <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
                       <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
                     </Typography>
-                    <Typography component="span" sx={{ flex: 3 }}>
-                      <Typography>{item.description || item.id}</Typography>
-                    </Typography>
                   </ListItem>
                 );
               })

package/src/locales/en.tsx

@@ -203,7 +203,8 @@ 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.',
+        warning:
+          'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.',
         alert: {
           title: 'You have unpaid invoices',
           description:

package/src/locales/zh.tsx

@@ -199,7 +199,7 @@ export default flat({
       pastDue: {
         button: '续费',
         invoices: '欠费帐单',
-        warning: '请尽快支付欠费账单，否则你将无法继续使用服务或购买新服务',
+        warning: '请尽快支付欠费账单，否则你将无法继续使用服务或购买新服务，请逐个打开账单详情并完成支付',
         alert: {
           title: '你有欠费账单',
           description: '看起来你有欠费的账单，在你支付所有欠费账单之前，新的购买或者订阅将被禁止，请不要调皮。',

package/src/payment/form/index.tsx

@@ -57,6 +57,11 @@ const waitForCheckoutComplete = async (sessionId: string) => {
   return result;
 };
 
+const hasDidWallet = (user: any) => {
+  const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
+  return connected.some((x: any) => x.provider === 'wallet');
+};
+
 type PageData = CheckoutContext & CheckoutCallbacks;
 
 PaymentForm.defaultProps = {};
@@ -219,7 +224,6 @@ export default function PaymentForm({
         if (result.data.balance?.sufficient || result.data.delegation?.sufficient) {
           await handleConnected();
         } else {
-          // @FIXME: 需要考虑如何正确地适配前端组件的使用 @wangshijun
           connect.open({
             containerEl: undefined as unknown as Element,
             action: checkoutSession.mode,
@@ -267,21 +271,42 @@ export default function PaymentForm({
     }
   };
 
-  const onFormError = () => {
+  const onFormError = (err: unknown) => {
+    if (err) {
+      console.error(err);
+    }
     setState({ submitting: false });
   };
 
   const onAction = () => {
     if (session?.user) {
-      handleSubmit(onFormSubmit, onFormError)();
+      if (hasDidWallet(session.user)) {
+        handleSubmit(onFormSubmit, onFormError)();
+      } else {
+        session.bindWallet(() => {
+          // timeout required because https://github.com/ArcBlock/ux/issues/1241
+          setTimeout(() => {
+            handleSubmit(onFormSubmit, onFormError)();
+          }, 2000);
+        });
+      }
     } else {
       session?.login(() => {
         setState({ submitting: true });
         onUserLoggedIn()
           .then(() => {
-            setTimeout(() => {
-              handleSubmit(onFormSubmit, onFormError)();
-            }, 50);
+            if (hasDidWallet(session.user)) {
+              setTimeout(() => {
+                handleSubmit(onFormSubmit, onFormError)();
+              }, 80);
+            } else {
+              session.bindWallet(() => {
+                // timeout required because https://github.com/ArcBlock/ux/issues/1241
+                setTimeout(() => {
+                  handleSubmit(onFormSubmit, onFormError)();
+                }, 2000);
+              });
+            }
           })
           .catch((err) => {
             console.error(err);