@blocklet/launcher-workflow 1.5.18

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2022 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,25 @@
+# `@blocklet/launcher-workflow`
+
+Client package of Blocklet Launcher flow.
+
+## Usage
+
+```javascript
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import ServerLauncher from '@blocklet/launcher-workflow';
+import { SessionProvider, useSessionContext } from '@blocklet/launcher-workflow/lib/contexts/session';
+```
+
+### Layout
+
+```jsx
+<SessionProvider>
+  <Switch>
+    <Route exact path="/home" component={HomePage} />
+    <ServerLauncher Route={Route} locale={locale} />
+    <Route path="*">
+      <Redirect to="/" />
+    </Route>
+  </Switch>
+</SessionProvider>
+```

package/lib/api.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useRequest;
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
+var _urlJoin = _interopRequireDefault(require("url-join"));
+
+var _session = require("./contexts/session");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_axios.default.defaults.timeout = 200000;
+
+function useRequest() {
+  const {
+    session
+  } = (0, _session.useSessionContext)();
+  const baseURL = 'https://launcher.staging.arcblock.io/';
+
+  const privateRequest = _axios.default.create({
+    baseURL
+  });
+
+  privateRequest.interceptors.request.use(config => {
+    config.url = (0, _urlJoin.default)('/api', config.url);
+    return config;
+  });
+  privateRequest.interceptors.response.use(response => response, err => {
+    if ((0, _lodash.default)(err, 'response.status') === 401) {
+      session.login();
+    }
+
+    return Promise.reject(err);
+  });
+  return {
+    privateRequest,
+    create: _axios.default.create
+  };
+}

package/lib/assets/images/blocklet-server.svg

@@ -0,0 +1,10 @@
+<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.99999 4.8999C2.60751 4.8999 3.09999 5.39239 3.09999 5.9999V17.9999C3.09999 18.1945 3.18413 18.4626 3.50417 18.7989C3.82963 19.1409 4.35257 19.4989 5.08292 19.8234C6.54086 20.4713 8.632 20.8999 11 20.8999C13.368 20.8999 15.4591 20.4713 16.9171 19.8234C17.6474 19.4989 18.1704 19.1409 18.4958 18.7989C18.8159 18.4626 18.9 18.1945 18.9 17.9999V5.9999C18.9 5.39239 19.3925 4.8999 20 4.8999C20.6075 4.8999 21.1 5.39239 21.1 5.9999V17.9999C21.1 18.9103 20.6804 19.6947 20.0895 20.3156C19.504 20.9308 18.7088 21.4347 17.8104 21.8339C16.0109 22.6335 13.602 23.0999 11 23.0999C8.39799 23.0999 5.98913 22.6335 4.18956 21.8339C3.29117 21.4347 2.49598 20.9308 1.91051 20.3156C1.31961 19.6947 0.899994 18.9103 0.899994 17.9999V5.9999C0.899994 5.39239 1.39248 4.8999 1.99999 4.8999Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.99999 10.8999C2.60751 10.8999 3.09999 11.3924 3.09999 11.9999C3.09999 12.1945 3.18413 12.4626 3.50417 12.7989C3.82963 13.1409 4.35257 13.4989 5.08292 13.8234C6.54086 14.4713 8.632 14.8999 11 14.8999C13.368 14.8999 15.4591 14.4713 16.9171 13.8234C17.6474 13.4989 18.1704 13.1409 18.4958 12.7989C18.8159 12.4626 18.9 12.1945 18.9 11.9999C18.9 11.3924 19.3925 10.8999 20 10.8999C20.6075 10.8999 21.1 11.3924 21.1 11.9999C21.1 12.9103 20.6804 13.6947 20.0895 14.3156C19.504 14.9308 18.7088 15.4347 17.8104 15.8339C16.0109 16.6335 13.602 17.0999 11 17.0999C8.39799 17.0999 5.98913 16.6335 4.18956 15.8339C3.29117 15.4347 2.49598 14.9308 1.91051 14.3156C1.31961 13.6947 0.899994 12.9103 0.899994 11.9999C0.899994 11.3924 1.39248 10.8999 1.99999 10.8999Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.50417 5.20089C3.18413 5.53718 3.09999 5.80526 3.09999 5.9999C3.09999 6.19454 3.18413 6.46263 3.50417 6.79892C3.82963 7.14091 4.35257 7.49889 5.08292 7.82343C6.54086 8.47127 8.632 8.8999 11 8.8999C13.368 8.8999 15.4591 8.47127 16.9171 7.82343C17.6474 7.49889 18.1704 7.14091 18.4958 6.79892C18.8159 6.46263 18.9 6.19454 18.9 5.9999C18.9 5.80526 18.8159 5.53718 18.4958 5.20089C18.1704 4.8589 17.6474 4.50092 16.9171 4.17638C15.4591 3.52853 13.368 3.0999 11 3.0999C8.632 3.0999 6.54086 3.52853 5.08292 4.17638C4.35257 4.50092 3.82963 4.8589 3.50417 5.20089ZM4.18956 2.16593C5.98913 1.36627 8.39799 0.899902 11 0.899902C13.602 0.899902 16.0109 1.36627 17.8104 2.16593C18.7088 2.56514 19.504 3.06903 20.0895 3.68423C20.6804 4.30513 21.1 5.08954 21.1 5.9999C21.1 6.91026 20.6804 7.69468 20.0895 8.31557C19.504 8.93077 18.7088 9.43467 17.8104 9.83388C16.0109 10.6335 13.602 11.0999 11 11.0999C8.39799 11.0999 5.98913 10.6335 4.18956 9.83388C3.29117 9.43467 2.49598 8.93077 1.91051 8.31557C1.31961 7.69468 0.899994 6.91026 0.899994 5.9999C0.899994 5.08954 1.31961 4.30513 1.91051 3.68423C2.49598 3.06903 3.29117 2.56514 4.18956 2.16593Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 24.8999C24.6075 24.8999 25.1 25.3924 25.1 25.9999V37.9999C25.1 38.1945 25.1841 38.4626 25.5042 38.7989C25.8296 39.1409 26.3526 39.4989 27.0829 39.8234C28.5409 40.4713 30.632 40.8999 33 40.8999C35.368 40.8999 37.4591 40.4713 38.9171 39.8234C39.6474 39.4989 40.1704 39.1409 40.4958 38.7989C40.8159 38.4626 40.9 38.1945 40.9 37.9999V25.9999C40.9 25.3924 41.3925 24.8999 42 24.8999C42.6075 24.8999 43.1 25.3924 43.1 25.9999V37.9999C43.1 38.9103 42.6804 39.6947 42.0895 40.3156C41.504 40.9308 40.7088 41.4347 39.8104 41.8339C38.0109 42.6335 35.602 43.0999 33 43.0999C30.398 43.0999 27.9891 42.6335 26.1896 41.8339C25.2912 41.4347 24.496 40.9308 23.9105 40.3156C23.3196 39.6947 22.9 38.9103 22.9 37.9999V25.9999C22.9 25.3924 23.3925 24.8999 24 24.8999Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 30.8999C24.6075 30.8999 25.1 31.3924 25.1 31.9999C25.1 32.1945 25.1841 32.4626 25.5042 32.7989C25.8296 33.1409 26.3526 33.4989 27.0829 33.8234C28.5409 34.4713 30.632 34.8999 33 34.8999C35.368 34.8999 37.4591 34.4713 38.9171 33.8234C39.6474 33.4989 40.1704 33.1409 40.4958 32.7989C40.8159 32.4626 40.9 32.1945 40.9 31.9999C40.9 31.3924 41.3925 30.8999 42 30.8999C42.6075 30.8999 43.1 31.3924 43.1 31.9999C43.1 32.9103 42.6804 33.6947 42.0895 34.3156C41.504 34.9308 40.7088 35.4347 39.8104 35.8339C38.0109 36.6335 35.602 37.0999 33 37.0999C30.398 37.0999 27.9891 36.6335 26.1896 35.8339C25.2912 35.4347 24.496 34.9308 23.9105 34.3156C23.3196 33.6947 22.9 32.9103 22.9 31.9999C22.9 31.3924 23.3925 30.8999 24 30.8999Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.5042 25.2009C25.1841 25.5372 25.1 25.8053 25.1 25.9999C25.1 26.1945 25.1841 26.4626 25.5042 26.7989C25.8296 27.1409 26.3526 27.4989 27.0829 27.8234C28.5409 28.4713 30.632 28.8999 33 28.8999C35.368 28.8999 37.4591 28.4713 38.9171 27.8234C39.6474 27.4989 40.1704 27.1409 40.4958 26.7989C40.8159 26.4626 40.9 26.1945 40.9 25.9999C40.9 25.8053 40.8159 25.5372 40.4958 25.2009C40.1704 24.8589 39.6474 24.5009 38.9171 24.1764C37.4591 23.5285 35.368 23.0999 33 23.0999C30.632 23.0999 28.5409 23.5285 27.0829 24.1764C26.3526 24.5009 25.8296 24.8589 25.5042 25.2009ZM26.1896 22.1659C27.9891 21.3663 30.398 20.8999 33 20.8999C35.602 20.8999 38.0109 21.3663 39.8104 22.1659C40.7088 22.5651 41.504 23.069 42.0895 23.6842C42.6804 24.3051 43.1 25.0895 43.1 25.9999C43.1 26.9103 42.6804 27.6947 42.0895 28.3156C41.504 28.9308 40.7088 29.4347 39.8104 29.8339C38.0109 30.6335 35.602 31.0999 33 31.0999C30.398 31.0999 27.9891 30.6335 26.1896 29.8339C25.2912 29.4347 24.496 28.9308 23.9105 28.3156C23.3196 27.6947 22.9 26.9103 22.9 25.9999C22.9 25.0895 23.3196 24.3051 23.9105 23.6842C24.496 23.069 25.2912 22.5651 26.1896 22.1659Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.9 3.9999C28.9 3.39239 29.3925 2.8999 30 2.8999H36C37.3526 2.8999 38.6498 3.43722 39.6062 4.39366C40.5627 5.35009 41.1 6.6473 41.1 7.9999V13.9999C41.1 14.6074 40.6075 15.0999 40 15.0999C39.3925 15.0999 38.9 14.6074 38.9 13.9999V7.9999C38.9 7.23077 38.5945 6.49315 38.0506 5.94929C37.5067 5.40544 36.7691 5.0999 36 5.0999H30C29.3925 5.0999 28.9 4.60742 28.9 3.9999Z" fill="#BFBFBF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99999 28.8999C4.60751 28.8999 5.09999 29.3924 5.09999 29.9999V35.9999C5.09999 36.769 5.40553 37.5067 5.94938 38.0505C6.49324 38.5944 7.23087 38.8999 7.99999 38.8999H14C14.6075 38.8999 15.1 39.3924 15.1 39.9999C15.1 40.6074 14.6075 41.0999 14 41.0999H7.99999C6.64739 41.0999 5.35018 40.5626 4.39375 39.6061C3.43731 38.6497 2.89999 37.3525 2.89999 35.9999V29.9999C2.89999 29.3924 3.39248 28.8999 3.99999 28.8999Z" fill="#BFBFBF"/>
+</svg>

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

@@ -0,0 +1,65 @@
+"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"));
+
+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);
+
+  const Icon = variant === 'error' ? _Close.default : _Check.default;
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
+    variant: variant
+  }, props), /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon"
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)), title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "result-message-title"
+  }, title), subTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sub-title"
+  }, subTitle), footer && /*#__PURE__*/_react.default.createElement("div", {
+    className: "result-message-footer"
+  }, footer));
+}
+
+LaunchResultMessage.propTypes = {
+  variant: _propTypes.default.oneOf(['success', 'error']),
+  title: _propTypes.default.string,
+  subTitle: _propTypes.default.string,
+  footer: _propTypes.default.object
+};
+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%;.icon{display:inline-flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:100%;background-color:", ";color:", ";}.result-message-title{margin-top:24px;color:", ";font-size:24px;font-weight:bolder;}.sub-title{margin-top:8px;color:", ";font-size:14px;}.result-message-footer{margin-top:24px;}"], props => props.variant === 'error' ? props.theme.palette.error.main : props.theme.palette.success.main, props => props.theme.palette.common.white, props => props.variant === 'error' ? props.theme.palette.error.main : props.theme.palette.success.main, props => props.theme.palette.grey[700]);

package/lib/components/page-header.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function PageHeader(_ref) {
+  let {
+    title,
+    subTitle
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sub-title"
+  }, subTitle));
+}
+
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "page-header__Content",
+  componentId: "sc-2cz88s-0"
+})(["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]);
+
+var _default = PageHeader;
+exports.default = _default;
+PageHeader.propTypes = {
+  title: _propTypes.default.string,
+  subTitle: _propTypes.default.string
+};
+PageHeader.defaultProps = {
+  title: '',
+  subTitle: ''
+};

package/lib/components/payment-type.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PaymentType;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _locale = require("../contexts/locale");
+
+const _excluded = ["type"];
+
+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 PaymentType(_ref) {
+  let {
+    type
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  const contentMap = {
+    crypto: t('plan.useCrypto'),
+    fiat: t('plan.useFiat')
+  };
+  return /*#__PURE__*/_react.default.createElement(Container, props, contentMap[type]);
+}
+
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "payment-type__Container",
+  componentId: "sc-9eyuza-0"
+})(["width:220px;height:56px;border-radius:8px;border:1px solid ", ";padding:16px;display:flex;justify-content:flex-start;align-items:center;"], props => props.theme.palette.grey[200]);
+
+PaymentType.propTypes = {
+  type: _propTypes.default.oneOf(['crypto', 'fiat']).isRequired
+};

package/lib/components/plan.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NodeType;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
+var _core = require("@material-ui/core");
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _locale = require("../contexts/locale");
+
+const _excluded = ["data", "selected", "paymentType"];
+
+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 NodeType(_ref) {
+  let {
+    data,
+    selected,
+    paymentType
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    locale
+  } = (0, _locale.useLocaleContext)();
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(_core.Typography, {
+    className: "name",
+    component: "span"
+  }, (0, _lodash.default)(data, "name.".concat(locale))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "price",
+    component: "span"
+  }, data.prices[paymentType]), /*#__PURE__*/_react.default.createElement("div", {
+    className: "rights"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "rights-list"
+  }, data.features.map(feat => /*#__PURE__*/_react.default.createElement("li", {
+    key: feat[locale]
+  }, /*#__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])))))));
+}
+
+NodeType.propTypes = {
+  data: _propTypes.default.object.isRequired,
+  paymentType: _propTypes.default.string,
+  selected: _propTypes.default.bool
+};
+NodeType.defaultProps = {
+  selected: false,
+  paymentType: 'crypto'
+};
+
+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);

package/lib/components/stripe/checkout.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Checkout;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _stripeJs = require("@stripe/stripe-js");
+
+var _reactStripeJs = require("@stripe/react-stripe-js");
+
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+
+var _locale = require("../../contexts/locale");
+
+var _paying = _interopRequireDefault(require("./paying"));
+
+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 CheckoutForm(_ref) {
+  let {
+    clientSecret,
+    onPaid
+  } = _ref;
+  const stripe = (0, _reactStripeJs.useStripe)();
+  const elements = (0, _reactStripeJs.useElements)();
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  const [message, setMessage] = (0, _react.useState)(null);
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [elementReady, setElementReady] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (!stripe) {
+      return;
+    }
+
+    if (!clientSecret) {
+      return;
+    }
+
+    stripe.retrievePaymentIntent(clientSecret).then(_ref2 => {
+      let {
+        paymentIntent
+      } = _ref2;
+
+      switch (paymentIntent.status) {
+        case 'succeeded':
+          setMessage(t('plan.paymentCredit.preparePayMessage.succeeded'));
+          break;
+
+        case 'processing':
+          setMessage(t('plan.paymentCredit.preparePayMessage.processing'));
+          break;
+
+        case 'requires_payment_method':
+          // 忽略该状态
+          break;
+
+        default:
+          setMessage(t('plan.paymentCredit.preparePayMessage.default'));
+          break;
+      }
+    });
+  }, [stripe, clientSecret, t]);
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    setIsLoading(true);
+    const {
+      error
+    } = await stripe.confirmPayment({
+      elements,
+      redirect: 'if_required'
+    });
+    setIsLoading(false);
+
+    if (error) {
+      if (error.type === 'card_error' || error.type === 'validation_error') {
+        setMessage(error.message);
+      } else {
+        setMessage(t('plan.paymentCredit.submitPayError'));
+      }
+
+      return;
+    }
+
+    onPaid();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/_react.default.createElement(_reactStripeJs.PaymentElement, {
+    onReady: () => setElementReady(true)
+  }), (!stripe || !elements || !elementReady) && /*#__PURE__*/_react.default.createElement(_Spinner.default, null), stripe && elements && elementReady && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    id: "submit",
+    type: "submit",
+    disabled: isLoading,
+    rounded: true,
+    variant: "contained",
+    color: "primary"
+  }, isLoading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+    size: 12
+  }), t('common.paying')) : t('common.pay')), message && /*#__PURE__*/_react.default.createElement("div", {
+    id: "payment-message"
+  }, message)));
+}
+
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "checkout__Content",
+  componentId: "sc-1ktna5f-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;#submit{margin-top:16px;width:100%;}#payment-message{margin-top:16px;color:", ";}"], props => props.theme.palette.error.main);
+
+CheckoutForm.propTypes = {
+  clientSecret: _propTypes.default.string.isRequired,
+  onPaid: _propTypes.default.func.isRequired
+};
+
+function Checkout(_ref3) {
+  let {
+    clientSecret,
+    orderId,
+    userDid,
+    onPaid,
+    onCancel
+  } = _ref3;
+  const [open, setOpen] = (0, _react.useState)(true);
+  const [waitingCompleted, setWaitingCompleted] = (0, _react.useState)(false);
+  const stripePromise = (0, _stripeJs.loadStripe)(window.env.stripePublicKey);
+  const options = {
+    clientSecret,
+    appearance: {
+      theme: 'stripe'
+    }
+  };
+
+  const handlePaid = () => setWaitingCompleted(true);
+
+  const handleClose = (_, reason) => {
+    if (reason === 'backdropClick') {
+      return;
+    }
+
+    setOpen(false);
+    onCancel();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: open,
+    onClose: handleClose,
+    disableEscapeKeyDown: true
+  }, waitingCompleted && /*#__PURE__*/_react.default.createElement(_paying.default, {
+    orderId: orderId,
+    userDid: userDid,
+    onPaid: onPaid
+  }), !waitingCompleted && /*#__PURE__*/_react.default.createElement(_reactStripeJs.Elements, {
+    options: options,
+    stripe: stripePromise
+  }, /*#__PURE__*/_react.default.createElement(CheckoutForm, {
+    clientSecret: clientSecret,
+    onPaid: handlePaid
+  })));
+}
+
+Checkout.propTypes = {
+  clientSecret: _propTypes.default.string.isRequired,
+  orderId: _propTypes.default.string.isRequired,
+  userDid: _propTypes.default.string.isRequired,
+  onPaid: _propTypes.default.func.isRequired,
+  onCancel: _propTypes.default.func
+};
+Checkout.defaultProps = {
+  onCancel: () => {}
+};

package/lib/components/stripe/paying.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Paying;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
+
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+
+var _locale = require("../../contexts/locale");
+
+var _request = _interopRequireDefault(require("../../contexts/request"));
+
+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 Paying(_ref) {
+  let {
+    orderId,
+    onPaid,
+    userDid
+  } = _ref;
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  const [needFetchOrderStatus, setNeedFetchOrderStatus] = (0, _react.useState)(true);
+  const [status, setStatus] = (0, _react.useState)('unpaid');
+  const {
+    api
+  } = (0, _request.default)();
+  const fetchOrder = (0, _lodash.default)(async () => {
+    const {
+      data: order
+    } = await api.get("/orders/".concat(orderId, "?userDid=").concat(userDid));
+
+    if (order.status === 'completed') {
+      fetchOrder.cancel();
+      setNeedFetchOrderStatus(false);
+      setTimeout(() => onPaid({
+        nftId: order.nftId
+      }), 2000);
+    }
+
+    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", {
+    className: "status"
+  }, t("plan.paymentCredit.status.".concat(status))));
+}
+
+Paying.propTypes = {
+  orderId: _propTypes.default.string.isRequired,
+  onPaid: _propTypes.default.func.isRequired,
+  userDid: _propTypes.default.string.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;}"]);

package/lib/constant.js

@@ -0,0 +1,31 @@
+"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;

package/lib/contexts/locale.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLocaleContext = exports.LocaleProvider = exports.LocaleContext = exports.LocaleConsumer = void 0;
+
+var _context = require("@arcblock/ux/lib/Locale/context");
+
+const {
+  LocaleProvider,
+  LocaleConsumer,
+  LocaleContext,
+  useLocaleContext
+} = (0, _context.create)();
+exports.useLocaleContext = useLocaleContext;
+exports.LocaleContext = LocaleContext;
+exports.LocaleConsumer = LocaleConsumer;
+exports.LocaleProvider = LocaleProvider;