All files / ee/app/assets/javascripts/ee_trial_banner ee_trial_banner.js

86.21% Statements 25/29
58.33% Branches 7/12
100% Functions 8/8
85.71% Lines 24/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111          4x 4x 4x 4x   4x         4x 4x                                                                           4x     4x       4x           4x     4x               10x           10x           7x 7x 7x         4x 1x       3x 3x 3x 3x 3x        
import Cookies from 'js-cookie';
import { parseBoolean } from '~/lib/utils/common_utils';
 
export default class EETrialBanner {
  constructor($trialBanner) {
    this.COOKIE_KEY = 'show_ee_trial_banner';
    this.$trialBanner = $trialBanner;
    this.$mainNavbar = this.$trialBanner.siblings('.js-navbar-gitlab');
    this.$secondaryNavbar = this.$mainNavbar.siblings('.js-page-with-sidebar');
 
    this.licenseExpiresOn = new Date(this.$trialBanner.data('licenseExpiry'));
  }
 
  init() {
    // Wait for navbars to render before querying
    this.setCookies();
    this.$trialBanner.on('click', (e) => this.handleTrialBannerDismiss(e.target));
  }
 
  /**
   * Trial Expiring/Expired Banner has two stages;
   * 1. Show banner when user enters last 7 days of trial
   * 2. Show banner again when last 7 days are over and license has expired
   *
   * Stage 1:
   *    Banner is showed when `trial_license_message` is sent by backend
   *    for the first time (in `app/views/layouts/header/_default.html.haml`).
   *    Here, we perform following steps;
   *
   *    1. Set cookie `show_ee_trial_banner` with expiry same as license
   *    2. Set cookie value to `true`
   *    3. Show banner using `toggleBanner(true)`
   *
   *    At this stage, if user dismisses banner, we set cookie value to `false`
   *    and everytime page is initialized, we check for cookie existence as
   *    well as its value, and decide show/hide status of banner
   *
   * Stage 2:
   *    At this point, Cookie we had set earlier will be expired and
   *    backend will now send updated message in `trial_license_message`.
   *    Here, we perform following steps;
   *
   *    1. Check if cookie is defined (it'll not be defined as it is expired now)
   *    2. If cookie is gone, we re-set `show_ee_trial_banner` cookie but with
   *       expiry of 20 years
   *    3. Set cookie value to `true`
   *    4. Show banner using `toggleBanner(true)`, which now has updated message
   *
   *    At this stage, if user dismisses banner, we set cookie value to `false`
   *    and our existing logic of show/hide banner based on cookie value continues
   *    to work. And since, cookie is set to expire after 20 years, user won't be
   *    seeing banner again.
   */
  setCookies() {
    const today = new Date();
 
    // Check if Cookie is defined
    Eif (!Cookies.get(this.COOKIE_KEY)) {
      // Cookie was not defined, let's define with default value
 
      // Check if License is yet to expire
      Iif (today < this.licenseExpiresOn) {
        // License has not expired yet, we show initial banner of 7 days
        // with cookie set to validity same as license expiry
        Cookies.set(this.COOKIE_KEY, 'true', { expires: this.licenseExpiresOn });
      } else {
        // License is already expired so we show final Banner with cookie set to 20 years validity.
        Cookies.set(this.COOKIE_KEY, 'true', { expires: 7300 });
      }
 
      this.toggleBanner(true);
    } else {
      // Cookie was defined, let's read value and show/hide banner
      this.toggleBanner(parseBoolean(Cookies.get(this.COOKIE_KEY)));
    }
  }
 
  toggleMainNavbarMargin(state) {
    Iif (this.$mainNavbar.length) {
      this.$mainNavbar.toggleClass('has-trial-banner', state);
    }
  }
 
  toggleSecondaryNavbarMargin(state) {
    Iif (this.$secondaryNavbar.length) {
      this.$secondaryNavbar.toggleClass('has-trial-banner', state);
    }
  }
 
  toggleBanner(state) {
    this.$trialBanner.toggleClass('hidden', !state);
    this.toggleMainNavbarMargin(state);
    this.toggleSecondaryNavbarMargin(state);
  }
 
  handleTrialBannerDismiss(element) {
    // Check if a close button or an element inside it was clicked inside the parent alert component
    if (!element.closest('.js-close')) {
      return;
    }
 
    // A closed button has been clicked, dismiss the banner and handle setting the cookie
    this.toggleBanner(false);
    this.toggleMainNavbarMargin(false);
    this.toggleSecondaryNavbarMargin(false);
    Eif (Cookies.get(this.COOKIE_KEY)) {
      Cookies.set(this.COOKIE_KEY, 'false');
    }
  }
}