mirror of
https://github.com/overleaf/overleaf.git
synced 2025-02-23 10:13:57 +00:00
can subscribe using new form. terrible styling
This commit is contained in:
Henry Oswald
parent
7e8b59cbb3
commit
ae3858bcd0
2 changed files with 227 additions and 10 deletions
|
|
@ -49,17 +49,218 @@ block content
|
|||
.row
|
||||
div()
|
||||
.col-md-12()
|
||||
form(method='post', action='/api/subscriptions/new')
|
||||
label(for='number') Card Number
|
||||
#number(data-recurly='number')
|
||||
label(for='month') Month
|
||||
#month(data-recurly='month')
|
||||
label(for='year') Year
|
||||
#year(data-recurly='year')
|
||||
button#subscribe Subscribe
|
||||
form(
|
||||
name="simpleCCForm"
|
||||
novalidate
|
||||
)
|
||||
|
||||
|
||||
div.payment-method-toggle
|
||||
a.payment-method-toggle-switch(
|
||||
href
|
||||
ng-click="setPaymentMethod('credit_card');"
|
||||
ng-class="paymentMethod.value === 'credit_card' ? 'payment-method-toggle-switch-selected' : ''"
|
||||
)
|
||||
i.fa.fa-cc-mastercard.fa-2x
|
||||
span
|
||||
i.fa.fa-cc-visa.fa-2x
|
||||
span
|
||||
i.fa.fa-cc-amex.fa-2x
|
||||
a.payment-method-toggle-switch(
|
||||
href
|
||||
ng-click="setPaymentMethod('paypal');"
|
||||
ng-class="paymentMethod.value === 'paypal' ? 'payment-method-toggle-switch-selected' : ''"
|
||||
)
|
||||
i.fa.fa-cc-paypal.fa-2x
|
||||
|
||||
.alert.alert-warning.small(ng-show="genericError")
|
||||
strong {{genericError}}
|
||||
|
||||
div()
|
||||
.row
|
||||
.col-xs-6
|
||||
.form-group(ng-class="validation.errorFields.first_name || inputHasError(simpleCCForm.firstName) ? 'has-error' : ''")
|
||||
label(for="first-name") #{translate('first_name')}
|
||||
input#first-name.form-control(
|
||||
type="text"
|
||||
maxlength='255'
|
||||
data-recurly="first_name"
|
||||
name="firstName"
|
||||
ng-model="data.first_name"
|
||||
required
|
||||
)
|
||||
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' : ''")
|
||||
label(for="last-name") #{translate('last_name')}
|
||||
input#last-name.form-control(
|
||||
type="text"
|
||||
maxlength='255'
|
||||
data-recurly="last_name"
|
||||
name="lastName"
|
||||
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' : ''")
|
||||
label(for="card-no") #{translate("credit_card_number")}
|
||||
div#card-no.form-control(
|
||||
type="text"
|
||||
name="ccNumber"
|
||||
data-recurly='number'
|
||||
ng-focus="validation.correctCardNumber = true; validation.errorFields.number = false;"
|
||||
ng-blur="validateCardNumber();"
|
||||
required
|
||||
)
|
||||
span.input-feedback-message {{ simpleCCForm.ccNumber.$error.required ? 'This field is required' : 'Please re-check the card number' }}
|
||||
|
||||
.row
|
||||
.col-xs-3
|
||||
.form-group.has-feedback(ng-class="validation.correctExpiry == false || validation.errorFields.expiry || inputHasError(simpleCCForm.expiry) ? 'has-error' : ''")
|
||||
label(for="month") #{translate("month")}
|
||||
div.form-control(
|
||||
type="text"
|
||||
name="month"
|
||||
ng-focus="validation.correctExpiry = true; validation.errorFields.expiry = false;"
|
||||
ng-blur="updateExpiry(); validateExpiry()"
|
||||
data-recurly="month"
|
||||
required
|
||||
)
|
||||
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.correctExpiry == false || validation.errorFields.expiry || inputHasError(simpleCCForm.expiry) ? 'has-error' : ''")
|
||||
label(for="year") #{translate("year")}
|
||||
div.form-control(
|
||||
type="text"
|
||||
name="year"
|
||||
data-recurly="year"
|
||||
ng-focus="validation.correctExpiry = true; validation.errorFields.expiry = false;"
|
||||
ng-blur="updateExpiry(); validateExpiry()"
|
||||
required
|
||||
)
|
||||
span.input-feedback-message {{ simpleCCForm.expiry.$error.required ? 'This field is required' : 'Please re-check the expiry date' }}
|
||||
|
||||
|
||||
|
||||
|
||||
.col-xs-6
|
||||
.form-group.has-feedback(ng-class="validation.correctCvv == false || validation.errorFields.cvv || inputHasError(simpleCCForm.cvv) ? 'has-error' : ''")
|
||||
label #{translate("security_code")}
|
||||
div.form-control(
|
||||
type="text"
|
||||
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
|
||||
a.form-helper(
|
||||
href
|
||||
tabindex="-1"
|
||||
tooltip-template="'cvv-tooltip-tpl.html'"
|
||||
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' : ''")
|
||||
label(for="country") #{translate('country')}
|
||||
select#country.form-control(
|
||||
data-recurly="country"
|
||||
ng-model="data.country"
|
||||
name="country"
|
||||
ng-change="updateCountry()"
|
||||
required
|
||||
)
|
||||
+countries_options()
|
||||
span.input-feedback-message {{ simpleCCForm.country.$error.required ? 'This field is required' : '' }}
|
||||
|
||||
if (showVatField)
|
||||
.form-group
|
||||
label(for="vat-no") #{translate('vat_number')}
|
||||
input#vat-no.form-control(
|
||||
type="text"
|
||||
ng-blur="applyVatNumber()"
|
||||
ng-model="data.vat_number"
|
||||
)
|
||||
if (showCouponField)
|
||||
.form-group
|
||||
label(for="coupon-code") #{translate('coupon_code')}
|
||||
input#coupon-code.form-control(
|
||||
type="text"
|
||||
ng-blur="applyCoupon()"
|
||||
ng-model="data.coupon"
|
||||
)
|
||||
|
||||
p(ng-if="paymentMethod.value === 'paypal'") #{translate("paypal_upgrade")}
|
||||
|
||||
div.price-breakdown(ng-if="price.next.tax !== '0.00'")
|
||||
hr.thin
|
||||
span Total:
|
||||
strong {{price.currency.symbol}}{{price.next.total}}
|
||||
span ({{price.currency.symbol}}{{price.next.subtotal}} + {{price.currency.symbol}}{{price.next.tax}} tax)
|
||||
span(ng-if="monthlyBilling") #{translate("every")} #{translate("month")}
|
||||
span(ng-if="!monthlyBilling") #{translate("every")} #{translate("year")}
|
||||
hr.thin
|
||||
|
||||
div.payment-submit
|
||||
button.btn.btn-success.btn-block(
|
||||
ng-click="submit()"
|
||||
ng-disabled="processing"
|
||||
)
|
||||
span(ng-show="processing")
|
||||
i.fa.fa-spinner.fa-spin
|
||||
|
|
||||
| {{ paymentMethod.value === 'credit_card' ? '#{translate("upgrade_cc_btn")}' : '#{translate("upgrade_paypal_btn")}' }}
|
||||
|
||||
|
||||
.col-md-3.col-md-pull-4
|
||||
if showStudentPlan == 'true'
|
||||
a.btn-primary.btn.plansPageStudentLink(
|
||||
href,
|
||||
ng-click="switchToStudent()"
|
||||
) #{translate("half_price_student")}
|
||||
|
||||
.card.card-first
|
||||
.paymentPageFeatures
|
||||
h3 #{translate("unlimited_projects")}
|
||||
p #{translate("create_unlimited_projects")}
|
||||
|
||||
h3
|
||||
if plan.features.collaborators == -1
|
||||
- var collaboratorCount = 'Unlimited'
|
||||
else
|
||||
- var collaboratorCount = plan.features.collaborators
|
||||
| #{translate("collabs_per_proj", {collabcount:collaboratorCount})}
|
||||
p #{translate("work_on_single_version")}. #{translate("view_collab_edits")} in real time.
|
||||
|
||||
h3 #{translate("full_doc_history")}
|
||||
p #{translate("see_what_has_been")}
|
||||
span.added #{translate("added")}
|
||||
| #{translate("and")}
|
||||
span.removed #{translate("removed")}.
|
||||
| #{translate("restore_to_any_older_version")}.
|
||||
|
||||
h3 #{translate("sync_to_dropbox")}
|
||||
p
|
||||
| #{translate("acces_work_from_anywhere")}.
|
||||
| #{translate("work_offline_and_sync_with_dropbox")}.
|
||||
|
||||
hr
|
||||
|
||||
p.small.text-center We're confident that you'll love ShareLaTeX, but if not you can cancel anytime. We'll give you your money back, no questions asked, if you let us know within 30 days.
|
||||
hr
|
||||
span
|
||||
a(href="https://www.positivessl.com" style="font-family: arial; font-size: 10px; color: #212121; text-decoration: none;")
|
||||
img(src="https://www.positivessl.com/images-new/PositiveSSL_tl_trans.png" alt="SSL Certificate" title="SSL Certificate" border="0")
|
||||
div(style="font-family: arial;font-weight:bold;font-size:15px;color:#86BEE0;")
|
||||
a(href="https://www.positivessl.com" style="color:#86BEE0; text-decoration: none;")
|
||||
|
||||
|
||||
script(type="text/javascript").
|
||||
ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}")
|
||||
|
|
|
|||
|
|
@ -43,7 +43,23 @@ define [
|
|||
|
||||
$scope.processing = false
|
||||
|
||||
recurly.configure publicKey:window.recurlyApiKey
|
||||
recurly.configure
|
||||
publicKey: window.recurlyApiKey
|
||||
style:
|
||||
all:
|
||||
fontFamily: 'Open Sans',
|
||||
fontSize: '1rem',
|
||||
fontWeight: 'bold',
|
||||
fontColor: '#2c0730'
|
||||
number:
|
||||
placeholder: 'Card number'
|
||||
month:
|
||||
placeholder: 'mm'
|
||||
year:
|
||||
placeholder: 'yy'
|
||||
cvv:
|
||||
placeholder: 'cvv'
|
||||
|
||||
|
||||
pricing = recurly.Pricing()
|
||||
window.pricing = pricing
|
||||
|
|
|
|||
Loading…
Reference in a new issue