overleaf/services/web/frontend/js/main/plans.js
Jessica Lawshe 2fca78eaf0 Merge pull request #3896 from overleaf/revert-3834-tm-meta-tags-billing
Revert "[views] migrate subscription templates to meta tags"

GitOrigin-RevId: 8ab3dae6e3aa359b6d7aa69df70a1b1eb2405dfd
2021-04-09 02:05:33 +00:00

463 lines
10 KiB
JavaScript

/* eslint-disable
camelcase,
max-len
*/
import App from '../base'
App.factory('MultiCurrencyPricing', function() {
const currencyCode = window.recomendedCurrency
return {
currencyCode,
plans: {
USD: {
symbol: '$',
student: {
monthly: '$8',
annual: '$80'
},
personal: {
monthly: '$10',
annual: '$120'
},
collaborator: {
monthly: '$15',
annual: '$180'
},
professional: {
monthly: '$30',
annual: '$360'
}
},
EUR: {
symbol: '€',
student: {
monthly: '€7',
annual: '€70'
},
personal: {
monthly: '€9',
annual: '€108'
},
collaborator: {
monthly: '€14',
annual: '€168'
},
professional: {
monthly: '€28',
annual: '€336'
}
},
GBP: {
symbol: '£',
student: {
monthly: '£6',
annual: '£60'
},
personal: {
monthly: '£8',
annual: '£96'
},
collaborator: {
monthly: '£12',
annual: '£144'
},
professional: {
monthly: '£24',
annual: '£288'
}
},
SEK: {
symbol: 'kr',
student: {
monthly: '60 kr',
annual: '600 kr'
},
personal: {
monthly: '73 kr',
annual: '876 kr'
},
collaborator: {
monthly: '110 kr',
annual: '1320 kr'
},
professional: {
monthly: '220 kr',
annual: '2640 kr'
}
},
CAD: {
symbol: '$',
student: {
monthly: '$9',
annual: '$90'
},
personal: {
monthly: '$11',
annual: '$132'
},
collaborator: {
monthly: '$17',
annual: '$204'
},
professional: {
monthly: '$34',
annual: '$408'
}
},
NOK: {
symbol: 'kr',
student: {
monthly: '60 kr',
annual: '600 kr'
},
personal: {
monthly: '73 kr',
annual: '876 kr'
},
collaborator: {
monthly: '110 kr',
annual: '1320 kr'
},
professional: {
monthly: '220 kr',
annual: '2640 kr'
}
},
DKK: {
symbol: 'kr',
student: {
monthly: '50 kr',
annual: '500 kr'
},
personal: {
monthly: '60 kr',
annual: '720 kr'
},
collaborator: {
monthly: '90 kr',
annual: '1080 kr'
},
professional: {
monthly: '180 kr',
annual: '2160 kr'
}
},
AUD: {
symbol: '$',
student: {
monthly: '$10',
annual: '$100'
},
personal: {
monthly: '$12',
annual: '$144'
},
collaborator: {
monthly: '$18',
annual: '$216'
},
professional: {
monthly: '$35',
annual: '$420'
}
},
NZD: {
symbol: '$',
student: {
monthly: '$10',
annual: '$100'
},
personal: {
monthly: '$12',
annual: '$144'
},
collaborator: {
monthly: '$18',
annual: '$216'
},
professional: {
monthly: '$35',
annual: '$420'
}
},
CHF: {
symbol: 'Fr',
student: {
monthly: 'Fr 8',
annual: 'Fr 80'
},
personal: {
monthly: 'Fr 10',
annual: 'Fr 120'
},
collaborator: {
monthly: 'Fr 15',
annual: 'Fr 180'
},
professional: {
monthly: 'Fr 30',
annual: 'Fr 360'
}
},
SGD: {
symbol: '$',
student: {
monthly: '$12',
annual: '$120'
},
personal: {
monthly: '$13',
annual: '$156'
},
collaborator: {
monthly: '$20',
annual: '$240'
},
professional: {
monthly: '$40',
annual: '$480'
}
}
}
}
})
App.controller('PlansController', function(
$scope,
$modal,
eventTracking,
MultiCurrencyPricing,
$http,
$filter,
$location
) {
let switchEvent
$scope.plans = MultiCurrencyPricing.plans
$scope.currencyCode = MultiCurrencyPricing.currencyCode
$scope.trial_len = 7
$scope.planQueryString = '_free_trial_7_days'
$scope.ui = { view: 'monthly' }
$scope.changeCurreny = function(e, newCurrency) {
e.preventDefault()
$scope.currencyCode = newCurrency
}
// because ternary logic in angular bindings is hard
$scope.getCollaboratorPlanCode = function() {
const { view } = $scope.ui
if (view === 'annual') {
return 'collaborator-annual'
} else {
return `collaborator${$scope.planQueryString}`
}
}
$scope.getPersonalPlanCode = function() {
const { view } = $scope.ui
if (view === 'annual') {
return 'paid-personal-annual'
} else {
return `paid-personal${$scope.planQueryString}`
}
}
$scope.signUpNowClicked = function(plan, location) {
if ($scope.ui.view === 'annual') {
plan = `${plan}_annual`
}
plan = eventLabel(plan, location)
eventTracking.sendMB('plans-page-start-trial')
eventTracking.send('subscription-funnel', 'sign_up_now_button', plan)
}
$scope.switchToMonthly = function(e, location) {
const uiView = 'monthly'
switchEvent(e, uiView + '-prices', location)
$scope.ui.view = uiView
}
$scope.switchToStudent = function(e, location) {
const uiView = 'student'
switchEvent(e, uiView + '-prices', location)
$scope.ui.view = uiView
}
$scope.switchToAnnual = function(e, location) {
const uiView = 'annual'
switchEvent(e, uiView + '-prices', location)
$scope.ui.view = uiView
}
$scope.openGroupPlanModal = function() {
const path = `${window.location.pathname}${window.location.search}`
history.replaceState(null, document.title, path + '#groups')
$modal
.open({
templateUrl: 'groupPlanModalPurchaseTemplate',
controller: 'GroupPlansModalPurchaseController'
})
.result.finally(() =>
history.replaceState(null, document.title, window.location.pathname)
)
eventTracking.send(
'subscription-funnel',
'plans-page',
'group-inquiry-potential'
)
}
if ($location.hash() === 'groups') {
$scope.openGroupPlanModal()
}
var eventLabel = (label, location) => label
switchEvent = function(e, label, location) {
e.preventDefault()
const gaLabel = eventLabel(label, location)
eventTracking.send('subscription-funnel', 'plans-page', gaLabel)
}
})
App.controller('GroupPlansModalPurchaseController', function(
$scope,
$modal,
$location,
$httpParamSerializer
) {
$scope.options = {
plan_codes: [
{
display: 'Collaborator',
code: 'collaborator'
},
{
display: 'Professional',
code: 'professional'
}
],
currencies: [
{
display: 'USD ($)',
code: 'USD'
},
{
display: 'GBP (£)',
code: 'GBP'
},
{
display: 'EUR (€)',
code: 'EUR'
}
],
currencySymbols: {
USD: '$',
EUR: '€',
GBP: '£'
},
sizes: [2, 3, 4, 5, 10, 20, 50],
usages: [
{
display: 'Enterprise',
code: 'enterprise'
},
{
display: 'Educational',
code: 'educational'
}
]
}
$scope.prices = window.groupPlans
let currency = 'USD'
if (['USD', 'GBP', 'EUR'].includes(window.recomendedCurrency)) {
currency = window.recomendedCurrency
}
// default selected
$scope.selected = {
plan_code: 'collaborator',
currency,
size: '10',
usage: 'educational'
}
// selected via query
if ($location.search()) {
// usage
if ($location.search().usage) {
$scope.options.usages.forEach(usage => {
if (usage.code === $location.search().usage) {
$scope.selected.usage = usage.code
}
})
}
// plan
if ($location.search().plan) {
$scope.options.plan_codes.forEach(plan => {
if (plan.code === $location.search().plan) {
$scope.selected.plan_code = plan.code
}
})
}
// number
if ($location.search().number) {
// $location.search().number is a string,
// but $scope.options.sizes are numbers
// and $scope.selected.size is a string
const groupCount = parseInt($location.search().number, 10)
if ($scope.options.sizes.indexOf(groupCount) !== -1) {
$scope.selected.size = $location.search().number
}
}
// currency
if ($location.search().currency) {
$scope.options.currencies.forEach(currency => {
if (currency.code === $location.search().currency) {
$scope.selected.currency = currency.code
}
})
}
}
$scope.recalculatePrice = function() {
let { usage, plan_code, currency, size } = $scope.selected
const price = $scope.prices[usage][plan_code][currency][size]
const currencySymbol = $scope.options.currencySymbols[currency]
$scope.displayPrice = `${currencySymbol}${price}`
}
$scope.$watch('selected', $scope.recalculatePrice, true)
$scope.recalculatePrice()
$scope.purchase = function() {
const { plan_code, size, usage, currency } = $scope.selected
const queryParams = {
planCode: `group_${plan_code}_${size}_${usage}`,
currency,
itm_campaign: 'groups'
}
if ($location.search().itm_content) {
queryParams.itm_content = $location.search().itm_content
}
window.location = `/user/subscription/new?${$httpParamSerializer(
queryParams
)}`
}
})