@blocklet/launcher-workflow 2.0.1 → 2.0.3
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.
- package/lib/components/layout/index.js +1 -1
- package/lib/components/plan.js +2 -2
- package/lib/purchase.js +62 -68
- package/package.json +8 -6
|
@@ -33,4 +33,4 @@ function Layout(_ref) {
|
|
|
33
33
|
Layout.propTypes = {
|
|
34
34
|
children: _propTypes.default.any.isRequired
|
|
35
35
|
};
|
|
36
|
-
const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n padding: 0 32px 32px;\n
|
|
36
|
+
const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n padding: 0 32px 32px;\n"])));
|
package/lib/components/plan.js
CHANGED
|
@@ -261,8 +261,8 @@ function Plan(_ref2) {
|
|
|
261
261
|
})]
|
|
262
262
|
}));
|
|
263
263
|
}
|
|
264
|
-
const Outer = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n .recommend-icon {\n display: none;\n }\n\n &.card-recommend {\n .recommend-icon {\n display: block;\n position: absolute;\n top: -8px;\n right:
|
|
265
|
-
const Container = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: column;\n border-radius: 12px;\n
|
|
264
|
+
const Outer = _styled.default.div(_templateObject || (_templateObject = _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"])));
|
|
265
|
+
const Container = _styled.default.div(_templateObject2 || (_templateObject2 = _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 (min-width: ", "px) {\n margin-left: 28px;\n }\n\n @media (max-width: ", "px) {\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.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md, props => props.checked || props.hovered ? 'rgba(255, 255, 255, 0.2)' : '#f6f6f6');
|
|
266
266
|
Plan.propTypes = {
|
|
267
267
|
plan: _propTypes.default.object,
|
|
268
268
|
productFeatures: _propTypes.default.array,
|
package/lib/purchase.js
CHANGED
|
@@ -8,13 +8,16 @@ var _react = require("react");
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _reactRouterDom = require("react-router-dom");
|
|
10
10
|
var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
|
|
11
|
-
var
|
|
11
|
+
var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
|
|
12
12
|
var _urlJoin = _interopRequireDefault(require("url-join"));
|
|
13
|
+
var _splideExtensionGrid = require("@splidejs/splide-extension-grid");
|
|
14
|
+
var _reactSplide = require("@splidejs/react-splide");
|
|
13
15
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
14
16
|
var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
|
|
17
|
+
var _Center = _interopRequireDefault(require("@arcblock/ux/lib/Center"));
|
|
15
18
|
var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
|
|
16
|
-
var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
|
|
17
19
|
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
|
|
20
|
+
require("@splidejs/splide/dist/css/splide.min.css");
|
|
18
21
|
var _body = _interopRequireDefault(require("./components/layout/body"));
|
|
19
22
|
var _plan = _interopRequireDefault(require("./components/plan"));
|
|
20
23
|
var _layout = _interopRequireDefault(require("./components/layout"));
|
|
@@ -27,11 +30,6 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
27
30
|
var _templateObject;
|
|
28
31
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
32
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
30
|
-
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; }
|
|
31
|
-
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; }
|
|
32
|
-
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; }
|
|
33
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
34
|
-
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); }
|
|
35
33
|
function PurchasePage(_ref) {
|
|
36
34
|
var _planState$value;
|
|
37
35
|
let {
|
|
@@ -50,6 +48,9 @@ function PurchasePage(_ref) {
|
|
|
50
48
|
search
|
|
51
49
|
} = (0, _reactRouterDom.useLocation)();
|
|
52
50
|
const [selectedPlanId, setSelectedPlanId] = (0, _react.useState)();
|
|
51
|
+
const [splideConfig, setSplideConfig] = (0, _useSetState.default)({
|
|
52
|
+
arrows: false
|
|
53
|
+
});
|
|
53
54
|
const {
|
|
54
55
|
routerPrefix,
|
|
55
56
|
embed,
|
|
@@ -71,29 +72,6 @@ function PurchasePage(_ref) {
|
|
|
71
72
|
const handleSelect = planId => {
|
|
72
73
|
setSelectedPlanId(planId);
|
|
73
74
|
};
|
|
74
|
-
const carouselProps = {
|
|
75
|
-
autoPlay: false,
|
|
76
|
-
animation: 'slide',
|
|
77
|
-
swipe: true,
|
|
78
|
-
index: 0,
|
|
79
|
-
indicators: true,
|
|
80
|
-
fullHeightHover: true,
|
|
81
|
-
cycleNavigation: false,
|
|
82
|
-
navButtonsWrapperProps: {
|
|
83
|
-
className: 'nav-buttons-wrapper'
|
|
84
|
-
},
|
|
85
|
-
navButtonsProps: {
|
|
86
|
-
style: {
|
|
87
|
-
margin: '0 0'
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
onChange: index => {
|
|
91
|
-
if (index < 0 || index > planState.value.length - 1) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
handleSelect(planState.value[index]._id);
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
75
|
const params = new URLSearchParams(search);
|
|
98
76
|
params.set('planId', selectedPlanId);
|
|
99
77
|
const productFeatures = [];
|
|
@@ -125,50 +103,66 @@ function PurchasePage(_ref) {
|
|
|
125
103
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_body.default, {
|
|
126
104
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
127
105
|
className: "plan-list",
|
|
128
|
-
children: planState.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
106
|
+
children: planState.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Center.default, {
|
|
107
|
+
relative: "parent",
|
|
108
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
|
|
109
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
110
|
+
children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
|
|
111
|
+
toc: true,
|
|
112
|
+
productFeatures: productFeatures,
|
|
113
|
+
className: "toc"
|
|
114
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.Splide, {
|
|
115
|
+
className: "plan-splide",
|
|
116
|
+
extensions: {
|
|
117
|
+
Grid: _splideExtensionGrid.Grid
|
|
118
|
+
},
|
|
119
|
+
onPaginationMounted: (_, _ref2) => {
|
|
120
|
+
let {
|
|
121
|
+
items
|
|
122
|
+
} = _ref2;
|
|
123
|
+
setSplideConfig({
|
|
124
|
+
arrows: items.length > 1
|
|
125
|
+
});
|
|
126
|
+
},
|
|
127
|
+
onActive: (_, _ref3) => {
|
|
128
|
+
let {
|
|
129
|
+
index
|
|
130
|
+
} = _ref3;
|
|
131
|
+
handleSelect(planState.value[index]._id);
|
|
132
|
+
},
|
|
133
|
+
options: {
|
|
134
|
+
pagination: true,
|
|
135
|
+
arrows: splideConfig.arrows,
|
|
136
|
+
classes: {
|
|
137
|
+
pagination: 'splide__pagination splide__pagination-custom'
|
|
138
|
+
},
|
|
139
|
+
breakpoints: {
|
|
140
|
+
3600: {
|
|
141
|
+
perPage: Math.min(4, planState.value.length),
|
|
142
|
+
gap: '20px'
|
|
136
143
|
},
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
lg: 4,
|
|
153
|
-
xl: 3,
|
|
154
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
|
|
155
|
-
toc: true,
|
|
156
|
-
productFeatures: productFeatures
|
|
157
|
-
})
|
|
158
|
-
}, "toc"), (planState.value || []).map((plan, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
|
|
159
|
-
item: true,
|
|
160
|
-
xs: 12,
|
|
161
|
-
sm: 12,
|
|
162
|
-
md: 4,
|
|
163
|
-
lg: 4,
|
|
164
|
-
xl: 3,
|
|
144
|
+
2400: {
|
|
145
|
+
perPage: Math.min(3, planState.value.length),
|
|
146
|
+
gap: '20px'
|
|
147
|
+
},
|
|
148
|
+
1400: {
|
|
149
|
+
perPage: Math.min(2, planState.value.length),
|
|
150
|
+
gap: '20px'
|
|
151
|
+
},
|
|
152
|
+
768: {
|
|
153
|
+
perPage: 1,
|
|
154
|
+
gap: '8px'
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
children: (planState.value || []).map((plan, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSplide.SplideSlide, {
|
|
165
159
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plan.default, {
|
|
166
160
|
recommend: index === 0,
|
|
167
161
|
checked: plan._id === selectedPlanId,
|
|
168
162
|
plan: plan,
|
|
169
163
|
onClick: () => handleSelect(plan._id)
|
|
170
164
|
})
|
|
171
|
-
}, plan._id))
|
|
165
|
+
}, plan._id))
|
|
172
166
|
})]
|
|
173
167
|
})
|
|
174
168
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer.default, {
|
|
@@ -191,7 +185,7 @@ function PurchasePage(_ref) {
|
|
|
191
185
|
})]
|
|
192
186
|
});
|
|
193
187
|
}
|
|
194
|
-
const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .
|
|
188
|
+
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 margin-top: 20px;\n\n .toc {\n width: 30%;\n margin-right: 20px;\n }\n\n .plan-splide {\n width: 100%;\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);
|
|
195
189
|
PurchasePage.propTypes = {
|
|
196
190
|
disableBack: _propTypes.default.bool
|
|
197
191
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/launcher-workflow",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"description": "Purchase components for Launcher UI",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -40,15 +40,18 @@
|
|
|
40
40
|
"@arcblock/icons": "^2.4.68",
|
|
41
41
|
"@arcblock/license": "^2.4.68",
|
|
42
42
|
"@arcblock/ux": "^2.4.68",
|
|
43
|
-
"@blocklet/launcher-layout": "2.0.
|
|
44
|
-
"@blocklet/launcher-util": "2.0.
|
|
45
|
-
"@blocklet/launcher-ux": "2.0.
|
|
43
|
+
"@blocklet/launcher-layout": "2.0.3",
|
|
44
|
+
"@blocklet/launcher-util": "2.0.3",
|
|
45
|
+
"@blocklet/launcher-ux": "2.0.3",
|
|
46
46
|
"@did-pay/react": "^1.9.38",
|
|
47
47
|
"@emotion/react": "^11.10.5",
|
|
48
48
|
"@emotion/styled": "^11.10.5",
|
|
49
49
|
"@mui/icons-material": "^5.11.0",
|
|
50
50
|
"@mui/material": "^5.11.8",
|
|
51
51
|
"@ocap/util": "^1.18.39",
|
|
52
|
+
"@splidejs/react-splide": "^0.7.12",
|
|
53
|
+
"@splidejs/splide": "^4.1.4",
|
|
54
|
+
"@splidejs/splide-extension-grid": "^0.4.1",
|
|
52
55
|
"@stripe/react-stripe-js": "^1.16.4",
|
|
53
56
|
"@stripe/stripe-js": "^1.46.0",
|
|
54
57
|
"axios": "^0.26.1",
|
|
@@ -58,7 +61,6 @@
|
|
|
58
61
|
"lodash.throttle": "^4.1.1",
|
|
59
62
|
"prop-types": "^15.8.1",
|
|
60
63
|
"react-lottie-player": "^1.5.4",
|
|
61
|
-
"react-material-ui-carousel": "^3.4.2",
|
|
62
64
|
"react-router-dom": "^6.8.1",
|
|
63
65
|
"react-use": "^17.4.0",
|
|
64
66
|
"url-join": "^4.0.1"
|
|
@@ -70,5 +72,5 @@
|
|
|
70
72
|
"@babel/preset-react": "^7.18.6",
|
|
71
73
|
"babel-plugin-inline-react-svg": "^2.0.1"
|
|
72
74
|
},
|
|
73
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "a296cb39be055fc2797a360505bfc7b662b09b92"
|
|
74
76
|
}
|