@kiwicom/smart-faq
Version:
Smart FAQ
643 lines (568 loc) • 24.2 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _style = _interopRequireDefault(require("styled-jsx/style"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _jsCookie = _interopRequireDefault(require("js-cookie"));
var _ravenJs = _interopRequireDefault(require("raven-js"));
var _styledComponents = require("styled-components");
var _index = require("@kiwicom/orbit-design-tokens/lib/index");
var _Theme = require("@kiwicom/nitro/lib/records/Theme");
var _SmartFAQApp = _interopRequireDefault(require("./SmartFAQApp"));
var _ContactFormChatApp = _interopRequireDefault(require("./ContactFormChatApp"));
var _CustomerSupportPhones = _interopRequireDefault(require("./CustomerSupportPhones"));
var _Requests = require("./staging/Requests");
var _utils = require("./staging/utils");
var _brands = _interopRequireDefault(require("./staging/static/brands.json"));
var _LoginModal = _interopRequireDefault(require("./staging/LoginModal"));
var _SmartFAQDebugTools = _interopRequireWildcard(require("./staging/SmartFAQDebugTools"));
// @flow
/* eslint-disable import/no-extraneous-dependencies, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, no-console */
var 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.'];
var 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'
};
var getUser = function 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;
};
var Root =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Root, _React$Component);
function Root(props) {
var _this;
(0, _classCallCheck2.default)(this, Root);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Root).call(this, props));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "input", void 0);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onKeyDown", function (e) {
if (e.noInputFocus) {
return;
}
_this.input && _this.input.focus();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onToggleChat", function () {
_this.setState(function (_ref) {
var enableChat = _ref.enableChat;
return {
enableChat: !enableChat
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onForceChat", function () {
if (typeof window === 'undefined') {
return;
}
var forceChat = !window.GuaranteeChatForce;
sessionStorage.setItem('forceChat', forceChat ? '1' : '0');
window.GuaranteeChatForce = forceChat;
_this.setState({
forceChat: forceChat
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "setupLogs", function () {
if (process.env.NODE_ENV === 'production' && process.env.SENTRY_URL_STAGING) {
window.Raven = _ravenJs.default;
_ravenJs.default.config(process.env.SENTRY_URL_STAGING).install();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "processLogin",
/*#__PURE__*/
function () {
var _ref2 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee(email
/*: string*/
, password
/*: string*/
) {
var loginToken;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (email && password) {
_context.next = 3;
break;
}
console.error('Testing user not set in env vars.');
return _context.abrupt("return");
case 3:
_context.next = 5;
return _Requests.Requester.login(email, password, '', _this.state.brand);
case 5:
loginToken = _context.sent;
_jsCookie.default.set('loginToken', loginToken);
_this.setState(function () {
return {
showLoginModal: false,
loginToken: loginToken,
user: getUser(loginToken)
};
});
case 8:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
return function (_x, _x2) {
return _ref2.apply(this, arguments);
};
}());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleLogin", function () {
_this.setState({
showLoginModal: true
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleLogout",
/*#__PURE__*/
(0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee2() {
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_this.setState({
user: null,
loginToken: null,
simpleToken: '',
kwAuthToken: ''
});
_jsCookie.default.remove('loginToken');
_jsCookie.default.remove('simpleToken');
_jsCookie.default.remove('kwAuthToken');
case 4:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
})));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleBidChange", function (e) {
var value = e.target.value;
var bid = value ? Number(value) : null;
_this.setState({
bid: Number.isFinite(bid) ? bid : null
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleTokenChange", function (e) {
_this.setState({
simpleToken: e.target.value
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleKwTokenChange", function (e) {
_this.setState({
kwAuthToken: e.target.value
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleApp", function () {
_this.setState(function (_ref4) {
var isOpen = _ref4.isOpen;
return {
isOpen: !isOpen
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleToggleSmartFAQ", function (shouldBeOpened
/*: boolean*/
) {
_this.setState({
isOpen: shouldBeOpened,
openArticle: null
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "toggleEmergencies", function () {
_this.setState(function (_ref5) {
var showEmergencies = _ref5.showEmergencies;
return {
showEmergencies: !showEmergencies
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "togglePhonesList", function () {
_this.setState(function (_ref6) {
var showPhoneLines = _ref6.showPhoneLines;
return {
showPhoneLines: !showPhoneLines
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "togglePriorityLine", function () {
_this.setState(function (_ref7) {
var showPriorityLine = _ref7.showPriorityLine;
return {
showPriorityLine: !showPriorityLine
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeLanguage", function (e
/*: SyntheticInputEvent<HTMLInputElement>*/
) {
var language = e.target.value;
_this.setState({
language: language,
translations: (0, _utils.loadStaticTranslations)(language)
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changelanguageDirection", function (e
/*: SyntheticInputEvent<HTMLInputElement>*/
) {
_this.setState({
languageDirection: e.target.value
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeBrand", function (e
/*: SyntheticInputEvent<HTMLInputElement>*/
) {
var brand = e.target.value;
_this.setState({
brand: brand
});
_jsCookie.default.set('brand', brand);
});
var _loginToken = _jsCookie.default.get('loginToken');
var simpleToken = _jsCookie.default.get('simpleToken');
var kwAuthToken = _jsCookie.default.get('kwAuthToken');
var _forceChat = sessionStorage.getItem('forceChat');
window.GuaranteeChatForce = _forceChat ? Boolean(parseInt(_forceChat)) : false; // helpers for cypress
var _enableChat = _jsCookie.default.get('enableChat') ? Boolean(parseInt(_jsCookie.default.get('enableChat'))) : true;
var _showEmergencies = _jsCookie.default.get('showEmergencies') ? Boolean(parseInt(_jsCookie.default.get('showEmergencies'))) : false;
var _bid = _jsCookie.default.get('selectedBooking') ? Number(_jsCookie.default.get('selectedBooking')) : null;
var showArticle = _jsCookie.default.get('showArticle') ? Boolean(parseInt(_jsCookie.default.get('showArticle'))) : false;
var _brand = _jsCookie.default.get('brand') || 'kiwicom';
_this.state = {
openArticle: showArticle ? _SmartFAQDebugTools.cabinBaggageArticleId : null,
isOpen: true,
user: getUser(_loginToken, kwAuthToken),
loginToken: _loginToken,
simpleToken: simpleToken,
kwAuthToken: kwAuthToken,
enableChat: _enableChat,
showPriorityLine: true,
forceChat: window.GuaranteeChatForce,
showEmergencies: _showEmergencies,
showLoginModal: false,
brand: _brand,
language: 'en',
translations: (0, _utils.loadStaticTranslations)('en'),
languageDirection: 'ltr',
bid: _bid,
showPhoneLines: false
};
_this.setupLogs();
return _this;
}
(0, _createClass2.default)(Root, [{
key: "componentDidMount",
value: function componentDidMount() {
window.addEventListener('keydown', this.onKeyDown);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
window.removeEventListener('keydown', this.onKeyDown);
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$state = this.state,
isOpen = _this$state.isOpen,
showEmergencies = _this$state.showEmergencies,
language = _this$state.language,
languageDirection = _this$state.languageDirection,
brand = _this$state.brand,
showLoginModal = _this$state.showLoginModal,
showPhoneLines = _this$state.showPhoneLines;
var brandConfig = _brands.default[brand] || _brands.default['kiwicom'];
var isRtl = languageDirection === 'rtl';
var theme = (0, _Theme.getBrandTheme)(brandConfig, isRtl);
return _react.default.createElement("div", {
className: "jsx-1144027778"
}, showLoginModal && _react.default.createElement(_LoginModal.default, {
onSubmit: function onSubmit(email, password) {
return _this2.processLogin(email, password);
},
onClose: function onClose() {
return _this2.setState({
showLoginModal: false
});
}
}), _react.default.createElement("div", {
onKeyUp: function onKeyUp() {},
role: "button",
tabIndex: "-1",
onClick: this.toggleApp,
className: "jsx-1144027778" + " " + "toggler"
}, "Toggle SmartFAQ"), _react.default.createElement("div", {
className: "jsx-1144027778" + " " + "mockedMainView"
}, _react.default.createElement("div", {
className: "jsx-1144027778"
}, _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Show some emergencies"), _react.default.createElement("input", {
type: "checkbox",
checked: showEmergencies,
onChange: this.toggleEmergencies,
className: "jsx-1144027778"
}), _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Enable chat"), _react.default.createElement("input", {
type: "checkbox",
checked: this.state.enableChat,
onChange: this.onToggleChat,
className: "jsx-1144027778"
}), _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Force chat to be always available"), _react.default.createElement("input", {
type: "checkbox",
onChange: this.onForceChat,
checked: this.state.forceChat,
className: "jsx-1144027778"
}), _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Show Customer Support Phones List"), _react.default.createElement("input", {
type: "checkbox",
onChange: this.togglePhonesList,
checked: this.state.showPhoneLines,
className: "jsx-1144027778"
}), _react.default.createElement("br", {
className: "jsx-1144027778"
}), _react.default.createElement("label", {
htmlFor: "priorityLine",
className: "jsx-1144027778"
}, "show priority line", _react.default.createElement("input", {
id: "priorityLine",
type: "checkbox",
onChange: this.togglePriorityLine,
checked: this.state.showPriorityLine,
className: "jsx-1144027778"
})), _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Set BID & simple token for debugging."), _react.default.createElement("input", {
onChange: this.handleBidChange,
value: this.state.bid || '',
placeholder: "BID",
className: "jsx-1144027778"
}), _react.default.createElement("input", {
onChange: this.handleTokenChange,
value: this.state.simpleToken,
placeholder: "Simple token",
className: "jsx-1144027778"
}), _react.default.createElement("div", {
className: "jsx-1144027778"
}, _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Set KW-Auth-Token for debugging."), _react.default.createElement("input", {
onChange: this.handleKwTokenChange,
value: this.state.kwAuthToken,
placeholder: "KW-Auth-Token",
className: "jsx-1144027778"
})), _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Change languages"), _react.default.createElement("label", {
htmlFor: "en-GB",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "en",
id: "en-GB",
checked: language === 'en',
onChange: this.changeLanguage,
className: "jsx-1144027778"
}), "English(en-GB)"), _react.default.createElement("label", {
htmlFor: "es-ES",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "es",
id: "es-ES",
checked: language === 'es',
onChange: this.changeLanguage,
className: "jsx-1144027778"
}), "Spanish(es-ES)"), _react.default.createElement("label", {
htmlFor: "cs-CZ",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "cz",
id: "cs-CZ",
checked: language === 'cz',
onChange: this.changeLanguage,
className: "jsx-1144027778"
}), "Czech(cs-CZ)"), _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Change brand"), _react.default.createElement("label", {
htmlFor: "kiwicom",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "kiwicom",
id: "kiwicom",
checked: brand === 'kiwicom',
onChange: this.changeBrand,
className: "jsx-1144027778"
}), "Kiwi.com"), _react.default.createElement("label", {
htmlFor: "visitberlin",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "visitberlin",
id: "visitberlin",
checked: brand === 'visitberlin',
onChange: this.changeBrand,
className: "jsx-1144027778"
}), "Visit Berlin"), _react.default.createElement("label", {
htmlFor: "holidaypirates",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "holidaypirates",
id: "holidaypirates",
checked: brand === 'holidaypirates',
onChange: this.changeBrand,
className: "jsx-1144027778"
}), "Holiday Pirates"), _react.default.createElement("h3", {
className: "jsx-1144027778"
}, "Change from LTR to RTL languages"), _react.default.createElement("label", {
htmlFor: "LTR",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "ltr",
id: "LTR",
checked: languageDirection === 'ltr',
onChange: this.changelanguageDirection,
className: "jsx-1144027778"
}), "LTR"), _react.default.createElement("label", {
htmlFor: "RTL",
className: "jsx-1144027778"
}, _react.default.createElement("input", {
type: "radio",
value: "rtl",
id: "RTL",
checked: languageDirection === 'rtl',
onChange: this.changelanguageDirection,
className: "jsx-1144027778"
}), "RTL"), _react.default.createElement(_SmartFAQDebugTools.default, {
showArticle: Boolean(this.state.openArticle),
onToggleArticle: function onToggleArticle() {
return _this2.setState(function (_ref8) {
var openArticle = _ref8.openArticle;
return {
openArticle: openArticle ? null : _SmartFAQDebugTools.cabinBaggageArticleId,
isOpen: !openArticle
};
});
}
})), _react.default.createElement("div", {
className: "jsx-1144027778"
}, _react.default.createElement(_ContactFormChatApp.default.BookingInfoProvider, {
value: {
onLoad: function onLoad(leg) {
return console.log(leg);
}
}
}, _react.default.createElement(_ContactFormChatApp.default, {
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
}))), _react.default.createElement("div", {
className: "jsx-1144027778"
}, showPhoneLines && _react.default.createElement(_CustomerSupportPhones.default, {
language: language,
showPriorityLine: this.state.showPriorityLine,
translations: this.state.translations,
linkToLearnMoreArticle: function linkToLearnMoreArticle() {
return undefined;
}
}))), isOpen && _react.default.createElement("div", {
onClick: function onClick() {
return _this2.handleToggleSmartFAQ(false);
},
className: "jsx-1144027778" + " " + "sidebarOverlay"
}), _react.default.createElement("div", {
dir: languageDirection,
className: "jsx-1144027778" + " " + "sidebar"
}, _react.default.createElement(_styledComponents.ThemeProvider, {
theme: (0, _objectSpread2.default)({}, theme || _index.defaultTokens)
}, _react.default.createElement(_SmartFAQApp.default, {
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 : []
}))), _react.default.createElement(_style.default, {
styleId: "1144027778",
css: ".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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.toggler{position:fixed;top:20px;left:20px;cursor:pointer;color:white;border:3px solid green;padding:5px;outline:none;background:green;}"
}));
}
}]);
return Root;
}(_react.default.Component);
(function () {
var root = document.createElement('div');
root.setAttribute('id', 'root');
if (!document.body) {
throw new Error('No browser?');
}
document.body.appendChild(root);
var id = document.getElementById('root');
if (!id) {
throw new Error('Root element is missing!');
}
_reactDom.default.render(_react.default.createElement(Root, null), id);
})();