@kiwicom/smart-faq/lib/pages/_app.js

Smart FAQ

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.theme = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));

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 _getPrototypeOf3 = _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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var React = _interopRequireWildcard(require("react"));

var _app = _interopRequireWildcard(require("next/app"));

var _reactTreeWalker = _interopRequireDefault(require("@jaredlunde/react-tree-walker"));

var _reactRelay = require("react-relay");

var _relayRuntime = require("relay-runtime");

var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");

var _NavBar = _interopRequireDefault(require("@kiwicom/nitro/lib/components/NavBar"));

var _Heading = _interopRequireDefault(require("@kiwicom/orbit-components/lib/Heading"));

var _Translate = _interopRequireDefault(require("@kiwicom/nitro/lib/components/Translate"));

var _InputField = _interopRequireDefault(require("@kiwicom/orbit-components/lib/InputField"));

var _Search = _interopRequireDefault(require("@kiwicom/orbit-components/lib/icons/Search"));

var _Stack = _interopRequireDefault(require("@kiwicom/orbit-components/lib/Stack"));

var _context8 = require("@kiwicom/nitro/lib/services/intl/context");

var _mobileDetect = _interopRequireDefault(require("mobile-detect"));

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

var _langInfos = require("../translations/langInfos");

var _environment = _interopRequireDefault(require("../shared/relay/environment"));

var _Contexts = _interopRequireDefault(require("../shared/ssr/Contexts"));

var _helpers = require("../shared/helpers");

var _SSRContext = _interopRequireDefault(require("../shared/ssr/SSRContext"));

var _countries = _interopRequireDefault(require("../../data/countries.json"));

var _languages = _interopRequireDefault(require("../../data/languages.json"));

var _airlines = _interopRequireDefault(require("../../data/airlines.json"));

var _continents = _interopRequireDefault(require("../../data/continents.json"));

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

var _brandLanguages = _interopRequireDefault(require("../../data/brandLanguages.json"));

var _GlobalStyles = _interopRequireDefault(require("../FullPage/GlobalStyles"));

// @flow
var TRANSLATION_FILES = require('../../data/translationsFiles.json');

var theme = {
  orbit: (0, _orbitDesignTokens.getTokens)()
};
exports.theme = theme;
var userContext = {
  user: null,
  brand: 'kiwicom',
  loginToken: null,
  simpleToken: null,
  kwAuthToken: null,
  onLogin: function onLogin() {},
  onLogout: function onLogout() {
    return Promise.resolve(null);
  }
};

var collectQueryDefinitions =
/*#__PURE__*/
function () {
  var _ref = (0, _asyncToGenerator2.default)(
  /*#__PURE__*/
  _regenerator.default.mark(function _callee(Component
  /*: React.ComponentType<Object>*/
  , location, screenWidth) {
    var fetchers, WrappedComponent;
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            fetchers = [];

            WrappedComponent = function WrappedComponent() {
              return React.createElement(_Contexts.default, {
                location: location,
                lng: "en",
                userContext: userContext,
                theme: theme,
                currencyId: "",
                countries: {},
                brand: {},
                language: {},
                fetched: {},
                intl: {},
                screenWidth: screenWidth
              }, React.createElement(Component, null));
            };

            _context.next = 4;
            return (0, _reactTreeWalker.default)(React.createElement(WrappedComponent, null), function (element, instance) {
              var fetcher = function (value) {
                return value && value.fetchSSRData;
              }(instance || element);

              if (fetcher) {
                fetchers.push(fetcher);
              }
            });

          case 4:
            return _context.abrupt("return", fetchers.map(function (fetcher) {
              return fetcher();
            }));

          case 5:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, this);
  }));

  return function collectQueryDefinitions(_x, _x2, _x3) {
    return _ref.apply(this, arguments);
  };
}();

var getTranslations = function getTranslations(phraseAppLanguageCode
/*: string*/
) {
  // eslint-disable-next-line import/no-dynamic-require
  return require("../../data/".concat(TRANSLATION_FILES[phraseAppLanguageCode]));
};
/*:: type QueryDefinition = {|
  query: string,
  variables: {
    [string]: mixed,
  },
|};*/


var MyApp =
/*#__PURE__*/
function (_App) {
  (0, _inherits2.default)(MyApp, _App);

  function MyApp() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, MyApp);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(MyApp)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "environment", (0, _environment.default)(null, null, _this.props.lng, _this.props.recordStoreFromSSR));
    return _this;
  }

  (0, _createClass2.default)(MyApp, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          Component = _this$props.Component,
          pageProps = _this$props.pageProps,
          location = _this$props.location,
          screenWidth = _this$props.screenWidth;
      var langInfo = _langInfos.langInfos[this.props.lng];
      var translations = this.props.translations ? this.props.translations : _enKeys.default;
      var intl = {
        language: langInfo,
        translations: translations
      };
      var brandId = 'kiwicom';
      var localeId = 'en';
      var brand = _brands.default[brandId];
      var language = _languages.default[localeId];
      var fetched = {
        brandLanguage: _brandLanguages.default[brandId][localeId],
        countries: _countries.default,
        airlines: _airlines.default,
        continents: _continents.default
      };
      var currencyId = 'eur';
      return React.createElement(_app.Container, null, React.createElement(_reactRelay.ReactRelayContext.Provider, {
        value: {
          environment: this.environment,
          variables: this.props.variablesFromSSR
        }
      }, React.createElement(_SSRContext.default.Provider, {
        value: {
          data: this.props.dataProps
        }
      }, React.createElement(_Contexts.default, {
        location: location,
        lng: this.props.lng,
        userContext: userContext,
        theme: theme,
        currencyId: currencyId,
        language: language,
        countries: _countries.default,
        brand: brand,
        fetched: fetched,
        intl: intl,
        screenWidth: screenWidth
      }, React.createElement("div", null, React.createElement(_NavBar.default, {
        headerLinks: React.createElement("div", null),
        chat: React.createElement("h1", null, "Chat"),
        subscription: React.createElement("h1", null, "Subscription"),
        debug: React.createElement("h1", null, "Debug"),
        portal: "modal-portal",
        starred: "",
        onOpenFaq: function onOpenFaq() {
          return undefined;
        },
        onSetModal: function onSetModal() {
          return undefined;
        },
        onLogoClick: function onLogoClick() {
          return undefined;
        },
        onSaveLanguage: function onSaveLanguage() {
          return undefined;
        },
        onSelectTrip: function onSelectTrip() {
          return undefined;
        }
      }), React.createElement("div", {
        className: "SmartFAQ"
      }, React.createElement(_Stack.default, {
        spaceAfter: "largest"
      }, React.createElement(_Heading.default, {
        type: "display",
        element: "h1",
        spaceAfter: "medium"
      }, React.createElement(_Translate.default, {
        t: "smartfaq.full_page.how_can_we_help_you"
      })), React.createElement(_context8.Consumer, null, function (intl) {
        return React.createElement(_InputField.default, {
          size: "small",
          type: "text",
          value: "",
          onChange: function onChange() {},
          placeholder: intl.translate("smartfaq.full_page.search.placeholder"),
          prefix: React.createElement(_Search.default, null)
        });
      })), React.createElement(Component, pageProps)), React.createElement(_GlobalStyles.default, null))), React.createElement("div", {
        id: "modal-portal"
      }))));
    }
  }], [{
    key: "fetchData",
    value: function () {
      var _fetchData = (0, _asyncToGenerator2.default)(
      /*#__PURE__*/
      _regenerator.default.mark(function _callee2(environment
      /*: Environment*/
      , query
      /*: string*/
      , variablesMap
      /*: Object*/
      ) {
        return _regenerator.default.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                _context2.prev = 0;
                _context2.next = 3;
                return (0, _reactRelay.fetchQuery)(environment, query, variablesMap);

              case 3:
                return _context2.abrupt("return", _context2.sent);

              case 6:
                _context2.prev = 6;
                _context2.t0 = _context2["catch"](0);
                console.warn('GraphQL error:', _context2.t0); // eslint-disable-line no-console

                return _context2.abrupt("return", {
                  relayFetchError: true
                });

              case 10:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this, [[0, 6]]);
      }));

      return function fetchData(_x4, _x5, _x6) {
        return _fetchData.apply(this, arguments);
      };
    }()
  }, {
    key: "getStaticInitialProps",
    value: function () {
      var _getStaticInitialProps = (0, _asyncToGenerator2.default)(
      /*#__PURE__*/
      _regenerator.default.mark(function _callee3(environment
      /*: Environment*/
      , Props
      /*: { [string]: mixed }*/
      ) {
        return _regenerator.default.wrap(function _callee3$(_context3) {
          while (1) {
            switch (_context3.prev = _context3.next) {
              case 0:
                return _context3.abrupt("return", (0, _objectSpread2.default)({
                  dataProps: {},
                  variablesFromSSR: {},
                  recordStoreFromSSR: (0, _helpers.isBrowser)() ? {} : environment.getStore().getSource().toJSON()
                }, Props));

              case 1:
              case "end":
                return _context3.stop();
            }
          }
        }, _callee3, this);
      }));

      return function getStaticInitialProps(_x7, _x8) {
        return _getStaticInitialProps.apply(this, arguments);
      };
    }()
  }, {
    key: "getDynamicInitialProps",
    value: function () {
      var _getDynamicInitialProps = (0, _asyncToGenerator2.default)(
      /*#__PURE__*/
      _regenerator.default.mark(function _callee4(queryDefinitions
      /*: Array<QueryDefinition>*/
      , environment
      /*: Environment*/
      , ctx
      /*: Object*/
      , Props
      /*: { [string]: mixed }*/
      ) {
        var variables, dataProps;
        return _regenerator.default.wrap(function _callee4$(_context4) {
          while (1) {
            switch (_context4.prev = _context4.next) {
              case 0:
                variables = queryDefinitions[0].variables;
                _context4.next = 3;
                return this.fetchData(environment, queryDefinitions[0].query, variables);

              case 3:
                dataProps = _context4.sent;

                if (dataProps.relayFetchError && ctx.res) {
                  ctx.res.status(500);
                }

                return _context4.abrupt("return", (0, _objectSpread2.default)({
                  dataProps: dataProps,
                  variablesFromSSR: variables,
                  recordStoreFromSSR: (0, _helpers.isBrowser)() ? {} : environment.getStore().getSource().toJSON()
                }, Props));

              case 6:
              case "end":
                return _context4.stop();
            }
          }
        }, _callee4, this);
      }));

      return function getDynamicInitialProps(_x9, _x10, _x11, _x12) {
        return _getDynamicInitialProps.apply(this, arguments);
      };
    }()
  }, {
    key: "getPhraseAppLanguageCode",
    value: function getPhraseAppLanguageCode(lng
    /*: string*/
    ) {
      try {
        return _langInfos.langInfos[lng].phraseApp;
      } catch (e) {
        return 'en-GB';
      }
    }
  }, {
    key: "getTranslationData",
    value: function () {
      var _getTranslationData = (0, _asyncToGenerator2.default)(
      /*#__PURE__*/
      _regenerator.default.mark(function _callee5(ctx
      /*: Object*/
      ) {
        var lng, phraseAppLanguageCode;
        return _regenerator.default.wrap(function _callee5$(_context5) {
          while (1) {
            switch (_context5.prev = _context5.next) {
              case 0:
                lng = ctx.query.lng || 'en';
                phraseAppLanguageCode = this.getPhraseAppLanguageCode(lng);
                return _context5.abrupt("return", {
                  lng: lng,
                  phraseAppLanguageCode: phraseAppLanguageCode,
                  translations: getTranslations(phraseAppLanguageCode)
                });

              case 3:
              case "end":
                return _context5.stop();
            }
          }
        }, _callee5, this);
      }));

      return function getTranslationData(_x13) {
        return _getTranslationData.apply(this, arguments);
      };
    }()
  }, {
    key: "getInitialProps",
    value: function () {
      var _getInitialProps = (0, _asyncToGenerator2.default)(
      /*#__PURE__*/
      _regenerator.default.mark(function _callee6(_ref2) {
        var _ctx$req;

        var Component, ctx, fullPath, location, device, screenWidth, queryDefinitions, Props, environment;
        return _regenerator.default.wrap(function _callee6$(_context6) {
          while (1) {
            switch (_context6.prev = _context6.next) {
              case 0:
                Component = _ref2.Component, ctx = _ref2.ctx;
                fullPath = (0, _helpers.isBrowser)() ? window.location.pathname : ctx === null || ctx === void 0 ? void 0 : (_ctx$req = ctx.req) === null || _ctx$req === void 0 ? void 0 : _ctx$req.url;
                location = fullPath.slice(3);
                device = new _mobileDetect.default(ctx.req.headers['user-agent']);
                screenWidth = device.is('mobile') ? 320 : device.is('tablet') ? 640 : 1280;
                _context6.next = 7;
                return collectQueryDefinitions(Component, location, screenWidth);

              case 7:
                queryDefinitions = _context6.sent;
                _context6.t0 = _objectSpread2.default;
                _context6.t1 = location;
                _context6.next = 12;
                return this.getPageProps(Component, ctx);

              case 12:
                _context6.t2 = _context6.sent;
                _context6.t3 = screenWidth;
                _context6.t4 = {
                  location: _context6.t1,
                  pageProps: _context6.t2,
                  screenWidth: _context6.t3
                };
                _context6.next = 17;
                return this.getTranslationData(ctx);

              case 17:
                _context6.t5 = _context6.sent;
                Props = (0, _context6.t0)(_context6.t4, _context6.t5);
                environment = (0, _environment.default)(null, null, Props.lng);

                if (!(queryDefinitions.length === 0)) {
                  _context6.next = 24;
                  break;
                }

                _context6.next = 23;
                return this.getStaticInitialProps(environment, Props);

              case 23:
                return _context6.abrupt("return", _context6.sent);

              case 24:
                _context6.next = 26;
                return this.getDynamicInitialProps(queryDefinitions, environment, ctx, Props);

              case 26:
                return _context6.abrupt("return", _context6.sent);

              case 27:
              case "end":
                return _context6.stop();
            }
          }
        }, _callee6, this);
      }));

      return function getInitialProps(_x14) {
        return _getInitialProps.apply(this, arguments);
      };
    }()
  }, {
    key: "getPageProps",
    value: function () {
      var _getPageProps = (0, _asyncToGenerator2.default)(
      /*#__PURE__*/
      _regenerator.default.mark(function _callee7(Component
      /*: Object*/
      , ctx
      /*: Object*/
      ) {
        return _regenerator.default.wrap(function _callee7$(_context7) {
          while (1) {
            switch (_context7.prev = _context7.next) {
              case 0:
                if (!Component.getInitialProps) {
                  _context7.next = 2;
                  break;
                }

                return _context7.abrupt("return", Component.getInitialProps(ctx));

              case 2:
                return _context7.abrupt("return", {});

              case 3:
              case "end":
                return _context7.stop();
            }
          }
        }, _callee7, this);
      }));

      return function getPageProps(_x15, _x16) {
        return _getPageProps.apply(this, arguments);
      };
    }()
  }]);
  return MyApp;
}(_app.default);

var _default = MyApp;
exports.default = _default;