UNPKG

@kiwicom/smart-faq

Version:

Smart FAQ

556 lines (507 loc) 16 kB
// @flow /* eslint-disable import/no-extraneous-dependencies, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, no-console */ import React from 'react'; import ReactDOM from 'react-dom'; import Cookies from 'js-cookie'; import Raven from 'raven-js'; import { ThemeProvider } from 'styled-components'; import { defaultTokens } from '@kiwicom/orbit-design-tokens/lib/index'; import { getBrandTheme } from '@kiwicom/nitro/lib/records/Theme'; import SmartFAQApp from './SmartFAQApp'; import ContactFormChatApp from './ContactFormChatApp'; import CustomerSupportPhones from './CustomerSupportPhones'; import { Requester } from './staging/Requests'; import type { User } from './types'; import { loadStaticTranslations } from './staging/utils'; import brandConfigs from './staging/static/brands.json'; import LoginModal from './staging/LoginModal'; import SmartFAQDebugTools, { cabinBaggageArticleId, } from './staging/SmartFAQDebugTools'; type Props = {||}; type State = {| openArticle: ?string, isOpen: boolean, showLoginModal: boolean, showPhoneLines: boolean, user: ?User, loginToken: ?string, kwAuthToken: string, simpleToken: string, showEmergencies: boolean, showPriorityLine: boolean, enableChat: boolean, forceChat: boolean, brand: string, language: string, translations: { [key: string]: string }, languageDirection: string, bid: ?number, |}; const emergencies = [ 'Because of the middle age ways how to get to Prague Airport and all donkeys are at strike, we are receiving far more contacts than usual. Please solve your request in our shiny mobile app.', 'The political unrest in Catalan republic has affected many flights and we are experiencing a high number of contacts. Please departure to Belgium to avoid prison.', ]; const chatConfig = { CHAT_GUID: process.env.CHAT_GUID || '', CHAT_DEPLOYMENT_KEY: process.env.CHAT_DEPLOYMENT_KEY || '', CHAT_ORG_ID: process.env.CHAT_ORG_ID || '', CHAT_QUEUE_NAME: process.env.CHAT_QUEUE_NAME || 'CHAT TEST', }; const getUser = (loginToken: string, kwAuthUser: ?string) => { if (loginToken) { return { id: '1', email: 'joe.doe@example.com', firstname: 'Joe', lastname: 'Doe', }; } if (kwAuthUser) { return { id: null, email: 'joe.doe@example.com', firstname: null, lastname: null, }; } return null; }; class Root extends React.Component<Props, State> { input: ?HTMLInputElement; constructor(props) { super(props); const loginToken = Cookies.get('loginToken'); const simpleToken = Cookies.get('simpleToken'); const kwAuthToken = Cookies.get('kwAuthToken'); const forceChat = sessionStorage.getItem('forceChat'); window.GuaranteeChatForce = forceChat ? Boolean(parseInt(forceChat)) : false; // helpers for cypress const enableChat = Cookies.get('enableChat') ? Boolean(parseInt(Cookies.get('enableChat'))) : true; const showEmergencies = Cookies.get('showEmergencies') ? Boolean(parseInt(Cookies.get('showEmergencies'))) : false; const bid = Cookies.get('selectedBooking') ? Number(Cookies.get('selectedBooking')) : null; const showArticle = Cookies.get('showArticle') ? Boolean(parseInt(Cookies.get('showArticle'))) : false; const brand = Cookies.get('brand') || 'kiwicom'; this.state = { openArticle: showArticle ? cabinBaggageArticleId : null, isOpen: true, user: getUser(loginToken, kwAuthToken), loginToken, simpleToken, kwAuthToken, enableChat, showPriorityLine: true, forceChat: window.GuaranteeChatForce, showEmergencies, showLoginModal: false, brand, language: 'en', translations: loadStaticTranslations('en'), languageDirection: 'ltr', bid, showPhoneLines: false, }; this.setupLogs(); } componentDidMount() { window.addEventListener('keydown', this.onKeyDown); } componentWillUnmount() { window.removeEventListener('keydown', this.onKeyDown); } onKeyDown = e => { if (e.noInputFocus) { return; } this.input && this.input.focus(); }; onToggleChat = () => { this.setState(({ enableChat }) => ({ enableChat: !enableChat })); }; onForceChat = () => { if (typeof window === 'undefined') { return; } const forceChat = !window.GuaranteeChatForce; sessionStorage.setItem('forceChat', forceChat ? '1' : '0'); window.GuaranteeChatForce = forceChat; this.setState({ forceChat }); }; setupLogs = () => { if ( process.env.NODE_ENV === 'production' && process.env.SENTRY_URL_STAGING ) { window.Raven = Raven; Raven.config(process.env.SENTRY_URL_STAGING).install(); } }; processLogin = async (email: string, password: string) => { if (!(email && password)) { console.error('Testing user not set in env vars.'); return; } const loginToken = await Requester.login( email, password, '', this.state.brand, ); Cookies.set('loginToken', loginToken); this.setState(() => ({ showLoginModal: false, loginToken: loginToken, user: getUser(loginToken), })); }; handleLogin = () => { this.setState({ showLoginModal: true }); }; handleLogout = async () => { this.setState({ user: null, loginToken: null, simpleToken: '', kwAuthToken: '', }); Cookies.remove('loginToken'); Cookies.remove('simpleToken'); Cookies.remove('kwAuthToken'); }; handleBidChange = e => { const value = e.target.value; const bid = value ? Number(value) : null; this.setState({ bid: Number.isFinite(bid) ? bid : null }); }; handleTokenChange = e => { this.setState({ simpleToken: e.target.value }); }; handleKwTokenChange = e => { this.setState({ kwAuthToken: e.target.value }); }; toggleApp = () => { this.setState(({ isOpen }) => ({ isOpen: !isOpen })); }; handleToggleSmartFAQ = (shouldBeOpened: boolean) => { this.setState({ isOpen: shouldBeOpened, openArticle: null }); }; toggleEmergencies = () => { this.setState(({ showEmergencies }) => ({ showEmergencies: !showEmergencies, })); }; togglePhonesList = () => { this.setState(({ showPhoneLines }) => ({ showPhoneLines: !showPhoneLines, })); }; togglePriorityLine = () => { this.setState(({ showPriorityLine }) => ({ showPriorityLine: !showPriorityLine, })); }; changeLanguage = (e: SyntheticInputEvent<HTMLInputElement>) => { const language = e.target.value; this.setState({ language, translations: loadStaticTranslations(language) }); }; changelanguageDirection = (e: SyntheticInputEvent<HTMLInputElement>) => { this.setState({ languageDirection: e.target.value }); }; changeBrand = (e: SyntheticInputEvent<HTMLInputElement>) => { const brand = e.target.value; this.setState({ brand }); Cookies.set('brand', brand); }; render() { const { isOpen, showEmergencies, language, languageDirection, brand, showLoginModal, showPhoneLines, } = this.state; const brandConfig = brandConfigs[brand] || brandConfigs['kiwicom']; const isRtl = languageDirection === 'rtl'; const theme = getBrandTheme(brandConfig, isRtl); return ( <div> {showLoginModal && ( <LoginModal onSubmit={(email, password) => this.processLogin(email, password)} onClose={() => this.setState({ showLoginModal: false })} /> )} <div className="toggler" onKeyUp={() => {}} role="button" tabIndex="-1" onClick={this.toggleApp} > Toggle SmartFAQ </div> <div className="mockedMainView"> <div> <h3>Show some emergencies</h3> <input type="checkbox" checked={showEmergencies} onChange={this.toggleEmergencies} /> <h3>Enable chat</h3> <input type="checkbox" checked={this.state.enableChat} onChange={this.onToggleChat} /> <h3>Force chat to be always available</h3> <input type="checkbox" onChange={this.onForceChat} checked={this.state.forceChat} /> <h3>Show Customer Support Phones List</h3> <input type="checkbox" onChange={this.togglePhonesList} checked={this.state.showPhoneLines} /> <br /> <label htmlFor="priorityLine"> show priority line <input id="priorityLine" type="checkbox" onChange={this.togglePriorityLine} checked={this.state.showPriorityLine} /> </label> <h3>Set BID & simple token for debugging.</h3> <input onChange={this.handleBidChange} value={this.state.bid || ''} placeholder="BID" /> <input onChange={this.handleTokenChange} value={this.state.simpleToken} placeholder="Simple token" /> <div> <h3>Set KW-Auth-Token for debugging.</h3> <input onChange={this.handleKwTokenChange} value={this.state.kwAuthToken} placeholder="KW-Auth-Token" /> </div> <h3>Change languages</h3> <label htmlFor="en-GB"> <input type="radio" value="en" id="en-GB" checked={language === 'en'} onChange={this.changeLanguage} /> English(en-GB) </label> <label htmlFor="es-ES"> <input type="radio" value="es" id="es-ES" checked={language === 'es'} onChange={this.changeLanguage} /> Spanish(es-ES) </label> <label htmlFor="cs-CZ"> <input type="radio" value="cz" id="cs-CZ" checked={language === 'cz'} onChange={this.changeLanguage} /> Czech(cs-CZ) </label> <h3>Change brand</h3> <label htmlFor="kiwicom"> <input type="radio" value="kiwicom" id="kiwicom" checked={brand === 'kiwicom'} onChange={this.changeBrand} /> Kiwi.com </label> <label htmlFor="visitberlin"> <input type="radio" value="visitberlin" id="visitberlin" checked={brand === 'visitberlin'} onChange={this.changeBrand} /> Visit Berlin </label> <label htmlFor="holidaypirates"> <input type="radio" value="holidaypirates" id="holidaypirates" checked={brand === 'holidaypirates'} onChange={this.changeBrand} /> Holiday Pirates </label> <h3>Change from LTR to RTL languages</h3> <label htmlFor="LTR"> <input type="radio" value="ltr" id="LTR" checked={languageDirection === 'ltr'} onChange={this.changelanguageDirection} /> LTR </label> <label htmlFor="RTL"> <input type="radio" value="rtl" id="RTL" checked={languageDirection === 'rtl'} onChange={this.changelanguageDirection} /> RTL </label> <SmartFAQDebugTools showArticle={Boolean(this.state.openArticle)} onToggleArticle={() => this.setState(({ openArticle }) => ({ openArticle: openArticle ? null : cabinBaggageArticleId, isOpen: !openArticle, })) } /> </div> <div> <ContactFormChatApp.BookingInfoProvider value={{ onLoad: leg => console.log(leg) }} > <ContactFormChatApp language={language} brand={this.state.brand} translations={null} chatConfig={chatConfig} loginToken={this.state.loginToken} simpleToken={this.state.simpleToken} kwAuthToken={this.state.kwAuthToken} bid={this.state.bid} enableChat={this.state.enableChat} /> </ContactFormChatApp.BookingInfoProvider> </div> <div> {showPhoneLines && ( <CustomerSupportPhones language={language} showPriorityLine={this.state.showPriorityLine} translations={this.state.translations} linkToLearnMoreArticle={() => undefined} /> )} </div> </div> {isOpen && ( <div className="sidebarOverlay" onClick={() => this.handleToggleSmartFAQ(false)} /> )} <div className="sidebar" dir={languageDirection}> <ThemeProvider theme={{ ...(theme || defaultTokens) }}> <SmartFAQApp onToggle={this.handleToggleSmartFAQ} openArticle={this.state.openArticle} onLogin={this.handleLogin} onLogout={this.handleLogout} translations={this.state.translations} language={language} brand={this.state.brand} user={this.state.user} isOpen={isOpen} bid={this.state.bid} loginToken={this.state.loginToken} simpleToken={this.state.simpleToken} kwAuthToken={this.state.kwAuthToken} enableChat={this.state.enableChat} chatConfig={chatConfig} emergencies={showEmergencies ? emergencies : []} /> </ThemeProvider> </div> <style jsx global> {` .sidebar { position: fixed; right: 0; top: 0; } .sidebarOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .mockedMainView { margin-top: 100px; display: flex; } .toggler { position: fixed; top: 20px; left: 20px; cursor: pointer; color: white; border: 3px solid green; padding: 5px; outline: none; background: green; } `} </style> </div> ); } } (() => { const root = document.createElement('div'); root.setAttribute('id', 'root'); if (!document.body) { throw new Error('No browser?'); } document.body.appendChild(root); const id = document.getElementById('root'); if (!id) { throw new Error('Root element is missing!'); } ReactDOM.render(<Root />, id); })();