@abtnode/ux 1.8.26 → 1.8.28

package/lib/team/members/index.js

@@ -0,0 +1,476 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MemberList;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _Loop = _interopRequireDefault(require("@mui/icons-material/Loop"));
+var _Address = _interopRequireDefault(require("@arcblock/did-connect/lib/Address"));
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _PersonIcon = _interopRequireDefault(require("@arcblock/icons/lib/PersonIcon"));
+var _ExternalIssuerIcon = _interopRequireDefault(require("@arcblock/icons/lib/ExternalIssuerIcon"));
+var _Datatable = _interopRequireWildcard(require("@arcblock/ux/lib/Datatable"));
+var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
+var _constant = require("@abtnode/constant");
+var _toast = _interopRequireDefault(require("../../toast"));
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _permission = _interopRequireDefault(require("../../permission"));
+var _util = require("../../util");
+var _inviteMember = _interopRequireDefault(require("./invite-member"));
+var _transferNode = _interopRequireDefault(require("./transfer-node"));
+var _member = _interopRequireDefault(require("./member"));
+var _invitations = _interopRequireDefault(require("./invitations"));
+var _actions = _interopRequireDefault(require("./actions"));
+var _util2 = require("./util");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 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; }
+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; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+const ROLE_ALL = '$all';
+const ROLE_NONE = '$none';
+const getCount = (counts, name) => {
+  const item = counts.find(x => x.key === name);
+  return (item === null || item === void 0 ? void 0 : item.value) || 0;
+};
+const isFromExternal = (user, teamIssuerDid) => {
+  const list = user.passports || [];
+  if (!list.length) {
+    return false;
+  }
+  return !list.some(z => z.issuer.id === teamIssuerDid);
+};
+function SimpleInfo(_ref) {
+  let {
+    user
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const main = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "member-block",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "member-avatar",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+        src: user.avatar,
+        size: 24,
+        did: user.did,
+        shape: "circle",
+        style: {
+          borderRadius: '100%',
+          overflow: 'hidden'
+        }
+      }), !user.approved && /*#__PURE__*/(0, _jsxRuntime.jsx)("did", {
+        className: "badge-block"
+      }), user.isFromExternal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: t('team.passport.externalPassport'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          ml: 1,
+          className: "icon",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExternalIssuerIcon.default, {})
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "member-text",
+      children: user.fullName
+    })]
+  });
+  return user.approved ? main : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+      title: t('team.member.forbidLoginDescription'),
+      children: main
+    })
+  });
+}
+SimpleInfo.propTypes = {
+  user: _propTypes.default.object.isRequired
+};
+function MemberList(_ref2) {
+  let {
+    type
+  } = _ref2;
+  const {
+    teamDid,
+    teamIssuerDid,
+    invitations,
+    roles,
+    refresh,
+    enablePassportIssuance,
+    endpoint,
+    api
+  } = (0, _team.useTeamContext)();
+  const {
+    inService,
+    ws: {
+      useSubscription
+    }
+  } = (0, _node.useNodeContext)();
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const [showInviteMember, setShowInviteMember] = (0, _react.useState)(false);
+  const [showTransferMember, setShowTransferMember] = (0, _react.useState)(false);
+  const [showInviting, setShowInviting] = (0, _react.useState)(false);
+  const [memberDialog, setMemberDialog] = (0, _react.useState)(false); // member, inviting
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const [users, setUsers] = (0, _react.useState)([]);
+  const [rowCount, setRowCount] = (0, _react.useState)();
+  const [userCounts, setUserCounts] = (0, _react.useState)([]);
+  const durableKey = "members-".concat(teamDid);
+  const tableDurableData = (0, _Datatable.getDurableData)(durableKey);
+  const [search, setSearch] = (0, _react.useState)({
+    role: ROLE_ALL,
+    searchText: tableDurableData.searchText || '',
+    hideBlocked: false,
+    pageSize: tableDurableData.rowsPerPage || 10,
+    page: tableDurableData.page ? tableDurableData.page + 1 : 1
+  });
+  const sideList = (roles || []).map(x => ({
+    name: x.name,
+    title: x.title,
+    num: getCount(userCounts, x.name)
+  }));
+  sideList.unshift({
+    name: ROLE_ALL,
+    title: 'All Members',
+    num: getCount(userCounts, ROLE_ALL)
+  });
+  sideList.push({
+    name: ROLE_NONE,
+    title: 'Other',
+    num: getCount(userCounts, ROLE_NONE)
+  });
+  const getUsers = () => {
+    const query = {};
+    if (search.hideBlocked) {
+      query.approved = true;
+    }
+    query.role = search.role;
+    if (search.searchText) {
+      query.search = search.searchText;
+    }
+    setLoading(true);
+    api.getUsers({
+      query,
+      paging: {
+        page: search.page,
+        pageSize: search.pageSize
+      }
+    }).then(res => {
+      setLoading(false);
+      (res.users || []).forEach(x => {
+        x.isFromExternal = isFromExternal(x, teamIssuerDid);
+        x.avatar = (0, _util2.parseAvatar)(x.avatar, teamDid, inService);
+      });
+      setUsers(res.users || []);
+      setRowCount(res.paging.total);
+    }).catch(err => {
+      setLoading(false);
+      _toast.default.error(err.message);
+    });
+  };
+  (0, _react.useEffect)(() => {
+    getUsers();
+  }, ["".concat(search.hideBlocked, "-").concat(search.role, "-").concat(search.page, "-").concat(search.pageSize, "-").concat(search.searchText)]); //eslint-disable-line
+
+  // user counts
+  (0, _react.useEffect)(() => {
+    api.getUsersCountPerRole().then(res => {
+      setUserCounts(res.counts || []);
+    }).catch(err => {
+      _toast.default.error(err.message);
+    });
+  }, []); //eslint-disable-line
+
+  useSubscription(_constant.EVENTS.USER_UPDATED, data => {
+    if (data.teamDid === teamDid) {
+      getUsers();
+    }
+  }, [search]);
+  const isInvitationEnabled = enablePassportIssuance;
+  const columns = [{
+    label: t('common.name'),
+    name: 'fullName',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = users[rawIndex];
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          "data-cy": "member-name-".concat(x.fullName),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SimpleInfo, {
+            user: x
+          })
+        }, x.did);
+      }
+    }
+  }, {
+    label: t('common.address'),
+    name: 'did',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, {
+          size: 14,
+          copyable: false,
+          children: e
+        });
+      }
+    }
+  }, {
+    label: t('team.member.lastLogin'),
+    name: 'lastLoginAt',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelativeTime.default, {
+          value: e,
+          locale: locale
+        });
+      }
+    }
+  }, {
+    label: t('common.actions'),
+    name: '',
+    width: 100,
+    align: 'center',
+    verticalKeyAlign: 'center',
+    options: {
+      customBodyRenderLite: rawIndex => {
+        const x = users[rawIndex];
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_actions.default, {
+            user: x,
+            onIssuePassport: () => setMemberDialog(_objectSpread(_objectSpread({}, x), {}, {
+              initTab: 'issuances'
+            }))
+          })
+        });
+      }
+    }
+  }];
+  const customButtons = [];
+  if (isInvitationEnabled) {
+    customButtons.push( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+      variant: "outlined",
+      style: {
+        flexShrink: 0,
+        marginRight: 16
+      },
+      color: "primary",
+      size: "small",
+      onClick: () => {
+        setShowInviting(true);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PersonIcon.default, {
+        style: {
+          height: '1em',
+          marginRight: 4
+        }
+      }), t('common.inviting'), invitations.length ? " (".concat(invitations.length, ")") : '']
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+      permission: inService ? '' : 'mutate_team',
+      role: inService ? _util.BlockletAdminRoles : [],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        style: {
+          flexShrink: 0,
+          marginRight: 16
+        },
+        variant: "contained",
+        edge: "end",
+        color: "primary",
+        size: "small",
+        "data-cy": "invite-member",
+        onClick: () => setShowInviteMember(true),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+          style: {
+            fontSize: '1.3em',
+            marginRight: 4
+          }
+        }), t('team.invite')]
+      })
+    }));
+    if (type === 'server') {
+      customButtons.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+        role: "owner",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+          style: {
+            flexShrink: 0
+          },
+          variant: "contained",
+          edge: "end",
+          color: "error",
+          size: "small",
+          "data-cy": "invite-member",
+          onClick: () => setShowTransferMember(true),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Loop.default, {
+            style: {
+              fontSize: '1.3em',
+              marginRight: 4
+            }
+          }), t('team.transferNode.name')]
+        })
+      }));
+    }
+  }
+  const onRoleChange = role => {
+    if (loading) {
+      return;
+    }
+    setSearch(x => _objectSpread(_objectSpread({}, x), {}, {
+      role,
+      hideBlocked: false,
+      searchText: '',
+      page: 1
+    }));
+  };
+  const onHideBlockedChange = value => {
+    setSearch(x => _objectSpread(_objectSpread({}, x), {}, {
+      hideBlocked: value,
+      page: 1
+    }));
+  };
+  const onTableChange = _ref3 => {
+    let {
+      page,
+      rowsPerPage,
+      searchText
+    } = _ref3;
+    if (search.pageSize !== rowsPerPage) {
+      setSearch(x => _objectSpread(_objectSpread({}, x), {}, {
+        pageSize: rowsPerPage,
+        page: 1
+      }));
+    } else if (search.page !== page + 1) {
+      setSearch(x => _objectSpread(_objectSpread({}, x), {}, {
+        page: page + 1
+      }));
+    } else if (search.searchText !== searchText) {
+      setSearch(x => _objectSpread(_objectSpread({}, x), {}, {
+        searchText,
+        page: 1
+      }));
+    }
+  };
+  const tableOptions = {
+    sort: false,
+    download: false,
+    filter: false,
+    print: false,
+    expandableRowsOnClick: true,
+    onRowClick(e, _ref4) {
+      let {
+        dataIndex
+      } = _ref4;
+      const x = users[dataIndex];
+      setMemberDialog(x);
+    },
+    page: search.page - 1,
+    rowsPerPage: search.pageSize,
+    count: rowCount,
+    searchDebounceTime: 600
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "main",
+      display: "flex",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "left",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "tabs",
+          children: sideList.map(x => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "tab ".concat(search.role === x.name ? 'active' : ''),
+            onClick: () => onRoleChange(x.name),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "text",
+              children: x.title
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: (0, _classnames.default)('badge', {
+                'is-rect': x.num > 999
+              }),
+              children: x.num
+            })]
+          }, x.name))
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "right",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+          className: "main-table",
+          verticalKeyWidth: 100,
+          locale: locale,
+          durable: durableKey,
+          durableKeys: ['page', 'rowsPerPage'],
+          title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "table-toolbar-left",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlLabel.default, {
+              control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+                disabled: loading,
+                color: "primary",
+                checked: search.hideBlocked,
+                onChange: e => onHideBlockedChange(e.target.checked)
+              }),
+              label: t('team.member.hideBlockedMember')
+            })
+          }),
+          data: users,
+          columns: columns,
+          customButtons: customButtons,
+          options: tableOptions,
+          loading: loading,
+          onChange: onTableChange
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+      title: t('common.inviting'),
+      onClose: () => setShowInviting(false),
+      open: showInviting,
+      maxWidth: "lg",
+      fullWidth: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invitations.default, {})
+    }), memberDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(_member.default, {
+      onCancel: () => setMemberDialog(null),
+      userDid: memberDialog.did,
+      initTab: memberDialog.initTab
+    }), showInviteMember && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inviteMember.default, {
+      teamDid: teamDid,
+      endpoint: endpoint,
+      roles: roles,
+      onCancel: () => setShowInviteMember(false),
+      onSuccess: () => {
+        refresh();
+        setShowInviteMember(false);
+      }
+    }), showTransferMember && /*#__PURE__*/(0, _jsxRuntime.jsx)(_transferNode.default, {
+      teamDid: teamDid,
+      endpoint: endpoint,
+      roles: roles,
+      onCancel: () => setShowTransferMember(false),
+      onSuccess: () => {
+        refresh();
+        setShowTransferMember(false);
+      }
+    })]
+  });
+}
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .main {\n    .left {\n      width: 168px;\n      flex-shrink: 0;\n      margin-right: 65px;\n      .tabs {\n        padding-top: 16px;\n        .tab {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 8px 16px;\n          transition: background 0.4s;\n\n          width: 168px;\n          height: 36px;\n          border-radius: 8px;\n\n          cursor: pointer;\n          user-select: none;\n\n          &:nth-child(n + 2) {\n            margin-top: 24px;\n          }\n\n          &.active {\n            background: #f2f2f2;\n          }\n\n          &:hover {\n            background: #f2f2f2;\n          }\n\n          .text {\n            font-weight: 400;\n            font-size: 16px;\n            line-height: 19px;\n\n            color: #222222;\n          }\n\n          .badge {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 20px;\n            height: 20px;\n            border-radius: 100%;\n            color: #fff;\n            background: #666666;\n            font-size: 10px;\n            font-weight: 400;\n            &.is-rect {\n              width: auto;\n              border-radius: 8px;\n              padding: 0 4px;\n            }\n          }\n        }\n      }\n      @media (max-width: ", "px) {\n        display: none;\n      }\n    }\n    .right {\n      flex-grow: 1;\n    }\n  }\n\n  .member-block {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    .member-avatar {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    .member-text {\n      margin-left: 10px;\n    }\n    .badge-block {\n      width: 14px;\n      height: 14px;\n      position: absolute;\n      right: -4px;\n      top: -4px;\n      background: #ff5757;\n      border-radius: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      &::after {\n        content: '';\n        width: 6px;\n        height: 2px;\n        background: #fefefe;\n      }\n    }\n  }\n\n  .table-toolbar-left {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 7px 0;\n    label span:first-child {\n      display: flex;\n    }\n  }\n"])), props => props.theme.breakpoints.values.md);
+MemberList.propTypes = {
+  type: _propTypes.default.oneOf(['server', 'blocklet']).isRequired
+};

package/lib/team/members/invitations.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Invitations;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
+var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
+var _node = require("../../contexts/node");
+var _team = require("../../contexts/team");
+var _confirm = _interopRequireDefault(require("../../confirm"));
+var _permission = _interopRequireDefault(require("../../permission"));
+var _clickToCopy = _interopRequireDefault(require("../../click-to-copy"));
+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 Invitations() {
+  const {
+    api: client,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    teamDid,
+    invitations,
+    refresh,
+    endpoint
+  } = (0, _team.useTeamContext)();
+  const [delConfirm, setDelConfirm] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const deleteInvitation = async _ref => {
+    let {
+      inviteId
+    } = _ref;
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      await client.deleteInvitation({
+        input: {
+          teamDid,
+          inviteId
+        }
+      });
+      refresh();
+      await (0, _util.sleep)(800);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+      setDelConfirm(null);
+    }
+  };
+  const onCancel = () => {
+    setLoading(false);
+    setDelConfirm(null);
+  };
+  const getLink = column => {
+    if (!endpoint) {
+      return '';
+    }
+    return (0, _util.getInviteLink)({
+      inviteId: column.inviteId,
+      endpoint
+    });
+  };
+  const columns = [{
+    label: t('team.inviting.link'),
+    name: 'inviteId',
+    options: {
+      sort: false,
+      customBodyRenderLite: rawIndex => {
+        const d = invitations[rawIndex];
+        if (!endpoint) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+            size: 16
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_clickToCopy.default, {
+          children: getLink(d)
+        });
+      }
+    }
+  }, {
+    label: t('common.role'),
+    name: 'role',
+    widtn: 70
+  }, {
+    label: t('common.remark'),
+    name: 'remark',
+    options: {
+      customBodyRender: e => {
+        return e || '--';
+      }
+    }
+  }, {
+    label: t('team.inviting.inviter'),
+    name: 'inviter.fullName',
+    options: {
+      sort: false,
+      customBodyRender: (e, _ref2) => {
+        var _d$inviter;
+        let {
+          rowIndex
+        } = _ref2;
+        const d = invitations[rowIndex];
+        return d === null || d === void 0 ? void 0 : (_d$inviter = d.inviter) === null || _d$inviter === void 0 ? void 0 : _d$inviter.fullName;
+      }
+    }
+  }, {
+    label: t('common.expires'),
+    name: 'expireDate',
+    options: {
+      customBodyRender: e => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelativeTime.default, {
+          value: e,
+          locale: locale
+        });
+      }
+    }
+  }, {
+    label: t('common.actions'),
+    name: '',
+    width: 100,
+    align: 'center',
+    options: {
+      sort: false,
+      customBodyRenderLite: rawIndex => {
+        const item = invitations[rawIndex];
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
+          permission: inService ? '' : 'mutate_team',
+          role: inService ? _util.BlockletAdminRoles : [],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+            onClick: () => setDelConfirm({
+              title: t('team.inviting.delete.title'),
+              description: t('team.inviting.delete.description', {
+                link: getLink(item)
+              }),
+              confirm: t('common.delConfirm'),
+              cancel: t('common.cancel'),
+              onConfirm: () => deleteInvitation(item),
+              onCancel
+            }),
+            size: "small",
+            color: "error",
+            variant: "text",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Delete.default, {
+              style: {
+                fontSize: '1.2em'
+              }
+            }), t('common.delete')]
+          })
+        });
+      }
+    }
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+    children: [invitations.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+      locale: locale,
+      data: [...invitations],
+      columns: columns,
+      verticalKeyWidth: 100,
+      options: {
+        download: false,
+        filter: false,
+        print: false
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: t('common.empty')
+    }), delConfirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+      title: delConfirm.title,
+      description: delConfirm.description,
+      confirm: delConfirm.confirm,
+      cancel: delConfirm.cancel,
+      params: delConfirm.params,
+      onConfirm: delConfirm.onConfirm,
+      onCancel: delConfirm.onCancel
+    })]
+  });
+}
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: -20px;\n"])));
+Invitations.propTypes = {};
+Invitations.defaultProps = {};