telephony 1.0.3

data/app/assets/javascripts/telephony/views/status_view.js

@@ -0,0 +1,36 @@
+Zest.Telephony.Views.StatusView = Backbone.View.extend({
+  className: 'agent-status-wrapper',
+
+  events: {
+    'click button' : 'toggleAvailable'
+  },
+
+  template: JST["templates/telephony/status_view"],
+
+  initialize: function (options) {
+    this.agent = new Zest.Telephony.Models.Agent({csr_id: options.csrId});
+    this.agent.bind("change", this.render, this);
+
+    $(document).bind("telephony:csrDidChangeStatus", $.proxy(this.renderStatus, this));
+    $(document).bind("telephony:csrNotAvailable", $.proxy(this.setNotAvailable, this));
+    $(document).bind("telephony:toggleCsrStatus", $.proxy(this.toggleAvailable, this));
+  },
+
+  toggleAvailable: function(event) {
+    event.preventDefault();
+    this.agent.toggleAvailable();
+  },
+
+  setNotAvailable: function() {
+    this.agent.updateStatus();
+  },
+
+  renderStatus: function(event, data) {
+    this.agent.set(data);
+  },
+
+  render: function() {
+    $(this.el).html(this.template({ agent: this.agent }));
+    return this;
+  }
+});

data/app/assets/javascripts/telephony/views/transfer_view.js

@@ -0,0 +1,87 @@
+Zest.Telephony.Views.TransferView = Backbone.View.extend({
+  template: JST["templates/telephony/transfer_view"],
+
+  events: {
+    "submit": "selectBestMatchedAgent",
+    "keyup input[name=selected_agent]": "filterAgents",
+    "click button.initiate-transfer": "initiateTransfer",
+    "click .backspace": "clearSelectedAgent",
+    "click input[name=transfer_type]": "setTransferType"
+  },
+
+  initialize: function(option) {
+    this.transfer = new Zest.Telephony.Models.Transfer({conversationId: option.conversationId});
+
+    $(this.el).bind("agentDidSelect", $.proxy(this.setSelectedAgent, this));
+  },
+
+  rebindEvents: function() {
+    this.delegateEvents(this.events);
+    $(this.el).bind("agentDidSelect", $.proxy(this.setSelectedAgent, this));
+  },
+
+  selectBestMatchedAgent: function(event) {
+    this.agentsView.selectBestMatched();
+    return false;
+  },
+
+  clearSelectedAgent: function(event) {
+    this.transfer.set({selectedAgent: null});
+    this.render();
+  },
+
+  filterAgents: function(event) {
+    if (event.keyCode == 13) return;
+
+    var query = $(event.currentTarget).val();
+    this.search(query);
+  },
+
+  search: function(query) {
+    this.agentsView.filter(query);
+  },
+
+  setSelectedAgent: function(evt, selectedAgent) {
+    this.transfer.set({selectedAgent: selectedAgent});
+    this.render();
+  },
+
+  initiateTransfer: function(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    var transferType = this.$('form input[name=transfer_type]:checked').val();
+    var that = this;
+    this.transfer.save({ transferType: transferType },
+                       { success: function() {
+                           $(document).trigger("transferInitiated");
+                         },
+                         error: function(model, xhr) {
+                           var body = JSON.parse(xhr.responseText);
+                           $(document).trigger('transferFailed', body.errors[0]);
+                         }
+                       });
+    return false;
+  },
+
+  setTransferType: function(evt) {
+    this.transfer.set({transferType: $(evt.currentTarget).val()});
+  },
+
+  render: function() {
+    var selectedAgent = this.transfer.get("selectedAgent");
+    var agentStatus = (typeof selectedAgent === "undefined" || selectedAgent === null) ?
+      "" : "icon-user " + selectedAgent.get('status');
+    var html = this.template({transfer: this.transfer, agentStatus: agentStatus});
+    this.el.html(html);
+
+    if (!this.transfer.get("selectedAgent")) {
+      this.agentsView = new Zest.Telephony.Views.AgentsView(
+        {
+          el: $(".agents-wrapper"),
+          currentAgentId: $("#telephony-widget").data("csr_id")
+        });
+      this.agentsView.render();
+    }
+  }
+});

data/app/assets/javascripts/telephony/views/twilio_client_view.js

@@ -0,0 +1,117 @@
+Zest.Telephony.Views.TwilioClientView = Backbone.View.extend({
+  className: 'twilio-client-wrapper',
+
+  events: {
+    'click button.answer': 'deviceAnswer',
+    'click button.hangup': 'deviceHangup'
+  },
+
+  template: JST["templates/telephony/twilio_client_view"],
+
+  initialize: function(options) {
+    this.agent = options.agent;
+
+    this.device = new Zest.Telephony.Models.Device();
+    this.device.bind("change:state", $.proxy(this.render, this));
+
+    $(document)
+      .bind("telephony:Answer", $.proxy(this.onAnswer, this))
+      .bind("telephony:Start", $.proxy(this.onAnswer, this))
+      .bind("telephony:Conference", $.proxy(this.onAnswer, this))
+      .bind("telephony:CompleteOneStepTransfer", $.proxy(this.onAnswer, this))
+      .bind("telephony:CompleteTwoStepTransfer", $.proxy(this.onAnswer, this))
+      .bind("telephony:Busy telephony:NoAnswer telephony:CallFail telephony:Terminate",
+            $.proxy(this.onCallEnded, this));
+
+    this.tokenPath = Zest.Telephony.Config.TWILIO_CLIENT_TOKEN_PATH;
+    var data = { csr_id: options.csrId };
+    $.ajax(this.tokenPath, { type: 'GET', data: data })
+      .done($.proxy(this.loadToken, this))
+      .fail($.proxy(this.logFail, this));
+  },
+
+  loadToken: function(data) {
+    var token = data.token;
+    this.setupTwilioClient(token);
+  },
+
+  logFail: function(xhr, textStatus, errorThrown) {
+    if (typeof console === "object" && typeof console.log === "function") {
+      console.log('Failed to load capability token');
+    }
+  },
+
+  setupTwilioClient: function(token) {
+    Twilio.Device.setup(token, {debug: false});
+    Twilio.Device.ready($.proxy(this.deviceReady, this));
+    Twilio.Device.error($.proxy(this.deviceError, this));
+    Twilio.Device.incoming($.proxy(this.deviceIncoming, this));
+    Twilio.Device.connect($.proxy(this.deviceConnect, this));
+    Twilio.Device.disconnect($.proxy(this.deviceDisconnect, this));
+  },
+
+  deviceReady: function(dev) {
+    this.device.set({ state: 'ready' });
+  },
+
+  deviceError: function(err) {
+    this.device.set({ state: 'error' });
+  },
+
+  deviceIncoming: function(conn) {
+    this.connection = conn;
+    this.device.set({ state: 'incoming' });
+  },
+
+  deviceConnect: function(conn) {
+    this.device.set({ state: 'connect' });
+  },
+
+  deviceDisconnect: function(conn) {
+    this.device.set({ state: 'disconnect' });
+  },
+
+  deviceAnswer: function() {
+    this.connection.accept();
+    this.disallowBrowserReload();
+
+    this.device.set({ state: 'answering' });
+  },
+
+  deviceHangup: function() {
+    Twilio.Device.disconnectAll();
+    this.allowBrowserReload();
+
+    this.device.set({ state: 'ready' });
+  },
+
+  onAnswer: function(event, data) {
+    this.device.set({ state: 'connect' });
+    this.render();
+  },
+
+  onCallEnded: function(event, data) {
+    this.device.set({ state: 'ready' });
+    this.render();
+  },
+
+  disallowBrowserReload: function() {
+    this.currentBeforeUnload = window.onbeforeunload;
+    var that = this;
+    $(window).bind('beforeunload', function() {
+      if (that.agent.onACall()) {
+        return 'You are ON A CALL. If you leave this page your call will be terminated.';
+      }
+    });
+  },
+
+  allowBrowserReload: function() {
+    $(window).unbind('beforeunload');
+    window.onbeforeunload = this.currentBeforeUnload;
+  },
+
+  render: function() {
+    $(this.el).html(this.template({ device: this.device }));
+    return this;
+  }
+});

data/app/assets/javascripts/telephony/views/widget_view.js

@@ -0,0 +1,55 @@
+Zest.Telephony.Views.WidgetView = Backbone.View.extend({
+  className: 'telephony-widget-container',
+
+  disableCallControl: function(opts) {
+    this.conversationView.disableCallControl(opts);
+  },
+
+  loadTwilioClient: function() {
+    this.twilioClientView = new Zest.Telephony.Views.TwilioClientView({
+      csrId: this.options.csrId,
+      agent: this.statusView.agent
+    });
+    $(this.el).append(this.twilioClientView.render().el);
+  },
+
+  logFail: function(xhr, textStatus, errorThrown) {
+    if (typeof console === "object" && typeof console.log === "function") {
+      console.log('Failed to load Twilio Client');
+    }
+  },
+
+  render: function() {
+    $("<link/>", {
+       rel: "stylesheet",
+       type: "text/css",
+       href: Zest.Telephony.Config.STYLESHEET_PATH
+    }).appendTo("head");
+
+    this.callQueueView = new Zest.Telephony.Views.CallQueueView();
+
+    $(this.el).append(this.callQueueView.render().el);
+
+    this.statusView = new Zest.Telephony.Views.StatusView({
+      csrId: this.options.csrId
+    });
+
+    $(this.el).append(this.statusView.render().el);
+
+    this.conversationView = new Zest.Telephony.Views.ConversationView({
+      loanId: this.options.loanId,
+      agentNumber: this.options.agentNumber,
+      fromId: this.options.csrId
+    });
+
+    $(this.el).append(this.conversationView.render().el);
+
+    if (Zest.Telephony.Config.TWILIO_CLIENT_ENABLED) {
+      $.getScript(Zest.Telephony.Config.TWILIO_CLIENT_URL)
+        .done($.proxy(this.loadTwilioClient, this))
+        .fail($.proxy(this.logFail, this));
+    }
+
+    return this;
+  }
+});

data/app/assets/javascripts/telephony/widget.js

@@ -0,0 +1,5 @@
+//= require "telephony/application"
+
+$(function() {
+  Zest.Telephony.Application.init();
+});

data/app/assets/javascripts/templates/telephony/agents_view.jst.ejs

@@ -0,0 +1,8 @@
+<ol class="agents-list">
+  <% agents.each(function(agent) { %>
+    <li class="<%= agent.status() %>" data-id="<%= agent.id %>">
+      <span class="icon-user <%= agent.status() %>"></span>
+      <%= agent.displayText() %>
+    </li>
+  <% }) %>
+</ol>

data/app/assets/javascripts/templates/telephony/call_queue_view.jst.ejs

@@ -0,0 +1,2 @@
+<div class="label">Queue</div><div class="badge"><%= queue.size %></div>
+

data/app/assets/javascripts/templates/telephony/conversation_buttons_view.jst.ejs

@@ -0,0 +1,23 @@
+<button class="initiate-conversation <%= conversation.uiShowCall() %>" <%= conversation.uiDisableCall() %> >
+  <span class="text">Call</span>
+  <span class="icon-spinner float-right <%= conversation.uiShowCallSpinner() %>"></span>
+</button>
+
+<button class="initiate-hold <%= conversation.uiShowHold() %>" <%= conversation.uiDisableHold() %> >
+  <span class="text">Hold</span>
+  <span class="icon-spinner float-right <%= conversation.uiShowHoldSpinner() %>"></span>
+</button>
+
+<button class="resume <%= conversation.uiShowResume() %>" <%= conversation.uiDisableResume() %> >
+  <span class="text">Resume</span>
+  <span class="icon-spinner float-right <%= conversation.uiShowResumeSpinner() %>"></span>
+</button>
+
+<button class="show-agents <%= conversation.uiShowTransfer() %>" <%= conversation.uiDisableTransfer() %>>
+  <span class="text">Transfer</span>
+  <span class="icon-user"></span>
+</button>
+
+<button class="cancel-transfer <%= conversation.uiShowCancelTransfer() %>">
+  <span class="text">Cancel Transfer</span>
+</button>

data/app/assets/javascripts/templates/telephony/conversation_view.jst.ejs

@@ -0,0 +1,10 @@
+<div class="conversation-controls">
+  <form action="#">
+    <input type="text" class="number" name="number" <%= conversation.uiDisableCall() %>  value="<%= conversation.get('to') %>" />
+  </form>
+
+  <div class="friendly-message"><%= friendlyMessage %></div>
+</div>
+
+<div class="transfer-wrapper">
+</div>

data/app/assets/javascripts/templates/telephony/status_view.jst.ejs

@@ -0,0 +1,4 @@
+<button class="agent-status <%= agent.status() %>" <%= agent.disabled() %> >
+  <span class="caps"><%= agent.humanizedStatus() %></span>
+  <span class="icon-spinner float-right <%= agent.display() %>"></span>
+</button>

data/app/assets/javascripts/templates/telephony/transfer_view.jst.ejs

@@ -0,0 +1,38 @@
+<div id="telephony-transfer">
+  <div>Transfer to...</div>
+
+  <form action="#">
+    <div class="agent-input">
+      <span class="<%= agentStatus %>"></span>
+      <input type="text" name="selected_agent"
+        value="<%= transfer.selectedAgentDisplayText() %>"
+        <%= transfer.uiDisabledFilter() %> />
+      <span class="backspace <%= transfer.uiShowClearSelectedAgent() %>"></span>
+    </div>
+
+    <span class="controls <%= transfer.uiShowTransferControl() %> ">
+      <span class="transfer-type">
+        <label for="transfer_type_one_step" id="one-step-transfer">one step</label>
+        <input <%= transfer.uiCheckedOneStep() %>
+          id="transfer_type_one_step"
+          name="transfer_type"
+          type="radio"
+          value="one_step" >
+      </span>
+      <span class="transfer-type">
+        <label for="transfer_type_two_step" id="two-step-transfer">two step</label>
+        <input <%= transfer.uiCheckedTwoStep() %> <%= transfer.uiDisabledTwoStep() %>
+          id="transfer_type_two_step"
+          name="transfer_type"
+          type="radio"
+          value="two_step" >
+      </span>
+      <button class="initiate-transfer">
+        <span class="text">Initiate Transfer</span>
+      </button>
+    </span>
+
+  </form>
+
+  <div class="agents-wrapper <%= transfer.uiShowAgentsList() %>"></div>
+</div>

data/app/assets/javascripts/templates/telephony/twilio_client_view.jst.ejs

@@ -0,0 +1,10 @@
+<button class="answer <%= device.uiShowAnswerButton() %>" <%= device.uiDisableAnswerButton() %> >
+  <span class="text">Answer</span>
+  <span class="icon-phone"></span>
+</button>
+
+<button class="hangup <%= device.uiShowHangupButton() %>" <%= device.uiDisableHangupButton() %> >
+  <span class="text">Hangup</span>
+  <span class="icon-cancel-circle"></span>
+</button>
+

data/app/assets/stylesheets/telephony/font.css

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: 'zest-telephony';
+  src: url("/assets/telephony/zest-telephony.eot");
+  src: url("/assets/telephony/zest-telephony.eot?#iefix") format('embedded-opentype'), url("/assets/telephony/zest-telephony.woff") format('woff'), url("/assets/telephony/zest-telephony.ttf") format('truetype'), url("/assets/telephony/zest-telephony.svg#zest-telephony") format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+#telephony-widget [class^="icon-"]:before,
+#telephony-widget [class*=" icon-"]:before {
+  font-family: 'zest-telephony';
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: 0.2em;
+  text-align: center;
+  opacity: 0.8;
+/* fix buttons height, for twitter bootstrap */
+  /*line-height: 1em;*/
+/* Animation center compensation - magrins should be symmetric */
+/* remove if not needed */
+  /*margin-left: 0.4em;*/
+/* you can be more comfortable with increased icons size */
+  /*font-size: 120%;*/
+/* Uncomment for 3D effect */
+ text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
+}
+
+#telephony-widget .icon-attention:before { content: '\26a0'; } /* '⚠' */
+#telephony-widget .icon-ok-circle:before { content: '\2714'; } /* '✔' */
+#telephony-widget .icon-cancel-circle:before { content: '\2716'; } /* '✖' */
+#telephony-widget .icon-list:before { content: '\e782'; } /* '' */
+#telephony-widget .icon-spin5:before { content: '\e838'; } /* '' */
+#telephony-widget .icon-phone-squared:before { content: '\f098'; } /* '' */
+#telephony-widget .icon-mail-alt:before { content: '\f0e0'; } /* '' */
+#telephony-widget .icon-user:before { content: '👤'; } /* '\1f464' */
+#telephony-widget .icon-phone:before { content: '📞'; } /* '\1f4de' */
+#telephony-widget .icon-search:before { content: '🔍'; } /* '\1f50d' */
+#telephony-widget .icon-bell:before { content: '🔔'; } /* '\1f514' */