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

// @flow

import * as React from 'react';
import 'url-search-params-polyfill';
import InitIntl from '@kiwicom/nitro/lib/components/InitIntl';
import { Provider as IntlProvider } from '@kiwicom/nitro/lib/services/intl/context';
import { Provider as LogProvider } from '@kiwicom/nitro/lib/services/log/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, { VARIANTS } 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 MobileSafariScroll from './SmartFAQ/helpers/MobileSafariScroll';
import GuaranteeChatInfo from './shared/context/GuaranteeChatInfo';
import { langInfos } from './translations/langInfos';
import fallbackTranslations from './translations/enKeys.json';
import type { onLogin, onLogout, User } from './types';
import type { log } from './const/events';

type Props = {|
  isOpen: boolean,
  openArticle: ?string,
  translations: { [key: string]: string } | null,
  language: string,
  brand: string,
  user: ?User,
  bid: ?number,
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
  onToggle: (shouldBeOpened: boolean) => void,
  onLogin: onLogin,
  onLogout: onLogout,
  emergencies: string[],
  enableChat: boolean,
  chatConfig: { [key: string]: string } | null,
  log: log,
|};

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

class SmartFAQApp extends React.PureComponent<Props, State> {
  static getDerivedStateFromProps(nextProps: Props) {
    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: Props) {
    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,
      },
    };
  }

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

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

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

    const intl = { language: langInfo, translations };

    // Todo:
    // remove LanguageContext & replace it by Intl
    // remove FAQSection from BookingState & use FAQsByBooking
    // merge BookingState & SelectedBooking together

    return (
      <div className="smartFAQ" data-test="SmartFAQHelp">
        <ErrorBoundary>
          <InitIntl raw={intl}>
            {intl => (
              <IntlProvider value={intl}>
                <LogProvider value={{ log }}>
                  <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={VARIANTS.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>
                </LogProvider>
              </IntlProvider>
            )}
          </InitIntl>
        </ErrorBoundary>

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

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

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

export default SmartFAQApp;