Merge pull request #353 from sharelatex/pr-ab-test-history-teaser

AB test history teaser

services/web/app/views/project/editor/history.jade

@@ -1,41 +1,85 @@
 div#history(ng-show="ui.view == 'history'")
 	span(ng-controller="HistoryPremiumPopup")
 		.upgrade-prompt(ng-show="!project.features.versioning")
-			.message(ng-show="project.owner._id == user.id")
-				p.text-center: strong #{translate("upgrade_to_get_feature", {feature:"full Project History"})}
-				p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
-				ul.list-unstyled
-					li 
-						i.fa.fa-check  
-						| #{translate("unlimited_projects")}
-					
-					li
-						i.fa.fa-check  
-						| #{translate("collabs_per_proj", {collabcount:'Multiple'})}
-					
-					li 
-						i.fa.fa-check  
-						| #{translate("full_doc_history")}
-					
-					li 
-						i.fa.fa-check  
-						| #{translate("sync_to_dropbox")}
+			
+			div(sixpack-switch="teaser-history")
+				.message(
+					sixpack-default
+					ng-show="project.owner._id == user.id"
+				)
+					p.text-center: strong #{translate("upgrade_to_get_feature", {feature:"full Project History"})}
+					p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
+					ul.list-unstyled
+						li 
+							i.fa.fa-check  
+							| #{translate("unlimited_projects")}
+						
+						li
+							i.fa.fa-check  
+							| #{translate("collabs_per_proj", {collabcount:'Multiple'})}
+						
+						li 
+							i.fa.fa-check  
+							| #{translate("full_doc_history")}
+						
+						li 
+							i.fa.fa-check  
+							| #{translate("sync_to_dropbox")}
 
-					li 
-						i.fa.fa-check  
-						| #{translate("sync_to_github")}
+						li 
+							i.fa.fa-check  
+							| #{translate("sync_to_github")}
 
-					li  
-						i.fa.fa-check  
-						|#{translate("compile_larger_projects")}
+						li  
+							i.fa.fa-check  
+							|#{translate("compile_larger_projects")}
+					p.text-center(ng-controller="FreeTrialModalController")
+						a.btn.btn-success(
+							href
+							ng-class="buttonClass"
+							ng-click="startFreeTrial('history')"
+							sixpack-convert="teaser-history"
+						) #{translate("start_free_trial")}
 
-				p.text-center(ng-controller="FreeTrialModalController")
-					a.btn.btn-success(
-						href
-						ng-class="buttonClass"
-						ng-click="startFreeTrial('history')"
-					) #{translate("start_free_trial")}
+				.message.message-wider(
+					sixpack-when="focused"
+					ng-show="project.owner._id == user.id"
+				)
+					header.message-header
+						h3 History
 
+					.message-body
+						h4.teaser-title See who changed what. Go back to previous versions.
+						img.teaser-img(
+							src="/img/teasers/history/teaser-history.png"
+							alt="History"
+						)
+						p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
+						.row
+							.col-md-8.col-md-offset-2
+								ul.list-unstyled
+									li 
+										i.fa.fa-check  
+										| Catch up with your collaborators changes
+									
+									li
+										i.fa.fa-check  
+										| See changes over any time period
+									
+									li 
+										i.fa.fa-check  
+										| Revert your documents to previous versions
+									
+									li 
+										i.fa.fa-check  
+										| Restore deleted files
+						p.text-center(ng-controller="FreeTrialModalController")
+							a.btn.btn-success(
+								href
+								ng-class="buttonClass"
+								ng-click="startFreeTrial('history')"
+								sixpack-convert="teaser-history"
+							) Try it for free
 
 			.message(ng-show="project.owner._id != user.id")
 				p #{translate("ask_proj_owner_to_upgrade_for_history")}

services/web/public/coffee/main/account-upgrade.coffee

@@ -15,7 +15,19 @@ define [
 				if couponCode?
 					url = "#{url}&cc=#{couponCode}"
 				$scope.startedFreeTrial = true
-				event_tracking.sendMB "subscription-start-trial", { source, plan}
+
+				switch source
+					when "dropbox"
+						sixpack.participate 'teaser-dropbox-text', ['default', 'dropbox-focused'], (variant) ->
+							event_tracking.sendMB "subscription-start-trial", { source, plan, variant }
+
+					when "history"
+						sixpack.participate 'teaser-history', ['default', 'focused'], (variant) ->
+							event_tracking.sendMB "subscription-start-trial", { source, plan, variant }
+
+					else
+						event_tracking.sendMB "subscription-start-trial", { source, plan }
+				
 				w.location = url
 
 			if $scope.shouldABTestPlans

services/web/public/stylesheets/app/editor.less

@@ -413,11 +413,13 @@
 	}
 }
 
+.teaser-title,
 .dropbox-teaser-title {
 	margin-top: 0;
 	text-align: center;
 }
 
+.teaser-img,
 .dropbox-teaser-img {
 	.img-responsive;
 	margin-bottom: 5px;

services/web/public/stylesheets/app/editor/history.less

@@ -25,6 +25,19 @@
 			background-color: white;
 			border-radius: 8px;
 		}
+		.message-wider {
+			width: 650px;
+			margin-top: 60px;
+			padding: 0;
+		}
+
+			.message-header {
+				.modal-header;
+			}
+
+			.message-body {
+				.modal-body;
+			}
 	}
 
 	.diff-panel {