@kiwicom/smart-faq
Version:
Smart FAQ
572 lines (505 loc) • 22.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _style = _interopRequireDefault(require("styled-jsx/style"));
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 _SmartFAQApp = _interopRequireDefault(require("./SmartFAQApp"));
var _ContactFormChatApp = _interopRequireDefault(require("./ContactFormChatApp"));
var _CustomerSupportPhones = _interopRequireDefault(require("./CustomerSupportPhones"));
var _Requests = require("./SmartFAQ/helpers/Requests");
var _translationUtils = require("./shared/helpers/translationUtils");
var _brands = _interopRequireDefault(require("../static/brands.json"));
// @flow
/* eslint-disable import/no-extraneous-dependencies, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, no-console */
var user = {
id: '1',
email: 'joe.doe@example.com',
firstname: 'Joe',
lastname: 'Doe'
};
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 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__*/
(0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee() {
var email, password, loginToken;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
email = process.env.TEST_USER_EMAIL;
password = process.env.TEST_USER_PASSWORD;
if (email && password) {
_context.next = 5;
break;
}
console.error('Testing user not set in env vars.');
return _context.abrupt("return");
case 5:
_context.next = 7;
return _Requests.Requester.login(email, password, '', _this.state.brand);
case 7:
loginToken = _context.sent;
_jsCookie.default.set('loginToken', loginToken);
window.location.reload();
case 10:
case "end":
return _context.stop();
}
}
}, _callee, this);
})));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleLogin", function () {
_this.processLogin();
});
(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)), "handleAppWithOpenChatClose", function (isClosable
/*: boolean*/
) {
_this.setState({
isClosable: isClosable
});
});
(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 helpQuery = _ref4.helpQuery;
return {
helpQuery: helpQuery ? null : '/'
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "closeApp", function () {
if (!_this.state.isClosable) {
var canClose = window.confirm('Closing this window will cause the chat connection to be interrupted, do you want to proceed?');
if (!canClose) {
return;
}
}
_this.setState({
helpQuery: 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)), "toggleBooking", function () {
_this.setState(function (_ref6) {
var showBooking = _ref6.showBooking;
return {
showBooking: !showBooking
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "togglePhonesList", function () {
_this.setState(function (_ref7) {
var showPhonesList = _ref7.showPhonesList;
return {
showPhonesList: !showPhonesList
};
});
});
(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, _translationUtils.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 paramsString = window.location.search;
var params = new URLSearchParams(paramsString);
var helpQueryString = params.get('help');
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 _showBooking = _jsCookie.default.get('showBooking') ? Boolean(parseInt(_jsCookie.default.get('showBooking'))) : true;
var _bid = _jsCookie.default.get('selectedBooking') ? Number(_jsCookie.default.get('selectedBooking')) : null;
var _brand = _jsCookie.default.get('brand') || 'kiwicom';
_this.state = {
isClosable: true,
user: _loginToken ? user : null,
loginToken: _loginToken,
simpleToken: simpleToken,
kwAuthToken: kwAuthToken,
enableChat: _enableChat,
forceChat: window.GuaranteeChatForce,
showEmergencies: _showEmergencies,
showPhonesList: false,
showBooking: _showBooking,
helpQuery: helpQueryString ? helpQueryString : '/',
brand: _brand,
language: 'en',
translations: (0, _translationUtils.loadStaticTranslations)('en'),
languageDirection: 'ltr',
bid: _bid
};
_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 _this$state = this.state,
helpQuery = _this$state.helpQuery,
showEmergencies = _this$state.showEmergencies,
language = _this$state.language,
languageDirection = _this$state.languageDirection,
brand = _this$state.brand;
var brandConfig = _brands.default[brand] || _brands.default['kiwicom'];
return _react.default.createElement("div", {
className: "jsx-1144027778"
}, _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 booking screen"), _react.default.createElement("input", {
type: "checkbox",
checked: this.state.showBooking,
onChange: this.toggleBooking,
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.showPhonesList,
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("div", {
className: "jsx-1144027778"
}, this.state.enableChat && _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
})), _react.default.createElement("div", {
className: "jsx-1144027778"
}, this.state.showPhonesList && _react.default.createElement(_CustomerSupportPhones.default, {
language: language,
showPriorityLine: true,
translations: this.state.translations,
linkToLearnMoreArticle: function linkToLearnMoreArticle() {
return undefined;
}
}))), helpQuery && _react.default.createElement("div", {
onClick: this.closeApp,
className: "jsx-1144027778" + " " + "sidebarOverlay"
}), _react.default.createElement("div", {
dir: languageDirection,
className: "jsx-1144027778" + " " + "sidebar"
}, _react.default.createElement(_SmartFAQApp.default, {
onClose: this.closeApp,
onLogin: this.handleLogin,
onLogout: this.handleLogout,
translations: this.state.translations,
language: language,
direction: languageDirection,
brandConfig: brandConfig,
brand: this.state.brand,
user: this.state.user,
route: helpQuery,
bid: this.state.bid,
showBooking: this.state.showBooking,
loginToken: this.state.loginToken,
simpleToken: this.state.simpleToken,
kwAuthToken: this.state.kwAuthToken,
enableChat: this.state.enableChat,
chatConfig: chatConfig,
onToggleIsClosable: this.handleAppWithOpenChatClose,
emergencies: showEmergencies ? emergencies : [],
isChatActive: !this.state.isClosable
})), _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);
})();