@blocklet/launcher-workflow 2.3.80 → 2.3.82

package/es/components/plan.js

@@ -1,443 +0,0 @@
-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, jsxs as _jsxs, 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;