Merge pull request #371 from travis-ci/userlike

Userlike

Brocfile.js

@@ -37,7 +37,6 @@ app.import('bower_components/JavaScript-MD5/js/md5.js');
 app.import('vendor/ansiparse.js');
 app.import('vendor/log.js');
 app.import('vendor/customerio.js');
-app.import('vendor/charmscout.js');
 app.import('bower_components/moment/moment.js');
 // Use `app.import` to add additional libraries to the generated
 // output files.

app/app.coffee

@@ -58,13 +58,18 @@ App = Ember.Application.extend(Ember.Evented,
     @on 'user:synced', (user) ->
       Travis.onUserUpdate(user)
 
+    @on 'user:signed_out', () ->
+      if config.userlike
+        Travis.removeUserlike()
+
   currentDate: ->
     new Date()
 
   onUserUpdate: (user) ->
     if config.pro
       @identifyCustomer(user)
-      @setupCharm(user)
+    if config.userlike
+      @setupUserlike(user)
 
     @subscribePusher(user)
 
@@ -80,14 +85,26 @@ App = Ember.Application.extend(Ember.Evented,
 
     Travis.pusher.subscribeAll(channels)
 
-  setupCharm: (user) ->
+  setupUserlike: (user) ->
-    $.extend window.__CHARM,
-      customer: user.login,
-      customer_id: user.id,
-      email: user.email
 
-  displayCharm: ->
+    btn = document.getElementById('userlikeCustomTab')
-    __CHARM.show()
+    btn.classList.add("logged-in")
+
+    userlikeData = window.userlikeData = {}
+    userlikeData.user = {}
+
+    userlikeData.user.name= user.login;
+    userlikeData.user.email = user.email;
+
+    unless document.getElementById('userlike-script')
+      s = document.createElement('script')
+      s.id = 'userlike-script'
+      s.src = '//userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/0327dbb23382ccbbb91b445b76e8a91d4b37d90ef9f2faf84e11177847ff7bb9.js'
+      document.body.appendChild(s)
+
+  removeUserlike: () ->
+    btn = document.getElementById('userlikeCustomTab')
+    btn.classList.remove("logged-in")
 
   identifyCustomer: (user) ->
     if _cio && _cio.identify

app/index.html

@@ -23,5 +23,7 @@
     <script src="assets/travis.js"></script>
 
     {{content-for 'body-footer'}}
+
+    <a href="javascript:void(0)"  class="feedback-button" id="userlikeCustomTab" data-right="20" data-bottom="50" data-orientation="top">Do you have a question?</a>
   </body>
 </html>

app/initializers/charm.coffee

@@ -1,17 +0,0 @@
-`import config from 'travis/config/environment'`
-
-initialize = (container, app) ->
-  if config.charmKey
-    window.__CHARM =
-      key: config.charmKey
-      url: window.location.protocol + "//charmscout.herokuapp.com/feedback"
-
-    window.bootstrapCharm()
-    # $('head').append $('<script src="https://charmscout.herokuapp.com/charmeur.js?v=2" async defer></script>')
-
-Initializer =
-  name: 'charm'
-  initialize: initialize
-
-`export {initialize}`
-`export default Initializer`

app/styles/app.scss

@@ -8,10 +8,10 @@
 
 @import "app/ansi";
 @import "app/auth";
-@import "app/charm";
 @import "app/forms";
 @import "app/github";
 @import "app/main/annotations";
+@import "app/userlike";
 
 @import "app/main/list";
 @import "app/main/log";

app/styles/app/charm.sass

@@ -1,104 +0,0 @@
-
-.feedback-button
-  display: none
-
-.pro
-  .feedback-button
-    display: inline-block
-
-.feedback-button
-  display: inline-block
-  position: fixed
-  right: 4%
-  left: auto
-  bottom: 0
-  margin: 0
-  padding: .5em 1em .5em
-  border-radius: 4px
-  // transform: rotate(90deg) translateY(-140%)
-  transform: translateY(20%)
-  will-change: transform
-  transition: transform ease 200ms
-  background: $white
-  font-size: 13px
-  color: #a2afb3
-  text-transform: uppercase
-  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15)
-  z-index: 89
-  &.hidden
-    display: none
-
-.feedback-button:hover
-  // transform: rotate(90deg) translateY(-130%)
-  transform: translateY(5%)
-
-.feedback-popup
-  position: fixed
-  top: 50%
-  left: 50%
-  width: 30em
-  transform: translate(-50%, -50%)
-  padding: 1em 1.3em
-  background-color: #ffffff
-  border-radius: 5px
-  z-index: 85
-  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.15)
-  h1
-    margin: 0 0 .4em
-    padding-left: .4em
-    color: #347389
-    font-size: 22px
-  textarea
-    box-sizing: border-box
-    display: block
-    width: 100%
-    height: 10em
-    margin-bottom: .8em
-    padding: .5em .6em
-    resize: vertical
-    background-color: #f4f3eb
-    font-size: 16px
-    color: #7d7e80
-    border: none
-    font-family: $font-family-sans-serif
-  .submit
-    margin-right: 1em
-    padding: .3em .7em
-    background-color: #37a766
-    color: $white
-    font-size: 16px
-    border: none
-    border-radius: 4px
-    font-family: $font-family-sans-serif
-    cursor: pointer
-  p
-    padding-left: 0.7em
-    margin: 0.3em 0 0
-  a
-    color: #7d7e80
-    font-size: 16px
-    text-decoration: none
-  a:hover
-    text-decoration: underline
-
-  .closed &
-    display: none
-
-.feedback-overlay
-  display: block
-  position: fixed
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  width: 100%
-  height: 100%
-  background-color: rgba(#D5D5CE, 0.7)
-  z-index: 84
-  .closed &
-    display: none
-
-
-#CHARM_FORM_TARGET
-  display: none
-

app/styles/app/userlike.sass

@@ -0,0 +1,24 @@
+
+.feedback-button
+  display: none
+  position: fixed
+  right: 1%
+  left: auto
+  bottom: 0
+  margin: 0
+  padding: .5em 1em 1em 1em
+  border-radius: 4px
+  border: solid 1px #399399
+  transform: translateY(20%)
+  will-change: transform
+  transition: transform ease 200ms
+  background: $white
+  font-size: 16px
+  color: #399399
+  z-index: 89
+
+.feedback-button:hover
+  transform: translateY(5%)
+
+.logged-in.feedback-button
+  display: inline-block

app/templates/footer.hbs

@@ -20,9 +20,6 @@
       <li><a href="http://docs.travis-ci.com/">Documentation</a></li>
       <li><a href="http://blog.travis-ci.com/">Blog</a></li>
       <li><a href="mailto:support@travis-ci.com">Email</a></li>
-      {{#if config.pro}}
-        <li><a href="https://chat.travis-ci.com">Live Chat</a></li>
-      {{/if}}
       <li><a href="https://twitter.com/travisci">Twitter</a></li>
     </ul>
   </div>

app/templates/top.hbs

@@ -6,26 +6,23 @@
 
   <ul id="navigation" class="navigation {{is-open}}">
     <li><a href="http://blog.travis-ci.com">Blog</a></li>
-    {{!--  <li><a href="http://docs.travis-ci.com">Help</a></li> --}}
     <li><a href="http://www.traviscistatus.com/">Status</a></li>
 
+    {{#unless config.pro}}
       <li class="navigation-sub navigation--community">
         <p class="handle navigation-handle">
           <span>Help</span>
         </p>
         <ul class="navigation-nested">
           <li><a href="http://docs.travis-ci.com">Docs</a></li>
-        {{#unless config.pro}}
           <li><a href="http://stackoverflow.com/questions/ask?tags=travis-ci">Ask a Question</a></li>
           <li><a href="http://docs.travis-ci.com/imprint.html" alt="Imprint">Imprint</a></li>
-        {{/unless}}
-        {{#if config.pro}}
-          <li><a href="https://chat.travis-ci.com/">Live Chat</a></li>
-        {{/if}}
         </ul>
       </li>
+    {{/unless}}
 
     {{#if config.pro}}
+      <li><a href="http://docs.travis-ci.com">Docs</a></li>
       <li class="navigation-sub navigation--legal">
         <p class="handle navigation-handle">
           <span>Legal</span>

app/utils/auth.coffee

@@ -25,6 +25,7 @@ Auth = Ember.Object.extend
       @store.unloadAll('user')
     @set('currentUser', null)
     @sendToApp('afterSignOut')
+    Travis.trigger('user:signed_out')
 
   signIn: (data) ->
     if data

config/environment.js

@@ -52,7 +52,7 @@ module.exports = function(environment) {
         sshKey: true,
         caches: true
       };
-      ENV.charmKey = 'gy5gx7dy6dh86hxzkz1wmtvupwvievu';
+      ENV.userlike = true;
       ENV.urls = {
         legal: ENV.billingEndpoint + "/pages/legal",
         imprint: ENV.billingEndpoint + "/pages/imprint",

vendor/charmscout.js

@@ -1,246 +0,0 @@
-// Copyright (c) 2010-2012 Slash7 LLC http://charmhq.com/
-// Copyright (c) 2010-2012 Thomas Fuchs http://mir.aculo.us/
-// License: https://github.com/cheerful/charmeur/blob/master/MIT-LICENSE
-
-window.bootstrapCharm = function(){
-  var tab, box, email, shown = false, sending = false, openmsg = null, callbacks = {},
-    BOX =
-      '<div class="feedback-popup">' +
-      '<h1>Have feedback or questions?</h1>' +
-      '<iframe id="CHARM_FORM_TARGET" name="CHARM_FORM_TARGET" src="javascript:void(0)" onload="__CHARM&&__CHARM.iFrameLoaded&&__CHARM.iFrameLoaded()" onerror="__CHARM&&__CHARM.iFrameError&&__CHARM.iFrameError()"></iframe>' +
-      '<form id="CHARM_FORM" target="CHARM_FORM_TARGET" method="POST" accept-charset="utf-8">'+
-      '<div id="CHARM_YOUR_EMAIL"></div>'+
-      '<div id="CHARM_YOUR_COMMENT"></div>'+
-      '<textarea id="CHARM_COMMENT" name="content" class="ignore-return-pressed" placeholder="Let us know and we will get right back to you by email"></textarea>' +
-      '<input id="CHARM_SUBMIT" type="submit" class="submit" value="Send Feedback">' +
-      '<a href="#" title="" id="CHARM_CANCEL">cancel</a>' +
-      '</form>' +
-      '</div>' +
-      '<div class="feedback-overlay"></div>',
-    DEFAULTS = {
-      text: '',
-      submit: 'Send feedback',
-      cancel: 'cancel',
-      your_email: 'Your email address:',
-      your_comment: 'Your message:',
-      feedback_sending: '<p>Sending...</p>',
-      feedback_sent: '<h1>Your feedback was sent!</h1><p>We will get back to you as soon as possible!</p>',
-      feedback_error: 'There was a problem sending your message.<br/>Please contact support directly.<br/><br/>close this message'
-    };
-
-  function log(s){
-    'console' in window && 'log' in console && console.log(s);
-  }
-
-  if(!("__CHARM" in window)) {
-    log('no CHARM data found');
-    return;
-  }
-
-  if(!(typeof __CHARM == 'object')) {
-    log('CHARM must be an object');
-    return;
-  }
-  
-  function $(id){ return typeof id == 'string' ? document.getElementById(id) : id; }
-
-  function init(){
-    tab = document.createElement('a');
-    tab.id = "CHARM_TAB";
-    tab.className = 'feedback-button';
-    tab.innerHTML = 'Feedback & Support';
-    tab.href = "https://secure.charmhq.com/feedback/" + __CHARM.key;
-    tab.onclick = function(){ show(); return false };
-    document.body.appendChild(tab);
-  }
-
-  function template(string){
-    for(var prop in __CHARM)
-      string = string.replace(new RegExp('{'+prop+'}'), __CHARM[prop]);
-    return string;
-  }
-
-  function customize(id, property){
-    $('CHARM_'+id.toUpperCase())[property||'innerHTML'] = template((id in __CHARM) ? __CHARM[id] : DEFAULTS[id]);
-  }
-
-  function userdata(name){
-    if(name in __CHARM) data(name, __CHARM[name]);
-  }
-
-  function data(name, value){
-    var node = document.createElement('input');
-    node.type = 'hidden';
-    node.value = value;
-    node.name = name;
-    $('CHARM_FORM').appendChild(node);
-  }
-  
-  __CHARM.iFrameLoaded = function(){ 
-    if(!sending) return; sending = false; success();
-  };
-  
-  __CHARM.iFrameError = function(){ 
-    if(!sending) return; sending = false; error();
-  };
-  
-  function show(options){
-    if(shown) return;
-    hideTab();
-    shown = true;
-    
-    callbacks = options || {};
-    
-    before();
-    
-    if(!box) {
-      box = document.createElement('div');
-      box.id = "CHARM_BOX";
-      //box.className = 'feedback-popup';
-      box.innerHTML = BOX;
-      document.body.appendChild(box);
-      
-      if(!('email' in __CHARM) || !(/@/.test(__CHARM.email+''))){
-        email = document.createElement('input');
-        email.id   = 'CHARM_EMAIL';
-        email.type = 'text';
-        email.name = 'email';
-        email.value = '';
-        customize('your_email');
-        customize('your_comment');
-        $('CHARM_YOUR_EMAIL').appendChild(email);
-        box.className = 'feedback-popup closed' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
-      } else {
-        $('CHARM_YOUR_EMAIL').parentNode.removeChild($('CHARM_YOUR_EMAIL'));
-        $('CHARM_YOUR_COMMENT').parentNode.removeChild($('CHARM_YOUR_COMMENT'));
-        userdata('email');
-      }
-
-      // customize('text');
-      // customize('submit', 'value');
-      // customize('cancel');
-      
-      userdata('key');
-      userdata('customer');
-      userdata('customer_info');
-      userdata('first_name');
-      userdata('last_name');
-      userdata('user_info');
-      userdata('customer_id');
-      userdata('subject');
-
-      data('location', location.href);
-      data('user_agent', navigator.userAgent);
-      data('local_time', (new Date).toString());
-
-      $('CHARM_FORM').action = __CHARM['url'];
-
-      setTimeout(function(){
-        var scrollTop = document.body.scrollTop;
-        
-        box.className = 'open' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
-        $('CHARM_FORM').onsubmit = function(){ 
-          var ok = !($('CHARM_COMMENT').value.replace(/^\s+/, '').replace(/\s+$/, '') == "");
-          if(ok){
-            sending = true; 
-            hide(); 
-            message('feedback_sending', false);
-          }
-          return ok;
-        };
-        $('CHARM_CANCEL').onclick = function(){ cancel(); return false };
-        
-        setTimeout(function(){
-          if($('CHARM_EMAIL'))
-            $('CHARM_EMAIL').focus();
-          else
-            $('CHARM_COMMENT').focus();
-          document.body.scrollTop = scrollTop;
-        }, 10);
-      }, 10);
-
-      return;
-    }
-    box.offsetLeft;
-    box.className = 'open' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
-    if($('CHARM_EMAIL'))
-      $('CHARM_EMAIL').focus();
-    else
-      $('CHARM_COMMENT').focus();
-  }
-  
-  __CHARM.show = show;
-  
-  function cancel(){
-    hide();
-    showTab();
-    after();
-  }
-  
-  function success(){
-    showTab();
-    message('feedback_sent');
-    if(__CHARM.success) __CHARM.success();
-    if(callbacks.success) callbacks.success();
-    after();
-    $('CHARM_COMMENT').value = "";
-    callbacks = {};
-  }
-  
-  function error(){
-    show();
-    message('feedback_error', false);
-    if(__CHARM.error) __CHARM.error();
-    if(callbacks.error) callbacks.error();
-    after();
-    callbacks = {};
-  }
-
-  function message(id, autoclose){
-    if(openmsg) closeMessage(openmsg);
-    var msg = document.createElement('div');
-    msg.id = "CHARM_MESSAGE";
-    msg.innerHTML = template((id in __CHARM) ? __CHARM[id] : DEFAULTS[id]);
-    document.body.appendChild(msg);
-    msg.className = 'feedback-popup open';
-    msg.onclick = function(){ closeMessage(msg); };
-    if(autoclose === undefined || !autoclose === false)
-      setTimeout(function(){ closeMessage(msg); }, 4000);
-    openmsg = msg;
-  }
-
-  function closeMessage(msg){
-    msg.className = 'closed';
-    setTimeout(function(){
-      if(msg && msg.parentNode) msg.parentNode.removeChild(msg);
-    }, 260);
-    openmsg = null;
-  }
-  
-  function hide(){
-    if(!shown) return;
-    shown = false;
-    box.className = 'closed' + ($('CHARM_YOUR_EMAIL') ? ' with-email' : '');
-  }
-
-  function hideTab(){
-    tab.classList.add('hidden');
-  }
-
-  function showTab(){
-    tab.classList.remove('hidden');
-  }
-  
-  function after(){
-    if(__CHARM.after) __CHARM.after();
-    if(callbacks.after) callbacks.after();
-    callbacks = {};
-  }
-  
-  function before(){
-    if(__CHARM.before) __CHARM.before();
-    if(callbacks.before) callbacks.before();
-  }
-  
-  init();
-};

waiter/config.ru

@@ -50,6 +50,7 @@ if ENV['TRAVIS_ENTERPRISE']
 end
 
 run Travis::Web::App.build(
+  userlike:        ENV['USERLIKE'],
   environment:     ENV['RACK_ENV'] || 'development',
   api_endpoint:    ENV['API_ENDPOINT'],
   pages_endpoint:   ENV['PAGES_ENDPOINT'],

waiter/lib/travis/web/app.rb

@@ -200,6 +200,7 @@ class Travis::Web::App
       config['charmKey'] = options[:charm_key] if options[:charm_key]
       config['githubOrgsOauthAccessSettingsUrl'] = options[:github_orgs_oauth_access_settings_url]
       config['ajaxPolling'] = true if options[:ajax_polling]
+      config['userlike'] = true if options[:userlike]
 
       config['endpoints'] = {
         'sshKey' => options[:ssh_key_enabled],