@blocklet/launcher-workflow 2.1.6 → 2.1.7

package/lib/checkout.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
-var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _util = require("@blocklet/launcher-util/lib/util");
 var _constant = require("@blocklet/launcher-util/lib/constant");
 var _button = _interopRequireDefault(require("@blocklet/launcher-ux/lib/button"));
@@ -88,8 +87,10 @@ function CheckoutPage(_ref) {
     locale
   } = (0, _locale.useLocaleContext)();
   const {
-    session
+    session,
+    events
   } = (0, _session.useSessionContext)();
+  const [params] = (0, _reactRouterDom.useSearchParams)();
   const [state, setState] = (0, _useSetState.default)({
     showAgreement: false,
     showPayment: false,
@@ -100,13 +101,14 @@ function CheckoutPage(_ref) {
     },
     agreed: true,
     paying: false,
-    paymentMethod: null
+    planId: params.get('planId'),
+    sessionId: params.get('sessionId'),
+    paymentMethod: params.get('paymentMethod')
   });
   const navigate = (0, _reactRouterDom.useNavigate)();
   const {
     create
   } = (0, _request.default)();
-  const [params] = (0, _reactRouterDom.useSearchParams)();
   const {
     mobileSize,
     isMobile
@@ -118,44 +120,63 @@ function CheckoutPage(_ref) {
     isPurchaseOnly
   } = (0, _workflow.useWorkflowContext)();
   (0, _react.useEffect)(() => {
-    if (session.user && !isPurchaseOnly) {
-      _util2.launchSession.connect(api, routerPrefix, sessionId, session.user.did);
+    if (isPurchaseOnly) {
+      return;
+    }
+    if (session.user) {
+      _util2.launchSession.connect(api, routerPrefix, state.sessionId, session.user.did);
     }
   }, [session.user]);
   const api = create({
     baseURL: didPayPrefix
   });
   const enableBlockletAgreement = !!blocklet;
-  const planId = params.get('planId');
-  const sessionId = params.get('sessionId');
   const context = (0, _useAsync.default)(async () => {
     try {
       const [{
         data: {
-          data: methods
+          data: paymentMethods
         }
       }, {
         data: {
           data: plan
         }
-      }] = await Promise.all([api.get('/payment-methods'), api.get("/plans/".concat(planId))]);
-      if (methods.length > 0) {
+      }] = await Promise.all([api.get('/payment-methods'), api.get("/plans/".concat(state.planId))]);
+      if (paymentMethods.length > 0 && !state.paymentMethod) {
         setState({
-          paymentMethod: methods[0]
+          paymentMethod: paymentMethods[0]._id
         });
       }
       return {
-        methods,
+        paymentMethods,
         plan
       };
     } catch (error) {
       console.error('load data failed:', error);
       return {
-        methods: [],
+        paymentMethods: [],
         plan: null
       };
     }
   });
+
+  // 用户退出的时候自动重新创建启动会话
+  (0, _react.useEffect)(() => {
+    if (isPurchaseOnly) {
+      return;
+    }
+    events.on('logout', () => {
+      const metaUrl = params.get('blocklet_meta_url');
+      _util2.launchSession.create(api, routerPrefix, metaUrl, (err, launch) => {
+        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 switchPayment = method => {
     setState({
       paymentMethod: method
@@ -167,7 +188,7 @@ function CheckoutPage(_ref) {
       paying: false
     });
   };
-  const handlePay = async () => {
+  const handlePay = () => {
     if (enableBlockletAgreement && !state.agreed) {
       setState({
         showAgreeHint: true
@@ -189,15 +210,14 @@ function CheckoutPage(_ref) {
       session.refresh();
       return;
     }
-    _util2.launchSession.connect(api, routerPrefix, sessionId, result.did, () => {
+    _util2.launchSession.connect(api, routerPrefix, state.sessionId, result.did, () => {
       session.refresh();
     });
   };
-  const handlePaid = async _ref2 => {
+  const handlePaid = _ref2 => {
     let {
       nftId,
-      nftState,
-      paymentId
+      nftState
     } = _ref2;
     if ((nftState.tags || []).includes(_constant.NFT_TYPE_SERVERLESS)) {
       if (!embed) {
@@ -217,16 +237,10 @@ function CheckoutPage(_ref) {
       _dsbridge.default.call('arcClosePage');
       return;
     }
-    _util2.launchSession.pay(api, routerPrefix, sessionId, nftId, 'purchase', paymentId, err => {
-      handleCancelPay();
-      if (err) {
-        _Toast.default.error(err.message);
-      } else {
-        navigate({
-          pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
-          search: params.toString()
-        });
-      }
+    handleCancelPay();
+    navigate({
+      pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
+      search: params.toString()
     });
   };
   const handlePayFailed = () => {
@@ -234,18 +248,22 @@ function CheckoutPage(_ref) {
     handleCancelPay();
   };
   const calculateTotalPayment = prices => {
+    var _paymentMethods$find;
     if (!state.paymentMethod) {
       return '';
     }
-    return (0, _util2.getPrice)(prices, state.paymentMethod.provider.name);
+    const providerName = paymentMethods === null || paymentMethods === void 0 ? void 0 : (_paymentMethods$find = paymentMethods.find(x => x._id === state.paymentMethod)) === null || _paymentMethods$find === void 0 ? void 0 : _paymentMethods$find.provider.name;
+    return (0, _util2.getPrice)(prices, providerName);
   };
   const toggleAgreement = () => setState({
     agreed: !state.agreed
   });
   const {
-    methods,
+    paymentMethods,
     plan
   } = context.loading ? {} : context.value;
+  const paymentMethod = paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.find(x => x._id === state.paymentMethod);
+  const providerName = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.provider.name;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     mobileSize: mobileSize,
     enableBlockletAgreement: enableBlockletAgreement,
@@ -278,7 +296,7 @@ function CheckoutPage(_ref) {
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "price",
-            children: (0, _util2.getPrice)(plan.prices, 'ocap')
+            children: (0, _util2.getPrice)(plan.prices, providerName)
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -294,7 +312,7 @@ function CheckoutPage(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           children: t('checkout.orderTotal')
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: (0, _util2.getPrice)((plan === null || plan === void 0 ? void 0 : plan.prices) || [], 'ocap')
+          children: (0, _util2.getPrice)((plan === null || plan === void 0 ? void 0 : plan.prices) || [], providerName)
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "total-payment space",
@@ -322,7 +340,7 @@ function CheckoutPage(_ref) {
               container: true,
               spacing: 3,
               justifyContent: "flex-start",
-              children: methods.map(method => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+              children: paymentMethods.map(method => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
                 item: true,
                 xs: 12,
                 sm: 12,
@@ -330,9 +348,9 @@ function CheckoutPage(_ref) {
                 lg: 2,
                 xl: 2,
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
-                  label: method.name[locale],
-                  checked: state.paymentMethod._id === method._id,
-                  onClick: () => switchPayment(method)
+                  label: method.currency.displayName[locale] || method.currency.displayName.en,
+                  checked: state.paymentMethod === method._id,
+                  onClick: () => switchPayment(method._id)
                 })
               }, method._id))
             })
@@ -376,7 +394,7 @@ function CheckoutPage(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
           loading: state.paying,
           className: "button-pay",
-          disabled: state.paying || state.showPayment || !planId || !state.paymentMethod,
+          disabled: state.paying || state.showPayment || !state.planId || !state.sessionId || !state.paymentMethod,
           variant: "contained",
           onClick: handlePay,
           children: t('common.pay')
@@ -384,14 +402,17 @@ function CheckoutPage(_ref) {
       })]
     }), state.showPayment && /*#__PURE__*/(0, _jsxRuntime.jsx)(_payment.default, {
       baseURL: didPayPrefix,
-      method: state.paymentMethod,
+      method: paymentMethod,
       userDid: session === null || session === void 0 ? void 0 : (_session$user = session.user) === null || _session$user === void 0 ? void 0 : _session$user.did,
-      productId: planId,
+      productId: state.planId,
       useSocket: false,
       onConnect: handleConnected,
       onComplete: handlePaid,
       onFailed: handlePayFailed,
-      onCancel: handleCancelPay
+      onCancel: handleCancelPay,
+      metadata: {
+        sessionId: state.sessionId
+      }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
       open: state.showPaidDialog.open,
       disableEscapeKeyDown: true,

package/lib/components/launch-serverless.js

@@ -81,7 +81,7 @@ function LaunchServerless(_ref) {
           })
         }), state.value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_launchResultMessage.default, {
           variant: "success",
-          title: t('prepare.serverless.allocate'),
+          title: t('prepare.serverless.allocated'),
           subTitle: t('prepare.serverless.prepared')
         })]
       })

package/lib/components/plan.js

@@ -9,11 +9,15 @@ 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 _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+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 _util = require("../../lib/util");
 var _locale = require("../contexts/locale");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["plan", "productFeatures", "toc", "checked", "recommend"];
+const _excluded = ["plan", "productFeatures", "toc", "checked", "recommend", "paymentMethods", "paymentMethod", "onChangeMethod"];
 var _templateObject, _templateObject2, _templateObject3;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -163,12 +167,16 @@ Feature.defaultProps = {
   isMobile: false
 };
 function Plan(_ref2) {
+  var _paymentMethods$find;
   let {
       plan,
       productFeatures,
       toc,
       checked,
-      recommend
+      recommend,
+      paymentMethods,
+      paymentMethod,
+      onChangeMethod
     } = _ref2,
     rest = _objectWithoutProperties(_ref2, _excluded);
   const {
@@ -182,14 +190,41 @@ function Plan(_ref2) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
       className: "toc",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "basic"
+        className: "basic-toc",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          className: "payment-methods",
+          component: "div",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl.default, {
+            style: {
+              minWidth: 180
+            },
+            size: "small",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+              id: "payment-method",
+              value: paymentMethod,
+              onChange: e => onChangeMethod(e.target.value),
+              children: paymentMethods.map(_ref3 => {
+                let {
+                  _id,
+                  currency
+                } = _ref3;
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+                  value: _id,
+                  children: t('common.payWith', {
+                    currency: currency.displayName[locale] || currency.displayName.en
+                  })
+                }, _id);
+              })
+            })
+          })
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "features toc__title",
-        children: (productFeatures || []).map(_ref3 => {
+        children: (productFeatures || []).map(_ref4 => {
           let {
             _id,
             name
-          } = _ref3;
+          } = _ref4;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "feature",
             children: name[locale]
@@ -207,6 +242,7 @@ function Plan(_ref2) {
   } catch (error) {
     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({
     checked: checked,
     className: "card-container ".concat(checked ? 'checked' : '')
@@ -229,7 +265,7 @@ function Plan(_ref2) {
         className: "price-info",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "price",
-          children: (0, _util.getPrice)(plan.prices, 'ocap')
+          children: (0, _util.getPrice)(plan.prices, providerName)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "period",
           children: (0, _launcherUtil.prettyDuration)(plan.duration, locale)
@@ -251,17 +287,21 @@ function Plan(_ref2) {
     })]
   }));
 }
-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 {\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\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');
 Plan.propTypes = {
-  plan: _propTypes.default.object,
+  plan: _propTypes.default.object.isRequired,
+  paymentMethod: _propTypes.default.string.isRequired,
+  paymentMethods: _propTypes.default.array,
+  onChangeMethod: _propTypes.default.func,
   productFeatures: _propTypes.default.array,
   checked: _propTypes.default.bool,
   recommend: _propTypes.default.bool,
   toc: _propTypes.default.bool
 };
 Plan.defaultProps = {
-  plan: null,
+  paymentMethods: [],
   productFeatures: [],
+  onChangeMethod: _lodash.default,
   checked: false,
   recommend: false,
   toc: false

package/lib/contexts/workflow.js

@@ -38,14 +38,14 @@ function WorkflowProvider(_ref) {
     routerPrefix,
     isPurchaseOnly
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
-    value: value,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_locale.LocaleProvider, {
-      locale: locale,
-      translations: _locales.translations,
-      fallbackLocale: "en",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_request.RequestProvider, {
-        baseURL: baseURL,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_locale.LocaleProvider, {
+    locale: locale,
+    translations: _locales.translations,
+    fallbackLocale: "en",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_request.RequestProvider, {
+      baseURL: baseURL,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+        value: value,
         children: children
       })
     })

package/lib/locales/en.js

@@ -24,6 +24,7 @@ module.exports = {
     details: 'Details',
     previous: 'Previous',
     pay: 'Pay',
+    payWith: 'Pay with {currency}',
     popular: 'Popular',
     space: 'Space'
   },
@@ -34,15 +35,16 @@ module.exports = {
   prepare: {
     serverless: {
       allocate: 'Waiting for space',
+      allocated: 'Blocklet space ready',
       preparing: 'Preparing blocklet space for you launch request...',
-      prepared: 'The blocklet space is ready, redirecting...',
+      prepared: 'Blocklet space is ready for you, redirecting...',
       prepareFailed: 'Failed to prepare space! {error}'
     }
   },
   launch: {
     pageTitle: 'Prepare Space',
     invalidFftId: 'Invalid Purchase NFT ID',
-    launchApp: 'Launch Application',
+    launchApp: 'Launch App',
     launching: 'Your Blocklet Space is being baked, please be patient, it usually takes about 5 minutes',
     launched: 'Your Blocklet Space is up and running',
     launchSuccess: 'Blocklet Space is successfully launched',

package/lib/locales/zh.js

@@ -25,7 +25,8 @@ module.exports = {
     pay: '支付',
     previous: '上一步',
     popular: '推荐',
-    space: '空间'
+    space: '空间',
+    payWith: '用{currency}支付'
   },
   license: {
     title: '空间用户协议',

package/lib/purchase.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _Connect = _interopRequireWildcard(require("@arcblock/did-connect/lib/Connect"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
-var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _compactLayout = _interopRequireDefault(require("@blocklet/launcher-layout/lib/compact-layout"));
 var _constant = require("@blocklet/launcher-util/lib/constant");
 var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
@@ -82,7 +81,7 @@ const getSlideConfig = (maxLength, planLength) => {
   };
 };
 function PurchasePage(_ref) {
-  var _state$plans3, _session$user;
+  var _state$plans3;
   let {
     disableBack
   } = _ref;
@@ -101,7 +100,9 @@ function PurchasePage(_ref) {
   } = (0, _Connect.useSecurity)();
   const navigate = (0, _reactRouterDom.useNavigate)();
   const {
-    session
+    session,
+    storage,
+    events
   } = (0, _session.useSessionContext)();
   const [params, setParams] = (0, _reactRouterDom.useSearchParams)();
   const {
@@ -113,13 +114,15 @@ function PurchasePage(_ref) {
   const [planListRef, {
     width
   }] = (0, _useMeasure.default)();
-  const [showRedeem, setShowRedeem] = (0, _react.useState)(false);
   const [state, setState] = (0, _useSetState.default)({
     loading: true,
     error: '',
     plans: [],
+    paymentMethods: [],
+    paymentMethod: params.get('paymentMethod'),
     sessionId: params.get('sessionId'),
     planId: params.get('planId'),
+    showRedeem: false,
     showMorePrompt: false,
     arrows: false,
     perPage: 100,
@@ -129,22 +132,6 @@ function PurchasePage(_ref) {
   const api = create({
     baseURL: didPayPrefix
   });
-  const selectCurrent = (perPage, curIndex) => {
-    if (!state.plans.length) {
-      return;
-    }
-
-    // 如果每页只有一个，则在翻页的时候默认选中当前项
-    if (perPage === 1) {
-      var _state$plans$curIndex;
-      setState({
-        planId: (_state$plans$curIndex = state.plans[curIndex]) === null || _state$plans$curIndex === void 0 ? void 0 : _state$plans$curIndex._id
-      });
-    }
-  };
-  (0, _react.useEffect)(() => {
-    selectCurrent(state.perPage, 0);
-  }, [state.perPage]);
   const selectPlan = launch => {
     if (!state.plans.length) {
       return;
@@ -166,15 +153,37 @@ function PurchasePage(_ref) {
     }
   };
 
+  // 用户退出的时候自动重新创建启动会话
+  (0, _react.useEffect)(() => {
+    if (isPurchaseOnly) {
+      return;
+    }
+    events.on('logout', () => {
+      const metaUrl = params.get('blocklet_meta_url');
+      _util.launchSession.create(api, routerPrefix, metaUrl, (err, launch) => {
+        setState({
+          sessionId: launch._id
+        });
+        selectPlan(launch);
+      });
+    });
+  }, []);
+
   // 创建启动会话或者加载现有的会话
   (0, _react.useEffect)(() => {
-    api.get('/plans').then(_ref2 => {
-      let {
+    Promise.all([api.get('/plans'), api.get('/payment-methods')]).then(_ref2 => {
+      let [{
         data
-      } = _ref2;
+      }, {
+        data: {
+          data: paymentMethods
+        }
+      }] = _ref2;
       const plans = (data || []).sort((a, b) => b.weight - a.weight);
       setState({
         plans,
+        paymentMethods,
+        paymentMethod: paymentMethods[0]._id,
         loading: false
       });
       if (isPurchaseOnly) {
@@ -250,19 +259,34 @@ function PurchasePage(_ref) {
     });
   };
   (0, _react.useEffect)(() => {
-    if (isPurchaseOnly) {
-      return;
-    }
     if (!state.planId) {
       return;
     }
     if (state.planId !== params.get('planId')) {
       params.set('planId', state.planId);
       setParams(params);
-      // FIXME: @wangshijun should not always be serverless
-      _util.launchSession.select(api, routerPrefix, state.sessionId, 'serverless', state.planId);
     }
   }, [state.planId]);
+  (0, _react.useEffect)(() => {
+    if (!state.paymentMethod) {
+      return;
+    }
+    if (state.paymentMethod !== params.get('paymentMethod')) {
+      params.set('paymentMethod', state.paymentMethod);
+      setParams(params);
+    }
+  }, [state.paymentMethod]);
+  (0, _react.useEffect)(() => {
+    if (isPurchaseOnly) {
+      return;
+    }
+    if (!state.planId || !state.sessionId) {
+      return;
+    }
+
+    // FIXME: @wangshijun should not always be serverless
+    _util.launchSession.select(api, routerPrefix, state.sessionId, 'serverless', 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) {
     // TODO: Pricing Table: 临时做法
@@ -284,18 +308,21 @@ function PurchasePage(_ref) {
       console.error('parse product feature failed:', error);
     }
   }
-  const handleRedeem = async () => {
+  const handleRedeem = () => {
     if (session.user) {
       _util.launchSession.connect(api, routerPrefix, state.sessionId, session.user.did, () => {
-        setShowRedeem(true);
+        setState({
+          showRedeem: true
+        });
       });
     } else {
-      setShowRedeem(true);
+      setState({
+        showRedeem: true
+      });
     }
   };
   const handleRedeemed = _ref3 => {
     let {
-      did,
       loginToken,
       nftId,
       type
@@ -303,25 +330,14 @@ function PurchasePage(_ref) {
     if (type === _constant.NFT_TYPE_SERVERLESS) {
       params.set('launchType', 'serverless');
     }
-    const updateSessionAndRedirect = () => {
-      _util.launchSession.pay(api, routerPrefix, state.sessionId, nftId, 'redeem', '', err => {
-        if (err) {
-          _Toast.default.error(err.message);
-        } else {
-          navigate({
-            pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
-            search: params.toString()
-          });
-        }
-      });
-    };
-    if (session.user) {
-      updateSessionAndRedirect();
-    } else if (loginToken) {
-      _util.connectStorage.setToken(decrypt(loginToken));
+    if (loginToken) {
+      storage.setToken(decrypt(loginToken));
       session.refresh();
-      _util.launchSession.connect(api, routerPrefix, state.sessionId, did, updateSessionAndRedirect);
     }
+    navigate({
+      pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
+      search: params.toString()
+    });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     embed: embed,
@@ -345,7 +361,7 @@ function PurchasePage(_ref) {
               children: [embed && isPurchaseOnly === false && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "footer-left",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-                  onClick: () => handleRedeem(),
+                  onClick: handleRedeem,
                   className: "redeem-button",
                   variant: "outlined",
                   children: t('purchase.redeem')
@@ -373,6 +389,11 @@ function PurchasePage(_ref) {
                 children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
                   toc: true,
                   productFeatures: productFeatures,
+                  paymentMethods: state.paymentMethods,
+                  paymentMethod: state.paymentMethod,
+                  onChangeMethod: paymentMethod => setState({
+                    paymentMethod
+                  }),
                   className: "toc"
                 }), state.plans.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSplide.Splide, {
                   extensions: {
@@ -397,10 +418,6 @@ function PurchasePage(_ref) {
                     }
                   },
                   hasTrack: false,
-                  onMoved: (splide, index) => {
-                    var _splide$options;
-                    selectCurrent((_splide$options = splide.options) === null || _splide$options === void 0 ? void 0 : _splide$options.perPage, index);
-                  },
                   options: {
                     pagination: true,
                     arrows: state.arrows,
@@ -444,6 +461,8 @@ function PurchasePage(_ref) {
                         recommend: !!plan.isRecommended,
                         checked: plan._id === state.planId,
                         plan: plan,
+                        paymentMethod: state.paymentMethod,
+                        paymentMethods: state.paymentMethods,
                         onClick: () => handleSelect(plan._id)
                       })
                     }, plan._id))
@@ -455,17 +474,22 @@ function PurchasePage(_ref) {
         })
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
-      open: showRedeem,
+      open: state.showRedeem,
       popup: true,
       useSocket: false,
       locale: locale,
-      action: (_session$user = session.user) !== null && _session$user !== void 0 && _session$user.did ? 'redeem' : 'redeem-with-connect',
+      action: "redeem",
       prefix: "/did",
       checkFn: create().get,
       onSuccess: handleRedeemed,
-      onClose: () => setShowRedeem(false),
+      onClose: () => setState({
+        showRedeem: false
+      }),
       checkTimeout: 60 * 5000,
       showDownload: false,
+      extraParams: {
+        sessionId: state.sessionId
+      },
       messages: {
         title: t('redeem.dialog.title'),
         scan: t('redeem.dialog.scan'),

package/lib/util.js

@@ -3,20 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAsset = exports.getAPIResponseError = exports.connectStorage = exports.BLOCKLET_STORE_URL = void 0;
+exports.getAsset = exports.getAPIResponseError = exports.BLOCKLET_STORE_URL = void 0;
 exports.getBlockletMetaUrl = getBlockletMetaUrl;
 exports.loadURL = exports.launchSession = exports.getPrice = exports.getLaunchBlockletUrl = void 0;
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _lodash = _interopRequireDefault(require("lodash.get"));
 var _lodash2 = _interopRequireDefault(require("lodash.noop"));
 var _axios = _interopRequireDefault(require("axios"));
-var _Storage = _interopRequireDefault(require("@arcblock/did-connect/lib/Storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const connectStorage = (0, _Storage.default)('login_token', 'cookie', {
-  returnDomain: false,
-  path: window.blocklet.groupPathPrefix || window.blocklet.pathPrefix || '/'
-});
-exports.connectStorage = connectStorage;
 const BLOCKLET_STORE_URL = (0, _lodash.default)(window, 'blocklet.LAUNCHER_BLOCKLET_STORE_URL') || 'https://store.blocklet.dev';
 exports.BLOCKLET_STORE_URL = BLOCKLET_STORE_URL;
 function getBlockletMetaUrl(registry, did) {
@@ -121,7 +115,8 @@ const getPrice = (prices, providerName) => {
 };
 exports.getPrice = getPrice;
 const launchSession = {
-  load: (api, prefix, sessionId, url, done) => {
+  load: function load(api, prefix, sessionId, url) {
+    let done = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : _lodash2.default;
     api.get((0, _urlJoin.default)(prefix, "/launches/".concat(sessionId))).then(result => {
       done(null, result.data.launch);
     }).catch(err => {
@@ -129,7 +124,8 @@ const launchSession = {
       launchSession.create(api, prefix, url, done);
     });
   },
-  create: (api, prefix, url, done) => {
+  create: function create(api, prefix, url) {
+    let done = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _lodash2.default;
     api.post((0, _urlJoin.default)(prefix, '/launches'), {
       blockletMetaUrl: url,
       referrer: document.referrer
@@ -151,19 +147,8 @@ const launchSession = {
       done(err);
     });
   },
-  pay: (api, prefix, sessionId, nftDid, nftSource, paymentId, done) => {
-    api.post((0, _urlJoin.default)(prefix, "/launches/".concat(sessionId, "/paid")), {
-      nftDid,
-      nftSource,
-      paymentId
-    }).then(result => {
-      done(null, result.data.launch);
-    }).catch(err => {
-      console.error('Failed to set launch session as paid', err);
-      done(err);
-    });
-  },
-  select: (api, prefix, sessionId, type, planId, done) => {
+  select: function select(api, prefix, sessionId, type, planId) {
+    let done = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _lodash2.default;
     api.post((0, _urlJoin.default)(prefix, "/launches/".concat(sessionId, "/select")), {
       type,
       planId

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -35,15 +35,15 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.5.47",
-    "@arcblock/icons": "^2.5.47",
-    "@arcblock/license": "^2.5.47",
-    "@arcblock/react-hooks": "^2.5.47",
-    "@arcblock/ux": "^2.5.47",
-    "@blocklet/launcher-layout": "2.1.6",
-    "@blocklet/launcher-util": "2.1.6",
-    "@blocklet/launcher-ux": "2.1.6",
-    "@blocklet/payment": "^1.11.0",
+    "@arcblock/did-connect": "^2.5.48",
+    "@arcblock/icons": "^2.5.48",
+    "@arcblock/license": "^2.5.48",
+    "@arcblock/react-hooks": "^2.5.48",
+    "@arcblock/ux": "^2.5.48",
+    "@blocklet/launcher-layout": "2.1.7",
+    "@blocklet/launcher-util": "2.1.7",
+    "@blocklet/launcher-ux": "2.1.7",
+    "@blocklet/payment": "^1.12.4",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
@@ -75,5 +75,5 @@
     "babel-plugin-inline-react-svg": "^2.0.2",
     "jest": "^27.5.1"
   },
-  "gitHead": "0ce72656e21595f9bee690ce3c3a5446d781ed50"
+  "gitHead": "49ba245e679952c38a172fa3babe1342c8c78eac"
 }