@blocklet/launcher-workflow 2.1.108 → 2.2.0

package/es/purchase.js

@@ -0,0 +1,631 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import Connect, { useSecurity } from '@arcblock/did-connect/lib/Connect';
+import Button from '@arcblock/ux/lib/Button';
+import Center from '@arcblock/ux/lib/Center';
+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 '@splidejs/splide/dist/css/splide.min.css';
+import ResultMessage from '@blocklet/launcher-layout/lib/launch-result-message';
+import formatError from '@blocklet/launcher-util/es/format-error';
+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 } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { 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
+  } = useRequest();
+  const {
+    isMobile
+  } = useMobile();
+  const {
+    decrypt
+  } = useSecurity();
+  const navigate = useNavigate();
+  const {
+    session,
+    storage,
+    events
+  } = useSessionContext();
+  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'),
+    showRedeem: false,
+    showMorePrompt: false,
+    arrows: false,
+    perPage: 100,
+    width: `${SLIDE_WIDTH}px`,
+    gap: '16px'
+  });
+  const api = create({
+    baseURL: didPayPrefix
+  });
+  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 handleRedeem = () => {
+    setState({
+      showRedeem: true
+    });
+  };
+  const handleRedeemed = ({
+    loginToken,
+    nftId,
+    type,
+    sessionId
+  }) => {
+    if (type === NFT_TYPE_SERVERLESS) {
+      params.set('launchType', 'serverless');
+    }
+    if (loginToken) {
+      storage.setToken(decrypt(loginToken));
+      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, {}), state.showRedeem && /*#__PURE__*/_jsx(Connect, {
+      open: true,
+      popup: true,
+      useSocket: false,
+      locale: locale,
+      action: "redeem",
+      prefix: "/did",
+      checkFn: create().get,
+      onSuccess: handleRedeemed,
+      onClose: () => setState({
+        showRedeem: false
+      }),
+      checkTimeout: 60 * 5000,
+      showDownload: false,
+      extraParams: {
+        planId: state.planId || state.plans[0]._id,
+        sessionId: state.sessionId
+      },
+      messages: {
+        title: t('redeem.dialog.title'),
+        scan: t('redeem.dialog.scan'),
+        confirm: t('redeem.dialog.confirm'),
+        success: t('redeem.dialog.success')
+      }
+    })]
+  });
+}
+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;
+
+    > * {
+      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;