@blocklet/launcher-workflow 2.1.108 → 2.2.0

package/es/components/layout/body.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Body = /*#__PURE__*/forwardRef(function Body({
+  children,
+  ...rest
+}, ref) {
+  return /*#__PURE__*/_jsx(Container, {
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "page-body-article",
+      children: children
+    })
+  });
+});
+Body.propTypes = {
+  children: PropTypes.any.isRequired
+};
+const Container = styled.div`
+  flex: 1;
+
+  @media (min-width: 960px) {
+    margin-top: 32px;
+  }
+
+  @media (max-width: 960px) {
+    margin-top: 16px;
+  }
+
+  .page-body-article {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+`;
+export default Body;

package/es/components/layout/footer.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Footer({
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Container, {
+    ...rest,
+    children: children
+  });
+}
+Footer.propTypes = {
+  children: PropTypes.any.isRequired
+};
+const Container = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: auto;
+  width: 100%;
+`;

package/es/components/layout/header.js

@@ -0,0 +1,25 @@
+import { useNavigate } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import PageHeader from '@blocklet/launcher-layout/lib/page-header';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Header({
+  title,
+  disableBack
+}) {
+  const navigate = useNavigate();
+  const clickBack = () => {
+    navigate(-1);
+  };
+  return /*#__PURE__*/_jsx(PageHeader, {
+    title: title,
+    onClickBack: disableBack ? undefined : clickBack
+  });
+}
+Header.propTypes = {
+  title: PropTypes.any,
+  disableBack: PropTypes.bool
+};
+Header.defaultProps = {
+  title: '',
+  disableBack: false
+};

package/es/components/layout/index.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Layout({
+  children,
+  ...rest
+}) {
+  // layout-fix-container for compatibility with lower versions of safari, do not remove this className
+  return /*#__PURE__*/_jsx(Container, {
+    className: "layout-fix-container",
+    ...rest,
+    children: children
+  });
+}
+Layout.propTypes = {
+  children: PropTypes.any.isRequired
+};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+`;

package/es/components/plan.js

@@ -0,0 +1,445 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { prettyDuration } from '@blocklet/launcher-util/es/util';
+import Typography from '@mui/material/Typography';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import useMobile from '@blocklet/launcher-ux/lib/use-mobile';
+import noop from 'lodash.noop';
+import { Tooltip } from '@mui/material';
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10 20c5.523 0 10-4.477 10-10S15.523 0 10 0 0 4.477 0 10s4.477 10 10 10Z",
+      fill: "#1DC1C7"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m5.474 10.646 2.586 2.586 6.465-6.465",
+      fill: "#1DC1C7"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.233 6.06a1 1 0 0 1 0 1.415L8.768 13.94a1 1 0 0 1-1.415 0l-2.586-2.586a1 1 0 1 1 1.415-1.415l1.878 1.88 5.758-5.759a1 1 0 0 1 1.415 0Z",
+      fill: "#fff"
+    })]
+  });
+};
+CheckIcon.defaultProps = {
+  width: "20",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var CheckReverseIcon = function CheckReverseIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10.75 20c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z",
+      fill: "#fff"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m6.224 10.646 2.586 2.586 6.465-6.465",
+      fill: "#fff"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m6.224 10.646 2.586 2.586 6.465-6.465",
+      stroke: "#1DC1C7",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+CheckReverseIcon.defaultProps = {
+  width: "21",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var UnCheckIcon = function UnCheckIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10.25 20c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z",
+      fill: "#1DC1C7"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.6 5.029a.872.872 0 0 0-.846.233L10.25 8.769 6.746 5.262A.872.872 0 1 0 5.51 6.497l3.505 3.508-3.506 3.509-.002.002a.874.874 0 0 0 1.235 1.235l3.507-3.51 3.505 3.508.002.002a.872.872 0 0 0 1.235-1.235l-3.508-3.511 3.504-3.508a.874.874 0 0 0-.388-1.468Z",
+      fill: "#fff"
+    })]
+  });
+};
+UnCheckIcon.defaultProps = {
+  width: "21",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var UnCheckReverseIcon = function UnCheckReverseIcon(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10.75 20c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z",
+      fill: "#fff"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M15.1 5.029a.872.872 0 0 0-.846.233L10.75 8.769 7.246 5.262A.872.872 0 1 0 6.01 6.497l3.505 3.508-3.506 3.509-.002.002a.874.874 0 0 0 1.235 1.235l3.507-3.51 3.505 3.508.002.002a.872.872 0 0 0 1.235-1.235l-3.508-3.511 3.504-3.508a.874.874 0 0 0-.388-1.468Z",
+      fill: "#1DC1C7"
+    })]
+  });
+};
+UnCheckReverseIcon.defaultProps = {
+  width: "21",
+  height: "20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+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";
+function Feature({
+  feature,
+  locale,
+  checked,
+  isMobile
+}) {
+  let valueEle = '';
+  if (feature.type === 'boolean') {
+    if (feature.value === true) {
+      valueEle = checked ? /*#__PURE__*/_jsx(CheckReverseIcon, {}) : /*#__PURE__*/_jsx(CheckIcon, {});
+    } else {
+      valueEle = checked ? /*#__PURE__*/_jsx(UnCheckReverseIcon, {}) : /*#__PURE__*/_jsx(UnCheckIcon, {});
+    }
+  }
+  if (feature.type === 'text') {
+    valueEle = feature.value[locale];
+  }
+  if (isMobile) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [feature.type === 'boolean' && /*#__PURE__*/_jsxs(MobileBooleanItem, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          style: {
+            display: 'flex'
+          },
+          children: valueEle
+        }), /*#__PURE__*/_jsx(Typography, {
+          component: "span",
+          style: {
+            marginLeft: '8px'
+          },
+          children: feature.name[locale]
+        })]
+      }), feature.type === 'text' && /*#__PURE__*/_jsx(TextItem, {
+        children: `${feature.name[locale]}: ${valueEle}`
+      })]
+    });
+  }
+  return feature.type === 'text' ? /*#__PURE__*/_jsx(TextItem, {
+    children: valueEle
+  }) : valueEle;
+}
+const MobileBooleanItem = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+const TextItem = styled.div`
+  display: -webkit-box;
+  white-space: normal;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+Feature.propTypes = {
+  feature: PropTypes.object.isRequired,
+  locale: PropTypes.string.isRequired,
+  checked: PropTypes.bool,
+  isMobile: PropTypes.bool
+};
+Feature.defaultProps = {
+  checked: false,
+  isMobile: false
+};
+function Plan({
+  plan,
+  productFeatures,
+  toc,
+  checked,
+  recommend,
+  paymentMethods,
+  paymentMethod,
+  onChangeMethod,
+  ...rest
+}) {
+  const {
+    locale,
+    t
+  } = useLocaleContext();
+  const {
+    isMobile
+  } = useMobile();
+  if (toc) {
+    return /*#__PURE__*/_jsxs(Container, {
+      className: "toc",
+      available: true,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "basic-toc",
+        children: /*#__PURE__*/_jsx(Typography, {
+          className: "payment-methods",
+          component: "div",
+          children: /*#__PURE__*/_jsx(FormControl, {
+            style: {
+              minWidth: 180
+            },
+            size: "small",
+            children: /*#__PURE__*/_jsx(Select, {
+              id: "payment-method",
+              value: paymentMethod,
+              onChange: e => onChangeMethod(e.target.value),
+              children: paymentMethods.map(({
+                _id,
+                currency
+              }) => /*#__PURE__*/_jsx(MenuItem, {
+                value: _id,
+                children: t('common.payWith', {
+                  currency: currency.displayName[locale] || currency.displayName.en
+                })
+              }, _id))
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "features toc__title",
+        children: (productFeatures || []).map(({
+          _id,
+          name
+        }) => {
+          return /*#__PURE__*/_jsx("div", {
+            className: "feature",
+            children: name[locale]
+          }, _id);
+        })
+      })]
+    });
+  }
+  let features = [];
+  try {
+    // TODO: Pricing Table: 临时做法
+    if (Array.isArray(plan.features) && plan.features.length > 0) {
+      features = JSON.parse(plan.features[0].en);
+    }
+  } catch (error) {
+    console.error('parse features failed:', error);
+  }
+  const providerName = paymentMethods.find(x => x._id === paymentMethod)?.provider.name;
+  const content = /*#__PURE__*/_jsxs(Container, {
+    checked: checked,
+    className: `card-container ${checked ? 'checked' : ''}`,
+    available: !!plan.available,
+    ...rest,
+    children: [recommend && /*#__PURE__*/_jsx("div", {
+      className: "recommend-tag",
+      children: t('common.popular')
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "basic",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "header",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "header__title",
+          children: t('common.space')
+        }), /*#__PURE__*/_jsx("div", {
+          className: "header__name",
+          children: plan?.name[locale]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "price-info",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "price",
+          children: getPrice(plan.prices, providerName)
+        }), /*#__PURE__*/_jsx("div", {
+          className: "period",
+          children: prettyDuration(plan.duration, locale)
+        })]
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "features",
+      children: features.map(feature => {
+        return /*#__PURE__*/_jsx("div", {
+          className: "feature",
+          children: /*#__PURE__*/_jsx(Feature, {
+            feature: feature,
+            locale: locale,
+            checked: checked,
+            isMobile: isMobile
+          })
+        }, feature._id);
+      })
+    })]
+  });
+  if (plan.available) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: plan.reason,
+    style: {
+      cursor: 'not-allowed'
+    },
+    children: content
+  });
+}
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 12px;
+  overflow: hidden;
+  min-height: 400px;
+  white-space: nowrap;
+  padding: 16px;
+  filter: grayscale(${props => props.available ? 0 : 1});
+  opacity: ${props => props.available ? 1 : 0.4};
+
+  .recommend-tag {
+    display: block;
+    position: absolute;
+    top: 4px;
+    right: 32px;
+    color: #fff;
+    padding: 4px 100px;
+    position: absolute;
+    transform: translate(50%, 50%) rotate(45deg);
+    white-space: nowrap;
+    background-color: #fe9344;
+    transform-origin: center;
+  }
+
+  .toc__title {
+    font-weight: bolder;
+    align-items: flex-start;
+  }
+
+  &:not(.toc) {
+    width: 280px;
+    color: #000;
+    background-color: #f0fdff;
+    cursor: pointer;
+  }
+
+  &:not(.toc, .checked):hover {
+    color: #000;
+    background-color: #ddf6f8;
+    cursor: pointer;
+  }
+
+  &.checked {
+    color: #fff;
+    background-color: ${props => props.theme.palette.primary.main};
+    cursor: pointer;
+  }
+
+  .basic-toc {
+    width: 100%;
+    height: 8em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    .payment-methods {
+      padding-top: 3em;
+      font-size: 1.1em;
+      font-weight: bolder;
+
+      select {
+        margin-left: 1em;
+      }
+    }
+  }
+
+  .basic {
+    width: 100%;
+    height: 8em;
+
+    .header {
+      text-align: center;
+      .header__title {
+        color: ${props => props.checked ? '#ffffff' : '#9397a1'};
+      }
+
+      .header__name {
+        font-weight: bolder;
+      }
+    }
+
+    .price-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 6.5em;
+
+      .price {
+        font-size: 1.5em;
+        font-weight: bolder;
+      }
+
+      .period {
+        color: ${props => props.checked ? '#ffffff' : '#9397a1'};
+      }
+    }
+  }
+
+  .features {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: auto;
+
+    .feature {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 48px;
+      text-align: center;
+
+      // 移动端不减小
+      @media (max-height: 960px) and (min-width: 640px) {
+        height: 36px;
+        font-size: 0.9rem;
+      }
+
+      @media (max-width: 900px) {
+        justify-content: flex-start;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid;
+        border-bottom-color: ${props => props.checked || props.hovered ? 'rgba(255, 255, 255, 0.2)' : '#f6f6f6'};
+      }
+    }
+  }
+`;
+Plan.propTypes = {
+  plan: PropTypes.object.isRequired,
+  paymentMethod: PropTypes.string.isRequired,
+  paymentMethods: PropTypes.array,
+  onChangeMethod: PropTypes.func,
+  productFeatures: PropTypes.array,
+  checked: PropTypes.bool,
+  recommend: PropTypes.bool,
+  toc: PropTypes.bool
+};
+Plan.defaultProps = {
+  paymentMethods: [],
+  productFeatures: [],
+  onChangeMethod: noop,
+  checked: false,
+  recommend: false,
+  toc: false
+};
+export default Plan;

package/es/contexts/locale.js

@@ -0,0 +1,2 @@
+import { LocaleProvider, LocaleConsumer, LocaleContext, useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+export { LocaleProvider, LocaleConsumer, LocaleContext, useLocaleContext };

package/es/contexts/request.js

@@ -0,0 +1,71 @@
+import { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import get from 'lodash.get';
+import joinUrl from 'url-join';
+import { useSessionContext } from './session';
+import { useLocaleContext } from './locale';
+import { jsx as _jsx } from "react/jsx-runtime";
+axios.defaults.timeout = 200000;
+const RequestContext = /*#__PURE__*/createContext();
+const {
+  Provider
+} = RequestContext;
+export function RequestProvider({
+  baseURL,
+  children
+}) {
+  const {
+    session
+  } = useSessionContext();
+  const {
+    locale
+  } = useLocaleContext();
+  const configRequest = r => {
+    r.interceptors.request.use(config => {
+      config.url = joinUrl('/api', config.url);
+      if (!config.params) {
+        config.params = {};
+      }
+      // Check if `locale` doesn't exist in search params before adding it
+      const searchParams = new URLSearchParams(config.url.split('?')[1]);
+      if (!searchParams.has('locale')) {
+        config.params.locale = locale;
+      }
+      return config;
+    });
+    r.interceptors.response.use(response => response, err => {
+      if (get(err, 'response.status') === 401) {
+        session.login();
+      }
+      return Promise.reject(err);
+    });
+    return r;
+  };
+  const request = axios.create({
+    baseURL
+  });
+  const create = configs => configRequest(axios.create({
+    baseURL,
+    ...(configs || {})
+  }));
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
+      api: configRequest(request),
+      create
+    },
+    children: children
+  });
+}
+RequestProvider.propTypes = {
+  baseURL: PropTypes.string,
+  children: PropTypes.any.isRequired
+};
+RequestProvider.defaultProps = {
+  baseURL: '/'
+};
+RequestProvider.defaultProps = {};
+export default function useRequest() {
+  const value = useContext(RequestContext);
+  return value;
+}

package/es/contexts/session.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+const {
+  SessionProvider,
+  SessionContext,
+  SessionConsumer,
+  withSession
+} = createAuthServiceSessionContext();
+function useSessionContext() {
+  const info = useContext(SessionContext);
+  return info;
+}
+export { SessionProvider, SessionContext, SessionConsumer, useSessionContext, withSession };