@blocklet/launcher-workflow 2.0.18 → 2.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/assets/images/uncheck-reverse.svg +4 -0
  2. package/lib/assets/images/uncheck.svg +4 -0
  3. package/lib/components/layout/body.js +22 -8
  4. package/lib/components/plan.js +87 -85
  5. package/lib/locales/en.js +1 -0
  6. package/lib/locales/zh.js +1 -0
  7. package/lib/purchase.js +95 -35
  8. package/package.json +12 -12
  9. package/lib/assets/images/cup.svg +0 -9
package/lib/assets/images/uncheck-reverse.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.75 20C16.273 20 20.75 15.523 20.75 10C20.75 4.477 16.273 0 10.75 0C5.227 0 0.75 4.477 0.75 10C0.75 15.523 5.227 20 10.75 20Z" fill="white"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.0996 5.02896C14.7963 4.94882 14.4734 5.03776 14.2538 5.26169L10.7499 8.76925L7.24586 5.26168C7.02626 5.03776 6.70341 4.94882 6.40007 5.02896C6.09618 5.10925 5.85902 5.34677 5.7789 5.65066C5.69894 5.95395 5.78763 6.27688 6.01129 6.49668L9.5157 10.0047L6.01024 13.5137L6.00795 13.516C5.67377 13.8582 5.67685 14.4057 6.01487 14.7441C6.35305 15.0826 6.90053 15.0857 7.24251 14.751L10.7499 11.2401L14.2549 14.7487L14.2572 14.751C14.5992 15.0857 15.1467 15.0826 15.4848 14.7441C15.8229 14.4057 15.826 13.8582 15.4918 13.516L11.984 10.0047L15.4884 6.49668C15.7121 6.27689 15.8008 5.95395 15.7208 5.65066C15.6407 5.34677 15.4035 5.10925 15.0996 5.02896Z" fill="#1DC1C7"/>
4
+ </svg>
package/lib/assets/images/uncheck.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.25 20C15.773 20 20.25 15.523 20.25 10C20.25 4.477 15.773 0 10.25 0C4.727 0 0.25 4.477 0.25 10C0.25 15.523 4.727 20 10.25 20Z" fill="#1DC1C7"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5996 5.02896C14.2963 4.94882 13.9734 5.03776 13.7538 5.26169L10.2499 8.76925L6.74586 5.26168C6.52626 5.03776 6.20341 4.94882 5.90007 5.02896C5.59618 5.10925 5.35902 5.34677 5.2789 5.65066C5.19894 5.95395 5.28763 6.27688 5.51129 6.49668L9.0157 10.0047L5.51024 13.5137L5.50795 13.516C5.17377 13.8582 5.17685 14.4057 5.51487 14.7441C5.85305 15.0826 6.40053 15.0857 6.74251 14.751L10.2499 11.2401L13.7549 14.7487L13.7572 14.751C14.0992 15.0857 14.6467 15.0826 14.9848 14.7441C15.3229 14.4057 15.326 13.8582 14.9918 13.516L11.484 10.0047L14.9884 6.49668C15.2121 6.27689 15.3008 5.95395 15.2208 5.65066C15.1407 5.34677 14.9035 5.10925 14.5996 5.02896Z" fill="white"/>
4
+ </svg>
package/lib/components/layout/body.js CHANGED
@@ -3,25 +3,39 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = Body;
6
+ exports.default = void 0;
7
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
8
8
  var _styled = _interopRequireDefault(require("@emotion/styled"));
9
+ var _react = require("react");
9
10
  var _jsxRuntime = require("react/jsx-runtime");
10
11
  var _templateObject;
12
+ const _excluded = ["children"];
11
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
14
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
13
- function Body(_ref) {
15
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
16
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
18
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
19
+ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
20
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
21
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
22
+ const Body = /*#__PURE__*/(0, _react.forwardRef)(function Body(_ref, ref) {
14
23
  let {
15
- children
16
- } = _ref;
17
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
24
+ children
25
+ } = _ref,
26
+ rest = _objectWithoutProperties(_ref, _excluded);
27
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({
28
+ ref: ref
29
+ }, rest), {}, {
18
30
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
19
31
  className: "page-body-article",
20
32
  children: children
21
33
  })
22
- });
23
- }
34
+ }));
35
+ });
24
36
  Body.propTypes = {
25
37
  children: _propTypes.default.any.isRequired
26
38
  };
27
- const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n\n @media (min-width: 900px) {\n margin-top: 32px;\n }\n\n .page-body-article {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n }\n"])));
39
+ const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n\n @media (min-width: 960px) {\n margin-top: 32px;\n }\n\n @media (max-width: 960px) {\n margin-top: 16px;\n }\n\n .page-body-article {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n"])));
40
+ var _default = Body;
41
+ exports.default = _default;
package/lib/components/plan.js CHANGED
@@ -14,7 +14,7 @@ var _util = require("../../lib/util");
14
14
  var _locale = require("../contexts/locale");
15
15
  var _jsxRuntime = require("react/jsx-runtime");
16
16
  const _excluded = ["plan", "productFeatures", "toc", "checked", "recommend"];
17
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
17
+ var _templateObject, _templateObject2, _templateObject3;
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
20
20
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -24,44 +24,6 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
24
24
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
25
25
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
26
26
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
- var CpuIcon = function CpuIcon(props) {
28
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
29
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
30
- width: "40",
31
- height: "40",
32
- rx: "20",
33
- fill: "#FEAF49"
34
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
35
- opacity: ".34",
36
- fillRule: "evenodd",
37
- clipRule: "evenodd",
38
- d: "M20.15 23.6a.9.9 0 0 1 .9.9v2.1a.9.9 0 0 1-1.8 0v-2.1a.9.9 0 0 1 .9-.9Z",
39
- fill: "#fff"
40
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
41
- fillRule: "evenodd",
42
- clipRule: "evenodd",
43
- d: "M14.25 29c0-1.597 1.303-2.9 2.9-2.9h6c1.597 0 2.9 1.303 2.9 2.9v1.9h-11.8V29Zm2.9-1.1c-.603 0-1.1.497-1.1 1.1v.1h8.2V29c0-.603-.497-1.1-1.1-1.1h-6Z",
44
- fill: "#fff"
45
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
46
- fillRule: "evenodd",
47
- clipRule: "evenodd",
48
- d: "M13.25 30a.9.9 0 0 1 .9-.9h12a.9.9 0 0 1 0 1.8h-12a.9.9 0 0 1-.9-.9ZM17 10.9a3.099 3.099 0 0 0-3.1 3.1v3c0 3.373 2.727 6.1 6.1 6.1 3.373 0 6.1-2.727 6.1-6.1v-3c0-1.713-1.387-3.1-3.1-3.1h-6ZM12.1 14c0-2.707 2.193-4.9 4.9-4.9h6c2.707 0 4.9 2.193 4.9 4.9v3c0 4.367-3.533 7.9-7.9 7.9a7.895 7.895 0 0 1-7.9-7.9v-3Z",
49
- fill: "#fff"
50
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
51
- opacity: ".34",
52
- fillRule: "evenodd",
53
- clipRule: "evenodd",
54
- d: "M12.016 13.333a1.572 1.572 0 0 0-1.077 1.517c0 1.035.405 1.96 1.09 2.79a7.935 7.935 0 0 1-.04-.79v-3c0-.173.009-.346.027-.517ZM9.139 14.85c0-1.897 1.503-3.4 3.4-3.4h.65a.9.9 0 0 1 .825 1.259 2.858 2.858 0 0 0-.225 1.141v3c0 .872.183 1.691.507 2.444a.9.9 0 0 1-1.101 1.213 5.76 5.76 0 0 1-2.325-1.455C9.863 17.934 9.14 16.528 9.14 14.85ZM26.057 11.857a.9.9 0 0 1 .752-.407h.65c1.897 0 3.4 1.503 3.4 3.4 0 1.678-.724 3.084-1.73 4.202l-.033.035a5.758 5.758 0 0 1-2.292 1.42.9.9 0 0 1-1.101-1.213 6.148 6.148 0 0 0 .506-2.444v-3c0-.417-.078-.804-.225-1.141a.9.9 0 0 1 .073-.852Zm1.926 1.476c.017.171.026.344.026.517v3c0 .267-.013.53-.039.79.685-.83 1.09-1.755 1.09-2.79 0-.718-.442-1.306-1.077-1.517Z",
55
- fill: "#fff"
56
- })]
57
- }));
58
- };
59
- CpuIcon.defaultProps = {
60
- width: "40",
61
- height: "40",
62
- fill: "none",
63
- xmlns: "http://www.w3.org/2000/svg"
64
- };
65
27
  var CheckIcon = function CheckIcon(props) {
66
28
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
67
29
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
@@ -107,6 +69,44 @@ CheckReverseIcon.defaultProps = {
107
69
  fill: "none",
108
70
  xmlns: "http://www.w3.org/2000/svg"
109
71
  };
72
+ var UnCheckIcon = function UnCheckIcon(props) {
73
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
74
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
75
+ 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",
76
+ fill: "#1DC1C7"
77
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
78
+ fillRule: "evenodd",
79
+ clipRule: "evenodd",
80
+ 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",
81
+ fill: "#fff"
82
+ })]
83
+ }));
84
+ };
85
+ UnCheckIcon.defaultProps = {
86
+ width: "21",
87
+ height: "20",
88
+ fill: "none",
89
+ xmlns: "http://www.w3.org/2000/svg"
90
+ };
91
+ var UnCheckReverseIcon = function UnCheckReverseIcon(props) {
92
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread({}, props), {}, {
93
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
94
+ 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",
95
+ fill: "#fff"
96
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
97
+ fillRule: "evenodd",
98
+ clipRule: "evenodd",
99
+ 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",
100
+ fill: "#1DC1C7"
101
+ })]
102
+ }));
103
+ };
104
+ UnCheckReverseIcon.defaultProps = {
105
+ width: "21",
106
+ height: "20",
107
+ fill: "none",
108
+ xmlns: "http://www.w3.org/2000/svg"
109
+ };
110
110
  function Feature(_ref) {
111
111
  let {
112
112
  feature,
@@ -116,7 +116,11 @@ function Feature(_ref) {
116
116
  } = _ref;
117
117
  let valueEle = '';
118
118
  if (feature.type === 'boolean') {
119
- valueEle = checked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckReverseIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckIcon, {});
119
+ if (feature.value === true) {
120
+ valueEle = checked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckReverseIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckIcon, {});
121
+ } else {
122
+ valueEle = checked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(UnCheckReverseIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(UnCheckIcon, {});
123
+ }
120
124
  }
121
125
  if (feature.type === 'text') {
122
126
  valueEle = feature.value[locale];
@@ -137,15 +141,17 @@ function Feature(_ref) {
137
141
  },
138
142
  children: feature.name[locale]
139
143
  })]
140
- }), feature.type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileTextItem, {
144
+ }), feature.type === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsx)(TextItem, {
141
145
  children: "".concat(feature.name[locale], ": ").concat(valueEle)
142
146
  })]
143
147
  });
144
148
  }
145
- return valueEle;
149
+ return feature.type === 'text' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TextItem, {
150
+ children: valueEle
151
+ }) : valueEle;
146
152
  }
147
153
  const MobileBooleanItem = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n"])));
148
- const MobileTextItem = _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"])));
154
+ 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"])));
149
155
  Feature.propTypes = {
150
156
  feature: _propTypes.default.object.isRequired,
151
157
  locale: _propTypes.default.string.isRequired,
@@ -201,55 +207,51 @@ function Plan(_ref2) {
201
207
  } catch (error) {
202
208
  console.error('parse features failed:', error);
203
209
  }
204
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Outer, _objectSpread(_objectSpread({
205
- className: recommend ? 'card-recommend' : ''
210
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
211
+ checked: checked,
212
+ className: "card-container ".concat(checked ? 'checked' : '')
206
213
  }, rest), {}, {
207
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
208
- className: "recommend-icon",
209
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CpuIcon, {})
210
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
211
- checked: checked,
212
- className: "card-container ".concat(checked ? 'checked' : ''),
214
+ children: [recommend && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
215
+ className: "recommend-tag",
216
+ children: t('common.popular')
217
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
218
+ className: "basic",
213
219
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
214
- className: "basic",
215
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
216
- className: "header",
217
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
218
- className: "header__title",
219
- children: t('common.space')
220
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
221
- className: "header__name",
222
- children: plan === null || plan === void 0 ? void 0 : plan.name[locale]
223
- })]
224
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
225
- className: "price-info",
226
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
227
- className: "price",
228
- children: (0, _util.getPrice)(plan.prices, 'ocap')
229
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
230
- className: "period",
231
- children: (0, _launcherUtil.prettyDuration)(plan.duration, locale)
232
- })]
220
+ className: "header",
221
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
222
+ className: "header__title",
223
+ children: t('common.space')
224
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
225
+ className: "header__name",
226
+ children: plan === null || plan === void 0 ? void 0 : plan.name[locale]
227
+ })]
228
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
229
+ className: "price-info",
230
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
231
+ className: "price",
232
+ children: (0, _util.getPrice)(plan.prices, 'ocap')
233
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
234
+ className: "period",
235
+ children: (0, _launcherUtil.prettyDuration)(plan.duration, locale)
233
236
  })]
234
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
235
- className: "features",
236
- children: features.map(feature => {
237
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
238
- className: "feature",
239
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Feature, {
240
- feature: feature,
241
- locale: locale,
242
- checked: checked,
243
- isMobile: isMobile
244
- })
245
- }, feature._id);
246
- })
247
237
  })]
238
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
239
+ className: "features",
240
+ children: features.map(feature => {
241
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
242
+ className: "feature",
243
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Feature, {
244
+ feature: feature,
245
+ locale: locale,
246
+ checked: checked,
247
+ isMobile: isMobile
248
+ })
249
+ }, feature._id);
250
+ })
248
251
  })]
249
252
  }));
250
253
  }
251
- const Outer = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n\n .recommend-icon {\n display: none;\n }\n\n &.card-recommend {\n margin-right: 8px;\n\n .recommend-icon {\n display: block;\n position: absolute;\n top: -8px;\n right: -8px;\n }\n"])));
252
- const Container = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: column;\n border-radius: 12px;\n overflow: hidden;\n min-height: 400px;\n margin-top: 8px;\n white-space: nowrap;\n padding: 16px;\n\n .toc__title {\n font-weight: bolder;\n align-items: flex-start;\n }\n\n &:not(.toc) {\n color: #000;\n background-color: ", ";\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 {\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\n @media (max-width: 900px) {\n margin-left: 28px;\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.theme.palette.secondary.main, 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');
254
+ 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\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: ", ";\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 {\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.theme.palette.secondary.main, 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');
253
255
  Plan.propTypes = {
254
256
  plan: _propTypes.default.object,
255
257
  productFeatures: _propTypes.default.array,
package/lib/locales/en.js CHANGED
@@ -23,6 +23,7 @@ module.exports = {
23
23
  details: 'Details',
24
24
  previous: 'Previous',
25
25
  pay: 'Pay',
26
+ popular: 'Popular',
26
27
  space: 'Space'
27
28
  },
28
29
  license: {
package/lib/locales/zh.js CHANGED
@@ -23,6 +23,7 @@ module.exports = {
23
23
  details: '明细',
24
24
  pay: '支付',
25
25
  previous: '上一步',
26
+ popular: '推荐',
26
27
  space: '空间'
27
28
  },
28
29
  license: {
package/lib/purchase.js CHANGED
@@ -16,7 +16,9 @@ var _splideExtensionGrid = require("@splidejs/splide-extension-grid");
16
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
17
17
  var _reactRouterDom = require("react-router-dom");
18
18
  var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
19
+ var _useMeasure = _interopRequireDefault(require("react-use/lib/useMeasure"));
19
20
  var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
21
+ var _useWindowSize = _interopRequireDefault(require("react-use/lib/useWindowSize"));
20
22
  var _urlJoin = _interopRequireDefault(require("url-join"));
21
23
  require("@splidejs/splide/dist/css/splide.min.css");
22
24
  var _layout = _interopRequireDefault(require("./components/layout"));
@@ -63,7 +65,7 @@ PrevIcon.defaultProps = {
63
65
  height: "40"
64
66
  };
65
67
  function PurchasePage(_ref) {
66
- var _planState$value, _planState$value2;
68
+ var _planState$value3, _planState$value4;
67
69
  let {
68
70
  disableBack
69
71
  } = _ref;
@@ -76,19 +78,26 @@ function PurchasePage(_ref) {
76
78
  const {
77
79
  isMobile
78
80
  } = (0, _useMobile.default)();
79
- const {
80
- search
81
- } = (0, _reactRouterDom.useLocation)();
81
+ const [searchParams] = (0, _reactRouterDom.useSearchParams)();
82
82
  const [selectedPlanId, setSelectedPlanId] = (0, _react.useState)();
83
83
  const [openMorePlanPrompt, setOpenMorePlanPrompt] = (0, _react.useState)(false);
84
84
  const [splideConfig, setSplideConfig] = (0, _useSetState.default)({
85
- arrows: false
85
+ arrows: false,
86
+ width: '300px',
87
+ gap: '16px',
88
+ focus: 0
86
89
  });
87
90
  const {
88
91
  routerPrefix,
89
92
  embed,
90
93
  didPayPrefix
91
94
  } = (0, _workflow.useWorkflowContext)();
95
+ const [planListRef, {
96
+ width: planListWidth
97
+ }] = (0, _useMeasure.default)();
98
+ const {
99
+ width: windowSize
100
+ } = (0, _useWindowSize.default)();
92
101
  const api = create({
93
102
  baseURL: didPayPrefix
94
103
  });
@@ -103,13 +112,71 @@ function PurchasePage(_ref) {
103
112
  }
104
113
  return plans;
105
114
  });
115
+ const calculateConfig = (maxLength, tmpPlanLength) => {
116
+ const factor = Math.min(maxLength, tmpPlanLength);
117
+ return {
118
+ perPage: factor,
119
+ width: "".concat(factor * 300, "px"),
120
+ gap: '28px'
121
+ };
122
+ };
123
+ const selectCurrent = (perPage, curIndex) => {
124
+ // 如果每页只有一个，则在翻页的时候默认选中当前项
125
+ if (perPage === 1) {
126
+ var _planState$value$curI;
127
+ setSelectedPlanId((_planState$value$curI = planState.value[curIndex]) === null || _planState$value$curI === void 0 ? void 0 : _planState$value$curI._id);
128
+ }
129
+ };
130
+ (0, _react.useEffect)(() => {
131
+ selectCurrent(splideConfig.perPage, 0);
132
+ // eslint-disable-next-line react-hooks/exhaustive-deps
133
+ }, [splideConfig]);
134
+ (0, _react.useEffect)(() => {
135
+ var _planState$value;
136
+ if (!((_planState$value = planState.value) !== null && _planState$value !== void 0 && _planState$value.length) || typeof splideConfig.perPage === 'undefined') {
137
+ return;
138
+ }
139
+ const index = planState.value.findIndex(x => !!x.isRecommended);
140
+ const pageIndex = Math.floor(index / splideConfig.perPage);
141
+
142
+ // 如果推荐 Plan 不在第一页，则将推荐 Plan 放在第一个
143
+ if (pageIndex >= 1) {
144
+ const recommend = planState.value[index];
145
+ const copy = [...planState.value];
146
+ copy.splice(index, 1);
147
+ copy.unshift(recommend);
148
+ planState.value = copy;
149
+ }
150
+ }, [splideConfig.perPage, planState]);
151
+ (0, _react.useEffect)(() => {
152
+ var _planState$value2;
153
+ if (!((_planState$value2 = planState.value) !== null && _planState$value2 !== void 0 && _planState$value2.length)) {
154
+ return;
155
+ }
156
+ if (Number.isNaN(planListWidth)) {
157
+ return;
158
+ }
159
+ const planLength = planState.value.length;
160
+ const planListWidthRatio = planListWidth / windowSize;
161
+ if (planListWidthRatio > 0.75 || planListWidth < 960) {
162
+ setSplideConfig({
163
+ perPage: 1,
164
+ width: '280px'
165
+ });
166
+ return;
167
+ }
168
+ if (planListWidthRatio > 0.55 && planListWidthRatio <= 0.75) {
169
+ setSplideConfig(calculateConfig(2, planLength));
170
+ return;
171
+ }
172
+ setSplideConfig(calculateConfig(3, planLength));
173
+ // eslint-disable-next-line react-hooks/exhaustive-deps
174
+ }, [windowSize, planListWidth, planState, setSplideConfig, isMobile]);
106
175
  const handleSelect = planId => {
107
176
  setSelectedPlanId(planId);
108
177
  };
109
- const params = new URLSearchParams(search);
110
- params.set('planId', selectedPlanId);
111
178
  const productFeatures = [];
112
- if (!planState.loading && ((_planState$value = planState.value) === null || _planState$value === void 0 ? void 0 : _planState$value.length) > 0) {
179
+ if (!planState.loading && ((_planState$value3 = planState.value) === null || _planState$value3 === void 0 ? void 0 : _planState$value3.length) > 0) {
113
180
  // TODO: Pricing Table: 临时做法
114
181
  try {
115
182
  const {
@@ -129,13 +196,18 @@ function PurchasePage(_ref) {
129
196
  console.error('parse product feature failed:', error);
130
197
  }
131
198
  }
199
+ searchParams.set('planId', selectedPlanId);
132
200
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
133
201
  embed: embed,
134
202
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
135
203
  title: t('purchase.pageTitle'),
136
204
  disableBack: disableBack
137
205
  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_body.default, {
206
+ style: {
207
+ justifyContent: 'center'
208
+ },
138
209
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
210
+ ref: planListRef,
139
211
  className: "plan-list",
140
212
  children: planState.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
141
213
  relative: "parent",
@@ -145,15 +217,10 @@ function PurchasePage(_ref) {
145
217
  toc: true,
146
218
  productFeatures: productFeatures,
147
219
  className: "toc"
148
- }), ((_planState$value2 = planState.value) === null || _planState$value2 === void 0 ? void 0 : _planState$value2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSplide.Splide, {
149
- className: "plan-splide plan-container",
220
+ }), ((_planState$value4 = planState.value) === null || _planState$value4 === void 0 ? void 0 : _planState$value4.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactSplide.Splide, {
150
221
  extensions: {
151
222
  Grid: _splideExtensionGrid.Grid
152
223
  },
153
- onActive: (_, splide) => {
154
- var _planState$value$spli;
155
- setSelectedPlanId((_planState$value$spli = planState.value[splide.index]) === null || _planState$value$spli === void 0 ? void 0 : _planState$value$spli._id);
156
- },
157
224
  onPaginationMounted: (_, _ref2) => {
158
225
  let {
159
226
  items
@@ -164,36 +231,26 @@ function PurchasePage(_ref) {
164
231
  });
165
232
  if (showArrows) {
166
233
  setOpenMorePlanPrompt(true);
167
-
168
234
  // 3s 后隐藏
169
235
  setTimeout(() => setOpenMorePlanPrompt(false), 3000);
170
236
  }
171
237
  },
172
238
  hasTrack: false,
239
+ onMoved: (splide, index) => {
240
+ var _splide$options;
241
+ selectCurrent((_splide$options = splide.options) === null || _splide$options === void 0 ? void 0 : _splide$options.perPage, index);
242
+ },
173
243
  options: {
174
244
  pagination: true,
175
245
  arrows: splideConfig.arrows,
176
246
  classes: {
177
247
  pagination: 'splide__pagination splide__pagination-custom'
178
248
  },
179
- breakpoints: {
180
- 3600: {
181
- perPage: Math.min(4, planState.value.length),
182
- gap: '20px'
183
- },
184
- 2900: {
185
- perPage: Math.min(3, planState.value.length),
186
- gap: '20px'
187
- },
188
- 1600: {
189
- perPage: Math.min(2, planState.value.length),
190
- gap: '20px'
191
- },
192
- 1360: {
193
- perPage: 1,
194
- gap: '8px'
195
- }
196
- }
249
+ trimSpace: true,
250
+ width: splideConfig.width,
251
+ perPage: splideConfig.perPage,
252
+ gap: splideConfig.gap,
253
+ focus: splideConfig.focus
197
254
  },
198
255
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
199
256
  className: "splide__arrows",
@@ -220,6 +277,9 @@ function PurchasePage(_ref) {
220
277
  })]
221
278
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideTrack, {
222
279
  children: planState.value.map(plan => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideSlide, {
280
+ style: {
281
+ width: 'auto'
282
+ },
223
283
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
224
284
  recommend: !!plan.isRecommended,
225
285
  checked: plan._id === selectedPlanId,
@@ -241,7 +301,7 @@ function PurchasePage(_ref) {
241
301
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
242
302
  component: _reactRouterDom.Link,
243
303
  disabled: planState.loading || !selectedPlanId,
244
- to: (0, _urlJoin.default)(routerPrefix, "/purchase/checkout?".concat(params.toString())),
304
+ to: (0, _urlJoin.default)(routerPrefix, "/purchase/checkout?".concat(searchParams.toString())),
245
305
  className: "button-next",
246
306
  variant: "contained",
247
307
  children: t('common.next')
@@ -250,7 +310,7 @@ function PurchasePage(_ref) {
250
310
  })]
251
311
  });
252
312
  }
253
- const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .plan-list {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n @media (min-width: 900px) {\n margin-top: 20px;\n }\n\n @media (min-width: 680px) and (max-width: 899px) {\n justify-content: center;\n }\n\n .toc {\n width: 30%;\n min-width: 250px;\n margin-right: 20px;\n }\n\n .plan-splide {\n width: 100%;\n }\n\n .plan-container {\n @media (min-width: 1360px) and (max-width: 1599px) {\n max-width: 600px;\n }\n\n @media (min-width: 1200px) and (max-width: 1359px) {\n max-width: 300px;\n }\n\n @media (min-width: 900px) and (max-width: 1199px) {\n max-width: 250px;\n }\n\n @media (min-width: 680px) and (max-width: 899px) {\n width: 80%;\n }\n }\n\n button.splide__pagination__page.is-active {\n background: #9397a1;\n }\n }\n\n .splide__pagination-custom {\n bottom: -24px;\n }\n\n .footer {\n display: flex;\n justify-content: ", ";\n align-item: center;\n margin-top: auto;\n\n @media (max-width: ", "px) {\n flex-direction: column;\n align-items: center;\n margin-top: 24px;\n }\n\n .select-space {\n a {\n color: #000;\n }\n }\n\n .button-next {\n width: 200px;\n\n @media (max-width: ", "px) {\n width: 100%;\n margin-top: 20px;\n }\n }\n }\n"])), props => props.embed ? 'space-between' : 'flex-end', props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
313
+ const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .plan-list {\n display: flex;\n justify-content: center;\n align-items: center;\n\n @media (min-width: 900px) {\n margin-top: 20px;\n }\n\n @media (min-width: 680px) and (max-width: 899px) {\n justify-content: center;\n }\n\n .toc {\n min-width: 180px;\n margin-right: 20px;\n }\n\n button.splide__pagination__page.is-active {\n background: #9397a1;\n }\n }\n\n .splide__pagination-custom {\n bottom: -24px;\n }\n\n .footer {\n display: flex;\n justify-content: ", ";\n align-item: center;\n margin-top: auto;\n\n @media (max-width: ", "px) {\n flex-direction: column;\n align-items: center;\n }\n\n .select-space {\n a {\n color: #000;\n }\n }\n\n .button-next {\n width: 200px;\n\n @media (max-width: ", "px) {\n width: 100%;\n margin-top: 20px;\n }\n }\n }\n"])), props => props.embed ? 'space-between' : 'flex-end', props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
254
314
  PurchasePage.propTypes = {
255
315
  disableBack: _propTypes.default.bool
256
316
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blocklet/launcher-workflow",
3
- "version": "2.0.18",
3
+ "version": "2.0.19",
4
4
  "description": "Purchase components for Launcher UI",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -36,19 +36,19 @@
36
36
  "react": ">=18.1.0"
37
37
  },
38
38
  "dependencies": {
39
- "@arcblock/did-connect": "^2.5.18",
40
- "@arcblock/icons": "^2.5.18",
41
- "@arcblock/license": "^2.5.18",
42
- "@arcblock/ux": "^2.5.18",
43
- "@blocklet/launcher-layout": "2.0.18",
44
- "@blocklet/launcher-util": "2.0.18",
45
- "@blocklet/launcher-ux": "2.0.18",
39
+ "@arcblock/did-connect": "^2.5.19",
40
+ "@arcblock/icons": "^2.5.19",
41
+ "@arcblock/license": "^2.5.19",
42
+ "@arcblock/ux": "^2.5.19",
43
+ "@blocklet/launcher-layout": "2.0.19",
44
+ "@blocklet/launcher-util": "2.0.19",
45
+ "@blocklet/launcher-ux": "2.0.19",
46
46
  "@did-pay/react": "^1.9.49",
47
47
  "@emotion/react": "^11.10.6",
48
48
  "@emotion/styled": "^11.10.6",
49
- "@mui/icons-material": "^5.11.11",
50
- "@mui/material": "^5.11.15",
51
- "@ocap/util": "^1.18.65",
49
+ "@mui/icons-material": "^5.11.16",
50
+ "@mui/material": "^5.11.16",
51
+ "@ocap/util": "^1.18.67",
52
52
  "@splidejs/react-splide": "^0.7.12",
53
53
  "@splidejs/splide": "^4.1.4",
54
54
  "@splidejs/splide-extension-grid": "^0.4.1",
@@ -72,5 +72,5 @@
72
72
  "@babel/preset-react": "^7.18.6",
73
73
  "babel-plugin-inline-react-svg": "^2.0.2"
74
74
  },
75
- "gitHead": "5930cbdd6b8aff12a4964c6e200ee1fea6c853f0"
75
+ "gitHead": "175de8438e3343bd9a2b4e6df34fd78e0bfbd601"
76
76
  }
package/lib/assets/images/cup.svg DELETED
@@ -1,9 +0,0 @@
1
- <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <rect width="40" height="40" rx="20" fill="#FEAF49"/>
3
- <path opacity="0.34" fill-rule="evenodd" clip-rule="evenodd" d="M20.1504 23.6001C20.6474 23.6001 21.0504 24.003 21.0504 24.5001V26.6001C21.0504 27.0972 20.6474 27.5001 20.1504 27.5001C19.6533 27.5001 19.2504 27.0972 19.2504 26.6001V24.5001C19.2504 24.003 19.6533 23.6001 20.1504 23.6001Z" fill="white"/>
4
- <path fill-rule="evenodd" clip-rule="evenodd" d="M14.2504 29.0001C14.2504 27.403 15.5533 26.1001 17.1504 26.1001H23.1504C24.7474 26.1001 26.0504 27.403 26.0504 29.0001V30.9001H14.2504V29.0001ZM17.1504 27.9001C16.5474 27.9001 16.0504 28.3972 16.0504 29.0001V29.1001H24.2504V29.0001C24.2504 28.3972 23.7533 27.9001 23.1504 27.9001H17.1504Z" fill="white"/>
5
- <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2504 30.0001C13.2504 29.503 13.6533 29.1001 14.1504 29.1001H26.1504C26.6474 29.1001 27.0504 29.503 27.0504 30.0001C27.0504 30.4972 26.6474 30.9001 26.1504 30.9001H14.1504C13.6533 30.9001 13.2504 30.4972 13.2504 30.0001Z" fill="white"/>
6
- <path fill-rule="evenodd" clip-rule="evenodd" d="M17 10.9001C15.287 10.9001 13.9 12.2872 13.9 14.0001V17.0001C13.9 20.373 16.627 23.1001 20 23.1001C23.3729 23.1001 26.1 20.373 26.1 17.0001V14.0001C26.1 12.2872 24.7129 10.9001 23 10.9001H17ZM12.1 14.0001C12.1 11.293 14.2929 9.1001 17 9.1001H23C25.707 9.1001 27.9 11.293 27.9 14.0001V17.0001C27.9 21.3672 24.367 24.9001 20 24.9001C15.6329 24.9001 12.1 21.3672 12.1 17.0001V14.0001Z" fill="white"/>
7
- <path opacity="0.34" fill-rule="evenodd" clip-rule="evenodd" d="M12.0157 13.3333C11.3804 13.5435 10.939 14.1317 10.939 14.8502C10.939 15.8847 11.3435 16.8108 12.0282 17.6397C12.0023 17.3806 11.989 17.1173 11.989 16.8502V13.8502C11.989 13.6769 11.9979 13.5044 12.0157 13.3333ZM9.13904 14.8502C9.13904 12.9531 10.642 11.4502 12.539 11.4502H13.189C13.4924 11.4502 13.7754 11.603 13.9417 11.8567C14.108 12.1104 14.1354 12.4308 14.0144 12.709C13.8678 13.0463 13.789 13.4329 13.789 13.8502V16.8502C13.789 17.7218 13.9716 18.5411 14.2958 19.2945C14.4352 19.6185 14.3725 19.994 14.1354 20.2551C13.8984 20.5163 13.5306 20.6149 13.1947 20.5074C12.289 20.2175 11.5087 19.6927 10.9026 19.0866C10.8915 19.0754 10.8806 19.064 10.8701 19.0523C9.86325 17.9336 9.13904 16.5281 9.13904 14.8502Z" fill="white"/>
8
- <path opacity="0.34" fill-rule="evenodd" clip-rule="evenodd" d="M26.0566 11.8567C26.223 11.603 26.5059 11.4502 26.8093 11.4502H27.4593C29.3563 11.4502 30.8593 12.9531 30.8593 14.8502C30.8593 16.5281 30.1351 17.9336 29.1283 19.0523C29.1177 19.064 29.1068 19.0754 29.0957 19.0866C28.4896 19.6927 27.7094 20.2175 26.8036 20.5074C26.4677 20.6149 26.1 20.5163 25.8629 20.2551C25.6259 19.994 25.5632 19.6185 25.7026 19.2945C26.0267 18.5411 26.2093 17.7218 26.2093 16.8502V13.8502C26.2093 13.4329 26.1306 13.0463 25.9839 12.709C25.863 12.4308 25.8903 12.1104 26.0566 11.8567ZM27.9826 13.3333C28.0005 13.5044 28.0093 13.6769 28.0093 13.8502V16.8502C28.0093 17.1173 27.996 17.3806 27.9702 17.6397C28.6549 16.8108 29.0593 15.8847 29.0593 14.8502C29.0593 14.1317 28.6179 13.5435 27.9826 13.3333Z" fill="white"/>
9
- </svg>