@blocklet/launcher-workflow 1.5.83 → 1.5.86

package/lib/components/instance-operation.js

@@ -136,27 +136,25 @@ function OperationPage(_ref) {
     });
   }, [nftId]); // eslint-disable-line
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, launchState.status !== STATUS.success && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
-    title: t("".concat(type, ".title"))
-  }), /*#__PURE__*/_react.default.createElement(Content, null, launchState.status === STATUS.waiting && /*#__PURE__*/_react.default.createElement("div", {
+  const successful = launchState.status === STATUS.success;
+  return /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
+    title: t("".concat(type, ".title")),
+    className: "launch-page-header ".concat(successful ? 'header-hide' : '')
+  }), launchState.status === STATUS.waiting && /*#__PURE__*/_react.default.createElement("div", {
     className: "center"
-  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null)), launchState.status === STATUS.launching && /*#__PURE__*/_react.default.createElement("div", {
-    className: "center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "status"
-  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
-    className: "status-spinner"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "status-text"
-  }, t('launch.waitingForLaunching')))), launchState.status === STATUS.success && /*#__PURE__*/_react.default.createElement(_launchResultMessage.default, {
-    className: "message",
-    variant: "success",
-    title: t('launch.launched'),
-    footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
-      className: "link",
+  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null)), (launchState.status === STATUS.launching || successful) && /*#__PURE__*/_react.default.createElement(_launchResultMessage.default, {
+    variant: successful ? 'success' : 'loading',
+    title: successful ? t('launch.launched') : '',
+    subTitle: !successful ? t('launch.waitingForLaunching') : '',
+    footer: successful ? /*#__PURE__*/_react.default.createElement(LinkEle, {
       href: launchState.appUrl,
-      target: "_self"
-    }, t('common.redirecting')), "...")
+      rel: "noreferrer"
+    }, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+      size: [16, 10],
+      style: {
+        marginRight: 14
+      }
+    }), " ", t('common.redirecting')) : ''
   }), [STATUS.error, STATUS.launchFailedError].includes(launchState.status) && /*#__PURE__*/_react.default.createElement(_launchResultMessage.default, {
     variant: "error",
     title: t("".concat(type, ".error.launchFailed")),
@@ -181,13 +179,18 @@ function OperationPage(_ref) {
       component: _reactRouterDom.Link,
       to: (0, _router.default)(routerPrefix, "/prepare/".concat(nftId).concat(window.location.search))
     }, t('common.launch'))
-  })));
+  }));
 }
 
+const LinkEle = _styledComponents.default.a.withConfig({
+  displayName: "instance-operation__LinkEle",
+  componentId: "sc-1fcaixs-0"
+})(["display:flex;justify-content:center;align-items:center;height:36px;color:", ";"], props => props.theme.palette.primary.main);
+
 const Content = _styledComponents.default.div.withConfig({
   displayName: "instance-operation__Content",
-  componentId: "sc-1fcaixs-0"
-})(["margin:auto;height:100%;.link{color:", ";}.link:hover{text-decoration:underline !important;}.status{color:", ";display:flex;flex-direction:column;align-items:center;.status-spinner{color:inherit !important;}.status-text{display:inline-block;padding:0 20px;max-width:420px;margin-top:24px;text-align:center;}}.button{min-width:150px;margin-bottom:100px;}.center{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
+  componentId: "sc-1fcaixs-1"
+})(["margin:auto;height:100%;.link{color:", ";}.link:hover{text-decoration:underline !important;}.status{color:", ";display:flex;flex-direction:column;align-items:center;.status-spinner{color:inherit !important;}.status-text{display:inline-block;padding:0 20px;max-width:420px;margin-top:24px;text-align:center;}}.button{min-width:150px;margin-bottom:100px;}.center{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.launch-page-header{transition:all ease 0.3s;&.header-hide{opacity:0;}}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);
 
 OperationPage.propTypes = {
   type: _propTypes.default.oneOf(['launch', 'start']),

package/lib/components/plan.js

@@ -38,7 +38,9 @@ function NodeType(_ref) {
   const {
     locale
   } = (0, _locale.useLocaleContext)();
-  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({}, props, {
+    className: selected ? 'item-selected' : ''
+  }), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: "name",
     component: "span"
   }, (0, _lodash.default)(data, "name.".concat(locale))), /*#__PURE__*/_react.default.createElement("div", {
@@ -53,12 +55,12 @@ function NodeType(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "item-block"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "item-icon"
-  }, /*#__PURE__*/_react.default.createElement(_Check.default, {
-    fontSize: "small"
-  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "item-desc"
-  }, feat[locale])))))));
+  }, feat[locale])))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "check-container"
+  }, /*#__PURE__*/_react.default.createElement(_Check.default, {
+    className: "check-icon"
+  })));
 }
 
 NodeType.propTypes = {
@@ -74,4 +76,4 @@ NodeType.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "plan__Container",
   componentId: "sc-1ts75ga-0"
-})(["border:1px solid ", ";border-radius:8px;min-height:240px;padding:24px;.name{color:", ";font-size:16px;line-height:20px;font-weight:bold;}.price{margin-top:8px;font-size:24px;color:", ";}.rights{margin-top:32px;font-size:14px;& > ul li{list-style-type:none;margin:0;vertical-align:middle;color:", ";}& > ul li:not(:first-child){margin-top:16px;}.rights-list{margin-top:16px;}}.item-block{display:flex;.item-icon{margin-right:6px;font-size:14px;color:", ";flex-shrink:0;}.item-desc{flex:1;}}"], props => props.theme.palette.grey[200], props => props.theme.palette.grey[900], props => props.theme.palette.grey[900], props => props.theme.palette.grey[700], props => props.theme.palette.primary.main);
+})(["position:relative;border:1px solid ", ";border-radius:8px;padding:16px;cursor:pointer;transition:background-color ease 0.2s,border ease 0.2s;&.item-selected{background-color:#eff3fe;border-color:#eff3fe;cursor:default;}.name{color:", ";font-size:16px;line-height:20px;font-weight:500;}.price{margin-top:8px;font-size:24px;font-weight:700;color:", ";}.rights{font-size:14px;& > ul li{list-style-type:none;margin:0;vertical-align:middle;color:", ";}& > ul li:not(:first-child){margin-top:8px;}.rights-list{margin-top:8px;}}.item-block{display:flex;.item-icon{margin-right:6px;font-size:14px;color:", ";flex-shrink:0;}.item-desc{flex:1;}}.check-container{position:absolute;right:0;bottom:0;display:flex;justify-content:flex-end;align-items:flex-end;width:30px;height:30px;border-radius:0 0 7px 0;color:", ";overflow:hidden;transition:all ease 0.3s;&:after{position:absolute;z-index:0;left:30px;top:30px;display:block;width:0;height:0;border-top:transparent solid 15px;border-left:transparent solid 15px;border-bottom:", " solid 15px;border-right:", " solid 15px;transition:all ease 0.1s;content:'';}.check-icon{position:relative;z-index:2;margin:0 1px 1px 0;font-size:16px;transform:scale(0);transition:all ease 0.2s;}}&.item-selected{.check-container{&:after{left:0;top:0;}.check-icon{transform:scale(1);}}}"], props => props.theme.palette.grey[200], props => props.theme.palette.grey[900], props => props.theme.palette.primary.main, props => props.theme.palette.grey[700], props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);

package/lib/purchase.js

@@ -260,20 +260,6 @@ function PurchasePage() {
     }
   }, t('common.redeem'));
 
-  const bottomFix = type => {
-    switch (type) {
-      case 'fix':
-        setButtonInFix(true);
-        break;
-
-      case 'scroll':
-        setButtonInFix(false);
-        break;
-
-      default:
-    }
-  };
-
   return /*#__PURE__*/_react.default.createElement(Container, null, isEmbed && !isMobile && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
     title: t('plan.title'),
     subTitle: t('plan.subTitle')
@@ -282,7 +268,7 @@ function PurchasePage() {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "page-body-article"
   }, /*#__PURE__*/_react.default.createElement(_compactLayout.default, {
-    onBottomFix: bottomFix,
+    onBottomFix: type => setButtonInFix(type === 'fix'),
     bottom: plans.length ? /*#__PURE__*/_react.default.createElement("div", {
       className: "button-container container-padding ".concat(buttonInFix ? 'has-shadow' : '')
     }, /*#__PURE__*/_react.default.createElement(RedeemButton, null), /*#__PURE__*/_react.default.createElement(PayButton, null)) : ''
@@ -303,7 +289,7 @@ function PurchasePage() {
     key: item._id,
     paymentType: paymentType,
     onClick: () => selectPlan(item),
-    className: "select-body-item ".concat(plan && plan._id === item._id ? 'selected' : ''),
+    selected: plan && plan._id === item._id,
     data: item
   })) : /*#__PURE__*/_react.default.createElement(_Empty.default, null, t('plan.noPlan'))))))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
     open: paying && paymentType === 'crypto',
@@ -340,7 +326,7 @@ const Center = _styledComponents.default.div.withConfig({
 const Container = _styledComponents.default.div.withConfig({
   displayName: "purchase__Container",
   componentId: "sc-1knmtel-1"
-})(["display:flex;flex-direction:column;width:100%;height:100%;.select-payment{display:flex;justify-content:center;align-items:center;padding-top:30px;}.select-plan{margin:48px auto 33px;", "{margin:30px auto;}&.small-select-plan-2{max-width:780px;}&.small-select-plan-0,&.small-select-plan-1{max-width:460px;}}.page-body{position:relative;flex:1;margin-top:0;}.page-body-article{position:absolute;left:0;top:0;width:100%;height:100%;overflow-y:auto;}.selector-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:18px;}.button-container{display:flex;justify-content:center;align-items:center;padding-bottom:15px;padding-top:15px;> button{width:200px;}&.has-shadow{box-shadow:0px -1px 1px 0px rgba(168,180,197,0.12);}}.select-body-item{cursor:pointer;transition:background-color ease 0.2s,border ease 0.2s;}.selected{border-color:", ";cursor:default;}.container-padding{padding-left:24px;padding-right:24px;}"], props => props.theme.breakpoints.down('sm'), props => props.theme.palette.primary.main);
+})(["display:flex;flex-direction:column;width:100%;height:100%;.select-payment{display:flex;justify-content:center;align-items:center;padding-top:30px;}.select-plan{margin:48px auto 33px;", "{margin:30px auto;}&.small-select-plan-2{max-width:780px;}&.small-select-plan-0,&.small-select-plan-1{max-width:460px;}}.page-body{position:relative;flex:1;margin-top:0;}.page-body-article{position:absolute;left:0;top:0;width:100%;height:100%;overflow-y:auto;}.selector-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:18px;}.button-container{display:flex;justify-content:center;align-items:center;padding-bottom:15px;padding-top:15px;> button{width:200px;}&.has-shadow{box-shadow:0px -1px 1px 0px rgba(168,180,197,0.12);}}.container-padding{padding-left:24px;padding-right:24px;}"], props => props.theme.breakpoints.down('sm'));
 
 const PaymentLabel = _styledComponents.default.div.withConfig({
   displayName: "purchase__PaymentLabel",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.5.83",
+  "version": "1.5.86",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -37,16 +37,16 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^1.16.61",
-    "@arcblock/icons": "^1.16.61",
-    "@arcblock/license": "^1.16.61",
-    "@arcblock/ux": "^1.16.61",
-    "@blocklet/launcher-constant": "1.5.83",
-    "@blocklet/launcher-layout": "1.5.83",
+    "@arcblock/did-connect": "^1.16.66",
+    "@arcblock/icons": "^1.16.66",
+    "@arcblock/license": "^1.16.66",
+    "@arcblock/ux": "^1.16.66",
+    "@blocklet/launcher-constant": "1.5.86",
+    "@blocklet/launcher-layout": "1.5.86",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@ocap/util": "^1.15.3",
+    "@ocap/util": "^1.15.5",
     "@stripe/react-stripe-js": "^1.7.0",
     "@stripe/stripe-js": "^1.22.0",
     "@styled-icons/remix-fill": "^10.18.0",
@@ -69,5 +69,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "89cdd837c1777b562f5c86291e4140f147523cb4"
+  "gitHead": "f03b341d1db4648c26f39f63ade647ae5a59fcb4"
 }

package/lib/components/launch-result-message.js

@@ -1,89 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = LaunchResultMessage;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
-
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
-
-var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
-
-var _PriorityHigh = _interopRequireDefault(require("@material-ui/icons/PriorityHigh"));
-
-const _excluded = ["variant", "title", "subTitle", "footer"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 LaunchResultMessage(_ref) {
-  let {
-    variant,
-    title,
-    subTitle,
-    footer
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  let Icon;
-
-  switch (variant) {
-    case 'error':
-      Icon = _Close.default;
-      break;
-
-    case 'info':
-      Icon = _PriorityHigh.default;
-      break;
-
-    case 'loading':
-      Icon = _Spinner.default;
-      break;
-
-    default:
-      Icon = _Check.default;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
-    variant: variant
-  }, props), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-body"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "result-icon color-".concat(variant)
-  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-title color-".concat(variant, " ").concat(title ? '' : 'ele-hide')
-  }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-sub-title ".concat(subTitle ? '' : 'ele-hide')
-  }, subTitle), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-footer ".concat(footer ? '' : 'ele-hide')
-  }, footer)));
-}
-
-LaunchResultMessage.propTypes = {
-  variant: _propTypes.default.oneOf(['success', 'error', 'info', 'loading']),
-  title: _propTypes.default.string,
-  subTitle: _propTypes.default.string,
-  footer: _propTypes.default.any
-};
-LaunchResultMessage.defaultProps = {
-  variant: 'success',
-  title: '',
-  subTitle: '',
-  footer: null
-};
-
-const Container = _styledComponents.default.div.withConfig({
-  displayName: "launch-result-message__Container",
-  componentId: "sc-17nd2le-0"
-})(["display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;.result-body{max-width:500px;text-align:center;margin-top:-64px;}.result-icon{display:inline-flex;justify-content:center;align-items:center;margin-bottom:24px;width:48px;height:48px;border-radius:100%;color:", ";transition:all ease 0.3s;&.color-success{background-color:", ";}&.color-error{background-color:", ";}&.color-info{background-color:", ";}}.result-title{height:34px;font-size:24px;margin-bottom:8px;font-weight:bolder;transition:all ease 0.3s;&.ele-hide{height:0;opacity:0;margin-bottom:0;}&.color-success{color:", ";}&.color-error{color:", ";}&.color-info{color:", ";}&.ele-hide{line-height:0;opacity:0;}}.result-sub-title{margin:0 auto;max-width:90%;color:", ";font-size:14px;line-height:1.21em;transition:all ease 0.3s;&.ele-hide{line-height:0;opacity:0;}}.result-footer{margin-top:38px;height:70px;overflow:hidden;transition:all ease 0.3s;&.ele-hide{margin-top:0;height:0;opacity:0;}}"], props => props.theme.palette.common.white, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.success.main, props => props.theme.palette.error.main, props => props.theme.palette.primary.main, props => props.theme.palette.grey[700]);