@blocklet/launcher-workflow 1.8.13 → 1.8.16

package/lib/components/payment-method.js

@@ -47,7 +47,7 @@ function PaymentMethod(_ref) {
     t
   } = (0, _locale.useLocaleContext)();
 
-  if (type === _constant.CURRENCY_TYPE.crypto) {
+  if (type === _constant.PAYMENT_METHODS.crypto) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({}, props), {}, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MonetizationOn.default, {
         className: "payment-icon"
@@ -65,5 +65,5 @@ function PaymentMethod(_ref) {
 const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  .payment-icon {\n    margin-right: 4px;\n  }\n"])));
 
 PaymentMethod.propTypes = {
-  type: _propTypes.default.oneOf([_constant.CURRENCY_TYPE.crypto, _constant.CURRENCY_TYPE.fiat]).isRequired
+  type: _propTypes.default.oneOf([_constant.PAYMENT_METHODS.crypto, _constant.PAYMENT_METHODS.stripe, _constant.PAYMENT_METHODS.fiat]).isRequired
 };

package/lib/locales/en.js

@@ -20,7 +20,8 @@ module.exports = {
     redirecting: 'Redirecting',
     cancel: 'Cancel',
     confirm: 'Confirm',
-    launching: 'Launching'
+    launching: 'Launching',
+    loadFailed: 'Failed to load the resource, please refresh the page and try again.'
   },
   plan: {
     title: 'Select Blocklet Server Plan',

package/lib/locales/zh.js

@@ -20,7 +20,8 @@ module.exports = {
     redirecting: '跳转中',
     cancel: '取消',
     confirm: '同意',
-    launching: '启动中'
+    launching: '启动中',
+    loadFailed: '加载资源失败, 请刷新页面重试。'
   },
   plan: {
     title: '选择节点类型',

package/lib/purchase.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = require("react");
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactRouterDom = require("react-router-dom");
 
 var _reactUse = require("react-use");
@@ -81,6 +83,91 @@ const formatTokenPrice = token => "".concat((0, _util.fromUnitToToken)(token.val
 
 const formatFiatPrice = price => "".concat(price.symbol || price.unit).concat(price.value);
 
+function PlanList(_ref) {
+  let {
+    paymentMethod,
+    onSelect,
+    onLoaded
+  } = _ref;
+  const {
+    api
+  } = (0, _request.default)();
+  const [plan, setPlan] = (0, _react.useState)(null);
+  const {
+    t
+  } = (0, _locale.useLocaleContext)();
+  const selectPlan = (0, _react.useCallback)(value => {
+    setPlan(value);
+    onSelect(value); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const plansState = (0, _reactUse.useAsync)(async () => {
+    const {
+      data
+    } = await api.get("/plans?paymentMethod=".concat(paymentMethod._id));
+    const plans = (data || []).map(item => {
+      item.prices = {
+        crypto: formatTokenPrice(item.prices.crypto),
+        fiat: formatFiatPrice(item.prices.fiat)
+      };
+      return item;
+    }).sort((itemX, itemY) => itemX.weight - itemY.weight);
+    onLoaded();
+    return {
+      plans
+    };
+  }, [paymentMethod]);
+  (0, _react.useEffect)(() => {
+    if (plansState.loading === false && plansState.value) {
+      const {
+        plans
+      } = plansState.value;
+
+      if (plans.length > 0) {
+        selectPlan(plans[0]);
+      }
+    }
+  }, [plansState, selectPlan]);
+
+  if (plansState.loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
+      relative: "parent",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
+    });
+  }
+
+  if (plansState.error) {
+    console.error('load plans error', plansState.error);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      children: t('plan.loadListFailed')
+    });
+  }
+
+  const {
+    plans
+  } = plansState.value;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    className: "select-plan small-select-plan-".concat(plans.length),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "selector-container container-padding",
+      children: plans.length ? plans.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
+        paymentMethod: paymentMethod.type,
+        onClick: () => selectPlan(item),
+        selected: plan && plan._id === item._id,
+        data: item
+      }, item._id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+        children: t('plan.noPlan')
+      })
+    })
+  });
+}
+
+PlanList.propTypes = {
+  paymentMethod: _propTypes.default.any.isRequired,
+  onSelect: _propTypes.default.func.isRequired,
+  onLoaded: _propTypes.default.func.isRequired
+};
+
 function PurchasePage() {
   const {
     api,
@@ -100,83 +187,59 @@ function PurchasePage() {
   const [paying, setPaying] = (0, _react.useState)(false);
   const [paymentInfo, setPaymentInfo] = (0, _react.useState)(null);
   const [buttonInFix, setButtonInFix] = (0, _react.useState)(false);
-  const [paymentMethod, setPaymentType] = (0, _react.useState)(_constant.CURRENCY_TYPE.crypto);
+  const [paymentMethod, setPaymentMethod] = (0, _react.useState)(null);
   const routerPrefix = (0, _router.usePrefix)();
+  const [planLoaded, setPlanLoaded] = (0, _react.useState)(false);
   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 && paymentMethod === _constant.CURRENCY_TYPE.fiat && !userDid) {
+    if (!session.loading && paymentMethod && paymentMethod === _constant.CURRENCY_TYPE.fiat && !userDid) {
       session.login();
     } // eslint-disable-next-line
 
   }, [paymentMethod, userDid]);
-  const paymentTypes = [{
-    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentMethod.default, {
-      type: _constant.CURRENCY_TYPE.crypto
-    }),
-    value: _constant.CURRENCY_TYPE.crypto
-  }, {
-    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentMethod.default, {
-      type: _constant.CURRENCY_TYPE.fiat
-    }),
-    value: _constant.CURRENCY_TYPE.fiat
-  }];
-  const plansState = (0, _reactUse.useAsync)(async () => {
+  const paymentMethodsState = (0, _reactUse.useAsync)(async () => {
     const {
       data
-    } = await api.get('/plans');
-    const plans = (data || []).map(item => {
-      item.prices = {
-        crypto: formatTokenPrice(item.prices.crypto),
-        fiat: formatFiatPrice(item.prices.fiat)
-      };
+    } = await api.get('/payment-methods');
+    const methods = (data || []).map(item => {
+      item.label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentMethod.default, {
+        type: item.type
+      });
+      item.value = item.type;
       return item;
-    }).sort((itemX, itemY) => itemX.weight - itemY.weight);
-    return {
-      plans
-    };
-  });
-  (0, _react.useEffect)(() => {
-    if (plansState.loading === false) {
-      setPaymentType(_constant.CURRENCY_TYPE.crypto);
-
-      if (plansState.value) {
-        const {
-          plans
-        } = plansState.value;
-
-        if (plans.length > 0) {
-          selectPlan(plans[0]);
-        }
+    }).sort(itemX => {
+      if (itemX.type === _constant.PAYMENT_METHODS.crypto) {
+        return -1;
       }
-    }
-  }, [plansState.loading, plansState.value]);
 
-  if (plansState.loading) {
+      return 1;
+    });
+    setPaymentMethod(methods[0]);
+    return methods;
+  });
+
+  if (paymentMethodsState.loading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
       relative: "parent",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
     });
   }
 
-  if (plansState.error) {
-    console.error('load plans error', plansState.error);
+  if (paymentMethodsState.error) {
+    console.error('load plans error', paymentMethodsState.error);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
       type: "error",
       children: t('plan.loadListFailed')
     });
   }
 
-  const {
-    plans
-  } = plansState.value;
-
-  const handlePaid = (_ref, decrypt) => {
+  const handlePaid = (_ref2, decrypt) => {
     let {
       nftId,
       launchToken
-    } = _ref;
+    } = _ref2;
 
     if (launchToken) {
       _jsCookie.default.set('launch-token', decrypt(launchToken));
@@ -190,10 +253,6 @@ function PurchasePage() {
     setPaying(false);
   };
 
-  const selectPlan = value => {
-    setPlan(value);
-  };
-
   const getPurchaseParams = () => {
     const obj = {
       productId: plan ? plan._id : null,
@@ -227,11 +286,11 @@ function PurchasePage() {
 
     setPaying(true);
 
-    if (payment === _constant.CURRENCY_TYPE.crypto) {
+    if (payment === _constant.PAYMENT_METHODS.crypto) {
       return;
     }
 
-    if (payment === _constant.CURRENCY_TYPE.fiat) {
+    if (payment === _constant.PAYMENT_METHODS.fiat) {
       try {
         const {
           data
@@ -260,6 +319,12 @@ function PurchasePage() {
     navigate(-1);
   };
 
+  const handleSelectPaymenMethod = value => {
+    setPlanLoaded(false);
+    const method = paymentMethodsState.value.find(item => item.type === value);
+    setPaymentMethod(method);
+  };
+
   return (
     /*#__PURE__*/
     // layout-fix-container for compatibility with lower versions of safari, do not remove this className
@@ -275,10 +340,10 @@ function PurchasePage() {
           className: "page-body-article",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_submit.default, {
             disabled: paying,
-            onConfirm: () => handlePay(paymentMethod),
+            onConfirm: () => handlePay(paymentMethod.type),
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_compactLayout.default, {
               onBottomFix: type => setButtonInFix(type === 'fix'),
-              bottom: plans.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              bottom: planLoaded ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: "button-container container-padding ".concat(buttonInFix ? 'has-shadow' : ''),
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
                   onClick: () => handleRedeem(),
@@ -289,7 +354,7 @@ function PurchasePage() {
                   },
                   children: t('common.redeem')
                 }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-                  onClick: () => handlePay(paymentMethod),
+                  onClick: () => handlePay(paymentMethod.type),
                   disabled: paying,
                   variant: "contained",
                   color: "primary",
@@ -302,32 +367,23 @@ function PurchasePage() {
                 title: t('plan.title'),
                 subTitle: t('plan.subTitle'),
                 onClickBack: disabledBack.includes('purchase') ? '' : clickBack
-              }), plans.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "select-payment",
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
-                  tabs: paymentTypes,
-                  current: paymentMethod,
-                  onChange: e => setPaymentType(e)
-                })
-              }) : '', /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "select-plan small-select-plan-".concat(plans.length),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "selector-container container-padding",
-                  children: plans.length ? plans.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
-                    paymentMethod: paymentMethod,
-                    onClick: () => selectPlan(item),
-                    selected: plan && plan._id === item._id,
-                    data: item
-                  }, item._id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
-                    children: t('plan.noPlan')
-                  })
+                  tabs: paymentMethodsState.value,
+                  current: paymentMethod.type,
+                  onChange: e => handleSelectPaymenMethod(e)
                 })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PlanList, {
+                paymentMethod: paymentMethod,
+                onSelect: v => setPlan(v),
+                onLoaded: () => setPlanLoaded(true)
               })]
             })
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
-        open: paying && paymentMethod === _constant.CURRENCY_TYPE.crypto,
+        open: paying && paymentMethod.type === _constant.PAYMENT_METHODS.crypto,
         popup: true,
         action: "purchase",
         checkFn: createRequest().get,
@@ -355,7 +411,7 @@ function PurchasePage() {
   );
 }
 
-const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n\n  .select-payment {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-top: 30px;\n  }\n\n  .select-plan {\n    margin: 48px auto 33px;\n\n    ", " {\n      margin: 30px auto;\n    }\n    &.small-select-plan-2 {\n      max-width: 780px;\n    }\n    &.small-select-plan-0,\n    &.small-select-plan-1 {\n      max-width: 460px;\n    }\n  }\n\n  .page-body {\n    position: relative;\n    flex: 1;\n    margin-top: 0;\n  }\n\n  .page-body-article {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n  }\n\n  .selector-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 24px;\n    margin-top: 18px;\n  }\n\n  .button-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-bottom: 15px;\n    padding-top: 15px;\n    > button {\n      width: 200px;\n    }\n    &.has-shadow {\n      box-shadow: 0px -1px 1px 0px rgba(168, 180, 197, 0.12);\n    }\n  }\n\n  .container-padding {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  .select-payment {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-top: 30px;\n  }\n  .select-plan {\n    margin: 48px auto 33px;\n    ", " {\n      margin: 30px auto;\n    }\n    &.small-select-plan-2 {\n      max-width: 780px;\n    }\n    &.small-select-plan-0,\n    &.small-select-plan-1 {\n      max-width: 460px;\n    }\n  }\n  .page-body {\n    position: relative;\n    flex: 1;\n    margin-top: 0;\n  }\n  .page-body-article {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n  }\n  .selector-container {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n    gap: 24px;\n    margin-top: 18px;\n  }\n  .button-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-bottom: 15px;\n    padding-top: 15px;\n    > button {\n      width: 200px;\n    }\n    &.has-shadow {\n      box-shadow: 0px -1px 1px 0px rgba(168, 180, 197, 0.12);\n    }\n  }\n  .container-padding {\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n"])), props => props.theme.breakpoints.down('md'));
 
 var _default = PurchasePage;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.8.13",
+  "version": "1.8.16",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -37,13 +37,13 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.4.11",
-    "@arcblock/icons": "^2.4.11",
-    "@arcblock/license": "^2.4.11",
-    "@arcblock/ux": "^2.4.11",
-    "@blocklet/launcher-layout": "1.8.13",
-    "@blocklet/launcher-util": "1.8.13",
-    "@blocklet/launcher-ux": "1.8.13",
+    "@arcblock/did-connect": "^2.4.13",
+    "@arcblock/icons": "^2.4.13",
+    "@arcblock/license": "^2.4.13",
+    "@arcblock/ux": "^2.4.13",
+    "@blocklet/launcher-layout": "1.8.16",
+    "@blocklet/launcher-util": "1.8.16",
+    "@blocklet/launcher-ux": "1.8.16",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/icons-material": "^5.8.4",
@@ -65,10 +65,10 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.13",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^2.0.1"
   },
-  "gitHead": "1c94f8c40e780b3a11d0c340f539f2a755a17c31"
+  "gitHead": "816f92ecb17b0b34c1990844df338197817d0e18"
 }