import React , { FunctionComponent , useCallback , useRef } from 'react' ; import classNames from 'classnames' ; import { BasicCallInfo } from '@ringcentral-integration/widgets/components/BasicCallInfo' ; import CallLogPanel , { CallLogPanelProps , } from '@ringcentral-integration/widgets/components/CallLogPanel' ; import { CallLogTitle } from '@ringcentral-integration/widgets/components/CallLogPanel/CallLog.interface' ; import { RcButton } from '@ringcentral/juno' ; import { callLogMethods , CallLogMethods , EvActivityCallUIFunctions , EvActivityCallUIProps , saveStatus as saveStatusValue , } from '../../interfaces/EvActivityCallUI.interface' ; import { IvrInfo } from '../ActivityCallLogPanel/IvrInfo' ; import styles from '../ActivityCallLogPanel/styles.scss' ; import { EditLogSection , getButtonText } from '../ActivityCallLogPanel/utils' ; import { SubmitButtonWrapper } from '../ActivityCallLogPanel/ActivityCallLogWrapper' ; export type CallHistoryCallLogPanelProps = EvActivityCallUIProps & EvActivityCallUIFunctions & Pick < CallLogPanelProps , 'startAdornmentRender' > & { method : CallLogMethods ; } ; export const CallHistoryCallLogPanel = ( { currentLocale , currentLog , basicInfo , isInbound , disposeCall , status , saveStatus , disableDispose , isWide , ivrAlertData , onCopySuccess , scrollTo , referenceFieldOptions , method , ... rest } ) => { const rootRef = useRef < CallLogPanel > ( null ) ; const isLoading = saveStatus === saveStatusValue . saving ; const headerTitle = `${ method }CallLog` as CallLogTitle ; const editLogSection = useCallback ( ( props ) => ( < EditLogSection isWide = { isWide } { ... props } scrollTo = { scrollTo } rootRef = { rootRef . current ?. editSectionRef } referenceFieldOptions = { referenceFieldOptions } / > ) , [ isWide , scrollTo , referenceFieldOptions ] ) ; let buttonText ; if ( saveStatus === callLogMethods . create || saveStatus === saveStatusValue . submit ) { buttonText = callLogMethods . create ; } else { buttonText = saveStatus ; } return ( < CallLogPanel ref = { rootRef } { ... rest } currentLog = { currentLog } currentLocale = { currentLocale } classes = { { root : styles . root , callLogCallControl : classNames ( styles . callLogCallControl , styles . noneShadow ) } } refs = { { root : rootRef } } isWide = { isWide } header headerTitle = { headerTitle } renderSaveLogButton = { ( ) => null } showSpinner = { false } isInTransferPage = { false } currentIdentify = "123" renderEditLogSection = { editLogSection } renderBasicInfo = { ( ) => { return ( < > < BasicCallInfo status = { status } currentLocale = { currentLocale } isInbound = { isInbound } isRinging = { false } subject = { basicInfo . subject } followInfos = { basicInfo . followInfos } callInfos = { basicInfo . callInfos } onCopySuccess = { onCopySuccess } classes = { { panel : styles . noneShadow } } /> { ivrAlertData ?. length > 0 && ( < IvrInfo isCallEnd ivrAlertData = { ivrAlertData } / > ) } < />); } } > < SubmitButtonWrapper > < RcButton data - sign = { method } size = "large" fullWidth disabled = { disableDispose } loading = { isLoading } onClick = { disposeCall } > { getButtonText ( buttonText , currentLocale ) } < /RcButton> < /SubmitButtonWrapper> < /CallLogPanel>); } ;