@blocklet/payment-react 1.13.296 → 1.13.298

package/es/components/pricing-item.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { TProductExpanded } from '@blocklet/payment-types';
+import { PricingRenderProps } from '../types';
+export type PricingItemProps = {
+    productId: string;
+    quantity: number;
+    priceId: string | undefined;
+    children?: (pricing: PricingRenderProps, product?: TProductExpanded | undefined) => React.ReactNode;
+};
+declare function PricingItem({ productId, quantity, children, priceId }: PricingItemProps): import("react").JSX.Element;
+declare namespace PricingItem {
+    var defaultProps: {
+        children: null;
+    };
+}
+export default PricingItem;

package/es/components/pricing-item.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useRequest } from "ahooks";
+import { CircularProgress, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useMemo } from "react";
+import Toast from "@arcblock/ux/lib/Toast";
+import { Box } from "@mui/system";
+import api from "../libs/api.js";
+import { formatError, formatTotalPrice } from "../libs/util.js";
+const fetchProduct = (productId) => {
+  return api.get(`/api/products/${productId}`).then((res) => res.data);
+};
+function PricingItem({ productId, quantity, children, priceId }) {
+  const { locale } = useLocaleContext();
+  const { data: productInfo, loading = false } = useRequest(() => fetchProduct(productId), {
+    refreshDeps: [productId],
+    onSuccess: (res) => {
+      if (!res) {
+        Toast.error(formatError(new Error("Product not found")));
+      }
+    },
+    onError: (err) => {
+      Toast.error(formatError(err));
+    }
+  });
+  const pricing = useMemo(
+    () => formatTotalPrice({
+      product: productInfo,
+      quantity,
+      priceId,
+      locale
+    }),
+    [productInfo, quantity, priceId, locale]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  return /* @__PURE__ */ jsx(Box, { children: children ? children(pricing, productInfo) : /* @__PURE__ */ jsx(Typography, { children: pricing?.totalPrice }) });
+}
+PricingItem.defaultProps = {
+  children: null
+};
+export default PricingItem;

package/es/index.d.ts

@@ -22,9 +22,10 @@ import StripeForm from './payment/form/stripe';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
+import PricingItem from './components/pricing-item';
 export * from './libs/util';
 export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, };
+export { 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, };

package/es/index.js

@@ -22,6 +22,7 @@ import StripeForm from "./payment/form/stripe.js";
 import Payment from "./payment/index.js";
 import ProductSkeleton from "./payment/product-skeleton.js";
 import PaymentSummary from "./payment/summary.js";
+import PricingItem from "./components/pricing-item.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
 export * from "./contexts/payment.js";
@@ -51,5 +52,6 @@ export {
   CustomerPaymentList,
   TxLink,
   TxGas,
-  SafeGuard
+  SafeGuard,
+  PricingItem
 };

package/es/libs/util.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import { PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
@@ -69,3 +70,9 @@ export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails
 };
 export declare function getQueryParams(url: string): Record<string, string>;
 export declare function lazyLoad(lazyRun: () => void): void;
+export declare function formatTotalPrice({ product, quantity, priceId, locale, }: {
+    product: TProductExpanded;
+    quantity: number;
+    priceId?: string;
+    locale: string;
+}): PricingRenderProps;

package/es/libs/util.js

@@ -636,3 +636,39 @@ export function lazyLoad(lazyRun) {
     lazyRun();
   }, 0);
 }
+export function formatTotalPrice({
+  product,
+  quantity = 1,
+  priceId,
+  locale = "en"
+}) {
+  const { prices = [], default_price_id: defaultPriceId } = product ?? { prices: [], default_price_id: "" };
+  const price = prices?.find((x) => x.id === (priceId || defaultPriceId));
+  if (!price || !product) {
+    return {
+      totalPrice: "0",
+      unitPrice: "",
+      quantity: t("common.qty", locale, { count: quantity }),
+      totalAmount: "0"
+    };
+  }
+  const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
+  const currency = price?.currency ?? {};
+  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+  const appendUnit = (v, alt) => {
+    if (product.unit_label) {
+      return `${v}/${price.product.unit_label}`;
+    }
+    if (price.recurring?.usage_type === "metered" || quantity === 1) {
+      return alt;
+    }
+    return quantity ? t("common.each", locale, { unit }) : "";
+  };
+  return {
+    totalPrice: total,
+    unitPrice: appendUnit(total, ""),
+    quantity: t("common.qty", locale, { count: quantity }),
+    totalAmount: unitValue.mul(new BN(quantity)).toString()
+  };
+}

package/es/locales/en.js

@@ -113,7 +113,7 @@ export default flat({
         between: "Please enter an amount between {min} and {max}.",
         custom: "Custom Amount",
         select: "Select Amount",
-        summary: "{total} supporters {totalAmount}{symbol}",
+        summary: "{total} supporters {totalAmount} {symbol}",
         empty: "No supporters yet"
       },
       cardPay: "{action} with card",

package/es/locales/zh.js

@@ -113,7 +113,7 @@ export default flat({
         between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
         custom: "\u8F93\u5165\u91D1\u989D",
         select: "\u9009\u62E9\u91D1\u989D",
-        summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount}{symbol}",
+        summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount} {symbol}",
         empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B"
       },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",

package/es/types/index.d.ts

@@ -36,3 +36,9 @@ export type CheckoutCallbacks = {
     onChange?: (data: CheckoutFormData) => void;
     goBack?: () => void;
 };
+export type PricingRenderProps = {
+    totalPrice: string;
+    unitPrice?: string;
+    quantity: string;
+    totalAmount: string;
+};

package/lib/components/pricing-item.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { TProductExpanded } from '@blocklet/payment-types';
+import { PricingRenderProps } from '../types';
+export type PricingItemProps = {
+    productId: string;
+    quantity: number;
+    priceId: string | undefined;
+    children?: (pricing: PricingRenderProps, product?: TProductExpanded | undefined) => React.ReactNode;
+};
+declare function PricingItem({ productId, quantity, children, priceId }: PricingItemProps): import("react").JSX.Element;
+declare namespace PricingItem {
+    var defaultProps: {
+        children: null;
+    };
+}
+export default PricingItem;

package/lib/components/pricing-item.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _ahooks = require("ahooks");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _react = require("react");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _system = require("@mui/system");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const fetchProduct = productId => {
+  return _api.default.get(`/api/products/${productId}`).then(res => res.data);
+};
+function PricingItem({
+  productId,
+  quantity,
+  children,
+  priceId
+}) {
+  const {
+    locale
+  } = (0, _context.useLocaleContext)();
+  const {
+    data: productInfo,
+    loading = false
+  } = (0, _ahooks.useRequest)(() => fetchProduct(productId), {
+    refreshDeps: [productId],
+    onSuccess: res => {
+      if (!res) {
+        _Toast.default.error((0, _util.formatError)(new Error("Product not found")));
+      }
+    },
+    onError: err => {
+      _Toast.default.error((0, _util.formatError)(err));
+    }
+  });
+  const pricing = (0, _react.useMemo)(() => (0, _util.formatTotalPrice)({
+    product: productInfo,
+    quantity,
+    priceId,
+    locale
+  }), [productInfo, quantity, priceId, locale]);
+  if (loading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_system.Box, {
+    children: children ? children(pricing, productInfo) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: pricing?.totalPrice
+    })
+  });
+}
+PricingItem.defaultProps = {
+  children: null
+};
+module.exports = PricingItem;

package/lib/index.d.ts

@@ -22,9 +22,10 @@ import StripeForm from './payment/form/stripe';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
+import PricingItem from './components/pricing-item';
 export * from './libs/util';
 export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, };
+export { 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, };

package/lib/index.js

@@ -28,6 +28,7 @@ var _exportNames = {
   Payment: true,
   ProductSkeleton: true,
   PaymentSummary: true,
+  PricingItem: true,
   translations: true,
   createTranslator: true
 };
@@ -115,6 +116,12 @@ Object.defineProperty(exports, "PhoneInput", {
     return _phone.default;
   }
 });
+Object.defineProperty(exports, "PricingItem", {
+  enumerable: true,
+  get: function () {
+    return _pricingItem.default;
+  }
+});
 Object.defineProperty(exports, "PricingTable", {
   enumerable: true,
   get: function () {
@@ -211,6 +218,7 @@ var _stripe = _interopRequireDefault(require("./payment/form/stripe"));
 var _index = _interopRequireDefault(require("./payment/index"));
 var _productSkeleton = _interopRequireDefault(require("./payment/product-skeleton"));
 var _summary = _interopRequireDefault(require("./payment/summary"));
+var _pricingItem = _interopRequireDefault(require("./components/pricing-item"));
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/libs/util.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import { PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
 export declare const getPrefix: () => string;
@@ -69,3 +70,9 @@ export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails
 };
 export declare function getQueryParams(url: string): Record<string, string>;
 export declare function lazyLoad(lazyRun: () => void): void;
+export declare function formatTotalPrice({ product, quantity, priceId, locale, }: {
+    product: TProductExpanded;
+    quantity: number;
+    priceId?: string;
+    locale: string;
+}): PricingRenderProps;

package/lib/libs/util.js

@@ -20,6 +20,7 @@ exports.formatSubscriptionProduct = formatSubscriptionProduct;
 exports.formatTime = formatTime;
 exports.formatToDate = formatToDate;
 exports.formatToDatetime = formatToDatetime;
+exports.formatTotalPrice = formatTotalPrice;
 exports.formatUpsellSaving = formatUpsellSaving;
 exports.getCheckoutAmount = getCheckoutAmount;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
@@ -756,4 +757,52 @@ function lazyLoad(lazyRun) {
   setTimeout(() => {
     lazyRun();
   }, 0);
+}
+function formatTotalPrice({
+  product,
+  quantity = 1,
+  priceId,
+  locale = "en"
+}) {
+  const {
+    prices = [],
+    default_price_id: defaultPriceId
+  } = product ?? {
+    prices: [],
+    default_price_id: ""
+  };
+  const price = prices?.find(x => x.id === (priceId || defaultPriceId));
+  if (!price || !product) {
+    return {
+      totalPrice: "0",
+      unitPrice: "",
+      quantity: (0, _locales.t)("common.qty", locale, {
+        count: quantity
+      }),
+      totalAmount: "0"
+    };
+  }
+  const unitValue = new _util.BN(price.custom_unit_amount || price.unit_amount);
+  const currency = price?.currency ?? {};
+  const total = `${(0, _util.fromUnitToToken)(unitValue.mul(new _util.BN(quantity)), currency.decimal)} ${currency.symbol}`;
+  const unit = `${(0, _util.fromUnitToToken)(unitValue, currency.decimal)} ${currency.symbol}`;
+  const appendUnit = (v, alt) => {
+    if (product.unit_label) {
+      return `${v}/${price.product.unit_label}`;
+    }
+    if (price.recurring?.usage_type === "metered" || quantity === 1) {
+      return alt;
+    }
+    return quantity ? (0, _locales.t)("common.each", locale, {
+      unit
+    }) : "";
+  };
+  return {
+    totalPrice: total,
+    unitPrice: appendUnit(total, ""),
+    quantity: (0, _locales.t)("common.qty", locale, {
+      count: quantity
+    }),
+    totalAmount: unitValue.mul(new _util.BN(quantity)).toString()
+  };
 }

package/lib/locales/en.js

@@ -120,7 +120,7 @@ module.exports = (0, _flat.default)({
         between: "Please enter an amount between {min} and {max}.",
         custom: "Custom Amount",
         select: "Select Amount",
-        summary: "{total} supporters {totalAmount}{symbol}",
+        summary: "{total} supporters {totalAmount} {symbol}",
         empty: "No supporters yet"
       },
       cardPay: "{action} with card",

package/lib/locales/zh.js

@@ -120,7 +120,7 @@ module.exports = (0, _flat.default)({
         between: "\u91D1\u989D\u5FC5\u987B\u5927\u4E8E {min} \u4E14\u5C0F\u4E8E {max}",
         custom: "\u8F93\u5165\u91D1\u989D",
         select: "\u9009\u62E9\u91D1\u989D",
-        summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount}{symbol}",
+        summary: "\u5171\u6709 {total} \u4EBA\u652F\u6301 {totalAmount} {symbol}",
         empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B"
       },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",

package/lib/types/index.d.ts

@@ -36,3 +36,9 @@ export type CheckoutCallbacks = {
     onChange?: (data: CheckoutFormData) => void;
     goBack?: () => void;
 };
+export type PricingRenderProps = {
+    totalPrice: string;
+    unitPrice?: string;
+    quantity: string;
+    totalAmount: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.296",
+  "version": "1.13.298",
   "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.13.296",
+    "@blocklet/payment-types": "1.13.298",
     "@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": "e0f0556ce4ed8833464248e00250c09dbde2c5a9"
+  "gitHead": "85dd6105a19723e06405eebb4bcc6ffddc2cd7aa"
 }

package/src/components/pricing-item.tsx

@@ -0,0 +1,57 @@
+import { useRequest } from 'ahooks';
+import { CircularProgress, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TProductExpanded } from '@blocklet/payment-types';
+import { useMemo } from 'react';
+import Toast from '@arcblock/ux/lib/Toast';
+import { Box } from '@mui/system';
+import api from '../libs/api';
+import { formatError, formatTotalPrice } from '../libs/util';
+import { PricingRenderProps } from '../types';
+
+const fetchProduct = (productId: string): Promise<TProductExpanded> => {
+  return api.get(`/api/products/${productId}`).then((res) => res.data);
+};
+
+export type PricingItemProps = {
+  productId: string;
+  quantity: number;
+  priceId: string | undefined;
+  children?: (pricing: PricingRenderProps, product?: TProductExpanded | undefined) => React.ReactNode;
+};
+
+function PricingItem({ productId, quantity, children, priceId }: PricingItemProps) {
+  const { locale } = useLocaleContext();
+
+  const { data: productInfo, loading = false } = useRequest(() => fetchProduct(productId), {
+    refreshDeps: [productId],
+    onSuccess: (res) => {
+      if (!res) {
+        Toast.error(formatError(new Error('Product not found')));
+      }
+    },
+    onError: (err: any) => {
+      Toast.error(formatError(err));
+    },
+  });
+
+  const pricing: PricingRenderProps = useMemo(
+    () =>
+      formatTotalPrice({
+        product: productInfo!,
+        quantity,
+        priceId,
+        locale,
+      }),
+    [productInfo, quantity, priceId, locale]
+  );
+  if (loading) {
+    return <CircularProgress />;
+  }
+  return <Box>{children ? children(pricing, productInfo) : <Typography>{pricing?.totalPrice}</Typography>}</Box>;
+}
+
+PricingItem.defaultProps = {
+  children: null,
+};
+export default PricingItem;

package/src/index.ts

@@ -22,6 +22,7 @@ import StripeForm from './payment/form/stripe';
 import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
+import PricingItem from './components/pricing-item';
 
 export * from './libs/util';
 export * from './libs/connect';
@@ -55,4 +56,5 @@ export {
   TxLink,
   TxGas,
   SafeGuard,
+  PricingItem,
 };

package/src/libs/util.ts

@@ -10,6 +10,7 @@ import type {
   TPaymentMethod,
   TPaymentMethodExpanded,
   TPrice,
+  TProductExpanded,
   TSubscriptionExpanded,
   TSubscriptionItemExpanded,
 } from '@blocklet/payment-types';
@@ -23,6 +24,7 @@ import { joinURL } from 'ufo';
 
 import { t } from '../locales';
 import dayjs from './dayjs';
+import { PricingRenderProps } from '../types';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
@@ -824,3 +826,49 @@ export function lazyLoad(lazyRun: () => void) {
     lazyRun();
   }, 0);
 }
+
+export function formatTotalPrice({
+  product,
+  quantity = 1,
+  priceId,
+  locale = 'en',
+}: {
+  product: TProductExpanded;
+  quantity: number;
+  priceId?: string;
+  locale: string;
+}): PricingRenderProps {
+  const { prices = [], default_price_id: defaultPriceId } = product ?? { prices: [], default_price_id: '' };
+  const price = prices?.find((x) => x.id === (priceId || defaultPriceId));
+  if (!price || !product) {
+    return {
+      totalPrice: '0',
+      unitPrice: '',
+      quantity: t('common.qty', locale, { count: quantity }),
+      totalAmount: '0',
+    };
+  }
+  const unitValue = new BN(price.custom_unit_amount || price.unit_amount);
+  const currency: TPaymentCurrency = price?.currency ?? {};
+
+  const total = `${fromUnitToToken(unitValue.mul(new BN(quantity)), currency.decimal)} ${currency.symbol}`;
+
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
+
+  const appendUnit = (v: string, alt: string) => {
+    if (product.unit_label) {
+      return `${v}/${price.product.unit_label}`;
+    }
+    if (price.recurring?.usage_type === 'metered' || quantity === 1) {
+      return alt;
+    }
+    return quantity ? t('common.each', locale, { unit }) : '';
+  };
+
+  return {
+    totalPrice: total,
+    unitPrice: appendUnit(total, ''),
+    quantity: t('common.qty', locale, { count: quantity }),
+    totalAmount: unitValue.mul(new BN(quantity)).toString(),
+  };
+}

package/src/locales/en.tsx

@@ -116,7 +116,7 @@ export default flat({
         between: 'Please enter an amount between {min} and {max}.',
         custom: 'Custom Amount',
         select: 'Select Amount',
-        summary: '{total} supporters {totalAmount}{symbol}',
+        summary: '{total} supporters {totalAmount} {symbol}',
         empty: 'No supporters yet',
       },
       cardPay: '{action} with card',

package/src/locales/zh.tsx

@@ -115,7 +115,7 @@ export default flat({
         between: '金额必须大于 {min} 且小于 {max}',
         custom: '输入金额',
         select: '选择金额',
-        summary: '共有 {total} 人支持 {totalAmount}{symbol}',
+        summary: '共有 {total} 人支持 {totalAmount} {symbol}',
         empty: '❤️ 支持一下',
       },
       cardPay: '使用卡片{action}',

package/src/types/index.ts

@@ -47,3 +47,10 @@ export type CheckoutCallbacks = {
   onChange?: (data: CheckoutFormData) => void;
   goBack?: () => void;
 };
+
+export type PricingRenderProps = {
+  totalPrice: string;
+  unitPrice?: string;
+  quantity: string;
+  totalAmount: string;
+};