Header carrier integration code

Header.js

import React from 'react';
import { connect } from 'react-redux';
import { NavLink, Link } from 'react-router-dom';
import { bindActionCreators, compose } from 'redux';
import { get as _get, pick as _pick } from 'lodash';
import Cookie from 'universal-cookie';
import ReactModal from 'react-modal';
import { translate } from 'react-i18next';

import createHistory from 'history/createBrowserHistory';
import Search from '../../components/Search';
import {
  clearSuggestion,
  clearSearchResults,
  onToggleSearch
} from '../../modules/search/search.actions';
import './Header.css';
import { isServer, config, DIRT_OPTIONS } from '../../services/environment';
import { logout } from '../../modules/logout/logout.actions';
import { setToken } from '../../modules/token/token.actions';
import {
  getOfferId,
  getOffer,
  activateOffer
} from '../../modules/offer/offer.action';
import AuthComponent from '../../components/AuthComponent/AuthComponent';
import MenuDropDown from '../../components/MenuDropDown';
import PromoCode from '../PromoCode/PromoCode';
import MyPlan from '../../components/MyPlan';
import ViuLogo from '../../components/ViuLogo';
import UserPlaceholder from '../../components/UserPlaceholder';
import Loading from '../../components/Loading/Loading';
import * as Log from '../../services/log';
import { getSubscriptionData } from '../../modules/billing/billing.action';
import Toasts from '../Toastr';
import { addToast } from '../../modules/toasts/toasts.actions';
import {
  setFlavour,
  setLanguage
} from '../../modules/programming/programming.actions';
import { QueryStringToJSON } from '../../services/queryStringToJson';
import * as utilityService from '../../services/utilityService';
import { authenticate } from '../../modules/auth/auth.actions';
import * as googleTagManager from '../../services/googleTagManager';
import {
  fetchCategoryDetails,
  fetchCategories,
  emptyCategoryDetails
} from '../../modules/content/content.actions';
import { DEFAULT_CATEGORY_SLUG } from '../../components/Discover/DiscZover';

export class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      autModalActive: false,
      userNavDesktop: false,
      userNavMobile: false,
      numberOfCategoriesToShow: 0,
      myPlanModal: false,
      isActive: false,
      reactModal: false,
      promoModalActive: false,
      toggleLangBtn: false,
      showSuggesion: false
    };
    this.windowWidth = 1368;
  }

  componentDidMount() {
    document.addEventListener('keydown', this.closeModal, false);
    if (this.props.location && this.props.location.search) {
      const params = QueryStringToJSON(this.props.location.search);
      const dirt = _pick(params, DIRT_OPTIONS);
      if (dirt && dirt.msisdn) {
        window.sessionStorage.setItem('msisdn', JSON.stringify(dirt.msisdn));
      }
      if (dirt && dirt.isDirt) {
        window.sessionStorage.setItem('isDirt', JSON.stringify(dirt.isDirt));
      }
      if (dirt && dirt.offerid) {
        window.sessionStorage.setItem('offerid', JSON.stringify(dirt.offerid));
      }
      window.sessionStorage.setItem('dirt_option', JSON.stringify(dirt));
    }

    // check fallback language
    const { programming } = this.props;
    this.currentFlavour = _get(programming, 'currentFlavour', {});
    this.supportedLangs = _get(this.currentFlavour, 'supportedLanguages', []);
    Log.init();
    googleTagManager.init(this.props.auth.location.countryCode);
    this.cookie = new Cookie();

    this.fallbackLang();

    this.windowWidth = window.innerWidth;
    this.setNumberOfCategories();
    this.setSuggesionModal(this.supportedLangs.length);
    this.detectCarrier();
  }

  fallbackLang() {
    // Here checking browser language/fallback language, if preffered language is not available
    const { i18n } = this.props;
    if (window.localStorage) {
      if (window.localStorage.i18nextLng === 'id') {
        let prefItem = this.supportedLangs.filter(item => item.id === 'id');
        if (prefItem[0]) {
          i18n.changeLanguage('id');
          this.onLanguageChange(prefItem[0]);
        } else {
          i18n.changeLanguage('en');
          prefItem = this.supportedLangs.filter(item => item.id === 'en');
          this.onLanguageChange(prefItem[0]);
        }
      } else {
        i18n.changeLanguage('en');
        const prefItem = this.supportedLangs.filter(item => item.id === 'en');
        this.onLanguageChange(prefItem[0]);
      }
    }
  }

  setSuggesionModal(supportedLang) {
    this.langFlag = this.cookie.get('lang_flag');
    if (supportedLang > 1 && this.langFlag === 'true') {
      this.setState({ showSuggesion: true });
    }
  }

  componentWillMount() {
    if (!isServer) {
      document.removeEventListener('keydown', this.closeModal, false);
    }
  }

  closeModal = e => {
    if (e.keyCode === 27) {
      if (this.props.isSearchVisible && e.target.className === 'txtsearch') {
        this.props.clearSearchResults();
        this.props.clearSuggestion();
        this.searchRefs.getWrappedInstance().searchInputRef.value = '';
        this.searchRefs.getWrappedInstance().searchInputRef.blur();
        this.props.onToggleSearch(false);
      }
      document.removeEventListener('click', this.handleOutsideClick, false);
    }
  };
  handleOutsideClick = e => {
    if (e.target.className !== 'c-sideNavOverlay') {
      return;
    }
    this.toggleMenu();
  };
  handleOutsideClickNav = e => {
    if (this.popup && this.popup.contains(e.target)) {
      return;
    }

    this.toggleNav();
  };
  toggleMenu = () => {
    this.setState(prevState => {
      const isMenuOpen = !prevState.isMenuOpen;
      const newOverlayDiv = document.createElement('div');
      const parentDivForOverlayDiv = document.querySelector('.c-innerScroll');

      if (isMenuOpen) {
        document.addEventListener('click', this.handleOutsideClick, false);
        parentDivForOverlayDiv.insertBefore(
          newOverlayDiv,
          parentDivForOverlayDiv.childNodes[0]
        );
        newOverlayDiv.classList.add('c-sideNavOverlay');
      } else {
        document.removeEventListener('click', this.handleOutsideClick, false);
        parentDivForOverlayDiv.removeChild(
          document.querySelector('.c-sideNavOverlay')
        );
      }

      return { isMenuOpen };
    });
  };
  toggleNav = () => {
    this.setState(prevState => {
      const userNavDesktop = !prevState.userNavDesktop;
      const userNavMobile = !prevState.userNavMobile;

      if (userNavDesktop) {
        document.addEventListener('click', this.handleOutsideClickNav, false);
      } else {
        document.removeEventListener(
          'click',
          this.handleOutsideClickNav,
          false
        );
      }
      return { userNavDesktop, userNavMobile };
    });
  };

  shouldShowRedeem() {
    const { auth } = this.props;
    return !(utilityService.getStatus() && auth.old.country.supported);
  }

  togglePromoCode() {
    this.setState({ promoModalActive: true, reactModal: false });
    Log.sendEvent({
      event_name: 'page_view',
      event_type: Log.LOG_CONSTANT.LOG_TYPE.PAGE_VIEW_LOG,
      log_name: Log.LOG_CONSTANT.LOG_NAME.REDEEMVOUCERCODE_POPUP
    });
  }

  toggleMyPlan(isMobile) {
    const { login, signup } = this.props;
    const vuserid = Object.keys(login).length
      ? login.user.userId
      : signup.user.userId;
    this.props.getSubscriptionData(vuserid);

    if (isMobile) this.toggleMenu();
    else this.toggleNav();
    this.setState({ myPlanModal: true, reactModal: false });
    Log.sendEvent({
      event_name: 'page_view',
      event_type: Log.LOG_CONSTANT.LOG_TYPE.PAGE_VIEW_LOG,
      log_name: Log.LOG_CONSTANT.LOG_NAME.MY_PLAN
    });
  }
  onHideModal = e => {
    e.preventDefault();
    this.setState({ autModalActive: false });
  };
  onHidePlanModal = () => {
    this.setState({ myPlanModal: false });
  };
  onHidePromoModal = () => {
    this.setState({ promoModalActive: false });
  };
  openAuth = e => {
    e.preventDefault();
    this.setState({ autModalActive: !this.state.autModalActive });
  };
  doLogout = e => {
    e.preventDefault();
    const { t } = this.props;
    this.props.doLogout().then(response => {
      this.props.getOfferId().then(offer => {
        if (offer && offer.id) {
          this.props.getOffer(offer.id);
        }
      });
      const { vuserid } = response;
      this.props.getSubscriptionData(vuserid);

      // show toast message for logout
      this.props.addToast({
        text: t('TOASTR_CONSTANTS.LOGOUT')
      });

      if (localStorage) {
        localStorage.removeItem('userIdType');
      } else {
        window.sessionStorage.removeItem('userIdType');
      }
    });
    this.setState({ autModalActive: false });
  };
  checkUser = () => {
    let identity = null;
    if (Object.keys(this.props.login).length !== 0 && this.props.login.user) {
      identity = this.props.login;
    }
    if (Object.keys(this.props.signup).length !== 0 && this.props.signup.user) {
      identity = this.props.signup;
    }
    if (identity) {
      const { jwtToken } = identity.user;
      this.props.onTokenUpdate(jwtToken);

      if (this.cookie) {
        this.cookie.set('user', identity, config.cookieOptions);
      }
      if (identity.user && identity.user.isShadowLogin) {
        return false;
      }
      return true;
    }
    return false;
  };

  clearUserCookies = () => {
    if (this.cookie) {
      this.cookie.remove('user', config.cookieOptions);
    }
  };

  clearSearchOnClick = () => {
    if (this.props.isSearchVisible) {
      setTimeout(() => {
        this.props.clearSearchResults();
        this.props.onToggleSearch(false);
      }, 200);
    }
  };

  renderNav() {
    const { categories, prefix } = this.props;
    let filteredCategories = categories.filter(
      category => category.id !== 'home'
    );

    if (!isServer) {
      filteredCategories = categories
        .filter(category => category.id !== 'home')
        .slice(0, this.state.numberOfCategoriesToShow);
    }

    return (
      <div className="nav__links">
        {filteredCategories.map(item => (
          <NavLink
            to={{
              pathname: `${prefix}/${item.slug}`,
              state: { shouldPlay: true }
            }}
            key={item.id}
            className="link__url"
            activeClassName="active"
            onClick={this.clearSearchOnClick}
          >
            {item.title}
          </NavLink>
        ))}
      </div>
    );
  }

  renderMobileNav() {
    const { categories, prefix, t } = this.props;
    const filteredCategories = categories.filter(
      category => category.id !== 'home'
    );
    let categoriesToShowClass = 'for--mobile';
    if (filteredCategories.length > this.state.numberOfCategoriesToShow) {
      categoriesToShowClass = '';
    }
    return (
      <div className={`c-sidebar__category , ${categoriesToShowClass}`}>
        {filteredCategories.map(item => (
          <Link
            to={{
              pathname: `${prefix}/${item.slug}`,
              state: { shouldPlay: true }
            }}
            key={item.id}
            className="link"
            onClick={() => {
              this.setState({ reactModal: false });
              this.clearSearchOnClick();
            }}
          >
            {item.title}
          </Link>
        ))}
        {this.props.login.user &&
          this.props.login.user.isShadowLogin &&
          !this.state.hideSidebarMyPlan && (
            <Link
              onClick={() => {
                this.toggleMyPlan(true);
              }}
              to={{}}
              className="link"
            >
              {t('header.myplan')}
            </Link>
          )}
      </div>
    );
  }

  setNumberOfCategories = () => {
    if (this.windowWidth >= 1366) {
      this.setState({ numberOfCategoriesToShow: 5 });
    } else if (this.windowWidth < 1366 && this.windowWidth >= 1024) {
      this.setState({ numberOfCategoriesToShow: 3 });
    }
  };
  hideSidebarMyPlan = () => {
    this.setState({ hideSidebarMyPlan: true });
  };

  toggleLanguage = () => {
    this.setState(state => ({ toggleLangBtn: !state.toggleLangBtn }));
  };

  renderUserDetails(userNavDesktop) {
    const { isSearchVisible, t } = this.props;
    const { isActive } = this.state;
    const userName =
      _get(this.props, 'login.user.userName', '') ||
      _get(this.props, 'login.userName', '');
    return (
      <div className="header__nav__s2">
        {/* This is a language change dropdown */}
        <div
          className={
            this.state.toggleLangBtn === true
              ? 'language__btn open-dd'
              : 'language__btn'
          }
        >
          <button onClick={() => this.toggleLanguage()}>
            <span>{this.currentLang.id.toUpperCase()}</span>
            <i className="icon viu-earth-globe" />
          </button>

          <div className="c-langModal">
            <span className="lang__title">{t('header.changeLanguage')}</span>
            <div className="lang__items">
              {this.supportedLangs.map(item => (
                <button
                  key={item.id}
                  onClick={() => this.onLanguageChange(item)}
                  className={
                    this.currentLang.label === item.label
                      ? 'btn-lang active'
                      : 'btn-lang'
                  }
                >
                  {item.label}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* This is a browse button that brings up the SEARCH COMPONENT */}
        <div className="browse__btn">
          <button onClick={this.toggleSearch}>
            <span>{t('header.search')}</span>
            {isSearchVisible && isActive ? (
              <i className="icon viu-close-button" />
            ) : (
              <i className="icon viu-search" />
            )}
          </button>
        </div>
        {this.props.isLoggedIn &&
        ((this.props.signup.user && !this.props.signup.user.isShadowLogin) ||
          (this.props.login.user && !this.props.login.user.isShadowLogin)) ? (
          <div
            className={userNavDesktop ? 'user__btn openmenu' : 'user__btn'}
            ref={node => {
              this.popup = node;
            }}
          >
            <button className="usersidebar" onClick={this.toggleNav}>
              {this.props.login.userPictureUrl ? (
                <img
                  src={this.props.login.userPictureUrl}
                  alt={userName || 'user'}
                  className="user--pic"
                />
              ) : (
                <UserPlaceholder opacity=".4" />
              )}
            </button>
            <div className="c-popup c-usersidebar">
              <div className="user__image">
                {this.props.login.userPictureUrl ? (
                  <img
                    src={this.props.login.userPictureUrl}
                    alt={userName || 'user'}
                  />
                ) : (
                  <UserPlaceholder size="large" color="#CBCBCB" />
                )}
              </div>
              {userName !== '' && (
                <div className="user__name">
                  <h5>{userName}</h5>
                </div>
              )}
              <div className="user__links">
                <button
                  onClick={() => {
                    this.toggleMyPlan(false);
                  }}
                  className="link"
                >
                  {!this.state.hideSidebarMyPlan
                    ? this.hideSidebarMyPlan()
                    : null}
                  {/* {STRING_CONSTANTS.MY_PLAN} */}
                  {t('header.myplan')}
                </button>
                <button className="link" onClick={this.doLogout}>
                  {t('header.signout')}
                </button>
              </div>
            </div>
          </div>
        ) : (
          <div className="sign__btn">
            <button onClick={this.openAuth}>
              {t('header.signin')}/{t('header.signup')}
            </button>
          </div>
        )}
        {this.state.myPlanModal ? (
          <MyPlan onHideModal={this.onHidePlanModal} />
        ) : null}
      </div>
    );
  }

  toggleSearch = () => {
    const { isSearchVisible } = this.props;
    this.props.onToggleSearch(!isSearchVisible, false);
    if (!isSearchVisible) {
      setTimeout(() => {
        this.searchRefs.getWrappedInstance().searchInputRef.focus();
      }, 100);
    }
    this.props.clearSearchResults();
    this.props.clearSuggestion();
  };

  toggleIcon = flag => {
    this.setState({ isActive: flag });
  };

  onLanguageChange = item => {
    const {
      i18n,
      programming: { currentCountry, currentFlavour, currentLanguage }
    } = this.props;
    this.props.setLanguage(item);
    this.cookie = new Cookie();
    this.cookie.set('pref_lang', item.id, config.cookieOptions);
    i18n.changeLanguage(item.id);
    const authParams = {
      languageid: item.id,
      contentFlavour: currentFlavour.id,
      contentCountry: currentCountry.id
    };

    Log.sendEvent({
      event_name: 'language_changed',
      event_type: Log.LOG_CONSTANT.LOG_TYPE.EVENT_LOG,
      log_name: Log.LOG_CONSTANT.LOG_NAME.LANGUAGE_CHANGE,
      previous_language: currentLanguage.id,
      selected_language: item.id
    });

    if (this.cookie.get('user')) {
      const { user } = this.cookie.get('user');
      authParams.userid = user.userName;
      authParams.vuserid = user.userId;
    }
    (async () => {
      this.props.emptyCategoryDetails();
      await this.props.authenticate(authParams);
      await this.props.fetchCategories();
      const collectionDetailsToFetch = this.props.categories.find(
        category => category.slug === DEFAULT_CATEGORY_SLUG
      );
      if (
        collectionDetailsToFetch &&
        Object.keys(collectionDetailsToFetch).length
      ) {
        await this.props.fetchCategoryDetails(
          collectionDetailsToFetch.id,
          collectionDetailsToFetch.slug
        );
      }
      const history = createHistory();
      history.push(
        `/ott/${currentCountry.id}/${item.id}/${this.currentFlavour.id}`
      );
    })();
  };
  onFlavourChange = item => {
    const { programming: { currentCountry, currentLanguage } } = this.props;
    this.props.setFlavour(item);
    const authParams = {
      languageid: item.defaultLanguage,
      contentFlavour: item.id,
      contentCountry: currentCountry.id
    };
    if (this.cookie.get('user')) {
      const { user } = this.cookie.get('user');
      authParams.userid = user.userName;
      authParams.vuserid = user.userId;
    }
    (async () => {
      this.props.emptyCategoryDetails();
      await this.props.authenticate(authParams);
      await this.props.fetchCategories();
      const collectionDetailsToFetch = this.props.categories.find(
        category => category.slug === DEFAULT_CATEGORY_SLUG
      );
      if (
        collectionDetailsToFetch &&
        Object.keys(collectionDetailsToFetch).length
      ) {
        await this.props.fetchCategoryDetails(
          collectionDetailsToFetch.id,
          collectionDetailsToFetch.slug
        );
      }
      const history = createHistory();

      history.push(
        `/ott/${currentCountry.id}/${currentLanguage.id}/${item.id}`
      );
    })();
  };

  closeSuggesion = () => {
    this.setState({ showSuggesion: false });
    this.cookie = new Cookie();
    this.cookie.set('lang_flag', false, config.cookieOptions);
  };

  selectOption = supportedLang => {
    this.setState({ showSuggesion: false });
    this.cookie = new Cookie();
    this.cookie.set('lang_flag', false, config.cookieOptions);
    this.prefLang = this.cookie.get('pref_lang');
    supportedLang.forEach(item => {
      if (item.id !== this.prefLang) {
        this.onLanguageChange(item);
      }
    });
  };

  /*
    Look for billing hash in auth

  */

  // isUserActiveOnOtherOffer() {
  //   const { auth } = this.props;
  //   let isUserActiveOnOffer = null;
  //   if (auth && auth.billing) {
  //     const { billing } = auth;
  //     if (billing.status !== 'ACTIVE') {
  //       isUserActiveOnOffer = false;
  //     } else {
  //       isUserActiveOnOffer = true;
  //     }
  //   }
  //   return isUserActiveOnOffer;
  // }

  detectCarrier() {
    const { auth } = this.props;
    if (auth && auth.billing) {
      const { billing } = auth;
      if (
        billing.status !== 'ACTIVE' &&
        (billing.partner === 'Telkomsel' || billing.partner === 'Hutch')
      ) {
        console.info('User is not active on any other offer');
        console.info('Partner Detected');
      } else {
        /*
          1. Show user welcome Pop#2 which disappears after 5s
          2. Initiate the signup/signin flow by showing the pop up
          3. Tell user that he/she is active on another offer & to change plan contact [email protected]
        */
      }
    }
  }

  render() {
    const {
      autModalActive,
      userNavDesktop,
      userNavMobile,
      reactModal,
      promoModalActive,
      showSuggesion
    } = this.state;
    const {
      isCategoryFetching,
      prefix,
      programming,
      isLoading,
      isSearchVisible,
      auth
    } = this.props;

    const userName =
      _get(this.props, 'login.user.userName', '') ||
      _get(this.props, 'login.userName', '') ||
      _get(this.props, 'signup.userid', '');

    this.flavours = _get(programming, 'currentCountry.flavours', []);
    this.currentFlavour = _get(programming, 'currentFlavour', {});
    this.supportedLangs = _get(this.currentFlavour, 'supportedLanguages', []);
    this.currentLang = _get(programming, 'currentLanguage', {});
    this.currentCountry = _get(programming, 'currentCountry', {});
    const countryLocation = _get(auth, 'location', {});

    const countryId = this.currentCountry.id;
    const showBlogLink =
      countryLocation &&
      (countryLocation.countryCode === config.countryCodes.ID ||
        countryLocation.countryCode === config.countryCodes.MY);

    if (this.props.logout.userId) {
      const jwToken = this.props.logout.jwtToken;
      this.props.onTokenUpdate(jwToken);
      this.clearUserCookies();
    }
    const { t } = this.props;

    return (
      <div className="c-page-header">
        <Loading isLoading={isLoading} />
        <Toasts />
        {/* modal to ask do you want to continue with  the language which is available on URL or preferred language  */}
        {showSuggesion && (
          <div className="c-lang-toast">
            <div className="left--msg">
              You are browsing Viu in {this.currentLang.label}
            </div>
            <div className="right--msg">
              <button className="lang--btn" onClick={this.closeSuggesion}>
                Got it
              </button>
              <button
                className="lang--btn"
                onClick={() => this.selectOption(this.supportedLangs)}
              >
                Undo
              </button>
            </div>
          </div>
        )}
        <div>
          <div className="header__nav clearfix">
            <div className="header__nav__s1">
              <div className={reactModal ? 'nav__btn openmenu' : 'nav__btn'}>
                <button
                  className="menusidebar"
                  onClick={() => this.setState({ reactModal: !reactModal })}
                />
                <ReactModal
                  isOpen={reactModal}
                  overlayClassName="c-sideNavOverlay"
                  className="c-popup c-sidebar"
                  shouldCloseOnOverlayClick
                  onRequestClose={() => this.setState({ reactModal: false })}
                  shouldCloseOnEsc
                  role="dialog"
                  parentSelector={() => document.querySelector('.nav__btn')}
                  ariaHideApp={false}
                >
                  <div className="c-innerPopup">
                    <div className="c-sidebar__dd user--prof for--mobile">
                      <div className="user--info clearfix">
                        <div className="user-pic clearfix">
                          <div className="clearfix">
                            {this.props.login.userPictureUrl ? (
                              <img
                                src={this.props.login.userPictureUrl}
                                alt={userName || 'user'}
                                className="user--pic"
                              />
                            ) : (
                              <UserPlaceholder color="#CBCBCB" />
                            )}
                          </div>
                        </div>
                        {this.checkUser() ? (
                          <div
                            className={
                              userNavMobile
                                ? 'user--nav clearfix user--nav--dd ddactive'
                                : 'user--nav clearfix user--nav--dd'
                            }
                          >
                            <button
                              className="user__login__st"
                              onClick={this.toggleNav}
                            >
                              {userName}
                              <i className="icon viu-angle-down" />
                            </button>
                            <div className="user--nav-links">
                              {/* <Link to="/profile" className="link">
                            Edit profile
                          </Link> */}
                              {/* <Link to="/plan" className="link">
                            My Plan
                          </Link> */}
                              <button
                                onClick={() => {
                                  this.toggleMyPlan(true);
                                }}
                                className="link"
                              >
                                {t('header.myplan')}
                              </button>
                              <button className="link" onClick={this.doLogout}>
                                {t('header.signout')}
                              </button>
                              {/* <Trans i18nKey="billingComponent.packagesValidity">
                                Get Premium for {{ userName }} days
                              </Trans> */}
                            </div>
                          </div>
                        ) : (
                          <div className="user--nav clearfix">
                            <button
                              className="user__login__st"
                              onClick={e => {
                                this.setState({ reactModal: false });
                                this.openAuth(e);
                              }}
                            >
                              {t('header.signin')} / {t('header.signup')}
                            </button>
                            {/* <Trans i18nKey="billingComponent.packagesValidity">
                              Get Premium for {{ userName }} days
                            </Trans> */}
                          </div>
                        )}
                      </div>
                    </div>

                    <div className="clearfix menutop">
                      {this.supportedLangs.length !== 1 ? (
                        <MenuDropDown
                          label={t('header.supportedLangs')}
                          listData={this.supportedLangs}
                          selectedItem={this.currentLang}
                          onItemSelect={this.onLanguageChange}
                        />
                      ) : null}

                      {this.flavours.length !== 1 ? (
                        <MenuDropDown
                          label={t('header.contentPreferences')}
                          listData={this.flavours}
                          selectedItem={this.currentFlavour}
                          onItemSelect={this.onFlavourChange}
                        />
                      ) : null}
                    </div>

                    <div className="clearfix menubottom">
                      <div className="c-sidebar__menulink">
                        {!isCategoryFetching && this.renderMobileNav()}
                        {this.shouldShowRedeem() && (
                          <Link
                            onClick={() => {
                              this.togglePromoCode();
                            }}
                            to={{}}
                            className="link"
                          >
                            {t('header.redeem')}
                          </Link>
                        )}

                        <Link
                          onClick={() => {
                            this.setState({ reactModal: false });
                            this.clearSearchOnClick();
                          }}
                          className="link"
                          to={`${prefix}/faq`}
                        >
                          {t('header.faq')}
                        </Link>
                      </div>

                      <div className="c-sidebar__menulink for--mobile">
                        <a
                          href={`${config.appsFlyerUrl}&c=VIU_WAP_APP_${countryId}&af_web_dp=https%3A%2F%2Fviu.com%3Futm_source%3DVIU_WAP%26utm_medium%3DWAP%26utm_campaign%3DVIU_WAP_APP_${countryId}`}
                          className="link"
                        >
                          {t('header.applications')}
                        </a>
                      </div>

                      <div className="c-sidebar__menulink dl--app  for--desktop">
                        <span className="c-menutitle">
                          {t('header.applications')}
                        </span>
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href="https://play.google.com/store/apps/details?id=com.vuclip.viu"
                          className="link link__forapp"
                        >
                          <i className="icon viu-playstore" />
                          {t('header.googleStore')}
                        </a>
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href="https://itunes.apple.com/in/app/viu-download-movies-tv-shows/id1044543328?mt=8"
                          className="link link__forapp"
                        >
                          <i className="icon viu-apple" />
                          {t('header.appStore')}
                        </a>
                      </div>

                      <div className="c-sidebar__social">
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href="https://www.facebook.com/VuclipGlobal/"
                        >
                          <i className="icon viu-facebook-official" />
                        </a>
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href="https://www.youtube.com/channel/UCsY5_QhqsVwcDC_1HFUyJpQ"
                        >
                          <i className="icon viu-youtube-alt" />
                        </a>
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href="https://twitter.com/vuclipinc"
                        >
                          <i className="icon viu-twitter" />
                        </a>
                      </div>

                      <div className="c-sidebar__footernav clearfix">
                        <Link
                          onClick={() => this.setState({ reactModal: false })}
                          className="link"
                          to={`${prefix}/terms`}
                        >
                          {t('header.terms')}
                        </Link>
                        <Link
                          onClick={() => this.setState({ reactModal: false })}
                          className="link"
                          to={`${prefix}/privacy`}
                        >
                          Privacy Policy
                        </Link>

                        {countryLocation.countryCode ===
                        config.countryCodes.MY ? (
                          <Link
                            onClick={() =>
                              this.setState({
                                reactModal: false
                              })}
                            className="link"
                            to={`${prefix}/privasi`}
                          >
                            Polisi Privasi
                          </Link>
                        ) : null}

                        {countryId === 'id' ? (
                          <Link
                            onClick={() =>
                              this.setState({
                                reactModal: false
                              })}
                            className="link"
                            to={`${prefix}/kebijakan_privasi`}
                          >
                            Kebijakan Privasi
                          </Link>
                        ) : null}

                        {showBlogLink && (
                          <Link
                            className="link blog-link"
                            to={`https://www.viu.com/ott/${countryLocation.countryCode.toLowerCase()}/articles/`}
                            target="_blank"
                          >
                            {t('header.blog')}
                          </Link>
                        )}
                      </div>
                      <div className="c-sidebar__footernav clearfix margin10-bottom">
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href="http://www.vuclip.com/"
                        >
                          {t('header.about')}
                        </a>
                        {/* <a rel="noopener noreferrer" target="_blank" href="/">
                      Blog
                    </a> */}
                        <a
                          rel="noopener noreferrer"
                          target="_blank"
                          href="http://www.vuclip.com/culture.php"
                        >
                          {t('header.culture')}
                        </a>
                      </div>

                      <div className="c-sidebar__footerinfo">
                        &copy; {t('header.copyright')}
                      </div>
                    </div>
                  </div>
                </ReactModal>
              </div>
              <div className="nav__logo">
                <Link
                  id="logo"
                  to={{
                    pathname: `${prefix}/`,
                    state: { shouldPlay: true, fromTitle: true }
                  }}
                >
                  <ViuLogo />
                </Link>
              </div>
              {!isCategoryFetching && this.renderNav()}
            </div>

            {this.renderUserDetails(userNavDesktop)}
          </div>
        </div>
        {isSearchVisible && (
          <Search
            setIcon={this.toggleIcon}
            ref={element => {
              this.searchRefs = element;
            }}
          />
        )}
        {autModalActive ? (
          <AuthComponent onHideModal={this.onHideModal} />
        ) : null}
        {promoModalActive && <PromoCode onHideModal={this.onHidePromoModal} />}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  categories: state.content.categories,
  isCategoryFetching: state.content.isCategoryFetching,
  login: state.login,
  logout: state.logout,
  signup: state.signup,
  programming: state.programming,
  auth: state.auth,
  isLoggedIn: state.isuser,
  isLoading: state.isLoading,
  isSearchVisible: state.search.isVisible,
  subscriptionData: state.billing.subscriptionData,
  currentCollectionSlug: state.content.currentCollectionSlug
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      doLogout: logout,
      onTokenUpdate: setToken,
      clearSuggestion,
      clearSearchResults,
      onToggleSearch,
      getSubscriptionData,
      addToast,
      getOfferId,
      getOffer,
      setFlavour,
      setLanguage,
      authenticate,
      fetchCategoryDetails,
      fetchCategories,
      emptyCategoryDetails,
      activateOffer
    },
    dispatch
  );

export default compose(
  translate(),
  connect(mapStateToProps, mapDispatchToProps)
)(Header);