@blocklet/launcher-workflow 2.2.53 → 2.2.55

package/es/checkout.js

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import Dialog from '@arcblock/ux/lib/Dialog';
-import { BLOCKLET_SERVER_OWNERSHIP_NFT, NFT_TYPE_SERVERLESS } from '@blocklet/launcher-util/es/constant';
+import { NFT_TYPE_DEDICATE, NFT_TYPE_SERVERLESS } from '@blocklet/launcher-util/es/constant';
 import { getBlockletDisplayName } from '@blocklet/launcher-util/es/util';
 import Button from '@blocklet/launcher-ux/lib/button';
 import useMobile from '@blocklet/launcher-ux/lib/use-mobile';
@@ -65,9 +65,7 @@ import useRequest from './contexts/request';
 import { useSessionContext } from './contexts/session';
 import { useWorkflowContext } from './contexts/workflow';
 import { BLOCKLET_STORE_URL, getPrice, launchSession } from './util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function CheckoutPage({
   blocklet
 }) {
@@ -241,7 +239,7 @@ function CheckoutPage({
       }
       params.set('launchType', 'serverless');
     }
-    if (isPurchaseOnly && !(nftState.tags || []).includes(BLOCKLET_SERVER_OWNERSHIP_NFT)) {
+    if (isPurchaseOnly && !(nftState.tags || []).includes(NFT_TYPE_DEDICATE)) {
       handleCancelPay();
       dsbridge.call('arcClosePage');
       return;

package/es/components/checkbox.js

@@ -41,8 +41,7 @@ UncheckedIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 import { useLocaleContext } from '../contexts/locale';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function CheckBox({
   label,
   checked,

package/es/components/confirm.js

@@ -10,8 +10,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { LocaleContext } from '../contexts/locale';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const translations = {
   en: {
     confirm: 'Confirm',

package/es/components/in-progress-session.js

@@ -11,8 +11,7 @@ import useRequest from '../contexts/request';
 import { useWorkflowContext } from '../contexts/workflow';
 
 // 不考虑 localstorage 的过期时间
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IGNORE_LAUNCH_SESSION_KEY = 'launcher-ignore-launch-session';
 export default function InProgressSession() {
   const {

package/es/components/launch-dedicated.js

@@ -1,24 +1,24 @@
-import { useContext, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import get from 'lodash.get';
-import useInterval from 'react-use/lib/useInterval';
-import throttle from 'lodash.throttle';
-import styled from '@emotion/styled';
-import Button from '@arcblock/ux/lib/Button';
-import Spinner from '@mui/material/CircularProgress';
 import AnimationWaiter from '@arcblock/ux/lib/AnimationWaiter';
-import { INSTANCE_STATUS } from '@blocklet/launcher-util/es/constant';
+import Button from '@arcblock/ux/lib/Button';
 import Toast from '@arcblock/ux/lib/Toast';
-import PageHeader from '@blocklet/launcher-layout/lib/page-header';
+import { INSTANCE_STATUS } from '@blocklet/launcher-util/es/constant';
+import styled from '@emotion/styled';
+import Spinner from '@mui/material/CircularProgress';
+import { useSetState } from 'ahooks';
+import get from 'lodash.get';
+import throttle from 'lodash.throttle';
+import PropTypes from 'prop-types';
+import { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useInterval from 'react-use/lib/useInterval';
 import LaunchResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
+import PageHeader from '@blocklet/launcher-layout/lib/page-header';
 import ProgressMessage from '@blocklet/launcher-ux/lib/progress-message';
-import { getAPIResponseError, getLaunchBlockletUrl, loadURL } from '../util';
-import useQuery from '../hooks/query';
-import useRequest from '../contexts/request';
 import { LocaleContext } from '../contexts/locale';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import useRequest from '../contexts/request';
+import useQuery from '../hooks/query';
+import { getAPIResponseError, getLaunchBlockletUrl, loadURL } from '../util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STATUS = {
   waiting: 0,
   // 未使用
@@ -30,6 +30,7 @@ const STATUS = {
   launchFailedError: 12
 };
 export default function LaunchDedicated({
+  sessionId,
   type
 }) {
   const query = useQuery();
@@ -38,23 +39,21 @@ export default function LaunchDedicated({
     t,
     locale
   } = useContext(LocaleContext);
-  const [launchState, setLaunchState] = useState({
+  const [launchState, setLaunchState] = useSetState({
+    instanceId: '',
     appUrl: '',
     status: STATUS.waiting
   });
-  const {
-    nftId
-  } = useParams();
   const {
     api
   } = useRequest();
   const [progressStepIndex, setProgressStepIndex] = useState(0);
   const [isDone, setIsDone] = useState(false);
   const navigate = useNavigate();
-  let createServerTime = sessionStorage.getItem(`launcher-create-server-${nftId}-time`);
+  let createServerTime = sessionStorage.getItem(`launcher-create-server-${sessionId}-time`);
   if (!createServerTime) {
     createServerTime = Date.now();
-    sessionStorage.setItem(`launcher-create-server-${nftId}-time`, createServerTime);
+    sessionStorage.setItem(`launcher-create-server-${sessionId}-time`, createServerTime);
   }
   const handleInstance = instance => {
     if (instance.status >= INSTANCE_STATUS.running) {
@@ -67,11 +66,10 @@ export default function LaunchDedicated({
       });
       setIsDone(true);
       setTimeout(() => {
-        setLaunchState(pre => ({
-          ...pre,
+        setLaunchState({
           status: STATUS.success,
           appUrl: url
-        }));
+        });
         loadURL(url).finally(() => {
           setTimeout(() => {
             window.location.href = url;
@@ -82,22 +80,23 @@ export default function LaunchDedicated({
   };
   const launch = async () => {
     try {
-      setLaunchState(pre => ({
-        ...pre,
+      setLaunchState({
         status: STATUS.launching
-      }));
+      });
       const {
         data: {
           instance
         }
       } = await api.post('/instances/launch', {
-        nftId
+        launchId: sessionId
       }, {
         params: {
-          launchType: query.get('launchType'),
-          sessionId: query.get('sessionId')
+          launchType: query.get('launchType')
         }
       });
+      setLaunchState({
+        instanceId: instance._id
+      });
       handleInstance(instance);
     } catch (err) {
       const errDesc = getAPIResponseError(err);
@@ -115,27 +114,25 @@ export default function LaunchDedicated({
         data: {
           instance
         }
-      } = await api.get(`/public/instances/${nftId}/status`);
+      } = await api.get(`/instances/${launchState.instanceId}`);
       handleInstance(instance);
     } catch (error) {
-      sessionStorage.removeItem(`launcher-create-server-${nftId}-time`);
+      sessionStorage.removeItem(`launcher-create-server-${sessionId}-time`);
       if (get(error, 'response.status') === 404 && launchState.status !== STATUS.launching) {
-        setLaunchState(state => ({
-          ...state,
+        setLaunchState({
           status: STATUS.notFoundError
-        }));
+        });
         throw error;
       }
-      setLaunchState(state => ({
-        ...state,
+      setLaunchState({
         status: STATUS.error
-      }));
+      });
       console.warn('load instance status error', error);
       throw error;
     }
   };
   const poll = throttle(getInstanceStatus, 5000);
-  useInterval(poll, launchState.status === STATUS.launching && nftId ? 5000 : null);
+  useInterval(poll, launchState.status === STATUS.launching && launchState.instanceId ? 5000 : null);
   const successful = launchState.status === STATUS.success;
   const progressSteps = [t('launch.waiting.starting'), t('launch.waiting.securing'), t('launch.waiting.prepare'), t('launch.waiting.waiting'), t('launch.waiting.done')];
   const messageDuration = 40000;
@@ -281,6 +278,7 @@ const Content = styled.div`
   }
 `;
 LaunchDedicated.propTypes = {
+  sessionId: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['launch', 'start'])
 };
 LaunchDedicated.defaultProps = {

package/es/components/launch-serverless.js

@@ -10,10 +10,9 @@ import Button from '@blocklet/launcher-ux/lib/button';
 import { useLocaleContext } from '../contexts/locale';
 import useRequest from '../contexts/request';
 import { getLaunchBlockletUrl } from '../util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function LaunchServerless({
-  nftId
+  sessionId
 }) {
   const {
     t,
@@ -23,20 +22,21 @@ export default function LaunchServerless({
     api
   } = useRequest();
   const [searchParams] = useSearchParams();
-  const sessionId = searchParams.get('sessionId');
   const state = useAsync(async () => {
     const {
       data: {
         instance
       }
-    } = await api.post(`/serverless/${nftId}/allocate?sessionId=${sessionId}`);
+    } = await api.post('/serverless/allocate', {
+      launchId: sessionId
+    });
     setTimeout(() => {
       window.location = getLaunchBlockletUrl({
         serverUrl: instance.adminURL,
         blockletMetaUrl: searchParams.get('blocklet_meta_url'),
         locale,
         launchType: 'serverless',
-        nftId,
+        nftId: instance.nftId,
         sessionId,
         chainHost: window.blocklet?.CHAIN_HOST,
         from: searchParams.get('from')
@@ -109,5 +109,5 @@ const Container = styled.div`
   }
 `;
 LaunchServerless.propTypes = {
-  nftId: PropTypes.string.isRequired
+  sessionId: PropTypes.string.isRequired
 };

package/es/components/plan.js

@@ -98,9 +98,7 @@ UnCheckReverseIcon.defaultProps = {
 };
 import { getPrice } from '../util';
 import { useLocaleContext } from '../contexts/locale';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function Feature({
   feature,
   locale,

package/es/launch.js

@@ -6,7 +6,7 @@ import { useSessionContext } from './contexts/session';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function Launch() {
   const {
-    nftId
+    sessionId
   } = useParams();
   const [searchParams] = useSearchParams();
   const {
@@ -27,10 +27,10 @@ export default function Launch() {
   const launchType = searchParams.get('launchType');
   if (launchType === 'serverless') {
     return /*#__PURE__*/_jsx(LaunchServerless, {
-      nftId: nftId
+      sessionId: sessionId
     });
   }
   return /*#__PURE__*/_jsx(LaunchDedicated, {
-    nftId: nftId
+    sessionId: sessionId
   });
 }

package/es/locales/en.js

@@ -25,7 +25,11 @@ export default {
     pay: 'Pay',
     payWith: 'Pay with {currency}',
     popular: 'Popular',
-    space: 'Space'
+    serviceError: 'Service Failed',
+    space: 'Space',
+    subscription: 'Subscription',
+    price: 'Pricing',
+    unitPrice: 'Unit'
   },
   license: {
     title: 'End User License Agreement',
@@ -105,6 +109,8 @@ export default {
     redeem: 'Select purchased space',
     noProducts: 'No products available for purchase, please check your payment-kit config',
     serverlessNotSupported: 'This app is not allowed in sigular and on-demand space, please select dedicated space',
+    componentCount: '{count} Component Included',
+    componentsCount: '{count} Components Included',
     dialog: {
       title: 'Purchase Blocklet Space NFT',
       scan: 'Scan the QR code below with your DID wallet to complete purchase',
@@ -121,6 +127,13 @@ export default {
       continue: 'Continue',
       content: 'You have an incomplete order {blockletName}, Continue this order?',
       notRemind: 'No more reminders'
+    },
+    productType: {
+      'on-demand': 'On Demand Space',
+      dedicated: 'Dedicated Space'
+    },
+    paid: {
+      redirecting: 'Payment success, redirecting...'
     }
   },
   checkout: {
@@ -130,6 +143,8 @@ export default {
     paymentMethod: {
       title: 'Select payment currency'
     },
-    agreement: '{name} User Agreement'
+    agreement: '{name} User Agreement',
+    estimatedCost: 'Estimated Cost',
+    estimatedCostHint: 'The total cost will vary depending on the actual number and duration of components used in the application. The calculation method is: Unit price of component * Number of components * Duration.'
   }
 };

package/es/locales/index.js

@@ -1,8 +1,10 @@
 /* eslint-disable import/prefer-default-export */
+import { translations as extraTranslations } from '@blocklet/payment-react';
 import flat from 'flat';
+import merge from 'lodash.merge';
 import en from './en';
 import zh from './zh';
-export const translations = {
+export const translations = merge({
   en: flat(en),
   zh: flat(zh)
-};
+}, extraTranslations);

package/es/locales/zh.js

@@ -24,8 +24,12 @@ export default {
     pay: '支付',
     previous: '上一步',
     popular: '推荐',
+    price: '价格',
+    serviceError: '服务出错',
     space: '空间',
-    payWith: '用{currency}支付'
+    subscription: '订阅',
+    payWith: '用{currency}支付',
+    unitPrice: '单价'
   },
   license: {
     title: '空间用户协议',
@@ -63,7 +67,7 @@ export default {
       success: '正在启动'
     },
     error: {
-      launchFailed: '空间空间失败',
+      launchFailed: '启动空间失败',
       launchFailedDescription: '您可以点击下面按钮重试',
       notFound: '没有正在启动的空间',
       notFoundDescription: '您可以点击下面按钮启动空间'
@@ -104,6 +108,8 @@ export default {
     hasPlan: '选用{name}',
     noProducts: '没有可购买的商品，请检查 PaymentKit 的配置',
     serverlessNotSupported: '该应用被禁止能在单应用或者按需空间中运行，请选择专用空间',
+    componentCount: '共 {count} 个组件',
+    componentsCount: '共 {count} 个组件',
     dialog: {
       title: '购买 Blocklet Server NFT',
       scan: '用您的 DID 钱包扫描下面的二维码完成购买',
@@ -120,6 +126,13 @@ export default {
       continue: '继续',
       content: '您有一个未完成的订单: {blockletName}，继续该订单？',
       notRemind: '不再提醒'
+    },
+    productType: {
+      'on-demand': '按需空间',
+      dedicated: '专用空间'
+    },
+    paid: {
+      redirecting: '支付成功，正在跳转...'
     }
   },
   checkout: {
@@ -129,6 +142,8 @@ export default {
     paymentMethod: {
       title: '选择支付货币'
     },
-    agreement: '{name} 用户协议'
+    agreement: '{name} 用户协议',
+    estimatedCost: '估算成本',
+    estimatedCostHint: '总成本会根据应用实际使用的组件数量和时长而变化，计算方式为: 组件单价*组件数量*时长'
   }
 };

package/es/paid.js

@@ -0,0 +1,51 @@
+import Center from '@arcblock/ux/lib/Center';
+import { LAUNCH_STATUS } from '@blocklet/launcher-util/lib/constant';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useRequest } from 'ahooks';
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import joinURL from 'url-join';
+import { useLocaleContext } from './contexts/locale';
+import useRequestContext from './contexts/request';
+import { useWorkflowContext } from './contexts/workflow';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PurchaseSuccess() {
+  const [params, setParams] = useSearchParams();
+  const navigate = useNavigate();
+  const {
+    routerPrefix
+  } = useWorkflowContext();
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    api
+  } = useRequestContext();
+  const sessionId = params.get('sessionId');
+  const {
+    loading,
+    data,
+    cancel
+  } = useRequest(() => api.get(`/launches/${sessionId}`).then(res => res.data?.launch), {
+    pollingInterval: 2000
+  });
+  useEffect(() => {
+    if (data?.status >= LAUNCH_STATUS.nftMinted) {
+      cancel();
+    }
+  }, [data, cancel]);
+  useEffect(() => {
+    if (data?.status >= LAUNCH_STATUS.nftMinted) {
+      params.set('launchType', data.type);
+      navigate({
+        pathname: joinURL(routerPrefix, `/launch/${data._id}`),
+        search: params.toString()
+      });
+    }
+  }, [data, params, navigate, sessionId, routerPrefix, setParams]);
+  const completed = !loading && data?.status >= LAUNCH_STATUS.nftMinted;
+  return /*#__PURE__*/_jsxs(Center, {
+    relative: "parent",
+    children: [!completed && /*#__PURE__*/_jsx(CircularProgress, {}), completed && t('purchase.paid.redirecting')]
+  });
+}