@blocklet/launcher-workflow 2.0.29 → 2.0.31
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/checkout.js +56 -24
- package/lib/locales/en.js +2 -1
- package/lib/locales/zh.js +2 -1
- package/lib/purchase.js +1 -1
- package/package.json +11 -11
package/lib/checkout.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
|
|
9
|
+
var _util = require("@blocklet/launcher-util/lib/util");
|
|
9
10
|
var _constant = require("@blocklet/launcher-util/lib/constant");
|
|
10
11
|
var _button = _interopRequireDefault(require("@blocklet/launcher-ux/lib/button"));
|
|
11
12
|
var _useMobile = _interopRequireDefault(require("@blocklet/launcher-ux/lib/use-mobile"));
|
|
@@ -13,6 +14,7 @@ var _payment = _interopRequireDefault(require("@did-pay/react/lib/payment"));
|
|
|
13
14
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
14
15
|
var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
|
|
15
16
|
var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
|
|
17
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
16
18
|
var _reactRouterDom = require("react-router-dom");
|
|
17
19
|
var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
|
|
18
20
|
var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
|
|
@@ -29,7 +31,7 @@ var _request = _interopRequireDefault(require("./contexts/request"));
|
|
|
29
31
|
var _session = require("./contexts/session");
|
|
30
32
|
var _workflow = require("./contexts/workflow");
|
|
31
33
|
var _query = _interopRequireDefault(require("./hooks/query"));
|
|
32
|
-
var
|
|
34
|
+
var _util2 = require("./util");
|
|
33
35
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
34
36
|
var _templateObject;
|
|
35
37
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -74,8 +76,11 @@ SpaceIcon.defaultProps = {
|
|
|
74
76
|
xmlns: "http://www.w3.org/2000/svg",
|
|
75
77
|
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
76
78
|
};
|
|
77
|
-
function CheckoutPage() {
|
|
79
|
+
function CheckoutPage(_ref) {
|
|
78
80
|
var _session$user;
|
|
81
|
+
let {
|
|
82
|
+
blocklet
|
|
83
|
+
} = _ref;
|
|
79
84
|
const {
|
|
80
85
|
t,
|
|
81
86
|
locale
|
|
@@ -111,6 +116,7 @@ function CheckoutPage() {
|
|
|
111
116
|
const api = create({
|
|
112
117
|
baseURL: didPayPrefix
|
|
113
118
|
});
|
|
119
|
+
const enableBlockletAgreement = !!blocklet;
|
|
114
120
|
const planId = query.get('planId');
|
|
115
121
|
const state = (0, _useAsync.default)(async () => {
|
|
116
122
|
try {
|
|
@@ -146,7 +152,7 @@ function CheckoutPage() {
|
|
|
146
152
|
setPaying(false);
|
|
147
153
|
};
|
|
148
154
|
const handlePay = async () => {
|
|
149
|
-
if (!agree) {
|
|
155
|
+
if (enableBlockletAgreement && !agree) {
|
|
150
156
|
setShowAgreeHint(true);
|
|
151
157
|
setTimeout(() => {
|
|
152
158
|
setShowAgreeHint(false);
|
|
@@ -159,28 +165,41 @@ function CheckoutPage() {
|
|
|
159
165
|
return;
|
|
160
166
|
}
|
|
161
167
|
setPaying(true);
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
168
|
+
if ((paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.provider.name) === 'ocap') {
|
|
169
|
+
const paymentTokenURL = "/did/purchase/token?productId=".concat(planId, "&paymentMethodId=").concat(paymentMethod._id);
|
|
170
|
+
const {
|
|
171
|
+
data
|
|
172
|
+
} = await api.get(paymentTokenURL);
|
|
173
|
+
session.login({
|
|
174
|
+
onSuccess: (results, decrypt) => {
|
|
175
|
+
const [, purchaseResult] = results;
|
|
176
|
+
return handlePaid(purchaseResult, decrypt);
|
|
177
|
+
},
|
|
178
|
+
onCancel: () => handleCancelPay(),
|
|
179
|
+
extraParams: {
|
|
180
|
+
nw: data.url,
|
|
181
|
+
forceConnected: false,
|
|
182
|
+
saveConnect: false
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
166
187
|
session.login({
|
|
167
|
-
onSuccess: (
|
|
168
|
-
|
|
169
|
-
return handlePaid(purchaseResult, decrypt);
|
|
188
|
+
onSuccess: () => {
|
|
189
|
+
setShowPayment(true);
|
|
170
190
|
},
|
|
171
191
|
onCancel: () => handleCancelPay(),
|
|
172
192
|
extraParams: {
|
|
173
|
-
nw: data.url,
|
|
174
193
|
forceConnected: false,
|
|
175
194
|
saveConnect: false
|
|
176
195
|
}
|
|
177
196
|
});
|
|
178
197
|
};
|
|
179
|
-
const handlePaid = async
|
|
198
|
+
const handlePaid = async _ref2 => {
|
|
180
199
|
let {
|
|
181
200
|
nftId
|
|
182
|
-
} =
|
|
183
|
-
const nftState = await (0,
|
|
201
|
+
} = _ref2;
|
|
202
|
+
const nftState = await (0, _util2.getAsset)(window.blocklet.CHAIN_HOST, nftId);
|
|
184
203
|
if ((nftState.tags || []).includes(_constant.NFT_TYPE_SERVERLESS)) {
|
|
185
204
|
if (!embed) {
|
|
186
205
|
setShowPaidDialog({
|
|
@@ -206,7 +225,7 @@ function CheckoutPage() {
|
|
|
206
225
|
if (!paymentMethod) {
|
|
207
226
|
return '';
|
|
208
227
|
}
|
|
209
|
-
return (0,
|
|
228
|
+
return (0, _util2.getPrice)(prices, paymentMethod.provider.name);
|
|
210
229
|
};
|
|
211
230
|
const toggleAgreement = () => setAgree(!agree);
|
|
212
231
|
const {
|
|
@@ -215,6 +234,7 @@ function CheckoutPage() {
|
|
|
215
234
|
} = state.loading ? {} : state.value;
|
|
216
235
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
|
|
217
236
|
mobileSize: mobileSize,
|
|
237
|
+
enableBlockletAgreement: enableBlockletAgreement,
|
|
218
238
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
|
|
219
239
|
title: t('checkout.pageTitle')
|
|
220
240
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_body.default, {
|
|
@@ -244,7 +264,7 @@ function CheckoutPage() {
|
|
|
244
264
|
})]
|
|
245
265
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
246
266
|
className: "price",
|
|
247
|
-
children: (0,
|
|
267
|
+
children: (0, _util2.getPrice)(plan.prices, 'ocap')
|
|
248
268
|
})]
|
|
249
269
|
})]
|
|
250
270
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
@@ -260,7 +280,7 @@ function CheckoutPage() {
|
|
|
260
280
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
261
281
|
children: t('checkout.orderTotal')
|
|
262
282
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
263
|
-
children: (0,
|
|
283
|
+
children: (0, _util2.getPrice)((plan === null || plan === void 0 ? void 0 : plan.prices) || [], 'ocap')
|
|
264
284
|
})]
|
|
265
285
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
266
286
|
className: "total-payment space",
|
|
@@ -307,21 +327,27 @@ function CheckoutPage() {
|
|
|
307
327
|
})]
|
|
308
328
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_footer.default, {
|
|
309
329
|
className: "footer",
|
|
310
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
330
|
+
children: [enableBlockletAgreement && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
311
331
|
className: "agreement",
|
|
312
332
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
|
|
313
333
|
checked: agree,
|
|
314
334
|
showHint: showAgreeHint,
|
|
315
335
|
onClick: () => toggleAgreement(),
|
|
316
|
-
label: /*#__PURE__*/(0, _jsxRuntime.
|
|
317
|
-
|
|
336
|
+
label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
337
|
+
style: {
|
|
338
|
+
display: 'flex',
|
|
339
|
+
alignItems: 'center'
|
|
340
|
+
},
|
|
341
|
+
children: [t('common.agreeTo'), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
318
342
|
className: "agreement-label",
|
|
319
343
|
onClick: e => {
|
|
320
344
|
e.stopPropagation();
|
|
321
345
|
setShowAgreement(true);
|
|
322
346
|
},
|
|
323
|
-
children:
|
|
324
|
-
|
|
347
|
+
children: t('checkout.agreement', {
|
|
348
|
+
name: (0, _util.getBlockletDisplayName)(blocklet)
|
|
349
|
+
})
|
|
350
|
+
})]
|
|
325
351
|
})
|
|
326
352
|
})
|
|
327
353
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -365,7 +391,7 @@ function CheckoutPage() {
|
|
|
365
391
|
onCancel: () => setShowPaidDialog(false),
|
|
366
392
|
showCancelButton: false,
|
|
367
393
|
onConfirm: () => {
|
|
368
|
-
const url = new URL(
|
|
394
|
+
const url = new URL(_util2.BLOCKLET_STORE_URL);
|
|
369
395
|
url.searchParams.set('launcher_nft_id', showPaidDialog.nftId);
|
|
370
396
|
window.location = url.href;
|
|
371
397
|
},
|
|
@@ -380,6 +406,12 @@ function CheckoutPage() {
|
|
|
380
406
|
})]
|
|
381
407
|
});
|
|
382
408
|
}
|
|
383
|
-
|
|
409
|
+
CheckoutPage.propTypes = {
|
|
410
|
+
blocklet: _propTypes.default.object
|
|
411
|
+
};
|
|
412
|
+
CheckoutPage.defaultProps = {
|
|
413
|
+
blocklet: null
|
|
414
|
+
};
|
|
415
|
+
const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .header {\n font-weight: bolder;\n font-size: 1.2em;\n }\n\n .divider {\n margin-top: 20px;\n border: 1.2px solid #f6f6f6;\n }\n\n .skeleton {\n height: 64px;\n }\n\n .space {\n margin-top: 18px;\n }\n\n .total-order {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-weight: bolder;\n }\n\n .total-payment {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: ", ";\n font-size: 22px;\n font-weight: bolder;\n }\n\n .details {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 40px;\n\n .basic {\n display: flex;\n height: 40px;\n\n .basic-info {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-left: 8px;\n\n .title {\n font-weight: bolder;\n }\n\n .sub-title {\n color: grey;\n font-size: 0.8em;\n }\n }\n }\n\n .period {\n display: flex;\n align-items: center;\n\n .info-icon {\n color: grey;\n margin-left: 8px;\n }\n }\n }\n\n .payment-method {\n background-color: #fbfbfb;\n padding: 18px;\n\n .payment-method__title {\n color: #9397a1;\n }\n\n .payment-method__list {\n margin-top: 8px;\n }\n }\n\n .footer {\n display: flex;\n align-items: center;\n justify-content: ", ";\n\n .agreement {\n .agreement-label {\n margin-left: 4px;\n color: ", ";\n text-decoration: underline;\n }\n }\n\n @media (min-width: ", ") {\n .actions {\n .button-pay {\n width: 200px;\n }\n }\n }\n\n @media (max-width: ", ") {\n flex-direction: column;\n align-items: center;\n\n .actions {\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 20px;\n\n & > button {\n width: 48%;\n }\n }\n }\n }\n"])), props => props.theme.palette.primary.main, props => props.enableBlockletAgreement ? 'space-between' : 'flex-end', props => props.theme.palette.primary.main, props => props.mobileSize, props => props.mobileSize);
|
|
384
416
|
var _default = CheckoutPage;
|
|
385
417
|
exports.default = _default;
|
package/lib/locales/en.js
CHANGED
package/lib/locales/zh.js
CHANGED
package/lib/purchase.js
CHANGED
|
@@ -317,7 +317,7 @@ function PurchasePage(_ref) {
|
|
|
317
317
|
})]
|
|
318
318
|
});
|
|
319
319
|
}
|
|
320
|
-
const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .container-inner {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\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 padding-top: 16px;\n\n > * {\n margin: 0 8px;\n ", " {\n margin: 0 16px;\n }\n }\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.up('md'), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
|
|
320
|
+
const Container = (0, _styled.default)(_layout.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .container-inner {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\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 padding-top: 16px;\n\n > * {\n margin: 0 8px;\n ", " {\n margin: 0 16px;\n }\n }\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 & > a:hover {\n text-decoration: underline !important;\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.up('md'), props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm);
|
|
321
321
|
PurchasePage.propTypes = {
|
|
322
322
|
disableBack: _propTypes.default.bool
|
|
323
323
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/launcher-workflow",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.31",
|
|
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.
|
|
40
|
-
"@arcblock/icons": "^2.5.
|
|
41
|
-
"@arcblock/license": "^2.5.
|
|
42
|
-
"@arcblock/ux": "^2.5.
|
|
43
|
-
"@blocklet/launcher-layout": "2.0.
|
|
44
|
-
"@blocklet/launcher-util": "2.0.
|
|
45
|
-
"@blocklet/launcher-ux": "2.0.
|
|
39
|
+
"@arcblock/did-connect": "^2.5.25",
|
|
40
|
+
"@arcblock/icons": "^2.5.25",
|
|
41
|
+
"@arcblock/license": "^2.5.25",
|
|
42
|
+
"@arcblock/ux": "^2.5.25",
|
|
43
|
+
"@blocklet/launcher-layout": "2.0.31",
|
|
44
|
+
"@blocklet/launcher-util": "2.0.31",
|
|
45
|
+
"@blocklet/launcher-ux": "2.0.31",
|
|
46
46
|
"@did-pay/react": "^1.9.51",
|
|
47
47
|
"@emotion/react": "^11.10.6",
|
|
48
48
|
"@emotion/styled": "^11.10.6",
|
|
49
49
|
"@mui/icons-material": "^5.11.16",
|
|
50
|
-
"@mui/material": "^5.12.
|
|
51
|
-
"@ocap/util": "^1.18.
|
|
50
|
+
"@mui/material": "^5.12.1",
|
|
51
|
+
"@ocap/util": "^1.18.72",
|
|
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": "
|
|
75
|
+
"gitHead": "a2504029bf7037ff719841a011b49ef85fb36cf2"
|
|
76
76
|
}
|