@kiwicom/smart-faq/lib/shared/StaticFAQ/ArticleDetail/Article.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 = void 0;

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

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 React = _interopRequireWildcard(require("react"));

var _idx = _interopRequireDefault(require("idx"));

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

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

var _Button = _interopRequireDefault(require("@kiwicom/orbit-components/lib/Button"));

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

var _QueryRenderer = _interopRequireDefault(require("../../../SmartFAQ/relay/QueryRenderer"));

var _Loader = _interopRequireDefault(require("../../../SmartFAQ/common/Loader"));

var _PageVariant = require("../../../SmartFAQ/common/PageVariant");

var _ArticleContent = _interopRequireDefault(require("./ArticleContent"));

var _FAQArticleNotFound = _interopRequireDefault(require("./FAQArticleNotFound"));

var _CustomBreadcrumbs = _interopRequireDefault(require("../breadcrumbs/CustomBreadcrumbs"));

var _sectionFAQCategories = _interopRequireDefault(require("../sectionFAQCategories"));

var _StaticFAQError = _interopRequireDefault(require("../StaticFAQError"));

var _ScrollableContent = _interopRequireDefault(require("../../../SmartFAQ/common/ScrollableContent"));

// @flow
var queryFAQArticleDetail = function queryFAQArticleDetail() {
  var node = require("./__generated__/ArticleDetailQuery.graphql");

  if (node.hash && node.hash !== "65b4847f742f5438129863eb7001d18c") {
    console.error("The definition of 'ArticleDetailQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
  }

  return require("./__generated__/ArticleDetailQuery.graphql");
};

var queryFAQArticleDetailSearchResult = function queryFAQArticleDetailSearchResult() {
  var node = require("./__generated__/ArticleDetailSearchResultQuery.graphql");

  if (node.hash && node.hash !== "27fe3526e1f34bbeec766c9c1820093d") {
    console.error("The definition of 'ArticleDetailSearchResultQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data.");
  }

  return require("./__generated__/ArticleDetailSearchResultQuery.graphql");
};
/*:: type ArticleCategoryProps = {
  props: ?ArticleDetailQueryResponse,
  error: ?Error,
};*/

/*:: type ArticleSearchProps = {
  props: ?ArticleDetailSearchResultQueryResponse,
  error: ?Error,
};*/

/*:: type Props = {
  match: {
    params: {
      articleId: string,
      categoryId: string,
      [key: string]: ?string,
    },
    isExact: boolean,
    path: string,
    url: string,
  },
};*/


var style = new String(".breadcrumbs{margin:24px 36px;margin-bottom:-2px;}@media only screen and (max-width:901px){.breadcrumbs{margin:0 auto;background-color:#f5f7f9;}}");
style.__hash = "3647171825";
style.__scoped = ".breadcrumbs.jsx-737923248{margin:24px 36px;margin-bottom:-2px;}@media only screen and (max-width:901px){.breadcrumbs.jsx-737923248{margin:0 auto;background-color:#f5f7f9;}}";
style.__scopedHash = "737923248";

var Article =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Article, _React$Component);

  function Article() {
    var _getPrototypeOf2;

    var _this;

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

    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)(Article)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "renderLoading", function () {
      return React.createElement("div", {
        style: {
          height: '100%'
        }
      }, React.createElement(_Loader.default, {
        fullHeight: true
      }));
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "renderError", function () {
      return React.createElement("div", {
        className: "jsx-1057385989" + " " + "errorWrapper"
      }, React.createElement(_StaticFAQError.default, null), React.createElement(_style.default, {
        styleId: "1057385989",
        css: ".errorWrapper.jsx-1057385989{height:100%;padding:24px 40px;}"
      }));
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "renderArticleFromSearch", function (params
    /*: ArticleSearchProps*/
    ) {
      if (params.error) {
        return _this.renderError();
      }

      if (params.props) {
        var article = params.props.FAQArticle;

        if (!article) {
          return React.createElement(_FAQArticleNotFound.default, null);
        }

        return React.createElement(React.Fragment, null, React.createElement(_context.Consumer, null, function (intl) {
          return React.createElement(_CustomBreadcrumbs.default, {
            breadcrumbs: [{
              title: intl.translate("smartfaq.breadcrumb.search")
            }, {
              title: article.title
            }]
          });
        }), React.createElement(_ArticleContent.default, {
          article: article
        }), React.createElement("style", {
          jsx: true
        }, style));
      }

      return _this.renderLoading();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "renderArticleFromCategory", function (params
    /*: ArticleCategoryProps*/
    ) {
      if (params.error) {
        return _this.renderError();
      }

      if (params.props) {
        var category = params.props.FAQCategory;
        var article = params.props.FAQArticle;
        var breadcrumbs = null;

        if (!article) {
          return React.createElement(_FAQArticleNotFound.default, null);
        }

        if (_this.isSectionCategory()) {
          breadcrumbs = React.createElement(_context.Consumer, null, function (intl) {
            return React.createElement(_CustomBreadcrumbs.default, {
              breadcrumbs: [{
                title: intl.translate("smartfaq.breadcrumb.home")
              }, {
                title: article.title
              }]
            });
          });
        } else if (category) {
          breadcrumbs = React.createElement(_context.Consumer, null, function (intl) {
            return React.createElement(_CustomBreadcrumbs.default, {
              breadcrumbs: [{
                title: intl.translate("smartfaq.breadcrumb.home")
              }].concat(category.ancestors ? category.ancestors.filter(Boolean) : []).concat(category).concat([{
                title: intl.translate("smartfaq.breadcrumb.article")
              }])
            });
          });
        }

        return React.createElement(React.Fragment, null, breadcrumbs, React.createElement(_ArticleContent.default, {
          article: article
        }), React.createElement("style", {
          jsx: true
        }, style));
      }

      return _this.renderLoading();
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "getCategoryId", function () {
      return (0, _idx.default)(_this.props.match, function (_) {
        return _.params.categoryId;
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "isSectionCategory", function () {
      var categoryId = _this.getCategoryId();

      return categoryId && _sectionFAQCategories.default.includes(categoryId);
    });
    return _this;
  }

  (0, _createClass2.default)(Article, [{
    key: "getQueryRenderer",
    value: function getQueryRenderer() {
      var categoryId = this.getCategoryId();
      var articleId = (0, _idx.default)(this.props.match, function (_) {
        return _.params.articleId;
      });
      var isSearchResult = categoryId === 'search';

      if (isSearchResult) {
        return React.createElement(_QueryRenderer.default, {
          query: queryFAQArticleDetailSearchResult,
          variables: {
            id: articleId
          },
          render: this.renderArticleFromSearch
        });
      }

      return React.createElement(_QueryRenderer.default, {
        query: queryFAQArticleDetail,
        variables: {
          id: articleId,
          categoryId: categoryId,
          isSubcategory: !this.isSectionCategory()
        },
        render: this.renderArticleFromCategory
      });
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(React.Fragment, null, React.createElement(_PageVariant.FullPageVersion, null, React.createElement("div", {
        style: {
          marginBottom: '40px'
        }
      }, this.getQueryRenderer()), React.createElement(_Stack.default, {
        direction: "row",
        flex: false,
        spacing: "loose"
      }, React.createElement(_Button.default, null, "Sign In"), React.createElement("p", null, "Sign In with your booking and we will try to personalise the help towards your case as much as possible."))), React.createElement(_PageVariant.SidebarVersion, null, React.createElement(_ScrollableContent.default, {
        styles: "background-color: #ffffff"
      }, React.createElement("div", {
        className: "jsx-2250214588" + " " + "faq-article-detail"
      }, this.getQueryRenderer(), React.createElement(_style.default, {
        styleId: "2250214588",
        css: ".faq-article-detail.jsx-2250214588{background-color:#ffffff;width:100%;max-width:100vw;height:100%;}"
      })))));
    }
  }]);
  return Article;
}(React.Component);

var _default = Article;
exports.default = _default;