alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Recurly.js v4
This commit is contained in:
Henry Oswald
2018-04-16 11:52:24 +01:00
committed by GitHub
parent 9e40555c89 086f080ee4
commit f041b0a1e9
8 changed files with 64 additions and 4295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/app/views/subscriptions/new.pug
+30 -39
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
services/web/public/coffee/main/new-subscription.coffee
+20 -35
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()
services/web/public/coffee/main/plans.coffee
+1 -1
View File
@@ -1,6 +1,6 @@
define [
"base"
"libs/recurly-3.0.5"
"libs/recurly-4.8.5"
], (App, recurly) ->
services/web/public/js/libs/recurly-3.0.5.js
-4218
View File
File diff suppressed because it is too large Load Diff
services/web/public/js/libs/recurly-4.8.5.js
+6
View File
File diff suppressed because one or more lines are too long
services/web/public/js/libs/recurly.min.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
services/web/public/stylesheets/app/recurly.less
+5
View File
@@ -1,3 +1,8 @@
.recurly-hosted-field {
&:extend(.form-control);
}
.recurly {
display: block;
position: relative;
services/web/public/stylesheets/components/forms.less
+2 -1
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) {