/* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */ import { RcAlert } from '@ringcentral/juno'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss'; import { checkShouldHidePhoneNumber } from '../../lib/checkShouldHidePhoneNumber'; import ContactDisplay from '../ContactDisplay'; import ConversationMessageList from '../ConversationMessageList'; import LogButton from '../LogButton'; import MessageInput, { MAX_PREVIEW_ATTACHMENT_SIZE } from '../MessageInput'; import { SpinnerOverlay } from '../SpinnerOverlay'; import i18n from './i18n'; import styles from './styles.scss'; class ConversationPanel extends Component { _mounted: any; _userSelection: any; dncAlert: any; constructor(props: any) { super(props); this.state = { selected: this.getInitialContactIndex(), isLogging: false, inputHeight: 41, loaded: false, alertHeight: 46, }; this._userSelection = false; } // @ts-expect-error TS(4114): This member must have an 'override' modifier becau... Remove this comment to see the full error message componentDidMount() { // @ts-expect-error TS(2339): Property 'showSpinner' does not exist on type 'Rea... Remove this comment to see the full error message if (!this.props.showSpinner) { this.loadConversation(); } this._mounted = true; } // @ts-expect-error TS(4114): This member must have an 'override' modifier becau... Remove this comment to see the full error message UNSAFE_componentWillReceiveProps(nextProps: any) { if ( !this._userSelection && // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message this.props.conversation && nextProps.conversation && (nextProps.conversation.conversationMatches !== // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message this.props.conversation.conversationMatches || nextProps.conversation.correspondentMatches !== // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message this.props.conversation.correspondentMatches) ) { this.setState({ selected: this.getInitialContactIndex(nextProps), }); } // @ts-expect-error TS(2339): Property 'showSpinner' does not exist on type 'Rea... Remove this comment to see the full error message if (!nextProps.showSpinner && this.props.showSpinner) { this.loadConversation(); } } // @ts-expect-error TS(4114): This member must have an 'override' modifier becau... Remove this comment to see the full error message componentDidUpdate(prevProps: any, prevState: any) { // @ts-expect-error TS(2339): Property 'messages' does not exist on type 'Readon... Remove this comment to see the full error message if (prevProps.messages !== this.props.messages) { // @ts-expect-error TS(2339): Property 'readMessages' does not exist on type 'Re... Remove this comment to see the full error message this.props.readMessages(this.props.conversationId); } // @ts-expect-error TS(2339): Property 'loaded' does not exist on type 'Readonly... Remove this comment to see the full error message if (prevState.loaded === false && this.state.loaded === true) { // @ts-expect-error TS(2339): Property 'messages' does not exist on type 'Readon... Remove this comment to see the full error message if (this.props.messages.length < this.props.perPage) { // @ts-expect-error TS(2339): Property 'loadPreviousMessages' does not exist on ... Remove this comment to see the full error message this.props.loadPreviousMessages(); } this.getDncAlertHeight(); } } // @ts-expect-error TS(4114): This member must have an 'override' modifier becau... Remove this comment to see the full error message componentWillUnmount() { this._mounted = false; // @ts-expect-error TS(2339): Property 'unloadConversation' does not exist on ty... Remove this comment to see the full error message this.props.unloadConversation(); } onSend = (text: any, attachments: any) => { const selectedContact = this.getSelectedContact(); // @ts-expect-error TS(2339): Property 'replyToReceivers' does not exist on type... Remove this comment to see the full error message this.props.replyToReceivers(text, attachments, selectedContact); }; onInputHeightChange = (value: any) => { this.setState({ inputHeight: value, }); }; onSelectContact = (value: any, idx: any) => { const { // @ts-expect-error TS(2339): Property 'showContactDisplayPlaceholder' does not ... Remove this comment to see the full error message showContactDisplayPlaceholder, // @ts-expect-error TS(2339): Property 'autoLog' does not exist on type 'Readonl... Remove this comment to see the full error message autoLog, // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message conversation, // @ts-expect-error TS(2339): Property 'shouldLogSelectRecord' does not exist on... Remove this comment to see the full error message shouldLogSelectRecord, // @ts-expect-error TS(2339): Property 'onSelectContact' does not exist on type ... Remove this comment to see the full error message onSelectContact, } = this.props; const selected = showContactDisplayPlaceholder ? parseInt(idx, 10) - 1 : parseInt(idx, 10); this._userSelection = true; this.setState({ selected, }); if (autoLog) { this.logConversation({ redirect: false, selected, prefill: false }); } if (shouldLogSelectRecord && typeof onSelectContact === 'function') { onSelectContact({ correspondentEntity: this.getSelectedContact(selected), conversation, }); } }; getMessageListHeight() { const { // @ts-expect-error TS(2339): Property 'restrictSendMessage' does not exist on t... Remove this comment to see the full error message restrictSendMessage, // @ts-expect-error TS(2339): Property 'renderLogInfoSection' does not exist on t... Remove this comment to see the full error message renderLogInfoSection, // @ts-expect-error TS(2339): Property 'isWide' does not exist on t... Remove this comment to see the full error message isWide, // @ts-expect-error TS(2339): Property 'supportAttachment' does not exist on t... Remove this comment to see the full error message supportAttachment, // @ts-expect-error TS(2339): Property 'supportEmoji' does not exist on t... Remove this comment to see the full error message supportEmoji, // @ts-expect-error TS(2339): Property 'attachments' does not exist on t... Remove this comment to see the full error message attachments, } = this.props; // @ts-expect-error TS(2339): Property 'alertHeight' does not exist on type 'Rea... Remove this comment to see the full error message const { alertHeight, inputHeight } = this.state; const headerHeight = 41; const alertMargin = 12; const logInfoHeight = isWide ? 60 : 100; const inputToolBarHeight = 40; const attachmentItemHeight = 50; let extraHeight = 0; if (restrictSendMessage?.(this.getSelectedContact())) { extraHeight = alertHeight + alertMargin + headerHeight; } else { // padding 2px and border 1px extraHeight = inputHeight + headerHeight + 3; } if (typeof renderLogInfoSection === 'function') { extraHeight += logInfoHeight; } if (supportAttachment || supportEmoji) { extraHeight += inputToolBarHeight; } else { // default UI top offset for input extraHeight += 10; } if (supportAttachment && attachments?.length) { extraHeight += (attachments.length > MAX_PREVIEW_ATTACHMENT_SIZE ? MAX_PREVIEW_ATTACHMENT_SIZE : attachments.length) * attachmentItemHeight; } return `calc(100% - ${extraHeight}px)`; } getDncAlertHeight() { if (this.dncAlert) { this.setState({ alertHeight: this.dncAlert.clientHeight, }); } } // @ts-expect-error TS(2339): Property 'selected' does not exist on type 'Readon... Remove this comment to see the full error message getSelectedContact = (selected = this.state.selected) => { // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message if (!this.props.conversation) { return null; } // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message const contactMatches = this.props.conversation.correspondentMatches; return ( (selected > -1 && contactMatches[selected]) || (contactMatches.length === 1 && contactMatches[0]) || null ); }; getInitialContactIndex(nextProps = this.props) { const { correspondentMatches, lastMatchedCorrespondentEntity, conversationMatches, // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message } = nextProps.conversation; let index = null; const correspondentMatchId = (lastMatchedCorrespondentEntity && lastMatchedCorrespondentEntity.id) || (conversationMatches[0] && conversationMatches[0].id); if (correspondentMatchId) { index = correspondentMatches.findIndex( (contact: any) => contact.id === correspondentMatchId, ); if (index > -1) return index; // @ts-ignore } else if (correspondentMatches.length && !this.props.disableAutoSelect) { return 0; } return -1; } getPhoneNumber() { // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message const { conversation: { correspondents = [] } = {} } = this.props; return ( (correspondents.length === 1 && (correspondents[0].phoneNumber || correspondents[0].extensionNumber)) || undefined ); } getGroupPhoneNumbers() { // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message const { conversation: { correspondents = [] } = {} } = this.props; const groupNumbers = correspondents.length > 1 ? correspondents.map( (correspondent: any) => correspondent.extensionNumber || correspondent.phoneNumber || undefined, ) : null; return groupNumbers; } getFallbackContactName() { // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message const { conversation: { correspondents = [] } = {} } = this.props; return (correspondents.length === 1 && correspondents[0].name) || undefined; } loadConversation() { // @ts-expect-error TS(2339): Property 'loadConversation' does not exist on type... Remove this comment to see the full error message this.props.loadConversation(this.props.conversationId); this.setState({ loaded: true }); } async logConversation({ redirect = true, selected, prefill = true, }: any = {}) { if ( // @ts-expect-error TS(2339): Property 'onLogConversation' does not exist on typ... Remove this comment to see the full error message typeof this.props.onLogConversation === 'function' && this._mounted && // @ts-expect-error TS(2339): Property 'isLogging' does not exist on type 'Reado... Remove this comment to see the full error message !this.state.isLogging ) { this.setState({ isLogging: true, }); // @ts-expect-error TS(2339): Property 'onLogConversation' does not exist on typ... Remove this comment to see the full error message await this.props.onLogConversation({ correspondentEntity: this.getSelectedContact(selected), // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message conversationId: this.props.conversation.conversationId, redirect, prefill, }); if (this._mounted) { this.setState({ isLogging: false, }); } } } // @ts-expect-error TS(2300): Duplicate identifier 'logConversation'. logConversation = this.logConversation.bind(this); // @ts-expect-error TS(4114): This member must have an 'override' modifier becau... Remove this comment to see the full error message render() { // @ts-expect-error TS(2339): Property 'loaded' does not exist on type 'Readonly... Remove this comment to see the full error message if (!this.state.loaded) { return (
); } let conversationBody = null; // @ts-expect-error TS(2339): Property 'showSpinner' does not exist on type 'Rea... Remove this comment to see the full error message const loading = this.props.showSpinner; // @ts-expect-error TS(2339): Property 'recipients' does not exist on type 'Read... Remove this comment to see the full error message const { recipients, messageSubjectRenderer } = this.props; if (!loading) { conversationBody = ( 1} messageSubjectRenderer={messageSubjectRenderer} // @ts-expect-error TS(2339): Property 'formatPhone' does not exist on type 'Rea... Remove this comment to see the full error message formatPhone={this.props.formatPhone} // @ts-expect-error TS(2339): Property 'loadingNextPage' does not exist on type ... Remove this comment to see the full error message loadingNextPage={this.props.loadingNextPage} // @ts-expect-error TS(2339): Property 'loadPreviousMessages' does not exist on ... Remove this comment to see the full error message loadPreviousMessages={this.props.loadPreviousMessages} // @ts-expect-error TS(2339): Property 'onAttachmentDownload' does not exist on ... Remove this comment to see the full error message onAttachmentDownload={this.props.onAttachmentDownload} // @ts-expect-error TS(2339): Property 'onLinkClick' does not exist on ... Remove this comment to see the full error message onLinkClick={this.props.onLinkClick} /> ); } const { isLogging, conversationMatches, correspondentMatches } = // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message this.props.conversation; const groupNumbers = this.getGroupPhoneNumbers(); const phoneNumber = this.getPhoneNumber(); // TODO: Confirm on group messages similar to MessageItem const shouldHideNumber = // @ts-expect-error TS(2339): Property 'enableCDC' does not exist on type 'Reado... Remove this comment to see the full error message this.props.enableCDC && checkShouldHidePhoneNumber(phoneNumber, correspondentMatches); const fallbackName = this.getFallbackContactName(); // @ts-expect-error TS(2339): Property 'renderExtraButton' does not exist on typ... Remove this comment to see the full error message const extraButton = this.props.renderExtraButton ? // @ts-expect-error TS(2339): Property 'renderExtraButton' does not exist on typ... Remove this comment to see the full error message this.props.renderExtraButton(this.props.conversation, { logConversation: this.logConversation, // @ts-expect-error TS(2339): Property 'isLogging' does not exist on type 'Reado... Remove this comment to see the full error message isLogging: isLogging || this.state.isLogging, }) : null; const logButton = // @ts-expect-error TS(2339): Property 'onLogConversation' does not exist on typ... Remove this comment to see the full error message this.props.onLogConversation && // @ts-expect-error TS(2339): Property 'renderExtraButton' does not exist on typ... Remove this comment to see the full error message !this.props.renderExtraButton && // @ts-expect-error TS(2339): Property 'renderLogInfoSection' does not exist on ... Remove this comment to see the full error message !this.props.renderLogInfoSection ? ( 0} // @ts-expect-error TS(2339): Property 'isLogging' does not exist on type 'Reado... Remove this comment to see the full error message isLogging={isLogging || this.state.isLogging} // @ts-expect-error TS(2322): Type '{ className: string; onLog: ({ redirect, sel... Remove this comment to see the full error message currentLocale={this.props.currentLocale} /> ) : null; const defaultContactDisplay = ( ); return (
{/* @ts-expect-error TS(2339): Property 'renderConversationTitle' does */} {this.props.renderConversationTitle?.({ // @ts-expect-error TS(2339): Property 'conversation' does not exist on type 'Re... Remove this comment to see the full error message conversation: this.props.conversation, phoneNumber, defaultContactDisplay, }) || defaultContactDisplay} this.props.goBack()} data-sign="backButton" className={styles.backButton} > {extraButton &&
{extraButton}
} {logButton}
{/* @ts-expect-error TS(2339): Property 'renderLogInfoSection' does not */} {this.props.renderLogInfoSection?.(this.props.conversation) || null} {conversationBody} {/* @ts-expect-error TS(2339): Property 'restrictSendMessage' does not */} {this.props.restrictSendMessage?.(this.getSelectedContact()) ? ( { this.dncAlert = target; }} severity="error" size="small" className={styles.alert} data-sign="dncAlert" > {/* @ts-expect-error TS(2339): Property 'currentLocale' does not */} {i18n.getString('dncAlert', this.props.currentLocale)} ) : ( )}
); } } // @ts-expect-error TS(2339): Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message ConversationPanel.propTypes = { isWide: PropTypes.bool, brand: PropTypes.string.isRequired, replyToReceivers: PropTypes.func.isRequired, // @ts-expect-error TS(2339): Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message messages: ConversationMessageList.propTypes.messages, updateMessageText: PropTypes.func, messageText: PropTypes.string, recipients: PropTypes.arrayOf( PropTypes.shape({ phoneNumber: PropTypes.string, extensionNumber: PropTypes.string, name: PropTypes.string, }), ).isRequired, sendButtonDisabled: PropTypes.bool.isRequired, currentLocale: PropTypes.string.isRequired, showSpinner: PropTypes.bool.isRequired, disableLinks: PropTypes.bool, conversation: PropTypes.object.isRequired, onLogConversation: PropTypes.func, areaCode: PropTypes.string.isRequired, countryCode: PropTypes.string.isRequired, autoLog: PropTypes.bool, enableContactFallback: PropTypes.bool, dateTimeFormatter: PropTypes.func.isRequired, goBack: PropTypes.func.isRequired, showContactDisplayPlaceholder: PropTypes.bool, contactPlaceholder: PropTypes.string, sourceIcons: PropTypes.object, phoneTypeRenderer: PropTypes.func, phoneSourceNameRenderer: PropTypes.func, showGroupNumberName: PropTypes.bool, messageSubjectRenderer: PropTypes.func, formatPhone: PropTypes.func.isRequired, readMessages: PropTypes.func.isRequired, loadPreviousMessages: PropTypes.func.isRequired, unloadConversation: PropTypes.func.isRequired, perPage: PropTypes.number, conversationId: PropTypes.string.isRequired, loadConversation: PropTypes.func, renderExtraButton: PropTypes.func, loadingNextPage: PropTypes.bool, inputExpandable: PropTypes.bool, attachments: PropTypes.arrayOf( PropTypes.shape({ size: PropTypes.number, name: PropTypes.string, }), ), supportAttachment: PropTypes.bool, supportEmoji: PropTypes.bool, addAttachments: PropTypes.func, removeAttachment: PropTypes.func, onAttachmentDownload: PropTypes.func, restrictSendMessage: PropTypes.func, shouldLogSelectRecord: PropTypes.bool, onSelectContact: PropTypes.func, renderContactList: PropTypes.func, renderLogInfoSection: PropTypes.func, dropdownClassName: PropTypes.string, enableCDC: PropTypes.bool, renderConversationTitle: PropTypes.func, isMultipleSiteEnabled: PropTypes.bool, currentSiteCode: PropTypes.string, maxExtensionNumberLength: PropTypes.number, }; // @ts-expect-error TS(2339): Property 'defaultProps' does not exist on type 'ty... Remove this comment to see the full error message ConversationPanel.defaultProps = { isWide: true, disableLinks: false, onLogConversation: undefined, autoLog: false, enableContactFallback: undefined, showContactDisplayPlaceholder: true, contactPlaceholder: '', sourceIcons: undefined, phoneTypeRenderer: undefined, phoneSourceNameRenderer: undefined, showGroupNumberName: false, messageText: '', updateMessageText: () => null, messageSubjectRenderer: undefined, perPage: undefined, loadConversation: () => null, renderExtraButton: undefined, loadingNextPage: false, inputExpandable: undefined, attachments: [], supportAttachment: false, supportEmoji: false, addAttachments: () => null, removeAttachment: () => null, onAttachmentDownload: undefined, restrictSendMessage: undefined, shouldLogSelectRecord: false, onSelectContact: undefined, renderContactList: undefined, renderLogInfoSection: undefined, dropdownClassName: null, enableCDC: false, renderConversationTitle: undefined, isMultipleSiteEnabled: false, currentSiteCode: '', maxExtensionNumberLength: 6, }; export default ConversationPanel;