Merge pull request #417 from sharelatex/pr-track-changes-upgrade-prompt

Turn on track changes for beta users with upgrade prompt

services/web/app/coffee/Features/Project/ProjectEditorHandler.coffee

@@ -20,10 +20,10 @@ module.exports = ProjectEditorHandler =
 		if !result.invites?
 			result.invites = []
 			
-		hasTrackChanges = false
+		trackChangesVisible = false
 		for member in members
 			if member.privilegeLevel == "owner" and member.user?.featureSwitches?.track_changes
-				hasTrackChanges = true
+				trackChangesVisible = true
 
 		{owner, ownerFeatures, members} = @buildOwnerAndMembersViews(members)
 		result.owner = owner
@@ -37,7 +37,8 @@ module.exports = ProjectEditorHandler =
 			compileGroup:"standard"
 			templates: false
 			references: false
-			trackChanges: hasTrackChanges
+			trackChanges: false
+			trackChangesVisible: trackChangesVisible
 		})
 
 		return result

services/web/app/views/project/editor/editor.pug

@@ -53,7 +53,7 @@ div.full-size(
 			syntax-validation="settings.syntaxValidation",
 			review-panel="reviewPanel",
 			events-bridge="reviewPanelEventsBridge"
-			track-changes-enabled="project.features.trackChanges",
+			track-changes-enabled="project.features.trackChangesVisible",
 			track-changes= "editor.trackChanges",
 			doc-id="editor.open_doc_id"
 			renderer-data="reviewPanel.rendererData"

services/web/app/views/project/editor/header.pug

@@ -87,7 +87,7 @@ header.toolbar.toolbar-header.toolbar-with-labels(
 
 		a.btn.btn-full-height(
 			href,
-			ng-if="project.features.trackChanges",
+			ng-if="project.features.trackChangesVisible",
 			ng-class="{ active: ui.reviewPanelOpen }"
 			ng-click="toggleReviewPanel()"
 		)

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

@@ -25,7 +25,13 @@
 				strong off
 			span(ng-click="toggleTrackChanges(false)", ng-if="editor.wantTrackChanges === true") Track Changes is 
 				strong on
-			review-panel-toggle(ng-if="editor.wantTrackChanges == editor.trackChanges", ng-model="editor.wantTrackChanges", on-toggle="toggleTrackChanges")
+			review-panel-toggle(
+				ng-if="editor.wantTrackChanges == editor.trackChanges"
+				ng-model="editor.wantTrackChanges"
+				on-toggle="toggleTrackChanges"
+				disabled="!project.features.trackChanges"
+				on-disabled-click="openTrackChangesUpgradeModal"
+			)
 		span.review-panel-toolbar-label.review-panel-toolbar-label-disabled(ng-if="!permissions.write")
 			span(ng-if="editor.wantTrackChanges === false") Track Changes is 
 				strong off
@@ -372,3 +378,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 Upgrade to 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/connection/ConnectionManager.coffee

@@ -1,3 +1,4 @@
+
 define [], () ->
 	ONEHOUR = 1000 * 60 * 60
 	class ConnectionManager

services/web/public/coffee/ide/editor/EditorManager.coffee

@@ -11,7 +11,7 @@ define [
 				open_doc_name: null
 				opening: true
 				trackChanges: false
-				wantTrackChanges: window.trackChangesEnabled
+				wantTrackChanges: false
 			}
 
 			@$scope.$on "entity:selected", (event, entity) =>
@@ -37,6 +37,10 @@ define [
 			@$scope.$watch "editor.wantTrackChanges", (value) =>
 				return if !value?
 				@_syncTrackChangesState(@$scope.editor.sharejs_doc)
+			
+			@$scope.$watch "project.features.trackChanges", (trackChangesFeature) =>
+				return if !trackChangesFeature?
+				@$scope.editor.wantTrackChanges = window.trackChangesEnabled and trackChangesFeature
 
 		autoOpenDoc: () ->
 			open_doc_id = 

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 =
@@ -438,9 +438,12 @@ define [
 			ide.editorManager.openDocId(doc_id, { gotoOffset: entry.offset })
 		
 		$scope.toggleTrackChanges = (value) ->
-			$scope.editor.wantTrackChanges = value
+			if $scope.project.features.trackChanges
-			$http.post "/project/#{$scope.project_id}/track_changes", {_csrf: window.csrfToken, on: value}
+				$scope.editor.wantTrackChanges = value
-			event_tracking.sendMB "rp-trackchanges-toggle", { value }
+				$http.post "/project/#{$scope.project_id}/track_changes", {_csrf: window.csrfToken, on: value}
+				event_tracking.sendMB "rp-trackchanges-toggle", { value }
+			else
+				$scope.openTrackChangesUpgradeModal()
 		
 		ide.socket.on "toggle-track-changes", (value) ->
 			$scope.$apply () ->
@@ -529,3 +532,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()
+			}

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

@@ -0,0 +1,11 @@
+define [
+	"base"
+], (App) ->
+	App.controller "TrackChangesUpgradeModalController", ($scope, $modalInstance) ->
+		$scope.cancel = () ->
+			$modalInstance.dismiss()
+			
+		$scope.startFreeTrial = (source) ->
+			ga?('send', 'event', 'subscription-funnel', 'upgraded-free-trial', source)
+			window.open("/user/subscription/new?planCode=student_free_trial_7_days")
+			$scope.startedFreeTrial = true

services/web/public/coffee/ide/review-panel/directives/reviewPanelToggle.coffee

@@ -6,16 +6,23 @@ define [
 		scope: 
 			onToggle: '='
 			ngModel: '='
+			disabled: '=?'
+			onDisabledClick: '=?'
 		link: (scope) ->
+			if !scope.disabled?
+				scope.disabled = false
 			scope.onChange = (args...) ->
 				scope.onToggle(scope.localModel)
+			scope.handleClick = () ->
+				if scope.disabled
+					scope.onDisabledClick()
 			scope.localModel = scope.ngModel
 			scope.$watch "ngModel", (value) ->
 				scope.localModel = value
 
 		template: """
-<div class="rp-toggle">
+<div class="rp-toggle" ng-click="handleClick();">
-	<input id="rp-toggle-{{$id}}" type="checkbox" class="rp-toggle-hidden-input" ng-model="localModel" ng-change="onChange()" />
+	<input id="rp-toggle-{{$id}}" ng-disabled="disabled" type="checkbox" class="rp-toggle-hidden-input" ng-model="localModel" ng-change="onChange()" />
 	<label for="rp-toggle-{{$id}}" class="rp-toggle-btn"></label>
 </div>
 """

services/web/public/stylesheets/app/editor/review-panel.less

@@ -653,7 +653,7 @@
 .rp-toggle {
 	display: inline-block;
 	vertical-align: middle;
-	margin-left: 5px;
+	padding-left: 5px;
 }
 	.rp-toggle-hidden-input {
 		display: none;