@kiwicom/smart-faq/lib/index.js

"use strict";

require("core-js/modules/es.symbol");

require("core-js/modules/es.symbol.description");

require("core-js/modules/es.symbol.iterator");

require("core-js/modules/es.array.iterator");

require("core-js/modules/es.number.constructor");

require("core-js/modules/es.number.is-finite");

require("core-js/modules/es.object.get-own-property-descriptor");

require("core-js/modules/es.object.get-prototype-of");

require("core-js/modules/es.object.set-prototype-of");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.parse-int");

require("core-js/modules/es.promise");

require("core-js/modules/es.string.iterator");

require("core-js/modules/web.dom-collections.iterator");

var _style = _interopRequireDefault(require("styled-jsx/style"));

require("regenerator-runtime/runtime");

var React = _interopRequireWildcard(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 _Theme = require("@kiwicom/nitro/lib/records/Theme");

var _SmartFAQApp = _interopRequireDefault(require("./SmartFAQApp"));

var _ContactFormApp = _interopRequireDefault(require("./ContactFormApp"));

var _Requests = require("./staging/Requests");

var _enKeys = _interopRequireDefault(require("./translations/enKeys.json"));

var _brands = _interopRequireDefault(require("../data/brands.json"));

var _LoginModal = _interopRequireDefault(require("./staging/LoginModal"));

var _Meta = _interopRequireDefault(require("./staging/Meta"));

var _SmartFAQDebugTools = _interopRequireWildcard(require("./staging/SmartFAQDebugTools"));

var _process$env$CHAT_GUI, _process$env$CHAT_DEP, _process$env$CHAT_ORG, _process$env$CHAT_QUE;

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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_GUI = process.env.CHAT_GUID) !== null && _process$env$CHAT_GUI !== void 0 ? _process$env$CHAT_GUI : '',
  CHAT_DEPLOYMENT_KEY: (_process$env$CHAT_DEP = process.env.CHAT_DEPLOYMENT_KEY) !== null && _process$env$CHAT_DEP !== void 0 ? _process$env$CHAT_DEP : '',
  CHAT_ORG_ID: (_process$env$CHAT_ORG = process.env.CHAT_ORG_ID) !== null && _process$env$CHAT_ORG !== void 0 ? _process$env$CHAT_ORG : '',
  CHAT_QUEUE_NAME: (_process$env$CHAT_QUE = process.env.CHAT_QUEUE_NAME) !== null && _process$env$CHAT_QUE !== void 0 ? _process$env$CHAT_QUE : '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 doNothing = function doNothing() {};

var Root =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Root, _React$Component);

  function Root(props) {
    var _Cookies$get;

    var _this;

    _classCallCheck(this, Root);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Root).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "input", void 0);

    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
      if (e.noInputFocus) {
        return;
      }

      if (_this.input) {
        _this.input.focus();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "onToggleChat", function () {
      _this.setState(function (_ref) {
        var enableChat = _ref.enableChat;
        return {
          enableChat: !enableChat
        };
      });
    });

    _defineProperty(_assertThisInitialized(_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
      });
    });

    _defineProperty(_assertThisInitialized(_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();
      }
    });

    _defineProperty(_assertThisInitialized(_this), "processLogin",
    /*#__PURE__*/
    function () {
      var _ref2 = _asyncToGenerator(
      /*#__PURE__*/
      regeneratorRuntime.mark(function _callee(email
      /*: string*/
      , password
      /*: string*/
      ) {
        var loginToken;
        return regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                if (email && password) {
                  _context.next = 3;
                  break;
                }

                // eslint-disable-next-line no-console
                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);
      }));

      return function (_x, _x2) {
        return _ref2.apply(this, arguments);
      };
    }());

    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
      return _this.setState({
        showLoginModal: false
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleLoginOpen", function () {
      _this.setState({
        showLoginModal: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleLogin", function (email, password) {
      return _this.processLogin(email, password);
    });

    _defineProperty(_assertThisInitialized(_this), "handleSidebarClick", function () {
      return _this.handleToggleSmartFAQ(false);
    });

    _defineProperty(_assertThisInitialized(_this), "handleLogout", function () {
      _this.setState({
        user: null,
        loginToken: null,
        simpleToken: '',
        kwAuthToken: ''
      });

      _jsCookie.default.remove('loginToken');

      _jsCookie.default.remove('simpleToken');

      _jsCookie.default.remove('kwAuthToken');

      return Promise.resolve(true);
    });

    _defineProperty(_assertThisInitialized(_this), "handleBidChange", function (e) {
      var value = e.target.value;
      var bid = value ? Number(value) : null;

      _jsCookie.default.set('selectedBooking', bid);

      _this.setState({
        bid: Number.isFinite(bid) ? bid : null
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleTokenChange", function (e) {
      var simpleToken = e.target.value;

      _jsCookie.default.set('simpleToken', simpleToken);

      _this.setState({
        simpleToken: simpleToken
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleKwTokenChange", function (e) {
      _this.setState({
        kwAuthToken: e.target.value
      });
    });

    _defineProperty(_assertThisInitialized(_this), "toggleApp", function () {
      _this.setState(function (_ref3) {
        var isOpen = _ref3.isOpen;
        return {
          isOpen: !isOpen
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleToggleSmartFAQ", function (shouldBeOpened
    /*: boolean*/
    ) {
      _this.setState({
        isOpen: shouldBeOpened,
        openArticle: null
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleToggleArticle", function () {
      return _this.setState(function (_ref4) {
        var openArticle = _ref4.openArticle;
        return {
          openArticle: openArticle ? null : _SmartFAQDebugTools.cabinBaggageArticleId,
          isOpen: !openArticle
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "toggleEmergencies", function () {
      _this.setState(function (_ref5) {
        var showEmergencies = _ref5.showEmergencies;
        return {
          showEmergencies: !showEmergencies
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "togglePhonesList", function () {
      _this.setState(function (_ref6) {
        var showPhoneLines = _ref6.showPhoneLines;
        return {
          showPhoneLines: !showPhoneLines
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "togglePriorityLine", function () {
      _this.setState(function (_ref7) {
        var showPriorityLine = _ref7.showPriorityLine;
        return {
          showPriorityLine: !showPriorityLine
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "changelanguageDirection", function (e
    /*: SyntheticInputEvent<HTMLInputElement>*/
    ) {
      _this.setState({
        languageDirection: e.target.value
      });
    });

    _defineProperty(_assertThisInitialized(_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, 10)) : false; // helpers for cypress

    var _enableChat = _jsCookie.default.get('enableChat') ? Boolean(parseInt(_jsCookie.default.get('enableChat'), 10)) : true;

    var _showEmergencies = _jsCookie.default.get('showEmergencies') ? Boolean(parseInt(_jsCookie.default.get('showEmergencies'), 10)) : 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'), 10)) : false;

    var _brand = (_Cookies$get = _jsCookie.default.get('brand')) !== null && _Cookies$get !== void 0 ? _Cookies$get : '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: _enKeys.default,
      languageDirection: 'ltr',
      bid: _bid,
      showPhoneLines: false
    };

    _this.setupLogs();

    return _this;
  }

  _createClass(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 _brandConfigs$brand, _this$state$bid;

      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 = (_brandConfigs$brand = _brands.default[brand]) !== null && _brandConfigs$brand !== void 0 ? _brandConfigs$brand : _brands.default.kiwicom;
      var isRtl = languageDirection === 'rtl';
      var theme = (0, _Theme.getBrandTheme)(brandConfig, isRtl);
      return React.createElement(_styledComponents.ThemeProvider, {
        theme: theme
      }, React.createElement("div", {
        className: "jsx-1394551943"
      }, React.createElement(_Meta.default, null), showLoginModal && React.createElement(_LoginModal.default, {
        onSubmit: this.handleLogin,
        onClose: this.handleClose
      }), React.createElement("div", {
        onKeyUp: doNothing,
        role: "button",
        tabIndex: "-1",
        onClick: this.toggleApp,
        className: "jsx-1394551943" + " " + "toggler"
      }, "Toggle SmartFAQ"), React.createElement("div", {
        className: "jsx-1394551943" + " " + "mockedMainView"
      }, React.createElement("div", {
        className: "jsx-1394551943"
      }, React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Show some emergencies"), React.createElement("input", {
        type: "checkbox",
        checked: showEmergencies,
        onChange: this.toggleEmergencies,
        className: "jsx-1394551943"
      }), React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Enable chat"), React.createElement("input", {
        type: "checkbox",
        checked: this.state.enableChat,
        onChange: this.onToggleChat,
        className: "jsx-1394551943"
      }), React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Force chat to be always available"), React.createElement("input", {
        type: "checkbox",
        onChange: this.onForceChat,
        checked: this.state.forceChat,
        className: "jsx-1394551943"
      }), React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Show Customer Support Phones List"), React.createElement("input", {
        type: "checkbox",
        onChange: this.togglePhonesList,
        checked: this.state.showPhoneLines,
        className: "jsx-1394551943"
      }), React.createElement("br", {
        className: "jsx-1394551943"
      }), React.createElement("label", {
        htmlFor: "priorityLine",
        className: "jsx-1394551943"
      }, "show priority line", React.createElement("input", {
        id: "priorityLine",
        type: "checkbox",
        onChange: this.togglePriorityLine,
        checked: this.state.showPriorityLine,
        className: "jsx-1394551943"
      })), React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Set BID & simple token for debugging."), React.createElement("input", {
        onChange: this.handleBidChange,
        value: (_this$state$bid = this.state.bid) !== null && _this$state$bid !== void 0 ? _this$state$bid : '',
        placeholder: "BID",
        className: "jsx-1394551943"
      }), React.createElement("input", {
        onChange: this.handleTokenChange,
        value: this.state.simpleToken,
        placeholder: "Simple token",
        className: "jsx-1394551943"
      }), React.createElement("div", {
        className: "jsx-1394551943"
      }, React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Set KW-Auth-Token for debugging."), React.createElement("input", {
        onChange: this.handleKwTokenChange,
        value: this.state.kwAuthToken,
        placeholder: "KW-Auth-Token",
        className: "jsx-1394551943"
      })), React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Change brand"), React.createElement("label", {
        htmlFor: "kiwicom",
        className: "jsx-1394551943"
      }, React.createElement("input", {
        type: "radio",
        value: "kiwicom",
        id: "kiwicom",
        checked: brand === 'kiwicom',
        onChange: this.changeBrand,
        className: "jsx-1394551943"
      }), "Kiwi.com"), React.createElement("label", {
        htmlFor: "visitberlin",
        className: "jsx-1394551943"
      }, React.createElement("input", {
        type: "radio",
        value: "visitberlin",
        id: "visitberlin",
        checked: brand === 'visitberlin',
        onChange: this.changeBrand,
        className: "jsx-1394551943"
      }), "Visit Berlin"), React.createElement("label", {
        htmlFor: "holidaypirates",
        className: "jsx-1394551943"
      }, React.createElement("input", {
        type: "radio",
        value: "holidaypirates",
        id: "holidaypirates",
        checked: brand === 'holidaypirates',
        onChange: this.changeBrand,
        className: "jsx-1394551943"
      }), "Holiday Pirates"), React.createElement("h3", {
        className: "jsx-1394551943"
      }, "Change from LTR to RTL languages"), React.createElement("label", {
        htmlFor: "LTR",
        className: "jsx-1394551943"
      }, React.createElement("input", {
        type: "radio",
        value: "ltr",
        id: "LTR",
        checked: languageDirection === 'ltr',
        onChange: this.changelanguageDirection,
        className: "jsx-1394551943"
      }), "LTR"), React.createElement("label", {
        htmlFor: "RTL",
        className: "jsx-1394551943"
      }, React.createElement("input", {
        type: "radio",
        value: "rtl",
        id: "RTL",
        checked: languageDirection === 'rtl',
        onChange: this.changelanguageDirection,
        className: "jsx-1394551943"
      }), "RTL"), React.createElement(_SmartFAQDebugTools.default, {
        showArticle: Boolean(this.state.openArticle),
        onToggleArticle: this.handleToggleArticle
      })), React.createElement("div", {
        className: "jsx-1394551943"
      }, React.createElement(_ContactFormApp.default.BookingInfoProvider, {
        value: {
          // eslint-disable-next-line no-console
          onLoad: function onLoad(booking) {
            return console.log(booking);
          }
        }
      }, React.createElement(_ContactFormApp.default.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
      }))), React.createElement("div", {
        className: "jsx-1394551943"
      }, showPhoneLines && React.createElement(_ContactFormApp.default.CustomerSupportPhones, {
        language: language,
        showPriorityLine: this.state.showPriorityLine,
        translations: this.state.translations,
        linkToLearnMoreArticle: doNothing
      }))), isOpen && React.createElement("div", {
        onClick: this.handleSidebarClick,
        className: "jsx-1394551943" + " " + "sidebarOverlay"
      }), React.createElement("div", {
        dir: languageDirection,
        className: "jsx-1394551943" + " " + "sidebar"
      }, React.createElement(_SmartFAQApp.default, {
        onToggle: this.handleToggleSmartFAQ,
        openArticle: this.state.openArticle,
        onLogin: this.handleLoginOpen,
        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 : [],
        log: function log(event, props) {
          return (
            /* eslint-disable-next-line no-console */
            console.log('TRACKING', event, props)
          );
        }
      })), React.createElement(_style.default, {
        styleId: "1394551943",
        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.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.createElement(Root, null), id);
})();