@blocklet/payment-react 1.19.0 → 1.19.2

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) {

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;
@@ -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/locales/en.js

@@ -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/zh.js

@@ -38,6 +38,10 @@ module.exports = (0, _flat.default)({
     change: "\u66F4\u6362",
     confirm: "\u786E\u8BA4",
     cancel: "\u53D6\u6D88",
+    clear: "\u6E05\u7A7A",
+    selectTimeRange: "\u9009\u62E9\u65F6\u95F4\u8303\u56F4",
+    startDate: "\u5F00\u59CB\u65E5\u671F",
+    endDate: "\u7ED3\u675F\u65E5\u671F",
     close: "\u5173\u95ED",
     back: "\u8FD4\u56DE",
     every: "\u6BCF",
@@ -107,7 +111,8 @@ module.exports = (0, _flat.default)({
       scan: "\u4F7F\u7528\u4EE5\u4E0B\u65B9\u5F0F\u5B8C\u6210\u672C\u6B21{action}",
       confirm: "\u786E\u8BA4",
       cancel: "\u53D6\u6D88"
-    }
+    },
+    paymentMethod: "\u652F\u4ED8\u65B9\u5F0F"
   },
   payment: {
     checkout: {
@@ -219,6 +224,11 @@ module.exports = (0, _flat.default)({
         add: "\u6DFB\u52A0\u5230\u8BA2\u5355",
         remove: "\u4ECE\u8BA2\u5355\u79FB\u9664"
       },
+      credit: {
+        oneTimeInfo: "\u4ED8\u6B3E\u5B8C\u6210\u540E\u60A8\u5C06\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        recurringInfo: "\u60A8\u5C06{period}\u83B7\u5F97 {amount} {symbol} \u989D\u5EA6",
+        expiresIn: "\u989D\u5EA6\u6709\u6548\u671F\u4E3A {duration} {unit}"
+      },
       emptyItems: {
         title: "\u6CA1\u6709\u4EFB\u4F55\u8D2D\u4E70\u9879\u76EE",
         description: "\u53EF\u80FD\u8FD9\u4E2A\u4ED8\u6B3E\u94FE\u63A5\u6CA1\u6709\u6B63\u786E\u914D\u7F6E"
@@ -239,7 +249,15 @@ module.exports = (0, _flat.default)({
         payer: "\u8D26\u6237\u5730\u5740",
         amount: "\u652F\u4ED8\u91D1\u989D",
         failed: "\u8D26\u6237\u53D1\u751F\u53D8\u5316\uFF0C\u65E0\u6CD5\u81EA\u52A8\u5B8C\u6210\u652F\u4ED8\uFF0C\u8BF7\u624B\u52A8\u652F\u4ED8\u3002",
-        balanceLink: "\u67E5\u770B\u4F59\u989D"
+        balanceLink: "\u67E5\u770B\u4F59\u989D",
+        credit: {
+          title: "\u786E\u8BA4\u989D\u5EA6\u652F\u4ED8",
+          availableAmount: "\u53EF\u7528\u989D\u5EA6\uFF1A{amount}",
+          confirmMessage: "\u60A8\u5C06\u4F7F\u7528 {amount} \u989D\u5EA6\u6765\u8BA2\u9605\u6B64\u670D\u52A1\u3002",
+          meteringSubscriptionMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E3A {available}\uFF0C\u786E\u8BA4\u662F\u5426\u7EE7\u7EED\uFF1F",
+          insufficientTitle: "\u989D\u5EA6\u4E0D\u8DB3",
+          insufficientMessage: "\u6B64\u8BA2\u9605\u670D\u52A1\u5C06\u6839\u636E\u5B9E\u9645\u4F7F\u7528\u60C5\u51B5\u5B9E\u65F6\u6263\u9664\u989D\u5EA6\u3002\u60A8\u5F53\u524D\u53EF\u7528\u989D\u5EA6\u4E0D\u8DB3\uFF0C\u8BF7\u5148\u5145\u503C\u989D\u5EA6\u3002"
+        }
       }
     },
     customer: {

package/lib/payment/form/address.js

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
 var _input = _interopRequireDefault(require("../../components/input"));
+var _label = _interopRequireDefault(require("../../components/label"));
 var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 var _validator = require("../../libs/validator");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,7 +41,7 @@ function AddressForm({
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -52,7 +53,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.line1")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -64,7 +65,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.city")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -76,7 +77,7 @@ function AddressForm({
             errorPosition,
             variant: "outlined",
             placeholder: t("payment.checkout.billing.state")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -131,7 +132,7 @@ function AddressForm({
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.billing.postal_code")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {

package/lib/payment/form/index.js

@@ -22,6 +22,7 @@ var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _iconsMaterial = require("@mui/icons-material");
 var _input = _interopRequireDefault(require("../../components/input"));
+var _label = _interopRequireDefault(require("../../components/label"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
@@ -154,7 +155,8 @@ function PaymentForm({
     customer,
     customerLimited: false,
     stripePaying: false,
-    fastCheckoutInfo: null
+    fastCheckoutInfo: null,
+    creditInsufficientInfo: null
   });
   const currencies = (0, _util2.flattenPaymentMethods)(paymentMethods);
   const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
@@ -346,6 +348,11 @@ function PaymentForm({
       fastCheckoutInfo: null
     });
   };
+  const handleCreditInsufficientClose = () => {
+    setState({
+      creditInsufficientInfo: null
+    });
+  };
   const openConnect = () => {
     try {
       if (!["arcblock", "ethereum", "base"].includes(method.type)) {
@@ -416,7 +423,27 @@ function PaymentForm({
         customerLimited: false
       });
       if (["arcblock", "ethereum", "base"].includes(method.type)) {
-        if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
+        if (paymentCurrency?.type === "credit") {
+          if (result.data.creditSufficient === true) {
+            setState({
+              fastCheckoutInfo: {
+                open: true,
+                loading: false,
+                sourceType: "credit",
+                amount: result.data.fastPayInfo?.amount || "0",
+                payer: result.data.fastPayInfo?.payer,
+                availableCredit: result.data.fastPayInfo?.amount || "0",
+                balance: result.data.fastPayInfo?.token?.balance || "0"
+              }
+            });
+          } else {
+            setState({
+              creditInsufficientInfo: {
+                open: true
+              }
+            });
+          }
+        } else if ((result.data.balance?.sufficient || result.data.delegation?.sufficient) && !isDonationMode && result.data.fastPayInfo) {
           setState({
             fastCheckoutInfo: {
               open: true,
@@ -525,8 +552,12 @@ function PaymentForm({
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
     onConfirm: handleFastCheckoutConfirm,
     onCancel: handleFastCheckoutCancel,
-    title: t("payment.checkout.fastPay.title"),
-    message: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    title: state.fastCheckoutInfo.sourceType === "credit" ? t("payment.checkout.fastPay.credit.title") : t("payment.checkout.fastPay.title"),
+    message: state.fastCheckoutInfo.sourceType === "credit" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: t("payment.checkout.fastPay.credit.meteringSubscriptionMessage", {
+        available: `${(0, _util.fromUnitToToken)(state.fastCheckoutInfo?.balance || "0", paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`
+      })
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         children: t("payment.checkout.fastPay.autoPaymentReason")
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
@@ -596,6 +627,15 @@ function PaymentForm({
     loading: state.fastCheckoutInfo.loading,
     color: "primary"
   });
+  const CreditInsufficientDialog = state.creditInsufficientInfo && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+    onConfirm: handleCreditInsufficientClose,
+    onCancel: handleCreditInsufficientClose,
+    title: t("payment.checkout.fastPay.credit.insufficientTitle"),
+    message: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: t("payment.checkout.fastPay.credit.insufficientMessage")
+    }),
+    confirm: t("common.confirm")
+  });
   if (onlyShowBtn) {
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
@@ -646,7 +686,7 @@ function PaymentForm({
           }),
           title: t("payment.customer.pastDue.alert.title")
         }
-      }), FastCheckoutConfirmDialog]
+      }), FastCheckoutConfirmDialog, CreditInsufficientDialog]
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -717,7 +757,7 @@ function PaymentForm({
             overflow: "auto",
             py: 1
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.customer.name")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -728,7 +768,7 @@ function PaymentForm({
               required: t("payment.checkout.required"),
               ...(0, _validator.getFieldValidation)("customer_name", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
             className: "base-label",
             children: t("payment.checkout.customer.email")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
@@ -741,7 +781,7 @@ function PaymentForm({
               ...(0, _validator.getFieldValidation)("customer_email", checkoutSession.metadata?.page_info?.field_validation, locale)
             }
           }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
               className: "base-label",
               children: t("payment.checkout.customer.phone")
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {
@@ -852,6 +892,6 @@ function PaymentForm({
         }),
         title: t("payment.customer.pastDue.alert.title")
       }
-    }), FastCheckoutConfirmDialog]
+    }), FastCheckoutConfirmDialog, CreditInsufficientDialog]
   });
 }

package/lib/payment/index.js

@@ -196,6 +196,22 @@ function PaymentInner({
       _Toast.default.error((0, _util2.formatError)(err));
     }
   };
+  const onQuantityChange = async (itemId, quantity) => {
+    try {
+      const {
+        data
+      } = await _api.default.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
+        itemId,
+        quantity
+      });
+      setState({
+        checkoutSession: data
+      });
+    } catch (err) {
+      console.error(err);
+      _Toast.default.error((0, _util2.formatError)(err));
+    }
+  };
   const onCancelCrossSell = async () => {
     try {
       const {
@@ -262,17 +278,19 @@ function PaymentInner({
             billingThreshold: Math.max(state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
             // @ts-ignore
             state.checkoutSession.subscription_data?.min_stake_amount || 0),
-            showStaking: method.type === "arcblock" && !state.checkoutSession.subscription_data?.no_stake,
+            showStaking: (0, _util2.showStaking)(method, currency, !!state.checkoutSession.subscription_data?.no_stake),
             currency,
             onUpsell,
             onDownsell,
+            onQuantityChange,
             onApplyCrossSell,
             onCancelCrossSell,
             onChangeAmount,
             checkoutSessionId: state.checkoutSession.id,
             crossSellBehavior: state.checkoutSession.cross_sell_behavior,
             donationSettings: paymentLink?.donation_settings,
-            action
+            action,
+            completed
           }), mode === "standalone" && !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
             className: "cko-footer",
             sx: {

package/lib/payment/product-item.d.ts

@@ -10,6 +10,13 @@ type Props = {
     onDownsell: Function;
     mode?: 'normal' | 'cross-sell';
     children?: React.ReactNode;
+    adjustableQuantity?: {
+        enabled: boolean;
+        minimum?: number;
+        maximum?: number;
+    };
+    onQuantityChange?: (itemId: string, quantity: number) => void;
+    completed?: boolean;
 };
-export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, }: Props): JSX.Element;
+export default function ProductItem({ item, items, trialInDays, trialEnd, currency, mode, children, onUpsell, onDownsell, completed, adjustableQuantity, onQuantityChange, }: Props): JSX.Element;
 export {};