@blocklet/payment-react 1.14.5 → 1.14.6

package/es/libs/util.d.ts

@@ -77,3 +77,4 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
     locale: string;
 }): PricingRenderProps;
 export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;
+export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;

package/es/libs/util.js

@@ -687,3 +687,10 @@ export function formatQuantityInventory(price, quantity, locale = "en") {
   }
   return "";
 }
+export function formatAmountPrecisionLimit(amount, locale = "en", precision = 6) {
+  const [, decimal] = amount.split(".");
+  if (decimal && decimal.length > precision) {
+    return t("common.amountPrecisionLimit", locale, { precision });
+  }
+  return "";
+}

package/es/locales/en.js

@@ -84,7 +84,8 @@ export default flat({
     type: "type",
     donation: "Donation",
     quantityLimitPerCheckout: "Exceed purchase limit",
-    quantityNotEnough: "Exceed inventory"
+    quantityNotEnough: "Exceed inventory",
+    amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}"
   },
   payment: {
     checkout: {

package/es/locales/zh.js

@@ -84,7 +84,8 @@ export default flat({
     type: "\u7C7B\u578B",
     donation: "\u6253\u8D4F",
     quantityLimitPerCheckout: "\u8D85\u51FA\u8D2D\u4E70\u9650\u5236",
-    quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3"
+    quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3",
+    amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185"
   },
   payment: {
     checkout: {

package/es/payment/index.js

@@ -10,7 +10,13 @@ import { useEffect, useState } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { usePaymentContext } from "../contexts/payment.js";
 import api from "../libs/api.js";
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from "../libs/util.js";
+import {
+  findCurrency,
+  formatAmountPrecisionLimit,
+  formatError,
+  getStatementDescriptor,
+  isValidCountry
+} from "../libs/util.js";
 import PaymentError from "./error.js";
 import CheckoutFooter from "./footer.js";
 import PaymentForm from "./form/index.js";
@@ -131,7 +137,7 @@ export function PaymentInner({
   goBack,
   action
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { settings, session } = usePaymentContext();
   const [state, setState] = useSetState({ checkoutSession });
   const defaultCurrencyId = state.checkoutSession.currency_id || state.checkoutSession.line_items[0]?.price.currency_id;
@@ -201,7 +207,15 @@ export function PaymentInner({
       Toast.error(formatError(err));
     }
   };
+  const min = parseFloat(paymentLink?.donation_settings?.amount.minimum || "0");
+  const max = paymentLink?.donation_settings?.amount.maximum ? parseFloat(paymentLink?.donation_settings?.amount.maximum) : Infinity;
   const onChangeAmount = async ({ priceId, amount }) => {
+    if (Number(amount) < min || Number(amount) > max) {
+      return;
+    }
+    if (formatAmountPrecisionLimit(amount, locale)) {
+      return;
+    }
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/amount`, {
         priceId,
@@ -236,6 +250,7 @@ export function PaymentInner({
             trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
             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",

package/es/payment/product-donation.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import type { DonationSettings, TLineItemExpanded } from '@blocklet/payment-types';
-export default function ProductDonation({ item, settings, onChange, }: {
+import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+export default function ProductDonation({ item, settings, onChange, currency, }: {
     item: TLineItemExpanded;
     settings: DonationSettings;
     onChange: Function;
+    currency: TPaymentCurrency;
 }): import("react").JSX.Element;

package/es/payment/product-donation.js

@@ -4,12 +4,14 @@ import { Box, Card, CardActionArea, FormControlLabel, Stack, TextField, Typograp
 import { useSetState } from "ahooks";
 import { useEffect } from "react";
 import Switch from "../components/switch-button.js";
+import { formatAmountPrecisionLimit } from "../libs/util.js";
 export default function ProductDonation({
   item,
   settings,
-  onChange
+  onChange,
+  currency
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
   const [state, setState] = useSetState({
     selected: preset,
@@ -34,6 +36,11 @@ export default function ProductDonation({
     const { value } = event.target;
     const min = parseFloat(settings.amount.minimum || "0");
     const max = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    const precision = currency?.maximum_precision || 6;
+    if (formatAmountPrecisionLimit(value, locale)) {
+      setState({ input: value, error: formatAmountPrecisionLimit(value, locale, precision) });
+      return;
+    }
     if (value < min || value > max) {
       setState({ input: value, error: t("payment.checkout.donation.between", { min, max }) });
       return;

package/es/payment/summary.js

@@ -162,7 +162,8 @@ export default function PaymentSummary({
         {
           item: x,
           settings: donationSettings,
-          onChange: onChangeAmount
+          onChange: onChangeAmount,
+          currency
         },
         `${x.price_id}-${currency.id}`
       ) : /* @__PURE__ */ jsx(

package/lib/libs/util.d.ts

@@ -77,3 +77,4 @@ export declare function formatTotalPrice({ product, quantity, priceId, locale, }
     locale: string;
 }): PricingRenderProps;
 export declare function formatQuantityInventory(price: TPrice, quantity: string | number, locale?: string): string;
+export declare function formatAmountPrecisionLimit(amount: string, locale?: string, precision?: number): string;

package/lib/libs/util.js

@@ -7,6 +7,7 @@ exports.PAYMENT_KIT_DID = void 0;
 exports.findCurrency = findCurrency;
 exports.flattenPaymentMethods = void 0;
 exports.formatAmount = formatAmount;
+exports.formatAmountPrecisionLimit = formatAmountPrecisionLimit;
 exports.formatBNStr = formatBNStr;
 exports.formatCheckoutHeadlines = formatCheckoutHeadlines;
 exports.formatDateTime = formatDateTime;
@@ -821,4 +822,13 @@ function formatQuantityInventory(price, quantity, locale = "en") {
     return (0, _locales.t)("common.quantityLimitPerCheckout", locale);
   }
   return "";
+}
+function formatAmountPrecisionLimit(amount, locale = "en", precision = 6) {
+  const [, decimal] = amount.split(".");
+  if (decimal && decimal.length > precision) {
+    return (0, _locales.t)("common.amountPrecisionLimit", locale, {
+      precision
+    });
+  }
+  return "";
 }

package/lib/locales/en.js

@@ -91,7 +91,8 @@ module.exports = (0, _flat.default)({
     type: "type",
     donation: "Donation",
     quantityLimitPerCheckout: "Exceed purchase limit",
-    quantityNotEnough: "Exceed inventory"
+    quantityNotEnough: "Exceed inventory",
+    amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}"
   },
   payment: {
     checkout: {

package/lib/locales/zh.js

@@ -91,7 +91,8 @@ module.exports = (0, _flat.default)({
     type: "\u7C7B\u578B",
     donation: "\u6253\u8D4F",
     quantityLimitPerCheckout: "\u8D85\u51FA\u8D2D\u4E70\u9650\u5236",
-    quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3"
+    quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3",
+    amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185"
   },
   payment: {
     checkout: {

package/lib/payment/index.js

@@ -154,7 +154,8 @@ function PaymentInner({
   action
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     settings,
@@ -255,10 +256,18 @@ function PaymentInner({
       _Toast.default.error((0, _util2.formatError)(err));
     }
   };
+  const min = parseFloat(paymentLink?.donation_settings?.amount.minimum || "0");
+  const max = paymentLink?.donation_settings?.amount.maximum ? parseFloat(paymentLink?.donation_settings?.amount.maximum) : Infinity;
   const onChangeAmount = async ({
     priceId,
     amount
   }) => {
+    if (Number(amount) < min || Number(amount) > max) {
+      return;
+    }
+    if ((0, _util2.formatAmountPrecisionLimit)(amount, locale)) {
+      return;
+    }
     try {
       const {
         data
@@ -311,7 +320,9 @@ function PaymentInner({
             }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
               items: state.checkoutSession.line_items,
               trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
-              billingThreshold: Math.max(state.checkoutSession.subscription_data?.billing_threshold_amount || 0, state.checkoutSession.subscription_data?.min_stake_amount || 0),
+              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",
               currency,
               onUpsell,

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import type { DonationSettings, TLineItemExpanded } from '@blocklet/payment-types';
-export default function ProductDonation({ item, settings, onChange, }: {
+import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+export default function ProductDonation({ item, settings, onChange, currency, }: {
     item: TLineItemExpanded;
     settings: DonationSettings;
     onChange: Function;
+    currency: TPaymentCurrency;
 }): import("react").JSX.Element;

package/lib/payment/product-donation.js

@@ -10,14 +10,17 @@ var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
+var _util = require("../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ProductDonation({
   item,
   settings,
-  onChange
+  onChange,
+  currency
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
   const [state, setState] = (0, _ahooks.useSetState)({
@@ -64,6 +67,14 @@ function ProductDonation({
     } = event.target;
     const min = parseFloat(settings.amount.minimum || "0");
     const max = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    const precision = currency?.maximum_precision || 6;
+    if ((0, _util.formatAmountPrecisionLimit)(value, locale)) {
+      setState({
+        input: value,
+        error: (0, _util.formatAmountPrecisionLimit)(value, locale, precision)
+      });
+      return;
+    }
     if (value < min || value > max) {
       setState({
         input: value,

package/lib/payment/summary.js

@@ -209,7 +209,8 @@ function PaymentSummary({
         children: items.map(x => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
           item: x,
           settings: donationSettings,
-          onChange: onChangeAmount
+          onChange: onChangeAmount,
+          currency
         }, `${x.price_id}-${currency.id}`) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
           item: x,
           items,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.14.5",
+  "version": "1.14.6",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.14.5",
+    "@blocklet/payment-types": "1.14.6",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "e4715805a87b2e4e3622564f4bc26578f19211e4"
+  "gitHead": "6c2ea2db76a8bb8413d0b802f35b50b650c7f6d2"
 }

package/src/libs/util.ts

@@ -888,3 +888,11 @@ export function formatQuantityInventory(price: TPrice, quantity: string | number
   }
   return '';
 }
+
+export function formatAmountPrecisionLimit(amount: string, locale = 'en', precision: number = 6) {
+  const [, decimal] = amount.split('.');
+  if (decimal && decimal.length > precision) {
+    return t('common.amountPrecisionLimit', locale, { precision });
+  }
+  return '';
+}

package/src/locales/en.tsx

@@ -87,6 +87,7 @@ export default flat({
     donation: 'Donation',
     quantityLimitPerCheckout: 'Exceed purchase limit',
     quantityNotEnough: 'Exceed inventory',
+    amountPrecisionLimit: 'Amount decimal places must be less than or equal to {precision}',
   },
   payment: {
     checkout: {

package/src/locales/zh.tsx

@@ -87,6 +87,7 @@ export default flat({
     donation: '打赏',
     quantityLimitPerCheckout: '超出购买限制',
     quantityNotEnough: '库存不足',
+    amountPrecisionLimit: '金额小数位数必须在 {precision} 位以内',
   },
   payment: {
     checkout: {

package/src/payment/index.tsx

@@ -19,7 +19,13 @@ import type { LiteralUnion } from 'type-fest';
 
 import { usePaymentContext } from '../contexts/payment';
 import api from '../libs/api';
-import { findCurrency, formatError, getStatementDescriptor, isValidCountry } from '../libs/util';
+import {
+  findCurrency,
+  formatAmountPrecisionLimit,
+  formatError,
+  getStatementDescriptor,
+  isValidCountry,
+} from '../libs/util';
 import { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
 import CheckoutFooter from './footer';
@@ -164,7 +170,7 @@ export function PaymentInner({
   goBack,
   action,
 }: MainProps) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { settings, session } = usePaymentContext();
   const [state, setState] = useSetState<{ checkoutSession: TCheckoutSessionExpanded }>({ checkoutSession });
 
@@ -245,7 +251,19 @@ export function PaymentInner({
     }
   };
 
+  const min = parseFloat(paymentLink?.donation_settings?.amount.minimum || '0');
+  const max = paymentLink?.donation_settings?.amount.maximum
+    ? parseFloat(paymentLink?.donation_settings?.amount.maximum)
+    : Infinity;
+
   const onChangeAmount = async ({ priceId, amount }: { priceId: string; amount: string }) => {
+    if (Number(amount) < min || Number(amount) > max) {
+      return;
+    }
+
+    if (formatAmountPrecisionLimit(amount, locale)) {
+      return;
+    }
     try {
       const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/amount`, {
         priceId,
@@ -282,6 +300,7 @@ export function PaymentInner({
                 trialInDays={state.checkoutSession.subscription_data?.trial_period_days || 0}
                 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'}

package/src/payment/product-donation.tsx

@@ -1,21 +1,24 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { DonationSettings, TLineItemExpanded } from '@blocklet/payment-types';
+import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { Box, Card, CardActionArea, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
 import { useEffect } from 'react';
 
 import Switch from '../components/switch-button';
+import { formatAmountPrecisionLimit } from '../libs/util';
 
 export default function ProductDonation({
   item,
   settings,
   onChange,
+  currency,
 }: {
   item: TLineItemExpanded;
   settings: DonationSettings;
   onChange: Function;
+  currency: TPaymentCurrency;
 }) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || '0';
   const [state, setState] = useSetState({
     selected: preset,
@@ -44,6 +47,12 @@ export default function ProductDonation({
     const { value } = event.target;
     const min = parseFloat(settings.amount.minimum || '0');
     const max = settings.amount.maximum ? parseFloat(settings.amount.maximum) : Infinity;
+    const precision = currency?.maximum_precision || 6;
+
+    if (formatAmountPrecisionLimit(value, locale)) {
+      setState({ input: value, error: formatAmountPrecisionLimit(value, locale, precision) });
+      return;
+    }
 
     if (value < min || value > max) {
       setState({ input: value, error: t('payment.checkout.donation.between', { min, max }) });

package/src/payment/summary.tsx

@@ -199,6 +199,7 @@ export default function PaymentSummary({
                 item={x}
                 settings={donationSettings}
                 onChange={onChangeAmount}
+                currency={currency}
               />
             ) : (
               <ProductItem