@blocklet/launcher-workflow 2.1.25 → 2.1.26

package/lib/checkout.js

@@ -20,6 +20,7 @@ var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
 var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
 var _dsbridge = _interopRequireDefault(require("dsbridge"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
+var _lodash = _interopRequireDefault(require("lodash.get"));
 var _confirm = _interopRequireDefault(require("@arcblock/ux/lib/Dialog/confirm"));
 var _formatError = _interopRequireDefault(require("@blocklet/launcher-util/lib/format-error"));
 var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
@@ -166,12 +167,13 @@ function CheckoutPage(_ref) {
     events.on('logout', () => {
       const metaUrl = params.get('blocklet_meta_url');
       _util2.launchSession.create(api, routerPrefix, metaUrl, (err, launch) => {
+        var _context$value;
         setState({
           sessionId: launch._id
         });
         params.set('sessionId', launch._id);
-        // FIXME: @wangshijun should not always be serverless
-        _util2.launchSession.select(api, routerPrefix, launch._id, 'serverless', state.planId);
+        const type = (0, _lodash.default)((_context$value = context.value) === null || _context$value === void 0 ? void 0 : _context$value.plan, 'extra.type') || 'serverless';
+        _util2.launchSession.select(api, routerPrefix, launch._id, type, state.planId);
       });
     });
   }, []);

package/lib/components/plan.js

@@ -14,6 +14,7 @@ var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
 var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
 var _lodash = _interopRequireDefault(require("lodash.noop"));
+var _material = require("@mui/material");
 var _util = require("../../lib/util");
 var _locale = require("../contexts/locale");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -189,6 +190,7 @@ function Plan(_ref2) {
   if (toc) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
       className: "toc",
+      available: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "basic-toc",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -243,9 +245,10 @@ function Plan(_ref2) {
     console.error('parse features failed:', error);
   }
   const providerName = (_paymentMethods$find = paymentMethods.find(x => x._id === paymentMethod)) === null || _paymentMethods$find === void 0 ? void 0 : _paymentMethods$find.provider.name;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
     checked: checked,
-    className: "card-container ".concat(checked ? 'checked' : '')
+    className: "card-container ".concat(checked ? 'checked' : ''),
+    available: !!plan.available
   }, rest), {}, {
     children: [recommend && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "recommend-tag",
@@ -286,8 +289,18 @@ function Plan(_ref2) {
       })
     })]
   }));
+  if (plan.available) {
+    return content;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+    title: plan.reason,
+    style: {
+      cursor: 'not-allowed'
+    },
+    children: content
+  });
 }
-const Container = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  flex-direction: column;\n  border-radius: 12px;\n  overflow: hidden;\n  min-height: 400px;\n  white-space: nowrap;\n  padding: 16px;\n\n  .recommend-tag {\n    display: block;\n    position: absolute;\n    top: 4px;\n    right: 32px;\n    color: #fff;\n    padding: 4px 100px;\n    position: absolute;\n    transform: translate(50%, 50%) rotate(45deg);\n    white-space: nowrap;\n    background-color: #fe9344;\n    transform-origin: center;\n  }\n\n  .toc__title {\n    font-weight: bolder;\n    align-items: flex-start;\n  }\n\n  &:not(.toc) {\n    width: 280px;\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-toc {\n    width: 100%;\n    height: 8em;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n\n    .payment-methods {\n      padding-top: 3em;\n      font-size: 1.1em;\n      font-weight: bolder;\n\n      select {\n        margin-left: 1em;\n      }\n    }\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      text-align: center;\n\n      // \u79FB\u52A8\u7AEF\u4E0D\u51CF\u5C0F\n      @media (max-height: 960px) and (min-width: 640px) {\n        height: 36px;\n        font-size: 0.9rem;\n      }\n\n      @media (max-width: 900px) {\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.checked || props.hovered ? 'rgba(255, 255, 255, 0.2)' : '#f6f6f6');
+const Container = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  flex-direction: column;\n  border-radius: 12px;\n  overflow: hidden;\n  min-height: 400px;\n  white-space: nowrap;\n  padding: 16px;\n  filter: grayscale(", ");\n  opacity: ", ";\n\n  .recommend-tag {\n    display: block;\n    position: absolute;\n    top: 4px;\n    right: 32px;\n    color: #fff;\n    padding: 4px 100px;\n    position: absolute;\n    transform: translate(50%, 50%) rotate(45deg);\n    white-space: nowrap;\n    background-color: #fe9344;\n    transform-origin: center;\n  }\n\n  .toc__title {\n    font-weight: bolder;\n    align-items: flex-start;\n  }\n\n  &:not(.toc) {\n    width: 280px;\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-toc {\n    width: 100%;\n    height: 8em;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n\n    .payment-methods {\n      padding-top: 3em;\n      font-size: 1.1em;\n      font-weight: bolder;\n\n      select {\n        margin-left: 1em;\n      }\n    }\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      text-align: center;\n\n      // \u79FB\u52A8\u7AEF\u4E0D\u51CF\u5C0F\n      @media (max-height: 960px) and (min-width: 640px) {\n        height: 36px;\n        font-size: 0.9rem;\n      }\n\n      @media (max-width: 900px) {\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.available ? 0 : 1, props => props.available ? 1 : 0.4, props => props.theme.palette.secondary.main, props => props.theme.palette.primary.main, props => props.checked ? '#ffffff' : '#9397a1', props => props.checked ? '#ffffff' : '#9397a1', props => props.checked || props.hovered ? 'rgba(255, 255, 255, 0.2)' : '#f6f6f6');
 Plan.propTypes = {
   plan: _propTypes.default.object.isRequired,
   paymentMethod: _propTypes.default.string.isRequired,

package/lib/locales/en.js

@@ -104,6 +104,7 @@ module.exports = {
     morePlanPrompt: 'Flip the page to see more plans',
     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',
     dialog: {
       title: 'Purchase Blocklet Space NFT',
       scan: 'Scan the QR code below with your DID wallet to complete purchase',

package/lib/locales/zh.js

@@ -103,6 +103,7 @@ module.exports = {
     morePlanPrompt: '翻页看更多方案',
     redeem: '我已购买空间',
     noProducts: '没有可购买的商品，请检查 PaymentKit 的配置',
+    serverlessNotSupported: '该应用被禁止能在单应用或者按需空间中运行，请选择专用空间',
     dialog: {
       title: '购买 Blocklet Server NFT',
       scan: '用您的 DID 钱包扫描下面的二维码完成购买',

package/lib/purchase.js

@@ -21,6 +21,7 @@ var _reactRouterDom = require("react-router-dom");
 var _useMeasure = _interopRequireDefault(require("react-use/lib/useMeasure"));
 var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
+var _lodash = _interopRequireDefault(require("lodash.get"));
 require("@splidejs/splide/dist/css/splide.min.css");
 var _launchResultMessage = _interopRequireDefault(require("@blocklet/launcher-layout/lib/launch-result-message"));
 var _formatError = _interopRequireDefault(require("@blocklet/launcher-util/lib/format-error"));
@@ -187,7 +188,28 @@ function PurchasePage(_ref) {
         });
         return;
       }
-      const plans = (data || []).sort((a, b) => b.weight - a.weight);
+      let plans = (data || []).sort((a, b) => b.weight - a.weight);
+      const {
+        components = []
+      } = (0, _lodash.default)(window, 'blockletMeta', {}) || {};
+      const supported = components.every(x => (0, _lodash.default)(x, 'meta.capabilities.serverless', true));
+      plans.forEach(x => {
+        if ((0, _lodash.default)(x, 'extra.type') === 'serverless' && !supported) {
+          x.available = false;
+          x.reason = t('purchase.serverlessNotSupported');
+        } else {
+          x.available = true;
+        }
+      });
+      plans = plans.sort((a, b) => {
+        if (b.available && !a.available) {
+          return 1;
+        }
+        if (!b.available && a.available) {
+          return -1;
+        }
+        return 0;
+      });
       setState({
         plans,
         paymentMethods,
@@ -231,7 +253,7 @@ function PurchasePage(_ref) {
     if (!((_state$plans = state.plans) !== null && _state$plans !== void 0 && _state$plans.length) || typeof state.perPage === 'undefined') {
       return;
     }
-    const index = state.plans.findIndex(x => !!x.isRecommended);
+    const index = state.plans.findIndex(x => !!x.isRecommended && x.available);
     const pageIndex = Math.floor(index / state.perPage);
 
     // 如果推荐 Plan 不在第一页，则将推荐 Plan 放在第一个
@@ -259,9 +281,13 @@ function PurchasePage(_ref) {
     setState(getSlideConfig(tmp, state.plans.length));
   }, [width, state.plans, isMobile]);
   const handleSelect = planId => {
+    var _state$plans$find;
     if (state.planId === planId) {
       return;
     }
+    if (((_state$plans$find = state.plans.find(x => x._id === planId)) === null || _state$plans$find === void 0 ? void 0 : _state$plans$find.available) === false) {
+      return;
+    }
     setState({
       planId
     });
@@ -291,9 +317,9 @@ function PurchasePage(_ref) {
     if (!state.planId || !state.sessionId) {
       return;
     }
-
-    // FIXME: @wangshijun should not always be serverless
-    _util.launchSession.select(api, routerPrefix, state.sessionId, 'serverless', state.planId);
+    const plan = state.plans.find(x => x._id === state.planId);
+    const type = (0, _lodash.default)(plan, 'extra.type') || 'serverless';
+    _util.launchSession.select(api, routerPrefix, state.sessionId, type, state.planId);
   }, [state.planId, state.sessionId]);
   const productFeatures = [];
   if (!state.loading && ((_state$plans3 = state.plans) === null || _state$plans3 === void 0 ? void 0 : _state$plans3.length) > 0) {
@@ -423,6 +449,7 @@ function PurchasePage(_ref) {
                   },
                   hasTrack: false,
                   options: {
+                    rewind: true,
                     pagination: true,
                     arrows: state.arrows,
                     classes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "2.1.25",
+  "version": "2.1.26",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -40,9 +40,9 @@
     "@arcblock/license": "^2.5.52",
     "@arcblock/react-hooks": "^2.5.52",
     "@arcblock/ux": "^2.5.52",
-    "@blocklet/launcher-layout": "2.1.25",
-    "@blocklet/launcher-util": "2.1.25",
-    "@blocklet/launcher-ux": "2.1.25",
+    "@blocklet/launcher-layout": "2.1.26",
+    "@blocklet/launcher-util": "2.1.26",
+    "@blocklet/launcher-ux": "2.1.26",
     "@blocklet/payment": "^1.12.12",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
@@ -75,5 +75,5 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "jest": "^27.5.1"
   },
-  "gitHead": "da003fcf6f0f8c5d458749fe3497d38a802418fa"
+  "gitHead": "835f9d82ed43b4eb75a15a35e087e5fbaf51f32a"
 }