Merge branch 'fix-roi-calculator-bugs' into 'master'

Fixed Roi calculator not updating when pressing the up and down arrows in the input

See merge request !6456

source/javascripts/roi-calculator.js

 (function() {
+  const GITLAB_EEP_SUBSCRIPTION_PRICE = 199;
+
   var paramsFetcher = function() {
     var regex = /[?&]([^=#]+)=([^&#]*)/g;
     var params = {};
@@ -41,6 +43,7 @@
       this.$costDeveloperInput = $('.js-cost-per-developer');
       this.$savingsText = $('.savings-text h3');
       this.$copyLinkButton = document.querySelector('.js-copy-link');
+      this.$totalSubscription = $('.total-subscription');
       this.params = params;
       this.bindEvents.call(this);
@@ -52,8 +55,8 @@
     RoiCalculator.prototype.bindEvents = function() {
       this.$featuresTableInputs.on('click', this.calculateSavings.bind(this));
-      this.$teamSizeInput.on('keyup', this.calculateSavings.bind(this));
-      this.$costDeveloperInput.on('keyup', this.calculateSavings.bind(this));
+      this.$teamSizeInput.on('keyup input', this.calculateSavings.bind(this));
+      this.$costDeveloperInput.on('keyup input', this.calculateSavings.bind(this));
     }
     RoiCalculator.prototype.calculateSavings = function() {
@@ -75,6 +78,8 @@
       });
       totalSavings = totalSavings *= teamSize;
       this.$savingsText.text(formatAmount(totalSavings.toFixed(2)) + ' potential savings per year');
+      this.$totalSubscription.text('With a $199 per year per user GitLab Enterprise Edition Premium subscription ' +
+                                  '(' + formatAmount(GITLAB_EEP_SUBSCRIPTION_PRICE * teamSize) + ' total)');
       this.createUrl.call(this);
     }

source/roi/index.html.haml

@@ -37,8 +37,7 @@ extra_js:
             .savings-text
               %h3
                 Provide your team size, developer cost and select features to see your potential savings
-              %p
-                With a $199 per year per user GitLab Enterprise Edition Premium subscription
+              %p.total-subscription
             .link-block
               .text-center
                 %a.btn.btn-lg.btn-red.js-copy-link{ "data-clipboard-text": "" }