import React from 'react'; import classNames from 'classnames'; import { LocalizerType } from '../types/Util'; import { validateNumber } from '../types/PhoneNumber'; export interface Props { phoneNumber: string; i18n: LocalizerType; onClick: () => void; } export class StartNewConversation extends React.PureComponent<Props> { public render() { const { phoneNumber, i18n, onClick } = this.props; const error = validateNumber(phoneNumber, i18n); const avatar = error ? '!' : '#'; const click = error ? undefined : onClick; return ( <div role="button" className={classNames( 'module-start-new-conversation', !error && 'valid' )} onClick={click} > <div className="module-start-new-conversation__avatar">{avatar}</div> <div className="module-start-new-conversation__content"> <div className="module-start-new-conversation__number"> {phoneNumber} </div> <div className="module-start-new-conversation__text"> {error || i18n('startConversation')} </div> </div> </div> ); } }