|
|
@@ -1,357 +0,0 @@
|
|
|
-extends ../layout
|
|
|
-
|
|
|
-include ./_new_mixins
|
|
|
-
|
|
|
-block append meta
|
|
|
- meta(name="ol-countryCode" content=countryCode)
|
|
|
- meta(name="ol-recurlyApiKey" content=settings.apis.recurly.publicKey)
|
|
|
- meta(name="ol-recommendedCurrency" content=String(currency).slice(0,3))
|
|
|
-
|
|
|
-block head-scripts
|
|
|
- script(type="text/javascript", nonce=scriptNonce, src="https://js.recurly.com/v4/recurly.js")
|
|
|
-
|
|
|
-block content
|
|
|
- main.content.content-alt#main-content
|
|
|
- .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="coupon.discountMonths && coupon.discountRate") - {{coupon.discountMonths}} #{translate("month")}s {{coupon.discountRate}}% Off
|
|
|
-
|
|
|
- div(ng-if="recurlyPrice")
|
|
|
- - var priceVars = { price: "{{ availableCurrencies[currencyCode]['symbol'] }}{{ recurlyPrice.total }}"};
|
|
|
- span(ng-if="!coupon.singleUse && monthlyBilling")
|
|
|
- | !{translate("x_price_per_month", priceVars, ['strong'] )}
|
|
|
- span(ng-if="!coupon.singleUse && !monthlyBilling")
|
|
|
- | !{translate("x_price_per_year", priceVars, ['strong'] )}
|
|
|
- span(ng-if="coupon.singleUse && monthlyBilling")
|
|
|
- | !{translate("x_price_for_first_month", priceVars, ['strong'] )}
|
|
|
- span(ng-if="coupon.singleUse && !monthlyBilling")
|
|
|
- | !{translate("x_price_for_first_year", priceVars, ['strong'] )}
|
|
|
-
|
|
|
- div(ng-if="coupon && coupon.normalPrice")
|
|
|
- - var noDiscountPriceAngularExp = "{{ availableCurrencies[currencyCode]['symbol']}}{{coupon.normalPrice | number:2 }}";
|
|
|
- span.small(ng-if="!coupon.singleUse && monthlyBilling")
|
|
|
- | !{translate("normally_x_price_per_month", { price: noDiscountPriceAngularExp } )}
|
|
|
- span.small(ng-if="!coupon.singleUse && !monthlyBilling")
|
|
|
- | !{translate("normally_x_price_per_year", { price: noDiscountPriceAngularExp } )}
|
|
|
- span.small(ng-if="coupon.singleUse && monthlyBilling")
|
|
|
- | !{translate("then_x_price_per_month", { price: noDiscountPriceAngularExp } )}
|
|
|
- span.small(ng-if="coupon.singleUse && !monthlyBilling")
|
|
|
- | !{translate("then_x_price_per_year", { price: noDiscountPriceAngularExp } )}
|
|
|
-
|
|
|
- .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}}
|
|
|
-
|
|
|
- .alert.alert-warning.small(ng-show="couponError")
|
|
|
- strong {{couponError}}
|
|
|
-
|
|
|
- div(ng-show="paymentMethod.value === 'credit_card'")
|
|
|
- .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(ng-if="simpleCCForm.firstName.$error.required") #{translate('this_field_is_required')}
|
|
|
- .col-xs-6
|
|
|
- .form-group(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(ng-if="simpleCCForm.lastName.$error.required") #{translate('this_field_is_required')}
|
|
|
-
|
|
|
- .form-group(ng-class="validation.errorFields.number ? 'has-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-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-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-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
|
|
|
- .row
|
|
|
- .col-xs-12
|
|
|
- .form-group(ng-class="validation.errorFields.address1 || inputHasError(simpleCCForm.address1) ? 'has-error' : ''")
|
|
|
- label(for="address-line-1") #{translate('address_line_1')}
|
|
|
- input#address-line-1.form-control(
|
|
|
- type="text"
|
|
|
- maxlength="50"
|
|
|
- data-recurly="address1"
|
|
|
- name="address1"
|
|
|
- ng-model="data.address1"
|
|
|
- required
|
|
|
- )
|
|
|
- span.input-feedback-message(ng-if="simpleCCForm.address1.$error.required") #{translate('this_field_is_required')}
|
|
|
-
|
|
|
- .row
|
|
|
- .col-xs-12
|
|
|
- .form-group.has-feedback(ng-class="validation.errorFields.address2 ? 'has-error' : ''")
|
|
|
- label(for="address-line-2") #{translate('address_line_2')}
|
|
|
- input#address-line-2.form-control(
|
|
|
- type="text"
|
|
|
- maxlength="50"
|
|
|
- data-recurly="address2"
|
|
|
- name="address2"
|
|
|
- ng-model="data.address2"
|
|
|
- )
|
|
|
-
|
|
|
- .row
|
|
|
- .col-xs-4
|
|
|
- .form-group(ng-class="validation.errorFields.postal_code || inputHasError(simpleCCForm.postalCode) ? 'has-error' : ''")
|
|
|
- label(for="postal-code") #{translate('postal_code')}
|
|
|
- input#postal-code.form-control(
|
|
|
- type="text"
|
|
|
- maxlength="20"
|
|
|
- data-recurly="postal_code"
|
|
|
- name="postalCode"
|
|
|
- ng-model="data.postal_code"
|
|
|
- required
|
|
|
- )
|
|
|
- span.input-feedback-message(ng-if="simpleCCForm.postalCode.$error.required") #{translate('this_field_is_required')}
|
|
|
-
|
|
|
- .col-xs-8
|
|
|
- .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()"
|
|
|
- ng-selected="{{country.code == data.country}}"
|
|
|
- ng-model-options="{ debounce: 200 }"
|
|
|
- required
|
|
|
- )
|
|
|
- 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(ng-if="simpleCCForm.country.$error.required") #{translate('this_field_is_required')}
|
|
|
-
|
|
|
- .form-group
|
|
|
- .checkbox
|
|
|
- label
|
|
|
- input(
|
|
|
- type="checkbox"
|
|
|
- ng-model="ui.addCompanyDetails"
|
|
|
- )
|
|
|
- |
|
|
|
- | #{translate("add_company_details")}
|
|
|
-
|
|
|
- .form-group(ng-show="ui.addCompanyDetails")
|
|
|
- label(for="company-name") #{translate("company_name")}
|
|
|
- input#company-name.form-control(
|
|
|
- type="text"
|
|
|
- name="companyName"
|
|
|
- ng-model="data.company"
|
|
|
- )
|
|
|
-
|
|
|
- .form-group(ng-show="ui.addCompanyDetails && taxes.length")
|
|
|
- label(for="vat-number") #{translate("vat_number")}
|
|
|
- input#vat-number.form-control(
|
|
|
- type="text"
|
|
|
- name="vatNumber"
|
|
|
- ng-model="data.vat_number"
|
|
|
- ng-blur="applyVatNumber()"
|
|
|
- )
|
|
|
-
|
|
|
- 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-show="taxes.length"
|
|
|
- )
|
|
|
- - var priceBreakdownVars = { total: "{{ availableCurrencies[currencyCode]['symbol'] }}{{ recurlyPrice.total }}", subtotal: "{{availableCurrencies[currencyCode]['symbol']}}{{ recurlyPrice.subtotal }}", tax: "{{availableCurrencies[currencyCode]['symbol']}}{{ recurlyPrice.tax }}" };
|
|
|
- hr.thin
|
|
|
- span
|
|
|
- | Total:
|
|
|
- |
|
|
|
- span(ng-if="!coupon.singleUse && monthlyBilling")
|
|
|
- | !{translate("x_price_per_month_tax", priceBreakdownVars, ['strong'] )}
|
|
|
- span(ng-if="!coupon.singleUse && !monthlyBilling")
|
|
|
- | !{translate("x_price_per_year_tax", priceBreakdownVars, ['strong'] )}
|
|
|
- span(ng-if="coupon.singleUse && monthlyBilling")
|
|
|
- | !{translate("x_price_for_first_month_tax", priceBreakdownVars, ['strong'] )}
|
|
|
- span(ng-if="coupon.singleUse && !monthlyBilling")
|
|
|
- | !{translate("x_price_for_first_year_tax", priceBreakdownVars, ['strong'] )}
|
|
|
- hr.thin
|
|
|
-
|
|
|
- div.payment-submit
|
|
|
- button.btn.btn-primary.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'")
|
|
|
- | {{ trialLength ? '#{translate("upgrade_cc_btn")}' : '#{translate("upgrade_now")}'}}
|
|
|
- span(ng-if="paymentMethod.value !== 'credit_card'") #{translate("upgrade_paypal_btn")}
|
|
|
-
|
|
|
- p.tos-agreement-notice !{translate("by_subscribing_you_agree_to_our_terms_of_service", {}, [{name: 'a', attrs: {href: '/legal#Terms', target:'_blank', rel:'noopener noreferrer'}}])}
|
|
|
-
|
|
|
- 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
|
|
|
- .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
|
|
|
- if plan.features.collaborators == 1
|
|
|
- | #{translate("collabs_per_proj_single", {collabcount:collaboratorCount})}
|
|
|
- else
|
|
|
- | #{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.track-changes-example
|
|
|
- | #{translate("see_what_has_been")} #[span.added #{translate("added")}]
|
|
|
- | #{translate("and")} #[span.removed #{translate("removed")}].
|
|
|
- p
|
|
|
- | #{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) !{translate("cancel_anytime", { appName:'{{settings.appName}}' })}
|
|
|
-
|
|
|
- script(type="text/javascript", nonce=scriptNonce).
|
|
|
- ga('send', 'event', 'pageview', 'payment_form', "#{plan_code}")
|
|
|
-
|
|
|
- script(
|
|
|
- type="text/ng-template"
|
|
|
- id="cvv-tooltip-tpl.html"
|
|
|
- )
|
|
|
- p !{translate("for_visa_mastercard_and_discover", {}, ['strong', 'strong', 'strong'])}
|
|
|
- p !{translate("for_american_express", {}, ['strong', 'strong', 'strong'])}
|
|
|
-
|
|
|
- +studentCheckModal
|
Mathias Jakobsen