@blocklet/launcher-workflow 1.5.61 → 1.5.62

package/lib/purchase.js

@@ -82,6 +82,7 @@ function PurchasePage() {
   } = (0, _locale.useLocaleContext)();
   const [paying, setPaying] = (0, _react.useState)(false);
   const [paymentInfo, setPaymentInfo] = (0, _react.useState)(null);
+  const [buttonInFix, setButtonInFix] = (0, _react.useState)(false);
   const [paymentType, setPaymentType] = (0, _react.useState)('crypto');
   const routerPrefix = (0, _router.usePrefix)();
   const userDid = query.get('userDid') || (0, _lodash.default)(session, 'user.did');
@@ -240,10 +241,24 @@ function PurchasePage() {
     variant: "outlined",
     color: "primary",
     style: {
-      marginLeft: '24px'
+      marginRight: '24px'
     }
   }, t('common.redeem'));
 
+  const bottomFix = type => {
+    switch (type) {
+      case 'fix':
+        setButtonInFix(true);
+        break;
+
+      case 'scroll':
+        setButtonInFix(false);
+        break;
+
+      default:
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, null, isEmbed && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
     title: t('plan.title'),
     subTitle: t('plan.subTitle')
@@ -252,9 +267,10 @@ function PurchasePage() {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "page-body-article"
   }, /*#__PURE__*/_react.default.createElement(_compactLayout.default, {
+    onBottomFix: bottomFix,
     bottom: plans.length ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "button-container"
-    }, /*#__PURE__*/_react.default.createElement(PayButton, null), /*#__PURE__*/_react.default.createElement(RedeemButton, null)) : ''
+      className: "button-container container-padding ".concat(buttonInFix ? 'has-shadow' : '')
+    }, /*#__PURE__*/_react.default.createElement(RedeemButton, null), /*#__PURE__*/_react.default.createElement(PayButton, null)) : ''
   }, !isEmbed && /*#__PURE__*/_react.default.createElement(_pageHeader.default, {
     title: t('plan.title'),
     subTitle: t('plan.subTitle')
@@ -267,7 +283,7 @@ function PurchasePage() {
   })) : '', /*#__PURE__*/_react.default.createElement("div", {
     className: "select-plan small-select-plan-".concat(plans.length)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "selector-container"
+    className: "selector-container container-padding"
   }, plans.length ? plans.map(item => /*#__PURE__*/_react.default.createElement(_plan.default, {
     key: item._id,
     paymentType: paymentType,
@@ -308,7 +324,7 @@ const Center = _styledComponents.default.div.withConfig({
 const Container = _styledComponents.default.div.withConfig({
   displayName: "purchase__Container",
   componentId: "sc-1knmtel-1"
-})(["display:flex;flex-direction:column;width:100%;height:100%;.select-payment{display:flex;justify-content:center;align-items:center;padding-top:30px;}.select-plan{margin:48px auto;", "{margin:30px auto;}&.small-select-plan-2{max-width:780px;}&.small-select-plan-0,&.small-select-plan-1{max-width:460px;}}.page-body{position:relative;flex:1;padding:0 24px;margin-top:0;}.page-body-article{position:absolute;left:24px;top:0;width:calc(100% - 48px);height:100%;overflow-y:auto;}.selector-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:18px;}.button-container{display:flex;justify-content:center;align-items:center;padding-bottom:16px;> button{width:200px;}}.select-body-item{cursor:pointer;transition:background-color ease 0.2s,border ease 0.2s;}@media screen and (max-width:600px){.page-body{padding:0 24px;}}.selected{border-color:", ";cursor:default;}"], props => props.theme.breakpoints.down('sm'), props => props.theme.palette.primary.main);
+})(["display:flex;flex-direction:column;width:100%;height:100%;.select-payment{display:flex;justify-content:center;align-items:center;padding-top:30px;}.select-plan{margin:48px auto 33px;", "{margin:30px auto;}&.small-select-plan-2{max-width:780px;}&.small-select-plan-0,&.small-select-plan-1{max-width:460px;}}.page-body{position:relative;flex:1;margin-top:0;}.page-body-article{position:absolute;left:0;top:0;width:100%;height:100%;overflow-y:auto;}.selector-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:18px;}.button-container{display:flex;justify-content:center;align-items:center;padding-bottom:15px;padding-top:15px;> button{width:200px;}&.has-shadow{box-shadow:rgba(0,0,0,0.05) 0 0 4px;}}.select-body-item{cursor:pointer;transition:background-color ease 0.2s,border ease 0.2s;}.selected{border-color:", ";cursor:default;}.container-padding{padding-left:24px;padding-right:24px;}"], props => props.theme.breakpoints.down('sm'), props => props.theme.palette.primary.main);
 
 const PaymentLabel = _styledComponents.default.div.withConfig({
   displayName: "purchase__PaymentLabel",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/launcher-workflow",
-  "version": "1.5.61",
+  "version": "1.5.62",
   "description": "Purchase components for Launcher UI",
   "publishConfig": {
     "access": "public"
@@ -40,7 +40,7 @@
     "@arcblock/did-connect": "^1.16.40",
     "@arcblock/icons": "^1.16.40",
     "@arcblock/ux": "^1.16.40",
-    "@blocklet/launcher-layout": "1.5.61",
+    "@blocklet/launcher-layout": "1.5.62",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -66,5 +66,5 @@
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-styled-components": "^1.10.7"
   },
-  "gitHead": "98002a22effed39668bfb5074e1ff0b3c055c8f5"
+  "gitHead": "09b90c32667ccd867d6e1f263452d487f67b83ab"
 }