|
@@ -232,229 +232,3 @@ App.factory('MultiCurrencyPricing', function () {
|
|
|
},
|
|
},
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
-
|
|
|
|
|
-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()
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- const 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
|
|
|
|
|
- )}`
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-)
|
|
|