Merge pull request #276 from sharelatex/pr-contact-form-suggestions

Contact form suggestions

services/web/app/views/contact-us-modal.jade

@@ -11,7 +11,19 @@ script(type='text/ng-template', id='supportModalTemplate')
 			label
 				| #{translate("subject")}
 			.form-group
-				input.field.text.medium.span8.form-control(ng-model="form.subject", maxlength='255', tabindex='1', onkeyup='')
+				input.field.text.medium.span8.form-control(
+					ng-model="form.subject",
+					ng-model-options="{ updateOn: 'default blur', debounce: {'default': 350, 'blur': 0} }"
+					maxlength='255',
+					tabindex='1',
+					onkeyup='')
+			.contact-suggestions(ng-show="suggestions.length")
+				p.contact-suggestion-label !{translate("kb_suggestions_enquiry", { kbLink: "<a href='learn/kb' target='_blank'>__kb__</a>", kb: translate("knowledge_base") })} 
+				ul.contact-suggestion-list
+					li(ng-repeat="suggestion in suggestions")
+						a.contact-suggestion-list-item(ng-href="{{ suggestion.url }}", ng-click="clickSuggestionLink(suggestion.url);" target="_blank")
+							span(ng-bind-html="suggestion.name")
+							i.fa.fa-angle-right
 			label.desc(ng-show="'#{getUserEmail()}'.length < 1")
 				| #{translate("email")}
 			.form-group(ng-show="'#{getUserEmail()}'.length < 1")
@@ -21,7 +33,7 @@ script(type='text/ng-template', id='supportModalTemplate')
 			.form-group
 				input.field.text.medium.span8.form-control(ng-model="form.project_url", tabindex='3', onkeyup='')
 			label.desc
-				| #{translate("suggestion")}
+				| #{translate("contact_message_label")}
 			.form-group
 				textarea.field.text.medium.span8.form-control(ng-model="form.message",type='text', value='', tabindex='4', onkeyup='')
 			.form-group.text-center

services/web/public/coffee/main/contact-us.coffee

@@ -1,9 +1,8 @@
 define [
 	"base"
+	"services/algolia-search"
 	"libs/platform"
 ], (App, platform) ->
-
-
 	App.controller 'ContactModal', ($scope, $modal) ->
 		$scope.contactUsModal = () ->
 			modalInstance = $modal.open(
@@ -11,10 +10,25 @@ define [
 				controller: "SupportModalController"
 			)
 
-	App.controller 'SupportModalController', ($scope, $modalInstance) ->
+	App.controller 'SupportModalController', ($scope, $modalInstance, algoliaSearch, event_tracking) ->
 		$scope.form = {}
 		$scope.sent = false
 		$scope.sending = false
+		$scope.suggestions = [];
+
+		_handleSearchResults = (success, results) ->
+			suggestions = for hit in results.hits
+				page_underscored = hit.pageName.replace(/\s/g,'_')
+
+				suggestion = 
+					url :"/learn/kb/#{page_underscored}"
+					name : hit._highlightResult.pageName.value
+
+			event_tracking.sendCountly "contact-form-suggestions-shown" if results.hits.length
+
+			$scope.$applyAsync () -> 
+				$scope.suggestions = suggestions
+
 		$scope.contactUs = ->
 			if !$scope.form.email?
 				console.log "email not set"
@@ -36,6 +50,18 @@ define [
 				$scope.sent = true
 				$scope.$apply()
 
+		$scope.$watch "form.subject", (newVal, oldVal) ->
+			if newVal and newVal != oldVal and newVal.length > 3
+				algoliaSearch.searchKB newVal, _handleSearchResults, { 
+					hitsPerPage: 3
+					typoTolerance: 'strict'
+				}
+			else
+				$scope.suggestions = [];
+
+		$scope.clickSuggestionLink = (url) ->
+			event_tracking.sendCountly "contact-form-suggestions-clicked", { url }
+
 		$scope.close = () ->
 			$modalInstance.close()
 

services/web/public/coffee/main/learn.coffee

@@ -1,15 +1,9 @@
 define [
 	"base"
+	"services/algolia-search"
 ], (App) ->
-	
-	App.factory "algoliawiki", ->
-		if window.sharelatex?.algolia? and window.sharelatex.algolia?.indexes?.wiki?
-			client = new AlgoliaSearch(window.sharelatex.algolia?.app_id, window.sharelatex.algolia?.api_key)
-			index = client.initIndex(window.sharelatex.algolia?.indexes?.wiki)
-			return index
 
-	App.controller "SearchWikiController", ($scope, algoliawiki, _, $modal) ->
+	App.controller "SearchWikiController", ($scope, algoliaSearch, _, $modal) ->
-		algolia = algoliawiki
 		$scope.hits = []
 
 		$scope.clearSearchText = ->
@@ -54,7 +48,7 @@ define [
 				updateHits []
 				return
 				
-			algolia.search query, (err, response)->
+			algoliaSearch.searchWiki query, (err, response)->
 				if response.hits.length == 0
 					updateHits []
 				else

services/web/public/coffee/main/templates.coffee

@@ -1,15 +1,9 @@
 define [
 	"base"
+	"services/algolia-search"
 ], (App) ->
-	
-	App.factory "algoliawiki", ->
-		if window.sharelatex?.algolia? and window.sharelatex.algolia?.indexes?.wiki?
-			client = new AlgoliaSearch(window.sharelatex.algolia?.app_id, window.sharelatex.algolia?.api_key)
-			index = client.initIndex(window.sharelatex.algolia?.indexes?.wiki)
-			return index
 
-	App.controller "SearchWikiController", ($scope, algoliawiki, _) ->
+	App.controller "SearchWikiController", ($scope, algoliaSearch, _) ->
-		algolia = algoliawiki
 		$scope.hits = []
 
 		$scope.clearSearchText = ->
@@ -54,7 +48,7 @@ define [
 				updateHits []
 				return
 
-			algolia.search query, (err, response)->
+			algoliaSearch.searchWiki query, (err, response)->
 				if response.hits.length == 0
 					updateHits []
 				else

services/web/public/coffee/services/algolia-search.coffee

@@ -0,0 +1,14 @@
+define [
+	"base"
+], (App) ->
+	App.factory "algoliaSearch", ->
+		if window.sharelatex?.algolia? and window.sharelatex.algolia?.indexes?.wiki?
+			client = new AlgoliaSearch(window.sharelatex.algolia?.app_id, window.sharelatex.algolia?.api_key)
+			wikiIdx = client.initIndex(window.sharelatex.algolia?.indexes?.wiki)
+			kbIdx = client.initIndex(window.sharelatex.algolia?.indexes?.kb)
+
+		service =
+			searchWiki: wikiIdx.search.bind(wikiIdx)
+			searchKB: kbIdx.search.bind(kbIdx)
+		
+		return service

services/web/public/stylesheets/app/contact-us.less

@@ -3,4 +3,57 @@
 	textarea {
 		height: 120px;
 	}
-}
+}
+
+.contact-suggestions {
+	margin: 0 -20px 10px;
+	padding: 10px 0;
+	color: @gray-dark;
+	background-color: @gray-lightest;
+	border-top: solid 1px @gray-lighter;
+	border-bottom: solid 1px @gray-lighter;
+	font-size: 0.9rem;
+}
+
+	.contact-suggestion-label {
+		margin-bottom: 10px;
+		padding: 0 20px;
+	}
+
+	.contact-suggestion-list {
+		.list-unstyled();
+		background-color: #FFF;
+		border-top: solid 1px @gray-lighter;
+		border-bottom: solid 1px @gray-lighter;
+		margin: 0;
+
+		li:last-child .contact-suggestion-list-item {
+			border-bottom: none;
+		}
+	}
+
+		.contact-suggestion-list-item {
+			display: table;
+    		width: 100%;
+			color: @dropdown-link-color;
+			padding: 10px 20px; 
+			border-bottom: solid 1px lighten(@gray-lighter, 10%);
+			cursor: pointer;
+
+			&:hover,
+			&:focus {
+				text-decoration: none;
+				color: @dropdown-link-hover-color;
+				background-color: @dropdown-link-hover-bg;
+
+				.fa {
+					color: inherit;
+				}
+			}
+
+			.fa {
+				display: table-cell;
+				text-align: right;
+				color: @gray-lighter;
+			}
+		}