Merge branch 'master' of https://github.com/sharelatex/web-sharelatex

services/web/app/views/subscriptions/new.jade

@@ -22,11 +22,9 @@ block content
 					.card.card-highlighted
 						.page-header
 							.row
-								.col-md-9
+								.col-xs-9
 									h2 {{planName}}
-									div !{translate("first_few_days_free", {trialLen:'{{trialLength}}'})}
-									div #{translate("every")} {{billingCycleType}}
-								.col-md-3
+								.col-xs-3
 									div.dropdown.changePlanButton.pull-right(ng-cloak)
 										a.btn.btn-default.dropdown-toggle(
 											href="#",
@@ -39,7 +37,13 @@ block content
 												a(
 													ng-click="changeCurrency(currency)",
 												) {{currency}} ({{value['symbol']}})
-									h2.pull-right.totalPrice {{price.currency.symbol}}{{price.next.total}}
+							hr.thin
+							.row
+								.col-md-12.text-center
+									div(ng-if="trialLength") !{translate("first_few_days_free", {trialLen:'{{trialLength}}'})}
+									div(ng-if="price")
+										strong {{price.currency.symbol}}{{price.next.total}}
+										span  #{translate("every")} {{billingCycleType}}
 						.row
 							.col-md-12
 								form(ng-show="planName")
@@ -124,22 +128,22 @@ block content
 									hr
 									.row
 										.col-md-12
-											.form-group
+											.form-group(ng-class="validation.errorFields.address1 ? 'has-error' : ''")
 												label #{translate("billing_address")}
 												input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address1", placeholder="#{translate('address')}")
-											.form-group
+											.form-group(ng-class="validation.errorFields.address2 ? 'has-error' : ''")
 												input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address2", placeholder="#{translate('address')}")
-											.form-group
+											.form-group(ng-class="validation.errorFields.state ? 'has-error' : ''")
 												input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.state", placeholder="#{translate('state')}")
 									.row
 										.col-md-7
-											.form-group
+											.form-group(ng-class="validation.errorFields.city ? 'has-error' : ''")
 												input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city", placeholder="#{translate('city')}")
-										.col-md-5
+										.col-md-5(ng-class="validation.errorFields.postal_code ? 'has-error' : ''")
 												input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code", placeholder="#{translate('zip_post_code')}")
 									.row
 										.col-md-7
-											.form-group
+											.form-group(ng-class="validation.errorFields.country ? 'has-error' : ''")
 												select.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()", required)
 													mixin countries_options()
 									.row
@@ -150,16 +154,16 @@ block content
 
 
 									.row
-										.col-md-7
+										.col-xs-7
 											.form-group
 												button.btn.btn-success(ng-click="submit()", ng-disabled="processing") #{translate("upgrade_now")} 
 									
-										.col-md-3.pricingBreakdown
+										.col-xs-3.pricingBreakdown
 											div Subtotal
 											div Tax
 											div
 												strong Total
-										.col-md-2
+										.col-xs-2
 											div.pull-right {{price.currency.symbol}}{{price.next.subtotal}}
 											div.pull-right {{price.currency.symbol}}{{price.next.tax}}
 											div.pull-right

services/web/public/coffee/main/new-subscription.coffee

@@ -46,7 +46,7 @@ define [
 		pricing.on "change", =>
 			$scope.planName = pricing.items.plan.name
 			$scope.price = pricing.price
-			$scope.trialLength = pricing.items.plan.trial.length
+			$scope.trialLength = pricing.items.plan.trial?.length
 			$scope.billingCycleType = if pricing.items.plan.period.interval == "months" then "month" else "year"
 			$scope.$apply()
 
@@ -81,9 +81,12 @@ define [
 		completeSubscription = (err, recurly_token_id) ->
 			$scope.validation.errorFields = {}
 			if err?
-				$scope.processing = false
-				$scope.genericError = err.message
-				_.each err.fields, (field)-> $scope.validation.errorFields[field] = true
+				# We may or may not be in a digest loop here depending on
+				# whether recurly could do validation locally, so do it async
+				$scope.$evalAsync () ->
+					$scope.processing = false
+					$scope.genericError = err.message
+					_.each err.fields, (field)-> $scope.validation.errorFields[field] = true
 			else
 				postData =
 					_csrf: window.csrfToken
@@ -92,10 +95,10 @@ define [
 						currencyCode:pricing.items.currency
 						plan_code:pricing.items.plan.code
 				$http.post("/user/subscription/create", postData)
-				.success (data, status, headers)->
-					window.location.href = "/user/subscription/thank-you"
-				.error (data, status, headers)->
-					$scope.processing = false
+					.success (data, status, headers)->
+						window.location.href = "/user/subscription/thank-you"
+					.error (data, status, headers)->
+						$scope.processing = false
 					$scope.genericError = "Something went wrong processing the request"
 
 		$scope.submit = ->

services/web/public/stylesheets/core/scaffolding.less

@@ -114,6 +114,10 @@ hr {
   margin-bottom: @line-height-computed;
   border: 0;
   border-top: 1px solid @hr-border;
+  &.thin {
+      margin-top:    @line-height-computed / 2;
+      margin-bottom: @line-height-computed / 2;
+  }
 }