@kiwicom/smart-faq/src/SmartFAQApp.js

Smart FAQ

// @flow
/* eslint-disable jsx-a11y/no-static-element-interactions */

import * as React from 'react';
import css from 'styled-jsx/css';
import classNames from 'classnames';
import 'url-search-params-polyfill';
import InitIntl from '@kiwicom/nitro/lib/components/InitIntl';
import * as intlContext from '@kiwicom/nitro/lib/services/intl/context';

import Routes from './SmartFAQ/Routes';
import GlobalStyles from './SmartFAQ/GlobalStyles';
import CloseContext from './SmartFAQ/context/Close';
import { LanguageContext } from './SmartFAQ/context/Language';
import { UserContext } from './SmartFAQ/context/User';
import PageVariantContext from './SmartFAQ/context/PageVariant';
import BookingStateProvider from './SmartFAQ/context/BookingState';
import type { UserContextType } from './SmartFAQ/context/User';
import SearchStateProvider from './SmartFAQ/context/SearchState';
import SelectedBookingProvider from './SmartFAQ/context/SelectedBooking';
import ExtraInfoStateProvider from './SmartFAQ/context/ExtraInfoState';
import Emergencies from './SmartFAQ/context/Emergencies';
import ErrorBoundary from './SmartFAQ/common/ErrorBoundary';
import { EnterTracker, TimeTracker } from './shared/helpers/analytics/trackers';
import type { SmartFAQProps } from './types';
import MobileSafariScroll from './SmartFAQ/helpers/MobileSafariScroll';
import GuaranteeChatInfo from './shared/context/GuaranteeChatInfo';
import { langInfos } from './translations/langInfos';
import fallbackTranslations from './translations/enKeys.json';
import { setTracker } from './shared/cuckoo/tracker';

const style = function(theme) {
  return css`
    .smartFAQ {
      display: none;
      position: fixed;
      min-width: 480px;
      top: 0;
      bottom: 0;
      right: 0;
      background-color: ${theme.orbit.backgroundModal};
      font-family: ${theme.orbit.fontFamily};
    }
    .smartFAQ.open {
      display: block;
    }
    .smartFAQ * {
      box-sizing: border-box;
      font-family: ${theme.orbit.fontFamily};
    }
    @media only screen and (max-width: 901px) {
      .smartFAQ {
        min-width: 100%;
      }
    }
  `;
};

type State = {|
  showBooking: boolean,
  userContext: UserContextType,
|};

class SmartFAQApp extends React.PureComponent<SmartFAQProps, State> {
  static getDerivedStateFromProps(nextProps: SmartFAQProps) {
    if (nextProps.cuckoo) {
      setTracker(nextProps.cuckoo);
    }

    return {
      showBooking: !nextProps.openArticle,
      userContext: {
        user: nextProps.user,
        onLogin: nextProps.onLogin,
        onLogout: nextProps.onLogout,
        loginToken: nextProps.loginToken,
        simpleToken: nextProps.simpleToken,
        kwAuthToken: nextProps.kwAuthToken,
        brand: nextProps.brand,
      },
    };
  }

  constructor(props: SmartFAQProps) {
    super(props);

    this.state = {
      showBooking: !props.openArticle,
      userContext: {
        user: props.user,
        onLogin: props.onLogin,
        onLogout: props.onLogout,
        loginToken: props.loginToken,
        simpleToken: props.simpleToken,
        kwAuthToken: props.kwAuthToken,
        brand: props.brand,
      },
    };

    if (props.cuckoo) {
      setTracker(props.cuckoo);
    }
  }

  handleClose = () => {
    this.props.onToggle(false);
  };

  renderApp() {
    const { isOpen, emergencies, language } = this.props;

    const langInfo = langInfos[language];
    const translations = this.props.translations
      ? this.props.translations
      : fallbackTranslations;

    const intl = { language: langInfo, translations };

    return (
      <div className={classNames('smartFAQ open')} data-test="SmartFAQHelp">
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1 shrink-to-fit=no"
        />
        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
        <link
          href="https://fonts.googleapis.com/css?family=Roboto"
          rel="stylesheet"
        />
        <ErrorBoundary>
          <InitIntl raw={intl}>
            {intl => (
              <intlContext.Provider value={intl}>
                <LanguageContext.Provider value={language}>
                  <CloseContext.Provider value={this.handleClose}>
                    <UserContext.Provider value={this.state.userContext}>
                      <SearchStateProvider>
                        <Emergencies.Provider value={emergencies}>
                          <SelectedBookingProvider bid={this.props.bid}>
                            <BookingStateProvider
                              onLogout={this.props.onLogout}
                              showBooking={this.state.showBooking}
                            >
                              <ExtraInfoStateProvider>
                                <GuaranteeChatInfo
                                  enableChat={this.props.enableChat}
                                  chatConfig={this.props.chatConfig}
                                >
                                  <PageVariantContext.Provider
                                    value={{ variant: 'sidebar' }}
                                  >
                                    <Routes
                                      isOpen={isOpen}
                                      onToggle={this.props.onToggle}
                                      openArticle={this.props.openArticle}
                                    />
                                    <GlobalStyles />
                                  </PageVariantContext.Provider>
                                </GuaranteeChatInfo>
                              </ExtraInfoStateProvider>
                            </BookingStateProvider>
                          </SelectedBookingProvider>
                        </Emergencies.Provider>
                      </SearchStateProvider>
                    </UserContext.Provider>
                  </CloseContext.Provider>
                </LanguageContext.Provider>
              </intlContext.Provider>
            )}
          </InitIntl>
        </ErrorBoundary>

        <style jsx global>
          {`
            body {
              overflow-y: ${isOpen ? 'hidden' : 'auto'};
            }
          `}
        </style>
        <MobileSafariScroll isOpen={isOpen} />
      </div>
    );
  }

  render() {
    if (typeof window !== 'undefined' && window.Raven) {
      return window.Raven.context(() => this.renderApp());
    }
    return this.renderApp();
  }
}

const isLoggedIn = props =>
  !!props.user || !!props.simpleToken || !!props.kwAuthToken;

const EnterTrackedApp = EnterTracker(SmartFAQApp, 'smartFAQ', props => ({
  action: 'clickOnHelp',
  loggedIn: isLoggedIn(props),
}));

const TimeTrackedApp = TimeTracker(EnterTrackedApp, 'smartFAQ', props => ({
  action: 'close',
  loggedIn: isLoggedIn(props),
}));

if (typeof window !== 'undefined') {
  window.SmartFAQApp = TimeTrackedApp;
}

export default TimeTrackedApp;