refactor(ActiveCallPage): remove merge button

packages/ringcentral-widgets/components/ActiveCallItem/index.js

@@ -16,7 +16,6 @@ import EndIcon from '../../assets/images/End.svg';
 import AnswerIcon from '../../assets/images/Answer.svg';
 import VoicemailIcon from '../../assets/images/Voicemail.svg';
 import ConferenceCallIcon from '../../assets/images/ConferenceCallIcon.svg';
-import MergeIntoConferenceIcon from '../../assets/images/MergeIntoConferenceIcon.svg';
 
 import styles from './styles.scss';
 import i18n from './i18n';
@@ -94,20 +93,15 @@ function WebphoneButtons({
   webphoneHangup,
   webphoneResume,
   showAnswer,
-  showMergeCall,
-  disableMerge,
-  onMergeCall,
 }) {
   if (!session || !webphoneAnswer || !webphoneHangup) {
     return null;
   }
   let hangupFunc = webphoneHangup;
   let resumeFunc = webphoneResume;
   let endIcon = EndIcon;
-  const mergeIcon = MergeIntoConferenceIcon;
   let rejectTitle = i18n.getString('hangup', currentLocale);
   const acceptTitle = i18n.getString('accept', currentLocale);
-  const mergeTitle = i18n.getString('mergeToConference', currentLocale);
   if (
     session.direction === callDirections.inbound &&
     session.callStatus === sessionStatus.connecting
@@ -119,26 +113,6 @@ function WebphoneButtons({
   }
   return (
     <div className={styles.webphoneButtons}>
-      {
-        showMergeCall ?
-          <span title={mergeTitle} className={styles.webphoneButton}>
-            <CircleButton
-              className={disableMerge
-                ? classnames(styles.mergeButton, styles.disabled)
-                : styles.mergeButton}
-              onClick={(e) => {
-                e.stopPropagation();
-                onMergeCall();
-              }}
-              iconWidth={260}
-              iconX={120}
-              icon={mergeIcon}
-              showBorder
-              disabled={disableMerge}
-            />
-          </span>
-          : null
-      }
       <span title={rejectTitle} className={styles.webphoneButton}>
         <CircleButton
           className={styles.rejectButton}
@@ -179,9 +153,6 @@ WebphoneButtons.propTypes = {
   webphoneHangup: PropTypes.func,
   webphoneResume: PropTypes.func,
   showAnswer: PropTypes.bool,
-  disableMerge: PropTypes.bool,
-  showMergeCall: PropTypes.bool,
-  onMergeCall: PropTypes.func,
 };
 
 WebphoneButtons.defaultProps = {
@@ -191,9 +162,6 @@ WebphoneButtons.defaultProps = {
   webphoneHangup: undefined,
   webphoneResume: undefined,
   showAnswer: true,
-  disableMerge: false,
-  showMergeCall: false,
-  onMergeCall: undefined,
 };
 
 export default class ActiveCallItem extends Component {
@@ -455,9 +423,6 @@ export default class ActiveCallItem extends Component {
       externalHasEntity,
       readTextPermission,
       isOnConferenceCall,
-      showMergeCall,
-      onMergeCall,
-      disableMerge,
       hasActionMenu,
       showAnswer,
       avatarUrl,
@@ -539,9 +504,6 @@ export default class ActiveCallItem extends Component {
             webphoneReject={this.webphoneToVoicemail}
             webphoneHangup={webphoneHangup}
             webphoneResume={webphoneResume}
-            showMergeCall={showMergeCall}
-            onMergeCall={onMergeCall}
-            disableMerge={disableMerge}
             currentLocale={currentLocale}
             showAnswer={showAnswer}
           />
@@ -632,14 +594,11 @@ ActiveCallItem.propTypes = {
   externalHasEntity: PropTypes.func,
   readTextPermission: PropTypes.bool,
   isOnConferenceCall: PropTypes.bool,
-  disableMerge: PropTypes.bool,
   hasActionMenu: PropTypes.bool,
   showAnswer: PropTypes.bool,
   avatarUrl: PropTypes.string,
   showAvatar: PropTypes.bool,
   showCallDetail: PropTypes.bool,
-  showMergeCall: PropTypes.bool,
-  onMergeCall: PropTypes.func,
 };
 
 ActiveCallItem.defaultProps = {
@@ -668,12 +627,9 @@ ActiveCallItem.defaultProps = {
   externalHasEntity: undefined,
   readTextPermission: true,
   isOnConferenceCall: false,
-  disableMerge: false,
   hasActionMenu: true,
   showAnswer: true,
   avatarUrl: null,
   showAvatar: false,
   showCallDetail: true,
-  showMergeCall: false,
-  onMergeCall: undefined,
 };

packages/ringcentral-widgets/components/ActiveCallItem/styles.scss

@@ -99,7 +99,6 @@ $fixed-avatar-width:35px;
   }
 }
 
-.mergeButton,
 .rejectButton,
 .answerButton {
   width: 26px;
@@ -109,18 +108,6 @@ $fixed-avatar-width:35px;
   }
 }
 
-.mergeButton {
-  circle {
-    fill: $snow;
-    stroke: $primary-color;
-    stroke-width: 15px;
-  }
-  g,
-  path {
-    fill: $primary-color;
-  }
-}
-
 .disabled,
 .disabled * {
   circle {

packages/ringcentral-widgets/components/ActiveCallList/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import callDirections from 'ringcentral-integration/enums/callDirections';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ActiveCallItem from '../ActiveCallItem';
@@ -39,14 +38,8 @@ function ActiveCallList({
   enableContactFallback,
   title,
   sourceIcons,
-  isWebRTC,
-  currentCall,
   conferenceCallEquipped,
-  hasConferenceCall,
-  disableMerge,
-  mergeToConference,
   isSessionAConferenceCall,
-  onConfirmMergeCall,
 }) {
   if (!calls.length) {
     return null;
@@ -59,64 +52,17 @@ function ActiveCallList({
       </div>
       {
         calls.map((call) => {
-          let showMergeCall = false;
           let isOnConferenceCall = false;
-          let onMergeCall = null;
           if (conferenceCallEquipped) {
             isOnConferenceCall = call.webphoneSession
               ? isSessionAConferenceCall(call.webphoneSession.id)
               : isConferenceCall(call);// in case it's an other device call
-            const isCurrentCallAConf = currentCall
-              ? isSessionAConferenceCall(currentCall.webphoneSession.id)
-              : false;
-
-            if (!isWebRTC) {
-              showMergeCall = false;
-            } else if (currentCall) {
-              if (call === currentCall) {
-                showMergeCall = false;
-              } else if (call.direction === callDirections.inbound) {
-                showMergeCall = false;
-              } else if (currentCall.direction === callDirections.outbound) {
-                if (hasConferenceCall) {
-                  showMergeCall = true;
-                  if (isOnConferenceCall) {
-                    onMergeCall = () => mergeToConference([currentCall.webphoneSession]);
-                  } else if (isCurrentCallAConf) {
-                    onMergeCall = () => mergeToConference([call.webphoneSession]);
-                  } else {
-                    onMergeCall = () => onConfirmMergeCall(call);
-                  }
-                } else {
-                  showMergeCall = true;
-                  const partyCalls = [
-                    call.webphoneSession,
-                    currentCall.webphoneSession
-                  ];
-                  onMergeCall = () => mergeToConference(partyCalls);
-                }
-              } else if (hasConferenceCall) {
-                if (isOnConferenceCall) {
-                  showMergeCall = false;
-                } else {
-                  showMergeCall = true;
-                  onMergeCall = () => {
-                    onConfirmMergeCall(call);
-                  };
-                }
-              } else {
-                showMergeCall = false;
-              }
-            } else {
-              showMergeCall = false;
-            }
           }
 
           return (
             <ActiveCallItem
               call={call}
               key={call.id}
-              showMergeCall={showMergeCall}
               isOnConferenceCall={isOnConferenceCall}
               currentLocale={currentLocale}
               areaCode={areaCode}
@@ -131,7 +77,6 @@ function ActiveCallList({
               onLogCall={onLogCall}
               onViewContact={onViewContact}
               onCreateContact={onCreateContact}
-              onMergeCall={onMergeCall}
               loggingMap={loggingMap}
               webphoneAnswer={webphoneAnswer}
               webphoneReject={webphoneReject}
@@ -141,7 +86,6 @@ function ActiveCallList({
               enableContactFallback={enableContactFallback}
               autoLog={autoLog}
               sourceIcons={sourceIcons}
-              disableMerge={disableMerge}
               hasActionMenu={!isOnConferenceCall}
             />
           );
@@ -177,14 +121,8 @@ ActiveCallList.propTypes = {
   enableContactFallback: PropTypes.bool,
   autoLog: PropTypes.bool,
   sourceIcons: PropTypes.object,
-  isWebRTC: PropTypes.bool.isRequired,
   conferenceCallEquipped: PropTypes.bool,
-  hasConferenceCall: PropTypes.bool,
-  currentCall: PropTypes.object,
-  disableMerge: PropTypes.bool,
-  mergeToConference: PropTypes.func,
   isSessionAConferenceCall: PropTypes.func,
-  onConfirmMergeCall: PropTypes.func,
 };
 
 ActiveCallList.defaultProps = {
@@ -208,12 +146,7 @@ ActiveCallList.defaultProps = {
   webphoneToVoicemail: undefined,
   sourceIcons: undefined,
   conferenceCallEquipped: false,
-  hasConferenceCall: false,
-  currentCall: undefined,
-  disableMerge: false,
-  mergeToConference: i => i,
   isSessionAConferenceCall: () => false,
-  onConfirmMergeCall: i => i,
 };
 
 export default ActiveCallList;

packages/ringcentral-widgets/components/ActiveCallsPanel/index.js

@@ -3,38 +3,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import SpinnerOverlay from '../SpinnerOverlay';
 import ActiveCallList from '../ActiveCallList';
-import ConfirmMergeModal from '../ConfirmMergeModal';
 import styles from './styles.scss';
 import i18n from './i18n';
 
 export default class ActiveCallsPanel extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false,
-      callOfModal: null,
-    };
-
-    this.showConfirmMergeModal = (call) => {
-      this.setState({
-        isModalOpen: true,
-        callOfModal: call,
-      });
-    };
-
-    this.hideConfirmMergeModal = () => {
-      this.setState({
-        isModalOpen: false,
-        callOfModal: null,
-      });
-    };
-
-    this.confirmMergeCall = () => {
-      this.props.mergeToConference([this.state.callOfModal.webphoneSession]);
-      this.hideConfirmMergeModal();
-    };
-  }
-
   componentDidMount() {
     if (
       !this.hasCalls(this.props) &&
@@ -90,9 +62,6 @@ export default class ActiveCallsPanel extends Component {
       activeCurrentCalls,
       isWebRTC,
       conferenceCallEquipped,
-      hasConferenceCall,
-      disableMerge,
-      mergeToConference,
       isSessionAConferenceCall,
     } = this.props;
 
@@ -124,12 +93,8 @@ export default class ActiveCallsPanel extends Component {
         sourceIcons={sourceIcons}
         isWebRTC={isWebRTC}
         conferenceCallEquipped={conferenceCallEquipped}
-        hasConferenceCall={hasConferenceCall}
-        disableMerge={disableMerge}
         currentCall={activeCurrentCalls[0]}
-        mergeToConference={mergeToConference}
         isSessionAConferenceCall={isSessionAConferenceCall}
-        onConfirmMergeCall={this.showConfirmMergeModal}
       />
     );
   }
@@ -143,8 +108,6 @@ export default class ActiveCallsPanel extends Component {
       className,
       currentLocale,
       showSpinner,
-      conferenceCallEquipped,
-      conferenceCallParties,
     } = this.props;
 
     if (!this.hasCalls()) {
@@ -166,16 +129,6 @@ export default class ActiveCallsPanel extends Component {
           {this.getCallList(activeCurrentCalls, i18n.getString('currentCall', currentLocale))}
           {this.getCallList(activeOnHoldCalls, i18n.getString('onHoldCall', currentLocale))}
           {this.getCallList(otherDeviceCalls, i18n.getString('otherDeviceCall', currentLocale))}
-          {
-            conferenceCallEquipped
-              ? <ConfirmMergeModal
-                currentLocale={currentLocale}
-                show={this.state.isModalOpen}
-                onMerge={this.confirmMergeCall}
-                onCancel={this.hideConfirmMergeModal}
-                partyProfiles={conferenceCallParties} />
-              : null
-          }
         </div>
         {showSpinner ? <SpinnerOverlay className={styles.spinner} /> : null}
       </div>
@@ -214,12 +167,8 @@ ActiveCallsPanel.propTypes = {
   sourceIcons: PropTypes.object,
   isWebRTC: PropTypes.bool.isRequired,
   conferenceCallEquipped: PropTypes.bool,
-  hasConferenceCall: PropTypes.bool,
   showSpinner: PropTypes.bool,
-  disableMerge: PropTypes.bool,
-  mergeToConference: PropTypes.func,
   isSessionAConferenceCall: PropTypes.func,
-  conferenceCallParties: PropTypes.arrayOf(PropTypes.object),
 };
 
 ActiveCallsPanel.defaultProps = {
@@ -244,10 +193,6 @@ ActiveCallsPanel.defaultProps = {
   onCallsEmpty: undefined,
   sourceIcons: undefined,
   conferenceCallEquipped: false,
-  hasConferenceCall: false,
   showSpinner: false,
-  disableMerge: false,
-  mergeToConference: i => i,
   isSessionAConferenceCall: () => false,
-  conferenceCallParties: [],
 };