@atlaskit/editor-plugin-mentions/dist/cjs/ui/ProfileCardComponent.js

Mentions plugin for @atlaskit/editor-core

/* ProfileCardComponent.tsx generated by @compiled/babel-plugin v2.0.0 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProfileCardComponent = ProfileCardComponent;
exports.useProfileCardState = exports.isAgentMentionType = void 0;
require("./ProfileCardComponent.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _bindEventListener = require("bind-event-listener");
var _reactLoadable = _interopRequireDefault(require("react-loadable"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _user = require("@atlaskit/profilecard/user");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
var _PopperWrapper = require("./PopperWrapper");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
// eslint-disable-next-line require-unicode-regexp
var LEADING_AT_SIGN_RE = /^@/;
var AgentProfileCardResourcedLazy = (0, _reactLoadable.default)({
  loader: function loader() {
    return Promise.resolve().then(function () {
      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
      '@atlaskit/profilecard/agent-profile-card-resourced'));
    }).then(function (_ref) {
      var AgentProfileCardResourced = _ref.AgentProfileCardResourced;
      return AgentProfileCardResourced;
    });
  },
  loading: function loading() {
    return null;
  }
});
var styles = {
  loadingStyles: "_2rko12b0 _16qs130s"
};
var LoadingWrapper = function LoadingWrapper(_ref2) {
  var children = _ref2.children,
    isLoading = _ref2.isLoading;
  return isLoading ? /*#__PURE__*/React.createElement("div", {
    className: (0, _runtime.ax)([styles.loadingStyles])
  }, children) : children;
};
var isAgentMentionType = exports.isAgentMentionType = function isAgentMentionType(userType) {
  return userType === 'APP' || userType === 'AGENT';
};
var useProfileCardState = exports.useProfileCardState = function useProfileCardState(_ref3) {
  var id = _ref3.id,
    provider = _ref3.provider;
  var _useState = (0, _react.useState)(),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    data = _useState2[0],
    setData = _useState2[1];
  var _useState3 = (0, _react.useState)(undefined),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    reportingLinesData = _useState4[0],
    setReportingLinesData = _useState4[1];
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    shouldShowGiveKudos = _useState6[0],
    setShouldShowGiveKudos = _useState6[1];
  var _useState7 = (0, _react.useState)(undefined),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
    teamCentralBaseUrl = _useState8[0],
    setTeamCentralBaseUrl = _useState8[1];
  var _useState9 = (0, _react.useState)(false),
    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
    isLoading = _useState0[0],
    setIsLoading = _useState0[1];
  var _useState1 = (0, _react.useState)(false),
    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
    hasError = _useState10[0],
    setHasError = _useState10[1];

  // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
  (0, _react.useEffect)(function () {
    var fetchData = /*#__PURE__*/function () {
      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
        var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl, _t;
        return _regenerator.default.wrap(function (_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              if (!(!id || !provider)) {
                _context.next = 1;
                break;
              }
              return _context.abrupt("return");
            case 1:
              setIsLoading(true);
              _context.prev = 2;
              _context.next = 3;
              return Promise.all([provider === null || provider === void 0 ? void 0 : provider.resourceClient.getProfile((provider === null || provider === void 0 ? void 0 : provider.cloudId) || '', id, function () {}), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getReportingLines(id), provider === null || provider === void 0 ? void 0 : provider.resourceClient.shouldShowGiveKudos(), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getTeamCentralBaseUrl({
                withOrgContext: true,
                withSiteContext: true
              })]);
            case 3:
              _yield$Promise$all = _context.sent;
              _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 4);
              _data = _yield$Promise$all2[0];
              reportingLines = _yield$Promise$all2[1];
              shouldGiveKudos = _yield$Promise$all2[2];
              _teamCentralBaseUrl = _yield$Promise$all2[3];
              setData(_data);
              setReportingLinesData(reportingLines);
              setShouldShowGiveKudos(shouldGiveKudos !== null && shouldGiveKudos !== void 0 ? shouldGiveKudos : false);
              setTeamCentralBaseUrl(_teamCentralBaseUrl);
              setHasError(false);
              _context.next = 5;
              break;
            case 4:
              _context.prev = 4;
              _t = _context["catch"](2);
              setHasError(true);
            case 5:
              _context.prev = 5;
              setIsLoading(false);
              return _context.finish(5);
            case 6:
            case "end":
              return _context.stop();
          }
        }, _callee, null, [[2, 4, 5, 6]]);
      }));
      return function fetchData() {
        return _ref4.apply(this, arguments);
      };
    }();
    fetchData();
  }, [id, provider]);
  return {
    data: data,
    reportingLinesData: reportingLinesData,
    shouldShowGiveKudos: shouldShowGiveKudos,
    teamCentralBaseUrl: teamCentralBaseUrl,
    isLoading: isLoading,
    hasError: hasError
  };
};

/**
 * Renders the profile card popup for an editor mention node.
 */
function ProfileCardComponent(_ref5) {
  var _ref7;
  var profilecardProvider = _ref5.profilecardProvider,
    activeMention = _ref5.activeMention,
    dom = _ref5.dom,
    closeComponent = _ref5.closeComponent,
    onAgentMentionChatClick = _ref5.onAgentMentionChatClick,
    placement = _ref5.placement,
    offset = _ref5.offset,
    disableFocusTrap = _ref5.disableFocusTrap,
    hideActions = _ref5.hideActions;
  var _useState11 = (0, _react.useState)(undefined),
    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
    provider = _useState12[0],
    setProvider = _useState12[1];
  (0, _react.useEffect)(function () {
    profilecardProvider === null || profilecardProvider === void 0 || profilecardProvider.then(function (p) {
      setProvider(p);
    });
  }, [profilecardProvider]);
  var _ref6 = (_ref7 = activeMention.attrs) !== null && _ref7 !== void 0 ? _ref7 : {},
    id = _ref6.id,
    text = _ref6.text,
    accessLevel = _ref6.accessLevel,
    userType = _ref6.userType;
  (0, _react.useEffect)(function () {
    return (0, _bindEventListener.bind)(window, {
      type: 'keydown',
      listener: function listener(e) {
        if (e.key === 'Escape') {
          closeComponent();
        }
      }
    });
  });
  if (!(0, _expVal.expVal)('platform_editor_agent_mentions', 'isEnabled', false)) {
    return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
      referenceElement: dom,
      placement: placement,
      offset: offset,
      disableFocusTrap: disableFocusTrap
    }, /*#__PURE__*/React.createElement(UserProfileCardContent, {
      accessLevel: accessLevel,
      id: id,
      provider: provider,
      text: text,
      hideActions: hideActions
    }));
  }
  var isAgentMention = isAgentMentionType(userType);
  return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
    referenceElement: dom,
    placement: placement,
    offset: offset,
    disableFocusTrap: disableFocusTrap
  }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
    accountId: id,
    provider: provider,
    hideActions: hideActions,
    text: (0, _expVal.expVal)('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? text : undefined,
    onChatClick: onAgentMentionChatClick && (0, _fg.fg)('platform_editor_agent_mentions_drop_one_fixes') ? function (event, agentStudioId) {
      return (
        // agentMentionContext is already captured in the onAgentMentionChatClick
        // closure built by profileCardRenderer at chip-click time via doc.descendants()
        onAgentMentionChatClick(agentStudioId !== null && agentStudioId !== void 0 ? agentStudioId : id)
      );
    } : undefined
  }) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
    accessLevel: accessLevel,
    id: id,
    provider: provider,
    text: text,
    hideActions: hideActions
  }));
}
var UserProfileCardContent = function UserProfileCardContent(_ref8) {
  var accessLevel = _ref8.accessLevel,
    id = _ref8.id,
    provider = _ref8.provider,
    text = _ref8.text,
    hideActions = _ref8.hideActions;
  var actions = (0, _react.useMemo)(function () {
    return hideActions ? [] : provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
  }, [hideActions, accessLevel, id, provider, text]);
  var _useProfileCardState = useProfileCardState({
      id: id,
      provider: provider
    }),
    data = _useProfileCardState.data,
    reportingLinesData = _useProfileCardState.reportingLinesData,
    shouldShowGiveKudos = _useProfileCardState.shouldShowGiveKudos,
    teamCentralBaseUrl = _useProfileCardState.teamCentralBaseUrl,
    isLoading = _useProfileCardState.isLoading,
    hasError = _useProfileCardState.hasError;
  return /*#__PURE__*/React.createElement(LoadingWrapper, {
    isLoading: isLoading
  }, /*#__PURE__*/React.createElement(_user.ProfileCardLazy, {
    avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
    accountType: data === null || data === void 0 ? void 0 : data.accountType,
    status: data === null || data === void 0 ? void 0 : data.status,
    statusModifiedDate: data === null || data === void 0 ? void 0 : data.statusModifiedDate,
    timestring: data === null || data === void 0 ? void 0 : data.timestring,
    isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
    isBot: data === null || data === void 0 ? void 0 : data.isBot,
    fullName: data === null || data === void 0 ? void 0 : data.fullName,
    userId: id,
    cloudId: provider === null || provider === void 0 ? void 0 : provider.cloudId,
    actions: actions,
    isLoading: isLoading,
    location: data === null || data === void 0 ? void 0 : data.location,
    companyName: data === null || data === void 0 ? void 0 : data.companyName,
    customLozenges: data === null || data === void 0 ? void 0 : data.customLozenges,
    nickname: data === null || data === void 0 ? void 0 : data.nickname,
    email: data === null || data === void 0 ? void 0 : data.email,
    hasError: hasError,
    reportingLines: reportingLinesData,
    isKudosEnabled: shouldShowGiveKudos,
    teamCentralBaseUrl: teamCentralBaseUrl,
    isRenderedInPortal: (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
  }));
};
var AgentProfileCardContent = function AgentProfileCardContent(_ref9) {
  var accountId = _ref9.accountId,
    provider = _ref9.provider,
    text = _ref9.text,
    onChatClick = _ref9.onChatClick,
    hideActions = _ref9.hideActions;
  var agentName = (text !== null && text !== void 0 ? text : '').replace(LEADING_AT_SIGN_RE, '');
  return (0, _expVal.expVal)('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
    accountId: accountId,
    cloudId: provider.cloudId,
    resourceClient: provider.resourceClient,
    agentName: agentName,
    onChatClick: onChatClick,
    hideAgentActions: hideActions,
    hideConversationStarters: hideActions,
    hideStarButton: hideActions,
    hideAiDisclaimer: hideActions,
    showCreatorNameWithoutLink: hideActions
  }) : /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
    accountId: accountId,
    cloudId: provider.cloudId,
    resourceClient: provider.resourceClient,
    onChatClick: onChatClick,
    hideAgentActions: hideActions,
    hideConversationStarters: hideActions,
    hideStarButton: hideActions,
    hideAiDisclaimer: hideActions,
    showCreatorNameWithoutLink: hideActions
  });
};