@kiwicom/smart-faq
Version:
180 lines (162 loc) • 6.25 kB
JavaScript
// @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;