/* 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 (