overleaf/services/web/frontend/js/main/plans.js
Jakob Ackermann 59d83c4b88 Merge pull request #5117 from overleaf/jpa-plans-de-ng
[web] de-ng plans page

GitOrigin-RevId: b902b10b45ab3fd46e71545c94f65e8f079c4564
2021-09-23 08:03:23 +00:00

460 lines
10 KiB
JavaScript

/* eslint-disable
camelcase,
max-len
*/
import App from '../base'
import getMeta from '../utils/meta'
App.factory('MultiCurrencyPricing', function () {
const currencyCode = getMeta('ol-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
) {
$scope.plans = MultiCurrencyPricing.plans
$scope.currencyCode = MultiCurrencyPricing.currencyCode
$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_free_trial_7_days`
}
}
$scope.getPersonalPlanCode = function () {
const { view } = $scope.ui
if (view === 'annual') {
return 'paid-personal-annual'
} else {
return `paid-personal_free_trial_7_days`
}
}
$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
function switchEvent(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 = getMeta('ol-groupPlans')
let currency = 'USD'
const recomendedCurrency = getMeta('ol-recomendedCurrency')
if (['USD', 'GBP', 'EUR'].includes(recomendedCurrency)) {
currency = recomendedCurrency
}
// default selected
$scope.selected = {
plan_code: 'collaborator',
currency,
size: '10',
usage: 'enterprise',
}
// 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 () {
const { 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
)}`
}
}
)