payment-kit 1.13.36 → 1.13.38

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.36
+version: 1.13.38
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.36",
+  "version": "1.13.38",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -42,25 +42,25 @@
   "dependencies": {
     "@arcblock/did": "^1.18.93",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.8.2",
+    "@arcblock/did-connect": "^2.8.5",
     "@arcblock/did-util": "^1.18.93",
-    "@arcblock/ux": "^2.8.2",
+    "@arcblock/ux": "^2.8.5",
     "@blocklet/logger": "1.16.17-beta-952ef53d",
     "@blocklet/sdk": "1.16.17-beta-952ef53d",
-    "@blocklet/ui-react": "^2.8.2",
+    "@blocklet/ui-react": "^2.8.5",
     "@blocklet/uploader": "^0.0.32",
-    "@mui/icons-material": "^5.14.13",
-    "@mui/lab": "^5.0.0-alpha.148",
-    "@mui/material": "^5.14.13",
-    "@mui/styles": "^5.14.13",
-    "@mui/system": "^5.14.13",
+    "@mui/icons-material": "^5.14.15",
+    "@mui/lab": "^5.0.0-alpha.150",
+    "@mui/material": "^5.14.15",
+    "@mui/styles": "^5.14.15",
+    "@mui/system": "^5.14.15",
     "@ocap/asset": "^1.18.93",
     "@ocap/client": "^1.18.93",
     "@ocap/mcrypto": "^1.18.93",
     "@ocap/util": "^1.18.93",
     "@ocap/wallet": "^1.18.93",
     "@stripe/react-stripe-js": "^2.3.1",
-    "@stripe/stripe-js": "^2.1.7",
+    "@stripe/stripe-js": "^2.1.10",
     "ahooks": "^3.7.8",
     "axios": "^0.27.2",
     "body-parser": "^1.20.2",
@@ -88,11 +88,11 @@
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.47.0",
     "react-international-phone": "^3.1.2",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.17.0",
     "rimraf": "^3.0.2",
     "sequelize": "^6.33.0",
     "sqlite3": "^5.1.6",
-    "stripe": "^13.10.0",
+    "stripe": "^13.11.0",
     "typewriter-effect": "^2.21.0",
     "ufo": "^1.3.1",
     "umzug": "^3.3.1",
@@ -103,18 +103,18 @@
     "@abtnode/types": "1.16.17-beta-952ef53d",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.36",
-    "@types/cookie-parser": "^1.4.4",
-    "@types/cors": "^2.8.14",
-    "@types/dotenv-flow": "^3.3.1",
-    "@types/express": "^4.17.19",
-    "@types/node": "^18.18.5",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
+    "@did-pay/types": "1.13.38",
+    "@types/cookie-parser": "^1.4.5",
+    "@types/cors": "^2.8.15",
+    "@types/dotenv-flow": "^3.3.2",
+    "@types/express": "^4.17.20",
+    "@types/node": "^18.18.7",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@vitejs/plugin-react": "^2.2.0",
     "bumpp": "^8.2.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "import-sort-style-module": "^6.0.0",
     "lint-staged": "^12.5.0",
     "nodemon": "^2.0.22",
@@ -122,9 +122,9 @@
     "prettier": "^2.8.8",
     "prettier-plugin-import-sort": "^0.0.7",
     "ts-node": "^10.9.1",
-    "type-fest": "^4.4.0",
+    "type-fest": "^4.6.0",
     "typescript": "^4.9.5",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vite-plugin-blocklet": "^0.6.15",
     "vite-plugin-node-polyfills": "^0.7.0",
     "vite-plugin-svgr": "^2.4.0",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "9f921f0988c77ca3d0e9c6f383631f6e61fcd32f"
+  "gitHead": "961b898e9ee66e55ffcbd9247987812f6ed61fe3"
 }

package/src/components/checkout/product-item.tsx

@@ -30,8 +30,8 @@ export default function ProductItem({ item, session, currency, onUpsell, onDowns
           description={item.price.product?.description}
           extra={
             item.price.type === 'recurring' && item.price.recurring
-              ? `Billed ${formatRecurring(item.upsell_price?.recurring || item.price.recurring)} ${metered}`
-              : undefined
+              ? [pricing.quantity, `billed ${formatRecurring(item.upsell_price?.recurring || item.price.recurring)} ${metered}`].filter(Boolean).join(', ') // prettier-ignore
+              : pricing.quantity
           }
         />
         <Stack direction="column" alignItems="flex-end" flex={1}>

package/src/libs/util.ts

@@ -258,33 +258,51 @@ export function formatLineItemPricing(
   item: TLineItemExpanded,
   currency: TPaymentCurrency,
   trial: number
-): { primary: string; secondary?: string } {
+): { primary: string; secondary?: string; quantity: string } {
   const price = item.upsell_price || item.price;
-  const amount = fromUnitToToken(
+
+  let quantity = `Qty ${item.quantity}`;
+  if (price.recurring?.usage_type === 'metered' || +item.quantity === 1) {
+    quantity = '';
+  }
+
+  const total = `${fromUnitToToken(
     new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(item.quantity)),
     currency.decimal
-  ).toString();
+  )} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+
+  const appendUnit = (v: string, alt: string) => {
+    if (price.product.unit_label) {
+      return `${v} / ${price.product.unit_label}`;
+    }
+    if (price.recurring?.usage_type === 'metered' || item.quantity === 1) {
+      return alt;
+    }
+
+    return quantity ? `${unit} each` : '';
+  };
 
   if (price.type === 'recurring' && price.recurring) {
     if (trial > 0) {
-      const secondary = price.product.unit_label
-        ? `${amount} ${currency.symbol} / ${price.product.unit_label}`
-        : `${amount} ${currency.symbol}`;
       return {
         primary: `Free for ${trial} days`,
-        secondary: `${secondary} ${formatRecurring(price.recurring, false, '/')}`,
+        secondary: `${appendUnit(total, total)} ${formatRecurring(price.recurring, false, '/')}`,
+        quantity,
       };
     }
 
     return {
-      primary: `${amount} ${currency.symbol}`,
-      secondary: price.product.unit_label ? `${amount} ${currency.symbol} / ${price.product.unit_label}` : '',
+      primary: total,
+      secondary: appendUnit(total, ''),
+      quantity,
     };
   }
 
   return {
-    primary: `${amount} ${currency.symbol}`,
-    secondary: price.product.unit_label ? `${amount} ${currency.symbol} / ${price.product.unit_label}` : '',
+    primary: total,
+    secondary: appendUnit(total, ''),
+    quantity,
   };
 }