@blocklet/launcher-ux 2.2.53 → 2.2.55

package/es/button/index.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import Button from '@arcblock/ux/lib/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function WrappedButton({
   children,
   loading,

package/es/check-box/index.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import CheckIcon from '@mui/icons-material/Check';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function CheckBox({
   children,
   checked,

package/es/payment/checkout/on-demand.js

@@ -0,0 +1,364 @@
+import DidAddress from '@arcblock/ux/lib/DID';
+import formatError from '@blocklet/launcher-util/es/format-error';
+import { getBlockletUrlOnStore } from '@blocklet/launcher-util/lib/util';
+import { CheckoutForm, PaymentProvider, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import InfoIcon from '@mui/icons-material/InfoOutlined';
+import { Alert, Avatar, List, ListItem, ListItemAvatar, ListItemText, Tooltip, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useSetState } from 'ahooks';
+import PropTypes from 'prop-types';
+import useAsync from 'react-use/lib/useAsync';
+import useMobile from '../../use-mobile';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export default function CheckoutOnDemand({
+  launchSessionId,
+  handlePaid,
+  components,
+  blockletStoreURL,
+  api,
+  connectApi,
+  checkoutPath,
+  session,
+  t,
+  locale
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    children: /*#__PURE__*/_jsx(PaymentProvider, {
+      session: session,
+      connect: connectApi,
+      children: /*#__PURE__*/_jsx(Component, {
+        api: api,
+        launchSessionId: launchSessionId,
+        handlePaid: handlePaid,
+        checkoutPath: checkoutPath,
+        components: components,
+        blockletStoreURL: blockletStoreURL,
+        t: t,
+        locale: locale
+      })
+    })
+  });
+}
+const propTypes = {
+  launchSessionId: PropTypes.string.isRequired,
+  handlePaid: PropTypes.func.isRequired,
+  components: PropTypes.array.isRequired,
+  blockletStoreURL: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
+  locale: PropTypes.string.isRequired,
+  api: PropTypes.object.isRequired,
+  checkoutPath: PropTypes.string.isRequired
+};
+CheckoutOnDemand.propTypes = {
+  ...propTypes,
+  connectApi: PropTypes.func.isRequired,
+  session: PropTypes.object.isRequired
+};
+Component.propTypes = propTypes;
+function Component({
+  launchSessionId,
+  handlePaid,
+  components: tempComponents,
+  blockletStoreURL,
+  api,
+  checkoutPath,
+  t,
+  locale
+}) {
+  const {
+    getCurrency
+  } = usePaymentContext();
+  const [state, setState] = useSetState({
+    unitPrice: '',
+    totalPrice: ''
+  });
+  const {
+    isMobile
+  } = useMobile();
+  const components = (tempComponents || []).reduce((acc, x) => {
+    if (acc.findIndex(y => y.did === x.did) === -1) {
+      acc.push(x);
+    }
+    return acc;
+  }, []).sort((x, y) => {
+    if (x.title > y.title) {
+      return 1;
+    }
+    if (x.title < y.title) {
+      return -1;
+    }
+    return 0;
+  });
+  const quantity = components?.length || 1;
+  const checkoutState = useAsync(async () => {
+    const {
+      data
+    } = await api.post(checkoutPath, {
+      launchSessionId
+    });
+    return {
+      checkoutSessionId: data.checkoutSessionId,
+      price: data.price
+    };
+  });
+  if (checkoutState.loading) {
+    return /*#__PURE__*/_jsx(CircularProgress, {});
+  }
+  if (checkoutState.error) {
+    return /*#__PURE__*/_jsx(Alert, {
+      severity: "error",
+      children: formatError(checkoutState.error)
+    });
+  }
+  const {
+    checkoutSessionId,
+    price
+  } = checkoutState.value;
+  const handleChange = ({
+    payment_currency: currencyId
+  } = {}) => {
+    try {
+      const currency = getCurrency(currencyId);
+      const UNIT_LABEL_PLACEHOLDER = 'UNIT_LABEL_TEMPLATES';
+      let totalPrice = formatPrice(price, currency, UNIT_LABEL_PLACEHOLDER, quantity, true, locale);
+      totalPrice = totalPrice?.replace(new RegExp(`${UNIT_LABEL_PLACEHOLDER}\\s+\\/*`), '');
+      let unitPrice = formatPrice(price, currency, UNIT_LABEL_PLACEHOLDER, 1, true, locale);
+      unitPrice = unitPrice?.replace(new RegExp(`${UNIT_LABEL_PLACEHOLDER}\\s+\\/*`), '');
+      setState({
+        unitPrice,
+        totalPrice
+      });
+    } catch (error) {
+      console.error('calculate failed error', error);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: isMobile ? '32px' : '64px',
+      height: '100%',
+      width: '100%',
+      '@media (max-width: 1200px)': {
+        flexDirection: 'column',
+        justifyContent: 'flex-start'
+      }
+    },
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px',
+        height: '100%',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px'
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          sx: {
+            fontWeight: 'bold'
+          },
+          children: [components?.length <= 1 && t('purchase.componentCount', {
+            count: components?.length
+          }), components?.length > 1 && t('purchase.componentsCount', {
+            count: components?.length
+          })]
+        }), /*#__PURE__*/_jsx(List, {
+          dense: true,
+          disablePadding: true,
+          sx: {
+            maxHeight: '480px',
+            overflowY: 'auto',
+            '&::-webkit-scrollbar': {
+              width: '6px'
+            },
+            '&::-webkit-scrollbar-track': {
+              backgroundColor: 'transparent'
+            },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: '#ccc',
+              borderRadius: '3px'
+            },
+            '@media (max-width: 1200px)': {
+              maxHeight: 'unset'
+            }
+          },
+          children: components.map(({
+            did,
+            title,
+            logo
+          }) => {
+            let props = {};
+            if (blockletStoreURL) {
+              props = {
+                component: 'a',
+                href: getBlockletUrlOnStore({
+                  did,
+                  baseUrl: blockletStoreURL
+                })
+              };
+            }
+            return /*#__PURE__*/_jsxs(ListItem, {
+              sx: {
+                cursor: 'pointer',
+                paddingRight: '4px',
+                '&:hover': {
+                  backgroundColor: 'secondary.main',
+                  borderRadius: '4px'
+                }
+              },
+              disablePadding: true,
+              disableGutters: true,
+              alignItems: "flex-start",
+              target: "_blank",
+              ...props,
+              children: [/*#__PURE__*/_jsx(ListItemAvatar, {
+                children: /*#__PURE__*/_jsx(Avatar, {
+                  alt: title,
+                  variant: "rounded",
+                  src: logo
+                })
+              }), /*#__PURE__*/_jsx(ListItemText, {
+                primary: /*#__PURE__*/_jsx(Typography, {
+                  children: title
+                }),
+                secondary: /*#__PURE__*/_jsxs(Box, {
+                  sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between'
+                  },
+                  children: [/*#__PURE__*/_jsx(DidAddress, {
+                    copyable: false,
+                    did: did
+                  }), /*#__PURE__*/_jsx(Typography, {
+                    sx: {
+                      color: 'primary.main'
+                    },
+                    children: state.unitPrice
+                  })]
+                })
+              })]
+            }, did);
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px'
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontWeight: 'bold'
+          },
+          children: t('common.price')
+        }), /*#__PURE__*/_jsx(List, {
+          dense: true,
+          disablePadding: true,
+          children: [{
+            label: t('checkout.estimatedCost'),
+            value: state.totalPrice,
+            hint: t('checkout.estimatedCostHint')
+          }].map(item => {
+            return /*#__PURE__*/_jsx(ListItem, {
+              sx: {
+                maxHeight: '28px'
+              },
+              disablePadding: true,
+              disableGutters: true,
+              secondaryAction: /*#__PURE__*/_jsx(Typography, {
+                color: "primary.main",
+                sx: {
+                  paddingRight: '4px'
+                },
+                children: item.value
+              }),
+              children: /*#__PURE__*/_jsx(ListItemText, {
+                primary: /*#__PURE__*/_jsxs(_Fragment, {
+                  children: [!item.hint && /*#__PURE__*/_jsx(Typography, {
+                    children: item.label
+                  }), item.hint && /*#__PURE__*/_jsx(Box, {
+                    component: "span",
+                    sx: {
+                      display: 'flex',
+                      alignItems: 'center'
+                    },
+                    children: /*#__PURE__*/_jsx(Tooltip, {
+                      title: item.hint,
+                      placement: "right",
+                      children: /*#__PURE__*/_jsxs(Box, {
+                        component: "span",
+                        sx: {
+                          display: 'flex',
+                          alignItems: 'center',
+                          cursor: 'pointer'
+                        },
+                        children: [/*#__PURE__*/_jsx(Typography, {
+                          children: item.label
+                        }), /*#__PURE__*/_jsx(InfoIcon, {
+                          fontSize: "small",
+                          sx: {
+                            marginLeft: '2px'
+                          }
+                        })]
+                      })
+                    })
+                  })]
+                })
+              })
+            }, item.label);
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        width: '100%',
+        '& .cko-container': {
+          minWidth: '100% !important',
+          maxWidth: '100% !important'
+        },
+        '& .cko-payment': {
+          gap: '24px'
+        },
+        '& .cko-payment-contact': {
+          gap: '12px',
+          '& >div': {
+            marginBottom: 0
+          }
+        },
+        '& .cko-payment-form': {
+          marginTop: 0
+        },
+        '& .cko-payment-methods': {
+          gap: '12px',
+          marginTop: 0,
+          '&>p': {
+            marginBottom: 0
+          }
+        },
+        '& .cko-payment-submit': {
+          marginTop: 0,
+          '& button': {
+            fontSize: '1rem !important'
+          }
+        }
+      },
+      children: /*#__PURE__*/_jsx(CheckoutForm, {
+        id: checkoutSessionId,
+        mode: "inline-minimal",
+        onPaid: handlePaid,
+        onChange: handleChange
+      })
+    })]
+  });
+}

package/es/progress-message/index.js

@@ -4,8 +4,7 @@ import styled from '@emotion/styled';
 import SmallCircleProgress from '../small-circle-progress';
 
 // autoGrowth 逐渐增长到相应步骤所需的时间
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function ProgressMessage({
   steps,
   stepIndex,

package/es/small-circle-progress/index.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import CircularProgress from '@mui/material/CircularProgress';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function SmallCircleProgress({
   value,
   size,

package/lib/button/index.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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(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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+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(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; }
 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; }

package/lib/check-box/index.js

@@ -15,7 +15,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 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(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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+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(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; }
 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; }

package/lib/payment/checkout/on-demand.js

@@ -0,0 +1,380 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CheckoutOnDemand;
+var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _formatError = _interopRequireDefault(require("@blocklet/launcher-util/es/format-error"));
+var _util = require("@blocklet/launcher-util/lib/util");
+var _paymentReact = require("@blocklet/payment-react");
+var _InfoOutlined = _interopRequireDefault(require("@mui/icons-material/InfoOutlined"));
+var _material = require("@mui/material");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _ahooks = require("ahooks");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useAsync = _interopRequireDefault(require("react-use/lib/useAsync"));
+var _useMobile = _interopRequireDefault(require("../../use-mobile"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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(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; }
+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 CheckoutOnDemand(_ref) {
+  let {
+    launchSessionId,
+    handlePaid,
+    components,
+    blockletStoreURL,
+    api,
+    connectApi,
+    checkoutPath,
+    session,
+    t,
+    locale
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.PaymentProvider, {
+      session: session,
+      connect: connectApi,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+        api: api,
+        launchSessionId: launchSessionId,
+        handlePaid: handlePaid,
+        checkoutPath: checkoutPath,
+        components: components,
+        blockletStoreURL: blockletStoreURL,
+        t: t,
+        locale: locale
+      })
+    })
+  });
+}
+const propTypes = {
+  launchSessionId: _propTypes.default.string.isRequired,
+  handlePaid: _propTypes.default.func.isRequired,
+  components: _propTypes.default.array.isRequired,
+  blockletStoreURL: _propTypes.default.string.isRequired,
+  t: _propTypes.default.func.isRequired,
+  locale: _propTypes.default.string.isRequired,
+  api: _propTypes.default.object.isRequired,
+  checkoutPath: _propTypes.default.string.isRequired
+};
+CheckoutOnDemand.propTypes = _objectSpread(_objectSpread({}, propTypes), {}, {
+  connectApi: _propTypes.default.func.isRequired,
+  session: _propTypes.default.object.isRequired
+});
+Component.propTypes = propTypes;
+function Component(_ref2) {
+  let {
+    launchSessionId,
+    handlePaid,
+    components: tempComponents,
+    blockletStoreURL,
+    api,
+    checkoutPath,
+    t,
+    locale
+  } = _ref2;
+  const {
+    getCurrency
+  } = (0, _paymentReact.usePaymentContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    unitPrice: '',
+    totalPrice: ''
+  });
+  const {
+    isMobile
+  } = (0, _useMobile.default)();
+  const components = (tempComponents || []).reduce((acc, x) => {
+    if (acc.findIndex(y => y.did === x.did) === -1) {
+      acc.push(x);
+    }
+    return acc;
+  }, []).sort((x, y) => {
+    if (x.title > y.title) {
+      return 1;
+    }
+    if (x.title < y.title) {
+      return -1;
+    }
+    return 0;
+  });
+  const quantity = (components === null || components === void 0 ? void 0 : components.length) || 1;
+  const checkoutState = (0, _useAsync.default)(async () => {
+    const {
+      data
+    } = await api.post(checkoutPath, {
+      launchSessionId
+    });
+    return {
+      checkoutSessionId: data.checkoutSessionId,
+      price: data.price
+    };
+  });
+  if (checkoutState.loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {});
+  }
+  if (checkoutState.error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "error",
+      children: (0, _formatError.default)(checkoutState.error)
+    });
+  }
+  const {
+    checkoutSessionId,
+    price
+  } = checkoutState.value;
+  const handleChange = function handleChange() {
+    let {
+      payment_currency: currencyId
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    try {
+      var _totalPrice, _unitPrice;
+      const currency = getCurrency(currencyId);
+      const UNIT_LABEL_PLACEHOLDER = 'UNIT_LABEL_TEMPLATES';
+      let totalPrice = (0, _paymentReact.formatPrice)(price, currency, UNIT_LABEL_PLACEHOLDER, quantity, true, locale);
+      totalPrice = (_totalPrice = totalPrice) === null || _totalPrice === void 0 ? void 0 : _totalPrice.replace(new RegExp("".concat(UNIT_LABEL_PLACEHOLDER, "\\s+\\/*")), '');
+      let unitPrice = (0, _paymentReact.formatPrice)(price, currency, UNIT_LABEL_PLACEHOLDER, 1, true, locale);
+      unitPrice = (_unitPrice = unitPrice) === null || _unitPrice === void 0 ? void 0 : _unitPrice.replace(new RegExp("".concat(UNIT_LABEL_PLACEHOLDER, "\\s+\\/*")), '');
+      setState({
+        unitPrice,
+        totalPrice
+      });
+    } catch (error) {
+      console.error('calculate failed error', error);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      gap: isMobile ? '32px' : '64px',
+      height: '100%',
+      width: '100%',
+      '@media (max-width: 1200px)': {
+        flexDirection: 'column',
+        justifyContent: 'flex-start'
+      }
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px',
+        height: '100%',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: {
+            fontWeight: 'bold'
+          },
+          children: [(components === null || components === void 0 ? void 0 : components.length) <= 1 && t('purchase.componentCount', {
+            count: components === null || components === void 0 ? void 0 : components.length
+          }), (components === null || components === void 0 ? void 0 : components.length) > 1 && t('purchase.componentsCount', {
+            count: components === null || components === void 0 ? void 0 : components.length
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+          dense: true,
+          disablePadding: true,
+          sx: {
+            maxHeight: '480px',
+            overflowY: 'auto',
+            '&::-webkit-scrollbar': {
+              width: '6px'
+            },
+            '&::-webkit-scrollbar-track': {
+              backgroundColor: 'transparent'
+            },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: '#ccc',
+              borderRadius: '3px'
+            },
+            '@media (max-width: 1200px)': {
+              maxHeight: 'unset'
+            }
+          },
+          children: components.map(_ref3 => {
+            let {
+              did,
+              title,
+              logo
+            } = _ref3;
+            let props = {};
+            if (blockletStoreURL) {
+              props = {
+                component: 'a',
+                href: (0, _util.getBlockletUrlOnStore)({
+                  did,
+                  baseUrl: blockletStoreURL
+                })
+              };
+            }
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItem, _objectSpread(_objectSpread({
+              sx: {
+                cursor: 'pointer',
+                paddingRight: '4px',
+                '&:hover': {
+                  backgroundColor: 'secondary.main',
+                  borderRadius: '4px'
+                }
+              },
+              disablePadding: true,
+              disableGutters: true,
+              alignItems: "flex-start",
+              target: "_blank"
+            }, props), {}, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                  alt: title,
+                  variant: "rounded",
+                  src: logo
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                  children: title
+                }),
+                secondary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                  sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between'
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DID.default, {
+                    copyable: false,
+                    did: did
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                    sx: {
+                      color: 'primary.main'
+                    },
+                    children: state.unitPrice
+                  })]
+                })
+              })]
+            }), did);
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontWeight: 'bold'
+          },
+          children: t('common.price')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+          dense: true,
+          disablePadding: true,
+          children: [{
+            label: t('checkout.estimatedCost'),
+            value: state.totalPrice,
+            hint: t('checkout.estimatedCostHint')
+          }].map(item => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItem, {
+              sx: {
+                maxHeight: '28px'
+              },
+              disablePadding: true,
+              disableGutters: true,
+              secondaryAction: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                color: "primary.main",
+                sx: {
+                  paddingRight: '4px'
+                },
+                children: item.value
+              }),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+                primary: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                  children: [!item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                    children: item.label
+                  }), item.hint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+                    component: "span",
+                    sx: {
+                      display: 'flex',
+                      alignItems: 'center'
+                    },
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+                      title: item.hint,
+                      placement: "right",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+                        component: "span",
+                        sx: {
+                          display: 'flex',
+                          alignItems: 'center',
+                          cursor: 'pointer'
+                        },
+                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+                          children: item.label
+                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoOutlined.default, {
+                          fontSize: "small",
+                          sx: {
+                            marginLeft: '2px'
+                          }
+                        })]
+                      })
+                    })
+                  })]
+                })
+              })
+            }, item.label);
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      sx: {
+        width: '100%',
+        '& .cko-container': {
+          minWidth: '100% !important',
+          maxWidth: '100% !important'
+        },
+        '& .cko-payment': {
+          gap: '24px'
+        },
+        '& .cko-payment-contact': {
+          gap: '12px',
+          '& >div': {
+            marginBottom: 0
+          }
+        },
+        '& .cko-payment-form': {
+          marginTop: 0
+        },
+        '& .cko-payment-methods': {
+          gap: '12px',
+          marginTop: 0,
+          '&>p': {
+            marginBottom: 0
+          }
+        },
+        '& .cko-payment-submit': {
+          marginTop: 0,
+          '& button': {
+            fontSize: '1rem !important'
+          }
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_paymentReact.CheckoutForm, {
+        id: checkoutSessionId,
+        mode: "inline-minimal",
+        onPaid: handlePaid,
+        onChange: handleChange
+      })
+    })]
+  });
+}

package/lib/progress-message/index.js

@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 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(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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+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(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; }
 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; }

package/lib/small-circle-progress/index.js

@@ -15,7 +15,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 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(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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+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(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; }
 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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-ux",
-  "version": "2.2.53",
+  "version": "2.2.55",
   "description": "Launcher UX lib",
   "publishConfig": {
     "access": "public"
@@ -44,19 +44,23 @@
     "react": ">=18.1.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
     "@storybook/react": "^6.5.16",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "glob": "^10.3.10"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.9.29",
+    "@arcblock/ux": "^2.9.57",
+    "@blocklet/launcher-util": "2.2.55",
+    "@blocklet/payment-react": "^1.13.190",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.8",
-    "@mui/material": "^5.15.7"
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
+    "ahooks": "^3.7.10",
+    "react-use": "^17.5.0"
   },
   "exports": {
     ".": {
@@ -88,5 +92,5 @@
       "require": "./lib/use-mobile/index.js"
     }
   },
-  "gitHead": "9438d2bb74c7eb19567e0fc86d78f43357287851"
+  "gitHead": "83daa20f7a51626f804cc9e4f54cdcd90d51e2d8"
 }