@atlaskit/profilecard 16.11.0 → 17.0.0

package/dist/es2019/components/User/ProfileCard.js

@@ -1,325 +1,194 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
 import Button from '@atlaskit/button/custom-theme-button';
-import Lozenge from '@atlaskit/lozenge';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { AnalyticsName } from '../../internal/analytics';
-import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
-import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, AppTitleLabel, CardContainer, CardContent, CardWrapper, CustomLozengeContainer, DetailsGroup, DisabledInfo, FullNameLabel, JobTitleLabel, KudosBlobAnimation, LozengeWrapper, ProfileImage, SpinnerContainer } from '../../styled/Card';
+import { ActionButtonGroup, ActionsFlexSpacer, AnimatedKudosButton, CardContainer, CardContent, CardWrapper, KudosBlobAnimation, ProfileImage, SpinnerContainer } from '../../styled/Card';
+import { actionClicked, fireEvent, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
+import { getPageTime } from '../../util/performance';
 import { ErrorMessage } from '../Error';
-import { IconLabel } from '../Icon';
-import { OverflowProfileCardButtons } from './OverflowProfileCardButtons';
-import ReportingLinesDetails from './ReportingLinesDetails';
-export default class Profilecard extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "GIVE_KUDOS_ACTION_ID", 'give-kudos');
-
-    _defineProperty(this, "durationSince", from => {
-      const fromParsed = from || 0;
-      return fromParsed > 0 ? Date.now() - fromParsed : null;
-    });
-
-    _defineProperty(this, "callClientFetchProfile", (...args) => {
-      if (this.props.clientFetchProfile) {
-        this.props.clientFetchProfile(...args);
-      }
-    });
-
-    _defineProperty(this, "callAnalytics", (id, options) => {
-      if (this.props.analytics) {
-        this.props.analytics(id, options);
-      }
-    });
-
-    _defineProperty(this, "kudosUrl", () => {
-      const recipientId = this.props.userId && `&recipientId=${this.props.userId}` || '';
-      const cloudId = this.props.cloudId && `&cloudId=${this.props.cloudId}` || '';
-      return `${this.props.teamCentralBaseUrl}/kudos/give?type=individual${recipientId}${cloudId}`;
-    });
-
-    _defineProperty(this, "kudosButtonCallback", () => {
-      if (this.props.openKudosDrawer) {
-        this.props.openKudosDrawer();
-      } else {
-        window.open(this.kudosUrl());
-      }
-    });
-
-    _defineProperty(this, "renderButton", (action, idx) => {
-      const isGiveKudosActionButton = action.id === this.GIVE_KUDOS_ACTION_ID;
-      const actionButton = /*#__PURE__*/React.createElement(Button, {
-        appearance: "default",
-        key: action.id || idx,
-        onClick: (event, ...args) => this.onActionClick(action, args, event),
-        href: action.link
-      }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
-
-      if (isGiveKudosActionButton) {
-        return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, actionButton);
-      }
-
-      return actionButton;
-    });
-
-    this.timeOpen = null;
-
-    this.clientFetchProfile = (...args) => {
-      this.callAnalytics(AnalyticsName.PROFILE_CARD_RELOAD, {});
-      this.callClientFetchProfile(...args);
+import { ACTION_OVERFLOW_THRESHOLD, OverflowProfileCardButtons } from './OverflowProfileCardButtons';
+import { ProfileCardDetails } from './ProfileCardDetails';
+const GIVE_KUDOS_ACTION_ID = 'give-kudos';
+
+const useKudos = (cloudId, userId, teamCentralBaseUrl, openKudosDrawer) => {
+  const kudosUrl = useMemo(() => {
+    const recipientId = userId ? `&recipientId=${userId}` : '';
+    const cloudIdParam = cloudId ? `&cloudId=${cloudId}` : '';
+    return `${teamCentralBaseUrl || ''}/kudos/give?type=individual${recipientId}${cloudIdParam}`;
+  }, [cloudId, teamCentralBaseUrl, userId]);
+  const kudosButtonCallback = useCallback(() => {
+    if (openKudosDrawer) {
+      openKudosDrawer();
+    } else {
+      window.open(kudosUrl);
+    }
+  }, [kudosUrl, openKudosDrawer]);
+  const kudosAction = useMemo(() => {
+    return {
+      label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
+      id: GIVE_KUDOS_ACTION_ID,
+      callback: kudosButtonCallback,
+      link: kudosUrl
     };
-  }
-
-  componentDidMount() {
-    this.timeOpen = Date.now();
-    this.callAnalytics(AnalyticsName.PROFILE_CARD_VIEW, {});
-  }
-
-  renderErrorMessage() {
-    return /*#__PURE__*/React.createElement(ErrorMessage, {
-      reload: this.props.clientFetchProfile && this.clientFetchProfile,
-      errorType: this.props.errorType
-    });
-  }
-
-  getActions() {
-    const actions = this.props.actions || [];
-
-    if (!this.props.isCurrentUser && this.props.isKudosEnabled) {
-      const kudosAction = {
-        label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
-        id: this.GIVE_KUDOS_ACTION_ID,
-        callback: () => {
-          this.kudosButtonCallback();
-        },
-        link: this.kudosUrl()
-      };
-      return actions.concat([kudosAction]);
+  }, [kudosButtonCallback, kudosUrl]);
+  return {
+    kudosAction,
+    kudosButtonCallback,
+    kudosUrl
+  };
+};
+
+const Wrapper = props => /*#__PURE__*/React.createElement(CardWrapper, {
+  "data-testid": "profilecard"
+}, props.children);
+
+export const ProfilecardInternal = props => {
+  const [openTime] = useState(getPageTime());
+  const {
+    createAnalyticsEvent
+  } = props;
+  const fireAnalytics = useCallback(payload => {
+    if (createAnalyticsEvent) {
+      fireEvent(createAnalyticsEvent, payload);
     }
-
-    return actions;
-  }
-
-  renderActionsButtons() {
-    if (this.props.actions && this.props.actions.length === 0) {
-      return null;
+  }, [createAnalyticsEvent]);
+  const fireAnalyticsWithDuration = useCallback(generator => {
+    const elapsed = getPageTime() - openTime;
+    const event = generator(elapsed);
+    fireAnalytics(event);
+  }, [fireAnalytics, openTime]);
+  const {
+    kudosAction
+  } = useKudos(props.cloudId, props.userId, props.teamCentralBaseUrl, props.openKudosDrawer);
+  const {
+    actions = [],
+    isCurrentUser,
+    isKudosEnabled,
+    status = 'active'
+  } = props;
+  const realActions = useMemo(() => {
+    if (isCurrentUser || !isKudosEnabled || status !== 'active') {
+      return actions;
     }
 
-    const actions = this.getActions();
-    const firstTwoActions = actions.slice(0, 2);
-    const restOfActions = actions && actions.length > 2 ? actions.slice(2) : undefined;
-    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, firstTwoActions.map((action, idx) => this.renderButton(action, idx)), restOfActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
-      actions: restOfActions,
-      onItemClick: (action, args, event) => this.onActionClick(action, args, event)
-    }));
-  }
-
-  onActionClick(action, args, event) {
-    this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-      id: action.id || null,
-      duration: this.durationSince(this.timeOpen)
-    });
-
-    if (action.callback && isBasicClick(event)) {
-      event.preventDefault();
-      action.callback(event, ...args);
+    return actions.concat([kudosAction]);
+  }, [actions, isCurrentUser, isKudosEnabled, kudosAction, status]);
+  const {
+    isLoading,
+    fullName,
+    hasError
+  } = props;
+  const canRender = !hasError && !isLoading && !!(fullName || status === 'closed');
+  useEffect(() => {
+    if (canRender) {
+      fireAnalyticsWithDuration(duration => profileCardRendered('user', 'content', {
+        duration,
+        numActions: realActions.length
+      }));
     }
-  }
+  }, [canRender, fireAnalyticsWithDuration, realActions]);
 
-  renderCardDetailsDefault() {
-    const {
-      meta,
-      location,
-      email,
-      timestring,
-      companyName,
-      customLozenges
-    } = this.props;
-    return /*#__PURE__*/React.createElement(DetailsGroup, null, this.renderFullNameAndPublicName(meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), customLozenges && this.renderCustomLozenges(customLozenges), /*#__PURE__*/React.createElement(IconLabel, {
-      icon: "email"
-    }, email), /*#__PURE__*/React.createElement(IconLabel, {
-      icon: "time"
-    }, timestring), /*#__PURE__*/React.createElement(IconLabel, {
-      icon: "companyName"
-    }, companyName), /*#__PURE__*/React.createElement(IconLabel, {
-      icon: "location"
-    }, location), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
-      reportingLines: this.props.reportingLines,
-      reportingLinesProfileUrl: this.props.reportingLinesProfileUrl,
-      onReportingLinesClick: this.props.onReportingLinesClick,
-      analytics: this.props.analytics,
-      getDuration: () => this.durationSince(this.timeOpen)
+  if (hasError) {
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+      reload: props.clientFetchProfile,
+      errorType: props.errorType || null,
+      fireAnalytics: fireAnalytics
     }));
   }
 
-  renderCardDetailsForDisabledAccount() {
-    const {
-      status,
-      companyName,
-      hasDisabledAccountLozenge
-    } = this.props;
-    return /*#__PURE__*/React.createElement(DetailsGroup, null, /*#__PURE__*/React.createElement(FullNameLabel, {
-      noMeta: true,
-      isDisabledAccount: true
-    }, this.getDisabledAccountName()), hasDisabledAccountLozenge && /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
-      appearance: "default",
-      isBold: true
-    }, status === 'inactive' && /*#__PURE__*/React.createElement(FormattedMessage, messages.inactiveAccountMsg), status === 'closed' && /*#__PURE__*/React.createElement(FormattedMessage, messages.closedAccountMsg))), /*#__PURE__*/React.createElement(DisabledInfo, null, this.getDisabledAccountDesc()), status === 'inactive' && /*#__PURE__*/React.createElement(IconLabel, {
-      icon: "companyName"
-    }, companyName));
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(LoadingView, {
+      fireAnalyticsWithDuration: fireAnalyticsWithDuration
+    }));
   }
 
-  getDisabledAccountName() {
-    const {
-      nickname,
-      fullName,
-      status
-    } = this.props;
-
-    if (status === 'inactive') {
-      return fullName || nickname;
-    } else if (status === 'closed') {
-      return nickname || /*#__PURE__*/React.createElement(FormattedMessage, messages.disabledAccountDefaultName);
-    }
-
+  if (!canRender) {
     return null;
   }
 
-  getDisabledAccountDesc() {
-    const {
-      status = 'closed',
-      statusModifiedDate,
-      disabledAccountMessage
-    } = this.props;
-    const date = statusModifiedDate ? new Date(statusModifiedDate * 1000) : null;
-    const relativeDateKey = relativeDate(date); // consumer does not want to use built-in message
-
-    if (disabledAccountMessage) {
-      return disabledAccountMessage;
-    }
-
-    let secondSentence = null;
-
-    if (relativeDateKey) {
-      secondSentence = /*#__PURE__*/React.createElement(FormattedMessage // @ts-ignore
-      , messages[`${status}AccountDescMsgHasDate${relativeDateKey}`]);
-    } else {
-      secondSentence =
-      /*#__PURE__*/
-      // @ts-ignore
-      React.createElement(FormattedMessage, messages[`${status}AccountDescMsgNoDate`]);
-    }
-
-    return /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.generalDescMsgForDisabledUser), ' ', secondSentence);
-  }
-
-  renderFullNameAndPublicName(meta) {
-    const {
-      nickname,
-      fullName
-    } = this.props;
-
-    if (!fullName && !nickname) {
-      return null;
-    }
-
-    const displayName = fullName === nickname ? fullName : `${fullName}${nickname ? ` (${nickname}) ` : ''}`;
-    return /*#__PURE__*/React.createElement(FullNameLabel, {
-      noMeta: !meta
-    }, displayName);
-  } // Pass lozenges as an array rather taking it from the props. This will allow us combine the
-  // other lozenges (like the "deactivated" lozenge) if we need to.
-
-
-  renderCustomLozenges(lozenges) {
-    return lozenges.length > 0 ? /*#__PURE__*/React.createElement(CustomLozengeContainer, null, lozenges.map(({
-      text,
-      ...otherProps
-    }, index) => /*#__PURE__*/React.createElement(Lozenge, _extends({}, otherProps, {
-      key: index
-    }), text))) : null;
-  }
-
-  renderCardDetailsApp() {
-    return /*#__PURE__*/React.createElement(DetailsGroup, null, this.renderFullNameAndPublicName(), /*#__PURE__*/React.createElement(AppTitleLabel, null, "App"));
-  }
-
-  renderCardDetails() {
-    const {
-      isBot,
-      status
-    } = this.props;
-
-    if (isBot) {
-      return this.renderCardDetailsApp();
-    }
+  const isDisabledUser = status === 'inactive' || status === 'closed';
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(CardContainer, {
+    isDisabledUser: isDisabledUser,
+    withoutElevation: props.withoutElevation
+  }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "xlarge",
+    src: status !== 'closed' ? props.avatarUrl : undefined,
+    borderColor: token('elevation.shadow.overlay', N0)
+  })), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(ProfileCardDetails, _extends({}, props, {
+    status: status,
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+  })), realActions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), /*#__PURE__*/React.createElement(Actions, {
+    actions: realActions,
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+  })))));
+};
+
+const Actions = ({
+  actions,
+  fireAnalyticsWithDuration
+}) => {
+  const onActionClick = useCallback((action, args, event, index) => {
+    fireAnalyticsWithDuration(duration => actionClicked('user', {
+      duration,
+      hasHref: !!action.link,
+      hasOnClick: !!action.callback,
+      index,
+      actionId: action.id || 'no-id-specified'
+    }));
 
-    if (status === 'inactive' || status === 'closed') {
-      return this.renderCardDetailsForDisabledAccount();
+    if (action.callback && isBasicClick(event)) {
+      event.preventDefault();
+      action.callback(event, ...args);
     }
+  }, [fireAnalyticsWithDuration]);
 
-    return this.renderCardDetailsDefault();
+  if (!actions || actions.length === 0) {
+    return null;
   }
 
-  render() {
-    const {
-      fullName,
-      status,
-      withoutElevation,
-      reportingLines
-    } = this.props;
-    let cardContent = null; // @FIXME do closed users have empty fullName field?
-
-    const canRender = fullName || status === 'closed';
-
-    if (this.props.hasError) {
-      this.callAnalytics(AnalyticsName.PROFILE_CARD_ERROR, {});
-      cardContent = this.renderErrorMessage();
-    } else if (this.props.isLoading) {
-      cardContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, null));
-    } else if (canRender) {
-      var _reportingLines$manag, _reportingLines$repor;
+  const regularActions = actions.slice(0, ACTION_OVERFLOW_THRESHOLD);
+  const overflowActions = actions.length > ACTION_OVERFLOW_THRESHOLD ? actions.slice(ACTION_OVERFLOW_THRESHOLD) : undefined;
+  return /*#__PURE__*/React.createElement(ActionButtonGroup, {
+    "data-testid": "profilecard-actions"
+  }, regularActions.map((action, index) => {
+    const isKudos = action.id === GIVE_KUDOS_ACTION_ID;
+    const button = /*#__PURE__*/React.createElement(Button, {
+      appearance: "default",
+      key: action.id || index,
+      onClick: (event, ...args) => onActionClick(action, args, event, index),
+      href: action.link
+    }, action.label, isKudos && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
 
-      const isDisabledUser = status === 'inactive' || status === 'closed';
-      const actions = this.renderActionsButtons();
-      this.callAnalytics(AnalyticsName.PROFILE_CARD_LOADED, {
-        duration: this.durationSince(this.timeOpen),
-        managersCount: (reportingLines === null || reportingLines === void 0 ? void 0 : (_reportingLines$manag = reportingLines.managers) === null || _reportingLines$manag === void 0 ? void 0 : _reportingLines$manag.length) || 0,
-        directReportsCount: (reportingLines === null || reportingLines === void 0 ? void 0 : (_reportingLines$repor = reportingLines.reports) === null || _reportingLines$repor === void 0 ? void 0 : _reportingLines$repor.length) || 0
-      });
-      cardContent = /*#__PURE__*/React.createElement(CardContainer, {
-        isDisabledUser: isDisabledUser,
-        withoutElevation: withoutElevation
-      }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
-        size: "xlarge",
-        src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-        borderColor: token('elevation.surface.overlay', N0)
-      })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
+    if (isKudos) {
+      return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, button);
     }
 
-    return /*#__PURE__*/React.createElement(CardWrapper, null, cardContent);
-  }
-
-}
+    return button;
+  }), overflowActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
+    actions: overflowActions,
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    onItemClick: (action, args, event, index) => onActionClick(action, args, event, index + ACTION_OVERFLOW_THRESHOLD)
+  }));
+};
+
+const LoadingView = ({
+  fireAnalyticsWithDuration
+}) => {
+  useEffect(() => {
+    fireAnalyticsWithDuration(duration => profileCardRendered('user', 'spinner', {
+      duration
+    }));
+  }, [fireAnalyticsWithDuration]);
+  return /*#__PURE__*/React.createElement(SpinnerContainer, {
+    "data-testid": "profilecard-spinner-container"
+  }, /*#__PURE__*/React.createElement(Spinner, null));
+};
 
-_defineProperty(Profilecard, "defaultProps", {
-  isLoading: false,
-  hasError: false,
-  errorType: null,
-  status: 'active',
-  isBot: false,
-  isNotMentionable: false,
-  actions: [],
-  hasDisabledAccountLozenge: true,
-  customLozenges: [],
-  analytics: () => null,
-  clientFetchProfile: () => null
-});
+export default withAnalyticsEvents()(ProfilecardInternal);

package/dist/es2019/components/User/ProfileCardDetails.js

@@ -0,0 +1,118 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Lozenge from '@atlaskit/lozenge';
+import relativeDate from '../../internal/relative-date';
+import messages from '../../messages';
+import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, FullNameLabel, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
+import { IconLabel } from '../Icon';
+import ReportingLinesDetails from './ReportingLinesDetails';
+
+const renderName = (nickname, fullName, meta) => {
+  if (!fullName && !nickname) {
+    return null;
+  }
+
+  const isNicknameRedundant = !nickname || nickname === fullName;
+  const shownNickname = ` (${nickname}) `;
+  const displayName = isNicknameRedundant ? fullName : `${fullName}${shownNickname}`;
+  return /*#__PURE__*/React.createElement(FullNameLabel, {
+    noMeta: !meta,
+    "data-testid": "profilecard-name"
+  }, displayName);
+};
+
+const disabledAccountDesc = (statusModifiedDate, disabledAccountMessage, status = 'closed') => {
+  // consumer does not want to use built-in message
+  if (disabledAccountMessage) {
+    return disabledAccountMessage;
+  }
+
+  const date = statusModifiedDate ? new Date(statusModifiedDate * 1000) : null;
+  const relativeDateKey = relativeDate(date);
+  const msgKey = relativeDateKey ? `${status}AccountDescMsgHasDate${relativeDateKey}` : `${status}AccountDescMsgNoDate`;
+  const secondSentence = /*#__PURE__*/React.createElement(FormattedMessage, messages[msgKey]);
+  return /*#__PURE__*/React.createElement("p", {
+    "data-testid": "profilecard-disabled-account"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.generalDescMsgForDisabledUser), ' ', secondSentence);
+};
+
+const CustomLozenges = ({
+  lozenges = []
+}) => {
+  if (lozenges.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(CustomLozengeContainer, null, lozenges.map(({
+    text,
+    ...otherProps
+  }, index) => /*#__PURE__*/React.createElement(Lozenge, _extends({}, otherProps, {
+    key: index
+  }), text)));
+};
+
+const BotProfileCardDetails = props => {
+  const {
+    fullName,
+    nickname
+  } = props;
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/React.createElement(AppTitleLabel, null, "App"));
+};
+
+const DisabledProfileCardDetails = props => {
+  const {
+    companyName,
+    disabledAccountMessage,
+    fullName,
+    hasDisabledAccountLozenge = true,
+    nickname,
+    status,
+    statusModifiedDate
+  } = props;
+  const name = status === 'inactive' ? fullName || nickname : nickname || /*#__PURE__*/React.createElement(FormattedMessage, messages.disabledAccountDefaultName);
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, /*#__PURE__*/React.createElement(FullNameLabel, {
+    noMeta: true,
+    isDisabledAccount: true,
+    "data-testid": "profilecard-name"
+  }, name), hasDisabledAccountLozenge && /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: "default",
+    isBold: true
+  }, status === 'inactive' ? /*#__PURE__*/React.createElement(FormattedMessage, messages.inactiveAccountMsg) : /*#__PURE__*/React.createElement(FormattedMessage, messages.closedAccountMsg))), /*#__PURE__*/React.createElement(DisabledInfo, null, disabledAccountDesc(statusModifiedDate, disabledAccountMessage, status)), status === 'inactive' && /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "companyName"
+  }, companyName));
+};
+
+export const ProfileCardDetails = props => {
+  const {
+    meta,
+    status
+  } = props;
+
+  if (props.isBot) {
+    return /*#__PURE__*/React.createElement(BotProfileCardDetails, props);
+  }
+
+  if (status === 'inactive' || status === 'closed') {
+    return /*#__PURE__*/React.createElement(DisabledProfileCardDetails, _extends({}, props, {
+      status: status
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
+    lozenges: props.customLozenges
+  }), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "email"
+  }, props.email), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "time"
+  }, props.timestring), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "companyName"
+  }, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
+    icon: "location"
+  }, props.location), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
+    reportingLines: props.reportingLines,
+    reportingLinesProfileUrl: props.reportingLinesProfileUrl,
+    onReportingLinesClick: props.onReportingLinesClick,
+    fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
+  }));
+};