@blocklet/payment-react 1.13.283 → 1.13.285

package/es/components/pricing-table.js

@@ -46,15 +46,23 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   const {
     settings: { paymentMethods = [] }
   } = usePaymentContext();
-  const [currency, setCurrency] = useState(table.currency);
+  const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = groupItemsByRecurring(table.items);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
-    const { payment_currencies: paymentCurrencies = [] } = paymentMethods[0];
-    return paymentCurrencies.reduce((acc, x) => {
-      acc[x.id] = x;
-      return acc;
-    }, {});
+    if (!paymentMethods || paymentMethods.length === 0) {
+      return {};
+    }
+    const ans = {};
+    paymentMethods.forEach((paymentMethod) => {
+      const { payment_currencies: paymentCurrencies = [] } = paymentMethod;
+      if (paymentCurrencies && paymentCurrencies.length > 0) {
+        paymentCurrencies.forEach((x) => {
+          ans[x.id] = x;
+        });
+      }
+    });
+    return ans;
   }, [paymentMethods]);
   const currencyList = useMemo(() => {
     const visited = {};
@@ -66,7 +74,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         visited[c?.currency_id] = true;
       });
     });
-    return Object.keys(visited).map((x) => currencyMap[x]);
+    return Object.keys(visited).map((x) => currencyMap[x]).filter((v) => v);
   }, [currencyMap, grouped, state.interval]);
   useEffect(() => {
     if (table) {
@@ -164,11 +172,11 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           currencyList.length > 1 && /* @__PURE__ */ jsx(
             Select,
             {
-              value: currency.id,
-              onChange: (e) => setCurrency(currencyList.find((v) => v.id === e.target.value)),
+              value: currency?.id,
+              onChange: (e) => setCurrency(currencyList.find((v) => v?.id === e.target.value)),
               size: "small",
               sx: { m: 1, width: 120 },
-              children: currencyList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.id, children: /* @__PURE__ */ jsx(Typography, { color: x.id === currency.id ? "text.primary" : "text.secondary", children: x.symbol }) }, x.id))
+              children: currencyList.map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x?.id, children: /* @__PURE__ */ jsx(Typography, { color: x?.id === currency?.id ? "text.primary" : "text.secondary", children: x?.symbol }) }, x?.id))
             }
           )
         ] }),
@@ -314,7 +322,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                           )
                         ] }, f.name))
                       ] }) }),
-                      /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect, currencyId: currency.id })
+                      /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect, currencyId: currency?.id })
                     ]
                   },
                   x?.price_id

package/es/libs/constant.d.ts

@@ -0,0 +1,4 @@
+export declare const RefundType: {
+    refund: string;
+    stakeReturn: string;
+};

package/es/libs/constant.js

@@ -0,0 +1,4 @@
+export const RefundType = {
+  refund: "refund",
+  stakeReturn: "stake_return"
+};

package/es/libs/util.js

@@ -205,11 +205,9 @@ export function formatLineItemPricing(item, currency, trial, locale = "en") {
   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
-  )} ${currency.symbol}`;
-  const unit = `${fromUnitToToken(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+  const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
+  const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
   const appendUnit = (v, alt) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;

package/es/locales/en.js

@@ -1,4 +1,5 @@
 import flat from "flat";
+import { RefundType } from "../libs/constant.js";
 export default flat({
   common: {
     id: "ID",
@@ -79,7 +80,8 @@ export default flat({
     days: "days",
     weeks: "weeks",
     months: "months",
-    years: "years"
+    years: "years",
+    type: "type"
   },
   payment: {
     checkout: {
@@ -283,5 +285,11 @@ export default flat({
         upcoming: "Upcoming invoice"
       }
     }
+  },
+  refund: {
+    type: {
+      [RefundType.refund]: "Refund",
+      [RefundType.stakeReturn]: "Stake Return"
+    }
   }
 });

package/es/locales/zh.js

@@ -1,4 +1,5 @@
 import flat from "flat";
+import { RefundType } from "../libs/constant.js";
 export default flat({
   common: {
     id: "ID",
@@ -79,7 +80,8 @@ export default flat({
     days: "\u5929",
     weeks: "\u5468",
     months: "\u6708",
-    years: "\u5E74"
+    years: "\u5E74",
+    type: "\u7C7B\u578B"
   },
   payment: {
     checkout: {
@@ -283,5 +285,11 @@ export default flat({
         upcoming: "\u672A\u6765\u8D26\u5355"
       }
     }
+  },
+  refund: {
+    type: {
+      [RefundType.refund]: "\u9000\u6B3E",
+      [RefundType.stakeReturn]: "\u9000\u62BC\u91D1"
+    }
   }
 });

package/es/payment/index.js

@@ -326,7 +326,9 @@ export const Root = styled(Box)`
     position: absolute;
     right: 0;
     top: 0;
-    transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
+    transition:
+      background-color 0.15s ease,
+      box-shadow 0.15s ease-out;
   }
   .cko-product {
     margin-top: ${(props) => props.mode === "standalone" ? "64px" : "0"};

package/lib/components/pricing-table.js

@@ -54,7 +54,7 @@ function PricingTable({
       paymentMethods = []
     }
   } = (0, _payment.usePaymentContext)();
-  const [currency, setCurrency] = (0, _react.useState)(table.currency);
+  const [currency, setCurrency] = (0, _react.useState)(table.currency || {});
   const {
     recurring,
     grouped
@@ -63,13 +63,21 @@ function PricingTable({
     interval
   });
   const currencyMap = (0, _react.useMemo)(() => {
-    const {
-      payment_currencies: paymentCurrencies = []
-    } = paymentMethods[0];
-    return paymentCurrencies.reduce((acc, x) => {
-      acc[x.id] = x;
-      return acc;
-    }, {});
+    if (!paymentMethods || paymentMethods.length === 0) {
+      return {};
+    }
+    const ans = {};
+    paymentMethods.forEach(paymentMethod => {
+      const {
+        payment_currencies: paymentCurrencies = []
+      } = paymentMethod;
+      if (paymentCurrencies && paymentCurrencies.length > 0) {
+        paymentCurrencies.forEach(x => {
+          ans[x.id] = x;
+        });
+      }
+    });
+    return ans;
   }, [paymentMethods]);
   const currencyList = (0, _react.useMemo)(() => {
     const visited = {};
@@ -81,7 +89,7 @@ function PricingTable({
         visited[c?.currency_id] = true;
       });
     });
-    return Object.keys(visited).map(x => currencyMap[x]);
+    return Object.keys(visited).map(x => currencyMap[x]).filter(v => v);
   }, [currencyMap, grouped, state.interval]);
   (0, _react.useEffect)(() => {
     if (table) {
@@ -176,20 +184,20 @@ function PricingTable({
             children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
           }, x))
         }), currencyList.length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
-          value: currency.id,
-          onChange: e => setCurrency(currencyList.find(v => v.id === e.target.value)),
+          value: currency?.id,
+          onChange: e => setCurrency(currencyList.find(v => v?.id === e.target.value)),
           size: "small",
           sx: {
             m: 1,
             width: 120
           },
           children: currencyList.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.MenuItem, {
-            value: x.id,
+            value: x?.id,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              color: x.id === currency.id ? "text.primary" : "text.secondary",
-              children: x.symbol
+              color: x?.id === currency?.id ? "text.primary" : "text.secondary",
+              children: x?.symbol
             })
-          }, x.id))
+          }, x?.id))
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         flexWrap: "wrap",
@@ -337,7 +345,7 @@ function PricingTable({
               x,
               action,
               onSelect,
-              currencyId: currency.id
+              currencyId: currency?.id
             })]
           }, x?.price_id);
         })

package/lib/libs/constant.d.ts

@@ -0,0 +1,4 @@
+export declare const RefundType: {
+    refund: string;
+    stakeReturn: string;
+};

package/lib/libs/constant.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RefundType = void 0;
+const RefundType = exports.RefundType = {
+  refund: "refund",
+  stakeReturn: "stake_return"
+};

package/lib/libs/util.js

@@ -264,8 +264,9 @@ function formatLineItemPricing(item, currency, trial, locale = "en") {
   if (price.recurring?.usage_type === "metered" || +item.quantity === 1) {
     quantity = "";
   }
-  const total = `${(0, _util.fromUnitToToken)(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
-  const unit = `${(0, _util.fromUnitToToken)(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+  const unitValue = new _util.BN(getPriceUintAmountByCurrency(price, currency));
+  const total = `${(0, _util.fromUnitToToken)(unitValue.mul(new _util.BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
+  const unit = `${(0, _util.fromUnitToToken)(unitValue, currency.decimal)} ${currency.symbol}`;
   const appendUnit = (v, alt) => {
     if (price.product.unit_label) {
       return `${v}/${price.product.unit_label}`;

package/lib/locales/en.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _flat = _interopRequireDefault(require("flat"));
+var _constant = require("../libs/constant");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 module.exports = (0, _flat.default)({
   common: {
@@ -86,7 +87,8 @@ module.exports = (0, _flat.default)({
     days: "days",
     weeks: "weeks",
     months: "months",
-    years: "years"
+    years: "years",
+    type: "type"
   },
   payment: {
     checkout: {
@@ -290,5 +292,11 @@ module.exports = (0, _flat.default)({
         upcoming: "Upcoming invoice"
       }
     }
+  },
+  refund: {
+    type: {
+      [_constant.RefundType.refund]: "Refund",
+      [_constant.RefundType.stakeReturn]: "Stake Return"
+    }
   }
 });

package/lib/locales/zh.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _flat = _interopRequireDefault(require("flat"));
+var _constant = require("../libs/constant");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 module.exports = (0, _flat.default)({
   common: {
@@ -86,7 +87,8 @@ module.exports = (0, _flat.default)({
     days: "\u5929",
     weeks: "\u5468",
     months: "\u6708",
-    years: "\u5E74"
+    years: "\u5E74",
+    type: "\u7C7B\u578B"
   },
   payment: {
     checkout: {
@@ -290,5 +292,11 @@ module.exports = (0, _flat.default)({
         upcoming: "\u672A\u6765\u8D26\u5355"
       }
     }
+  },
+  refund: {
+    type: {
+      [_constant.RefundType.refund]: "\u9000\u6B3E",
+      [_constant.RefundType.stakeReturn]: "\u9000\u62BC\u91D1"
+    }
   }
 });

package/lib/payment/index.js

@@ -401,7 +401,9 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     position: absolute;
     right: 0;
     top: 0;
-    transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
+    transition:
+      background-color 0.15s ease,
+      box-shadow 0.15s ease-out;
   }
   .cko-product {
     margin-top: ${props => props.mode === "standalone" ? "64px" : "0"};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.283",
+  "version": "1.13.285",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -86,12 +86,12 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/eslint-config-ts": "^0.3.0",
+    "@arcblock/eslint-config-ts": "^0.3.2",
     "@babel/cli": "^7.24.7",
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.13.283",
+    "@blocklet/payment-types": "1.13.285",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -107,7 +107,7 @@
     "glob": "^10.4.1",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.2",
     "prettier-plugin-import-sort": "^0.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "6c88365a990a15695b990346d88289372d0700cc"
+  "gitHead": "d95d4a86102a7394461680849860140aa372ab06"
 }

package/src/components/pricing-table.tsx

@@ -64,15 +64,23 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
   const {
     settings: { paymentMethods = [] },
   } = usePaymentContext();
-  const [currency, setCurrency] = useState(table.currency);
+  const [currency, setCurrency] = useState(table.currency || {});
   const { recurring, grouped } = groupItemsByRecurring(table.items);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
-    const { payment_currencies: paymentCurrencies = [] } = paymentMethods[0];
-    return paymentCurrencies.reduce((acc: any, x: { id: string; symbol: string }) => {
-      acc[x.id] = x;
-      return acc;
-    }, {});
+    if (!paymentMethods || paymentMethods.length === 0) {
+      return {};
+    }
+    const ans: { [key: string]: any } = {};
+    paymentMethods.forEach((paymentMethod) => {
+      const { payment_currencies: paymentCurrencies = [] } = paymentMethod;
+      if (paymentCurrencies && paymentCurrencies.length > 0) {
+        paymentCurrencies.forEach((x: { id: string; symbol: string }) => {
+          ans[x.id] = x;
+        });
+      }
+    });
+    return ans;
   }, [paymentMethods]);
 
   const currencyList = useMemo(() => {
@@ -85,7 +93,9 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         visited[c?.currency_id] = true;
       });
     });
-    return Object.keys(visited).map((x) => currencyMap[x]);
+    return Object.keys(visited)
+      .map((x) => currencyMap[x])
+      .filter((v) => v);
   }, [currencyMap, grouped, state.interval]);
 
   useEffect(() => {
@@ -182,13 +192,15 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           )}
           {currencyList.length > 1 && (
             <Select
-              value={currency.id}
-              onChange={(e) => setCurrency(currencyList.find((v) => v.id === e.target.value))}
+              value={currency?.id}
+              onChange={(e) => setCurrency(currencyList.find((v) => v?.id === e.target.value))}
               size="small"
               sx={{ m: 1, width: 120 }}>
               {currencyList.map((x) => (
-                <MenuItem key={x.id} value={x.id}>
-                  <Typography color={x.id === currency.id ? 'text.primary' : 'text.secondary'}>{x.symbol}</Typography>
+                <MenuItem key={x?.id} value={x?.id}>
+                  <Typography color={x?.id === currency?.id ? 'text.primary' : 'text.secondary'}>
+                    {x?.symbol}
+                  </Typography>
                 </MenuItem>
               ))}
             </Select>
@@ -324,7 +336,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                       </List>
                     </Box>
                   )}
-                  <Subscribe x={x} action={action} onSelect={onSelect} currencyId={currency.id} />
+                  <Subscribe x={x} action={action} onSelect={onSelect} currencyId={currency?.id} />
                 </Stack>
               );
             }

package/src/libs/constant.ts

@@ -0,0 +1,4 @@
+export const RefundType = {
+  refund: 'refund',
+  stakeReturn: 'stake_return',
+};

package/src/libs/util.ts

@@ -298,11 +298,11 @@ export function formatLineItemPricing(
     quantity = '';
   }
 
-  const total = `${fromUnitToToken(
-    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(item.quantity)),
-    currency.decimal
-  )} ${currency.symbol}`;
-  const unit = `${fromUnitToToken(getPriceUintAmountByCurrency(price, currency))} ${currency.symbol}`;
+  const unitValue = new BN(getPriceUintAmountByCurrency(price, currency));
+
+  const total = `${fromUnitToToken(unitValue.mul(new BN(item.quantity)), currency.decimal)} ${currency.symbol}`;
+
+  const unit = `${fromUnitToToken(unitValue, currency.decimal)} ${currency.symbol}`;
 
   const appendUnit = (v: string, alt: string) => {
     if (price.product.unit_label) {

package/src/locales/en.tsx

@@ -1,5 +1,7 @@
 import flat from 'flat';
 
+import { RefundType } from '../libs/constant';
+
 export default flat({
   common: {
     id: 'ID',
@@ -81,6 +83,7 @@ export default flat({
     weeks: 'weeks',
     months: 'months',
     years: 'years',
+    type: 'type',
   },
   payment: {
     checkout: {
@@ -295,4 +298,10 @@ export default flat({
       },
     },
   },
+  refund: {
+    type: {
+      [RefundType.refund]: 'Refund',
+      [RefundType.stakeReturn]: 'Stake Return',
+    },
+  },
 });

package/src/locales/zh.tsx

@@ -1,5 +1,7 @@
 import flat from 'flat';
 
+import { RefundType } from '../libs/constant';
+
 export default flat({
   common: {
     id: 'ID',
@@ -81,6 +83,7 @@ export default flat({
     weeks: '周',
     months: '月',
     years: '年',
+    type: '类型',
   },
   payment: {
     checkout: {
@@ -287,4 +290,10 @@ export default flat({
       },
     },
   },
+  refund: {
+    type: {
+      [RefundType.refund]: '退款',
+      [RefundType.stakeReturn]: '退押金',
+    },
+  },
 });

package/src/payment/index.tsx

@@ -381,7 +381,9 @@ export const Root = styled(Box)<{ mode: LiteralUnion<'standalone' | 'inline' | '
     position: absolute;
     right: 0;
     top: 0;
-    transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
+    transition:
+      background-color 0.15s ease,
+      box-shadow 0.15s ease-out;
   }
   .cko-product {
     margin-top: ${(props) => (props.mode === 'standalone' ? '64px' : '0')};