@abtnode/ux 1.8.26 → 1.8.28

package/lib/team/members/invite-member.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = InviteMember;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+var _node = require("../../contexts/node");
+var _util = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function InviteMember(_ref) {
+  let {
+    teamDid,
+    roles,
+    onCancel,
+    onSuccess,
+    onError,
+    endpoint
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [activeStep, setActiveStep] = (0, _react.useState)(0);
+  const [inviteInfo, setInviteInfo] = (0, _react.useState)('');
+  const [role, setRole] = (0, _react.useState)('');
+  const [remark, setRemark] = (0, _react.useState)('');
+  const onCreate = async () => {
+    if (!role) {
+      setError(t('team.member.error.passportEmpty'));
+      return;
+    }
+    const trimRemark = remark.trim();
+    setError(null);
+    setLoading(true);
+    try {
+      const {
+        inviteInfo: info
+      } = await api.createMemberInvitation({
+        input: {
+          teamDid,
+          role,
+          remark: trimRemark
+        }
+      });
+      setInviteInfo(info);
+      setActiveStep(1);
+    } catch (err) {
+      const errMsg = (0, _util.formatError)(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const steps = [{
+    body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "div",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+        style: {
+          width: '100%'
+        },
+        variant: "outlined",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+          children: t('common.passport')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          "data-cy": "invite-member-select-role",
+          value: role,
+          onChange: e => {
+            setError(null);
+            setRole(e.target.value);
+          },
+          fullWidth: true,
+          label: t('common.passport'),
+          disabled: loading,
+          onKeyPress: e => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              onCreate();
+            }
+          },
+          children: roles.filter(d => d.name !== 'owner').map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            value: r.name,
+            "data-cy": "invite-member-select-option-".concat(r.name),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: r.title || r.name
+            })
+          }, r.name))
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        label: t('common.remark'),
+        autoComplete: "off",
+        variant: "outlined",
+        fullWidth: true,
+        style: {
+          marginBottom: 8
+        },
+        value: remark,
+        onChange: e => {
+          setError(null);
+          setRemark(e.target.value);
+        },
+        disabled: loading,
+        "data-cy": "invite-member-input-remark"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 10
+        }
+      })]
+    }),
+    cancel: t('common.cancel'),
+    confirm: t('team.member.inviteDialog.createInviteLink'),
+    onCancel,
+    onConfirm: onCreate
+  }, {
+    // eslint-disable-next-line react/no-unstable-nested-components
+    body: () => {
+      const link = (0, _util.getInviteLink)({
+        inviteId: inviteInfo.inviteId,
+        endpoint
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Bold, {
+          children: t('team.member.inviteDialog.createSuccessTip', {
+            expireDate: (0, _util.formatToDatetime)(inviteInfo.expireDate)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginTop: '40px'
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+          children: link
+        })]
+      });
+    },
+    confirm: t('common.confirm'),
+    onConfirm: onSuccess
+  }];
+  const step = steps[activeStep];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: t('common.invite'),
+    fullWidth: true,
+    open: true,
+    showCloseButton: false,
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [step.cancel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: step.onCancel,
+        color: "inherit",
+        children: step.cancel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: step.onConfirm,
+        color: "primary",
+        disabled: loading || !role,
+        variant: "contained",
+        autoFocus: true,
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), step.confirm]
+      })]
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+      component: "div",
+      children: typeof step.body === 'function' ? step.body() : step.body
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+InviteMember.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onError: _propTypes.default.func,
+  roles: _propTypes.default.array,
+  endpoint: _propTypes.default.string
+};
+InviteMember.defaultProps = {
+  onError: () => {},
+  roles: [],
+  endpoint: ''
+};
+const Bold = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 16px;\n  font-weight: bold;\n"])));

package/lib/team/members/issue-passport.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IssuePassport;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Alert = _interopRequireDefault(require("@arcblock/ux/lib/Alert"));
+var _node = require("../../contexts/node");
+var _util = require("../../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function IssuePassport(_ref) {
+  let {
+    teamDid,
+    ownerDid,
+    roles,
+    onCancel,
+    onSuccess,
+    onError,
+    showOwnerPassport
+  } = _ref;
+  const {
+    api
+  } = (0, _node.useNodeContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [error, setError] = (0, _react.useState)('');
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [role, setRole] = (0, _react.useState)('');
+  const onCreate = async () => {
+    if (!role) {
+      setError(t('team.member.error.passportEmpty'));
+      return;
+    }
+    setError(null);
+    setLoading(true);
+    try {
+      await api.createPassportIssuance({
+        input: {
+          teamDid,
+          name: role,
+          ownerDid
+        }
+      });
+      onSuccess();
+    } catch (err) {
+      const errMsg = (0, _util.formatError)(err);
+      setError(errMsg);
+      onError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dialog.default, {
+    title: t('team.passport.issue'),
+    fullWidth: true,
+    open: true,
+    onClick: e => e.stopPropagation(),
+    onClose: onCancel,
+    disableEscapeKeyDown: true,
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: onCancel,
+        color: "inherit",
+        size: "small",
+        children: t('common.cancel')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: onCreate,
+        color: "primary",
+        size: "small",
+        disabled: loading || !role,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "issue-passport-create-btn",
+        children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+          size: [16, 10]
+        }), t('team.passport.issuance.create.title')]
+      })]
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContentText.default, {
+      component: "div",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        component: "div",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+          style: {
+            width: '100%'
+          },
+          variant: "outlined",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+            children: t('common.passport')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            "data-cy": "issue-passport-select-passport",
+            value: role,
+            onChange: e => {
+              setError(null);
+              setRole(e.target.value);
+            },
+            fullWidth: true,
+            label: t('common.passport'),
+            disabled: loading,
+            onKeyPress: e => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                onCreate();
+              }
+            },
+            children: roles.filter(d => showOwnerPassport || d.name !== 'owner').map(r => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+              value: r.name,
+              "data-cy": "issue-passport-select-option-".concat(r.name),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: r.title || r.name
+              })
+            }, r.name))
+          })]
+        })
+      })
+    }), !!error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      type: "error",
+      variant: "icon",
+      children: error
+    })]
+  });
+}
+IssuePassport.propTypes = {
+  teamDid: _propTypes.default.string.isRequired,
+  ownerDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  onSuccess: _propTypes.default.func.isRequired,
+  onError: _propTypes.default.func,
+  roles: _propTypes.default.array,
+  showOwnerPassport: _propTypes.default.bool
+};
+IssuePassport.defaultProps = {
+  onError: () => {},
+  roles: [],
+  showOwnerPassport: false
+};

package/lib/team/members/member.js

@@ -0,0 +1,294 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Member;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _notistack = require("notistack");
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Avatar = _interopRequireDefault(require("@mui/material/Avatar"));
+var _Tabs = _interopRequireDefault(require("@arcblock/ux/lib/Tabs"));
+var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+var _ForbidLoginIcon = _interopRequireDefault(require("@arcblock/icons/lib/ForbidLoginIcon"));
+var _AllowLoginIcon = _interopRequireDefault(require("@arcblock/icons/lib/AllowLoginIcon"));
+var _constant = require("@abtnode/constant");
+var _permission = _interopRequireDefault(require("../../permission"));
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _util = require("../../util");
+var _passportIssuances = _interopRequireDefault(require("./passport-issuances"));
+var _passports = _interopRequireDefault(require("./passports"));
+var _toggleUserApproval = _interopRequireDefault(require("./toggle-user-approval"));
+var _util2 = require("./util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function Member(_ref) {
+  let {
+    userDid,
+    onCancel,
+    initTab
+  } = _ref;
+  const {
+    api,
+    ws: {
+      useSubscription
+    },
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    roles,
+    teamDid,
+    enablePassportIssuance
+  } = (0, _team.useTeamContext)();
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [issuances, setIssuances] = (0, _react.useState)(null);
+  const [user, setUser] = (0, _react.useState)(null);
+  const {
+    enqueueSnackbar
+  } = (0, _notistack.useSnackbar)();
+  const [tab, setTab] = (0, _react.useState)(initTab || 'info');
+  const getData = async () => {
+    try {
+      const res = await api.doBatchQuery({
+        getUser: {
+          input: {
+            teamDid,
+            user: {
+              did: userDid
+            }
+          }
+        },
+        getPassportIssuances: {
+          input: {
+            teamDid,
+            ownerDid: userDid
+          }
+        }
+      });
+      if (res.getUser.user) {
+        res.getUser.user.avatar = (0, _util2.parseAvatar)(res.getUser.user.avatar, teamDid, inService);
+      }
+      setUser(res.getUser.user || {});
+      setIssuances(res.getPassportIssuances.list || []);
+    } catch (err) {
+      enqueueSnackbar((0, _util.formatError)(err), {
+        autoHideDuration: 5000,
+        variant: 'error'
+      });
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (teamDid) {
+      getData();
+    }
+  }, [userDid, teamDid]); // eslint-disable-line
+
+  const onUserEvent = data => {
+    if (data.teamDid === teamDid && data.user && data.user.did === userDid) {
+      getData();
+    }
+  };
+  useSubscription(_constant.EVENTS.USER_UPDATED, onUserEvent, [userDid, teamDid]);
+  (0, _react.useEffect)(() => {
+    if (issuances && !issuances.length && tab === 'issuances') {
+      setTab('info');
+    }
+  }, [issuances]); // eslint-disable-line
+
+  // tab
+  const Info = () => {
+    const rows = user ? [{
+      name: t('team.member.name'),
+      value: user.fullName
+    }, {
+      name: t('common.email'),
+      value: user.email
+    }, {
+      name: t('team.member.allowLogin'),
+      value: user.approved ? t('common.yes') : t('common.no')
+    }, {
+      name: t('team.member.lastLogin'),
+      value: (0, _util.formatToDatetime)(user.updatedAt)
+    }, {
+      name: t('common.createdAt'),
+      value: (0, _util.formatToDatetime)(user.createdAt)
+    }, {
+      name: t('common.remark'),
+      value: user.remark || '--'
+    }].filter(Boolean) : [];
+    return rows.map(row => {
+      if (row.name === t('common.did')) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+          valueComponent: "div",
+          nameWidth: 120,
+          name: row.name,
+          nameFormatter: () => t('common.did'),
+          children: row.value
+        }, row.name);
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
+        style: {
+          alignItems: 'flex-start'
+        },
+        valueComponent: "div",
+        nameWidth: 120,
+        name: row.name,
+        children: row.value
+      }, row.name);
+    });
+  };
+  const tabConfigs = {
+    info: {
+      label: t('common.basicInfo'),
+      value: 'info',
+      component: Info
+    },
+    passports: {
+      label: t('common.passport'),
+      value: 'passports',
+      component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_passports.default, {
+        user: user,
+        teamDid: teamDid,
+        roles: roles,
+        onCreate: () => {
+          getData(teamDid);
+          setTab('issuances');
+        },
+        onRefresh: () => {
+          getData(teamDid);
+        }
+      })
+    },
+    issuances: {
+      label: t('team.passport.issuance.pending'),
+      value: 'issuances',
+      component: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_passportIssuances.default, {
+        issuances: issuances || [],
+        teamDid: teamDid,
+        onRefresh: () => getData(teamDid)
+      })
+    }
+  };
+  const tabs = Object.values(tabConfigs).map(_ref2 => {
+    let {
+      label,
+      value
+    } = _ref2;
+    return {
+      label,
+      value
+    };
+  }).filter(x => {
+    if (x.value === 'issuances') {
+      return enablePassportIssuance && issuances && !!issuances.length;
+    }
+    return true;
+  });
+  const tabConfig = tabConfigs[tab] || tabConfigs.info;
+  const onTabChange = newTab => {
+    setTab(newTab);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+    title: t('common.member'),
+    onClose: onCancel,
+    open: true,
+    PaperProps: {
+      style: {
+        maxWidth: 632,
+        minHeight: '80vh'
+      }
+    },
+    fullWidth: true,
+    actions: user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+      permission: inService ? '' : 'mutate_team',
+      role: inService ? _util.BlockletAdminRoles : [],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleUserApproval.default, {
+        user: user,
+        children: _ref3 => {
+          let {
+            open
+          } = _ref3;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockButton, {
+            onClick: open,
+            children: [user.approved ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ForbidLoginIcon.default, {
+              style: {
+                fontSize: '1.2em',
+                marginRight: '0.4em'
+              }
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_AllowLoginIcon.default, {
+              style: {
+                fontSize: '1.2em',
+                marginRight: '0.4em'
+              }
+            }), user.approved ? t('team.member.forbidLogin') : t('team.member.allowLogin')]
+          });
+        }
+      })
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+      children: [!user && /*#__PURE__*/(0, _jsxRuntime.jsx)(Center, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {})
+      }), user && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          className: "info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+            src: user.avatar,
+            style: {
+              width: 48,
+              height: 48,
+              backgroundColor: 'transparent',
+              marginRight: 16
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "name",
+              children: user.fullName
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              className: "did",
+              mt: 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+                children: user.did
+              })
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          mx: 3,
+          className: "tabs",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+            tabs: tabs,
+            current: tab,
+            onChange: onTabChange,
+            scrollButtons: "auto"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "body",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(tabConfig.component, {})
+        })]
+      })]
+    })
+  });
+}
+Member.propTypes = {
+  userDid: _propTypes.default.string.isRequired,
+  onCancel: _propTypes.default.func.isRequired,
+  initTab: _propTypes.default.string
+};
+Member.defaultProps = {
+  initTab: 'info'
+};
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .info {\n    .name {\n      font-weight: 400;\n      font-size: 18px;\n      line-height: 25px;\n      color: #222222;\n    }\n  }\n\n  .tabs {\n    margin-top: 24px;\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  .body {\n    margin-top: 24px;\n  }\n"])));
+const Center = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 200px;\n"])));
+const BlockButton = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n  width: 100%;\n  height: 64px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  color: #999;\n  fill: #999;\n  font-size: 16px;\n  border-top: 1px solid #f0f0f0;\n  position: sticky;\n  bottom: 0;\n  background: #fff;\n  z-index: 10;\n"])));