UNPKG

@kiwicom/smart-faq

Version:

180 lines (162 loc) 6.25 kB
// @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;