@blocklet/launcher-workflow 2.3.80 → 2.3.82

package/es/purchase.js

@@ -1,675 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import Button from '@arcblock/ux/lib/Button';
-import Center from '@arcblock/ux/lib/Center';
-import useConnect from '@arcblock/did-connect/lib/Connect/use-connect';
-import CompactLayout from '@blocklet/launcher-layout/lib/compact-layout';
-import { NFT_TYPE_SERVERLESS } from '@blocklet/launcher-util/es/constant';
-import useMobile from '@blocklet/launcher-ux/lib/use-mobile';
-import styled from '@emotion/styled';
-import CircularProgress from '@mui/material/CircularProgress';
-import Tooltip from '@mui/material/Tooltip';
-import { Splide, SplideSlide, SplideTrack } from '@splidejs/react-splide';
-import { Grid } from '@splidejs/splide-extension-grid';
-import get from 'lodash.get';
-import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
-import useMeasure from 'react-use/lib/useMeasure';
-import useSetState from 'react-use/lib/useSetState';
-import joinURL from 'url-join';
-import { API_DID_PREFIX } from '@arcblock/did-connect/lib/constant';
-import ResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
-import formatError from '@blocklet/launcher-util/es/format-error';
-import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
-import '@splidejs/splide/dist/css/splide.min.css';
-var NextIcon = function NextIcon(props) {
-  return /*#__PURE__*/_jsx("svg", {
-    ...props,
-    children: /*#__PURE__*/_jsx("path", {
-      d: "m15.5.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4L15.5.912z"
-    })
-  });
-};
-NextIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "40",
-  height: "40"
-};
-var PrevIcon = function PrevIcon(props) {
-  return /*#__PURE__*/_jsx("svg", {
-    ...props,
-    children: /*#__PURE__*/_jsx("path", {
-      d: "m15.5.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4L15.5.912z"
-    })
-  });
-};
-PrevIcon.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "40",
-  height: "40"
-};
-import InProgressSession from './components/in-progress-session';
-import Layout from './components/layout';
-import Body from './components/layout/body';
-import Footer from './components/layout/footer';
-import Header from './components/layout/header';
-import Plan from './components/plan';
-import { useLocaleContext } from './contexts/locale';
-import useRequest from './contexts/request';
-import { useSessionContext } from './contexts/session';
-import { useWorkflowContext } from './contexts/workflow';
-import { launchSession } from './util';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const SLIDE_WIDTH = 300;
-const SLIDE_MIN_WIDTH = 280;
-const getSlideConfig = (maxLength, planLength) => {
-  const factor = Math.min(maxLength, planLength);
-  const width = factor < 3 ? SLIDE_MIN_WIDTH : SLIDE_WIDTH;
-  return {
-    perPage: factor,
-    width: `${factor * width}px`,
-    gap: '24px'
-  };
-};
-function PurchasePage({
-  disableBack
-}) {
-  const {
-    t,
-    locale
-  } = useLocaleContext();
-  const {
-    create,
-    api: launchSessionAPI,
-    baseURL
-  } = useRequest();
-  const {
-    isMobile
-  } = useMobile();
-  const navigate = useNavigate();
-  const {
-    session,
-    storage,
-    events
-  } = useSessionContext();
-  const {
-    connectApi,
-    connectHolder
-  } = useConnect();
-  const [params, setParams] = useSearchParams();
-  const {
-    routerPrefix,
-    embed,
-    didPayPrefix,
-    isPurchaseOnly
-  } = useWorkflowContext();
-  const [planListRef, {
-    width
-  }] = useMeasure();
-  const [state, setState] = useSetState({
-    loading: true,
-    error: '',
-    plans: [],
-    paymentMethods: [],
-    paymentMethod: params.get('paymentMethod'),
-    sessionId: params.get('sessionId'),
-    planId: params.get('planId'),
-    showMorePrompt: false,
-    arrows: false,
-    perPage: 100,
-    width: `${SLIDE_WIDTH}px`,
-    gap: '16px'
-  });
-  const api = create({
-    baseURL: didPayPrefix
-  });
-  const browser = useBrowser();
-  const selectPlan = launch => {
-    if (!state.plans.length) {
-      return;
-    }
-    if (launch && launch.planId && state.plans.find(x => x._id === launch.planId)) {
-      setState({
-        planId: launch.planId
-      });
-    }
-    const recommended = state.plans.find(x => !!x.isRecommended);
-    if (recommended) {
-      setState({
-        planId: recommended._id
-      });
-    } else {
-      setState({
-        planId: state.plans[0]._id
-      });
-    }
-  };
-
-  // 用户退出的时候自动重新创建启动会话
-  useEffect(() => {
-    if (isPurchaseOnly) {
-      return;
-    }
-    events.on('logout', () => {
-      const metaUrl = params.get('blocklet_meta_url');
-      launchSession.create(launchSessionAPI, routerPrefix, metaUrl, (err, launch) => {
-        setState({
-          sessionId: launch._id
-        });
-        selectPlan(launch);
-      });
-    });
-  }, []);
-
-  // 创建启动会话或者加载现有的会话
-  useEffect(() => {
-    Promise.all([api.get('/plans'), api.get('/payment-methods')]).then(([{
-      data
-    }, {
-      data: {
-        data: paymentMethods
-      }
-    }]) => {
-      if (data.length === 0 || paymentMethods.length === 0) {
-        setState({
-          loading: false,
-          error: t('purchase.noProducts')
-        });
-        return;
-      }
-      let plans = (data || []).sort((a, b) => b.weight - a.weight);
-      const {
-        components = []
-      } = get(window, 'blockletMeta', {}) || {};
-      const supported = components.every(x => get(x, 'meta.capabilities.serverless', true));
-      plans.forEach(x => {
-        if (get(x, 'extra.type') === 'serverless' && !supported) {
-          x.available = false;
-          x.reason = t('purchase.serverlessNotSupported');
-        } else {
-          x.available = true;
-        }
-      });
-      plans = plans.sort((a, b) => {
-        if (b.available && !a.available) {
-          return 1;
-        }
-        if (!b.available && a.available) {
-          return -1;
-        }
-        return 0;
-      });
-      setState({
-        plans,
-        paymentMethods,
-        paymentMethod: paymentMethods[0]._id,
-        loading: false
-      });
-      if (isPurchaseOnly) {
-        selectPlan();
-        return;
-      }
-      const metaUrl = params.get('blocklet_meta_url');
-      if (params.get('sessionId')) {
-        launchSession.load(launchSessionAPI, routerPrefix, params.get('sessionId'), metaUrl, (err, launch) => {
-          selectPlan(launch);
-        });
-      } else if (metaUrl) {
-        launchSession.create(launchSessionAPI, routerPrefix, metaUrl, (err, launch) => {
-          setState({
-            sessionId: launch._id
-          });
-          selectPlan(launch);
-        });
-      }
-    }).catch(err => {
-      setState({
-        error: formatError(err)
-      });
-    });
-  }, []);
-  useEffect(() => {
-    if (!state.sessionId) {
-      return;
-    }
-    if (state.sessionId !== params.get('sessionId')) {
-      params.set('sessionId', state.sessionId);
-      setParams(params, {
-        replace: true
-      });
-    }
-  }, [state.sessionId]);
-  useEffect(() => {
-    if (!state.plans?.length || typeof state.perPage === 'undefined') {
-      return;
-    }
-    const index = state.plans.findIndex(x => !!x.isRecommended && x.available);
-    const pageIndex = Math.floor(index / state.perPage);
-
-    // 如果推荐 Plan 不在第一页，则将推荐 Plan 放在第一个
-    if (pageIndex >= 1) {
-      const recommend = state.plans[index];
-      const copy = [...state.plans];
-      copy.splice(index, 1);
-      copy.unshift(recommend);
-      setState({
-        plans: copy
-      });
-    }
-  }, [state.perPage, state.plans]);
-  useEffect(() => {
-    if (!state.plans?.length) {
-      return;
-    }
-    if (Number.isNaN(width)) {
-      return;
-    }
-
-    // 最小得有1个
-    const tmp = Math.max(Math.floor(width / SLIDE_WIDTH) - 1, 1);
-    setState(getSlideConfig(tmp, state.plans.length));
-  }, [width, state.plans, isMobile]);
-  const handleSelect = planId => {
-    if (state.planId === planId) {
-      return;
-    }
-    if (state.plans.find(x => x._id === planId)?.available === false) {
-      return;
-    }
-    setState({
-      planId
-    });
-  };
-  useEffect(() => {
-    if (!state.planId) {
-      return;
-    }
-    if (state.planId !== params.get('planId')) {
-      params.set('planId', state.planId);
-      setParams(params, {
-        replace: true
-      });
-    }
-  }, [state.planId]);
-  useEffect(() => {
-    if (!state.paymentMethod) {
-      return;
-    }
-    if (state.paymentMethod !== params.get('paymentMethod')) {
-      params.set('paymentMethod', state.paymentMethod);
-      setParams(params, {
-        replace: true
-      });
-    }
-  }, [state.paymentMethod]);
-  useEffect(() => {
-    if (isPurchaseOnly) {
-      return;
-    }
-    if (!state.planId || !state.sessionId) {
-      return;
-    }
-    const plan = state.plans.find(x => x._id === state.planId);
-    const type = get(plan, 'extra.type') || 'serverless';
-    launchSession.select(launchSessionAPI, routerPrefix, state.sessionId, type, state.planId);
-  }, [state.planId, state.sessionId]);
-  const productFeatures = [];
-  if (!state.loading && state.plans?.length > 0) {
-    // TODO: Pricing Table: 临时做法
-    try {
-      const {
-        features
-      } = state.plans[0];
-      if (features && features.length > 0) {
-        const tmp = JSON.parse(features[0].en);
-        tmp.forEach(item => {
-          productFeatures.push({
-            _id: item.featureId,
-            name: item.name,
-            type: item.type
-          });
-        });
-      }
-    } catch (error) {
-      console.error('parse product feature failed:', error);
-    }
-  }
-  const ensureLogin = () => {
-    return new Promise(resolve => {
-      if (!session.user) {
-        session.login(() => {
-          resolve();
-        });
-      } else {
-        resolve();
-      }
-    });
-  };
-  const handleRedeem = () => {
-    if (browser.wallet) {
-      // HACK: 钱包客户端中因为打开浏览器 Tab 的限制，所以在钱包客户端浏览器中使用 “登录 -> 兑换（购买）" 两步的流程
-      ensureLogin().then(() => {
-        connectApi.open({
-          useSocket: false,
-          locale,
-          action: 'redeem',
-          prefix: `${window.location.origin}${joinURL(baseURL || '', API_DID_PREFIX)}`,
-          onSuccess: handleRedeemed,
-          checkTimeout: 60 * 5000,
-          showDownload: false,
-          extraParams: {
-            planId: state.planId || state.plans[0]._id,
-            sessionId: state.sessionId,
-            forceSwitch: !session?.user,
-            // HACK: 在 openPopup 阶段需要手动添加 sourceAppPid 字段
-            sourceAppPid: session?.user?.sourceAppPid,
-            provider: 'wallet'
-          },
-          messages: {
-            title: t('redeem.dialog.title'),
-            scan: t('redeem.dialog.scan'),
-            confirm: t('redeem.dialog.confirm'),
-            success: t('redeem.dialog.success')
-          }
-        }, {
-          locale
-        });
-      });
-    } else {
-      connectApi.openPopup({
-        useSocket: false,
-        locale,
-        action: 'redeem',
-        prefix: `${window.location.origin}${joinURL(baseURL || '', API_DID_PREFIX)}`,
-        onSuccess: handleRedeemed,
-        checkTimeout: 60 * 5000,
-        showDownload: false,
-        extraParams: {
-          planId: state.planId || state.plans[0]._id,
-          sessionId: state.sessionId,
-          forceSwitch: !session?.user,
-          // HACK: 在 openPopup 阶段需要手动添加 sourceAppPid 字段
-          sourceAppPid: session?.user?.sourceAppPid,
-          provider: 'wallet'
-        },
-        messages: {
-          title: t('redeem.dialog.title'),
-          scan: t('redeem.dialog.scan'),
-          confirm: t('redeem.dialog.confirm'),
-          success: t('redeem.dialog.success')
-        },
-        baseUrl: window.location.origin
-      }, {
-        locale
-      });
-    }
-  };
-  const handleRedeemed = ({
-    sessionToken,
-    nftId,
-    type,
-    sessionId
-  }) => {
-    if (type === NFT_TYPE_SERVERLESS) {
-      params.set('launchType', 'serverless');
-    }
-    if (sessionToken) {
-      storage.setToken(sessionToken);
-      session.refresh();
-    }
-    if (sessionId) {
-      params.set('sessionId', sessionId);
-    }
-    navigate({
-      pathname: joinURL(routerPrefix, `/launch/${nftId}`),
-      search: params.toString()
-    });
-  };
-  const plan = state.planId && state.plans ? state.plans.find(x => x._id === state.planId) : null;
-  return /*#__PURE__*/_jsxs(Container, {
-    embed: embed,
-    children: [/*#__PURE__*/_jsx(Header, {
-      title: t('purchase.pageTitle'),
-      disableBack: disableBack
-    }), /*#__PURE__*/_jsx(Body, {
-      style: {
-        justifyContent: 'center'
-      },
-      children: /*#__PURE__*/_jsxs("div", {
-        style: {
-          flex: 1,
-          position: 'relative'
-        },
-        children: [state.error && /*#__PURE__*/_jsx(ResultMessage, {
-          variant: "error",
-          title: t('common.error'),
-          subTitle: state.error
-        }), !state.error && /*#__PURE__*/_jsx("div", {
-          className: "container-inner",
-          children: /*#__PURE__*/_jsx(CompactLayout, {
-            bottom: /*#__PURE__*/_jsxs(Footer, {
-              className: "footer",
-              children: [embed && isPurchaseOnly === false && /*#__PURE__*/_jsxs("div", {
-                className: "footer-left",
-                children: [/*#__PURE__*/_jsx(Button, {
-                  onClick: handleRedeem,
-                  className: "redeem-button",
-                  variant: "outlined",
-                  children: t('purchase.redeem')
-                }), /*#__PURE__*/_jsx(Link, {
-                  className: "select-space",
-                  to: joinURL(routerPrefix, `/purchase/select${window.location.search}`),
-                  children: t('purchase.selectSpaceHint')
-                })]
-              }), /*#__PURE__*/_jsx(Button, {
-                component: Link,
-                disabled: state.loading || !state.planId,
-                to: joinURL(routerPrefix, `/purchase/checkout?${params.toString()}`),
-                className: "button-next",
-                variant: "contained",
-                children: plan ? t('purchase.hasPlan', {
-                  name: plan.name[locale]
-                }) : t('purchase.noPlan')
-              })]
-            }),
-            children: /*#__PURE__*/_jsx("div", {
-              ref: planListRef,
-              className: "plan-list",
-              children: state.loading ? /*#__PURE__*/_jsx(Center, {
-                relative: "parent",
-                children: /*#__PURE__*/_jsx(CircularProgress, {})
-              }) : /*#__PURE__*/_jsxs(_Fragment, {
-                children: [!isMobile && /*#__PURE__*/_jsx(Plan, {
-                  toc: true,
-                  productFeatures: productFeatures,
-                  paymentMethods: state.paymentMethods,
-                  paymentMethod: state.paymentMethod,
-                  onChangeMethod: paymentMethod => setState({
-                    paymentMethod
-                  }),
-                  className: "toc"
-                }), /*#__PURE__*/_jsxs(Splide, {
-                  extensions: {
-                    Grid
-                  },
-                  onPaginationMounted: splide => {
-                    const pageCount = Math.ceil(state.plans.length / splide.options.perPage);
-                    const showArrows = pageCount > 1;
-                    setState({
-                      arrows: showArrows
-                    });
-                    if (showArrows) {
-                      setTimeout(() => {
-                        setState({
-                          showMorePrompt: true
-                        });
-                        // 3s 后隐藏
-                        setTimeout(() => setState({
-                          showMorePrompt: false
-                        }), 3000);
-                      }, 1000);
-                    }
-                  },
-                  hasTrack: false,
-                  options: {
-                    rewind: true,
-                    pagination: true,
-                    arrows: state.arrows,
-                    classes: {
-                      pagination: 'splide__pagination splide__pagination-custom'
-                    },
-                    trimSpace: true,
-                    width: state.width,
-                    perPage: state.perPage,
-                    gap: state.gap
-                  },
-                  children: [/*#__PURE__*/_jsxs("div", {
-                    className: "splide__arrows",
-                    children: [/*#__PURE__*/_jsx("button", {
-                      className: "splide__arrow splide__arrow--prev",
-                      type: "button",
-                      disabled: "",
-                      "aria-label": "Previous slide",
-                      children: /*#__PURE__*/_jsx(PrevIcon, {
-                        viewBox: "0 0 40 40"
-                      })
-                    }), /*#__PURE__*/_jsx(Tooltip, {
-                      open: state.showMorePrompt,
-                      title: t('purchase.morePlanPrompt'),
-                      placement: "top",
-                      children: /*#__PURE__*/_jsx("button", {
-                        className: "splide__arrow splide__arrow--next",
-                        type: "button",
-                        "aria-label": "Next slide",
-                        children: /*#__PURE__*/_jsx(NextIcon, {
-                          viewBox: "0 0 40 40"
-                        })
-                      })
-                    })]
-                  }), /*#__PURE__*/_jsx(SplideTrack, {
-                    children: state.plans.map(x => /*#__PURE__*/_jsx(SplideSlide, {
-                      style: {
-                        width: 'auto'
-                      },
-                      children: /*#__PURE__*/_jsx(Plan, {
-                        recommend: !!x.isRecommended,
-                        checked: x._id === state.planId,
-                        plan: x,
-                        paymentMethod: state.paymentMethod,
-                        paymentMethods: state.paymentMethods,
-                        onClick: () => handleSelect(x._id)
-                      })
-                    }, x._id))
-                  })]
-                })]
-              })
-            })
-          })
-        })]
-      })
-    }), session.user && /*#__PURE__*/_jsx(InProgressSession, {}), connectHolder]
-  });
-}
-const Container = styled(Layout)`
-  .container-inner {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .plan-list {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @media (min-width: 900px) {
-      margin-top: 20px;
-    }
-
-    @media (min-width: 680px) and (max-width: 899px) {
-      justify-content: center;
-    }
-
-    .toc {
-      min-width: 180px;
-      margin-right: 20px;
-    }
-
-    button.splide__pagination__page.is-active {
-      background: #9397a1;
-    }
-  }
-
-  .splide__pagination-custom {
-    bottom: -24px;
-  }
-
-  .footer {
-    display: flex;
-    justify-content: ${props => props.embed ? 'space-between' : 'flex-end'};
-    align-item: center;
-    margin-top: auto;
-    padding-top: 16px;
-    padding-bottom: ${props => props.embed ? '0' : '16px'};
-
-    > * {
-      margin: 0 8px;
-      ${props => props.theme.breakpoints.up('md')} {
-        margin: 0 16px;
-      }
-    }
-
-    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .footer-left {
-      display: flex;
-      gap: 16px;
-      align-items: center;
-      justify-content: space-between;
-
-      .select-space {
-        order: 1;
-        color: #000;
-
-        &:hover {
-          text-decoration: underline !important;
-        }
-      }
-
-      .redeem-button {
-        order: 1;
-      }
-
-      @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
-        width: 100%;
-        flex-direction: column;
-
-        .redeem-button {
-          width: 100%;
-          order: 2;
-        }
-      }
-    }
-
-    .button-next {
-      min-width: 200px;
-
-      @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
-        width: 100%;
-        margin-top: 20px;
-      }
-    }
-  }
-`;
-PurchasePage.propTypes = {
-  disableBack: PropTypes.bool
-};
-PurchasePage.defaultProps = {
-  disableBack: false
-};
-export default PurchasePage;