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

Mentions plugin for @atlaskit/editor-core

/* ProfileCardComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./ProfileCardComponent.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useEffect, useMemo, useState } from 'react';
import { bind } from 'bind-event-listener';
import Loadable from 'react-loadable';
// oxlint-disable-next-line @atlassian/no-restricted-imports
import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { ProfileCardLazy } from '@atlaskit/profilecard/lazy-profile-card';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
import { Popup } from './PopperWrapper';

// eslint-disable-next-line require-unicode-regexp
var LEADING_AT_SIGN_RE = /^@/;
var loadAgentProfileCardResourced = function loadAgentProfileCardResourced() {
  return import( /* 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;
  });
};
var AgentProfileCardResourcedLazy = lazyForPaint(function () {
  return import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
  '@atlaskit/profilecard/agent-profile-card-resourced').then(function (_ref2) {
    var AgentProfileCardResourced = _ref2.AgentProfileCardResourced;
    return AgentProfileCardResourced;
  });
});
var AgentProfileCardResourcedLoadable = Loadable({
  loader: loadAgentProfileCardResourced,
  loading: function loading() {
    return null;
  }
});
var AgentProfileCardResourced = function AgentProfileCardResourced(props) {
  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
    fallback: null
  }, /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, props)) :
  /*#__PURE__*/
  // eslint-disable-next-line react/jsx-props-no-spreading -- forward the loader props to the profile card
  React.createElement(AgentProfileCardResourcedLoadable, props);
};
var styles = {
  loadingStyles: "_2rko12b0 _16qs130s"
};
var LoadingWrapper = function LoadingWrapper(_ref3) {
  var children = _ref3.children,
    isLoading = _ref3.isLoading;
  return isLoading ? /*#__PURE__*/React.createElement("div", {
    className: ax([styles.loadingStyles])
  }, children) : children;
};
export var isAgentMentionType = function isAgentMentionType(userType) {
  return userType === 'APP' || userType === 'AGENT';
};
export var useProfileCardState = function useProfileCardState(_ref4) {
  var id = _ref4.id,
    provider = _ref4.provider;
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    data = _useState2[0],
    setData = _useState2[1];
  var _useState3 = useState(undefined),
    _useState4 = _slicedToArray(_useState3, 2),
    reportingLinesData = _useState4[0],
    setReportingLinesData = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    shouldShowGiveKudos = _useState6[0],
    setShouldShowGiveKudos = _useState6[1];
  var _useState7 = useState(undefined),
    _useState8 = _slicedToArray(_useState7, 2),
    teamCentralBaseUrl = _useState8[0],
    setTeamCentralBaseUrl = _useState8[1];
  var _useState9 = useState(false),
    _useState0 = _slicedToArray(_useState9, 2),
    isLoading = _useState0[0],
    setIsLoading = _useState0[1];
  var _useState1 = useState(false),
    _useState10 = _slicedToArray(_useState1, 2),
    hasError = _useState10[0],
    setHasError = _useState10[1];

  // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
  useEffect(function () {
    var fetchData = /*#__PURE__*/function () {
      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl, _t;
        return _regeneratorRuntime.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 = _slicedToArray(_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 _ref5.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.
 */
export function ProfileCardComponent(_ref6) {
  var _ref8;
  var profilecardProvider = _ref6.profilecardProvider,
    activeMention = _ref6.activeMention,
    dom = _ref6.dom,
    closeComponent = _ref6.closeComponent,
    onAgentMentionChatClick = _ref6.onAgentMentionChatClick,
    placement = _ref6.placement,
    offset = _ref6.offset,
    disableFocusTrap = _ref6.disableFocusTrap,
    hideActions = _ref6.hideActions;
  var _useState11 = useState(undefined),
    _useState12 = _slicedToArray(_useState11, 2),
    provider = _useState12[0],
    setProvider = _useState12[1];
  useEffect(function () {
    profilecardProvider === null || profilecardProvider === void 0 || profilecardProvider.then(function (p) {
      setProvider(p);
    });
  }, [profilecardProvider]);
  var _ref7 = (_ref8 = activeMention.attrs) !== null && _ref8 !== void 0 ? _ref8 : {},
    id = _ref7.id,
    text = _ref7.text,
    accessLevel = _ref7.accessLevel,
    userType = _ref7.userType;
  useEffect(function () {
    return bind(window, {
      type: 'keydown',
      listener: function listener(e) {
        if (e.key === 'Escape') {
          closeComponent();
        }
      }
    });
  });
  if (!expVal('platform_editor_agent_mentions', 'isEnabled', false) && !fg('platform_editor_agent_card_fixes')) {
    return /*#__PURE__*/React.createElement(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(Popup, {
    referenceElement: dom,
    placement: placement,
    offset: offset,
    disableFocusTrap: disableFocusTrap
  }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
    accountId: id,
    provider: provider,
    hideActions: hideActions,
    text: expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? text : undefined,
    onChatClick: onAgentMentionChatClick && fg('platform_editor_agent_mentions_drop_one_fixes') ? function (event, agentStudioId) {
      // 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);
      // Dismiss the profile card once the Rovo chat panel opens (EDITOR-8257).
      if (fg('platform_editor_agent_card_close_on_chat')) {
        closeComponent();
      }
    } : undefined
  }) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
    accessLevel: accessLevel,
    id: id,
    provider: provider,
    text: text,
    hideActions: hideActions
  }));
}
var UserProfileCardContent = function UserProfileCardContent(_ref9) {
  var accessLevel = _ref9.accessLevel,
    id = _ref9.id,
    provider = _ref9.provider,
    text = _ref9.text,
    hideActions = _ref9.hideActions;
  var actions = 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(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: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
  }));
};
var AgentProfileCardContent = function AgentProfileCardContent(_ref0) {
  var accountId = _ref0.accountId,
    provider = _ref0.provider,
    text = _ref0.text,
    onChatClick = _ref0.onChatClick,
    hideActions = _ref0.hideActions;
  var agentName = (text !== null && text !== void 0 ? text : '').replace(LEADING_AT_SIGN_RE, '');
  return expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false) ? /*#__PURE__*/React.createElement(AgentProfileCardResourced, {
    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(AgentProfileCardResourced, {
    accountId: accountId,
    cloudId: provider.cloudId,
    resourceClient: provider.resourceClient,
    onChatClick: onChatClick,
    hideAgentActions: hideActions,
    hideConversationStarters: hideActions,
    hideStarButton: hideActions,
    hideAiDisclaimer: hideActions,
    showCreatorNameWithoutLink: hideActions
  });
};