import React from 'react' ; import messageDirection from '@ringcentral-integration/commons/enums/messageDirection' ; import messageTypes from '@ringcentral-integration/commons/enums/messageTypes' ; import ComposeTextIcon from '../../assets/images/ComposeText.svg' ; import FaxInboundIcon from '../../assets/images/FaxInbound.svg' ; import FaxOutboundIcon from '../../assets/images/FaxOutbound.svg' ; import GroupConversationIcon from '../../assets/images/GroupConversation.svg' ; import VoicemailIcon from '../../assets/images/VoicemailIcon.svg' ; import i18n from './i18n' ; import styles from './styles.scss' ; type ConversationIconProps = { group ? : boolean ; type ? : string ; currentLocale ? : string ; direction ? : string ; } ; export const ConversationIcon = ( { group , type , currentLocale , direction , } ) => { let title ; let icon ; switch ( type ) { case messageTypes . voiceMail : title = i18n . getString ( messageTypes . voiceMail , currentLocale ) ; icon = < VoicemailIcon width = { 23 } className = { styles . icon } / > ; break ; case messageTypes . fax : title = i18n . getString ( messageTypes . fax , currentLocale ) ; icon = direction === messageDirection . inbound ? ( < FaxInboundIcon width = { 21 } className = { styles . icon } / > ) : ( < FaxOutboundIcon width = { 21 } className = { styles . icon } / > ) ; break ; default : title = group ? i18n . getString ( 'groupConversation' , currentLocale ) : i18n . getString ( 'conversation' , currentLocale ) ; icon = group ? ( < GroupConversationIcon width = { 19 } className = { styles . icon } / > ) : ( < ComposeTextIcon width = { 18 } className = { styles . icon } / > ) ; } return ( < div className = { styles . conversationIcon } > < span title = { title } > { icon } < /span> < /div>); } ; ConversationIcon . defaultProps = { group : false , type : undefined , currentLocale : undefined , direction : undefined , } ;