mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-15 07:50:56 -05:00
269 lines
11 KiB
Text
269 lines
11 KiB
Text
extends ../layout
|
|
|
|
block head-scripts
|
|
script(src="https://js.recurly.com/v4/recurly.js")
|
|
script(type='text/javascript').
|
|
window.countryCode = '#{countryCode}'
|
|
window.plan_code = '#{plan_code}'
|
|
window.recurlyApiKey = "!{settings.apis.recurly.publicKey}"
|
|
window.couponCode = !{StringHelper.stringifyJsonForScript(couponCode)}
|
|
window.recomendedCurrency = !{StringHelper.stringifyJsonForScript(currency.slice(0,3))}
|
|
window.ITMCampaign = '#{ITMCampaign}'
|
|
window.ITMContent = '#{ITMContent}'
|
|
|
|
block content
|
|
.content.content-alt
|
|
|
|
.container(ng-controller="NewSubscriptionController" ng-cloak)
|
|
.row.card-group
|
|
.col-md-5.col-md-push-4
|
|
.card.card-highlighted.card-border(ng-hide="threeDSecureFlow")
|
|
.alert.alert-danger(ng-show="recurlyLoadError")
|
|
strong #{translate('payment_provider_unreachable_error')}
|
|
.page-header(ng-hide="recurlyLoadError")
|
|
.row
|
|
.col-xs-9
|
|
h2 {{planName}}
|
|
.col-xs-3
|
|
div.dropdown.changePlanButton.pull-right(ng-cloak, dropdown)
|
|
a.btn.btn-default.dropdown-toggle(
|
|
href="#",
|
|
data-toggle="dropdown",
|
|
dropdown-toggle
|
|
)
|
|
| {{currencyCode}} ({{allCurrencies[currencyCode]['symbol']}})
|
|
span.caret
|
|
ul.dropdown-menu(role="menu")
|
|
li(ng-repeat="(currency, value) in availableCurrencies")
|
|
a(
|
|
ng-click="changeCurrency(currency)",
|
|
) {{currency}} ({{value['symbol']}})
|
|
.row(ng-if="planCode == 'student-annual' || planCode == 'student-monthly' || planCode == 'student_free_trial_7_days'")
|
|
.col-xs-12
|
|
p.student-disclaimer #{translate('student_disclaimer')}
|
|
|
|
hr.thin
|
|
.row
|
|
.col-md-12.text-center
|
|
div(ng-if="trialLength")
|
|
span !{translate("first_few_days_free", {trialLen:'{{trialLength}}'})}
|
|
span(ng-if="discountMonths && discountRate") - {{discountMonths}} #{translate("month")}s {{discountRate}}% Off
|
|
div(ng-if="price")
|
|
strong {{availableCurrencies[currencyCode]['symbol']}}{{price.next.total}}
|
|
span(ng-if="monthlyBilling") #{translate("every")} #{translate("month")}
|
|
span(ng-if="!monthlyBilling") #{translate("every")} #{translate("year")}
|
|
div(ng-if="normalPrice")
|
|
span.small Normally {{availableCurrencies[currencyCode]['symbol']}}{{normalPrice}}
|
|
.row(ng-hide="recurlyLoadError")
|
|
div()
|
|
.col-md-12()
|
|
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(aria-hidden="true")
|
|
span
|
|
i.fa.fa-cc-visa.fa-2x(aria-hidden="true")
|
|
span
|
|
i.fa.fa-cc-amex.fa-2x(aria-hidden="true")
|
|
span.sr-only Pay with Mastercard, Visa, or Amex
|
|
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(aria-hidden="true")
|
|
span.sr-only Pay with PayPal
|
|
|
|
.alert.alert-warning.small(ng-show="genericError")
|
|
strong {{genericError}}
|
|
|
|
div(ng-show="paymentMethod.value === 'credit_card'")
|
|
.row
|
|
.col-xs-6
|
|
.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"
|
|
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-external-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
|
|
)
|
|
|
|
.form-group(ng-class="validation.errorFields.number ? 'has-external-error' : ''")
|
|
label(for="card-no") #{translate("credit_card_number")}
|
|
div#card-no(
|
|
type="text"
|
|
name="ccNumber"
|
|
data-recurly='number'
|
|
)
|
|
|
|
.row
|
|
.col-xs-3
|
|
.form-group.has-feedback(ng-class="validation.errorFields.month ? 'has-external-error' : ''")
|
|
label(for="month").capitalised #{translate("month")}
|
|
div(
|
|
type="number"
|
|
name="month"
|
|
data-recurly="month"
|
|
)
|
|
.col-xs-3
|
|
.form-group.has-feedback(ng-class="validation.errorFields.year ? 'has-external-error' : ''")
|
|
label(for="year").capitalised #{translate("year")}
|
|
div(
|
|
type="number"
|
|
name="year"
|
|
data-recurly="year"
|
|
)
|
|
|
|
.col-xs-6
|
|
.form-group.has-feedback(ng-class="validation.errorFields.cvv ? 'has-external-error' : ''")
|
|
label #{translate("security_code")}
|
|
div(
|
|
type="number"
|
|
ng-model="data.cvv"
|
|
data-recurly="cvv"
|
|
name="cvv"
|
|
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"
|
|
) ?
|
|
|
|
div
|
|
.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"
|
|
ng-model="data.country"
|
|
name="country"
|
|
ng-change="updateCountry()"
|
|
required,
|
|
ng-selected="{{country.code == data.country}}"
|
|
)
|
|
option(value='', disabled) #{translate("country")}
|
|
option(value='-', disabled) --------------
|
|
option(ng-repeat="country in countries" ng-bind-html="country.name" value="{{country.code}}")
|
|
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 {{availableCurrencies[currencyCode]['symbol']}}{{price.next.total}}
|
|
span ({{availableCurrencies[currencyCode]['symbol']}}{{price.next.subtotal}} + {{availableCurrencies[currencyCode]['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 || !isFormValid(simpleCCForm);"
|
|
)
|
|
span(ng-show="processing")
|
|
i.fa.fa-spinner.fa-spin(aria-hidden="true")
|
|
span.sr-only #{translate('processing')}
|
|
|
|
|
span(ng-if="paymentMethod.value === 'credit_card'")
|
|
| {{ monthlyBilling ? '#{translate("upgrade_cc_btn")}' : '#{translate("upgrade_now")}'}}
|
|
span(ng-if="paymentMethod.value !== 'credit_card'") #{translate("upgrade_paypal_btn")}
|
|
|
|
div.three-d-secure-container.card.card-highlighted.card-border(ng-show="threeDSecureFlow")
|
|
.alert.alert-info.small(aria-live="assertive")
|
|
strong #{translate('card_must_be_authenticated_by_3dsecure')}
|
|
div.three-d-secure-recurly-container
|
|
|
|
|
|
|
|
.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(ng-non-bindable) We're confident that you'll love #{settings.appName}, 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.
|
|
|
|
|
|
script(type="text/javascript").
|
|
ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}")
|
|
|
|
script(
|
|
type="text/ng-template"
|
|
id="cvv-tooltip-tpl.html"
|
|
)
|
|
p For #[strong Visa, MasterCard and Discover], the #[strong 3 digits] on the #[strong back] of your card.
|
|
p For #[strong American Express], the #[strong 4 digits] on the #[strong front] of your card.
|