Merge pull request #491 from sharelatex/ho-recurly-v4

Recurly.js v4
This commit is contained in:
Henry Oswald 2018-04-16 11:52:24 +01:00 committed by GitHub
commit f041b0a1e9
8 changed files with 64 additions and 4295 deletions

View file

@ -1,8 +1,6 @@
extends ../layout
block scripts
script(src="https://js.recurly.com/v3/recurly.js")
script(type='text/javascript').
window.countryCode = '#{countryCode}'
window.plan_code = '#{plan_code}'
@ -50,10 +48,11 @@ block content
div()
.col-md-12()
form(
ng-if="planName"
name="simpleCCForm"
novalidate
)
div.payment-method-toggle
a.payment-method-toggle-switch(
href
@ -75,10 +74,10 @@ block content
.alert.alert-warning.small(ng-show="genericError")
strong {{genericError}}
div(ng-if="paymentMethod.value === 'credit_card'")
div(ng-show="paymentMethod.value === 'credit_card'")
.row
.col-xs-6
.form-group(ng-class="validation.errorFields.first_name || inputHasError(simpleCCForm.firstName) ? 'has-error' : ''")
.form-group(ng-class="validation.errorFields.first_name || inputHasError(simpleCCForm.firstName) ? 'has-external-error' : ''")
label(for="first-name") #{translate('first_name')}
input#first-name.form-control(
type="text"
@ -90,7 +89,7 @@ block content
)
span.input-feedback-message {{ simpleCCForm.firstName.$error.required ? 'This field is required' : '' }}
.col-xs-6
.form-group(for="last-name",ng-class="validation.errorFields.last_name || inputHasError(simpleCCForm.lastName)? 'has-error' : ''")
.form-group(for="last-name",ng-class="validation.errorFields.last_name || inputHasError(simpleCCForm.lastName)? 'has-external-error' : ''")
label(for="last-name") #{translate('last_name')}
input#last-name.form-control(
type="text"
@ -100,47 +99,41 @@ block content
ng-model="data.last_name"
required
)
span.input-feedback-message {{ simpleCCForm.lastName.$error.required ? 'This field is required' : '' }}
.form-group(ng-class="validation.correctCardNumber == false || validation.errorFields.number || inputHasError(simpleCCForm.ccNumber) ? 'has-error' : ''")
.form-group(ng-class="validation.errorFields.number ? 'has-external-error' : ''")
label(for="card-no") #{translate("credit_card_number")}
input#card-no.form-control(
div#card-no(
type="text"
ng-model="data.number"
name="ccNumber"
ng-focus="validation.correctCardNumber = true; validation.errorFields.number = false;"
ng-blur="validateCardNumber();"
required
cc-format-card-number
data-recurly='number'
)
span.input-feedback-message {{ simpleCCForm.ccNumber.$error.required ? 'This field is required' : 'Please re-check the card number' }}
.row
.col-xs-6
.form-group.has-feedback(ng-class="validation.correctExpiry == false || validation.errorFields.expiry || inputHasError(simpleCCForm.expiry) ? 'has-error' : ''")
label #{translate("expiry")}
input.form-control(
type="text"
ng-model="data.mmYY"
name="expiry"
placeholder="MM / YY"
ng-focus="validation.correctExpiry = true; validation.errorFields.expiry = false;"
ng-blur="updateExpiry(); validateExpiry()"
required
cc-format-expiry
.col-xs-3
.form-group.has-feedback(ng-class="validation.errorFields.month ? 'has-external-error' : ''")
label(for="month") #{translate("month")}
div(
type="number"
name="month"
data-recurly="month"
)
span.input-feedback-message {{ simpleCCForm.expiry.$error.required ? 'This field is required' : 'Please re-check the expiry date' }}
.col-xs-3
.form-group.has-feedback(ng-class="validation.errorFields.year ? 'has-external-error' : ''")
label(for="year") #{translate("year")}
div(
type="number"
name="year"
data-recurly="year"
)
.col-xs-6
.form-group.has-feedback(ng-class="validation.correctCvv == false || validation.errorFields.cvv || inputHasError(simpleCCForm.cvv) ? 'has-error' : ''")
.form-group.has-feedback(ng-class="validation.errorFields.cvv ? 'has-external-error' : ''")
label #{translate("security_code")}
input.form-control(
type="text"
div(
type="number"
ng-model="data.cvv"
ng-focus="validation.correctCvv = true; validation.errorFields.cvv = false;"
ng-blur="validateCvv()"
data-recurly="cvv"
name="cvv"
required
cc-format-sec-code
)
.form-control-feedback
@ -151,11 +144,9 @@ block content
tooltip-trigger="mouseenter"
tooltip-append-to-body="true"
) ?
span.input-feedback-message {{ simpleCCForm.cvv.$error.required ? 'This field is required' : 'Please re-check the security code' }}
div
.form-group(ng-class="validation.errorFields.country || inputHasError(simpleCCForm.country) ? 'has-error' : ''")
.form-group(ng-class="validation.errorFields.country || inputHasError(simpleCCForm.country) ? 'has-external-error' : ''")
label(for="country") #{translate('country')}
select#country.form-control(
data-recurly="country"
@ -198,7 +189,7 @@ block content
div.payment-submit
button.btn.btn-success.btn-block(
ng-click="submit()"
ng-disabled="processing || !isFormValid(simpleCCForm);"
ng-disabled="processing || !isFormValid(simpleCCForm);"
)
span(ng-show="processing")
i.fa.fa-spinner.fa-spin

View file

@ -1,6 +1,7 @@
define [
"base",
"directives/creditCards"
"libs/recurly-4.8.5"
], (App)->
App.controller "NewSubscriptionController", ($scope, MultiCurrencyPricing, abTestManager, $http, sixpack, event_tracking, ccUtils)->
@ -21,10 +22,6 @@ define [
value: "credit_card"
$scope.data =
number: ""
month: ""
year: ""
cvv: ""
first_name: ""
last_name: ""
postal_code: ""
@ -34,16 +31,25 @@ define [
city:""
country:window.countryCode
coupon: window.couponCode
mmYY: ""
$scope.validation =
correctCardNumber : true
correctExpiry: true
correctCvv: true
$scope.validation = {}
$scope.processing = false
recurly.configure window.recurlyApiKey
recurly.configure
publicKey: window.recurlyApiKey
style:
all:
fontFamily: '"Open Sans", sans-serif',
fontSize: '16px',
fontColor: '#7a7a7a'
month:
placeholder: 'MM'
year:
placeholder: 'YY'
cvv:
placeholder: 'CVV'
pricing = recurly.Pricing()
window.pricing = pricing
@ -73,6 +79,8 @@ define [
$scope.normalPrice += (basePrice * pricing.price.taxes[0].rate)
$scope.$apply()
$scope.applyCoupon = ->
pricing.coupon($scope.data.coupon).done()
@ -83,26 +91,6 @@ define [
$scope.currencyCode = newCurrency
pricing.currency(newCurrency).done()
$scope.updateExpiry = () ->
parsedDateObj = ccUtils.parseExpiry $scope.data.mmYY
if parsedDateObj?
$scope.data.month = parsedDateObj.month
$scope.data.year = parsedDateObj.year
$scope.validateCardNumber = validateCardNumber = ->
$scope.validation.errorFields = {}
if $scope.data.number?.length != 0
$scope.validation.correctCardNumber = recurly.validate.cardNumber($scope.data.number)
$scope.validateExpiry = validateExpiry = ->
$scope.validation.errorFields = {}
if $scope.data.month?.length != 0 and $scope.data.year?.length != 0
$scope.validation.correctExpiry = recurly.validate.expiry($scope.data.month, $scope.data.year)
$scope.validateCvv = validateCvv = ->
$scope.validation.errorFields = {}
if $scope.data.cvv?.length != 0
$scope.validation.correctCvv = recurly.validate.cvv($scope.data.cvv)
$scope.inputHasError = inputHasError = (formItem) ->
if !formItem?
@ -114,10 +102,7 @@ define [
if $scope.paymentMethod.value == 'paypal'
return $scope.data.country != ""
else
return (form.$valid and
$scope.validation.correctCardNumber and
$scope.validation.correctExpiry and
$scope.validation.correctCvv)
return form.$valid
$scope.updateCountry = ->
pricing.address({country:$scope.data.country}).done()

View file

@ -1,6 +1,6 @@
define [
"base"
"libs/recurly-3.0.5"
"libs/recurly-4.8.5"
], (App, recurly) ->

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,8 @@
.recurly-hosted-field {
&:extend(.form-control);
}
.recurly {
display: block;
position: relative;

View file

@ -309,8 +309,9 @@ input[type="checkbox"],
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
.has-error {
.has-external-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
color:@red;
}
.form-control.ng-dirty.ng-invalid:not(:focus) {