From 2a78a7843a192f6d2198c53f7c498f2a294a3481 Mon Sep 17 00:00:00 2001 From: James Allen Date: Thu, 29 Jan 2015 10:44:42 +0000 Subject: [PATCH 1/3] Allow subscriptions with no free plans, and adjust styles --- services/web/app/views/subscriptions/new.jade | 20 +++++++++++-------- .../coffee/main/new-subscription.coffee | 2 +- .../public/stylesheets/core/scaffolding.less | 4 ++++ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index 7daafd6193..fde06d571c 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/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") @@ -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 diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee index 407e06e231..60d032fbe4 100644 --- a/services/web/public/coffee/main/new-subscription.coffee +++ b/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() diff --git a/services/web/public/stylesheets/core/scaffolding.less b/services/web/public/stylesheets/core/scaffolding.less index fbf50534cd..b6dc68363d 100755 --- a/services/web/public/stylesheets/core/scaffolding.less +++ b/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; + } } From 3731c62e1702d202b5f52476772980c5d4b82a5a Mon Sep 17 00:00:00 2001 From: James Allen Date: Thu, 29 Jan 2015 14:22:45 +0000 Subject: [PATCH 2/3] Get validation working with address fields and Angular digest loop --- services/web/app/views/subscriptions/new.jade | 12 ++++++------ .../public/coffee/main/new-subscription.coffee | 15 ++++++++------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index fde06d571c..7c2c65cc25 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/services/web/app/views/subscriptions/new.jade @@ -128,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 diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee index 60d032fbe4..a67e5fc034 100644 --- a/services/web/public/coffee/main/new-subscription.coffee +++ b/services/web/public/coffee/main/new-subscription.coffee @@ -81,9 +81,10 @@ 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 + $scope.$apply () -> + $scope.processing = false + $scope.genericError = err.message + _.each err.fields, (field)-> $scope.validation.errorFields[field] = true else postData = _csrf: window.csrfToken @@ -92,10 +93,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 = -> From 36513f443c2129d332f044b96c7c29985cc43301 Mon Sep 17 00:00:00 2001 From: James Allen Date: Thu, 29 Jan 2015 14:43:27 +0000 Subject: [PATCH 3/3] Ensure we are in a digest loop when updating validation errors --- services/web/public/coffee/main/new-subscription.coffee | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee index a67e5fc034..6aefe3891f 100644 --- a/services/web/public/coffee/main/new-subscription.coffee +++ b/services/web/public/coffee/main/new-subscription.coffee @@ -81,7 +81,9 @@ define [ completeSubscription = (err, recurly_token_id) -> $scope.validation.errorFields = {} if err? - $scope.$apply () -> + # 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