Merge pull request #103 from speak/feature/call-rating

Post call rating system

package.json

@@ -52,6 +52,7 @@
     "react-addons-css-transition-group": "^0.14.2",
     "react-document-title": "^2.0.1",
     "react-dom": "^0.14.2",
+    "react-icon-rating": "^0.2.0",
     "react-onclickoutside": "^4.1.1",
     "rtcpeerconnection": "speak/RTCPeerConnection",
     "screenfull": "^2.0.0",

src/js/components/app.jsx

@@ -35,7 +35,7 @@ var App = React.createClass({
     var authenticated = app.socks && app.has_configuration;
 
     if (highlighted_user) return null;
-    
+
     if (app.incompatible) {
       return <Incompatible />
     }
@@ -61,7 +61,7 @@ var App = React.createClass({
 
     if (channel.id && !other_users.length) {
       if (channel.completed) {
-        return <CallCompleted key="completed" />;
+        return <CallCompleted key="completed" channel={channel} />;
       }
       var waiting = channel.created_by_id && channel.created_by_id != app.user_id;
       return <ChannelShare path={channel.path} waiting={waiting} key="share" />;

src/js/components/call-completed.jsx

@@ -1,11 +1,52 @@
 var React = require('react');
+var Rating = require('react-icon-rating');
+var Analytics = require('../libs/analytics');
 
 var CallCompleted = React.createClass({
 
+  getInitialState: function() {
+    return {
+      rated: false
+    }
+  },
+
+  handleRating: function(number) {
+    Analytics.track('channel.rating', {
+      id: this.props.channel.id,
+      rating: number
+    });
+
+    this.setState({rated: number});
+  },
+
+  getContent: function() {
+    if (this.state.rated === false) {
+      return <div>
+        <h2>How was the call?</h2>
+        <p>Help us improve Speak by rating the quality of <br/>your call, or <a href="mailto:[email protected]">send us an email</a> with feedback!</p>
+        <Rating className="rating" onChange={this.handleRating} toggledClassName="icon icon-star" untoggledClassName="icon icon-star-empty"/>
+      </div>;
+    } else if (this.state.rated < 3) {
+      return <div>
+        <h2>That&#39;s not good</h2>
+        <p>Consider <a href="mailto:[email protected]">dropping us a line</a> to let us know about the problems you had?</p>
+      </div>;
+    } else if (this.state.rated < 5) {
+      return <div>
+        <h2>Thanks for rating</h2>
+        <p>We hope you enjoyed using Speak, if you have ideas for improvements be sure to <a href="mailto:[email protected]">let us know</a>.</p>
+      </div>;
+    } else {
+      return <div>
+        <h2>A perfect call!</h2>
+        <p>Wow, you&#39;re just emitting positivity! Consider letting someone know about your Speak experience?</p>
+      </div>;
+    }
+  },
+
   render: function() {
     return <div id="call-completed">
-      <h2>Oh, everyone left.</h2>
-      <p>It looks like the call is over. Have you tried our <br/><a href="https://speak.io/download">Speak desktop app</a> yet? It&#39;s pretty neat!</p>
+      {this.getContent()}
     </div>;
   }
 });

src/less/rating.css.less

@@ -0,0 +1,23 @@
+@import "elements.css.less";
+
+.rating {
+  margin-top: 10px;
+
+  .icon {
+    background-repeat: no-repeat;
+    background-size: 30px 30px;
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    margin: 2px;
+  }
+
+  .icon-star {
+    background-image: url('../images/icons/star.png');
+  }
+
+  .icon-star-empty {
+    background-image: url('../images/icons/star-empty.png');
+    .opacity(0.7);
+  }
+}