@blocklet/launcher-workflow 1.5.62 → 1.5.65

package/lib/components/instance-operation.js

@@ -23,6 +23,8 @@ var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 
 var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 
+var _launcherConstant = require("@blocklet/launcher-constant");
+
 var _util = require("../util");
 
 var _query = _interopRequireDefault(require("../hooks/query"));
@@ -33,8 +35,6 @@ var _router = _interopRequireDefault(require("../contexts/router"));
 
 var _locale = require("../contexts/locale");
 
-var _constant = require("../constant");
-
 var _pageHeader = _interopRequireDefault(require("./page-header"));
 
 var _launchResultMessage = _interopRequireDefault(require("./launch-result-message"));
@@ -92,7 +92,7 @@ function OperationPage(_ref) {
         }
       } = await api.get("/public/instances/".concat(nftId, "/status"));
 
-      if (instance.status >= _constant.INSTANCE_STATUS.running) {
+      if (instance.status >= _launcherConstant.INSTANCE_STATUS.running) {
         const url = (0, _util.getLaunchBlockletUrl)(instance.serverUrl, blockletMetaUrl, locale);
         setLaunchState(pre => _objectSpread(_objectSpread({}, pre), {}, {
           status: STATUS.success,
@@ -187,7 +187,7 @@ function OperationPage(_ref) {
 const Content = _styledComponents.default.div.withConfig({
   displayName: "instance-operation__Content",
   componentId: "sc-1fcaixs-0"
-})(["margin:auto;height:100%;.link{color:#4f6af6;}.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);
+})(["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);
 
 OperationPage.propTypes = {
   type: _propTypes.default.oneOf(['launch', 'start']),

package/lib/components/page-header.js

@@ -28,7 +28,7 @@ function PageHeader(_ref) {
 const Content = _styledComponents.default.div.withConfig({
   displayName: "page-header__Content",
   componentId: "sc-2cz88s-0"
-})(["width:100%;text-align:center;.title{font-size:24px;color:", ";}.sub-title{font-size:14px;color:", ";}"], props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
+})(["width:100%;text-align:center;.title{font-size:24px;font-weight:700;color:", ";}.sub-title{font-size:14px;color:", ";padding:0 14px;font-weight:400;}"], props => props.theme.palette.common.black, props => props.theme.palette.grey[600]);
 
 var _default = PageHeader;
 exports.default = _default;

package/lib/components/stripe/checkout.js

@@ -21,6 +21,8 @@ var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 
 var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
 
+var _launcherConstant = require("@blocklet/launcher-constant");
+
 var _locale = require("../../contexts/locale");
 
 var _paying = _interopRequireDefault(require("./paying"));
@@ -34,7 +36,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function CheckoutForm(_ref) {
   let {
     clientSecret,
-    onPaid
+    onLoad
   } = _ref;
   const stripe = (0, _reactStripeJs.useStripe)();
   const elements = (0, _reactStripeJs.useElements)();
@@ -104,7 +106,7 @@ function CheckoutForm(_ref) {
       return;
     }
 
-    onPaid();
+    onLoad();
   };
 
   return /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement("form", {
@@ -132,7 +134,7 @@ const Content = _styledComponents.default.div.withConfig({
 
 CheckoutForm.propTypes = {
   clientSecret: _propTypes.default.string.isRequired,
-  onPaid: _propTypes.default.func.isRequired
+  onLoad: _propTypes.default.func.isRequired
 };
 
 function Checkout(_ref3) {
@@ -140,11 +142,16 @@ function Checkout(_ref3) {
     clientSecret,
     orderId,
     userDid,
-    onPaid,
-    onCancel
+    onComplete,
+    onCancel,
+    status
   } = _ref3;
   const [open, setOpen] = (0, _react.useState)(true);
-  const [waitingCompleted, setWaitingCompleted] = (0, _react.useState)(false);
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  const [showCloseButton, setShowCloseButton] = (0, _react.useState)(true);
+  const [waitingCompleted, setWaitingCompleted] = (0, _react.useState)(status === _launcherConstant.ORDER_STATUS.paid);
   const stripePromise = (0, _stripeJs.loadStripe)(window.env.stripePublicKey);
   const options = {
     clientSecret,
@@ -153,7 +160,9 @@ function Checkout(_ref3) {
     }
   };
 
-  const handlePaid = () => setWaitingCompleted(true);
+  const handleLoad = () => setWaitingCompleted(true);
+
+  const handlePaid = () => setShowCloseButton(false);
 
   const handleClose = (_, reason) => {
     if (reason === 'backdropClick') {
@@ -165,27 +174,31 @@ function Checkout(_ref3) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    title: t('common.pay'),
+    showCloseButton: showCloseButton,
     open: open,
     onClose: handleClose,
     disableEscapeKeyDown: true
   }, waitingCompleted && /*#__PURE__*/_react.default.createElement(_paying.default, {
     orderId: orderId,
     userDid: userDid,
-    onPaid: onPaid
+    onComplete: onComplete,
+    onPaid: handlePaid
   }), !waitingCompleted && /*#__PURE__*/_react.default.createElement(_reactStripeJs.Elements, {
     options: options,
     stripe: stripePromise
   }, /*#__PURE__*/_react.default.createElement(CheckoutForm, {
     clientSecret: clientSecret,
-    onPaid: handlePaid
+    onLoad: handleLoad
   })));
 }
 
 Checkout.propTypes = {
   clientSecret: _propTypes.default.string.isRequired,
   orderId: _propTypes.default.string.isRequired,
+  status: _propTypes.default.number.isRequired,
   userDid: _propTypes.default.string.isRequired,
-  onPaid: _propTypes.default.func.isRequired,
+  onComplete: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func
 };
 Checkout.defaultProps = {

package/lib/components/stripe/paying.js

@@ -17,6 +17,10 @@ var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
 
 var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 
+var _launcherConstant = require("@blocklet/launcher-constant");
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
 var _locale = require("../../contexts/locale");
 
 var _request = _interopRequireDefault(require("../../contexts/request"));
@@ -30,14 +34,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function Paying(_ref) {
   let {
     orderId,
+    userDid,
     onPaid,
-    userDid
+    onComplete
   } = _ref;
   const {
     t
   } = (0, _locale.useLocaleContext)();
   const [needFetchOrderStatus, setNeedFetchOrderStatus] = (0, _react.useState)(true);
-  const [status, setStatus] = (0, _react.useState)('unpaid');
+  const [status, setStatus] = (0, _react.useState)(_launcherConstant.ORDER_STATUS.unpaid);
   const {
     api
   } = (0, _request.default)();
@@ -46,29 +51,36 @@ function Paying(_ref) {
       data: order
     } = await api.get("/orders/".concat(orderId, "?userDid=").concat(userDid));
 
-    if (order.status === 'completed') {
+    if (order.status === _launcherConstant.ORDER_STATUS.nftSent) {
       fetchOrder.cancel();
       setNeedFetchOrderStatus(false);
-      setTimeout(() => onPaid({
+      setTimeout(() => onComplete({
         nftId: order.nftId
       }), 2000);
     }
 
+    if (order.status >= _launcherConstant.ORDER_STATUS.paid) {
+      onPaid();
+    }
+
     setStatus(order.status);
   }, 3000);
   (0, _useInterval.default)(fetchOrder, needFetchOrderStatus ? 3000 : null);
-  return /*#__PURE__*/_react.default.createElement(Content, null, status === 'unpaid' && /*#__PURE__*/_react.default.createElement(_Spinner.default, null), /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(Content, null, status <= _launcherConstant.ORDER_STATUS.paid && /*#__PURE__*/_react.default.createElement(_Spinner.default, null), status === _launcherConstant.ORDER_STATUS.nftSent && /*#__PURE__*/_react.default.createElement(_Check.default, {
+    className: "status--succeed_icon"
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "status"
   }, t("plan.paymentCredit.status.".concat(status))));
 }
 
 Paying.propTypes = {
   orderId: _propTypes.default.string.isRequired,
+  userDid: _propTypes.default.string.isRequired,
   onPaid: _propTypes.default.func.isRequired,
-  userDid: _propTypes.default.string.isRequired
+  onComplete: _propTypes.default.func.isRequired
 };
 
 const Content = _styledComponents.default.div.withConfig({
   displayName: "paying__Content",
   componentId: "sc-1n02bp2-0"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;.status{margin-top:32px;}"]);
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;.status{margin-top:32px;}.status--succeed_icon{background-color:#3ab39d;display:inline-flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:100%;color:", ";}"], props => props.theme.palette.common.white);

package/lib/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Stripe = Stripe;
 exports.default = Launcher;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -17,6 +18,8 @@ var _launch = _interopRequireDefault(require("./launch"));
 
 var _prepare = _interopRequireDefault(require("./prepare"));
 
+var _checkout = _interopRequireDefault(require("./components/stripe/checkout"));
+
 var _router = _interopRequireWildcard(require("./contexts/router"));
 
 var _locales = require("./locales");
@@ -25,12 +28,18 @@ var _request = require("./contexts/request");
 
 var _locale = require("./contexts/locale");
 
+const _excluded = ["locale", "baseURL"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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; }
+
 // eslint-disable-next-line react/prop-types
 function LaunchContent(_ref) {
   let {
@@ -61,13 +70,37 @@ function LaunchContent(_ref) {
   })));
 }
 
-function Launcher(_ref2) {
+function Stripe(_ref2) {
+  let {
+    locale,
+    baseURL
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_request.RequestProvider, {
+    baseURL: baseURL
+  }, /*#__PURE__*/_react.default.createElement(_locale.LocaleProvider, {
+    translations: _locales.translations,
+    locale: locale
+  }, /*#__PURE__*/_react.default.createElement(_checkout.default, rest)));
+}
+
+Stripe.propTypes = {
+  locale: _propTypes.default.string,
+  baseURL: _propTypes.default.string
+};
+Stripe.defaultProps = {
+  locale: 'en',
+  baseURL: '/'
+};
+
+function Launcher(_ref3) {
   let {
     Route,
     routerPrefix,
     locale,
     baseURL
-  } = _ref2;
+  } = _ref3;
   return /*#__PURE__*/_react.default.createElement(_request.RequestProvider, {
     baseURL: baseURL
   }, /*#__PURE__*/_react.default.createElement(_locale.LocaleProvider, {

package/lib/locales/en.js

@@ -1,5 +1,9 @@
 "use strict";
 
+const {
+  ORDER_STATUS
+} = require('@blocklet/launcher-constant');
+
 module.exports = {
   common: {
     paymentMethod: 'Payment Method',
@@ -21,10 +25,10 @@ module.exports = {
     loadListFailed: 'Plan list load error',
     paymentCredit: {
       status: {
-        unpaid: 'Waiting for payment',
-        paid: 'Payment completed, waiting for order completion',
-        completed: 'Completed, redirecting',
-        expired: 'Order has expired'
+        [ORDER_STATUS.unpaid]: 'Waiting for payment',
+        [ORDER_STATUS.paid]: 'Payment completed, waiting for order completion',
+        [ORDER_STATUS.nftSent]: 'Completed',
+        [ORDER_STATUS.expired]: 'Order has expired'
       }
     },
     useCrypto: 'Crypto',

package/lib/locales/zh.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _launcherConstant = require("@blocklet/launcher-constant");
+
 module.exports = {
   common: {
     paymentMethod: '付款方式',
@@ -21,10 +23,10 @@ module.exports = {
     loadListFailed: '加载节点类型列表出错',
     paymentCredit: {
       status: {
-        unpaid: '支付中',
-        paid: '支付完成, 等待订单完成',
-        completed: '已完成，跳转中',
-        expired: '订单已过期'
+        [_launcherConstant.ORDER_STATUS.unpaid]: '支付中',
+        [_launcherConstant.ORDER_STATUS.paid]: '支付完成, 等待订单完成',
+        [_launcherConstant.ORDER_STATUS.nftSent]: '已完成',
+        [_launcherConstant.ORDER_STATUS.expired]: '订单已过期'
       }
     },
     useCrypto: '数字货币支付',

package/lib/prepare.js

@@ -23,14 +23,14 @@ var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl
 
 var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
 
+var _launcherConstant = require("@blocklet/launcher-constant");
+
 var _pageHeader = _interopRequireDefault(require("./components/page-header"));
 
 var _request = _interopRequireDefault(require("./contexts/request"));
 
 var _locale = require("./contexts/locale");
 
-var _constant = require("./constant");
-
 var _router = _interopRequireWildcard(require("./contexts/router"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -165,7 +165,7 @@ function PreparePage() {
 
   const handleCloseAuthDialog = () => setShowLaunchInstanceDialog(false);
 
-  const isRedeem = nftId === _constant.REDEEM_NFT_ID;
+  const isRedeem = nftId === _launcherConstant.REDEEM_NFT_ID;
   const headerScope = isRedeem ? 'redeem' : 'prepare';
   const buttonScope = isRedeem ? 'redeem' : 'launch';
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement(_pageHeader.default, {

package/lib/purchase.js

@@ -15,6 +15,8 @@ var _lodash = _interopRequireDefault(require("lodash.get"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _Coins = require("@styled-icons/remix-fill/Coins");
+
 var _util = require("@ocap/util");
 
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
@@ -25,17 +27,19 @@ var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect
 
 var _utils = require("@arcblock/did-connect/lib/utils");
 
-var _compactLayout = _interopRequireDefault(require("@blocklet/launcher-layout/lib/compact-layout"));
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
 
-var _Alert = _interopRequireDefault(require("@material-ui/lab/Alert"));
+var _compactLayout = _interopRequireDefault(require("@blocklet/launcher-layout/lib/compact-layout"));
 
 var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
 
 var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
 
-var _CreditCard = _interopRequireDefault(require("@material-ui/icons/CreditCard"));
+var _launcherConstant = require("@blocklet/launcher-constant");
 
-var _Coins = require("@styled-icons/remix-fill/Coins");
+var _Alert = _interopRequireDefault(require("@material-ui/lab/Alert"));
+
+var _CreditCard = _interopRequireDefault(require("@material-ui/icons/CreditCard"));
 
 var _plan = _interopRequireDefault(require("./components/plan"));
 
@@ -49,8 +53,6 @@ var _locale = require("./contexts/locale");
 
 var _session = require("./contexts/session");
 
-var _constant = require("./constant");
-
 var _request = _interopRequireDefault(require("./contexts/request"));
 
 var _router = _interopRequireWildcard(require("./contexts/router"));
@@ -61,6 +63,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 const formatTokenPrice = token => "".concat((0, _util.fromUnitToToken)(token.value, token.decimal), " ").concat(token.symbol);
 
 const formatFiatPrice = price => "".concat(price.symbol || price.unit).concat(price.value);
@@ -77,14 +85,14 @@ function PurchasePage() {
     session
   } = (0, _session.useSessionContext)();
   const {
-    t,
-    locale
+    t
   } = (0, _locale.useLocaleContext)();
   const [paying, setPaying] = (0, _react.useState)(false);
   const [paymentInfo, setPaymentInfo] = (0, _react.useState)(null);
   const [buttonInFix, setButtonInFix] = (0, _react.useState)(false);
   const [paymentType, setPaymentType] = (0, _react.useState)('crypto');
   const routerPrefix = (0, _router.usePrefix)();
+  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('sm'));
   const userDid = query.get('userDid') || (0, _lodash.default)(session, 'user.did');
   const isEmbed = !!query.get('blocklet_meta_url');
   (0, _react.useEffect)(() => {
@@ -150,7 +158,7 @@ function PurchasePage() {
     plans
   } = plansState.value;
 
-  const handleAuthSuccess = _ref => {
+  const handlePaid = _ref => {
     let {
       nftId
     } = _ref;
@@ -207,10 +215,13 @@ function PurchasePage() {
       try {
         const {
           data
-        } = await api.post("/pay/stripe/intent?locale=".concat(locale, "&userDid=").concat(userDid), params);
+        } = await api.post('/pay', _objectSpread(_objectSpread({}, params), {}, {
+          userDid
+        }));
         setPaymentInfo({
           orderId: data.orderId,
-          clientSecret: data.clientSecret
+          clientSecret: data.clientSecret,
+          status: data.status
         });
       } catch (error) {
         console.error(error);
@@ -220,15 +231,14 @@ function PurchasePage() {
   };
 
   const handleRedeem = () => {
-    handleAuthSuccess({
-      nftId: _constant.REDEEM_NFT_ID
+    handlePaid({
+      nftId: _launcherConstant.REDEEM_NFT_ID
     });
   };
 
   const PayButton = () => /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => handlePay(paymentType),
     disabled: paying,
-    rounded: true,
     variant: "contained",
     color: "primary"
   }, paying && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
@@ -237,7 +247,6 @@ function PurchasePage() {
 
   const RedeemButton = () => /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: () => handleRedeem(),
-    rounded: true,
     variant: "outlined",
     color: "primary",
     style: {
@@ -259,7 +268,7 @@ function PurchasePage() {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(Container, null, isEmbed && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, isEmbed && !isMobile && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
     title: t('plan.title'),
     subTitle: t('plan.subTitle')
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -271,7 +280,7 @@ function PurchasePage() {
     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)) : ''
-  }, !isEmbed && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
+  }, (!isEmbed || isMobile) && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
     title: t('plan.title'),
     subTitle: t('plan.subTitle')
   }), plans.length ? /*#__PURE__*/_react.default.createElement("div", {
@@ -295,7 +304,7 @@ function PurchasePage() {
     popup: true,
     action: "purchase",
     checkFn: createRequest().get,
-    onSuccess: handleAuthSuccess,
+    onSuccess: handlePaid,
     onClose: handleCloseAuthDialog,
     checkTimeout: 60 * 5000,
     extraParams: getPurchaseParams(),
@@ -311,8 +320,9 @@ function PurchasePage() {
     clientSecret: paymentInfo.clientSecret,
     orderId: paymentInfo.orderId,
     userDid: userDid,
-    onPaid: handleAuthSuccess,
-    onCancel: handleCancelPay
+    onComplete: handlePaid,
+    onCancel: handleCancelPay,
+    status: paymentInfo.status
   }));
 }
 
@@ -324,7 +334,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:rgba(0,0,0,0.05) 0 0 4px;}}.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);}}.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);
 
 const PaymentLabel = _styledComponents.default.div.withConfig({
   displayName: "purchase__PaymentLabel",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.5.62",
+  "version": "1.5.65",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -37,14 +37,15 @@
     "react": ">=16.12.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^1.16.40",
-    "@arcblock/icons": "^1.16.40",
-    "@arcblock/ux": "^1.16.40",
-    "@blocklet/launcher-layout": "1.5.62",
+    "@arcblock/did-connect": "^1.16.49",
+    "@arcblock/icons": "^1.16.49",
+    "@arcblock/ux": "^1.16.49",
+    "@blocklet/launcher-constant": "1.5.65",
+    "@blocklet/launcher-layout": "1.5.65",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@ocap/util": "^1.14.21",
+    "@ocap/util": "^1.15.2",
     "@stripe/react-stripe-js": "^1.7.0",
     "@stripe/stripe-js": "^1.22.0",
     "@styled-icons/remix-fill": "^10.18.0",
@@ -66,5 +67,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "09b90c32667ccd867d6e1f263452d487f67b83ab"
+  "gitHead": "f0d418d80249fc4d18fe2fd8481bd64a1010d4f4"
 }

package/lib/constant.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fromInstanceStatus = exports.REDEEM_NFT_ID = exports.INSTANCE_STATUS = void 0;
-const INSTANCE_STATUS = Object.freeze({
-  unknown: -1,
-  pending: 0,
-  starting: 10,
-  running: 20,
-  restarting: 30,
-  stopping: 40,
-  stopped: 50,
-  terminated: 60,
-  expired: 70,
-  error: 80,
-  createError: 90,
-  waiting: 10000
-});
-exports.INSTANCE_STATUS = INSTANCE_STATUS;
-const statusInstanceMap = Object.keys(INSTANCE_STATUS).reduce((acc, cur) => {
-  acc[INSTANCE_STATUS[cur]] = cur;
-  return acc;
-}, {});
-
-const fromInstanceStatus = status => statusInstanceMap[status];
-
-exports.fromInstanceStatus = fromInstanceStatus;
-const REDEEM_NFT_ID = 'redeem';
-exports.REDEEM_NFT_ID = REDEEM_NFT_ID;