@blocklet/launcher-workflow 2.0.36 → 2.0.38

package/lib/locales/en.js

@@ -98,6 +98,7 @@ module.exports = {
     pageTitle: 'Purchase Space',
     selectSpaceHint: 'Already have dedicated space? Click here to select >',
     morePlanPrompt: 'Flip the page to see more plans',
+    redeem: 'I have purchased an NFT, Redeem',
     dialog: {
       title: 'Purchase Blocklet Space NFT',
       scan: 'Scan the QR code below with your DID wallet to complete purchase',

package/lib/locales/zh.js

@@ -98,6 +98,7 @@ module.exports = {
     pageTitle: '选购空间',
     selectSpaceHint: '已有专用空间？点击这里选择 >',
     morePlanPrompt: '翻页看更多方案',
+    redeem: '我已购买 NFT, 兑换',
     dialog: {
       title: '购买 Blocklet Server NFT',
       scan: '用您的 DID 钱包扫描下面的二维码完成购买',

package/lib/purchase.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
 var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
 var _compactLayout = _interopRequireDefault(require("@blocklet/launcher-layout/lib/compact-layout"));
+var _constant = require("@blocklet/launcher-util/lib/constant");
 var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
@@ -28,6 +30,7 @@ var _header = _interopRequireDefault(require("./components/layout/header"));
 var _plan = _interopRequireDefault(require("./components/plan"));
 var _locale = require("./contexts/locale");
 var _request = _interopRequireDefault(require("./contexts/request"));
+var _session = require("./contexts/session");
 var _workflow = require("./contexts/workflow");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
@@ -72,7 +75,8 @@ function PurchasePage(_ref) {
     disableBack
   } = _ref;
   const {
-    t
+    t,
+    locale
   } = (0, _locale.useLocaleContext)();
   const {
     create
@@ -80,6 +84,10 @@ function PurchasePage(_ref) {
   const {
     isMobile
   } = (0, _useMobile.default)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
+  const {
+    session
+  } = (0, _session.useSessionContext)();
   const [searchParams] = (0, _reactRouterDom.useSearchParams)();
   const [selectedPlanId, setSelectedPlanId] = (0, _react.useState)();
   const [openMorePlanPrompt, setOpenMorePlanPrompt] = (0, _react.useState)(false);
@@ -97,6 +105,7 @@ function PurchasePage(_ref) {
   const [planListRef, {
     width: planListWidth
   }] = (0, _useMeasure.default)();
+  const [showRedeem, setShowRedeem] = (0, _react.useState)(false);
   const api = create({
     baseURL: didPayPrefix
   });
@@ -192,6 +201,41 @@ function PurchasePage(_ref) {
       console.error('parse product feature failed:', error);
     }
   }
+  const handleRedeem = async () => {
+    if (session.user) {
+      setShowRedeem(true);
+      return;
+    }
+    const redeemConnectURL = (0, _urlJoin.default)(routerPrefix, '/did/redeem/token');
+    const {
+      data
+    } = await api.get(redeemConnectURL);
+    session.login({
+      onSuccess: results => {
+        const [, redeemResult] = results;
+        handleRedeemed(redeemResult);
+      },
+      oncancel: () => setShowRedeem(false),
+      extraParams: {
+        nw: data.url,
+        forceConnected: false,
+        saveConnect: false
+      }
+    });
+  };
+  const handleRedeemed = _ref2 => {
+    let {
+      nftId,
+      type
+    } = _ref2;
+    if (type === _constant.NFT_TYPE_SERVERLESS) {
+      searchParams.set('launchType', 'serverless');
+    }
+    navigate({
+      pathname: (0, _urlJoin.default)(routerPrefix, "/launch/".concat(nftId)),
+      search: searchParams.toString()
+    });
+  };
   searchParams.set('planId', selectedPlanId);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     embed: embed,
@@ -212,12 +256,18 @@ function PurchasePage(_ref) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_compactLayout.default, {
             bottom: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer.default, {
               className: "footer",
-              children: [embed && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "select-space",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+              children: [embed && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: "footer-left",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+                  onClick: () => handleRedeem(),
+                  className: "redeem-button",
+                  variant: "outlined",
+                  children: t('purchase.redeem')
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Link, {
+                  className: "select-space",
                   to: (0, _urlJoin.default)(routerPrefix, "/purchase/select".concat(window.location.search)),
                   children: t('purchase.selectSpaceHint')
-                })
+                })]
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
                 component: _reactRouterDom.Link,
                 disabled: planState.loading || !selectedPlanId,
@@ -314,10 +364,27 @@ function PurchasePage(_ref) {
           })
         })
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
+      open: showRedeem,
+      popup: true,
+      useSocket: false,
+      locale: locale,
+      action: "redeem",
+      checkFn: api.create().get,
+      onSuccess: handleRedeemed,
+      onClose: () => setShowRedeem(false),
+      checkTimeout: 60 * 5000,
+      showDownload: false,
+      messages: {
+        title: t('redeem.dialog.title'),
+        scan: t('redeem.dialog.scan'),
+        confirm: t('redeem.dialog.confirm'),
+        success: t('redeem.dialog.success')
+      }
     })]
   });
 }
-const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .container-inner {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .plan-list {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    @media (min-width: 900px) {\n      margin-top: 20px;\n    }\n\n    @media (min-width: 680px) and (max-width: 899px) {\n      justify-content: center;\n    }\n\n    .toc {\n      min-width: 180px;\n      margin-right: 20px;\n    }\n\n    button.splide__pagination__page.is-active {\n      background: #9397a1;\n    }\n  }\n\n  .splide__pagination-custom {\n    bottom: -24px;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: ", ";\n    align-item: center;\n    margin-top: auto;\n    padding-top: 16px;\n\n    > * {\n      margin: 0 8px;\n      ", " {\n        margin: 0 16px;\n      }\n    }\n\n    @media (max-width: ", "px) {\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .select-space {\n      a {\n        color: #000;\n      }\n\n      & > a:hover {\n        text-decoration: underline !important;\n      }\n    }\n\n    .button-next {\n      width: 200px;\n\n      @media (max-width: ", "px) {\n        width: 100%;\n        margin-top: 20px;\n      }\n    }\n  }\n"])), props => props.embed ? 'space-between' : 'flex-end', props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
+const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .container-inner {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .plan-list {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    @media (min-width: 900px) {\n      margin-top: 20px;\n    }\n\n    @media (min-width: 680px) and (max-width: 899px) {\n      justify-content: center;\n    }\n\n    .toc {\n      min-width: 180px;\n      margin-right: 20px;\n    }\n\n    button.splide__pagination__page.is-active {\n      background: #9397a1;\n    }\n  }\n\n  .splide__pagination-custom {\n    bottom: -24px;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: ", ";\n    align-item: center;\n    margin-top: auto;\n    padding-top: 16px;\n\n    > * {\n      margin: 0 8px;\n      ", " {\n        margin: 0 16px;\n      }\n    }\n\n    @media (max-width: ", "px) {\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .footer-left {\n      display: flex;\n      gap: 16px;\n      align-items: center;\n      justify-content: space-between;\n\n      .select-space {\n        order: 1;\n        color: #000;\n\n        &:hover {\n          text-decoration: underline !important;\n        }\n      }\n\n      .redeem-button {\n        order: 1;\n      }\n\n      @media (max-width: ", "px) {\n        width: 100%;\n        flex-direction: column;\n\n        .redeem-button {\n          width: 100%;\n          order: 2;\n        }\n      }\n    }\n\n    .button-next {\n      width: 200px;\n\n      @media (max-width: ", "px) {\n        width: 100%;\n        margin-top: 20px;\n      }\n    }\n  }\n"])), props => props.embed ? 'space-between' : 'flex-end', props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
 PurchasePage.propTypes = {
   disableBack: _propTypes.default.bool
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "2.0.36",
+  "version": "2.0.38",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -36,19 +36,19 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.5.36",
-    "@arcblock/icons": "^2.5.36",
-    "@arcblock/license": "^2.5.36",
-    "@arcblock/ux": "^2.5.36",
-    "@blocklet/launcher-layout": "2.0.36",
-    "@blocklet/launcher-util": "2.0.36",
-    "@blocklet/launcher-ux": "2.0.36",
+    "@arcblock/did-connect": "^2.5.37",
+    "@arcblock/icons": "^2.5.37",
+    "@arcblock/license": "^2.5.37",
+    "@arcblock/ux": "^2.5.37",
+    "@blocklet/launcher-layout": "2.0.38",
+    "@blocklet/launcher-util": "2.0.38",
+    "@blocklet/launcher-ux": "2.0.38",
     "@did-pay/react": "^1.9.53",
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
-    "@ocap/util": "^1.18.76",
+    "@ocap/util": "^1.18.77",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
     "@splidejs/splide-extension-grid": "^0.4.1",
@@ -61,7 +61,7 @@
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.8.1",
     "react-lottie-player": "^1.5.4",
-    "react-router-dom": "^6.11.0",
+    "react-router-dom": "^6.11.1",
     "react-use": "^17.4.0",
     "url-join": "^4.0.1"
   },
@@ -72,5 +72,5 @@
     "@babel/preset-react": "^7.18.6",
     "babel-plugin-inline-react-svg": "^2.0.2"
   },
-  "gitHead": "c0fad1d756b0c8b997ac43056d460b9a93b7bedb"
+  "gitHead": "7298526de007c142f12ebcccd8d213e3b4366d90"
 }