@blocklet/payment-react 1.18.56 → 1.19.1

package/lib/history/invoice/list.js

@@ -22,8 +22,8 @@ var _util = require("../../libs/util");
 var _table = _interopRequireDefault(require("../../components/table"));
 var _navigation = require("../../libs/navigation");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const groupByDate = items => {
   const grouped = {};
   items.forEach(item => {
@@ -168,6 +168,30 @@ const InvoiceTable = _react.default.memo(props => {
         });
       }
     }
+  }, {
+    label: t("common.paymentMethod"),
+    name: "paymentMethod",
+    options: {
+      customBodyRenderLite: (_, index) => {
+        const invoice = data?.list[index];
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            whiteSpace: "nowrap"
+          },
+          onClick: e => handleLinkClick(e, invoice),
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
+            src: invoice.paymentMethod.logo,
+            sx: {
+              width: 18,
+              height: 18,
+              mr: 1
+            }
+          }), invoice.paymentMethod.name]
+        });
+      }
+    }
   }, {
     label: t("common.type"),
     name: "billing_reason",
@@ -432,8 +456,8 @@ const InvoiceList = _react.default.memo(props => {
   if (data && data.list.length === 0) {
     if (data.subscription && ["active", "trialing"].includes(data.subscription.status)) {
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        color: "text.secondary",
         sx: {
+          color: "text.secondary",
           my: 0.5
         },
         children: t("payment.customer.invoice.next", {
@@ -442,8 +466,8 @@ const InvoiceList = _react.default.memo(props => {
       });
     }
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      color: "text.secondary",
       sx: {
+        color: "text.secondary",
         my: 0.5
       },
       children: t("payment.customer.invoice.empty")
@@ -480,17 +504,19 @@ const InvoiceList = _react.default.memo(props => {
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {
+            gap: {
+              xs: 0.5,
+              sm: 1.5,
+              md: 3
+            },
+            alignItems: "center",
+            flexWrap: "nowrap",
             my: 1
           },
-          gap: {
-            xs: 0.5,
-            sm: 1.5,
-            md: 3
-          },
-          alignItems: "center",
-          flexWrap: "nowrap",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 2,
+            sx: {
+              flex: 2
+            },
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
               href: link.url,
               target: link.external ? "_blank" : target,
@@ -498,8 +524,10 @@ const InvoiceList = _react.default.memo(props => {
               onClick: e => handleLinkClick(e, link),
               children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
                 direction: "row",
-                alignItems: "center",
                 spacing: 0.5,
+                sx: {
+                  alignItems: "center"
+                },
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   component: "span",
                   children: invoice.number
@@ -516,8 +544,10 @@ const InvoiceList = _react.default.memo(props => {
               })
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 1,
-            textAlign: "right",
+            sx: {
+              flex: 1,
+              textAlign: "right"
+            },
             children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
               sx: isVoid ? {
                 textDecoration: "line-through"
@@ -525,16 +555,18 @@ const InvoiceList = _react.default.memo(props => {
               children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 1,
-            textAlign: "right",
+            sx: {
+              flex: 1,
+              textAlign: "right"
+            },
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               children: (0, _util.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
             })
           }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 2,
             className: "invoice-description",
-            textAlign: "right",
             sx: {
+              flex: 2,
+              textAlign: "right",
               display: {
                 xs: "none",
                 lg: "inline-flex"
@@ -544,8 +576,10 @@ const InvoiceList = _react.default.memo(props => {
               children: invoice.description || invoice.id
             })
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            flex: 1,
-            textAlign: "right",
+            sx: {
+              flex: 1,
+              textAlign: "right"
+            },
             children: action ? connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
               variant: "contained",
               color: "primary",
@@ -595,7 +629,9 @@ const InvoiceList = _react.default.memo(props => {
           resource: t("payment.customer.invoices")
         })
       }), !hasMore && data.count > size && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        color: "text.secondary",
+        sx: {
+          color: "text.secondary"
+        },
         children: t("common.noMore", {
           resource: t("payment.customer.invoices")
         })
@@ -603,7 +639,21 @@ const InvoiceList = _react.default.memo(props => {
     })]
   });
 });
-function CustomerInvoiceList(props) {
+function CustomerInvoiceList(rawProps) {
+  const props = Object.assign({
+    customer_id: "",
+    subscription_id: "",
+    currency_id: "",
+    include_staking: false,
+    include_recovered_from: false,
+    status: "open,paid,uncollectible",
+    pageSize: 10,
+    target: "_self",
+    action: "",
+    type: "list",
+    onTableDataChange: () => {},
+    relatedSubscription: false
+  }, rawProps);
   const {
     action,
     type
@@ -672,20 +722,6 @@ function CustomerInvoiceList(props) {
     onPay
   });
 }
-CustomerInvoiceList.defaultProps = {
-  customer_id: "",
-  subscription_id: "",
-  currency_id: "",
-  include_staking: false,
-  include_recovered_from: false,
-  status: "open,paid,uncollectible",
-  pageSize: 10,
-  target: "_self",
-  action: "",
-  type: "list",
-  onTableDataChange: () => {},
-  relatedSubscription: false
-};
 const Root = (0, _system.styled)(_material.Stack)`
   @media (max-width: ${({
   theme

package/lib/history/payment/list.js

@@ -12,7 +12,7 @@ var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _api = _interopRequireDefault(require("../../libs/api"));
 var _util = require("../../libs/util");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const groupByDate = items => {
   const grouped = {};
   items.forEach(item => {
@@ -58,7 +58,9 @@ function CustomerPaymentList({
   }
   if (data && data.list.length === 0) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      color: "text.secondary",
+      sx: {
+        color: "text.secondary"
+      },
       children: t("payment.customer.payment.empty")
     });
   }
@@ -66,8 +68,8 @@ function CustomerPaymentList({
   const grouped = groupByDate(data.list);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
-    gap: 1,
     sx: {
+      gap: 1,
       mt: 1
     },
     children: [Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -85,39 +87,49 @@ function CustomerPaymentList({
           sm: "row"
         },
         sx: {
+          gap: {
+            xs: 0.5,
+            sm: 1.5,
+            md: 3
+          },
+          flexWrap: "nowrap",
           my: 1
         },
-        gap: {
-          xs: 0.5,
-          sm: 1.5,
-          md: 3
-        },
-        flexWrap: "nowrap",
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 3,
+          sx: {
+            flex: 3
+          },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: (0, _util.formatToDate)(item.created_at)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 2,
+          sx: {
+            flex: 2
+          },
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            textAlign: "right",
+            sx: {
+              textAlign: "right"
+            },
             children: [(0, _util.formatBNStr)(item.amount_received, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 3,
+          sx: {
+            flex: 3
+          },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: item.status,
             color: (0, _util.getPaymentIntentStatusColor)(item.status)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 3,
+          sx: {
+            flex: 3
+          },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: item.description || "-"
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 3,
           sx: {
+            flex: 3,
             minWidth: "220px"
           },
           children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
@@ -140,7 +152,9 @@ function CustomerPaymentList({
           resource: t("payment.customer.payments")
         })
       }), !hasMore && data.count > pageSize && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        color: "text.secondary",
+        sx: {
+          color: "text.secondary"
+        },
         children: t("common.noMore", {
           resource: t("payment.customer.payments")
         })

package/lib/hooks/keyboard.d.ts

@@ -13,7 +13,7 @@ type TabNavigationOptions<T> = {
     /** a selector to find navigable elements */
     selector?: string;
     /** an element container reference, limiting the query DOM range to improve performance */
-    containerRef?: RefObject<HTMLElement>;
+    containerRef?: RefObject<HTMLElement | null>;
     /** the type of the current value, can be 'index' or 'value' */
     valueType?: 'index' | 'value';
 };

package/lib/hooks/mobile.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMobile = useMobile;
 var _styles = require("@mui/material/styles");
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MOBILE_POINT = "md";
 function useMobile(mobilePoint = MOBILE_POINT) {
   const theme = (0, _styles.useTheme)();

package/lib/hooks/subscription.js

@@ -7,7 +7,7 @@ exports.useSubscription = useSubscription;
 var _ws = require("@arcblock/ws");
 var _get = _interopRequireDefault(require("lodash/get"));
 var _react = require("react");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RELAY_SOCKET_PREFIX = "/.well-known/service/relay";
 const getAppId = () => (0, _get.default)(window, "blocklet.appPid") || (0, _get.default)(window, "blocklet.appId") || "";
 const getRelayChannel = token => `relay:${getAppId()}:${token}`;

package/lib/index.d.ts

@@ -5,6 +5,7 @@ import TxGas from './components/blockchain/gas';
 import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
+import FormLabel from './components/label';
 import Livemode from './components/livemode';
 import PricingTable from './components/pricing-table';
 import Table from './components/table';
@@ -13,6 +14,8 @@ import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
 import CustomerPaymentList from './history/payment/list';
+import CreditGrantsList, { StatusChip as CreditStatusChip } from './history/credit/grants-list';
+import CreditTransactionsList from './history/credit/transactions-list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
 import Amount from './payment/amount';
@@ -32,6 +35,7 @@ import OverdueInvoicePayment from './components/over-due-invoice-payment';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
+import DateRangePicker from './components/date-range-picker';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -46,4 +50,4 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 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, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, 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, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, };

package/lib/index.js

@@ -12,6 +12,7 @@ var _exportNames = {
   TxLink: true,
   ConfirmDialog: true,
   FormInput: true,
+  FormLabel: true,
   Livemode: true,
   PricingTable: true,
   Table: true,
@@ -20,6 +21,9 @@ var _exportNames = {
   Switch: true,
   CustomerInvoiceList: true,
   CustomerPaymentList: true,
+  CreditGrantsList: true,
+  CreditStatusChip: true,
+  CreditTransactionsList: true,
   api: true,
   dayjs: true,
   Amount: true,
@@ -39,6 +43,7 @@ var _exportNames = {
   PaymentBeneficiaries: true,
   LoadingButton: true,
   ResumeSubscription: true,
+  DateRangePicker: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -85,6 +90,24 @@ Object.defineProperty(exports, "CountrySelect", {
     return _countrySelect.default;
   }
 });
+Object.defineProperty(exports, "CreditGrantsList", {
+  enumerable: true,
+  get: function () {
+    return _grantsList.default;
+  }
+});
+Object.defineProperty(exports, "CreditStatusChip", {
+  enumerable: true,
+  get: function () {
+    return _grantsList.StatusChip;
+  }
+});
+Object.defineProperty(exports, "CreditTransactionsList", {
+  enumerable: true,
+  get: function () {
+    return _transactionsList.default;
+  }
+});
 Object.defineProperty(exports, "CurrencySelector", {
   enumerable: true,
   get: function () {
@@ -103,6 +126,12 @@ Object.defineProperty(exports, "CustomerPaymentList", {
     return _list2.default;
   }
 });
+Object.defineProperty(exports, "DateRangePicker", {
+  enumerable: true,
+  get: function () {
+    return _dateRangePicker.default;
+  }
+});
 Object.defineProperty(exports, "DonateDetails", {
   enumerable: true,
   get: function () {
@@ -115,6 +144,12 @@ Object.defineProperty(exports, "FormInput", {
     return _input.default;
   }
 });
+Object.defineProperty(exports, "FormLabel", {
+  enumerable: true,
+  get: function () {
+    return _label.default;
+  }
+});
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function () {
@@ -278,6 +313,7 @@ var _gas = _interopRequireDefault(require("./components/blockchain/gas"));
 var _tx = _interopRequireDefault(require("./components/blockchain/tx"));
 var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
+var _label = _interopRequireDefault(require("./components/label"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));
 var _pricingTable = _interopRequireDefault(require("./components/pricing-table"));
 var _table2 = _interopRequireDefault(require("./components/table"));
@@ -286,6 +322,8 @@ var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
 var _list = _interopRequireDefault(require("./history/invoice/list"));
 var _list2 = _interopRequireDefault(require("./history/payment/list"));
+var _grantsList = _interopRequireWildcard(require("./history/credit/grants-list"));
+var _transactionsList = _interopRequireDefault(require("./history/credit/transactions-list"));
 var _api = _interopRequireDefault(require("./libs/api"));
 var _dayjs = _interopRequireDefault(require("./libs/dayjs"));
 var _amount = _interopRequireDefault(require("./payment/amount"));
@@ -305,6 +343,7 @@ var _overDueInvoicePayment = _interopRequireDefault(require("./components/over-d
 var _paymentBeneficiaries = _interopRequireDefault(require("./components/payment-beneficiaries"));
 var _loadingButton = _interopRequireDefault(require("./components/loading-button"));
 var _resumeSubscription = _interopRequireDefault(require("./components/resume-subscription"));
+var _dateRangePicker = _interopRequireDefault(require("./components/date-range-picker"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {
@@ -451,6 +490,6 @@ Object.keys(_validator).forEach(function (key) {
   });
 });
 var _locales = require("./locales");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/libs/api.js

@@ -8,7 +8,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _jsSdk = require("@blocklet/js-sdk");
 var _isNull = _interopRequireDefault(require("lodash/isNull"));
 var _util = require("./util");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const api = (0, _jsSdk.createAxios)();
 api.interceptors.request.use(config => {
   const prefix = (0, _util.getPrefix)();

package/lib/libs/dayjs.js

@@ -10,7 +10,7 @@ var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFor
 var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
 var _timezone = _interopRequireDefault(require("dayjs/plugin/timezone"));
 var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 Promise.resolve().then(() => require("dayjs/locale/en"));
 Promise.resolve().then(() => require("dayjs/locale/zh"));
 _dayjs.default.extend(_relativeTime.default);

package/lib/libs/phone-validator.js

@@ -83,7 +83,6 @@ const formatPhone = (phoneNumber, defaultCountry = "US") => {
     AE: "971"
     // UAE
   };
-
   const COUNTRY_PATTERNS = [[/^1[3-9]\d{9}$/, "86"],
   // China mobile: 11 digits, starts with 1
   [/^\d{10}$/, "1"],
@@ -101,7 +100,6 @@ const formatPhone = (phoneNumber, defaultCountry = "US") => {
   [/^[0-9]\d{8}$/, "86"]
   // China landline: 9 digits
   ];
-
   let numberToFormat = cleanedNumber;
   if (numberToFormat.startsWith("0")) {
     numberToFormat = numberToFormat.substring(1);

package/lib/libs/theme.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = create;
 var _Theme = require("@arcblock/ux/lib/Theme");
 var _merge = _interopRequireDefault(require("lodash/merge"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function create(settings = {}) {
   return (0, _Theme.createTheme)((0, _merge.default)({
     typography: {

package/lib/libs/util.d.ts

@@ -129,3 +129,5 @@ export declare function parseMarkedText(text: string): Array<{
     content: string;
 }>;
 export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;
+export declare function isCreditMetered(price: TPrice): boolean;
+export declare function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean): boolean;

package/lib/libs/util.js

@@ -53,6 +53,7 @@ exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.getWordBreakStyle = getWordBreakStyle;
 exports.hasDelegateTxHash = hasDelegateTxHash;
 exports.hasMultipleRecurringIntervals = hasMultipleRecurringIntervals;
+exports.isCreditMetered = isCreditMetered;
 exports.isCrossOrigin = isCrossOrigin;
 exports.isMobileSafari = isMobileSafari;
 exports.isPaymentKitMounted = void 0;
@@ -61,6 +62,7 @@ exports.lazyLoad = lazyLoad;
 exports.mergeExtraParams = void 0;
 exports.openDonationSettings = openDonationSettings;
 exports.parseMarkedText = parseMarkedText;
+exports.showStaking = showStaking;
 exports.sleep = sleep;
 exports.stopEvent = stopEvent;
 exports.truncateText = truncateText;
@@ -73,7 +75,7 @@ var _reactInternationalPhone = require("react-international-phone");
 var _ufo = require("ufo");
 var _locales = require("../locales");
 var _dayjs = _interopRequireDefault(require("./dayjs"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const PAYMENT_KIT_DID = exports.PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 const isPaymentKitMounted = () => {
   return (window.blocklet?.componentMountPoints || []).some(x => x.did === PAYMENT_KIT_DID);
@@ -1232,4 +1234,16 @@ function getTokenBalanceLink(method, address) {
     return (0, _ufo.joinURL)(explorerHost, "address", address);
   }
   return "";
+}
+function isCreditMetered(price) {
+  return !!(price.type === "recurring" && price.recurring?.usage_type === "metered" && price.recurring?.meter_id);
+}
+function showStaking(method, currency, noStake) {
+  if (noStake) {
+    return false;
+  }
+  if (method.type === "arcblock") {
+    return currency.type !== "credit";
+  }
+  return true;
 }

package/lib/libs/validator.js

@@ -7,7 +7,7 @@ exports.getFieldValidation = getFieldValidation;
 exports.validatePostalCode = validatePostalCode;
 var _isPostalCode = _interopRequireDefault(require("validator/lib/isPostalCode"));
 var _locales = require("../locales");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const POSTAL_CODE_SUPPORTED_COUNTRIES = ["AD", "AT", "AU", "BE", "BG", "BR", "CA", "CH", "CN", "CZ", "DE", "DK", "DZ", "EE", "ES", "FI", "FR", "GB", "GR", "HR", "HU", "ID", "IE", "IL", "IN", "IR", "IS", "IT", "JP", "KE", "KR", "LI", "LT", "LU", "LV", "MX", "MT", "NL", "NO", "NZ", "PL", "PR", "PT", "RO", "RU", "SA", "SE", "SI", "SK", "TN", "TW", "UA", "US", "ZA", "ZM"];
 function validatePostalCode(postalCode, country) {
   if (!postalCode) return true;

package/lib/locales/en.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 
 var _flat = _interopRequireDefault(require("flat"));
 var _constant = require("../libs/constant");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 module.exports = (0, _flat.default)({
   common: {
     id: "ID",
@@ -35,6 +35,10 @@ module.exports = (0, _flat.default)({
     remove: "Remove",
     removed: "Resource removed",
     confirm: "Confirm",
+    clear: "Clear",
+    selectTimeRange: "Select time range",
+    startDate: "Start date",
+    endDate: "End date",
     upload: "Upload",
     change: "Change",
     cancel: "Cancel",
@@ -107,7 +111,8 @@ module.exports = (0, _flat.default)({
       scan: "Use following methods to complete this {action}",
       confirm: "Confirm",
       cancel: "Cancel"
-    }
+    },
+    paymentMethod: "Payment Method"
   },
   payment: {
     checkout: {
@@ -211,6 +216,11 @@ module.exports = (0, _flat.default)({
         add: "Add to order",
         remove: "Remove from order"
       },
+      credit: {
+        oneTimeInfo: "You will receive {amount} {symbol} credits after payment",
+        recurringInfo: "You will receive {amount} {symbol} credits {period}",
+        expiresIn: "credits have a validity period of {duration} {unit}"
+      },
       expired: {
         title: "Expired Link",
         description: "This link has expired. This means that your payment has already been processed or your session has expired."
@@ -239,7 +249,15 @@ module.exports = (0, _flat.default)({
         payer: "Account",
         amount: "Amount",
         failed: "Account changed, please pay manually.",
-        balanceLink: "View Balance"
+        balanceLink: "View Balance",
+        credit: {
+          title: "Confirm Credit Payment",
+          availableAmount: "Available Credit: {amount}",
+          confirmMessage: "You will use {amount} credits to subscribe to this service.",
+          meteringSubscriptionMessage: "This subscription service will deduct credits in real-time based on actual usage. You currently have {available} credits available. Confirm to continue?",
+          insufficientTitle: "Insufficient Credit",
+          insufficientMessage: "This subscription service will deduct credits in real-time based on actual usage. You currently have insufficient credits. Please top up your credits first."
+        }
       }
     },
     customer: {

package/lib/locales/index.js

@@ -7,7 +7,7 @@ exports.translations = exports.translate = exports.t = exports.createTranslator
 var _template = _interopRequireDefault(require("lodash/template"));
 var _en = _interopRequireDefault(require("./en"));
 var _zh = _interopRequireDefault(require("./zh"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const translations = exports.translations = {
   zh: _zh.default,
   en: _en.default