Create and integrate track changes upgrade prompt.

services/web/app/views/project/editor/review-panel.pug

@@ -20,7 +20,7 @@
 			is-loading="reviewPanel.dropdown.loading"
 			permissions="permissions"
 		)
-		span.review-panel-toolbar-label(ng-if="permissions.write")
+		span.review-panel-toolbar-label(ng-if="permissions.write", ng-click="fooBarBaz($event);")
 			span(ng-click="toggleTrackChanges(true)", ng-if="editor.wantTrackChanges === false") Track Changes is 
 				strong off
 			span(ng-click="toggleTrackChanges(false)", ng-if="editor.wantTrackChanges === true") Track Changes is 
@@ -372,3 +372,49 @@ script(type='text/ng-template', id='resolvedCommentsDropdownTemplate')
 				.rp-loading(ng-if="!resolvedComments.length")
 					| No resolved threads.
 			
+script(type="text/ng-template", id="trackChangesUpgradeModalTemplate")
+	.modal-header
+		button.close(
+			type="button"
+			data-dismiss="modal"
+			ng-click="cancel()"
+		) ×
+		h3 Track Changes
+	.modal-body
+		.teaser-video-container
+			video.teaser-video(autoplay, loop)
+				source(src="/img/teasers/track-changes/teaser-track-changes.mp4", type="video/mp4")
+				img(src="/img/teasers/track-changes/teaser-track-changes.gif")
+		
+		h4.teaser-title See changes in your documents, live
+	
+		p.small(ng-show="startedFreeTrial")
+			| #{translate("refresh_page_after_starting_free_trial")}
+
+		.row
+			.col-md-10.col-md-offset-1
+				ul.list-unstyled
+					li
+						i.fa.fa-check  
+						| Track any change, in real-time
+					
+					li
+						i.fa.fa-check  
+						| Review your peers' work
+
+					li
+						i.fa.fa-check  
+						| Accept or reject each change individually
+					
+
+		.row.text-center(ng-controller="FreeTrialModalController")
+			a.btn.btn-success(
+				href
+				ng-click="startFreeTrial('track-changes')"
+			) Try it for free
+
+	.modal-footer()
+		button.btn.btn-default(
+			ng-click="cancel()"
+		)
+			span #{translate("close")}

services/web/public/coffee/ide/review-panel/ReviewPanelManager.coffee

@@ -1,5 +1,6 @@
 define [
 	"ide/review-panel/controllers/ReviewPanelController"
+	"ide/review-panel/controllers/TrackChangesUpgradeModalController"
 	"ide/review-panel/directives/reviewPanelSorted"
 	"ide/review-panel/directives/reviewPanelToggle"
 	"ide/review-panel/directives/changeEntry"

services/web/public/coffee/ide/review-panel/controllers/ReviewPanelController.coffee

@@ -4,7 +4,7 @@ define [
 	"ide/colors/ColorManager"
 	"ide/review-panel/RangesTracker"
 ], (App, EventEmitter, ColorManager, RangesTracker) ->
-	App.controller "ReviewPanelController", ($scope, $element, ide, $timeout, $http, event_tracking) ->
+	App.controller "ReviewPanelController", ($scope, $element, ide, $timeout, $http, $modal, event_tracking) ->
 		$reviewPanelEl = $element.find "#review-panel"
 
 		$scope.SubViews =
@@ -431,6 +431,10 @@ define [
 			ide.editorManager.openDocId(doc_id, { gotoOffset: entry.offset })
 		
 		$scope.toggleTrackChanges = (value) ->
+			if true # TODO check feature/permission
+				$scope.openTrackChangesUpgradeModal()
+				return
+
 			$scope.editor.wantTrackChanges = value
 			$http.post "/project/#{$scope.project_id}/track_changes", {_csrf: window.csrfToken, on: value}
 			event_tracking.sendMB "rp-trackchanges-toggle", { value }
@@ -522,3 +526,10 @@ define [
 				hue: ColorManager.getHueForUserId(id)
 				avatar_text: [user.first_name, user.last_name].filter((n) -> n?).map((n) -> n[0]).join ""
 			}
+
+		$scope.openTrackChangesUpgradeModal = () ->
+			$modal.open {
+				templateUrl: "trackChangesUpgradeModalTemplate"
+				controller: "TrackChangesUpgradeModalController"
+				scope: $scope.$new()
+			}