@kiwicom/smart-faq
Version:
436 lines (372 loc) • 15.9 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 _keenTracking = _interopRequireDefault(require("keen-tracking"));
var _App = _interopRequireDefault(require("./App"));
var _Requests = require("./helpers/Requests");
// @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)), "cookieKey", void 0);
(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)), "setupTracker", function () {
var keen = new _keenTracking.default({
projectId: process.env.KEENIO_PROJECTID,
writeKey: process.env.KEENIO_WRITEKEY
});
var stagingCuckoo = {
infinario: function infinario(eventName
/*: LogEvent*/
, payload
/*: EventPayload*/
) {
console.info('Event recorded to KeenIO', eventName, payload);
keen.recordEvent(eventName, payload);
}
};
window.cuckoo = stagingCuckoo;
});
(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)), "handleLogin",
/*#__PURE__*/
function () {
var _ref2 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee(email, password) {
var loginToken;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return _Requests.Requester.login(email, password);
case 2:
loginToken = _context.sent;
_this.setState({
user: user,
loginToken: loginToken
});
_jsCookie.default.set(_this.cookieKey, loginToken);
return _context.abrupt("return", Promise.resolve(user));
case 6:
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)), "handleSocialLogin",
/*#__PURE__*/
(0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee2() {
var email, password, loginToken;
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
email = process.env.TEST_USER_EMAIL;
password = process.env.TEST_USER_PASSWORD;
if (email && password) {
_context2.next = 5;
break;
}
console.error('Testing user not set in env vars.');
return _context2.abrupt("return");
case 5:
_context2.next = 7;
return _Requests.Requester.login(email, password);
case 7:
loginToken = _context2.sent;
_jsCookie.default.set(_this.cookieKey, loginToken);
window.location.reload();
case 10:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
})));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleLogout",
/*#__PURE__*/
(0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee3() {
return _regenerator.default.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_this.setState({
user: null,
loginToken: null
});
_jsCookie.default.remove(_this.cookieKey);
case 2:
case "end":
return _context3.stop();
}
}
}, _callee3, 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)), "toggleApp", function () {
_this.setState(function (_ref5) {
var helpQuery = _ref5.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 (_ref6) {
var showEmergencies = _ref6.showEmergencies;
return {
showEmergencies: !showEmergencies
};
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeLanguage", function (e
/*: SyntheticInputEvent<HTMLInputElement>*/
) {
_this.setState({
language: e.target.value
});
});
_this.cookieKey = 'mockedLogin';
var _loginToken = _jsCookie.default.get(_this.cookieKey);
var simpleToken = null;
var _forceChat = sessionStorage.getItem('forceChat');
window.GuaranteeChatForce = _forceChat ? Boolean(parseInt(_forceChat)) : false;
_this.setupLogs(); // 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;
_this.state = {
isClosable: true,
user: _loginToken ? user : null,
loginToken: _loginToken,
simpleToken: simpleToken,
enableChat: _enableChat,
forceChat: window.GuaranteeChatForce,
showEmergencies: _showEmergencies,
helpQuery: helpQueryString ? helpQueryString : '/',
language: 'en'
};
_this.setupLogs();
_this.setupTracker();
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,
helpQuery = _this$state.helpQuery,
showEmergencies = _this$state.showEmergencies,
language = _this$state.language;
return _react.default.createElement("div", {
className: "jsx-358782926"
}, _react.default.createElement("div", {
onKeyUp: function onKeyUp() {},
role: "button",
tabIndex: "-1",
onClick: this.toggleApp,
className: "jsx-358782926" + " " + "toggler"
}, "Toggle SmartFAQ"), _react.default.createElement("div", {
className: "jsx-358782926" + " " + "mockedMainView"
}, _react.default.createElement("h3", {
className: "jsx-358782926"
}, "Input mimicking frontend search field."), _react.default.createElement("input", {
ref: function ref(c) {
return _this2.input = c;
},
className: "jsx-358782926"
}), _react.default.createElement("h3", {
className: "jsx-358782926"
}, "Show some emergencies"), _react.default.createElement("input", {
type: "checkbox",
value: showEmergencies,
onChange: this.toggleEmergencies,
className: "jsx-358782926"
}), _react.default.createElement("h3", {
className: "jsx-358782926"
}, "Enable chat"), _react.default.createElement("input", {
type: "checkbox",
checked: this.state.enableChat,
onChange: this.onToggleChat,
className: "jsx-358782926"
}), _react.default.createElement("h3", {
className: "jsx-358782926"
}, "Force chat (always available in Guarantee article)"), _react.default.createElement("input", {
type: "checkbox",
onChange: this.onForceChat,
checked: this.state.forceChat,
className: "jsx-358782926"
}), _react.default.createElement("h3", {
className: "jsx-358782926"
}, "Change languages"), _react.default.createElement("label", {
htmlFor: "en-GB",
className: "jsx-358782926"
}, _react.default.createElement("input", {
type: "radio",
value: "en",
id: "en-GB",
checked: language === 'en',
onChange: this.changeLanguage,
className: "jsx-358782926"
}), "English(en-GB)"), _react.default.createElement("label", {
htmlFor: "es-ES",
className: "jsx-358782926"
}, _react.default.createElement("input", {
type: "radio",
value: "es",
id: "es-ES",
checked: language === 'es',
onChange: this.changeLanguage,
className: "jsx-358782926"
}), "Spanish(es-ES)"), _react.default.createElement("label", {
htmlFor: "cs-CZ",
className: "jsx-358782926"
}, _react.default.createElement("input", {
type: "radio",
value: "cz",
id: "cs-CZ",
checked: language === 'cz',
onChange: this.changeLanguage,
className: "jsx-358782926"
}), "Czech(cs-CZ)")), helpQuery && _react.default.createElement("div", {
onClick: this.closeApp,
className: "jsx-358782926" + " " + "sidebarOverlay"
}), _react.default.createElement("div", {
className: "jsx-358782926" + " " + "sidebar"
}, _react.default.createElement(_App.default, {
onClose: this.closeApp,
onLogin: this.handleLogin,
onSocialLogin: this.handleSocialLogin,
onLogout: this.handleLogout,
language: language,
user: this.state.user,
route: helpQuery,
loginToken: this.state.loginToken,
simpleToken: this.state.simpleToken,
enableChat: this.state.enableChat,
chatConfig: chatConfig,
onAppWithOpenChatClose: this.handleAppWithOpenChatClose,
emergencies: showEmergencies ? emergencies : []
})), _react.default.createElement(_style.default, {
styleId: "358782926",
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;}.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);
})();