@blocklet/payment-react 1.13.240 → 1.13.242

package/lib/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  api: true,
   CheckoutDonate: true,
   CheckoutForm: true,
   CheckoutTable: true,
@@ -17,10 +16,11 @@ var _exportNames = {
   SafeGuard: true,
   Status: true,
   Switch: true,
-  dayjs: true,
   CustomerInvoiceList: true,
   MiniInvoiceList: true,
   CustomerPaymentList: true,
+  api: true,
+  dayjs: true,
   Amount: true,
   AddressForm: true,
   CurrencySelector: true,
@@ -194,7 +194,6 @@ Object.defineProperty(exports, "translations", {
     return _locales.translations;
   }
 });
-var _api = _interopRequireDefault(require("./api"));
 var _donate = _interopRequireDefault(require("./checkout/donate"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
@@ -207,10 +206,11 @@ var _pricingTable = _interopRequireDefault(require("./components/pricing-table")
 var _safeGuard = _interopRequireDefault(require("./components/safe-guard"));
 var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
-var _dayjs = _interopRequireDefault(require("./dayjs"));
 var _list = _interopRequireDefault(require("./history/invoice/list"));
 var _list2 = _interopRequireDefault(require("./history/mini-invoice/list"));
 var _list3 = _interopRequireDefault(require("./history/payment/list"));
+var _api = _interopRequireDefault(require("./libs/api"));
+var _dayjs = _interopRequireDefault(require("./libs/dayjs"));
 var _amount = _interopRequireDefault(require("./payment/amount"));
 var _address = _interopRequireDefault(require("./payment/form/address"));
 var _currency = _interopRequireDefault(require("./payment/form/currency"));
@@ -219,7 +219,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 _util = require("./util");
+var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -243,5 +243,17 @@ Object.keys(_payment).forEach(function (key) {
     }
   });
 });
+var _subscription = require("./hooks/subscription");
+Object.keys(_subscription).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _subscription[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _subscription[key];
+    }
+  });
+});
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/{api.js → libs/api.js}

@@ -13,13 +13,16 @@ const api = _axios.default.create();
 api.interceptors.request.use(config => {
   const prefix = (0, _util.getPrefix)();
   config.baseURL = prefix || "";
-  const livemode = localStorage.getItem("livemode");
   const locale = (0, _context.getLocale)(window.blocklet?.languages);
+  const query = new URLSearchParams(config.url?.split("?").pop());
   config.params = {
     ...(config.params || {}),
-    livemode: (0, _isNull.default)(livemode) ? true : JSON.parse(livemode),
     locale
   };
+  if (typeof config.params.livemode === "undefined" && query.has("livemode") === false) {
+    const livemode = localStorage.getItem("livemode");
+    config.params.livemode = (0, _isNull.default)(livemode) ? true : JSON.parse(livemode);
+  }
   return config;
 }, err => Promise.reject(err));
 module.exports = api;

package/lib/{util.js → libs/util.js}

@@ -46,8 +46,8 @@ var _trimEnd = _interopRequireDefault(require("lodash/trimEnd"));
 var _numbro = _interopRequireDefault(require("numbro"));
 var _reactInternationalPhone = require("react-international-phone");
 var _ufo = require("ufo");
+var _locales = require("../locales");
 var _dayjs = _interopRequireDefault(require("./dayjs"));
-var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const PAYMENT_KIT_DID = exports.PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 const isPaymentKitMounted = () => {

package/lib/locales/en.js

@@ -270,6 +270,7 @@ module.exports = (0, _flat.default)({
         title: "Manage subscriptions",
         view: "View Subscription",
         current: "Current subscription",
+        viewAll: "View all",
         empty: "There are no subscriptions here",
         changePayment: "Change payment method"
       }

package/lib/locales/zh.js

@@ -270,6 +270,7 @@ module.exports = (0, _flat.default)({
         title: "\u8BA2\u9605\u7BA1\u7406",
         view: "\u7BA1\u7406\u8BA2\u9605",
         current: "\u5F53\u524D\u8BA2\u9605",
+        viewAll: "\u67E5\u770B\u6240\u6709",
         empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605",
         changePayment: "\u5207\u6362\u652F\u4ED8\u65B9\u5F0F"
       }

package/lib/payment/form/index.js

@@ -19,11 +19,12 @@ var _reactHookForm = require("react-hook-form");
 var _ufo = require("ufo");
 var _useBus = require("use-bus");
 var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
-var _api = _interopRequireDefault(require("../../api"));
 var _confirm = _interopRequireDefault(require("../../components/confirm"));
 var _input = _interopRequireDefault(require("../../components/input"));
 var _payment = require("../../contexts/payment");
-var _util = require("../../util");
+var _subscription = require("../../hooks/subscription");
+var _api = _interopRequireDefault(require("../../libs/api"));
+var _util = require("../../libs/util");
 var _addon = _interopRequireDefault(require("./addon"));
 var _address = _interopRequireDefault(require("./address"));
 var _currency = _interopRequireDefault(require("./currency"));
@@ -72,6 +73,7 @@ function PaymentForm({
     session,
     connect
   } = (0, _payment.usePaymentContext)();
+  const subscription = (0, _subscription.useSubscription)("events");
   const {
     control,
     getValues,
@@ -90,6 +92,26 @@ function PaymentForm({
   });
   const currencies = (0, _util.flattenPaymentMethods)(paymentMethods);
   const [paymentCurrencyIndex, setPaymentCurrencyIndex] = (0, _react.useState)(0);
+  const onCheckoutComplete = (0, _ahooks.useMemoizedFn)(async ({
+    response
+  }) => {
+    if (response.id === checkoutSession.id && state.paid === false) {
+      await handleConnected();
+    }
+  });
+  const onInvoicePaid = (0, _ahooks.useMemoizedFn)(async ({
+    response
+  }) => {
+    if (response.customer_id === customer?.id && state.customerLimited) {
+      await onAction();
+    }
+  });
+  (0, _react.useEffect)(() => {
+    if (subscription) {
+      subscription.on("checkout.session.completed", onCheckoutComplete);
+      subscription.on("invoice.paid", onInvoicePaid);
+    }
+  }, [subscription]);
   (0, _react.useEffect)(() => {
     if (session?.user) {
       const values = getValues();
@@ -150,11 +172,13 @@ function PaymentForm({
   const handleConnected = async () => {
     try {
       const result = await waitForCheckoutComplete(checkoutSession.id);
-      setState({
-        paid: true,
-        paying: false
-      });
-      onPaid(result);
+      if (state.paid === false) {
+        setState({
+          paid: true,
+          paying: false
+        });
+        onPaid(result);
+      }
     } catch (err) {
       _Toast.default.error((0, _util.formatError)(err));
     } finally {
@@ -208,7 +232,8 @@ function PaymentForm({
         paymentIntent: result.data.paymentIntent,
         stripeContext: result.data.stripeContext,
         customer: result.data.customer,
-        submitting: false
+        submitting: false,
+        customerLimited: false
       });
       if (["arcblock", "ethereum"].includes(method.type)) {
         setState({
@@ -465,7 +490,8 @@ function PaymentForm({
       }),
       confirm: t("payment.customer.pastDue.alert.confirm"),
       title: t("payment.customer.pastDue.alert.title"),
-      message: t("payment.customer.pastDue.alert.description")
+      message: t("payment.customer.pastDue.alert.description"),
+      color: "primary"
     })]
   });
 }

package/lib/payment/form/phone.js

@@ -11,7 +11,7 @@ var _react = require("react");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
 var _input = _interopRequireDefault(require("../../components/input"));
-var _util = require("../../util");
+var _util = require("../../libs/util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function PhoneInput({
   ...props

package/lib/payment/header.js

@@ -9,7 +9,7 @@ var _Theme = require("@arcblock/ux/lib/Theme");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _livemode = _interopRequireDefault(require("../components/livemode"));
-var _util = require("../util");
+var _util = require("../libs/util");
 var _addon = _interopRequireDefault(require("./form/addon"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function PaymentHeader({

package/lib/payment/index.js

@@ -16,9 +16,9 @@ var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _react = require("react");
 var _reactHookForm = require("react-hook-form");
-var _api = _interopRequireDefault(require("../api"));
 var _payment = require("../contexts/payment");
-var _util2 = require("../util");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util2 = require("../libs/util");
 var _error = _interopRequireDefault(require("./error"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _form = _interopRequireDefault(require("./form"));
@@ -407,6 +407,13 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     margin-top: ${props => props.mode === "standalone" ? "64px" : "0"};
   }
   .cko-product-summary {
+    width: 100%;
+  }
+  .cko-ellipsis {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .cko-payment {

package/lib/payment/product-card.js

@@ -23,6 +23,9 @@ function ProductCard({
     alignItems: "flex-start",
     spacing: 1,
     flex: 2,
+    sx: {
+      width: "100%"
+    },
     children: [logo ?
     // @ts-ignore
     /* @__PURE__ */
@@ -42,8 +45,14 @@ function ProductCard({
       direction: "column",
       alignItems: "flex-start",
       justifyContent: "space-around",
+      sx: {
+        flexShrink: 1,
+        overflow: "hidden"
+      },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "cko-ellipsis",
         variant: "body1",
+        title: name,
         sx: {
           fontWeight: 500,
           mb: 0.5,
@@ -53,6 +62,7 @@ function ProductCard({
         children: name
       }), description && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body1",
+        title: description,
         sx: {
           fontSize: "0.85rem",
           mb: 0.5,

package/lib/payment/product-item.js

@@ -9,7 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
-var _util = require("../util");
+var _util = require("../libs/util");
 var _productCard = _interopRequireDefault(require("./product-card"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 ProductItem.defaultProps = {
@@ -49,7 +49,8 @@ function ProductItem({
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
-        alignItems: "center",
+        alignItems: "flex-start",
+        spacing: 0.5,
         justifyContent: "space-between",
         sx: {
           width: "100%"

package/lib/payment/summary.js

@@ -13,9 +13,9 @@ var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _useBus = _interopRequireDefault(require("use-bus"));
-var _api = _interopRequireDefault(require("../api"));
 var _status = _interopRequireDefault(require("../components/status"));
-var _util2 = require("../util");
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util2 = require("../libs/util");
 var _amount = _interopRequireDefault(require("./amount"));
 var _productDonation = _interopRequireDefault(require("./product-donation"));
 var _productItem = _interopRequireDefault(require("./product-item"));
@@ -182,7 +182,9 @@ function PaymentSummary({
           }
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          className: "cko-ellipsis",
           component: "div",
+          title: action || headlines.action,
           sx: {
             fontWeight: 500,
             fontSize: "1.15rem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.240",
+  "version": "1.13.242",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,6 +54,7 @@
   "dependencies": {
     "@arcblock/did-connect": "^2.9.77",
     "@arcblock/ux": "^2.9.77",
+    "@arcblock/ws": "^1.18.116",
     "@mui/icons-material": "^5.15.16",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.16",
@@ -90,7 +91,7 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.240",
+    "@blocklet/payment-types": "1.13.242",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -119,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "02b0f1dc4e711c889dd88f7ace2b56062c5d2f0e"
+  "gitHead": "ec356f3a242ca99c4f86cc2707dc7057c3f2c38d"
 }

package/src/checkout/donate.tsx

@@ -27,10 +27,10 @@ import omit from 'lodash/omit';
 import uniqBy from 'lodash/unionBy';
 import { useEffect } from 'react';
 
-import api from '../api';
 import TxLink from '../components/blockchain/tx';
+import api from '../libs/api';
+import { formatBNStr, formatDateTime, formatError } from '../libs/util';
 import { CheckoutProps } from '../types';
-import { formatBNStr, formatDateTime, formatError } from '../util';
 import CheckoutForm from './form';
 
 export type DonateHistory = {
@@ -61,10 +61,10 @@ const createOrUpdateDonation = (settings: DonationSettings, livemode: boolean =
 };
 
 const supporterCache: { [key: string]: Promise<DonateHistory> } = {};
-const fetchSupporters = (target: string): Promise<DonateHistory> => {
+const fetchSupporters = (target: string, livemode: boolean = true): Promise<DonateHistory> => {
   if (!supporterCache[target]) {
     supporterCache[target] = api
-      .get('/api/donations', { params: { target } })
+      .get('/api/donations', { params: { target, livemode } })
       .then((res) => res.data)
       .finally(() => {
         setTimeout(() => {
@@ -178,7 +178,9 @@ export default function CheckoutDonate({ settings, livemode, onPaid, onError }:
   });
 
   const donation = useRequest(() => createOrUpdateDonation(settings, livemode));
-  const supporters = useRequest(() => (donation.data ? fetchSupporters(donation.data.id) : Promise.resolve({})));
+  const supporters = useRequest(() =>
+    donation.data ? fetchSupporters(donation.data.id, livemode) : Promise.resolve({})
+  );
 
   useEffect(() => {
     if (donation.data && state.supporterLoaded === false) {

package/src/checkout/form.tsx

@@ -4,10 +4,10 @@ import noop from 'lodash/noop';
 import { useEffect } from 'react';
 import { joinURL } from 'ufo';
 
-import api from '../api';
+import api from '../libs/api';
+import { getPrefix, mergeExtraParams } from '../libs/util';
 import Payment from '../payment';
 import { CheckoutContext, CheckoutProps } from '../types';
-import { getPrefix, mergeExtraParams } from '../util';
 
 const promises: { [key: string]: Promise<any> } = {};
 const startFromPaymentLink = (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {

package/src/checkout/table.tsx

@@ -6,11 +6,11 @@ import { Box } from '@mui/system';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
 
-import api from '../api';
 import Livemode from '../components/livemode';
 import PricingTable from '../components/pricing-table';
+import api from '../libs/api';
+import { mergeExtraParams } from '../libs/util';
 import { CheckoutProps } from '../types';
-import { mergeExtraParams } from '../util';
 import CheckoutForm from './form';
 
 const fetchData = async (id: string): Promise<TPricingTableExpanded> => {

package/src/components/blockchain/gas.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 
 import { usePaymentContext } from '../../contexts/payment';
-import { getTxLink } from '../../util';
+import { getTxLink } from '../../libs/util';
 
 TxGas.defaultProps = {};
 

package/src/components/blockchain/tx.tsx

@@ -3,7 +3,7 @@ import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Link, Stack, Typography } from '@mui/material';
 
-import { getTxLink } from '../../util';
+import { getTxLink } from '../../libs/util';
 
 TxLink.defaultProps = {
   mode: 'dashboard',

package/src/components/confirm.tsx

@@ -9,6 +9,7 @@ export default function ConfirmDialog({
   title,
   message,
   confirm,
+  color,
   cancel,
   loading,
 }: {
@@ -17,7 +18,8 @@ export default function ConfirmDialog({
   title: string | React.ReactNode;
   message: string | React.ReactNode;
   confirm?: string | React.ReactNode;
-  cancel?: string | React.ReactNode;
+  color?: string;
+  cancel?: boolean | string | React.ReactNode;
   loading?: boolean;
 }) {
   const { t } = useLocaleContext();
@@ -30,9 +32,10 @@ export default function ConfirmDialog({
       onCancel={onCancel}
       confirmButton={{
         text: confirm || t('common.confirm'),
-        props: { color: 'error', size: 'small', variant: 'contained', disabled: !!loading },
+        props: { color, size: 'small', variant: 'contained', disabled: !!loading },
       }}
-      cancelButton={{ text: cancel || t('common.cancel'), props: { color: 'inherit', size: 'small' } }}>
+      cancelButton={{ text: cancel || t('common.cancel'), props: { color: 'inherit', size: 'small' } }}
+      showCancelButton={typeof cancel !== 'boolean' || !!cancel}>
       <Typography>{message}</Typography>
     </Confirm>
   );
@@ -42,4 +45,5 @@ ConfirmDialog.defaultProps = {
   loading: false,
   confirm: '',
   cancel: '',
+  color: 'error',
 };

package/src/components/pricing-table.tsx

@@ -20,8 +20,8 @@ import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect, useState } from 'react';
 
+import { formatError, formatPriceAmount, formatRecurring } from '../libs/util';
 import Amount from '../payment/amount';
-import { formatError, formatPriceAmount, formatRecurring } from '../util';
 
 const groupItemsByRecurring = (items: TPricingTableItem[]) => {
   const grouped: { [key: string]: TPricingTableItem[] } = {};

package/src/components/safe-guard.tsx

@@ -1,4 +1,4 @@
-import { PAYMENT_KIT_DID, isPaymentKitMounted } from '../util';
+import { PAYMENT_KIT_DID, isPaymentKitMounted } from '../libs/util';
 
 export default function SafeGuard({ children }: { children: any }) {
   const mounted = isPaymentKitMounted();

package/src/contexts/payment.tsx

@@ -4,8 +4,8 @@ import { useLocalStorageState, useRequest } from 'ahooks';
 import type { Axios } from 'axios';
 import { createContext, useContext } from 'react';
 
-import api from '../api';
-import { getPrefix } from '../util';
+import api from '../libs/api';
+import { getPrefix } from '../libs/util';
 
 const prefix = getPrefix();