@kiwicom/smart-faq/lib/shared/StaticFAQ/ArticleDetail/ArticleContent.js

"use strict";

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

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

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

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

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

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

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

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

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

var _head = _interopRequireDefault(require("next/head"));

var _reactRouterDom = require("react-router-dom");

var _Text = _interopRequireDefault(require("@kiwicom/nitro/lib/components/Text"));

var _Text2 = _interopRequireDefault(require("@kiwicom/orbit-components/lib/Text"));

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

var _Separator = _interopRequireDefault(require("@kiwicom/orbit-components/lib/Separator"));

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

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

var _styledComponents = require("styled-components");

var _FAQContentRender = _interopRequireDefault(require("../../../SmartFAQ/common/FAQContentRender"));

var _GuaranteeChat = _interopRequireDefault(require("./GuaranteeChat"));

var _FAQArticleFeedback = _interopRequireDefault(require("../ArticleFeedback/FAQArticleFeedback"));

var _GuaranteeChatInfo = require("../../context/GuaranteeChatInfo");

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

var _BookingState = require("../../../SmartFAQ/context/BookingState");

var _User = require("../../../SmartFAQ/context/User");

var _UrlHelpers = require("../../../SmartFAQ/helpers/UrlHelpers");

var _LogLifecycle = _interopRequireDefault(require("../../cuckoo/components/LogLifecycle"));

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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var GUARANTEE_ARTICLE_ID = 28;
exports.GUARANTEE_ARTICLE_ID = GUARANTEE_ARTICLE_ID;
var THRESHOLD = 4;
/*:: type ContainerProps = {|
  ...ContextRouter,
  article: ArticleContentType,
|};*/

/*:: type Props = {|
  ...ContainerProps,
  ...ThemeProps,
  isInGuaranteeArticle: boolean,
  showGuaranteeChat: boolean,
|};*/

exports.THRESHOLD = THRESHOLD;

var ArticleContent = function ArticleContent(props
/*: Props*/
) {
  return React.createElement(React.Fragment, null, React.createElement(_PageVariant.FullPageVersion, null, React.createElement("div", {
    style: {
      border: "".concat(props.theme.orbit.borderWidthCard, " ").concat(props.theme.orbit.borderStyleCard, " ").concat(props.theme.orbit.borderColorCard),
      background: props.theme.orbit.backgroundCard,
      borderRadius: props.theme.orbit.borderRadiusNormal,
      paddingTop: '28px',
      marginBottom: '80px'
    }
  }, React.createElement(NakedArticleContent, props))), React.createElement(_PageVariant.SidebarVersion, null, React.createElement(NakedArticleContent, props)));
};

var NakedArticleContent = (0, _styledComponents.withTheme)(function (props
/*: Props*/
) {
  var _article$title;

  var _React$useContext = React.useContext(_User.UserContext),
      simpleToken = _React$useContext.simpleToken,
      kwAuthToken = _React$useContext.kwAuthToken,
      loginToken = _React$useContext.loginToken;

  var isLoggedIn = simpleToken || kwAuthToken || loginToken;
  var article = props.article,
      isInGuaranteeArticle = props.isInGuaranteeArticle,
      showGuaranteeChat = props.showGuaranteeChat;
  var showMessage = isInGuaranteeArticle && !showGuaranteeChat && !isLoggedIn && !_UrlHelpers.isWebView;

  var _React$useContext2 = React.useContext(_BookingState.BookingState),
      showBooking = _React$useContext2.showBooking;

  var globalStyle = "\n    .faq-article-text ul {\n      padding-left: 43px;\n      list-style: none;\n    }\n    .faq-article-text ul,\n    .faq-article-text ol {\n      margin-left: 20px;\n      padding-bottom: 20px;\n      margin-bottom: 10px;\n    }\n    .faq-article-text li:before {\n      content: '';\n      display: inline-block;\n      margin-right: 19px;\n      width: 6px;\n      height: 6px;\n      margin-bottom: 2px;\n    }\n    :global([dir='rtl']) .faq-article-text li:before {\n      margin-right: 0;\n      margin-left: 19px;\n    }\n    .faq-article-text ul li:before {\n      background-color: #d5dee7;\n    }\n    .faq-article-text a {\n      color: ".concat(props.theme.orbit.colorTextLinkPrimaryHover, ";\n      text-decoration: none;\n    }\n    .faq-article-text figure {\n      margin: 0;\n    }\n    .faq-article-text img {\n      max-width: 100%;\n    }\n    @supports (object-fit: scale-down) {\n      .faq-article-text img {\n        height: auto;\n        object-fit: scale-down;\n      }\n      .faq-article-text figure {\n        justify-content: center;\n      }\n    }\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      .faq-article-text img {\n        background-size: cover;\n      }\n      .faq-article-text figure {\n        display: flex;\n      }\n    }\n    .faq-article-text li {\n      display: list-item;\n      padding-top: 10px;\n      text-indent: -25px;\n    }\n    .faq-article-text li,\n    .faq-article-text div {\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 22px;\n    }\n  ");
  return React.createElement("div", {
    "data-cy": "faq-article-content",
    className: "jsx-1263747150" + " " + ((showBooking && isLoggedIn ? 'articleContentLoggedIn' : 'articleContentLoggedOut') || "")
  }, React.createElement(_Heading.default, {
    type: "title2"
  }, (_article$title = article.title) !== null && _article$title !== void 0 ? _article$title : ''), React.createElement("div", {
    className: "jsx-1263747150" + " " + "faq-article-perex"
  }, React.createElement(_Text.default, {
    t: "smartfaq.faq.article.summary",
    type: "attention",
    weight: "bold",
    element: "span"
  }), React.createElement(_Text2.default, {
    element: "span"
  }, " ", article.perex)), React.createElement(_Separator.default, null), article.content && React.createElement("div", {
    className: "jsx-1263747150" + " " + "faq-article-text"
  }, React.createElement(_FAQContentRender.default, {
    article: article
  }, article.content)), showGuaranteeChat && React.createElement(_GuaranteeChat.default, null), showMessage && React.createElement(_Stack.default, {
    spaceAfter: "large",
    dataTest: "GuaranteeLoggedOut"
  }, React.createElement(_Text.default, {
    html: true,
    t: "smartfaq.faq.article.guarantee.logged_out",
    values: {
      guaranteeChatThreshold: THRESHOLD
    }
  })), React.createElement(_Separator.default, {
    spaceAfter: "medium"
  }), React.createElement(_FAQArticleFeedback.default, {
    articleId: Number(article.originalId)
  }), React.createElement(_style.default, {
    styleId: "1263747150",
    css: ".articleContentLoggedIn.jsx-1263747150{padding:16px 72px 40px 80px;}.articleContentLoggedOut.jsx-1263747150{padding:16px 36px 40px;}.faq-article-perex.jsx-1263747150{padding:24px 0;line-height:20px;}.faq-article-text.jsx-1263747150{padding:24px 0;}@media only screen and (max-width:901px){.articleContentLoggedIn.jsx-1263747150,.articleContentLoggedOut.jsx-1263747150{padding:16px;}}"
  }), React.createElement("style", {
    dangerouslySetInnerHTML: {
      __html: globalStyle
    }
  }));
});
var UnwrappedArticleContent = ArticleContent;
exports.UnwrappedArticleContent = UnwrappedArticleContent;

var WrappedArticle = function WrappedArticle(props
/*: ContainerProps*/
) {
  var _props$article$title, _articleId, _props$article$title2;

  var _React$useContext3 = React.useContext(_GuaranteeChatInfo.GuaranteeChatContext),
      showGuaranteeChat = _React$useContext3.showGuaranteeChat;

  var theme = React.useContext(_styledComponents.ThemeContext); // show Guarantee Chat only in Guarantee article

  var articleId = props.match.params.articleId;
  var isInGuaranteeArticle = Number(articleId) === GUARANTEE_ARTICLE_ID;
  return React.createElement(React.Fragment, null, React.createElement(_head.default, null, React.createElement("title", null, "".concat((_props$article$title = props.article.title) !== null && _props$article$title !== void 0 ? _props$article$title : ''), " - Kiwi.com - Helpcenter")), React.createElement(ArticleContent, _extends({}, props, {
    theme: theme,
    showGuaranteeChat: showGuaranteeChat && isInGuaranteeArticle,
    isInGuaranteeArticle: isInGuaranteeArticle
  })), React.createElement(_LogLifecycle.default, {
    subCategory: "FAQs",
    actionMount: "articleOpened",
    actionUnmount: "articleClosed",
    props: {
      articleId: (_articleId = articleId) !== null && _articleId !== void 0 ? _articleId : '',
      articleName: (_props$article$title2 = props.article.title) !== null && _props$article$title2 !== void 0 ? _props$article$title2 : ''
    }
  }));
};

var _default = (0, _reactRelay.createFragmentContainer)((0, _reactRouterDom.withRouter)(WrappedArticle), {
  article: function article() {
    var node = require("./__generated__/ArticleContent_article.graphql");

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

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

exports.default = _default;