amazon-connect-reference-dialer 1.0.0 → 1.4.3

package/src/client/container/footer/components/acceptOrReject.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import dialButton from './../../../res/images/fa-dial-button.svg';
+
+const AcceptOrReject = ({ divClass = '', linkClass = '', style = {}, onClickHandler, text = '', isReject = false }) => (
+  <div className={divClass}>
+    <a className={linkClass}
+		   style={style}
+		   onClick={onClickHandler}>
+      {isReject && <img src={dialButton}/>}
+      {text}
+    </a>
+  </div>
+);
+
+AcceptOrReject.propTypes = {
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  text: PropTypes.string.isRequired,
+  isReject: PropTypes.bool,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default AcceptOrReject;

package/src/client/container/footer/components/availableOrEnd.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import dialButton from './../../../res/images/fa-dial-button.svg';
+
+const AvailableOrEnd = ({ divClass = '', linkClass = '', style = {}, onClickHandler, text = '', isEnded = false }) => (
+  <div className={'row'}>
+    <div className={divClass}>
+      <a className={linkClass}
+			   style={style}
+			   onClick={onClickHandler}>
+        {isEnded && <img src={dialButton}/>}
+        {text}
+      </a>
+    </div>
+  </div>
+);
+
+AvailableOrEnd.propTypes = {
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  text: PropTypes.string.isRequired,
+  isEnded: PropTypes.bool,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default AvailableOrEnd;

package/src/client/container/footer/components/connectivitycheck.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ConnectivityCheck = ({ divClass = '', linkClass = '', style = {}, onClickHandler }) => (
+  <div className={divClass}>
+    <a id='dialer_settings_connect_check'
+      className={linkClass}
+      style={style}
+      onClick={onClickHandler}
+    > Connectivity check </a>
+  </div>
+);
+
+ConnectivityCheck.propTypes = {
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default ConnectivityCheck;

package/src/client/container/footer/components/downloadlogs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import downloadIcon from '../../../res/images/fa-download.svg';
+
+const DownloadLogs = ({ divClass = '', linkClass = '', style = {}, onClickHandler }) => (
+  <div className={divClass}>
+    <a id='dialer_settings_download_logs'
+      className={linkClass}
+      style={style}
+      onClick={onClickHandler}
+    > <img src={downloadIcon}/> Download logs </a>
+  </div>
+);
+
+DownloadLogs.propTypes = {
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default DownloadLogs;

package/src/client/container/footer/components/info.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import infoIcon from '../../../res/images/fa-info.svg';
+
+const Info = ({ divClass = '', linkClass = '', style = {}, onClickHandler }) => (
+  <div className={divClass}>
+    <a className={linkClass}
+		   style={style}
+		   onClick={onClickHandler}
+    > <img src={infoIcon}/> Info </a>
+  </div>
+);
+
+Info.propTypes = {
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default Info;

package/src/client/container/footer/components/language.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import languageIcon from '../../../res/images/fa-language.svg';
+
+const Language = ({ divClass = '', linkClass = '', style = {}, onClickHandler }) => (
+  <div className={divClass}>
+    <a className={linkClass}
+		   style={style}
+		   onClick={onClickHandler}
+    > <img src={languageIcon}/> English </a>
+  </div>
+);
+
+Language.propTypes = {
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default Language;

package/src/client/container/footer/components/reportcall.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import acManager from '../../../api/acManager';
+import { isAfterCallWork } from '../../../utils/acutils';
+import sessionManage from '../../../api/sessionManager';
+
+// take existing class and add disabled if it is not after call work
+const getClass = (prvClass = '') => {
+  const currentState = acManager.getCurrentState();
+  const primaryState = sessionManage.getCurrentStateString(currentState, true);
+  const secondaryState = sessionManage.getCurrentStateString(currentState, false);
+  if (isAfterCallWork(primaryState) || isAfterCallWork(secondaryState)) {
+    return prvClass;
+  }
+  return `${prvClass} disabled`;
+};
+const ReportACall = ({ id = '', divClass = '', linkClass = '', style = {}, onClickHandler }) => (
+  <div className={divClass}>
+    <a id={id}
+      className={getClass(linkClass)}
+      style={style}
+      onClick={onClickHandler}
+    > Report a call issue </a>
+  </div>
+);
+
+ReportACall.propTypes = {
+  id: PropTypes.string,
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default ReportACall;

package/src/client/container/footer/components/version.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import versionIcon from '../../../res/images/fa-version.svg';
+
+const Version = ({ divClass = '', linkClass = '', style = {}, onClickHandler }) => (
+  <div className={divClass}>
+    <a className={linkClass}
+		   style={style}
+		   onClick={onClickHandler}
+    > <img src={versionIcon}/> {`Dialer v${window.CS_VERSION}` }</a>
+  </div>
+);
+
+Version.propTypes = {
+  divClass: PropTypes.string,
+  linkClass: PropTypes.string,
+  style: PropTypes.object,
+  onClickHandler: PropTypes.func.isRequired
+};
+
+export default Version;

package/src/client/container/header/header.css

@@ -0,0 +1,46 @@
+.acHeader {
+    background-color: #525252;
+    height: 42px;
+    width: 319px;
+}
+
+.disable {
+    opacity: 0.4;
+}
+
+.csioLogo {
+    width: 24px;
+    height: 24px;
+}
+
+.csioChangeStatus {
+    cursor: pointer;
+}
+
+.csioHeaderText {
+    font-family: AmazonEmber;
+    color: #ffffff;
+    font-size: 14px;
+}
+
+.leftBorder {
+    border-left: 1px solid #8a8a8a !important;
+}
+
+.acPointer {
+    cursor: pointer;
+}
+
+.dialerImage {
+    margin-top: 0.5em;
+}
+
+.disabledDiv {
+    pointer-events: none;
+    opacity: 0.4;
+}
+
+.nope {
+
+
+}

package/src/client/container/header/header.js

@@ -0,0 +1,135 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVG from 'react-inlinesvg';
+
+import statusChangeIcon from '../../res/images/change-status-icon.svg';
+import dialerSettingIcon from '../../res/images/dialer-setting-icon.svg';
+import csioLogo from '../../res/images/csioLogo.png';
+
+import NetworkStrength from '../networkstrengthview/index';
+import { onRequestAgentSettingsChange, onRequestAgentStateChange } from '../../reducers/acReducer';
+import { connect } from 'react-redux';
+
+import styles from './header.css';
+import Quality from '../popups/quality/quality';
+import networkStrengthMonitor from '../../api/networkStrengthMonitor';
+import { sleep } from './../../utils/acutils';
+import sessionManage from '../../api/sessionManager';
+
+const CSIOLogo = () => (
+  <div className={`col-2 m-0 p-0 text-center`}>
+    <img src={csioLogo} className={styles.csioLogo}/>
+  </div>
+);
+
+const ChangeStatus = ({ onClickHandler, currentState = undefined }) => (
+  <div
+    className={`col-10 m-0 p-0 pl-1 ${styles.csioChangeStatus} ${sessionManage.isActive(currentState) && styles.disabledDiv}`}
+    onClick={onClickHandler}>
+    <span className={styles.csioHeaderText}>Change status</span>
+    <SVG src={statusChangeIcon}/>
+  </div>
+);
+
+const NetworkStrengthChange = ({ toggleShowNetworkStatus }) => (
+  <div className={`col-2 pl-0 ml-0 pr-0 mr-0 my-auto text-center`}>
+    <NetworkStrength toggleShowNetworkStatus={toggleShowNetworkStatus}/>
+  </div>
+);
+NetworkStrengthChange.propTypes = {
+  toggleShowNetworkStatus: PropTypes.func.isRequired
+};
+
+const DialerSettings = ({ onClickHandler }) => (
+  <div id="dialer_settings" className={`col-2 border-left ${styles.acPointer} ${styles.leftBorder}`}
+    onClick={onClickHandler}>
+    <img src={dialerSettingIcon} className={styles.dialerImage}/>
+  </div>
+);
+
+class Header extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      showNetworkStatus: false
+    };
+    this.show = false;
+    this.requestAgentStateChangeFunc = this.requestAgentStateChangeFunc.bind(this);
+    this.toggleShowNetworkStatus = this.toggleShowNetworkStatus.bind(this);
+  }
+
+  requestAgentStateChangeFunc () {
+    const { requestAgentStateChange } = this.props;
+    if (requestAgentStateChange === 'pending') {
+      this.props.requestAgentStateChangeFunc('close');
+    } else {
+      this.props.requestAgentStateChangeFunc('pending');
+    }
+  }
+
+  toggleShowNetworkStatus (show) {
+    this.show = show;
+    sleep(show ? 0 : 500).then(() => {
+      this.setState({
+        showNetworkStatus: this.show
+      });
+    });
+  }
+
+  render () {
+    const { emptyBody, currentState } = this.props;
+
+    return (
+      <div
+        className={`card-header pt-0 pb-0 mt-0 mb-0 ${styles.acHeader} ${emptyBody === true && styles.disable}`}>
+        <div className={`row h-100`}>
+          <div className={'col-8 my-auto'}>
+            <div className={`row`}>
+              <CSIOLogo/>
+              <ChangeStatus onClickHandler={this.requestAgentStateChangeFunc}
+                currentState={currentState}/>
+            </div>
+          </div>
+          <NetworkStrengthChange toggleShowNetworkStatus={this.toggleShowNetworkStatus}/>
+          <DialerSettings onClickHandler={this.props.requestAgentSettingsChange}/>
+        </div>
+        {
+          emptyBody !== true && this.state.showNetworkStatus &&
+                    <div className={`row text-center justify-content-end`}
+                      onMouseEnter={() => this.toggleShowNetworkStatus(true)}
+                      onMouseLeave={() => this.toggleShowNetworkStatus(false)}>
+                      <Quality qualityValue={networkStrengthMonitor.getNetworkStrength()}/>
+                    </div>
+        }
+      </div>
+    );
+  }
+}
+
+Header.propTypes = {
+  emptyBody: PropTypes.bool,
+  currentState: PropTypes.object,
+  requestAgentStateChange: PropTypes.string,
+  requestAgentStateChangeFunc: PropTypes.func.isRequired,
+  requestAgentSettingsChange: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+  currentState: state.acReducer.currentState,
+  requestAgentStateChange: state.acReducer.requestAgentStateChange
+});
+
+const mapDispatchToProps = dispatch => ({
+  requestAgentStateChangeFunc: (value) => {
+    dispatch(onRequestAgentStateChange(value));
+  },
+  requestAgentSettingsChange: () => {
+    dispatch(onRequestAgentSettingsChange('pending'));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Header);

package/src/client/container/header/index.js

@@ -0,0 +1,3 @@
+import Header from './header';
+
+export default Header;

package/src/client/container/home.js

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import StateChangeView from './statechangeview/index';
+import AgentView from './agentview/index';
+import SettingPageView from './settingsview/index';
+import ReportCallIssueView from './reportissueview/index';
+import ConnectivityCheckView from './connectivitycheckview/index';
+import DialPadView from './dialerview/index';
+import QuickConnectsView from './quickconnects/index';
+import TransferCallView from './transfercall/index';
+import Login from './login/index';
+import acManager from '../api/acManager';
+import AppStore from '../store';
+
+const maybeShowThisView = (currentView, ...others) => {
+  // current view needs to be pending
+  let isPending = ['pending'].includes(currentView);
+  if (!isPending) {
+    return false;
+  }
+  isPending = others.some(viewItem => {
+    return ['pending'].includes(viewItem);
+  });
+  // none of other view can be in pending state
+  if (isPending) {
+    return false;
+  }
+  return true;
+};
+
+class Home extends Component {
+  // eslint-disable-next-line no-useless-constructor
+  constructor (props) {
+    super(props);
+  }
+
+  componentDidMount () {
+    // register ac manager
+    acManager.register(AppStore.dispatch);
+    // console.warn('-> ', this.state.isLoggedIn);
+  }
+
+  render () {
+    const initialized = this.props.initialized;
+    const requestAgentStateChange = this.props.requestAgentStateChange;
+    const requestAgentSettingsChange = this.props.requestAgentSettingsChange;
+    const requestReportCallIssue = this.props.requestReportCallIssue;
+    const requestConnectivityCheck = this.props.requestConnectivityCheck;
+    const requestShowDialPad = this.props.requestShowDialPad;
+    const requestShowQuickConnects = this.props.requestShowQuickConnects;
+    const requestShowTransferCall = this.props.requestShowTransferCall;
+
+    return (
+      !initialized
+        ? (<div className={`container`} style={{ width: '320px', height: '480px' }}>
+          <Login showLogin={acManager.getIsLoggedIn() === false}/>
+        </div>)
+        : <div className={`container`} style={{ width: '320px', height: '480px' }}>
+          {
+            maybeShowThisView('pending', requestAgentStateChange, requestAgentSettingsChange, requestReportCallIssue,
+              requestConnectivityCheck, requestShowDialPad, requestShowQuickConnects,
+              requestShowTransferCall) &&
+                        <AgentView/>}
+          {
+            maybeShowThisView(requestAgentStateChange, requestAgentSettingsChange, requestReportCallIssue,
+              requestConnectivityCheck, requestShowDialPad, requestShowQuickConnects,
+              requestShowTransferCall) &&
+                        <StateChangeView/>}
+          {
+            maybeShowThisView(requestAgentSettingsChange, requestAgentStateChange, requestReportCallIssue,
+              requestConnectivityCheck, requestShowDialPad, requestShowQuickConnects, requestShowTransferCall) &&
+                        <SettingPageView/>}
+
+          {
+            maybeShowThisView(requestReportCallIssue, requestAgentStateChange, requestAgentSettingsChange,
+              requestConnectivityCheck, requestShowDialPad, requestShowQuickConnects, requestShowTransferCall) &&
+                        <ReportCallIssueView/>}
+
+          {
+            maybeShowThisView(requestConnectivityCheck, requestAgentStateChange, requestAgentSettingsChange, requestReportCallIssue,
+              requestShowDialPad, requestShowQuickConnects, requestShowTransferCall) &&
+                        <ConnectivityCheckView/>}
+
+          {
+            maybeShowThisView(requestShowDialPad, requestAgentStateChange, requestAgentSettingsChange, requestReportCallIssue,
+              requestConnectivityCheck, requestShowQuickConnects, requestShowTransferCall) &&
+                        <DialPadView/>}
+
+          {
+            maybeShowThisView(requestShowQuickConnects, requestAgentStateChange, requestAgentSettingsChange, requestReportCallIssue,
+              requestConnectivityCheck, requestShowDialPad, requestShowTransferCall) &&
+                        <QuickConnectsView/>}
+
+          {
+            maybeShowThisView(requestShowTransferCall, requestAgentStateChange, requestAgentSettingsChange, requestReportCallIssue,
+              requestConnectivityCheck, requestShowDialPad, requestShowQuickConnects) &&
+                        <TransferCallView/>}
+        </div>
+    );
+  }
+}
+
+Home.propTypes = {
+  initialized: PropTypes.bool.isRequired,
+  requestAgentStateChange: PropTypes.string.isRequired,
+  requestAgentSettingsChange: PropTypes.string.isRequired,
+  requestReportCallIssue: PropTypes.string.isRequired,
+  requestConnectivityCheck: PropTypes.string.isRequired,
+  requestShowDialPad: PropTypes.string.isRequired,
+  requestShowQuickConnects: PropTypes.string.isRequired,
+  requestShowTransferCall: PropTypes.string.isRequired
+};
+const mapStateToProps = state => ({
+  initialized: state.acReducer.initialized,
+  requestAgentStateChange: state.acReducer.requestAgentStateChange || 'complete',
+  requestAgentSettingsChange: state.acReducer.requestAgentSettingsChange || 'complete',
+  requestReportCallIssue: state.acReducer.requestReportCallIssue || 'complete',
+  requestConnectivityCheck: state.acReducer.requestConnectivityCheck || 'complete',
+  requestShowDialPad: state.acReducer.requestShowDialPad || 'complete',
+  requestShowQuickConnects: state.acReducer.requestShowQuickConnects || 'complete',
+  requestShowTransferCall: state.acReducer.requestShowTransferCall || 'complete'
+});
+const mapDispatchToProps = dispatch => ({});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Home);

package/src/client/container/login/body.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import styles from './login.css';
+import databaseManager from '../../api/databaseManager';
+import sessionManage from '../../api/sessionManager';
+
+import CCPInputBox from './ccpinputbox';
+
+const getCCPScope = () => {
+  const ccpScope = databaseManager.getDefaultConnectURL(CONNECT_URL || WEB_PACK_CONNECT_URL);
+  return ccpScope;
+};
+
+const loginURL = () => {
+  const connectURL = databaseManager.getDefaultConnectURL(CONNECT_URL || WEB_PACK_CONNECT_URL);
+  return `https://${connectURL}/connect/login?landat=%2Fconnect%2Fccp#/`;
+};
+class Body extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      ccpURL: getCCPScope()
+    };
+    this.ccpURLChange = this.ccpURLChange.bind(this);
+    this.trySignIn = this.trySignIn.bind(this);
+  }
+
+  ccpURLChange (event) {
+    let { value } = event.target;
+    this.setState({
+      ccpURL: value
+    });
+  }
+
+  trySignIn () {
+    // set the current CCP URL as current one
+    databaseManager.setDefaultConnectURL(this.state.ccpURL || '');
+
+    // fetch the newly set loginIN URL
+    let loginWindow = window.open(loginURL());
+    sessionManage.setLoginWindow(loginWindow);
+  }
+
+  render () {
+    return (
+      <div className={`card-body ${styles.cardBodyMain}`}>
+        <div className="row h-100">
+          <div className={`col-12 my-auto`}>
+            <div className={`row`}>
+              <div className="col-12">
+                <span className={styles.ccpInputBoxText}>Amazon Connect CCP URL</span>
+              </div>
+              <CCPInputBox ccpURL={this.state.ccpURL}
+                ccpURLChange={this.ccpURLChange}
+              />
+              <div className="col-12 mt-4 text-center">
+                <a className={`btn w-50 ${styles.loginText}`} onClick={this.trySignIn}> Sign in </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Body.propTypes = {};
+export default Body;

package/src/client/container/login/ccpinputbox.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './login.css';
+
+const CCPInputBox = ({ ccpURLChange, ccpURL = '' }) => (
+  <div className="col-12 mt-2">
+    <div className="input-group flex-nowrap">
+      <input type="text"
+        className={`form-control ${styles.ccpInputBox}`}
+        placeholder="callstatsio.awsapps.com"
+        aria-label="contact"
+        value={ccpURL}
+        onChange={ccpURLChange}
+        aria-describedby="addon-wrapping"/>
+    </div>
+  </div>
+);
+
+CCPInputBox.propTypes = {
+  ccpURLChange: PropTypes.func.isRequired,
+  ccpURL: PropTypes.string
+};
+export default CCPInputBox;

package/src/client/container/login/footer.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './login.css';
+
+const Footer = ({ tryLogin }) => (
+  <div className={`card-footer m-0 p-0 ${styles.footerMain}`}>
+    <div className="row">
+      <div className="col-12">
+        <a className={`btn w-100 ${styles.footerLogin}`}
+				   onClick={tryLogin}> Login </a>
+      </div>
+    </div>
+  </div>
+);
+Footer.propTypes = {
+  tryLogin: PropTypes.func
+};
+export default Footer;

package/src/client/container/login/index.js

@@ -0,0 +1,2 @@
+import Login from './main';
+export default Login;