feat: small call control

packages/ringcentral-integration/enums/callDirections.js

@@ -4,4 +4,3 @@ export default new HashMap({
   inbound: 'Inbound',
   outbound: 'Outbound',
 });
-

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

@@ -63,7 +63,9 @@ export default class ActiveCallsPanel extends Component {
       onSaveNotification,
       onExpandNotification,
       onDiscardNotification,
-      notificationContainerStyles
+      notificationContainerStyles,
+      onLogBasicInfoClick,
+      renderSmallCallContrl,
     } = this.props;
 
     return (
@@ -73,9 +75,9 @@ export default class ActiveCallsPanel extends Component {
           show={currentLog.showLog}
           onClose={onCloseLogSection}
           clickOutToClose={false}
-          // containerStyles={sectionContainerStyles}
-          // modalStyles={sectionModalStyles}
-          >
+        // containerStyles={sectionContainerStyles}
+        // modalStyles={sectionModalStyles}
+        >
           <LogSection
             currentLocale={currentLocale}
             currentLog={currentLog}
@@ -86,6 +88,8 @@ export default class ActiveCallsPanel extends Component {
             formatPhone={formatPhone}
             onUpdateCallLog={onUpdateCallLog}
             onSaveCallLog={onSaveCallLog}
+            onLogBasicInfoClick={onLogBasicInfoClick}
+            renderSmallCallContrl={renderSmallCallContrl}
             showSaveLogBtn
           />
         </InsideModal>
@@ -313,6 +317,8 @@ ActiveCallsPanel.propTypes = {
   ringoutReject: PropTypes.func,
   disableLinks: PropTypes.bool,
   showRingoutCallControl: PropTypes.bool,
+  onLogBasicInfoClick: PropTypes.func,
+  renderSmallCallContrl: PropTypes.func,
 };
 
 ActiveCallsPanel.defaultProps = {
@@ -369,4 +375,6 @@ ActiveCallsPanel.defaultProps = {
   ringoutReject: undefined,
   disableLinks: false,
   showRingoutCallControl: false,
+  onLogBasicInfoClick() { },
+  renderSmallCallContrl() { },
 };

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

@@ -110,7 +110,7 @@ export default function LogBasicInfo(props) {
           </span>
           {
             formatNumber ? (
-              <span className={styles.separator}>|</span>
+              <span className={styles.separator}>&nbsp;</span>
             ) : null
           }
           <span

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

@@ -14,7 +14,6 @@
   height: 0;
   clear: both;
 }
-
 .callIcon {
   min-width: 35px;
 }
@@ -94,5 +93,13 @@
 }
 
 .separator {
-  margin: 0 3px;
+  margin: 0 4px;
+  display: inline-block;
+  position: relative;
+  &::after {
+    content: '|';
+    position: absolute;
+    top: 0;
+    right: -1px;
+  }
 }

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

@@ -5,6 +5,7 @@ import SpinnerOverlay from '../SpinnerOverlay';
 import Button from '../Button';
 import styles from './styles.scss';
 import LogBasicInfo from '../LogBasicInfo';
+// import SmCallCtrlContainer from '../../containers/SmCallCtrlContainer';
 import i18n from './i18n';
 
 export default class LogSection extends Component {
@@ -39,33 +40,39 @@ export default class LogSection extends Component {
     }
   }
 
-  render() {
+  genEditLogSection() {
     const {
-      renderEditLogSection,
-      renderSaveLogButton,
+      renderEditLogSection, currentLocale,
+      onSaveCallLog, onUpdateCallLog,
+      currentLog, additionalInfo
+    } = this.props;
+    const editLogSection = renderEditLogSection({
       currentLocale,
+      onSaveCallLog,
       onUpdateCallLog,
       currentLog,
-      isInnerMask,
-      showSaveLogBtn,
-      onSaveCallLog,
       additionalInfo,
+    });
+    return (
+      <div
+        ref={(ref) => { this.mainCtrl = ref; }}
+        onScroll={() => this.checkOverlap()}
+        className={styles.editSection}>
+        {editLogSection}
+      </div>
+    );
+  }
+
+  genSaveLogButton() {
+    const {
+      showSaveLogBtn, renderSaveLogButton,
+      currentLocale, onSaveCallLog,
+      currentLog
     } = this.props;
     const {
       call,
-      showSpinner,
       currentLogCall,
     } = currentLog;
-    if (showSpinner) {
-      return (<SpinnerOverlay className={styles.spinner} />);
-    }
-    const editLogSection = renderEditLogSection({
-      currentLocale,
-      onSaveCallLog,
-      onUpdateCallLog,
-      currentLog,
-      additionalInfo,
-    });
     const buttonPanelClassName = classnames(
       styles.buttonPanel,
       this.state.mainCtrlOverlapped && styles.overlapped
@@ -74,38 +81,83 @@ export default class LogSection extends Component {
       styles.primaryButton,
       currentLogCall.isSaving && styles.disabled
     );
-    const saveLogBtn = showSaveLogBtn ? renderSaveLogButton && (
-      renderSaveLogButton({
+    if (!showSaveLogBtn) {
+      return null;
+    }
+    if (renderSaveLogButton) {
+      return renderSaveLogButton({
         currentLocale,
         onSaveCallLog,
         currentLog,
         overlapped: this.state.mainCtrlOverlapped
-      })
-    ) || (
+      });
+    }
+    return (
       <div
         className={buttonPanelClassName}>
         <Button
           disabled={currentLogCall.isSaving}
           className={buttonClassName}
           onClick={() => onSaveCallLog(call)}>
-          { i18n.getString('saveLog', currentLocale)}
+          {i18n.getString('saveLog', currentLocale)}
         </Button>
       </div>
-    ) : null;
+    );
+  }
+
+  genLogBasicInfo() {
     return (
-      <div className={styles.section}>
-        <LogBasicInfo
-          currentLog={this.props.currentLog}
-          currentLocale={this.props.currentLocale}
-          formatPhone={this.props.formatPhone}
-        />
-        <div
-          ref={(ref) => { this.mainCtrl = ref; }}
-          onScroll={() => this.checkOverlap()}
-          className={styles.editSection}>
-          {editLogSection}
+      <LogBasicInfo
+        currentLog={this.props.currentLog}
+        currentLocale={this.props.currentLocale}
+        formatPhone={this.props.formatPhone}
+      />
+    );
+  }
+
+  genLogBasicInfoWithSmallCallCtrl() {
+    const currentlog = this.props.currentLog;
+    const { currentSessionId, call } = currentlog;
+    const { telephonyStatus, result } = call;
+    const status = telephonyStatus || result;
+    // if `result` is exist, call has been disconnect
+    if (result) {
+      return this.genLogBasicInfo();
+    }
+    return (
+      <div className={styles.infoWithCtrlWrapper}>
+        <div className={styles.basicInfoWrapper} onClick={() => this.props.onLogBasicInfoClick()}>
+          <LogBasicInfo
+            currentLog={this.props.currentLog}
+            currentLocale={this.props.currentLocale}
+            formatPhone={this.props.formatPhone}
+          />
         </div>
-        {saveLogBtn}
+        <div className={styles.callCtrlWrapper}>
+          {this.props.renderSmallCallContrl(status, currentSessionId)}
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      currentLog,
+      isInnerMask,
+      showSmallCallControl
+    } = this.props;
+    const {
+      showSpinner,
+    } = currentLog;
+    if (showSpinner) {
+      return (<SpinnerOverlay className={styles.spinner} />);
+    }
+
+    return (
+      <div className={styles.section}>
+        {showSmallCallControl ? this.genLogBasicInfoWithSmallCallCtrl() : this.genLogBasicInfo()}
+        {this.genEditLogSection()}
+        {this.genSaveLogButton()}
         {
           isInnerMask ? (
             <div className={styles.innerMask} />
@@ -125,7 +177,10 @@ LogSection.propTypes = {
   renderEditLogSection: PropTypes.func,
   renderSaveLogButton: PropTypes.func,
   isInnerMask: PropTypes.bool,
+  onLogBasicInfoClick: PropTypes.func,
   showSaveLogBtn: PropTypes.bool,
+  showSmallCallControl: PropTypes.bool,
+  renderSmallCallContrl: PropTypes.func,
 };
 
 LogSection.defaultProps = {
@@ -137,5 +192,8 @@ LogSection.defaultProps = {
   renderEditLogSection: undefined,
   renderSaveLogButton: undefined,
   isInnerMask: undefined,
+  onLogBasicInfoClick() { },
+  renderSmallCallContrl() { },
   showSaveLogBtn: true,
+  showSmallCallControl: true,
 };

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

@@ -66,3 +66,17 @@ $section_height: 36px;
   height: 100%;
   z-index: 3;
 }
+
+.infoWithCtrlWrapper {
+  display: flex;
+  padding: 10px 0;
+  align-items: center;
+}
+
+.basicInfoWrapper {
+  cursor: pointer;
+  flex: 1;
+}
+.callCtrlWrapper {
+  padding: 0 10px;
+}

packages/ringcentral-widgets/components/SmCallControl/i18n/en-US.js

@@ -0,0 +1,6 @@
+export default {
+  mute: 'Mute',
+  unmute: 'Unmute',
+  hangup: 'Hangup',
+  reject: 'Reject',
+};

packages/ringcentral-widgets/components/SmCallControl/i18n/index.js

@@ -0,0 +1,4 @@
+import I18n from '@ringcentral-integration/i18n';
+import loadLocale from './loadLocale';
+
+export default new I18n(loadLocale);

packages/ringcentral-widgets/components/SmCallControl/i18n/loadLocale.js

@@ -0,0 +1 @@
+/* loadLocale */

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import telephonyStatuses from 'ringcentral-integration/enums/telephonyStatus';
+import callDirections from 'ringcentral-integration/enums/callDirections';
+
+
+import CircleButton from '../CircleButton';
+
+import MuteIcon from '../../assets/images/Mute.svg';
+import UnmuteIcon from '../../assets/images/Unmute.svg';
+import EndIcon from '../../assets/images/End.svg';
+import styles from './styles.scss';
+
+import i18n from './i18n';
+
+
+export default function SmCallControl(props) {
+  const {
+    onMute, onUnmute, onHangup, onReject,
+    isOnMute, callStatus, currentLocale, callDirection,
+  } = props;
+
+  // reject conditons: call direction is inbound & call status is ringing
+  function canRejectCall() {
+    return (
+      callDirections.inbound === callDirection &&
+      telephonyStatuses.ringing === callStatus
+    );
+  }
+
+  const muteIcon = isOnMute ? MuteIcon : UnmuteIcon;
+  const muteAction = isOnMute ? onUnmute : onMute;
+  const muteTitle = isOnMute ? 'mute' : 'unmute';
+  const endTile = canRejectCall() ? 'reject' : 'hangup';
+  const endAction = canRejectCall() ? onReject : onHangup;
+  const disabledCtrl = callStatus === telephonyStatuses.ringing;
+  return (
+    <div className={styles.smWraper}>
+      <CircleButton
+        icon={muteIcon}
+        onClick={muteAction}
+        className={classnames(styles.button, disabledCtrl ? styles.buttonDisabled : null)}
+        title={i18n.getString(muteTitle, currentLocale)}
+        disabled={disabledCtrl}
+      />
+      <CircleButton
+        showBorder={false}
+        icon={EndIcon}
+        onClick={endAction}
+        className={classnames(styles.hangup, styles.button)}
+        title={i18n.getString(endTile, currentLocale)}
+      />
+    </div>
+  );
+}
+
+SmCallControl.propTypes = {
+  onMute: PropTypes.func,
+  onUnmute: PropTypes.func,
+  onHangup: PropTypes.func,
+  onReject: PropTypes.func,
+  isOnMute: PropTypes.bool,
+  callStatus: PropTypes.string,
+  currentLocale: PropTypes.string,
+  callDirection: PropTypes.string.isRequired,
+};
+SmCallControl.defaultProps = {
+  onMute() { },
+  onUnmute() { },
+  onHangup() { },
+  onReject() { },
+  isOnMute: false,
+  callStatus: 'CallConnected',
+  currentLocale: 'en-US'
+};