overleaf/services/web/app/views/subscriptions/new.pug
Jessica Lawshe 10cf5825a5 Add plans variant
Also, fix for multiple quotes. Without a closing quote subsequent quotes are considered nested, and
will use a ‘ instead of “

Also, move repeated elements to partials
2018-06-04 14:42:26 -05:00

259 lines
10 KiB
Text

extends ../layout
block scripts
script(type='text/javascript').
window.countryCode = '#{countryCode}'
window.plan_code = '#{plan_code}'
window.recurlyApiKey = "!{settings.apis.recurly.publicKey}"
window.couponCode = !{JSON.stringify(couponCode)}
window.recomendedCurrency = !{JSON.stringify(currency.slice(0,3))}
block content
.content.content-alt
.container(ng-controller="NewSubscriptionController" ng-cloak)
.row.card-group
.col-md-5.col-md-push-4
.card.card-highlighted
.page-header
.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}} ({{plans[currencyCode]['symbol']}})
span.caret
ul.dropdown-menu(role="menu")
li(ng-repeat="(currency, value) in plans")
a(
ng-click="changeCurrency(currency)",
) {{currency}} ({{value['symbol']}})
.row(ng-if="plansVariant == 'more-details' && planCode == 'student-annual' || plansVariant == 'more-details' && planCode == 'student-monthly'")
.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 {{plans[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 {{plans[currencyCode]['symbol']}}{{normalPrice}}
.row
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
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(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-options="country.code as country.name for country in countries",
ng-selected="{{country.code == data.country}}"
)
option(value='', disabled, selected) #{translate("country")}
option(value='-') --------------
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 {{plans[currencyCode]['symbol']}}{{price.next.total}}
span ({{plans[currencyCode]['symbol']}}{{price.next.subtotal}} + {{plans[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
|  
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")}
.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}")
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.