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

"use strict";

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

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

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

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/orbit-components/lib/Text"));

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

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

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

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

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 _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 = 'RkFRQXJ0aWNsZToyOA==';
exports.GUARANTEE_ARTICLE_ID = GUARANTEE_ARTICLE_ID;
var THRESHOLD = 4;
/*:: type ContainerProps = {|
  ...ContextRouter,
  article: ArticleContentType,
|};*/

/*:: type Props = {|
  ...ContainerProps,
  ...ThemeProps,
  loginToken: ?string,
  simpleToken: ?string,
  kwAuthToken: ?string,
  isInGuaranteeArticle: boolean,
  showGuaranteeChat: boolean,
|};*/

exports.THRESHOLD = THRESHOLD;
var ArticleContent = (0, _styledComponents.withTheme)(function (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'
    }
  }, React.createElement(NakedArticleContent, props))), React.createElement(_PageVariant.SidebarVersion, null, React.createElement(NakedArticleContent, props)));
});
var NakedArticleContent = (0, _styledComponents.withTheme)(function (props
/*: Props*/
) {
  var isLoggedIn = props.loginToken || props.simpleToken || props.kwAuthToken;
  var article = props.article,
      isInGuaranteeArticle = props.isInGuaranteeArticle,
      showGuaranteeChat = props.showGuaranteeChat;
  var showMessage = isInGuaranteeArticle && !showGuaranteeChat && !isLoggedIn && !_UrlHelpers.isWebView;

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

  var globalStyle = "\n    .guaranteeLoggedOut a {\n      color: ".concat(props.theme.orbit.colorTextLinkPrimaryHover, ";\n      text-decoration: none;\n    }\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 img {\n      width: 100%;\n      height: auto;\n      object-fit: contain;\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-3993082360" + " " + ((showBooking && isLoggedIn ? 'articleContentLoggedIn' : 'articleContentLoggedOut') || "")
  }, React.createElement(_Heading.default, {
    type: "title2"
  }, article.title || ''), React.createElement("div", {
    className: "jsx-3993082360" + " " + "faq-article-perex"
  }, React.createElement(_Text.default, {
    type: "attention",
    weight: "bold",
    element: "span"
  }, React.createElement(_Translate.default, {
    t: "smartfaq.faq.article.summary"
  })), React.createElement(_Text.default, {
    element: "span"
  }, " ", article.perex)), React.createElement(_Separator.default, null), article.content && React.createElement("div", {
    className: "jsx-3993082360" + " " + "faq-article-text"
  }, React.createElement(_FAQContentRender.default, null, article.content)), showGuaranteeChat && React.createElement(_GuaranteeChat.default, null), showMessage && React.createElement("div", {
    className: "jsx-3993082360" + " " + "guaranteeLoggedOut"
  }, React.createElement(_Translate.default, {
    html: true,
    t: "smartfaq.faq.article.guarantee.logged_out",
    values: {
      guaranteeChatThreshold: THRESHOLD
    }
  })), React.createElement(_Separator.default, {
    spaceAfter: "medium"
  }), React.createElement(_FAQArticleFeedback.default, {
    articleId: article.id
  }), React.createElement(_style.default, {
    styleId: "3993082360",
    css: ".articleContentLoggedIn.jsx-3993082360{padding:16px 72px 40px 80px;}.articleContentLoggedOut.jsx-3993082360{padding:16px 36px 40px;}.faq-article-perex.jsx-3993082360{padding:24px 0;line-height:20px;}.faq-article-text.jsx-3993082360{padding:24px 0;}.guaranteeLoggedOut.jsx-3993082360{margin-bottom:40px;}@media only screen and (max-width:901px){.articleContentLoggedIn.jsx-3993082360,.articleContentLoggedOut.jsx-3993082360{padding:16px;}}"
  }), React.createElement("style", {
    dangerouslySetInnerHTML: {
      __html: globalStyle
    }
  }));
});
var UnwrappedArticleContent = ArticleContent;
exports.UnwrappedArticleContent = UnwrappedArticleContent;

var WrappedArticle = function WrappedArticle(props
/*: ContainerProps*/
) {
  var _React$useContext2 = React.useContext(_GuaranteeChatInfo.GuaranteeChatContext),
      showGuaranteeChat = _React$useContext2.showGuaranteeChat; // show Guarantee Chat only in Guarantee article


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

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

    if (node.hash && node.hash !== "a56a77e367a6ed2e1d58ed16895fc6c0") {
      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;