amazon-connect-reference-dialer 1.0.0 → 1.4.2

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import activeIcon from '../../res/images/fa-tick-mark.svg';
+import PropTypes from 'prop-types';
+import lo from 'lodash';
+
+import styles from './statuschange.css';
+
+import {
+  onRequestAgentStateChange
+} from '../../reducers/acReducer';
+
+import sessionManage from '../../api/sessionManager';
+
+// change state using api
+const changeAgentState = (currentAgentState) => {
+  sessionManage.setAgentState(currentAgentState).then(success => _, err => console.error('->', err));
+};
+
+const isCurrentState = (currentAgentState, currentState) => {
+  const state = lo.get(currentState, 'primaryConnectionState.state', '');
+  return currentAgentState && currentAgentState.name === state;
+};
+
+const Body = ({ currentState = {}, requestAgentStateChange }) => (
+  <div className={`card-body`}>
+    {sessionManage.getAgentStates().map((currentAgentState) => (
+      <div id={`dialer_state_${currentAgentState.name.replace(/\s/g, '')}`} key={`agent-state-${currentAgentState.name}`} className={`row ${styles.acPointer} ${styles.acList}`}
+        onClick={() => requestAgentStateChange(currentAgentState)}>
+        <div className="col-2">
+          {isCurrentState(currentAgentState, currentState) && <img src={activeIcon}/>}
+        </div>
+        <div className="col-10">
+          <span
+            className={`${isCurrentState(currentAgentState, currentState) ? styles.acSpanSelected : styles.acSpanNormal}`}> {currentAgentState.name}</span>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+Body.propTypes = {
+  currentState: PropTypes.object,
+  requestAgentStateChange: PropTypes.func.isRequired
+};
+const mapStateToProps = state => ({
+  currentState: state.acReducer.currentState
+});
+
+const mapDispatchToProps = dispatch => ({
+  requestAgentStateChange: (currentAgentState) => {
+    changeAgentState(currentAgentState);
+    dispatch(onRequestAgentStateChange('complete'));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Body);

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

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import styles from './statuschange.css';
+import { sleep } from './../../utils/acutils';
+import databaseManager from '../../api/databaseManager';
+
+const logoutURL = () => {
+  const connectURL = databaseManager.getDefaultConnectURL(CONNECT_URL || WEB_PACK_CONNECT_URL);
+  return `https://${connectURL}/connect/logout`;
+};
+
+class Footer extends Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      loggedOut: false
+    };
+    this.logout = this.logout.bind(this);
+  }
+
+  logout () {
+    this.setState({
+      loggedOut: true
+    });
+    sleep(1000).then(() => window.location.reload());
+  }
+
+  render () {
+    return (
+      <div className={`card-footer ${styles.acFooter}`}>
+        <div className={`row ${styles.acFooterChild}`}>
+          <div id='dialer_state_log_out' className="col-12" onClick={this.logout}>
+            <a className={`${styles.acLink} ${styles.acPointer}`}>Log out</a>
+          </div>
+        </div>
+        <div className={`${styles.acNoDisplay}`}>
+          {this.state.loggedOut && <iframe src={logoutURL()}/>}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Footer;

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

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

package/src/client/container/statechangeview/main.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import Header from './../header/index';
+import Body from './body';
+import Footer from './footer';
+
+import styles from './statuschange.css';
+
+const StateChangeView = ({}) => (
+  <div className={`row h-100 border-right border-top border-bottom`}>
+    <div className={`${styles.acZeroPadding} col-12`}>
+      <div className={`${styles.acCard} card h-100`}>
+        <Header/>
+        <Body/>
+        <Footer/>
+      </div>
+    </div>
+  </div>
+);
+
+export default StateChangeView;

package/src/client/container/statechangeview/statuschange.css

@@ -0,0 +1,47 @@
+.acCard {
+    margin-right: 17%;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+    background-color: #ffffff
+}
+
+.acFooter {
+    background-color: inherit;
+    margin-right: 8%;
+    margin-left: 8%;
+    min-height: 12%;
+}
+
+.acFooterChild {
+    margin-left: -18%;
+}
+
+.acPointer {
+    cursor: pointer;
+}
+
+.acLink {
+    font-family: AmazonEmber;
+    color: #3885de !important;
+}
+
+.acSpanSelected {
+    font-family: AmazonEmber;
+    color: #3885de !important;
+}
+
+.acSpanNormal {
+    font-family: AmazonEmber;
+    color: #000000 !important;
+}
+
+.acList {
+    margin-bottom: 5%;
+}
+
+.acNoDisplay {
+    display: none;
+}
+
+.acZeroPadding {
+    padding: 0;
+}

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

@@ -0,0 +1,139 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import styles from './transfercall.css';
+
+import sessionManager from './../../api/sessionManager';
+
+import {
+  onRequestShowTransferCall
+} from '../../reducers/acReducer';
+
+import CloseQuickConnect from './close';
+import FindContact from '../common/findContact';
+import ContactField from '../common/contactField';
+
+const THROTTLE_TIMEOUT = 100;
+
+class Body extends Component {
+  constructor (props) {
+    super(props);
+    this.defaultContactList = [];
+    this.state = {
+      contactList: [...this.defaultContactList],
+      contactValue: '',
+      lastUpdate: Date.now(),
+      isContactListHover: false
+    };
+    this.updateContactList = this.updateContactList.bind(this);
+    this.contactChange = this.contactChange.bind(this);
+    this.dialContact = this.dialContact.bind(this);
+    this.dialNumber = this.dialNumber.bind(this);
+    this.close = this.close.bind(this);
+  }
+
+  componentDidMount () {
+    sessionManager.getTransferConnList().then(quickContacts => {
+      this.defaultContactList = quickContacts;
+      this.setState({
+        contactList: [...this.defaultContactList]
+      });
+    }).catch(err => {
+      console.error('->', err);
+    });
+  }
+
+  updateContactList (token) {
+    const { lastUpdate } = this.state;
+    const curTime = Date.now();
+    if (curTime - lastUpdate < THROTTLE_TIMEOUT) {
+      return;
+    }
+
+    let currentContactList = this.defaultContactList.filter((currentContact) => {
+      return (currentContact.name || '').includes(token);
+    });
+    this.setState({
+      contactList: currentContactList,
+      lastUpdate: curTime
+    });
+  }
+
+  contactChange (event) {
+    let { value } = event.target;
+    this.setState({
+      contactValue: value
+    });
+    this.updateContactList(value);
+  }
+
+  dialContact (selectedContact = undefined) {
+    sessionManager.dialContact(selectedContact).then(success => {
+      this.close();
+    }, err => {
+      console.error(err);
+    });
+    this.setState({
+      contactList: [...this.defaultContactList],
+      contactValue: ''
+    });
+  }
+  dialNumber () {
+    const { contactValue } = this.state;
+    sessionManager.dialNumber(contactValue).then(success => {
+      this.close();
+    }, err => {
+      console.error(err);
+    });
+    this.setState({
+      contactList: [...this.defaultContactList],
+      contactValue: ''
+    });
+  }
+
+  close () {
+    this.props.close();
+  }
+  
+  hoverHandler = (newVal) => {
+    this.setState({
+      isContactListHover: newVal
+    })
+  }
+
+  render () {
+    const {contactValue, isContactListHover, contactList} = this.state
+    return (
+      <div className={`card-body ${styles.cardBody}`}>
+        <CloseQuickConnect close={this.close} />
+        <FindContact contactChange={this.contactChange}
+          dialNumber={this.dialNumber}
+          contactValue={contactValue}
+          isContactListHover={isContactListHover}
+          styles={styles}
+        />
+        <ContactField contactList={contactList}
+          dialContact={this.dialContact}
+          onHover={this.hoverHandler}
+          styles={styles}
+        />
+      </div>
+    );
+  }
+}
+
+Body.propTypes = {
+  close: PropTypes.func.isRequired
+};
+const mapStateToProps = state => ({});
+
+const mapDispatchToProps = dispatch => ({
+  close: () => {
+    dispatch(onRequestShowTransferCall('close'));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Body);

package/src/client/container/transfercall/close.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import closeOrDismissIcon from './../../res/images/fa-close-or-dismiss.svg';
+import styles from './transfercall.css';
+
+const CloseQuickConnect = ({ close }) => (
+  <div className="row ">
+    <div className="col-10">
+      <span className={styles.quickConnectText}>Transfer call</span>
+    </div>
+    <div className="col-2"
+			 onClick={close}>
+      <img src={closeOrDismissIcon} className={styles.cursor}/>
+    </div>
+  </div>
+);
+
+CloseQuickConnect.propTypes = {
+  close: PropTypes.func.isRequired
+};
+
+export default CloseQuickConnect;

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

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

package/src/client/container/transfercall/main.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Header from './../header/index';
+import Body from './body';
+
+import styles from './transfercall.css';
+
+const TransferCallView = ({}) => (
+  <div className={`row h-100`}>
+    <div className={`col-12 ${styles.zeroPadding}`}>
+      <div className={`card h-100 ${styles.cardBodyMain}`}>
+        <Header/>
+        <Body/>
+      </div>
+    </div>
+  </div>
+);
+
+export default TransferCallView;

package/src/client/container/transfercall/transfercall.css

@@ -0,0 +1,99 @@
+.zeroPadding {
+    padding: 0 !important;
+}
+
+.cardBodyMain {
+    background: #f2f2f2;
+}
+
+.cardBody {
+    background-color: #ffffff;
+}
+
+.quickConnectText {
+    color: #000000;
+    font-size: 18px;
+    font-family: AmazonEmber;
+}
+
+.quickConnectSearch {
+    font-family: AmazonEmber;
+    color: #000000;
+    border: 1px solid #000000;
+    border-top: 0 !important;
+    border-left: 0 !important;
+    border-right: 0 !important;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.quickConnectSearch:focus {
+    border: 1px solid #000000;
+    border-top: 0 !important;
+    border-left: 0 !important;
+    border-right: 0 !important;
+    border-radius: 0;
+    box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.29);
+}
+
+.callPhoneDialButton{
+    background-color: #46596e;
+    font-family: AmazonEmber;
+    color: #ffffff !important;
+    cursor: pointer;
+    border-radius: 0 !important;
+}
+
+
+.contactListBox {
+    margin-top: 14px;
+    background: #FFFFFF;
+    border: 1px solid #CCCCCC;
+    border-radius: 2px;
+    height: 250px;
+    overflow-y: auto;
+    /*box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.29);*/
+    box-shadow: none;
+}
+
+.contactItem {
+    /*background: #3388DD;*/
+    /*color: #FFFFFF;*/
+}
+
+.contactItem:hover {
+    background: #d8d8d8;
+    color: #000000;
+}
+
+.contactItem:hover .dialButton {
+    visibility: visible;
+    color: #FFFFFF !important;
+}
+
+.contactItem:hover .contactName {
+    color: #000000 !important;
+}
+
+.contactName {
+    font-family: AmazonEmber;
+    color: #000000 !important;
+    text-align: left;
+}
+
+.dialButton {
+    visibility: hidden;
+    background-color: #46596E;
+    font-family: AmazonEmber;
+    color: #ffffff !important;
+    cursor: pointer;
+    border-radius: 0 !important;
+    /*border: 15em;*/
+    /*border-top: 15em;*/
+    /*border-bottom: 15em;*/
+}
+
+.cursor {
+    cursor: pointer;
+}
+

package/src/client/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import intl from 'intl';
+
+import './res/scss/global.css';
+
+// apply polyfill
+if (!window.Intl) {
+  window.Intl = intl;
+}
+
+ReactDOM.render(<App/>, document.getElementById('root'));