@blocklet/launcher-workflow 2.2.53 → 2.2.55

package/lib/locales/en.js

@@ -31,7 +31,11 @@ var _default = exports.default = {
     pay: 'Pay',
     payWith: 'Pay with {currency}',
     popular: 'Popular',
-    space: 'Space'
+    serviceError: 'Service Failed',
+    space: 'Space',
+    subscription: 'Subscription',
+    price: 'Pricing',
+    unitPrice: 'Unit'
   },
   license: {
     title: 'End User License Agreement',
@@ -111,6 +115,8 @@ var _default = exports.default = {
     redeem: 'Select purchased space',
     noProducts: 'No products available for purchase, please check your payment-kit config',
     serverlessNotSupported: 'This app is not allowed in sigular and on-demand space, please select dedicated space',
+    componentCount: '{count} Component Included',
+    componentsCount: '{count} Components Included',
     dialog: {
       title: 'Purchase Blocklet Space NFT',
       scan: 'Scan the QR code below with your DID wallet to complete purchase',
@@ -127,6 +133,13 @@ var _default = exports.default = {
       continue: 'Continue',
       content: 'You have an incomplete order {blockletName}, Continue this order?',
       notRemind: 'No more reminders'
+    },
+    productType: {
+      'on-demand': 'On Demand Space',
+      dedicated: 'Dedicated Space'
+    },
+    paid: {
+      redirecting: 'Payment success, redirecting...'
     }
   },
   checkout: {
@@ -136,6 +149,8 @@ var _default = exports.default = {
     paymentMethod: {
       title: 'Select payment currency'
     },
-    agreement: '{name} User Agreement'
+    agreement: '{name} User Agreement',
+    estimatedCost: 'Estimated Cost',
+    estimatedCostHint: 'The total cost will vary depending on the actual number and duration of components used in the application. The calculation method is: Unit price of component * Number of components * Duration.'
   }
 };

package/lib/locales/index.js

@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.translations = void 0;
+var _paymentReact = require("@blocklet/payment-react");
 var _flat = _interopRequireDefault(require("flat"));
+var _lodash = _interopRequireDefault(require("lodash.merge"));
 var _en = _interopRequireDefault(require("./en"));
 var _zh = _interopRequireDefault(require("./zh"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable import/prefer-default-export */
 
-const translations = exports.translations = {
+const translations = exports.translations = (0, _lodash.default)({
   en: (0, _flat.default)(_en.default),
   zh: (0, _flat.default)(_zh.default)
-};
+}, _paymentReact.translations);

package/lib/locales/zh.js

@@ -30,8 +30,12 @@ var _default = exports.default = {
     pay: '支付',
     previous: '上一步',
     popular: '推荐',
+    price: '价格',
+    serviceError: '服务出错',
     space: '空间',
-    payWith: '用{currency}支付'
+    subscription: '订阅',
+    payWith: '用{currency}支付',
+    unitPrice: '单价'
   },
   license: {
     title: '空间用户协议',
@@ -69,7 +73,7 @@ var _default = exports.default = {
       success: '正在启动'
     },
     error: {
-      launchFailed: '空间空间失败',
+      launchFailed: '启动空间失败',
       launchFailedDescription: '您可以点击下面按钮重试',
       notFound: '没有正在启动的空间',
       notFoundDescription: '您可以点击下面按钮启动空间'
@@ -110,6 +114,8 @@ var _default = exports.default = {
     hasPlan: '选用{name}',
     noProducts: '没有可购买的商品，请检查 PaymentKit 的配置',
     serverlessNotSupported: '该应用被禁止能在单应用或者按需空间中运行，请选择专用空间',
+    componentCount: '共 {count} 个组件',
+    componentsCount: '共 {count} 个组件',
     dialog: {
       title: '购买 Blocklet Server NFT',
       scan: '用您的 DID 钱包扫描下面的二维码完成购买',
@@ -126,6 +132,13 @@ var _default = exports.default = {
       continue: '继续',
       content: '您有一个未完成的订单: {blockletName}，继续该订单？',
       notRemind: '不再提醒'
+    },
+    productType: {
+      'on-demand': '按需空间',
+      dedicated: '专用空间'
+    },
+    paid: {
+      redirecting: '支付成功，正在跳转...'
     }
   },
   checkout: {
@@ -135,6 +148,8 @@ var _default = exports.default = {
     paymentMethod: {
       title: '选择支付货币'
     },
-    agreement: '{name} 用户协议'
+    agreement: '{name} 用户协议',
+    estimatedCost: '估算成本',
+    estimatedCostHint: '总成本会根据应用实际使用的组件数量和时长而变化，计算方式为: 组件单价*组件数量*时长'
   }
 };

package/lib/paid.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PurchaseSuccess;
+var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
+var _constant = require("@blocklet/launcher-util/lib/constant");
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _locale = require("./contexts/locale");
+var _request = _interopRequireDefault(require("./contexts/request"));
+var _workflow = require("./contexts/workflow");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PurchaseSuccess() {
+  const [params, setParams] = (0, _reactRouterDom.useSearchParams)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const {
+    routerPrefix
+  } = (0, _workflow.useWorkflowContext)();
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  const {
+    api
+  } = (0, _request.default)();
+  const sessionId = params.get('sessionId');
+  const {
+    loading,
+    data,
+    cancel
+  } = (0, _ahooks.useRequest)(() => api.get("/launches/".concat(sessionId)).then(res => {
+    var _res$data;
+    return (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.launch;
+  }), {
+    pollingInterval: 2000
+  });
+  (0, _react.useEffect)(() => {
+    if ((data === null || data === void 0 ? void 0 : data.status) >= _constant.LAUNCH_STATUS.nftMinted) {
+      cancel();
+    }
+  }, [data, cancel]);
+  (0, _react.useEffect)(() => {
+    if ((data === null || data === void 0 ? void 0 : data.status) >= _constant.LAUNCH_STATUS.nftMinted) {
+      params.set('launchType', data.type);
+      navigate({
+        pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(data._id)),
+        search: params.toString()
+      });
+    }
+  }, [data, params, navigate, sessionId, routerPrefix, setParams]);
+  const completed = !loading && (data === null || data === void 0 ? void 0 : data.status) >= _constant.LAUNCH_STATUS.nftMinted;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Center.default, {
+    relative: "parent",
+    children: [!completed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {}), completed && t('purchase.paid.redirecting')]
+  });
+}

package/lib/prepare.js

@@ -0,0 +1,299 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
+var _util = require("@blocklet/launcher-util/es/util");
+var _onDemand = _interopRequireDefault(require("@blocklet/launcher-ux/lib/payment/checkout/on-demand"));
+var _paymentReact = require("@blocklet/payment-react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _ToggleButton = _interopRequireDefault(require("@mui/material/ToggleButton"));
+var _ToggleButtonGroup = _interopRequireDefault(require("@mui/material/ToggleButtonGroup"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
+var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _body = _interopRequireDefault(require("./components/layout/body"));
+var _header = _interopRequireDefault(require("./components/layout/header"));
+var _locale = require("./contexts/locale");
+var _request = _interopRequireDefault(require("./contexts/request"));
+var _session = require("./contexts/session");
+var _workflow = require("./contexts/workflow");
+var _util2 = require("./util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const Root = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  padding-top: 0;\n\n  @media (max-width: 960px) {\n    width: 100%;\n  }\n"])));
+function Content(_ref) {
+  var _window$blocklet, _window$blocklet2, _window$blocklet3, _window$blocklet4;
+  let {
+    blocklet
+  } = _ref;
+  const [state, setState] = (0, _useSetState.default)({
+    productType: 'on-demand'
+  });
+  const [params, setParams] = (0, _reactRouterDom.useSearchParams)();
+  const {
+    session,
+    connectApi
+  } = (0, _session.useSessionContext)();
+  const {
+    api: launchSessionAPI
+  } = (0, _request.default)();
+  const {
+    routerPrefix
+  } = (0, _workflow.useWorkflowContext)();
+  const {
+    t,
+    locale
+  } = (0, _locale.useLocaleContext)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const sessionId = params.get('sessionId');
+  const blockletMetaUrl = params.get('blocklet_meta_url');
+  const defaultProductType = params.get('product_type');
+  const productTypes = ['on-demand'];
+  if ((_window$blocklet = window.blocklet) !== null && _window$blocklet !== void 0 && (_window$blocklet = _window$blocklet.preferences) !== null && _window$blocklet !== void 0 && _window$blocklet.dedicatedPricingTableId) {
+    productTypes.push('dedicated');
+  }
+  (0, _react.useEffect)(() => {
+    if (defaultProductType) {
+      setState({
+        productType: defaultProductType
+      });
+      params.set('product_type', defaultProductType);
+      setParams(params, {
+        replace: true
+      });
+    }
+  }, [defaultProductType, params, setParams, setState]);
+  const getLaunchState = (0, _useAsync.default)(async () => {
+    const createPromiseFn = function createPromiseFn(fn) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      return new Promise((resolve, reject) => {
+        fn(...args, (err, value) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve(value);
+          }
+        });
+      });
+    };
+    if (sessionId) {
+      const launch = await createPromiseFn(_util2.launchSession.load, launchSessionAPI, routerPrefix, sessionId, blockletMetaUrl);
+      return launch;
+    }
+    const launch = await createPromiseFn(_util2.launchSession.create, launchSessionAPI, routerPrefix, blockletMetaUrl);
+    return launch;
+  });
+  (0, _react.useEffect)(() => {
+    const tmpLaunch = getLaunchState.value;
+    if (!tmpLaunch) {
+      return;
+    }
+    if (tmpLaunch._id !== params.get('sessionId')) {
+      params.set('sessionId', tmpLaunch._id);
+      setParams(params, {
+        replace: true
+      });
+    }
+  }, [getLaunchState.value, params, setParams]);
+  if (getLaunchState.loading || blocklet.loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
+      relative: "parent",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+    });
+  }
+  if (getLaunchState.error) {
+    return t('common.serviceError');
+  }
+  const handlePaid = () => {
+    navigate("/paid?&sessionId=".concat(launch._id, "&blocklet_meta_url=").concat(launch.blockletMetaUrl));
+  };
+  const handleChangeProductType = (a, newProductType) => {
+    if (!newProductType) {
+      return;
+    }
+    setState({
+      productType: newProductType
+    });
+    params.set('product_type', newProductType);
+    setParams(params, {
+      replace: true
+    });
+  };
+
+  // TODO: PaymentKitV2 处理支付失败的情况
+
+  const launch = getLaunchState.value;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
+      direction: "column",
+      sx: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonGroup.default, {
+        orientation: "horizontal",
+        color: "primary",
+        value: state.productType,
+        size: "small",
+        onChange: handleChangeProductType,
+        exclusive: true,
+        children: productTypes.map(type => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButton.default, {
+            value: type,
+            sx: {
+              textTransform: 'capitalize'
+            },
+            children: t("purchase.productType.".concat(type))
+          }, type);
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          width: '100%',
+          height: '100%',
+          marginTop: '24px',
+          '@media (min-width: 1200px)': {
+            maxWidth: '960px'
+          },
+          '@media (max-width: 1200px)': {
+            maxWidth: '100%'
+          }
+        },
+        children: [state.productType === 'on-demand' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_onDemand.default, {
+          launchSessionId: sessionId,
+          handlePaid: handlePaid,
+          components: (blocklet.components || []).map(x => ({
+            did: x.meta.did,
+            title: x.meta.title,
+            description: x.meta.description,
+            logo: (0, _util.getBlockletLogoUrl)({
+              did: x.meta.did,
+              baseUrl: blocklet.registryUrl,
+              logoPath: x.meta.logo
+            })
+          })),
+          blockletStoreURL: blocklet.registryUrl,
+          connectApi: connectApi,
+          session: session,
+          t: t,
+          locale: locale,
+          api: launchSessionAPI,
+          checkoutPath: "/payment/checkout"
+        }), state.productType === 'dedicated' && ((_window$blocklet2 = window.blocklet) === null || _window$blocklet2 === void 0 || (_window$blocklet2 = _window$blocklet2.preferences) === null || _window$blocklet2 === void 0 ? void 0 : _window$blocklet2.dedicatedPricingTableId) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          sx: {
+            display: 'flex',
+            width: '100%',
+            justifyContent: 'center',
+            '& .cko-container': {
+              justifyContent: 'center !important'
+            },
+            '& .cko-payment': {
+              gap: '8px'
+            },
+            '& >div>div': {
+              paddingTop: 0
+            },
+            '& .price-table-item': {
+              boxShadow: 'none'
+            },
+            '& .cko-payment-methods': {
+              marginTop: 0,
+              '&>p': {
+                marginBottom: 0
+              }
+            },
+            '& .cko-payment-submit': {
+              marginTop: 0,
+              '& button': {
+                fontSize: '1rem !important'
+              }
+            }
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.PaymentProvider, {
+            session: session,
+            connect: connectApi,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.CheckoutTable, {
+              id: (_window$blocklet3 = window.blocklet) === null || _window$blocklet3 === void 0 || (_window$blocklet3 = _window$blocklet3.preferences) === null || _window$blocklet3 === void 0 ? void 0 : _window$blocklet3.dedicatedPricingTableId,
+              mode: "inline",
+              extraParams: {
+                'metadata.session_id': launch._id,
+                'subscription_data.trial_end': (0, _util.getDefaultTrialEnd)(),
+                'subscription_data.days_until_due': 0,
+                'subscription_data.days_until_cancel': ((_window$blocklet4 = window.blocklet) === null || _window$blocklet4 === void 0 || (_window$blocklet4 = _window$blocklet4.preferences) === null || _window$blocklet4 === void 0 ? void 0 : _window$blocklet4.daysUntilCancel) || 30
+              },
+              onPaid: handlePaid
+            })
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          component: _reactRouterDom.Link,
+          sx: {
+            color: 'text.secondary',
+            marginTop: '24px',
+            marginBottom: '12px',
+            '&:hover': {
+              textDecoration: 'underline !important'
+            }
+          },
+          to: (0, _urlJoin.default)(routerPrefix, "/purchase/select".concat(window.location.search)),
+          children: t('purchase.selectSpaceHint')
+        })
+      })]
+    })
+  });
+}
+function PreparePage(_ref2) {
+  let {
+    blocklet
+  } = _ref2;
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      height: '100%'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+      title: t('purchase.pageTitle'),
+      disableBack: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          height: '100%'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+          blocklet: blocklet
+        })
+      })
+    })]
+  });
+}
+const propTypes = {
+  blocklet: _propTypes.default.object.isRequired
+};
+PreparePage.propTypes = propTypes;
+Content.propTypes = propTypes;
+var _default = exports.default = PreparePage;

package/lib/purchase.js

@@ -42,12 +42,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 /* eslint-disable react-hooks/exhaustive-deps */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var NextIcon = function NextIcon(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "2.2.53",
+  "version": "2.2.55",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -41,44 +41,49 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.9.29",
-    "@arcblock/icons": "^2.9.29",
-    "@arcblock/license": "^2.9.29",
-    "@arcblock/react-hooks": "^2.9.29",
-    "@arcblock/ux": "^2.9.29",
-    "@blocklet/launcher-layout": "2.2.53",
-    "@blocklet/launcher-util": "2.2.53",
-    "@blocklet/launcher-ux": "2.2.53",
-    "@blocklet/payment": "^1.13.137",
-    "@emotion/react": "^11.11.3",
+    "@arcblock/did-connect": "^2.9.57",
+    "@arcblock/icons": "^2.9.57",
+    "@arcblock/license": "^2.9.57",
+    "@arcblock/react-hooks": "^2.9.57",
+    "@arcblock/ux": "^2.9.57",
+    "@blocklet/launcher-layout": "2.2.55",
+    "@blocklet/launcher-util": "2.2.55",
+    "@blocklet/launcher-ux": "2.2.55",
+    "@blocklet/payment": "^1.13.190",
+    "@blocklet/payment-react": "^1.13.190",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.8",
-    "@mui/material": "^5.15.7",
-    "@ocap/util": "^1.18.110",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/lab": "^5.0.0-alpha.169",
+    "@mui/material": "^5.15.14",
+    "@ocap/util": "^1.18.113",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
     "@splidejs/splide-extension-grid": "^0.4.1",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.54.2",
+    "ahooks": "^3.7.10",
     "axios": "^0.27.2",
     "dsbridge": "^3.1.4",
     "flat": "^5.0.2",
     "js-cookie": "^3.0.5",
     "lodash.get": "^4.4.2",
+    "lodash.merge": "^4.6.2",
     "lodash.noop": "^3.0.1",
     "lodash.pick": "^4.4.0",
     "lodash.throttle": "^4.1.1",
+    "moment": "^2.30.1",
     "prop-types": "^15.8.1",
     "react-lottie-player": "^1.5.6",
-    "react-router-dom": "^6.22.0",
+    "react-router-dom": "^6.22.3",
     "react-use": "^17.5.0",
     "url-join": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "glob": "^10.3.10",
     "jest": "^27.5.1"
@@ -101,5 +106,5 @@
       "require": "./lib/locales/index.js"
     }
   },
-  "gitHead": "9438d2bb74c7eb19567e0fc86d78f43357287851"
+  "gitHead": "83daa20f7a51626f804cc9e4f54cdcd90d51e2d8"
 }