amazon-connect-reference-dialer 1.0.0 → 1.4.3

package/src/client/container/agentview/conferenceconnection/components/bothjoined.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import DialNumber from './dialnumber';
+import MuteUnmute from './togglemute';
+import HoldAll from './holdall';
+
+const BothJoined = ({ muted = false, dialNumber, holdAll, toggleMuteUnmute }) => (
+  <div className={`row mt-3`}>
+    <DialNumber dialNumber={dialNumber}/>
+    <HoldAll holdAll={holdAll}/>
+    <MuteUnmute muted={muted}
+      toggleMuteUnmute={toggleMuteUnmute}
+      marginTop={'mt-1'}/>
+  </div>
+);
+
+BothJoined.propTypes = {
+  muted: PropTypes.bool,
+  dialNumber: PropTypes.func,
+  toggleMuteUnmute: PropTypes.func,
+  holdAll: PropTypes.func
+};
+
+export default BothJoined;

package/src/client/container/agentview/conferenceconnection/components/dialnumber.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './../agentview.css';
+
+import dialNumberIcon from '../../../../res/images/fa-dial-number.svg';
+
+const DialNumber = ({ dialNumber, marginTop = '' }) => (
+  <div className={`col-6 ${marginTop}`}>
+    <a className={`btn ${styles.buttonCommon}`}
+		   onClick={dialNumber}
+    >
+      <img src={dialNumberIcon}/> &nbsp; Dial number
+    </a>
+  </div>
+);
+DialNumber.propTypes = {
+  dialNumber: PropTypes.func,
+  marginTop: PropTypes.string
+};
+
+export default DialNumber;

package/src/client/container/agentview/conferenceconnection/components/holdall.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './../agentview.css';
+import holdIcon from '../../../../res/images/fa-hold.svg';
+
+const HoldAll = ({ holdAll, marginTop = '' }) => (
+  <div className={`col-6 ${marginTop}`}>
+    <a className={`btn ${styles.buttonCommon}`}
+		   onClick={holdAll}
+    >
+      <img src={holdIcon}/> &nbsp; Hold all
+    </a>
+  </div>
+);
+HoldAll.propTypes = {
+  holdAll: PropTypes.func,
+  marginTop: PropTypes.string
+};
+
+export default HoldAll;

package/src/client/container/agentview/conferenceconnection/components/join.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './../agentview.css';
+
+import joinIcon from '../../../../res/images/fa-ico-join.svg';
+
+const Join = ({ joinConnection, marginTop = '' }) => (
+  <div className={`col-6 ${marginTop}`}>
+    <a className={`btn ${styles.buttonCommon}`}
+		   onClick={joinConnection}
+    >
+      <img src={joinIcon}/> &nbsp; Join
+    </a>
+  </div>
+);
+Join.propTypes = {
+  joinConnection: PropTypes.func,
+  marginTop: PropTypes.string
+};
+
+export default Join;

package/src/client/container/agentview/conferenceconnection/components/oneHoldOtherConnected.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Join from './join';
+import Swap from './swap';
+import HoldAll from './holdall';
+import DialNumber from './dialnumber';
+import MuteUnmute from './togglemute';
+
+// join
+// swap
+// dial
+// hold all
+// mute
+
+const OneHoldOtherConnected = ({ muted = false, joinConnection, swapConnection, holdAll, dialNumber, toggleMuteUnmute }) => (
+  <div className={`row mt-3`}>
+    <Join joinConnection={joinConnection}/>
+    <Swap swapConnection={swapConnection}/>
+
+    <HoldAll holdAll={holdAll} marginTop={'mt-1'}/>
+    <DialNumber dialNumber={dialNumber} marginTop={'mt-1'}/>
+
+    <MuteUnmute muted={muted} toggleMuteUnmute={toggleMuteUnmute} marginTop={'mt-1'}/>
+  </div>
+);
+
+OneHoldOtherConnected.propTypes = {
+  muted: PropTypes.bool,
+  joinConnection: PropTypes.func,
+  swapConnection: PropTypes.func,
+  holdAll: PropTypes.func,
+  dialNumber: PropTypes.func,
+  toggleMuteUnmute: PropTypes.func
+};
+
+export default OneHoldOtherConnected;

package/src/client/container/agentview/conferenceconnection/components/resumeall.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './../agentview.css';
+
+import resumeIcon from '../../../../res/images/fa-resume.svg';
+
+const ResumeAll = ({ resumeAll, marginTop = '' }) => (
+  <div className={`col-6 ${marginTop}`}>
+    <a className={`btn ${styles.buttonCommon}`}
+		   onClick={resumeAll}
+    >
+      <img src={resumeIcon}/> &nbsp; Resume all
+    </a>
+  </div>
+);
+ResumeAll.propTypes = {
+  resumeAll: PropTypes.func,
+  marginTop: PropTypes.string
+};
+
+export default ResumeAll;

package/src/client/container/agentview/conferenceconnection/components/swap.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './../agentview.css';
+
+import swapIcon from '../../../../res/images/fa-ico-swap.svg';
+
+const Swap = ({ swapConnection, marginTop = '' }) => (
+  <div className={`col-6 ${marginTop}`}>
+    <a className={`btn ${styles.buttonCommon}`}
+		   onClick={swapConnection}
+    >
+      <img src={swapIcon}/> &nbsp; Swap
+    </a>
+  </div>
+);
+Swap.propTypes = {
+  swapConnection: PropTypes.func,
+  marginTop: PropTypes.string
+};
+
+export default Swap;

package/src/client/container/agentview/conferenceconnection/components/togglemute.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './../agentview.css';
+
+import muteIcon from './../../../../res/images/fa-mute.svg';
+import unMuteIcon from './../../../../res/images/fa-mic.svg';
+
+const MuteUnmute = ({ toggleMuteUnmute, muted = false, marginTop = '' }) => (
+  <div className={`col-6 ${marginTop}`}>
+    <a className={`btn ${styles.buttonCommon}`}
+      onClick={toggleMuteUnmute}>
+      {muted ? <img src={unMuteIcon}/> : <img src={muteIcon}/>}
+      {muted ? ' Unmute' : ' Mute'}
+    </a>
+  </div>
+);
+MuteUnmute.propTypes = {
+  muted: PropTypes.bool,
+  toggleMuteUnmute: PropTypes.func,
+  marginTop: PropTypes.string
+};
+
+export default MuteUnmute;

package/src/client/container/agentview/conferenceconnection/index.js

@@ -0,0 +1,3 @@
+import ConferenceConnection from './main';
+
+export default ConferenceConnection;

package/src/client/container/agentview/conferenceconnection/lowerBody.js

@@ -0,0 +1,154 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import QuickFeedback from './quickFeedback';
+import lo from 'lodash';
+
+import sessionManager from '../../../api/sessionManager';
+
+import BothHoldView from './components/bothhold';
+import BothJoined from './components/bothjoined';
+import OneHoldOtherConnected from './components/oneHoldOtherConnected';
+
+import { onRequestShowDialPad } from '../../../reducers/acReducer';
+
+import {
+  isHold,
+  isConferenceConnected,
+  isAfterCallWork
+} from './../../../utils/acutils';
+
+// two participant in the conference are both in hold state
+const isBothHold = (currentState = undefined) => {
+  if (!currentState) {
+    return false;
+  }
+  const state1 = lo.get(currentState, 'primaryConnectionState.state', 'none');
+  const state2 = lo.get(currentState, 'thirdPartyConnectionState.state', 'none');
+  return state1 === state2 && isHold(state1);
+};
+
+// both are joined state
+const isBothJoined = (currentState = undefined) => {
+  if (!currentState) {
+    return false;
+  }
+  const primaryConnectionState = lo.get(currentState, 'primaryConnectionState.state', 'none');
+  const thirdPartyConnectionState = lo.get(currentState, 'thirdPartyConnectionState.state', 'none');
+  return primaryConnectionState === thirdPartyConnectionState && isConferenceConnected(primaryConnectionState);
+};
+
+// one is connected, and another one is on hold
+// or some other scenario where both have different connection state
+const isOneHoldOtherConnected = (currentState = undefined) => {
+  if (!currentState) {
+    return false;
+  }
+  const primaryConnectionState = lo.get(currentState, 'primaryConnectionState.state', 'none');
+  const thirdPartyConnectionState = lo.get(currentState, 'thirdPartyConnectionState.state', 'none');
+  return primaryConnectionState !== thirdPartyConnectionState;
+};
+
+class LowerBody extends Component {
+  constructor (props) {
+    super(props);
+    this.toggleMuteUnmute = this.toggleMuteUnmute.bind(this);
+    this.resumeAll = this.resumeAll.bind(this);
+    this.holdAll = this.holdAll.bind(this);
+    this.dialNumber = this.dialNumber.bind(this);
+    this.joinConnection = this.joinConnection.bind(this);
+    this.swapConnection = this.swapConnection.bind(this);
+  }
+
+  toggleMuteUnmute () {
+    this.props.muted ? sessionManager.unmute() : sessionManager.mute();
+  }
+
+  resumeAll () {
+    sessionManager.resumeAll().then(s => {
+    }, e => console.error(e));
+  }
+
+  holdAll () {
+    sessionManager.holdAll().then(s => {
+    }, e => console.error(e));
+  }
+
+  dialNumber () {
+    this.props.requestDialPad();
+  }
+
+  joinConnection () {
+    // join call, and resume all actually same.
+    // so just calling the same function
+    sessionManager.resumeAll().then(s => {
+    }, e => console.error(e));
+  }
+
+  isBothAfterCallWork (currentState = undefined) {
+    const primaryState = sessionManager.getCurrentStateString(currentState, true);
+    const thirdPartyState = sessionManager.getCurrentStateString(currentState, false);
+
+    return isAfterCallWork(primaryState) && isAfterCallWork(thirdPartyState);
+  }
+
+  swapConnection () {
+    sessionManager.swapCall().then(s => {
+    }, e => console.error(e));
+  }
+
+  render () {
+    const currentState = this.props.currentState;
+    const muted = this.props.muted;
+    return (
+      <div className="row">
+        <div className="col-12">
+          {
+            isBothHold(currentState) && <BothHoldView muted={muted}
+              toggleMuteUnmute={this.toggleMuteUnmute}
+              resumeAll={this.resumeAll}/>
+          }
+          {
+            isBothJoined(currentState) && <BothJoined muted={muted}
+              dialNumber={this.dialNumber}
+              toggleMuteUnmute={this.toggleMuteUnmute}
+              holdAll={this.holdAll}/>
+          }
+          {
+            isOneHoldOtherConnected(currentState) &&
+                        <OneHoldOtherConnected joinConnection={this.joinConnection}
+                          swapConnection={this.swapConnection}
+                          holdAll={this.holdAll}
+                          dialNumber={this.dialNumber}
+                          toggleMuteUnmute={this.toggleMuteUnmute}
+                          muted={muted}/>
+          }
+          {
+            this.isBothAfterCallWork(currentState) && <QuickFeedback/>
+          }
+
+        </div>
+      </div>
+    );
+  }
+}
+
+LowerBody.propTypes = {
+  currentState: PropTypes.object,
+  muted: PropTypes.bool,
+  requestDialPad: PropTypes.func.isRequired
+};
+const mapStateToProps = state => ({
+  currentState: state.acReducer.currentState,
+  muted: state.acReducer.muted || false
+});
+const mapDispatchToProps = dispatch => ({
+  requestDialPad: () => {
+    dispatch(onRequestShowDialPad('pending'));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LowerBody);

package/src/client/container/agentview/conferenceconnection/main.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import UpperBody from './upperBody';
+import LowerBody from './lowerBody';
+
+const ConferenceConnection = () => (
+  <div className={`card-body`}
+		 style={{ paddingLeft: '0.95em', paddingRight: '0.9em', paddingTop: '0' }}>
+    <UpperBody/>
+    <LowerBody/>
+  </div>
+);
+
+ConferenceConnection.propTypes = {};
+const mapStateToProps = state => ({});
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ConferenceConnection);

package/src/client/container/agentview/conferenceconnection/primaryconnection.js

@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import lo from 'lodash';
+import sessionManager from '../../../api/sessionManager';
+import styles from './agentview.css';
+
+import endIcon from '../../../res/images/fa-mini-endcall.svg';
+import holdIcon from '../../../res/images/fa-mini-hold.svg';
+import resumeIcon from '../../../res/images/fa-mini-resume.svg';
+
+import { getColorSchema } from '../../../utils/agetStateMap';
+
+import {
+  isJoined
+} from './../../../utils/acutils';
+
+const isBothHold = (currentState) => {
+  const state1 = lo.get(currentState, 'primaryConnectionState.state', 'none');
+  const state2 = lo.get(currentState, 'thirdPartyConnectionState.state', 'none');
+  return state1 === state2 && ['Hold', 'hold', 'On hold'].includes(state1);
+};
+
+const DURATION_MS = 1 * 1000;
+
+class PrimaryConnection extends Component {
+  constructor (props) {
+    super(props);
+    this.intervalId = undefined;
+    this.state = {
+      duration: '00:00:00'
+    };
+    this.endConnection = this.endConnection.bind(this);
+    this.holdConnection = this.holdConnection.bind(this);
+    this.resumeConnection = this.resumeConnection.bind(this);
+  }
+
+  _dispose () {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  componentDidMount () {
+    this._dispose();
+    this.intervalId = setInterval(() => {
+      let duration = sessionManager.getPrimaryConnectionDuration();
+      this.setState({
+        duration: duration
+      });
+    }, DURATION_MS);
+  }
+
+  componentWillUnmount () {
+    this._dispose();
+  }
+
+  endConnection () {
+    let connection = sessionManager.getPrimaryConnection();
+    sessionManager.endConnection(connection).then(success => _, err => console.error(err));
+  }
+
+  holdConnection () {
+    let connection = sessionManager.getPrimaryConnection();
+    sessionManager.holdConnection(connection).then(success => _, err => console.error(err));
+  }
+
+  resumeConnection () {
+    let connection = sessionManager.getPrimaryConnection();
+    sessionManager.resumeConnection(connection).then(success => _, err => console.error(err));
+  }
+
+  render () {
+    const { currentState } = this.props;
+    const stateString = sessionManager.getCurrentStateString(currentState, true);
+    return (
+      <div className="col-12 h-50"
+        style={{
+          borderBottom: `1px solid rgba(255,255,255,0.50)`,
+          backgroundColor: getColorSchema(stateString)
+        }}>
+        <div className="row">
+          <div className={`col-8 mt-2 ${styles.agentStateMini}`}>
+            <span> {stateString} </span>
+          </div>
+          <div className="col-4 mt-2 text-right">
+            {isJoined(stateString) &&
+                        <img className={styles.miniHoldResume} onClick={this.holdConnection} src={holdIcon}/>}
+            {isBothHold(currentState) &&
+                        <img className={styles.miniHoldResume} onClick={this.resumeConnection} src={resumeIcon}/>}
+            <img className={styles.miniEnd}
+              onClick={this.endConnection}
+              src={endIcon}/>
+          </div>
+          <div className={`col-8 mt-1 ${styles.phoneAndDurationMini}`}>
+            <span>{sessionManager.getPrimaryConnectionPhone()}</span></div>
+          <div className={`col-4 mt-1 text-right ${styles.phoneAndDurationMini}`}>
+            <span>{this.state.duration}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+PrimaryConnection.propTypes = {
+  currentState: PropTypes.object
+};
+
+export default PrimaryConnection;

package/src/client/container/agentview/conferenceconnection/quickFeedback.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import lo from 'lodash';
+
+import starYellowIcon from '../../../res/images/star-yellow.svg';
+import starWhiteIcon from '../../../res/images/star-white.svg';
+import PropTypes from 'prop-types';
+import ConfirmReport from './../../popups/confirmreport/confirmreport';
+import feedbackHandler from './../../../api/feedbackHandler';
+
+import {
+  onRequestReportCallIssue
+} from '../../../reducers/acReducer';
+
+import {
+  feedbackRatings,
+  feedbackRatingsText
+} from '../../../utils/feedback';
+import sessionManager from '../../../api/sessionManager';
+
+class QuickFeedback extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      feedback: feedbackHandler.getFeedbackRatings()
+    };
+    this.requestReportACallIssue = this.requestReportACallIssue.bind(this);
+    this.closeReport = this.closeReport.bind(this);
+    this.skipReport = this.skipReport.bind(this);
+  }
+
+  closeReport () {
+    jQuery('#confirmReportIssue').modal('hide');
+  }
+
+  skipReport () {
+    this.closeReport();
+    feedbackHandler.updateFeedback(0);
+    sessionManager.setAgentAvailable();
+  }
+
+  requestReportACallIssue () {
+    this.closeReport();
+    feedbackHandler.updateFeedback(0);
+    this.props.requestReportACallIssue();
+  }
+
+  feedbackChange (currentFeedback) {
+    const feedback = feedbackHandler.updateFeedback(currentFeedback);
+    this.setState({
+      feedback: feedback
+    });
+  }
+
+  render () {
+    return (
+      <div className="row mt-3">
+        <ConfirmReport requestReportACallIssue={this.requestReportACallIssue}
+							   closeReport={this.closeReport}
+							   skipReport={this.skipReport}/>
+
+        <div className="col-7 pr-0 mr-0">
+          <a className="text-left"
+					   style={{
+						   cursor: 'pointer',
+						   opacity: '0.6',
+						   fontFamily: 'AmazonEmber',
+						   fontSize: '14px',
+						   color: '#000000'
+					   }}>How was
+						the call quality?
+          </a></div>
+        <div className="col-5 pl-0 ml-0">
+          <a className="text-left"
+					   style={{ fontFamily: 'AmazonEmber', fontSize: '14px', color: '#3885de', cursor: 'pointer' }}
+					   onClick={this.props.requestReportACallIssue}
+          >Report a call issue</a>
+        </div>
+        <div className="col-12 mt-1">
+          {
+            feedbackRatings.map((currentFeedback) => (
+              <a key={`feedback-rating-${currentFeedback}`}
+							   style={{ cursor: 'pointer', paddingRight: '2%' }}
+							   onClick={() => this.feedbackChange(currentFeedback)}>
+                <img src={currentFeedback <= this.state.feedback ? starYellowIcon : starWhiteIcon}/>
+              </a>
+            ))
+          }
+        </div>
+        <div className="col-12 mt-1" style={{
+          opacity: '0.6',
+          fontFamily: 'AmazonEmber',
+          fontSize: '12px',
+          letterSpacing: 'normal',
+          color: '#000000'
+        }}>&nbsp;{lo.get(feedbackRatingsText, this.state.feedback - 1)}
+        </div>
+      </div>
+    );
+  }
+}
+
+QuickFeedback.propTypes = {
+  feedback: PropTypes.number,
+  requestReportACallIssue: PropTypes.func.isRequired
+};
+const mapStateToProps = state => ({});
+
+const mapDispatchToProps = dispatch => ({
+  requestReportACallIssue: () => {
+    dispatch(onRequestReportCallIssue('pending'));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(QuickFeedback);