@blocklet/launcher-workflow 1.9.64 → 2.0.0

package/lib/components/{instance-operation.js → launch-dedicated.js}

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = OperationPage;
+exports.default = LaunchDedicated;
 var _react = require("react");
 var _reactRouterDom = require("react-router-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _lodash = _interopRequireDefault(require("lodash.get"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
 var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
 var _lodash2 = _interopRequireDefault(require("lodash.throttle"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
@@ -15,13 +16,13 @@ var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _AnimationWaiter = _interopRequireDefault(require("@arcblock/ux/lib/AnimationWaiter"));
 var _constant = require("@blocklet/launcher-util/lib/constant");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
 var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
 var _progressMessage = _interopRequireDefault(require("@blocklet/launcher-ux/lib/progress-message"));
 var _util = require("../util");
 var _query = _interopRequireDefault(require("../hooks/query"));
 var _request = _interopRequireDefault(require("../contexts/request"));
-var _router = _interopRequireDefault(require("../contexts/router"));
 var _locale = require("../contexts/locale");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3;
@@ -42,7 +43,7 @@ const STATUS = {
   notFoundError: 11,
   launchFailedError: 12
 };
-function OperationPage(_ref) {
+function LaunchDedicated(_ref) {
   let {
     type,
     routerPrefix
@@ -70,6 +71,56 @@ function OperationPage(_ref) {
     createServerTime = Date.now();
     sessionStorage.setItem("launcher-create-server-".concat(nftId, "-time"), createServerTime);
   }
+  const handleInstance = instance => {
+    if (instance.status >= _constant.INSTANCE_STATUS.running) {
+      var _window$blocklet;
+      const url = (0, _util.getLaunchBlockletUrl)({
+        serverUrl: instance.serverUrl,
+        blockletMetaUrl,
+        locale,
+        chainHost: (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST
+      });
+      setIsDone(true);
+      setTimeout(() => {
+        setLaunchState(pre => _objectSpread(_objectSpread({}, pre), {}, {
+          status: STATUS.success,
+          appUrl: url
+        }));
+        (0, _util.loadURL)(url).finally(() => {
+          setTimeout(() => {
+            window.location.href = url;
+          }, 1000);
+        });
+      }, 1000);
+    }
+  };
+  const launch = async () => {
+    try {
+      setLaunchState(pre => _objectSpread(_objectSpread({}, pre), {}, {
+        status: STATUS.launching
+      }));
+      const {
+        data: {
+          instance
+        }
+      } = await api.post('/instances/launch', {
+        nftId
+      }, {
+        params: {
+          launchType: query.get('launchType')
+        }
+      });
+      handleInstance(instance);
+    } catch (err) {
+      const errDesc = (0, _util.getAPIResponseError)(err);
+      if (errDesc === 'Unauthorized') {
+        // TODO: 如果没有授权，要求用户提供 NFT
+        _Toast.default.error(t('launchPrepare.error.loginFirst'));
+      } else {
+        _Toast.default.error(errDesc);
+      }
+    }
+  };
   const getInstanceStatus = async () => {
     try {
       const {
@@ -77,27 +128,7 @@ function OperationPage(_ref) {
           instance
         }
       } = await api.get("/public/instances/".concat(nftId, "/status"));
-      if (instance.status >= _constant.INSTANCE_STATUS.running) {
-        var _window$blocklet;
-        const url = (0, _util.getLaunchBlockletUrl)({
-          serverUrl: instance.serverUrl,
-          blockletMetaUrl,
-          locale,
-          chainHost: (_window$blocklet = window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.CHAIN_HOST
-        });
-        setIsDone(true);
-        setTimeout(() => {
-          setLaunchState(pre => _objectSpread(_objectSpread({}, pre), {}, {
-            status: STATUS.success,
-            appUrl: url
-          }));
-          (0, _util.loadURL)(url).finally(() => {
-            setTimeout(() => {
-              window.location.href = url;
-            }, 1000);
-          });
-        }, 1000);
-      }
+      handleInstance(instance);
     } catch (error) {
       sessionStorage.removeItem("launcher-create-server-".concat(nftId, "-time"));
       if ((0, _lodash.default)(error, 'response.status') === 404 && launchState.status !== STATUS.launching) {
@@ -115,19 +146,6 @@ function OperationPage(_ref) {
   };
   const poll = (0, _lodash2.default)(getInstanceStatus, 5000);
   (0, _useInterval.default)(poll, launchState.status === STATUS.launching && nftId ? 5000 : null);
-  (0, _react.useEffect)(() => {
-    if (!nftId) {
-      return;
-    }
-    getInstanceStatus().then(() => {
-      if (launchState.status !== STATUS.success) {
-        setLaunchState(state => _objectSpread(_objectSpread({}, state), {}, {
-          status: STATUS.launching
-        }));
-      }
-    });
-  }, [nftId]); // eslint-disable-line
-
   const successful = launchState.status === STATUS.success;
   const progressSteps = [t('launch.waiting.starting'), t('launch.waiting.securing'), t('launch.waiting.prepare'), t('launch.waiting.waiting'), t('launch.waiting.done')];
   const messageDuration = 40000;
@@ -148,13 +166,15 @@ function OperationPage(_ref) {
     const timer = setInterval(() => {
       fixStepIndex();
     }, 1000);
+    launch();
     return () => clearInterval(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pageHeader.default, {
-      title: t("".concat(type, ".title")),
-      className: "launch-page-header ".concat(successful ? 'header-hide' : '')
+      title: t('launch.pageTitle'),
+      className: "launch-page-header ".concat(successful ? 'header-hide' : ''),
+      disableBack: true
     }), launchState.status === STATUS.waiting && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "center",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
@@ -198,7 +218,7 @@ function OperationPage(_ref) {
         variant: "contained",
         className: "button",
         component: _reactRouterDom.Link,
-        to: (0, _router.default)(routerPrefix, "/prepare/".concat(nftId).concat(window.location.search)),
+        to: (0, _urlJoin.default)(routerPrefix, "/prepare/".concat(nftId).concat(window.location.search)),
         children: t('common.retry')
       })
     }), launchState.status === STATUS.notFoundError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, {
@@ -209,8 +229,7 @@ function OperationPage(_ref) {
         color: "primary",
         variant: "contained",
         className: "button",
-        component: _reactRouterDom.Link,
-        to: (0, _router.default)(routerPrefix, "/prepare/".concat(nftId).concat(window.location.search)),
+        onClick: launch,
         children: t('common.launch')
       })
     })]
@@ -219,11 +238,11 @@ function OperationPage(_ref) {
 const LinkEle = _styled.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 36px;\n  color: ", ";\n"])), props => props.theme.palette.primary.main);
 const WaiterContainer = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: #1dc1c7;\n"])));
 const Content = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: auto;\n  height: 100%;\n\n  .link {\n    color: ", ";\n  }\n\n  .link:hover {\n    text-decoration: underline !important;\n  }\n\n  .status {\n    color: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    .status-spinner {\n      color: inherit !important;\n    }\n\n    .status-text {\n      display: inline-block;\n      padding: 0 20px;\n      max-width: 420px;\n      margin-top: 24px;\n      text-align: center;\n    }\n  }\n\n  .button {\n    min-width: 150px;\n    margin-bottom: 100px;\n  }\n  .center {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n  }\n  .launch-page-header {\n    transition: all ease 0.3s;\n    &.header-hide {\n      opacity: 0;\n    }\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
-OperationPage.propTypes = {
+LaunchDedicated.propTypes = {
   type: _propTypes.default.oneOf(['launch', 'start']),
   routerPrefix: _propTypes.default.string
 };
-OperationPage.defaultProps = {
+LaunchDedicated.defaultProps = {
   type: 'launch',
   routerPrefix: ''
 };

package/lib/components/{prepare-serverless.js → launch-serverless.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = PrepareServerless;
+exports.default = LaunchServerless;
 var _react = require("react");
 var _reactRouterDom = require("react-router-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +19,7 @@ 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) } })); }
-function PrepareServerless(_ref) {
+function LaunchServerless(_ref) {
   let {
     nftId
   } = _ref;
@@ -51,8 +51,8 @@ function PrepareServerless(_ref) {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_pageHeader.default, {
-      title: t('prepare.serverless.title'),
-      onClickBack: ""
+      title: t('launch.pageTitle'),
+      disableBack: true
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "page-body",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -78,6 +78,6 @@ function PrepareServerless(_ref) {
   });
 }
 const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  .page-logo {\n    display: flex;\n    justify-content: center;\n    margin-top: 62px;\n    ", " {\n      margin-top: 48px;\n    }\n  }\n\n  .page-body {\n    .content {\n      display: flex;\n      align-items: center;\n      flex-direction: column;\n      text-align: center;\n      margin-top: 64px;\n\n      .loading-description {\n        margin-top: 8px;\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'));
-PrepareServerless.propTypes = {
+LaunchServerless.propTypes = {
   nftId: _propTypes.default.string.isRequired
 };

package/lib/components/layout/body.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Body;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+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) } })); }
+function Body(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "page-body-article",
+      children: children
+    })
+  });
+}
+Body.propTypes = {
+  children: _propTypes.default.any.isRequired
+};
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin-top: 32px;\n\n  .page-body-article {\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    display: flex;\n    flex-direction: column;\n  }\n"])));

package/lib/components/layout/footer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Footer;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["children"];
+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) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function Footer(_ref) {
+  let {
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({}, rest), {}, {
+    children: children
+  }));
+}
+Footer.propTypes = {
+  children: _propTypes.default.any.isRequired
+};
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  margin-top: auto;\n  width: 100%;\n"])));

package/lib/components/layout/header.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Header;
+var _reactRouterDom = require("react-router-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Header(_ref) {
+  let {
+    title,
+    disableBack
+  } = _ref;
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const clickBack = () => {
+    navigate(-1);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pageHeader.default, {
+    title: title,
+    onClickBack: clickBack,
+    disableBack: disableBack
+  });
+}
+Header.propTypes = {
+  title: _propTypes.default.any,
+  disableBack: _propTypes.default.bool
+};
+Header.defaultProps = {
+  title: '',
+  disableBack: false
+};

package/lib/components/layout/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Layout;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["children"];
+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) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function Layout(_ref) {
+  let {
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // layout-fix-container for compatibility with lower versions of safari, do not remove this className
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({
+    className: "layout-fix-container"
+  }, rest), {}, {
+    children: children
+  }));
+}
+Layout.propTypes = {
+  children: _propTypes.default.any.isRequired
+};
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  padding: 0 32px 32px;\n\n  @media (max-width: 768px) {\n    padding: 0 16px 16px;\n  }\n"])));

package/lib/components/plan.js

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _launcherUtil = require("@blocklet/launcher-util");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
+var _util = require("../../lib/util");
+var _locale = require("../contexts/locale");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+const _excluded = ["plan", "productFeatures", "toc", "checked", "recommend"];
+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) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var CpuIcon = function CpuIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      width: "40",
+      height: "40",
+      rx: "20",
+      fill: "#FEAF49"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      opacity: ".34",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20.15 23.6a.9.9 0 0 1 .9.9v2.1a.9.9 0 0 1-1.8 0v-2.1a.9.9 0 0 1 .9-.9Z",
+      fill: "#fff"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.25 29c0-1.597 1.303-2.9 2.9-2.9h6c1.597 0 2.9 1.303 2.9 2.9v1.9h-11.8V29Zm2.9-1.1c-.603 0-1.1.497-1.1 1.1v.1h8.2V29c0-.603-.497-1.1-1.1-1.1h-6Z",
+      fill: "#fff"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M13.25 30a.9.9 0 0 1 .9-.9h12a.9.9 0 0 1 0 1.8h-12a.9.9 0 0 1-.9-.9ZM17 10.9a3.099 3.099 0 0 0-3.1 3.1v3c0 3.373 2.727 6.1 6.1 6.1 3.373 0 6.1-2.727 6.1-6.1v-3c0-1.713-1.387-3.1-3.1-3.1h-6ZM12.1 14c0-2.707 2.193-4.9 4.9-4.9h6c2.707 0 4.9 2.193 4.9 4.9v3c0 4.367-3.533 7.9-7.9 7.9a7.895 7.895 0 0 1-7.9-7.9v-3Z",
+      fill: "#fff"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      opacity: ".34",
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12.016 13.333a1.572 1.572 0 0 0-1.077 1.517c0 1.035.405 1.96 1.09 2.79a7.935 7.935 0 0 1-.04-.79v-3c0-.173.009-.346.027-.517ZM9.139 14.85c0-1.897 1.503-3.4 3.4-3.4h.65a.9.9 0 0 1 .825 1.259 2.858 2.858 0 0 0-.225 1.141v3c0 .872.183 1.691.507 2.444a.9.9 0 0 1-1.101 1.213 5.76 5.76 0 0 1-2.325-1.455C9.863 17.934 9.14 16.528 9.14 14.85ZM26.057 11.857a.9.9 0 0 1 .752-.407h.65c1.897 0 3.4 1.503 3.4 3.4 0 1.678-.724 3.084-1.73 4.202l-.033.035a5.758 5.758 0 0 1-2.292 1.42.9.9 0 0 1-1.101-1.213 6.148 6.148 0 0 0 .506-2.444v-3c0-.417-.078-.804-.225-1.141a.9.9 0 0 1 .073-.852Zm1.926 1.476c.017.171.026.344.026.517v3c0 .267-.013.53-.039.79.685-.83 1.09-1.755 1.09-2.79 0-.718-.442-1.306-1.077-1.517Z",
+      fill: "#fff"
+    })]
+  }));
+};
+CpuIcon.defaultProps = {
+  width: "40",
+  height: "40",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Z",
+      fill: "#1DC1C7"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "m5.474 10.646 2.586 2.586 6.465-6.465",
+      fill: "#1DC1C7"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.233 6.06a1 1 0 0 1 0 1.415L8.768 13.94a1 1 0 0 1-1.415 0l-2.586-2.586a1 1 0 1 1 1.415-1.415l1.878 1.88 5.758-5.759a1 1 0 0 1 1.415 0Z",
+      fill: "#fff"
+    })]
+  }));
+};
+CheckIcon.defaultProps = {
+  width: "20",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var CheckReverseIcon = function CheckReverseIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M10.75 20c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z",
+      fill: "#fff"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "m6.224 10.646 2.586 2.586 6.465-6.465",
+      fill: "#fff"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "m6.224 10.646 2.586 2.586 6.465-6.465",
+      stroke: "#1DC1C7",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  }));
+};
+CheckReverseIcon.defaultProps = {
+  width: "21",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Feature(_ref) {
+  let {
+    feature,
+    locale,
+    checked,
+    isMobile
+  } = _ref;
+  let valueEle = '';
+  if (feature.type === 'boolean') {
+    valueEle = checked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckReverseIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckIcon, {});
+  }
+  if (feature.type === 'text') {
+    valueEle = feature.value[locale];
+  }
+  if (isMobile) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: [feature.type === 'boolean' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "span",
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: valueEle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "span",
+          style: {
+            marginLeft: '8px'
+          },
+          children: feature.name[locale]
+        })]
+      }), feature.type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "span",
+          children: feature.name[locale]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "span",
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: valueEle
+        })]
+      })]
+    });
+  }
+  return valueEle;
+}
+Feature.propTypes = {
+  feature: _propTypes.default.object.isRequired,
+  locale: _propTypes.default.string.isRequired,
+  checked: _propTypes.default.bool,
+  isMobile: _propTypes.default.bool
+};
+Feature.defaultProps = {
+  checked: false,
+  isMobile: false
+};
+function Plan(_ref2) {
+  let {
+      plan,
+      productFeatures,
+      toc,
+      checked,
+      recommend
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  const {
+    locale,
+    t
+  } = (0, _locale.useLocaleContext)();
+  const {
+    isMobile
+  } = (0, _useMobile.default)();
+  if (toc) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      className: "toc",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "basic"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "features toc__title",
+        children: (productFeatures || []).map(_ref3 => {
+          let {
+            _id,
+            name
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "feature",
+            children: name[locale]
+          }, _id);
+        })
+      })]
+    });
+  }
+  let features = [];
+  try {
+    // TODO: Pricing Table: 临时做法
+    if (Array.isArray(plan.features) && plan.features.length > 0) {
+      features = JSON.parse(plan.features[0].en);
+    }
+  } catch (error) {
+    console.error('parse features failed:', error);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Outer, _objectSpread(_objectSpread({
+    className: recommend ? 'card-recommend' : ''
+  }, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "recommend-icon",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CpuIcon, {})
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      checked: checked,
+      className: "card-container ".concat(checked ? 'checked' : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "basic",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "header",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "header__title",
+            children: t('common.space')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "header__name",
+            children: plan === null || plan === void 0 ? void 0 : plan.name[locale]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "price-info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "price",
+            children: (0, _util.getPrice)(plan.prices, 'ocap')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "period",
+            children: (0, _launcherUtil.prettyDuration)(plan.duration, locale)
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "features",
+        children: features.map(feature => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "feature",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Feature, {
+              feature: feature,
+              locale: locale,
+              checked: checked,
+              isMobile: isMobile
+            })
+          }, feature._id);
+        })
+      })]
+    })]
+  }));
+}
+const Outer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  .recommend-icon {\n    display: none;\n  }\n\n  &.card-recommend {\n    .recommend-icon {\n      display: block;\n      position: absolute;\n      top: -8px;\n      right: 0px;\n    }\n"])));
+const Container = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  border-radius: 12px;\n  padding: 16px;\n  overflow: hidden;\n  white-space: nowrap;\n  min-height: 400px;\n  margin: 8px;\n\n  .toc__title {\n    font-weight: bolder;\n    align-items: flex-start;\n  }\n\n  &:not(.toc) {\n    color: #000;\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  &:not(.toc, .checked):hover {\n    color: #000;\n    background-color: #ddf6f8;\n    cursor: pointer;\n  }\n\n  &.checked {\n    color: #fff;\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  .basic {\n    width: 100%;\n    height: 8em;\n\n    .header {\n      text-align: center;\n      .header__title {\n        color: ", ";\n      }\n\n      .header__name {\n        font-weight: bolder;\n      }\n    }\n\n    .price-info {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      height: 6.5em;\n\n      .price {\n        font-size: 1.5em;\n        font-weight: bolder;\n      }\n\n      .period {\n        color: ", ";\n      }\n    }\n  }\n\n  .features {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    margin-top: auto;\n\n    .feature {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 48px;\n\n      @media (min-width: ", "px) {\n        margin-left: 28px;\n      }\n\n      @media (max-width: ", "px) {\n        justify-content: flex-start;\n      }\n\n      &:not(:last-child) {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n      }\n    }\n  }\n"])), props => props.theme.palette.secondary.main, props => props.theme.palette.primary.main, props => props.checked ? '#ffffff' : '#9397a1', props => props.checked ? '#ffffff' : '#9397a1', props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md, props => props.checked || props.hovered ? 'rgba(255, 255, 255, 0.2)' : '#f6f6f6');
+Plan.propTypes = {
+  plan: _propTypes.default.object,
+  productFeatures: _propTypes.default.array,
+  checked: _propTypes.default.bool,
+  recommend: _propTypes.default.bool,
+  toc: _propTypes.default.bool
+};
+Plan.defaultProps = {
+  plan: null,
+  productFeatures: [],
+  checked: false,
+  recommend: false,
+  toc: false
+};
+var _default = Plan;
+exports.default = _default;