@blocklet/payment-react 1.19.0 → 1.19.1

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/index.js

@@ -154,7 +154,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 +347,11 @@ function PaymentForm({
       fastCheckoutInfo: null
     });
   };
+  const handleCreditInsufficientClose = () => {
+    setState({
+      creditInsufficientInfo: null
+    });
+  };
   const openConnect = () => {
     try {
       if (!["arcblock", "ethereum", "base"].includes(method.type)) {
@@ -416,7 +422,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 +551,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 +626,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 +685,7 @@ function PaymentForm({
           }),
           title: t("payment.customer.pastDue.alert.title")
         }
-      }), FastCheckoutConfirmDialog]
+      }), FastCheckoutConfirmDialog, CreditInsufficientDialog]
     });
   }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -852,6 +891,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 {};

package/lib/payment/product-item.js

@@ -7,12 +7,14 @@ module.exports = ProductItem;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 var _react = require("react");
 var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
 var _productCard = _interopRequireDefault(require("./product-card"));
 var _dayjs = _interopRequireDefault(require("../libs/dayjs"));
+var _payment = require("../contexts/payment");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ProductItem({
   item,
@@ -23,12 +25,20 @@ function ProductItem({
   mode = "normal",
   children = null,
   onUpsell,
-  onDownsell
+  onDownsell,
+  completed = false,
+  adjustableQuantity = {
+    enabled: false
+  },
+  onQuantityChange = () => {}
 }) {
   const {
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const {
+    settings
+  } = (0, _payment.usePaymentContext)();
   const pricing = (0, _util.formatLineItemPricing)(item, currency, {
     trialEnd,
     trialInDays
@@ -36,6 +46,65 @@ function ProductItem({
   const saving = (0, _util.formatUpsellSaving)(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
+  const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config?.credit_amount;
+  const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
+  const creditCurrency = isCreditProduct ? (0, _util.findCurrency)(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
+  const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
+  const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || "days";
+  const [localQuantity, setLocalQuantity] = (0, _react.useState)(item.quantity);
+  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
+  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
+  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const maxQuantity = Math.min(adjustableQuantity.maximum || 999, quantityAvailable || 999);
+  const handleQuantityChange = newQuantity => {
+    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
+      setLocalQuantity(newQuantity);
+      if ((0, _util.formatQuantityInventory)(item.price, newQuantity, locale)) {
+        return;
+      }
+      onQuantityChange(item.price_id, newQuantity);
+    }
+  };
+  const handleQuantityIncrease = () => {
+    if (localQuantity < maxQuantity) {
+      handleQuantityChange(localQuantity + 1);
+    }
+  };
+  const handleQuantityDecrease = () => {
+    if (localQuantity > minQuantity) {
+      handleQuantityChange(localQuantity - 1);
+    }
+  };
+  const handleQuantityInputChange = event => {
+    const value = parseInt(event.target.value, 10);
+    if (!Number.isNaN(value)) {
+      handleQuantityChange(value);
+    }
+  };
+  const formatCreditInfo = () => {
+    if (!isCreditProduct) return null;
+    const isRecurring = item.price.type === "recurring";
+    const totalCredit = creditAmount * localQuantity;
+    let message = "";
+    if (isRecurring) {
+      message = t("payment.checkout.credit.recurringInfo", {
+        amount: totalCredit,
+        period: (0, _util.formatRecurring)(item.price.recurring, true, "per", locale)
+      });
+    } else {
+      message = t("payment.checkout.credit.oneTimeInfo", {
+        amount: totalCredit,
+        symbol: creditCurrency?.symbol || "Credits"
+      });
+    }
+    if (validDuration && validDuration > 0) {
+      message += `\uFF0C${t("payment.checkout.credit.expiresIn", {
+        duration: validDuration,
+        unit: t(`common.${validDurationUnit}`)
+      })}`;
+    }
+    return message;
+  };
   const primaryText = (0, _react.useMemo)(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
@@ -45,6 +114,7 @@ function ProductItem({
     }
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
+  const quantityInventoryError = (0, _util.formatQuantityInventory)(item.price, localQuantity, locale);
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     spacing: 1,
@@ -103,8 +173,8 @@ function ProductItem({
             children: pricing.secondary
           })]
         })]
-      }), (0, _util.formatQuantityInventory)(item.price, item.quantity, locale) ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-        label: (0, _util.formatQuantityInventory)(item.price, item.quantity, locale),
+      }), quantityInventoryError ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+        label: quantityInventoryError,
         variant: "outlined",
         sx: {
           mt: 1,
@@ -112,7 +182,77 @@ function ProductItem({
           backgroundColor: "chip.error.background",
           color: "chip.error.text"
         }
-      }) : null, children]
+      }) : null, canAdjustQuantity && !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          mt: 1,
+          p: 1
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            variant: "body2",
+            sx: {
+              color: "text.secondary",
+              minWidth: "fit-content"
+            },
+            children: [t("common.quantity"), ":"]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleQuantityDecrease,
+            disabled: localQuantity <= minQuantity,
+            sx: {
+              minWidth: 32,
+              width: 32,
+              height: 32
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Remove, {
+              fontSize: "small"
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
+            size: "small",
+            value: localQuantity,
+            onChange: handleQuantityInputChange,
+            sx: {
+              width: 60
+            },
+            type: "number",
+            slotProps: {
+              htmlInput: {
+                min: minQuantity,
+                max: maxQuantity,
+                style: {
+                  textAlign: "center",
+                  padding: "4px"
+                }
+              }
+            }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            onClick: handleQuantityIncrease,
+            disabled: localQuantity >= maxQuantity,
+            sx: {
+              minWidth: 32,
+              width: 32,
+              height: 32
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {
+              fontSize: "small"
+            })
+          })]
+        })
+      }), isCreditProduct && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+        severity: "info",
+        sx: {
+          mt: 1,
+          fontSize: "0.875rem"
+        },
+        icon: false,
+        children: formatCreditInfo()
+      }), children]
     }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
       className: "product-item-upsell",

package/lib/payment/summary.d.ts

@@ -8,6 +8,7 @@ type Props = {
     showStaking?: boolean;
     onUpsell?: Function;
     onDownsell?: Function;
+    onQuantityChange?: Function;
     onChangeAmount?: Function;
     onApplyCrossSell?: Function;
     onCancelCrossSell?: Function;
@@ -15,6 +16,7 @@ type Props = {
     crossSellBehavior?: string;
     donationSettings?: DonationSettings;
     action?: string;
+    completed?: boolean;
 };
-export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, ...rest }: Props): import("react").JSX.Element;
+export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, ...rest }: Props): import("react").JSX.Element;
 export {};

package/lib/payment/summary.js

@@ -90,6 +90,7 @@ function PaymentSummary({
   billingThreshold,
   onUpsell = _noop.default,
   onDownsell = _noop.default,
+  onQuantityChange = _noop.default,
   onApplyCrossSell = _noop.default,
   onCancelCrossSell = _noop.default,
   onChangeAmount = _noop.default,
@@ -99,6 +100,7 @@ function PaymentSummary({
   donationSettings = void 0,
   action = "",
   trialEnd = 0,
+  completed = false,
   ...rest
 }) {
   const {
@@ -138,6 +140,10 @@ function PaymentSummary({
     await onUpsell(from, to);
     runAsync();
   };
+  const handleQuantityChange = async (itemId, quantity) => {
+    await onQuantityChange(itemId, quantity);
+    runAsync();
+  };
   const handleDownsell = async from => {
     await onDownsell(from);
     runAsync();
@@ -196,6 +202,9 @@ function PaymentSummary({
         currency,
         onUpsell: handleUpsell,
         onDownsell: handleDownsell,
+        adjustableQuantity: x.adjustable_quantity,
+        completed,
+        onQuantityChange: handleQuantityChange,
         children: x.cross_sell && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.19.0",
+    "@blocklet/payment-types": "1.19.1",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "2810263174bb900ebb5a431dc53930b08b4a8d6d"
+  "gitHead": "48d5719c8ce4e89a16f8dd576ff8f72072e3909e"
 }