@xo-union/tk-component-header-nav/lib/components/HeaderNav/ConversationsIcon/index.js

import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import Icon from "@xo-union/tk-component-icons";
import { PillBadge } from "@xo-union/tk-component-badges";
import { useHeaderNavContext } from "../Context.js";
const ConversationsIcon = _ref => {
  let {
    unreadMessagesCount,
    className
  } = _ref;
  const {
    classes,
    links
  } = useHeaderNavContext();
  const messageCountBetween1And9 = unreadMessagesCount > 0 && unreadMessagesCount <= 9;
  const messageCountBetween10And99 = unreadMessagesCount > 9 && unreadMessagesCount <= 99;
  let description = 'Vendor conversation inbox';
  const unreadMessagesCountText = unreadMessagesCount > 99 ? '99+' : unreadMessagesCount;
  if (unreadMessagesCount > 0) {
    description += ` with ${unreadMessagesCountText} unread messages`;
  }
  return /*#__PURE__*/React.createElement("a", {
    "aria-label": description,
    className: cx(classes.conversations, messageCountBetween1And9 && classes['messages-nine-or-fewer'], messageCountBetween10And99 && classes['messages-ninety-nine-or-fewer'], unreadMessagesCount > 99 && classes['messages-over-ninety-nine'], className),
    href: links.INBOX,
    title: description,
    "data-trackable-selection": "inbox icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "chat",
    size: "md",
    className: classes['conversations-icon']
  }), unreadMessagesCount > 0 ? /*#__PURE__*/React.createElement(PillBadge, {
    className: classes['conversations-badge'],
    "aria-hidden": "true"
  }, unreadMessagesCountText) : null);
};
process.env.NODE_ENV !== "production" ? ConversationsIcon.propTypes = {
  unreadMessagesCount: PropTypes.number.isRequired,
  className: PropTypes.string
} : void 0;
export default ConversationsIcon;