support-foo/web

<%= render 'shared/steps' %>

<div class="container">

  <h1 class="page-title">Invite your whole team.</h1>

  <p>Oh, don't worry about inviting your whole company. There's no extra cost or limit to how many users you have associated with your account. So you can invite everyone to chime in, even the CEO.</p>

  <form>
    <%= hidden_field_tag :account_slug, @account.slug %>

    <fieldset>

      <div class="row">

        <div class="col-md-12">

          <div class="row">

            <div class="col-md-9">
              <div class="form-group">
                <label class="control-label">Teammate's Email Address</label>
                <input type="text" class="form-control" name="user_email">
                <span class="help-block"></span>
              </div>
            </div>

            <div class="col-md-3">
              <div class="control-label-margin"></div>
              <button class="btn btn-primary btn-block large-margin-top" rel="invite">Invite</button>
            </div>

          </div>

        </div>

      </div>

    </fieldset>

    <fieldset>

      <p>Think you might need to add a few more people? You can always invite more users from the account settings page</p>

      <div class="form-group">
        <%= link_to 'Continue to try out the inbox', demo_account_path(@account), class: 'btn btn-primary' %>
      </div>

    </fieldset>

  </form>

</div>

<script id="invitation-row-template" type="text/x-handlebars-template">
  <div class="row">

    <div class="col-md-9">
      <div class="form-group">
        <label class="control-label">Teammate's Email Address</label>
        <input type="text" class="form-control" name="user_email">
        <span class="help-block"></span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="control-label-margin"></div>
      <button class="btn btn-primary btn-block large-margin-top" rel="invite">Invite</button>
    </div>

  </div>
</script>

<script>
var inviteUser = function($row) {
  var $inviteButton = $('[rel=invite]', $row);
  var $emailFormGroup = $('.form-group', $row);
  var $emailInput = $('[name=user_email]', $row);
  var $emailHelpBlock = $('.help-block', $row);
  var accountSlug = $('[name=account_slug]').val();
  var email = $emailInput.val();
  var invitationRowTemplate = Handlebars.compile($('#invitation-row-template').html());

  // @TODO Handle fail
  $inviteButton.text('Inviting...');
  $inviteButton.attr('disabled', 'disabled');

  $.ajax({
    type: 'POST',
    url: '/users/invitation',
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({
      user: { email: email },
      account_id: accountSlug,
      membership_role: 'agent'
    }),
    success: function(response) {
      var invitationText = response.invitation_created_at === null ? 'Added' : 'Invited'

      $inviteButton.parent().html(
        $('<div class="form-group">').append(
          $('<span class="btn btn-block btn-success btn-status">').text(invitationText).prepend(
            $('<span class="glyphicon glyphicon-ok"></span>')
          )
        )
      );

      $emailInput.parent().html(
        '<div class="form-text">' + email + '</div>'
      );

      $row.after(invitationRowTemplate());
      $('[name=user_email]:last').focus();
      attachKeypressHandlers();
    },
    error: function(xhr) {
      $inviteButton.text('Invite');
      $inviteButton.removeAttr('disabled');

      $emailFormGroup.addClass('has-error');
      $emailHelpBlock.text(JSON.parse(xhr.responseText).errors.email[0]);
      $('[name=user_email]:last').focus();
    }
  });
};

var attachClickHandlers = function() {
  $(document).on('click', '[rel=invite]', function() {
    inviteUser($(this).closest('.row'));
    return false;
  });
}

var attachKeypressHandlers = function() {
  $('[name=user_email]').on('keypress', function(e) {
    if (e.keyCode == 13) {
      inviteUser($(this).closest('.row'));
      return false;
    }
  });
}

$(document).ready(function() {
  attachClickHandlers();
  attachKeypressHandlers();
});
</script>