/* 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.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 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 )}` } } )