overleaf/services/web/frontend/js/main/plans.js

/* 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'
        },
        collaborator: {
          monthly: '$15',
          annual: '$180'
        },
        professional: {
          monthly: '$30',
          annual: '$360'
        }
      },

      EUR: {
        symbol: '€',
        student: {
          monthly: '€7',
          annual: '€70'
        },
        collaborator: {
          monthly: '€14',
          annual: '€168'
        },
        professional: {
          monthly: '€28',
          annual: '€336'
        }
      },

      GBP: {
        symbol: '£',
        student: {
          monthly: '£6',
          annual: '£60'
        },
        collaborator: {
          monthly: '£12',
          annual: '£144'
        },
        professional: {
          monthly: '£24',
          annual: '£288'
        }
      },

      SEK: {
        symbol: 'kr',
        student: {
          monthly: '60 kr',
          annual: '600 kr'
        },
        collaborator: {
          monthly: '110 kr',
          annual: '1320 kr'
        },
        professional: {
          monthly: '220 kr',
          annual: '2640 kr'
        }
      },
      CAD: {
        symbol: '$',
        student: {
          monthly: '$9',
          annual: '$90'
        },
        collaborator: {
          monthly: '$17',
          annual: '$204'
        },
        professional: {
          monthly: '$34',
          annual: '$408'
        }
      },

      NOK: {
        symbol: 'kr',
        student: {
          monthly: '60 kr',
          annual: '600 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'
        },
        collaborator: {
          monthly: '90 kr',
          annual: '1080 kr'
        },
        professional: {
          monthly: '180 kr',
          annual: '2160 kr'
        }
      },

      AUD: {
        symbol: '$',
        student: {
          monthly: '$10',
          annual: '$100'
        },
        collaborator: {
          monthly: '$18',
          annual: '$216'
        },
        professional: {
          monthly: '$35',
          annual: '$420'
        }
      },

      NZD: {
        symbol: '$',
        student: {
          monthly: '$10',
          annual: '$100'
        },
        collaborator: {
          monthly: '$18',
          annual: '$216'
        },
        professional: {
          monthly: '$35',
          annual: '$420'
        }
      },

      CHF: {
        symbol: 'Fr',
        student: {
          monthly: 'Fr 8',
          annual: 'Fr 80'
        },
        collaborator: {
          monthly: 'Fr 15',
          annual: 'Fr 180'
        },
        professional: {
          monthly: 'Fr 30',
          annual: 'Fr 360'
        }
      },

      SGD: {
        symbol: '$',
        student: {
          monthly: '$12',
          annual: '$120'
        },
        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.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
    )}`
  }
})