Browser Calls with Java and Spark

package com.twilio.browsercalls.controllers;

import com.twilio.browsercalls.lib.FieldsValidator;
import com.twilio.browsercalls.models.Ticket;
import com.twilio.browsercalls.models.TicketService;
import spark.ModelAndView;
import spark.Request;
import spark.TemplateViewRoute;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

public class TicketController {
  TicketService ticketService;

  public TicketController(TicketService ticketService) {
    this.ticketService = ticketService;
  }

  public TemplateViewRoute create = (request, response) -> {
    return new ModelAndView(createTicket(request), "home.mustache");
  };

  public Map createTicket(Request request) {
    FieldsValidator validator =
        new FieldsValidator(new String[] {"name", "phone_number", "description"});

    Map map = new HashMap();

    /** Validates that the required parameters are sent on the request. */
    if (validator.valid(request)) {
      String name = request.queryParams("name");
      String phoneNumber = request.queryParams("phone_number");
      String description = request.queryParams("description");
      Date date = new Date();

      Ticket ticket = new Ticket(name, phoneNumber, description, date);
      ticketService.create(ticket);
      map.put("message", true);
      map.put("notice", "Ticket created successfully");

      return map;
    } else {
      map.put("error", true);
      map.put("errors", validator.errors());
      return map;
    }
  }
}

package com.twilio.browsercalls.models;

import javax.persistence.*;
import java.util.Date;

@Entity
@Table(name = "tickets")
public class Ticket {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  @Column(name = "id")
  private Long id;

  @Column(name = "name")
  private String name;

  @Column(name = "phone_number")
  private String phoneNumber;

  @Column(name = "description")
  private String description;

  @Column(name = "date")
  private Date date;

  public Ticket() {}

  public Ticket(String name, String phoneNumber, String description, Date date) {
    this.name = name;
    this.phoneNumber = phoneNumber;
    this.description = description;
    this.date = date;
  }

  Long getId() {
    return id;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getPhoneNumber() {
    return phoneNumber;
  }

  public void setPhoneNumber(String phoneNumber) {
    this.phoneNumber = phoneNumber;
  }

  public String getDescription() {
    return description;
  }

  public void setDescription(String description) {
    this.description = description;
  }

  public Date getDate() {
    return date;
  }

  public void setDate(Date date) {
    this.date = date;
  }
}

{{! index.mustache }}
{{<base}}
{{$header}}
{{<header}}
{{$title}}Support Dashboard{{/title}}
{{/header}}
{{/header}}

{{$content}}
<div class="container">

    <h2>Support Tickets</h2>

    <p class="lead">
        This is the list of most recent support tickets. Click the "Call customer" button to start a
        phone call from your browser.
    </p>

    <div class="row">

        <div class="col-md-4 col-md-push-8">
            <div class="panel panel-primary client-controls">
                <div class="panel-heading">
                    <h3 class="panel-title">Make a call</h3>
                </div>
                <div class="panel-body">
                    <p><strong>Status</strong></p>

                    <div class="well well-sm" id="call-status">
                        Connecting to Twilio...
                    </div>

                    <button class="btn btn-lg btn-success answer-button" disabled>Answer call
                    </button>
                    <button class="btn btn-lg btn-danger hangup-button" disabled onclick="hangUp()">
                        Hang up
                    </button>
                </div>
            </div>
        </div>

        <div class="col-md-8 col-md-pull-4">
            {{#tickets}}
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Ticket {{id}}
                            <small class="pull-right">{{date}}</small>
                        </h3>
                    </div>

                    <div class="panel-body">

                        <div class="pull-right">
                            <button onclick="callCustomer('{{phoneNumber}}')" type="button"
                                    class="btn btn-primary btn-lg call-customer-button">
                                <span class="glyphicon glyphicon-earphone"
                                      aria-hidden="true"></span>
                                Call customer
                            </button>
                        </div>

                        <p><strong>Name:</strong> {{name}}</p>

                        <p><strong>Phone number:</strong> {{phoneNumber}}</p>

                        <p><strong>Description:</strong></p>
                        {{description}}

                    </div>
                </div>
            {{/tickets}}
            {{^tickets}}
                <div class="panel panel-default">
                    <div class="well">
                        There are no support tickets available.
                    </div>
                </div>
            {{/tickets}}
        </div>

    </div>
</div>
{{/content}}
{{/base}}

package com.twilio.browsercalls.lib;

import java.util.List;

import com.google.common.collect.Lists;
import com.twilio.browsercalls.exceptions.UndefinedEnvironmentVariableException;
import com.twilio.jwt.client.ClientCapability;
import com.twilio.jwt.client.IncomingClientScope;
import com.twilio.jwt.client.OutgoingClientScope;
import com.twilio.jwt.client.Scope;

/**
 * Class that generates a Twilio capability token based on the page that is requesting it.
 */
public class CapabilityTokenGenerator {
  private ClientCapability.Builder capabilityBuilder;
  private AppSetup appSetup;
  private String role;

  public CapabilityTokenGenerator(String role, ClientCapability.Builder capabilityBuilder,
      AppSetup setup) {
    this.role = role;
    appSetup = setup;
    this.capabilityBuilder = capabilityBuilder;
  }

  public CapabilityTokenGenerator(String role) {
    this.role = role;
    appSetup = new AppSetup();
    try {
      /**
       * To find TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN visit https://www.twilio.com/console
       */
      this.capabilityBuilder =
          new ClientCapability.Builder(appSetup.getAccountSid(), appSetup.getAuthToken());
    } catch (UndefinedEnvironmentVariableException e) {
      e.getLocalizedMessage();
    }
  }

  public String generate() {
    /**
     * Sets the role depending on the page that requests que token. If the token is requested from
     * the /dashboard page, the role will be support_agent.
     */
    String appSid = null;
    try {
      appSid = appSetup.getApplicationSid();
    } catch (UndefinedEnvironmentVariableException e) {
      System.out.println(e.getLocalizedMessage());
    }
    OutgoingClientScope outgoingScope = new OutgoingClientScope.Builder(appSid).build();
    IncomingClientScope incomingScope = new IncomingClientScope(role);

    List<Scope> scopes = Lists.newArrayList(outgoingScope, incomingScope);

    String token = capabilityBuilder.scopes(scopes).build().toJwt();

    return token;
  }
}

/**
 * Twilio Client configuration for the browser-calls-rails
 * example application.
 */

// Store some selectors for elements we'll reuse
var callStatus;
var answerButton;
var callSupportButton;
var hangUpButton;
var callCustomerButtons;

/* Helper function to update the call status bar */
function updateCallStatus(status) {
  callStatus.text(status);
}

/* Get a Twilio Client token with an AJAX request */
$(document).ready(function() {
  callStatus = $("#call-status");
  answerButton = $(".answer-button");
  callSupportButton = $(".call-support-button");
  hangUpButton = $(".hangup-button");
  callCustomerButtons = $(".call-customer-button");

  $.post("/token/generate", {page: window.location.pathname}, function(data) {
    // Set up the Twilio Client Device with the token
    Twilio.Device.setup(data.token);
  });
});

/* Callback to let us know Twilio Client is ready */
Twilio.Device.ready(function (device) {
  updateCallStatus("Ready");
});

/* Report any errors to the call status display */
Twilio.Device.error(function (error) {
  updateCallStatus("ERROR: " + error.message);
});

/* Callback for when Twilio Client initiates a new connection */
Twilio.Device.connect(function (connection) {
  // Enable the hang up button and disable the call buttons
  hangUpButton.prop("disabled", false);
  callCustomerButtons.prop("disabled", true);
  callSupportButton.prop("disabled", true);
  answerButton.prop("disabled", true);

  // If phoneNumber is part of the connection, this is a call from a
  // support agent to a customer's phone
  if ("phoneNumber" in connection.message) {
    updateCallStatus("In call with " + connection.message.phoneNumber);
  } else {
    // This is a call from a website user to a support agent
    updateCallStatus("In call with support");
  }
});

/* Callback for when a call ends */
Twilio.Device.disconnect(function(connection) {
  // Disable the hangup button and enable the call buttons
  hangUpButton.prop("disabled", true);
  callCustomerButtons.prop("disabled", false);
  callSupportButton.prop("disabled", false);

  updateCallStatus("Ready");
});

/* Callback for when Twilio Client receives a new incoming call */
Twilio.Device.incoming(function(connection) {
  updateCallStatus("Incoming support call");

  // Set a callback to be executed when the connection is accepted
  connection.accept(function() {
    updateCallStatus("In call with customer");
  });

  // Set a callback on the answer button and enable it
  answerButton.click(function() {
    connection.accept();
  });
  answerButton.prop("disabled", false);
});

/* Call a customer from a support ticket */
function callCustomer(phoneNumber) {
  updateCallStatus("Calling " + phoneNumber + "...");

  Twilio.Device.connect({
    phoneNumber: phoneNumber
  });
}

/* Call the support_agent from the home page */
function callSupport() {
  updateCallStatus("Calling support...");

  // Our backend will assume that no params means a call to support_agent
  Twilio.Device.connect();
}

/* End a call */
function hangUp() {
  Twilio.Device.disconnectAll();
}

/**
 * Twilio Client configuration for the browser-calls-rails
 * example application.
 */

// Store some selectors for elements we'll reuse
var callStatus;
var answerButton;
var callSupportButton;
var hangUpButton;
var callCustomerButtons;

/* Helper function to update the call status bar */
function updateCallStatus(status) {
  callStatus.text(status);
}

/* Get a Twilio Client token with an AJAX request */
$(document).ready(function() {
  callStatus = $("#call-status");
  answerButton = $(".answer-button");
  callSupportButton = $(".call-support-button");
  hangUpButton = $(".hangup-button");
  callCustomerButtons = $(".call-customer-button");

  $.post("/token/generate", {page: window.location.pathname}, function(data) {
    // Set up the Twilio Client Device with the token
    Twilio.Device.setup(data.token);
  });
});

/* Callback to let us know Twilio Client is ready */
Twilio.Device.ready(function (device) {
  updateCallStatus("Ready");
});

/* Report any errors to the call status display */
Twilio.Device.error(function (error) {
  updateCallStatus("ERROR: " + error.message);
});

/* Callback for when Twilio Client initiates a new connection */
Twilio.Device.connect(function (connection) {
  // Enable the hang up button and disable the call buttons
  hangUpButton.prop("disabled", false);
  callCustomerButtons.prop("disabled", true);
  callSupportButton.prop("disabled", true);
  answerButton.prop("disabled", true);

  // If phoneNumber is part of the connection, this is a call from a
  // support agent to a customer's phone
  if ("phoneNumber" in connection.message) {
    updateCallStatus("In call with " + connection.message.phoneNumber);
  } else {
    // This is a call from a website user to a support agent
    updateCallStatus("In call with support");
  }
});

/* Callback for when a call ends */
Twilio.Device.disconnect(function(connection) {
  // Disable the hangup button and enable the call buttons
  hangUpButton.prop("disabled", true);
  callCustomerButtons.prop("disabled", false);
  callSupportButton.prop("disabled", false);

  updateCallStatus("Ready");
});

/* Callback for when Twilio Client receives a new incoming call */
Twilio.Device.incoming(function(connection) {
  updateCallStatus("Incoming support call");

  // Set a callback to be executed when the connection is accepted
  connection.accept(function() {
    updateCallStatus("In call with customer");
  });

  // Set a callback on the answer button and enable it
  answerButton.click(function() {
    connection.accept();
  });
  answerButton.prop("disabled", false);
});

/* Call a customer from a support ticket */
function callCustomer(phoneNumber) {
  updateCallStatus("Calling " + phoneNumber + "...");

  Twilio.Device.connect({
    phoneNumber: phoneNumber
  });
}

/* Call the support_agent from the home page */
function callSupport() {
  updateCallStatus("Calling support...");

  // Our backend will assume that no params means a call to support_agent
  Twilio.Device.connect();
}

/* End a call */
function hangUp() {
  Twilio.Device.disconnectAll();
}

package com.twilio.browsercalls.controllers;

import com.twilio.browsercalls.exceptions.UndefinedEnvironmentVariableException;
import com.twilio.browsercalls.lib.AppSetup;
import com.twilio.twiml.*;
import com.twilio.twiml.Number;

import spark.Request;
import spark.Route;

@SuppressWarnings({"rawtypes", "unchecked"})
public class CallController {
  AppSetup appSetup;
  public Route connect = (request, response) -> {
    response.type("application/xml");

    return getXMLResponse(request);
  };

  public CallController() {
    this.appSetup = new AppSetup();
  }

  public CallController(AppSetup appSetup) {
    this.appSetup = appSetup;
  }

  public String getXMLResponse(Request request) {
    String twilioPhoneNumber = null;
    try {
      twilioPhoneNumber = appSetup.getTwilioPhoneNumber();
    } catch (UndefinedEnvironmentVariableException e) {
      return e.getLocalizedMessage();
    }
    String phoneNumber = request.queryParams("phoneNumber");

    Dial.Builder dialBuilder = new Dial.Builder();

    /**
     * If the phoneNumber parameter is sent on the request, it means you are calling a customer. If
     * not, you will make a call to the support agent
     */
    if (phoneNumber != null) {
      Number number = new Number.Builder(phoneNumber).build();
      dialBuilder = dialBuilder.number(number).callerId(twilioPhoneNumber);
    } else {
      Client client = new Client.Builder("support_agent").build();
      dialBuilder = dialBuilder.client(client);
    }

    Dial dial = dialBuilder.build();
    VoiceResponse twimlResponse = new VoiceResponse.Builder().dial(dial).build();

    try {
      return twimlResponse.toXml();
    } catch (TwiMLException e) {
      return e.getLocalizedMessage();
    }
  }
}

/**
 * Twilio Client configuration for the browser-calls-rails
 * example application.
 */

// Store some selectors for elements we'll reuse
var callStatus;
var answerButton;
var callSupportButton;
var hangUpButton;
var callCustomerButtons;

/* Helper function to update the call status bar */
function updateCallStatus(status) {
  callStatus.text(status);
}

/* Get a Twilio Client token with an AJAX request */
$(document).ready(function() {
  callStatus = $("#call-status");
  answerButton = $(".answer-button");
  callSupportButton = $(".call-support-button");
  hangUpButton = $(".hangup-button");
  callCustomerButtons = $(".call-customer-button");

  $.post("/token/generate", {page: window.location.pathname}, function(data) {
    // Set up the Twilio Client Device with the token
    Twilio.Device.setup(data.token);
  });
});

/* Callback to let us know Twilio Client is ready */
Twilio.Device.ready(function (device) {
  updateCallStatus("Ready");
});

/* Report any errors to the call status display */
Twilio.Device.error(function (error) {
  updateCallStatus("ERROR: " + error.message);
});

/* Callback for when Twilio Client initiates a new connection */
Twilio.Device.connect(function (connection) {
  // Enable the hang up button and disable the call buttons
  hangUpButton.prop("disabled", false);
  callCustomerButtons.prop("disabled", true);
  callSupportButton.prop("disabled", true);
  answerButton.prop("disabled", true);

  // If phoneNumber is part of the connection, this is a call from a
  // support agent to a customer's phone
  if ("phoneNumber" in connection.message) {
    updateCallStatus("In call with " + connection.message.phoneNumber);
  } else {
    // This is a call from a website user to a support agent
    updateCallStatus("In call with support");
  }
});

/* Callback for when a call ends */
Twilio.Device.disconnect(function(connection) {
  // Disable the hangup button and enable the call buttons
  hangUpButton.prop("disabled", true);
  callCustomerButtons.prop("disabled", false);
  callSupportButton.prop("disabled", false);

  updateCallStatus("Ready");
});

/* Callback for when Twilio Client receives a new incoming call */
Twilio.Device.incoming(function(connection) {
  updateCallStatus("Incoming support call");

  // Set a callback to be executed when the connection is accepted
  connection.accept(function() {
    updateCallStatus("In call with customer");
  });

  // Set a callback on the answer button and enable it
  answerButton.click(function() {
    connection.accept();
  });
  answerButton.prop("disabled", false);
});

/* Call a customer from a support ticket */
function callCustomer(phoneNumber) {
  updateCallStatus("Calling " + phoneNumber + "...");

  Twilio.Device.connect({
    phoneNumber: phoneNumber
  });
}

/* Call the support_agent from the home page */
function callSupport() {
  updateCallStatus("Calling support...");

  // Our backend will assume that no params means a call to support_agent
  Twilio.Device.connect();
}

/* End a call */
function hangUp() {
  Twilio.Device.disconnectAll();
}

/**
 * Twilio Client configuration for the browser-calls-rails
 * example application.
 */

// Store some selectors for elements we'll reuse
var callStatus;
var answerButton;
var callSupportButton;
var hangUpButton;
var callCustomerButtons;

/* Helper function to update the call status bar */
function updateCallStatus(status) {
  callStatus.text(status);
}

/* Get a Twilio Client token with an AJAX request */
$(document).ready(function() {
  callStatus = $("#call-status");
  answerButton = $(".answer-button");
  callSupportButton = $(".call-support-button");
  hangUpButton = $(".hangup-button");
  callCustomerButtons = $(".call-customer-button");

  $.post("/token/generate", {page: window.location.pathname}, function(data) {
    // Set up the Twilio Client Device with the token
    Twilio.Device.setup(data.token);
  });
});

/* Callback to let us know Twilio Client is ready */
Twilio.Device.ready(function (device) {
  updateCallStatus("Ready");
});

/* Report any errors to the call status display */
Twilio.Device.error(function (error) {
  updateCallStatus("ERROR: " + error.message);
});

/* Callback for when Twilio Client initiates a new connection */
Twilio.Device.connect(function (connection) {
  // Enable the hang up button and disable the call buttons
  hangUpButton.prop("disabled", false);
  callCustomerButtons.prop("disabled", true);
  callSupportButton.prop("disabled", true);
  answerButton.prop("disabled", true);

  // If phoneNumber is part of the connection, this is a call from a
  // support agent to a customer's phone
  if ("phoneNumber" in connection.message) {
    updateCallStatus("In call with " + connection.message.phoneNumber);
  } else {
    // This is a call from a website user to a support agent
    updateCallStatus("In call with support");
  }
});

/* Callback for when a call ends */
Twilio.Device.disconnect(function(connection) {
  // Disable the hangup button and enable the call buttons
  hangUpButton.prop("disabled", true);
  callCustomerButtons.prop("disabled", false);
  callSupportButton.prop("disabled", false);

  updateCallStatus("Ready");
});

/* Callback for when Twilio Client receives a new incoming call */
Twilio.Device.incoming(function(connection) {
  updateCallStatus("Incoming support call");

  // Set a callback to be executed when the connection is accepted
  connection.accept(function() {
    updateCallStatus("In call with customer");
  });

  // Set a callback on the answer button and enable it
  answerButton.click(function() {
    connection.accept();
  });
  answerButton.prop("disabled", false);
});

/* Call a customer from a support ticket */
function callCustomer(phoneNumber) {
  updateCallStatus("Calling " + phoneNumber + "...");

  Twilio.Device.connect({
    phoneNumber: phoneNumber
  });
}

/* Call the support_agent from the home page */
function callSupport() {
  updateCallStatus("Calling support...");

  // Our backend will assume that no params means a call to support_agent
  Twilio.Device.connect();
}

/* End a call */
function hangUp() {
  Twilio.Device.disconnectAll();
}

package com.twilio.browsercalls.controllers;

import com.twilio.browsercalls.lib.CapabilityTokenGenerator;
import org.json.simple.JSONObject;
import spark.Route;
import spark.Request;

public class TokenController {
  public Route getToken = (request, response) -> {
    response.type("application/json");

    return getTokenAsJSON(request);
  };

  public String getTokenAsJSON(Request request) {
    /**
     * Generates a token with specific capabilities depending on the page that is requesting
     * the page.
     */
    String page = request.queryParams("page");
    String role = page.equals("/dashboard") ? "support_agent" : "customer";
    CapabilityTokenGenerator generator = new CapabilityTokenGenerator(role);
    String token = generator.generate();

    JSONObject obj = new JSONObject();
    obj.put("token", token);

    return obj.toJSONString();
  }
}

/**
 * Twilio Client configuration for the browser-calls-rails
 * example application.
 */

// Store some selectors for elements we'll reuse
var callStatus;
var answerButton;
var callSupportButton;
var hangUpButton;
var callCustomerButtons;

/* Helper function to update the call status bar */
function updateCallStatus(status) {
  callStatus.text(status);
}

/* Get a Twilio Client token with an AJAX request */
$(document).ready(function() {
  callStatus = $("#call-status");
  answerButton = $(".answer-button");
  callSupportButton = $(".call-support-button");
  hangUpButton = $(".hangup-button");
  callCustomerButtons = $(".call-customer-button");

  $.post("/token/generate", {page: window.location.pathname}, function(data) {
    // Set up the Twilio Client Device with the token
    Twilio.Device.setup(data.token);
  });
});

/* Callback to let us know Twilio Client is ready */
Twilio.Device.ready(function (device) {
  updateCallStatus("Ready");
});

/* Report any errors to the call status display */
Twilio.Device.error(function (error) {
  updateCallStatus("ERROR: " + error.message);
});

/* Callback for when Twilio Client initiates a new connection */
Twilio.Device.connect(function (connection) {
  // Enable the hang up button and disable the call buttons
  hangUpButton.prop("disabled", false);
  callCustomerButtons.prop("disabled", true);
  callSupportButton.prop("disabled", true);
  answerButton.prop("disabled", true);

  // If phoneNumber is part of the connection, this is a call from a
  // support agent to a customer's phone
  if ("phoneNumber" in connection.message) {
    updateCallStatus("In call with " + connection.message.phoneNumber);
  } else {
    // This is a call from a website user to a support agent
    updateCallStatus("In call with support");
  }
});

/* Callback for when a call ends */
Twilio.Device.disconnect(function(connection) {
  // Disable the hangup button and enable the call buttons
  hangUpButton.prop("disabled", true);
  callCustomerButtons.prop("disabled", false);
  callSupportButton.prop("disabled", false);

  updateCallStatus("Ready");
});

/* Callback for when Twilio Client receives a new incoming call */
Twilio.Device.incoming(function(connection) {
  updateCallStatus("Incoming support call");

  // Set a callback to be executed when the connection is accepted
  connection.accept(function() {
    updateCallStatus("In call with customer");
  });

  // Set a callback on the answer button and enable it
  answerButton.click(function() {
    connection.accept();
  });
  answerButton.prop("disabled", false);
});

/* Call a customer from a support ticket */
function callCustomer(phoneNumber) {
  updateCallStatus("Calling " + phoneNumber + "...");

  Twilio.Device.connect({
    phoneNumber: phoneNumber
  });
}

/* Call the support_agent from the home page */
function callSupport() {
  updateCallStatus("Calling support...");

  // Our backend will assume that no params means a call to support_agent
  Twilio.Device.connect();
}

/* End a call */
function hangUp() {
  Twilio.Device.disconnectAll();
}

/**
 * Twilio Client configuration for the browser-calls-rails
 * example application.
 */

// Store some selectors for elements we'll reuse
var callStatus;
var answerButton;
var callSupportButton;
var hangUpButton;
var callCustomerButtons;

/* Helper function to update the call status bar */
function updateCallStatus(status) {
  callStatus.text(status);
}

/* Get a Twilio Client token with an AJAX request */
$(document).ready(function() {
  callStatus = $("#call-status");
  answerButton = $(".answer-button");
  callSupportButton = $(".call-support-button");
  hangUpButton = $(".hangup-button");
  callCustomerButtons = $(".call-customer-button");

  $.post("/token/generate", {page: window.location.pathname}, function(data) {
    // Set up the Twilio Client Device with the token
    Twilio.Device.setup(data.token);
  });
});

/* Callback to let us know Twilio Client is ready */
Twilio.Device.ready(function (device) {
  updateCallStatus("Ready");
});

/* Report any errors to the call status display */
Twilio.Device.error(function (error) {
  updateCallStatus("ERROR: " + error.message);
});

/* Callback for when Twilio Client initiates a new connection */
Twilio.Device.connect(function (connection) {
  // Enable the hang up button and disable the call buttons
  hangUpButton.prop("disabled", false);
  callCustomerButtons.prop("disabled", true);
  callSupportButton.prop("disabled", true);
  answerButton.prop("disabled", true);

  // If phoneNumber is part of the connection, this is a call from a
  // support agent to a customer's phone
  if ("phoneNumber" in connection.message) {
    updateCallStatus("In call with " + connection.message.phoneNumber);
  } else {
    // This is a call from a website user to a support agent
    updateCallStatus("In call with support");
  }
});

/* Callback for when a call ends */
Twilio.Device.disconnect(function(connection) {
  // Disable the hangup button and enable the call buttons
  hangUpButton.prop("disabled", true);
  callCustomerButtons.prop("disabled", false);
  callSupportButton.prop("disabled", false);

  updateCallStatus("Ready");
});

/* Callback for when Twilio Client receives a new incoming call */
Twilio.Device.incoming(function(connection) {
  updateCallStatus("Incoming support call");

  // Set a callback to be executed when the connection is accepted
  connection.accept(function() {
    updateCallStatus("In call with customer");
  });

  // Set a callback on the answer button and enable it
  answerButton.click(function() {
    connection.accept();
  });
  answerButton.prop("disabled", false);
});

/* Call a customer from a support ticket */
function callCustomer(phoneNumber) {
  updateCallStatus("Calling " + phoneNumber + "...");

  Twilio.Device.connect({
    phoneNumber: phoneNumber
  });
}

/* Call the support_agent from the home page */
function callSupport() {
  updateCallStatus("Calling support...");

  // Our backend will assume that no params means a call to support_agent
  Twilio.Device.connect();
}

/* End a call */
function hangUp() {
  Twilio.Device.disconnectAll();
}