amazon-connect-reference-dialer 1.0.0 → 1.4.2

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import Header from './../header/index';
+import Body from './body';
+
+import styles from './quickconnects.css';
+
+const QuickConnectsView = ({}) => (
+  <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 QuickConnectsView;

package/src/client/container/quickconnects/quickconnects.css

@@ -0,0 +1,95 @@
+.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;
+}
+
+.cursor {
+    cursor: pointer;
+}
+

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import closeOrDismissIcon from '../../res/images/fa-close-or-dismiss.svg';
+
+import IssueNotes from './issueNotes';
+import FeedbackRatings from './feedbackRatings';
+import PredefinedIssues from './predefinedIssues';
+import styles from './reportissue.css';
+
+const selectedIssueCount = (issueList) => {
+  let totalCount = 0;
+  for (let i = 0; i < issueList.length; i += 1) {
+    let currentIssue = issueList[i].items;
+    for (let j = 0; j < currentIssue.length; j += 1) {
+      let currentItem = currentIssue[j];
+      if (currentItem.marked) {
+        totalCount += 1;
+      }
+    }
+  }
+  return totalCount;
+};
+
+const BodyHeader = ({ closeReportCallIssue }) => (
+  <div className="row ">
+    <div className="col-10">
+      <span className={styles.cardBodyHeader}>Report a call issue</span>
+    </div>
+    <div className="col-2"
+      id='dialer_report_issue_close'
+      onClick={closeReportCallIssue}>
+      <img src={closeOrDismissIcon} className={styles.cursor}/></div>
+  </div>
+);
+BodyHeader.propTypes = {
+  closeReportCallIssue: PropTypes.func.isRequired
+};
+
+const Body = ({ closeReportCallIssue, onFeedbackTextChange, onFeedbackRatingChange, onIssueListSelectionChange, feedbackRatings, feedbackText, issueList }) => (
+  <div className={`card-body ${styles.cardBodyMain}`}>
+
+    <BodyHeader closeReportCallIssue={closeReportCallIssue}/>
+
+    <FeedbackRatings onFeedbackRatingChange={onFeedbackRatingChange}
+						 feedbackRating={feedbackRatings}/>
+
+    <IssueNotes onFeedbackTextChange={onFeedbackTextChange}
+      feedbackText={feedbackText}/>
+
+    <div className="row">
+      <div className={`col-7 text-left ${styles.bodySelectAReason}`}>Select a reason
+      </div>
+      <div className={`col-5 text-right ${styles.bodyIssueSelect}`}>{selectedIssueCount(issueList)} selected
+      </div>
+    </div>
+    <div className={`row`}>
+      <PredefinedIssues onIssueListSelectionChange={onIssueListSelectionChange}
+							  issueList={issueList}/>
+    </div>
+  </div>
+);
+
+Body.propTypes = {
+  closeReportCallIssue: PropTypes.func.isRequired,
+  onFeedbackTextChange: PropTypes.func.isRequired,
+  onFeedbackRatingChange: PropTypes.func.isRequired,
+  onIssueListSelectionChange: PropTypes.func.isRequired,
+  feedbackRatings: PropTypes.number.isRequired,
+  feedbackText: PropTypes.string.isRequired,
+  issueList: PropTypes.array.isRequired
+};
+export default Body;

package/src/client/container/reportissueview/feedbackRatings.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import lo from 'lodash';
+
+import starYellowIcon from '../../res/images/star-yellow.svg';
+import starWhiteIcon from '../../res/images/star-white.svg';
+
+import { feedbackRatings, feedbackRatingsText } from '../../utils/feedback';
+import styles from './reportissue.css';
+
+const FeedbackRatings = ({ onFeedbackRatingChange, feedbackRating }) => (
+  <div className="row mt-0">
+    <div className="col-12">
+      <a className={`text-left ${styles.callQualityText} `}>How was the call
+				quality? </a></div>
+    <div className="col-12">
+      {
+        feedbackRatings.map((currentFeedback) => (
+          <a key={`feedback-rating-${currentFeedback}`} className={styles.cursor}
+					   onClick={() => onFeedbackRatingChange(currentFeedback)}>
+            <img src={currentFeedback <= feedbackRating ? starYellowIcon : starWhiteIcon}/>
+          </a>
+        ))
+      }
+    </div>
+    <div className={`col-12 ${styles.feedbackRatingText}`}>
+			&nbsp;{lo.get(feedbackRatingsText, feedbackRating - 1)}
+    </div>
+  </div>
+);
+
+FeedbackRatings.propTypes = {
+  onFeedbackRatingChange: PropTypes.func.isRequired,
+  feedbackRating: PropTypes.number.isRequired
+};
+
+export default FeedbackRatings;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './reportissue.css';
+
+const Footer = ({ submitIssue }) => (
+  <div className={`card-footer m-0 p-0 ${styles.footerMain}`}>
+    <div className="row">
+      <div className="col-12">
+        <a id='dialer_report_issue_submit'
+          className={`btn w-100 ${styles.footerSubmit}`}
+          onClick={submitIssue}> Submit</a>
+      </div>
+    </div>
+  </div>
+);
+Footer.propTypes = {
+  submitIssue: PropTypes.func.isRequired
+};
+export default Footer;

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

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

package/src/client/container/reportissueview/issueNotes.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './reportissue.css';
+
+const IssueNotes = ({ onFeedbackTextChange, feedbackText }) => (
+  <div className="row mt-1">
+    <div className="col-12">
+      <textarea placeholder="Enter your notes about the issue here" rows={3}
+					  value={feedbackText}
+					  onChange={onFeedbackTextChange}
+					  className={`col-12 ${styles.textArea}`}/>
+    </div>
+  </div>
+);
+
+IssueNotes.propTypes = {
+  onFeedbackTextChange: PropTypes.func.isRequired,
+  feedbackText: PropTypes.string
+};
+
+export default IssueNotes;

package/src/client/container/reportissueview/issues.js

@@ -0,0 +1,44 @@
+// list of constant issues
+// which might come from some API call later on
+
+import lo from 'lodash';
+
+const issueList = [
+  {
+    name: '',
+    items: [
+      { text: 'I need help, contact me', marked: false, id: 'dialer_report_issue_need_help' }
+    ]
+  },
+  {
+    name: 'Audio related problems',
+    items: [
+      { text: 'Unable to hear customer', marked: false },
+      { text: 'Customer can’t hear agent', marked: false },
+      { text: 'Customer is too quiet', marked: false },
+      { text: 'Audio dropped mid call', marked: false }
+    ]
+  },
+  {
+    name: 'Call handling problems',
+    items: [
+      { text: 'Unable to transfer the customer', marked: false },
+      { text: 'Unable to put the customer on hold', marked: false },
+      { text: 'Call dropped while talking', marked: false },
+      { text: 'Call dropped while hold', marked: false }
+    ]
+  },
+  {
+    name: 'Static/ Gaps',
+    items: [
+      { text: 'Static on line', marked: false },
+      { text: 'Intolerable static on line, not able to complete call', marked: false },
+      { text: 'Gaps in audio', marked: false }
+    ]
+  }
+];
+
+export const getIssueList = () => {
+  let issueObject = lo.cloneDeep(issueList);
+  return [...issueObject];
+};

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

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Header from '../header/index';
+import Body from './body';
+import Footer from './footer';
+import { getIssueList } from './issues';
+import { onRequestReportCallIssue } from '../../reducers/acReducer';
+
+import sessionManager from './../../api/sessionManager';
+import feedbackHandler from './../../api/feedbackHandler';
+
+import styles from './reportissue.css';
+import csioHandler from '../../api/csioHandler';
+
+class ReportCallIssueView extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      feedbackRatings: feedbackHandler.getFeedbackRatings(),
+      feedbackText: '',
+      issueList: getIssueList()
+    };
+    this.onFeedbackTextChange = this.onFeedbackTextChange.bind(this);
+    this.onFeedbackRatingChange = this.onFeedbackRatingChange.bind(this);
+    this.onIssueListSelectionChange = this.onIssueListSelectionChange.bind(this);
+    this.closeReportCallIssue = this.closeReportCallIssue.bind(this);
+    this.submitIssue = this.submitIssue.bind(this);
+  }
+
+  onFeedbackTextChange (event) {
+    this.setState({
+      feedbackText: event.target.value
+    });
+  }
+
+  onFeedbackRatingChange (currentFeedback) {
+    const feedback = feedbackHandler.updateFeedback(currentFeedback);
+    this.setState({
+      feedbackRatings: feedback
+    });
+  }
+
+  onIssueListSelectionChange (issueIndex, itemIndex) {
+    let issueList = [...this.state.issueList];
+    let currentItem = issueList[issueIndex].items[itemIndex];
+    currentItem.marked = !currentItem.marked;
+
+    this.setState({
+      issueList: issueList
+    });
+  }
+
+  submitIssue () {
+    let { feedbackRatings, feedbackText, issueList: currentIssue } = this.state;
+    csioHandler.sendFeedback({ feedbackRatings, feedbackText, issueList: currentIssue });
+
+    sessionManager.setAgentAvailable();
+    feedbackHandler.updateFeedback(0);
+    this.closeReportCallIssue();
+  }
+
+  closeReportCallIssue () {
+    this.props.closeReportCallIssue();
+  }
+
+  render () {
+    return (
+      <div className={`row h-100`}>
+        <div className={`col-12 ${styles.zeroPadding}`}>
+          <div className={`card h-100 ${styles.cardBody}`}>
+            <Header/>
+            <Body
+              feedbackRatings={this.state.feedbackRatings}
+              feedbackText={this.state.feedbackText}
+              issueList={this.state.issueList}
+              onFeedbackTextChange={this.onFeedbackTextChange}
+              onFeedbackRatingChange={this.onFeedbackRatingChange}
+              onIssueListSelectionChange={this.onIssueListSelectionChange}
+              closeReportCallIssue={this.closeReportCallIssue}
+            />
+            <Footer submitIssue={this.submitIssue}/>
+          </div>
+        </div>
+      </div>
+
+    );
+  }
+}
+
+ReportCallIssueView.propTypes = {
+  closeReportCallIssue: PropTypes.func.isRequired
+};
+const mapStateToProps = state => ({});
+const mapDispatchToProps = dispatch => ({
+  closeReportCallIssue: () => {
+    dispatch(onRequestReportCallIssue('close'));
+  }
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ReportCallIssueView);

package/src/client/container/reportissueview/predefinedIssues.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import markFalseIcon from '../../res/images/fa-mark-false.svg';
+import markTrueIcon from '../../res/images/fa-mark-true.svg';
+import styles from './reportissue.css';
+
+const PredefinedIssues = ({ onIssueListSelectionChange, issueList }) => (
+  <div className="col-12" style={{}}>
+    {
+      issueList.map((issue, issueIndex) => (
+        <div className={`row mt-${issue.name === '' ? 0 : 1}`} key={`issue-${issue.name}`}>
+          <div className="col-12">
+            <a className={styles.predefinedIssueName}> {issue.name} </a>
+          </div>
+          {
+            issue.items.map((item, itemIndex) => (
+              <div className="col-12" key={`issue-link-${item.text}`}>
+                <a className={styles.predefinedIssueList}>
+                  <img style={{ cursor: 'pointer' }}
+                    id={item.id || ''}
+                    onClick={() => onIssueListSelectionChange(issueIndex, itemIndex)}
+                    src={item.marked ? markTrueIcon : markFalseIcon}/> {item.text} </a>
+              </div>
+            ))
+          }
+        </div>
+      ))
+    }
+  </div>
+);
+
+PredefinedIssues.propTypes = {
+  onIssueListSelectionChange: PropTypes.func.isRequired,
+  issueList: PropTypes.array.isRequired
+};
+
+export default PredefinedIssues;

package/src/client/container/reportissueview/reportissue.css

@@ -0,0 +1,102 @@
+.footerMain {
+    background-color: rgb(255, 255, 255);
+    border-top: 0;
+}
+
+.footerSubmit {
+    cursor: pointer;
+    height: 36px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px 0;
+    background-color: rgb(56, 133, 222);
+    color: rgb(255, 255, 255) !important;
+    font-family: AmazonEmber;
+    font-size: 14px;
+    border-radius: 0 !important;
+}
+
+.textArea {
+    outline: none !important;
+    max-height: 55px;
+    min-height: 10px;
+    background-color: #f7f7f7;
+    resize: none;
+    font-family: AmazonEmber;
+    font-size: 14px;
+    color: #000000;
+}
+
+.feedbackRatingText {
+    font-family: AmazonEmber;
+    font-size: 12px;
+    letter-spacing: normal;
+    color: #000000;
+}
+
+.callQualityText {
+    font-family: AmazonEmber;
+    font-size: 12px;
+    color: #000000;
+}
+
+.cursor {
+    cursor: pointer;
+}
+
+.zeroPadding {
+    padding: 0;
+}
+
+.cardBody {
+    background-color: #f2f2f2;
+}
+
+.predefinedIssueDivMain {
+    /*max-height: 117px;*/
+    /*min-height: 20%;*/
+    /*border: solid 1px #cfcfcf;*/
+    /*background-color: #f7f7f7;*/
+    /*overflow-y: scroll;*/
+}
+
+.predefinedIssueName {
+    opacity: 0.6;
+    font-family: AmazonEmber;
+    font-size: 12px;
+    letter-spacing: normal;
+    color: #000000;
+}
+
+.predefinedIssueList {
+    font-family: AmazonEmber;
+    font-size: 14px;
+    color: #000000;
+}
+
+.bodySelectAReason {
+    opacity: 0.6;
+    font-family: AmazonEmber;
+    font-size: 12px;
+    letter-spacing: normal;
+    color: #000000;
+}
+
+.bodyIssueSelect {
+    opacity: 0.6;
+    font-family: AmazonEmber;
+    font-size: 12px;
+    letter-spacing: normal;
+    color: #000000;
+}
+
+.cardBodyMain {
+    background-color: #ffffff;
+    /*background-color: #f7f7f7;*/
+    overflow-y: scroll;
+    height: 0em;
+}
+
+.cardBodyHeader {
+    color: #000000;
+    font-size: 18px;
+    font-family: AmazonEmber;
+}