@atlaskit/profilecard/dist/es2019/components/User/ProfileCardDetails.js

A React component to display a card with user information.

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { FormattedMessage } from 'react-intl-next';
import Lozenge from '@atlaskit/lozenge';
import { Box, Text, xcss } from '@atlaskit/primitives';
import relativeDate from '../../internal/relative-date';
import messages from '../../messages';
import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
import { IconLabel } from '../Icon';
import ReportingLinesDetails from './ReportingLinesDetails';
const detailedListWrapperStyles = xcss({
  margin: 'space.0',
  padding: 'space.0'
});
const fullNameLabelStyles = xcss({
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
});
const noMetaLabelStyles = xcss({
  marginTop: 'space.400',
  marginRight: '0',
  marginBottom: 'space.150',
  marginLeft: '0'
});
const metaLabelStyles = xcss({
  marginTop: 'space.150',
  marginRight: '0',
  marginBottom: '0',
  marginLeft: '0'
});
const disabledAccountStyles = xcss({
  color: 'color.text'
});
const activeAccountStyles = xcss({
  color: 'color.text.inverse'
});
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(Box, {
    xcss: [fullNameLabelStyles, activeAccountStyles, meta ? metaLabelStyles : noMetaLabelStyles],
    testId: "profilecard-name",
    id: "profilecard-name-label"
  }, 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(Text, {
    as: "p",
    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(Box, {
    xcss: [fullNameLabelStyles, noMetaLabelStyles, disabledAccountStyles],
    testId: "profilecard-name",
    id: "profilecard-name-label"
  }, 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(Box, {
    as: "dl",
    xcss: detailedListWrapperStyles
  }, /*#__PURE__*/React.createElement(IconLabel, {
    icon: "email",
    extraTopSpace: true
  }, 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
  }));
};