@blocklet/launcher-workflow 2.3.80 → 2.3.82

package/lib/components/plan.js

@@ -1,322 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _util = require("@blocklet/launcher-util/es/util");
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _Select = _interopRequireDefault(require("@mui/material/Select"));
-var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
-var _lodash = _interopRequireDefault(require("lodash.noop"));
-var _material = require("@mui/material");
-var _util2 = require("../util");
-var _locale = require("../contexts/locale");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["plan", "productFeatures", "toc", "checked", "recommend", "paymentMethods", "paymentMethod", "onChangeMethod"];
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var CheckIcon = function CheckIcon(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("path", {
-      d: "m5.474 10.646 2.586 2.586 6.465-6.465",
-      fill: "#1DC1C7"
-    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("path", {
-      d: "m6.224 10.646 2.586 2.586 6.465-6.465",
-      fill: "#fff"
-    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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"
-};
-function Feature(_ref) {
-  let {
-    feature,
-    locale,
-    checked,
-    isMobile
-  } = _ref;
-  let valueEle = '';
-  if (feature.type === 'boolean') {
-    if (feature.value === true) {
-      valueEle = checked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckReverseIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckIcon, {});
-    } else {
-      valueEle = checked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(UnCheckReverseIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(UnCheckIcon, {});
-    }
-  }
-  if (feature.type === 'text') {
-    valueEle = feature.value[locale];
-  }
-  if (isMobile) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [feature.type === 'boolean' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileBooleanItem, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          component: "span",
-          style: {
-            display: 'flex'
-          },
-          children: valueEle
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          component: "span",
-          style: {
-            marginLeft: '8px'
-          },
-          children: feature.name[locale]
-        })]
-      }), feature.type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextItem, {
-        children: "".concat(feature.name[locale], ": ").concat(valueEle)
-      })]
-    });
-  }
-  return feature.type === 'text' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TextItem, {
-    children: valueEle
-  }) : valueEle;
-}
-const MobileBooleanItem = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n"])));
-const TextItem = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: -webkit-box;\n  white-space: normal;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n"])));
-Feature.propTypes = {
-  feature: _propTypes.default.object.isRequired,
-  locale: _propTypes.default.string.isRequired,
-  checked: _propTypes.default.bool,
-  isMobile: _propTypes.default.bool
-};
-Feature.defaultProps = {
-  checked: false,
-  isMobile: false
-};
-function Plan(_ref2) {
-  var _paymentMethods$find;
-  let {
-      plan,
-      productFeatures,
-      toc,
-      checked,
-      recommend,
-      paymentMethods,
-      paymentMethod,
-      onChangeMethod
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
-  const {
-    locale,
-    t
-  } = (0, _locale.useLocaleContext)();
-  const {
-    isMobile
-  } = (0, _useMobile.default)();
-  if (toc) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-      className: "toc",
-      available: true,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "basic-toc",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          className: "payment-methods",
-          component: "div",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl.default, {
-            style: {
-              minWidth: 180
-            },
-            size: "small",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
-              id: "payment-method",
-              value: paymentMethod,
-              onChange: e => onChangeMethod(e.target.value),
-              children: paymentMethods.map(_ref3 => {
-                let {
-                  _id,
-                  currency
-                } = _ref3;
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-                  value: _id,
-                  children: t('common.payWith', {
-                    currency: currency.displayName[locale] || currency.displayName.en
-                  })
-                }, _id);
-              })
-            })
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "features toc__title",
-        children: (productFeatures || []).map(_ref4 => {
-          let {
-            _id,
-            name
-          } = _ref4;
-          return /*#__PURE__*/(0, _jsxRuntime.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 = paymentMethods.find(x => x._id === paymentMethod)) === null || _paymentMethods$find === void 0 ? void 0 : _paymentMethods$find.provider.name;
-  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
-    checked: checked,
-    className: "card-container ".concat(checked ? 'checked' : ''),
-    available: !!plan.available
-  }, rest), {}, {
-    children: [recommend && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "recommend-tag",
-      children: t('common.popular')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "basic",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "header",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "header__title",
-          children: t('common.space')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "header__name",
-          children: plan === null || plan === void 0 ? void 0 : plan.name[locale]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "price-info",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "price",
-          children: (0, _util2.getPrice)(plan.prices, providerName)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "period",
-          children: (0, _util.prettyDuration)(plan.duration, locale)
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "features",
-      children: features.map(feature => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "feature",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Feature, {
-            feature: feature,
-            locale: locale,
-            checked: checked,
-            isMobile: isMobile
-          })
-        }, feature._id);
-      })
-    })]
-  }));
-  if (plan.available) {
-    return content;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
-    title: plan.reason,
-    style: {
-      cursor: 'not-allowed'
-    },
-    children: content
-  });
-}
-const Container = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  flex-direction: column;\n  border-radius: 12px;\n  overflow: hidden;\n  min-height: 400px;\n  white-space: nowrap;\n  padding: 16px;\n  filter: grayscale(", ");\n  opacity: ", ";\n\n  .recommend-tag {\n    display: block;\n    position: absolute;\n    top: 4px;\n    right: 32px;\n    color: #fff;\n    padding: 4px 100px;\n    position: absolute;\n    transform: translate(50%, 50%) rotate(45deg);\n    white-space: nowrap;\n    background-color: #fe9344;\n    transform-origin: center;\n  }\n\n  .toc__title {\n    font-weight: bolder;\n    align-items: flex-start;\n  }\n\n  &:not(.toc) {\n    width: 280px;\n    color: #000;\n    background-color: #f0fdff;\n    cursor: pointer;\n  }\n\n  &:not(.toc, .checked):hover {\n    color: #000;\n    background-color: #ddf6f8;\n    cursor: pointer;\n  }\n\n  &.checked {\n    color: #fff;\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  .basic-toc {\n    width: 100%;\n    height: 8em;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n\n    .payment-methods {\n      padding-top: 3em;\n      font-size: 1.1em;\n      font-weight: bolder;\n\n      select {\n        margin-left: 1em;\n      }\n    }\n  }\n\n  .basic {\n    width: 100%;\n    height: 8em;\n\n    .header {\n      text-align: center;\n      .header__title {\n        color: ", ";\n      }\n\n      .header__name {\n        font-weight: bolder;\n      }\n    }\n\n    .price-info {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      height: 6.5em;\n\n      .price {\n        font-size: 1.5em;\n        font-weight: bolder;\n      }\n\n      .period {\n        color: ", ";\n      }\n    }\n  }\n\n  .features {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    margin-top: auto;\n\n    .feature {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 48px;\n      text-align: center;\n\n      // \u79FB\u52A8\u7AEF\u4E0D\u51CF\u5C0F\n      @media (max-height: 960px) and (min-width: 640px) {\n        height: 36px;\n        font-size: 0.9rem;\n      }\n\n      @media (max-width: 900px) {\n        justify-content: flex-start;\n      }\n\n      &:not(:last-child) {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n      }\n    }\n  }\n"])), props => props.available ? 0 : 1, props => props.available ? 1 : 0.4, props => props.theme.palette.primary.main, props => props.checked ? '#ffffff' : '#9397a1', props => props.checked ? '#ffffff' : '#9397a1', props => props.checked || props.hovered ? 'rgba(255, 255, 255, 0.2)' : '#f6f6f6');
-Plan.propTypes = {
-  plan: _propTypes.default.object.isRequired,
-  paymentMethod: _propTypes.default.string.isRequired,
-  paymentMethods: _propTypes.default.array,
-  onChangeMethod: _propTypes.default.func,
-  productFeatures: _propTypes.default.array,
-  checked: _propTypes.default.bool,
-  recommend: _propTypes.default.bool,
-  toc: _propTypes.default.bool
-};
-Plan.defaultProps = {
-  paymentMethods: [],
-  productFeatures: [],
-  onChangeMethod: _lodash.default,
-  checked: false,
-  recommend: false,
-  toc: false
-};
-var _default = exports.default = Plan;