@blocklet/launcher-workflow 1.7.25 → 1.7.28

package/lib/components/{payment-type.js → payment-method.js}

@@ -11,6 +11,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Coins = require("@styled-icons/remix-fill/Coins");
+
+var _constant = require("@blocklet/launcher-util/lib/constant");
+
+var _CreditCard = _interopRequireDefault(require("@mui/icons-material/CreditCard"));
+
 var _locale = require("../contexts/locale");
 
 const _excluded = ["type"];
@@ -30,18 +36,27 @@ function PaymentType(_ref) {
   const {
     t
   } = (0, _locale.useLocaleContext)();
-  const contentMap = {
-    crypto: t('plan.useCrypto'),
-    fiat: t('plan.useFiat')
-  };
-  return /*#__PURE__*/_react.default.createElement(Container, props, contentMap[type]);
+
+  if (type === _constant.CURRENCY_TYPE.crypto) {
+    return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(CryptoIcon, {
+      className: "payment-icon"
+    }), t('plan.useCrypto'));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, /*#__PURE__*/_react.default.createElement(_CreditCard.default, {
+    className: "payment-icon"
+  }), t('plan.useFiat'));
 }
 
 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]);
-
+  displayName: "payment-method__Container",
+  componentId: "sc-tig09z-0"
+})(["display:flex;justify-content:center;align-items:center;.payment-icon{margin-right:4px;}"]);
+
+const CryptoIcon = (0, _styledComponents.default)(_Coins.Coins).withConfig({
+  displayName: "payment-method__CryptoIcon",
+  componentId: "sc-tig09z-1"
+})(["font-size:14px;height:22px;"]);
 PaymentType.propTypes = {
-  type: _propTypes.default.oneOf(['crypto', 'fiat']).isRequired
+  type: _propTypes.default.oneOf([_constant.CURRENCY_TYPE.crypto, _constant.CURRENCY_TYPE.fiat]).isRequired
 };

package/lib/components/plan.js

@@ -13,13 +13,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _lodash = _interopRequireDefault(require("lodash.get"));
 
+var _constant = require("@blocklet/launcher-util/lib/constant");
+
 var _material = require("@mui/material");
 
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
 
 var _locale = require("../contexts/locale");
 
-const _excluded = ["data", "selected", "paymentType"];
+const _excluded = ["data", "selected", "paymentMethod"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,7 +33,7 @@ function NodeType(_ref) {
   let {
     data,
     selected,
-    paymentType
+    paymentMethod
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -46,7 +48,7 @@ function NodeType(_ref) {
   }, (0, _lodash.default)(data, "name.".concat(locale))), /*#__PURE__*/_react.default.createElement("div", {
     className: "price",
     component: "span"
-  }, data.prices[paymentType]), /*#__PURE__*/_react.default.createElement("div", {
+  }, data.prices[paymentMethod]), /*#__PURE__*/_react.default.createElement("div", {
     className: "rights"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: "rights-list"
@@ -65,12 +67,12 @@ function NodeType(_ref) {
 
 NodeType.propTypes = {
   data: _propTypes.default.object.isRequired,
-  paymentType: _propTypes.default.string,
+  paymentMethod: _propTypes.default.string,
   selected: _propTypes.default.bool
 };
 NodeType.defaultProps = {
   selected: false,
-  paymentType: 'crypto'
+  paymentMethod: _constant.CURRENCY_TYPE.crypto
 };
 
 const Container = _styledComponents.default.div.withConfig({

package/lib/components/stripe/checkout.js

@@ -143,8 +143,7 @@ CheckoutForm.propTypes = {
 function Checkout(_ref3) {
   let {
     clientSecret,
-    orderId,
-    userDid,
+    paymentId,
     onComplete,
     onCancel,
     status
@@ -154,7 +153,7 @@ function Checkout(_ref3) {
     t
   } = (0, _locale.useLocaleContext)();
   const [showCloseButton, setShowCloseButton] = (0, _react.useState)(true);
-  const [waitingCompleted, setWaitingCompleted] = (0, _react.useState)(status === _constant.ORDER_STATUS.paid);
+  const [waitingCompleted, setWaitingCompleted] = (0, _react.useState)(status === _constant.PAYMENT_STATUS.paid);
   const stripePromise = (0, _stripeJs.loadStripe)(window.env.stripePublicKey);
   const options = {
     clientSecret,
@@ -183,8 +182,7 @@ function Checkout(_ref3) {
     onClose: handleClose,
     disableEscapeKeyDown: true
   }, waitingCompleted && /*#__PURE__*/_react.default.createElement(_paying.default, {
-    orderId: orderId,
-    userDid: userDid,
+    paymentId: paymentId,
     onComplete: onComplete,
     onPaid: handlePaid
   }), !waitingCompleted && /*#__PURE__*/_react.default.createElement(_reactStripeJs.Elements, {
@@ -198,9 +196,8 @@ function Checkout(_ref3) {
 
 Checkout.propTypes = {
   clientSecret: _propTypes.default.string.isRequired,
-  orderId: _propTypes.default.string.isRequired,
+  paymentId: _propTypes.default.string.isRequired,
   status: _propTypes.default.number.isRequired,
-  userDid: _propTypes.default.string.isRequired,
   onComplete: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func
 };

package/lib/components/stripe/paying.js

@@ -33,8 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function Paying(_ref) {
   let {
-    orderId,
-    userDid,
+    paymentId,
     onPaid,
     onComplete
   } = _ref;
@@ -42,31 +41,31 @@ function Paying(_ref) {
     t
   } = (0, _locale.useLocaleContext)();
   const [needFetchOrderStatus, setNeedFetchOrderStatus] = (0, _react.useState)(true);
-  const [status, setStatus] = (0, _react.useState)(_constant.ORDER_STATUS.unpaid);
+  const [status, setStatus] = (0, _react.useState)(_constant.PAYMENT_STATUS.unpaid);
   const {
     api
   } = (0, _request.default)();
   const fetchOrder = (0, _lodash.default)(async () => {
     const {
-      data: order
-    } = await api.get("/orders/".concat(orderId, "?userDid=").concat(userDid));
+      data: payment
+    } = await api.get("/payments/".concat(paymentId));
 
-    if (order.status === _constant.ORDER_STATUS.nftSent) {
+    if (payment.status === _constant.PAYMENT_STATUS.done) {
       fetchOrder.cancel();
       setNeedFetchOrderStatus(false);
       setTimeout(() => onComplete({
-        nftId: order.nftId
+        nftId: payment.nftId
       }), 2000);
     }
 
-    if (order.status >= _constant.ORDER_STATUS.paid) {
+    if (payment.status >= _constant.PAYMENT_STATUS.paid) {
       onPaid();
     }
 
-    setStatus(order.status);
+    setStatus(payment.status);
   }, 3000);
   (0, _useInterval.default)(fetchOrder, needFetchOrderStatus ? 3000 : null);
-  return /*#__PURE__*/_react.default.createElement(Content, null, status <= _constant.ORDER_STATUS.paid && /*#__PURE__*/_react.default.createElement(_Spinner.default, null), status === _constant.ORDER_STATUS.nftSent && /*#__PURE__*/_react.default.createElement(_Check.default, {
+  return /*#__PURE__*/_react.default.createElement(Content, null, status <= _constant.PAYMENT_STATUS.paid && /*#__PURE__*/_react.default.createElement(_Spinner.default, null), status === _constant.PAYMENT_STATUS.done && /*#__PURE__*/_react.default.createElement(_Check.default, {
     className: "status--succeed_icon"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "status"
@@ -74,8 +73,7 @@ function Paying(_ref) {
 }
 
 Paying.propTypes = {
-  orderId: _propTypes.default.string.isRequired,
-  userDid: _propTypes.default.string.isRequired,
+  paymentId: _propTypes.default.string.isRequired,
   onPaid: _propTypes.default.func.isRequired,
   onComplete: _propTypes.default.func.isRequired
 };

package/lib/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PaymentType = PaymentType;
 exports.Stripe = Stripe;
 exports.default = Launcher;
 
@@ -20,6 +21,8 @@ var _prepare = _interopRequireDefault(require("./prepare"));
 
 var _checkout = _interopRequireDefault(require("./components/stripe/checkout"));
 
+var _paymentMethod = _interopRequireDefault(require("./components/payment-method"));
+
 var _router = _interopRequireWildcard(require("./contexts/router"));
 
 var _locales = require("./locales");
@@ -28,7 +31,8 @@ var _request = require("./contexts/request");
 
 var _locale = require("./contexts/locale");
 
-const _excluded = ["locale", "baseURL"];
+const _excluded = ["locale", "baseURL"],
+      _excluded2 = ["locale"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -123,4 +127,23 @@ Launcher.defaultProps = {
   routerPrefix: '/',
   locale: 'en',
   baseURL: '/'
+};
+
+function PaymentType(_ref4) {
+  let {
+    locale
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(_locale.LocaleProvider, {
+    translations: _locales.translations,
+    locale: locale
+  }, /*#__PURE__*/_react.default.createElement(_paymentMethod.default, props));
+}
+
+PaymentType.propTypes = {
+  locale: _propTypes.default.string
+};
+PaymentType.defaultProps = {
+  locale: 'en'
 };

package/lib/locales/en.js

@@ -26,10 +26,10 @@ module.exports = {
     loadListFailed: 'Plan list load error',
     paymentCredit: {
       status: {
-        [_constant.ORDER_STATUS.unpaid]: 'Waiting for payment',
-        [_constant.ORDER_STATUS.paid]: 'Payment completed, waiting for order completion',
-        [_constant.ORDER_STATUS.nftSent]: 'Completed',
-        [_constant.ORDER_STATUS.expired]: 'Order has expired'
+        [_constant.PAYMENT_STATUS.unpaid]: 'Waiting for payment',
+        [_constant.PAYMENT_STATUS.paid]: 'Payment completed, waiting for order completion',
+        [_constant.PAYMENT_STATUS.done]: 'Completed!',
+        [_constant.PAYMENT_STATUS.expired]: 'Order has expired'
       }
     },
     useCrypto: 'Crypto',

package/lib/locales/zh.js

@@ -26,10 +26,10 @@ module.exports = {
     loadListFailed: '加载节点类型列表出错',
     paymentCredit: {
       status: {
-        [_constant.ORDER_STATUS.unpaid]: '支付中',
-        [_constant.ORDER_STATUS.paid]: '支付完成, 等待订单完成',
-        [_constant.ORDER_STATUS.nftSent]: '已完成',
-        [_constant.ORDER_STATUS.expired]: '订单已过期'
+        [_constant.PAYMENT_STATUS.unpaid]: '支付中',
+        [_constant.PAYMENT_STATUS.paid]: '支付完成, 等待订单完成',
+        [_constant.PAYMENT_STATUS.done]: '已完成!',
+        [_constant.PAYMENT_STATUS.expired]: '订单已过期'
       }
     },
     useCrypto: '数字货币支付',

package/lib/purchase.js

@@ -17,8 +17,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _jsCookie = _interopRequireDefault(require("js-cookie"));
 
-var _Coins = require("@styled-icons/remix-fill/Coins");
-
 var _util = require("@ocap/util");
 
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
@@ -31,22 +29,20 @@ var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect
 
 var _utils = require("@arcblock/did-connect/lib/utils");
 
-var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-
-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 _constant = require("@blocklet/launcher-util/lib/constant");
-
-var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
 
-var _CreditCard = _interopRequireDefault(require("@mui/icons-material/CreditCard"));
+var _compactLayout = _interopRequireDefault(require("@blocklet/launcher-layout/lib/compact-layout"));
 
 var _pageHeader = _interopRequireDefault(require("@blocklet/launcher-layout/lib/page-header"));
 
+var _constant = require("@blocklet/launcher-util/lib/constant");
+
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+
 var _plan = _interopRequireDefault(require("./components/plan"));
 
 var _checkout = _interopRequireDefault(require("./components/stripe/checkout"));
@@ -61,6 +57,8 @@ var _request = _interopRequireDefault(require("./contexts/request"));
 
 var _router = _interopRequireWildcard(require("./contexts/router"));
 
+var _paymentMethod = _interopRequireDefault(require("./components/payment-method"));
+
 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); }
@@ -95,27 +93,27 @@ function PurchasePage() {
   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 [paymentMethod, setPaymentType] = (0, _react.useState)(_constant.CURRENCY_TYPE.crypto);
   const routerPrefix = (0, _router.usePrefix)();
   const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
   const userDid = query.get('userDid') || (0, _lodash.default)(session, 'user.did');
   const isEmbed = !!query.get('blocklet_meta_url');
   (0, _react.useEffect)(() => {
-    if (!session.loading && paymentType === 'fiat' && !userDid) {
+    if (!session.loading && paymentMethod === _constant.CURRENCY_TYPE.fiat && !userDid) {
       session.login();
     } // eslint-disable-next-line
 
-  }, [paymentType, userDid]);
+  }, [paymentMethod, userDid]);
   const paymentTypes = [{
-    label: /*#__PURE__*/_react.default.createElement(PaymentLabel, null, /*#__PURE__*/_react.default.createElement(CryptoIcon, {
-      className: "payment-icon"
-    }), t('plan.useCrypto')),
-    value: 'crypto'
+    label: /*#__PURE__*/_react.default.createElement(_paymentMethod.default, {
+      type: _constant.CURRENCY_TYPE.crypto
+    }),
+    value: _constant.CURRENCY_TYPE.crypto
   }, {
-    label: /*#__PURE__*/_react.default.createElement(PaymentLabel, null, /*#__PURE__*/_react.default.createElement(_CreditCard.default, {
-      className: "payment-icon"
-    }), t('plan.useFiat')),
-    value: 'fiat'
+    label: /*#__PURE__*/_react.default.createElement(_paymentMethod.default, {
+      type: _constant.CURRENCY_TYPE.fiat
+    }),
+    value: _constant.CURRENCY_TYPE.fiat
   }];
   const plansState = (0, _reactUse.useAsync)(async () => {
     const {
@@ -134,7 +132,7 @@ function PurchasePage() {
   });
   (0, _react.useEffect)(() => {
     if (plansState.loading === false) {
-      setPaymentType('crypto');
+      setPaymentType(_constant.CURRENCY_TYPE.crypto);
 
       if (plansState.value) {
         const {
@@ -157,7 +155,7 @@ function PurchasePage() {
   if (plansState.error) {
     console.error('load plans error', plansState.error);
     return /*#__PURE__*/_react.default.createElement(_Alert.default, {
-      severity: "error"
+      type: "error"
     }, t('plan.loadListFailed'));
   }
 
@@ -189,7 +187,7 @@ function PurchasePage() {
 
   const getPurchaseParams = () => {
     const obj = {
-      planId: plan ? plan._id : null,
+      productId: plan ? plan._id : null,
       userDid
     };
     const params = {};
@@ -207,24 +205,24 @@ function PurchasePage() {
   };
 
   const handlePay = async payment => {
-    if (payment === 'fiat' && !userDid) {
+    if (payment === _constant.CURRENCY_TYPE.fiat && !userDid) {
       session.login();
       return;
     }
 
     const params = getPurchaseParams();
 
-    if (!params.planId) {
+    if (!params.productId) {
       return;
     }
 
     setPaying(true);
 
-    if (payment === 'crypto') {
+    if (payment === _constant.CURRENCY_TYPE.crypto) {
       return;
     }
 
-    if (payment === 'fiat') {
+    if (payment === _constant.CURRENCY_TYPE.fiat) {
       try {
         const {
           data
@@ -232,7 +230,7 @@ function PurchasePage() {
           userDid
         }));
         setPaymentInfo({
-          orderId: data.orderId,
+          paymentId: data.paymentId,
           clientSecret: data.clientSecret,
           status: data.status
         });
@@ -250,7 +248,7 @@ function PurchasePage() {
   };
 
   const PayButton = () => /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => handlePay(paymentType),
+    onClick: () => handlePay(paymentMethod),
     disabled: paying,
     variant: "contained",
     color: "primary"
@@ -269,7 +267,7 @@ function PurchasePage() {
 
   return (
     /*#__PURE__*/
-    // layout-fix-container for compatibility with lower versions of safari, do not remove this classNane
+    // layout-fix-container for compatibility with lower versions of safari, do not remove this className
     _react.default.createElement(Container, {
       className: "layout-fix-container"
     }, isEmbed && !isMobile && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
@@ -291,7 +289,7 @@ function PurchasePage() {
       className: "select-payment"
     }, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
       tabs: paymentTypes,
-      current: paymentType,
+      current: paymentMethod,
       onChange: e => setPaymentType(e)
     })) : '', /*#__PURE__*/_react.default.createElement("div", {
       className: "select-plan small-select-plan-".concat(plans.length)
@@ -299,12 +297,12 @@ function PurchasePage() {
       className: "selector-container container-padding"
     }, plans.length ? plans.map(item => /*#__PURE__*/_react.default.createElement(_plan.default, {
       key: item._id,
-      paymentType: paymentType,
+      paymentMethod: paymentMethod,
       onClick: () => selectPlan(item),
       selected: plan && plan._id === item._id,
       data: item
     })) : /*#__PURE__*/_react.default.createElement(_Empty.default, null, t('plan.noPlan'))))))), /*#__PURE__*/_react.default.createElement(_Connect.default, {
-      open: paying && paymentType === 'crypto',
+      open: paying && paymentMethod === _constant.CURRENCY_TYPE.crypto,
       popup: true,
       action: "purchase",
       checkFn: createRequest().get,
@@ -323,7 +321,7 @@ function PurchasePage() {
       }
     }), paymentInfo && /*#__PURE__*/_react.default.createElement(_checkout.default, {
       clientSecret: paymentInfo.clientSecret,
-      orderId: paymentInfo.orderId,
+      paymentId: paymentInfo.paymentId,
       userDid: userDid,
       onComplete: handlePaid,
       onCancel: handleCancelPay,
@@ -337,16 +335,6 @@ const Container = _styledComponents.default.div.withConfig({
   componentId: "sc-1knmtel-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;.select-payment{display:flex;justify-content:center;align-items:center;padding-top:30px;}.select-plan{margin:48px auto 33px;", "{margin:30px auto;}&.small-select-plan-2{max-width:780px;}&.small-select-plan-0,&.small-select-plan-1{max-width:460px;}}.page-body{position:relative;flex:1;margin-top:0;}.page-body-article{position:absolute;left:0;top:0;width:100%;height:100%;overflow-y:auto;}.selector-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:18px;}.button-container{display:flex;justify-content:center;align-items:center;padding-bottom:15px;padding-top:15px;> button{width:200px;}&.has-shadow{box-shadow:0px -1px 1px 0px rgba(168,180,197,0.12);}}.container-padding{padding-left:24px;padding-right:24px;}"], props => props.theme.breakpoints.down('md'));
 
-const PaymentLabel = _styledComponents.default.div.withConfig({
-  displayName: "purchase__PaymentLabel",
-  componentId: "sc-1knmtel-1"
-})(["display:flex;justify-content:center;align-items:center;.payment-icon{margin-right:4px;}"]);
-
-const CryptoIcon = (0, _styledComponents.default)(_Coins.Coins).withConfig({
-  displayName: "purchase__CryptoIcon",
-  componentId: "sc-1knmtel-2"
-})(["font-size:14px;height:22px;"]);
-
 var _default = (0, _reactRouterDom.withRouter)(PurchasePage);
 
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.7.25",
+  "version": "1.7.28",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -41,8 +41,8 @@
     "@arcblock/icons": "^2.1.36",
     "@arcblock/license": "^2.1.36",
     "@arcblock/ux": "^2.1.36",
-    "@blocklet/launcher-layout": "1.7.25",
-    "@blocklet/launcher-util": "1.7.25",
+    "@blocklet/launcher-layout": "1.7.28",
+    "@blocklet/launcher-util": "1.7.28",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -73,5 +73,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "fc1f667a234c0de218f63656e251f11ded0f335a"
+  "gitHead": "fdea3d3fd6e2290bd8dac9a5e5b42e7fee564f16"
 }